/*this stylesheet is the customizations to the ibiblio-summer2016 theme*/

/*
Colors:
--------
defaulting body background is #FFF;
custom background for body is Carolina Blue #7bafd4
text color custom is a darker blue #3b94d3
white for background on sidebar/menu/nav/posts
blockquote text is #22313f
*/

/* Variables */
    :root {
    --bgcolormain: #FFF;
    --bgcolorside: #FFF;
    --bgcolorsideright: #7bafd4;	
    --mainbodytext: #000;
    --sidebartext: #21759b;
    --maintexthover: #ffffff;
    --sidebarfontfam: Helvetica, sans-serif;
    --mainfontfam: Geneva, sans-serif;
    }


/*mobile first styling*/


html {
font-size: 16px;
background: var(--bgcolormain) ;
}


body {
width: 100%;
margin: 0;
padding: 0;
font-size: 100%;
line-height: 1.125;
background: var(--bgcolormain);
font-family: var(mainfontfam);
}


div#wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: transparent;
font-size: 100%;
}


/*Accessibility */
.skip-link {
background-color: #f1f1f1;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
color: var(--sidebartext);
display: block;
font: bold 14px/normal "Noto Sans", sans-serif;
position: absolute;
top: -9em;
left: -9em;
outline: none;
width: 100%;
margin: 0;
padding: 15px 0;
text-decoration: none;
text-transform: none;
}


.skip-link:focus, skip-link:hover {
position: absolute;
top: 0;
left: 0;
clip: auto;
height: auto;
width: auto;
z-index: 100000;
}


/*sidebar should be full-width on xm and sm devices, then should be full-width only in landscape on >48em sizes */

div#sidebar-wrapper.affix {
width: 100%;
background: var(--bgcolorside);
font-size: 16px;
line-height: 1.15;
font-family: var(--sidebarfontfam);
color: var(--sidebartext);
text-align: left;
}

div#sidebar {
width: 95%;
margin-top: 1.5em;
margin: 0 auto;
padding: 2.5%;
}


div#sidebar h1.site-title.text-center > a.navbar-brand {
width: 100%;
margin: 2% auto;
padding: 2% 0;
text-align: center;
color: var(--sidebartext);
}


div#sidebar a.navbar-brand > img {
width: 100%;
max-width: 150px;
margin: 0 auto;
padding: 0;
}

div#sidebar p.text-center {
width: 100%;
font-size: 120%;
line-height: normal;
font-family: var(--sidebarfontfam);
color: var(--sidebartext);
padding: 5% 0;
clear: both;
}


/*site navigation*/
ul {
list-style-type: none;
}

div#sidebar nav[role="navigation"] {
background: var(--bgcolorside);
border: none;
padding: 0;
}

div#sidebar nav[role="navigation"] ul, div#sidebar nav[role="navigation"] li {
font-size: 100%;
line-height: 1.15;
text-align: center;
margin: 0 auto;
padding: 0;
background: var(--bgcolorside);
border: none;
color: var(--sidebartext);
}

div#sidebar nav[role="navigation"] div#primary-navigation {
margin-top: 5%;
}

div#sidebar nav[role="navigation"] div#primary-navigation li {
border-bottom: 1px solid rgba(59, 148, 211, 0.1);
}

div#sidebar nav[role="navigation"] div#primary-navigation ul.nav-pills:hover {
background-color: var(--bgcolorside);
color: var(--sidebartexthover);
}


/*complementary area under nav*/

div#complementary {
margin: 3em auto 0;
padding: 0;
}

div#complementary aside > h2 {
margin: 1.5em auto;
color: var(--sidebartext);
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 100%;
font-family: var(--sidebarfontfam);
font-weight: bold;
}

div#complementary aside > p {
font-size: 100%;
line-height: 1.15;
font-family: var(--sidebarfontfam);
font-weight: 400;
margin-bottom: 1.5em;
color: var(sidebartext);
}

div#complementary aside a {
color: var(--sidebartext);
text-decoration: underline;
text-decoration-color: var(--sidebartext);
}



/*main content: should clear the sidebar always, and should have footer at bottom*/


div#page-content-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
}

div#page-content-wrapper main#content {
width: calc(95%);
margin: 2% auto;
padding: 5%; 
font-size: 100%;
line-height: 1.15;
color: var(--mainbodytext);
font-family: var(--mainfontfam);
}

main#content div.item.record {
width: 95%;
margin: 0;
padding: .5em 0;
}


main#content p.view-items-link {
margin-top: 1.25rem;
font-size: 115%;
font-weight: 700;
}

main#content div.featured, main#content div.recent {
width: 92%;
padding: 4%;
}

main#content div.featured h2 {
width: 100%;
height: auto;
margin: 0 0 2% 0;
padding: 0;
font-size: 135%;
font-weight: 700;
color: var(--sidebartext);
}


main#content div.recent h2 {
width: 100%;
height: auto;
margin: 0 0 2% 0;
padding: 0;
font-size: 135%;
font-weight: 700;
color: var(--sidebartext);
}


/*footer*/

div#page-content-wrapper footer[role="contentinfo"] {
width: 95%;
margin: 2% auto;
padding: 2.5%; 
font-family: var(--sidebarfontfam);
}

div#page-content-wrapper footer[role="contentinfo"] div#footercontent {
width: 95%;
background-color: var(--bgcolormain);
font-size: 100%;
line-height: 1.15;
padding: 2.5%;
text-align: left;
}

div#page-content-wrapper footer div#footercontent div.center-block {
margin: 0 auto;
padding: 0;
text-align: center;
}


/*items views*/

div.browse-items {
font-family: var(--sidebarfontfam);
font-size: 100%;
line-height: 1.15;
text-align: left;
padding:  2%;
}


div.browse-items > div.item {
border: 2px solid #f1f1f1;
width: 100%;
margin: 0;
padding: 2% 0;
font-size: 100%;
line-height: 1.15;
}


div.item-images-gallery > div.no-image {
display: none;
}

div.panel-body.item-metadata > * {
margin: .5em;
padding: 0.25em 0;
font-family: var(--mainfontfam);
font-size: 100%;
line-height: 1.15;
text-align: left;
}

/*pagination*/


ul.pagination {
  width: 75%;
  margin: 5% auto;
  padding: 0;
  text-align: center;   
  font-family: var(--mainfontfam);
}

ul.pagination li {
  margin: 0 auto;
  padding: 0;
  height: auto;
  font-size: smaller;
  display: inline-block;
}


ul.pagination li.page-input > form, ul.pagination input {
  width: 3rem;
  margin: 0;
  padding: 0;
  
}

ul.pagination a {
    margin: 0;
    padding: 6px 8px;
    max-width: 2em;
    height: inherit;
  
}

.pager {
border-radius: .25em;
}


/*individual item */

div.item-metadata > * {
margin: 0;
padding: 0.25em 0;
}

div.item-single {
font-family: var(--mainfontfam);
font-size: 100%;
}


main#content h1, div.item-single h1 {
color: var(--mainbodytext);
text-decoration: underline;
font-size: 115%;
font-weight: 700;
padding: 13px;
}

div.item-metadata div.element-set > div.element {
width: 95%;
margin: 0;;
padding: 2.5%;
}

div.item-metadata h3 {
font-size: 110%;
font-family: var(--mainbodytext);
font-weight: normal;
}

div.panel-body.item-metadata div.element-text {
font-size: 100%;
font-family: var(--mainbodytext); 
font-weight: normal;

}

/*forms*/

form#search-form div.form-group, form#advanced-search-form div.form-group  {
width: 90%;
max-width: 768px;
margin: 0 auto;
padding: 2% 4%;
background-color: transparent;
font-family: var(--mainfontfam);
font-size: 100%;
line-height: 1.15;
}


form.advanced-search-form button {
background-color: var(--bgcolorside);
}




/*MEDIA QUERIES:
----------------
medium screens: 768px = 48em
laptops: 992px = 62em
desktops: 1200px = 75em
extra large screens: 1400px = 87.5em
*/



@media (max-width: 48em) {
/*first override the .affix for the sidebar if on mobile */
.affix {
position: static;
}

p {
  padding: 7px;
}

}

/*medium screens media query*/

@media (min-width: 48em) {

body {
font-size: 62.5%; /*adjusted font size against the 16px default font-size of root element*/
background-color: var(--bgcolormain);
}

#simple-pages-breadcrumbs {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 11px;
}

div#wrapper {
width: 100%;
margin: 0; 
padding: 0;
}	
	
div#sidebar-wrapper.affix {
top: 0;
width: 100%;
font-size: 1rem;
position: relative;
}	


div#sidebar nav[role="navigation"] {
margin-top: 3%;
width: 100%;
font-size: 100%;
}

div#sidebar nav[role="navigation"] ul {
width: 100%;
font-size: inherit;
}


div#sidebar nav[role="navigation"] div#primary-navigation {
margin-top: 0;
}

/*override Boostrap's navbar.collapse class so that ipads also have the collapsed nav menu*/
div#primary-navigation.collapse {
display: none;
}
  
/*make the width of the nav 100%*/
div#sidebar div.navbar-header.site-description {
margin: 0 auto;
padding: 4% 0;
width: 100%;
text-align: left;
}

div#sidebar-wrapper.affix h1.site-title img {
width: 100px;

}

div#sidebar p.text-center {
text-align: center;
}


 
div#page-content-wrapper {
/*Carolina Argyle */
background-color: #7BAFD4;
background-image:
repeating-linear-gradient(120deg, rgba(0,0,0,.1), rgba(0,0,0,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(0,0,0,.1), rgba(0,0,0,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.1) 75%, rgba(255,255,255,.1)),
linear-gradient(120deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.1) 75%, rgba(255,255,255,.1));
background-size: 70px 120px;		
}


div#page-content-wrapper main#content {
font-size: 1.2rem;
line-height: 1.225rem;
background-color: var(--bgcolormain);
font-family: var(--mainfontfam);
margin: 0 auto;
padding: 0;
}


div#page-content-wrapper footer {
margin: 0 auto;
padding: 0;
font-size: 1.2rem;
line-height: 1.225rem;
font-family: var(--sidebarfontfam);
color: var(--bgcolorside);
background-color: #FFF;
}

div#page-content-wrapper footer div#footercontent {
background-color: var(--bgcolormain);
font-size: 100%;
line-height: 1.15;
padding: 3% 0;
text-align: left;
}

div#page-content-wrapper footer div#footercontent div.center-block {
margin: 0 auto;
padding: 0;
text-align: center;
}

p {
  padding-top: 5px;
  padding-bottom: 5px;
}

}
/*end media query for medium screens */


/*media query for medium size laptops, 992px = 62em*/

@media (min-width: 62em) {
	
body {
width: 100%;
margin: 0;
padding: 0;
}

div#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
background-color: var(--bgcolormain);
}

div#sidebar-wrapper.affix {
margin: 0; 
padding: 0;
width: 30%;
height: auto;
position: fixed;
top: 0;
}
  
  
  
div#page-content-wrapper {
margin-left: 30.125%;
width: calc(70%);
background-color: var(--bgcolormain);
}
	
main#content {
margin: 0 auto;
padding: 10px;
width: 95%;
}

main#content h1, div.item-single h1 {
  padding: 10px;
}

p {
  padding-top: 5px;
  padding-bottom: 5px;
}

} /*end media query for smaller notebooks*/

#simple-pages-breadcrumbs {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 11px;
}


/*desktop and bigger: 1200px = 75em*/

@media (min-width: 75em) {

html {
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}


body {
font-size: 62.5%;
background-color: var(--bgcolormain);
}
	
div#wrapper {
margin: 0 auto;
padding: 0;
float: right;
}

div#sidebar-wrapper.affix {
z-index: 1;
height: auto;
font-size: 1.0rem;
line-height: 1.0rem;
text-align: left;
}

div#sidebar {
margin: 0 -100px 0 0;
padding: 7.75%;
width: 100%;

}

div#sidebar nav[role="navigation"], div#sidebar > div#complementary {
margin: 0 auto;
padding: 0 4%;
}
  

div#sidebar h1.site-title.text-center a.navbar-brand {
color: var(--sidebartext);
text-align: left;
font-size: 1.0rem;
margin: 0;
padding: 0;
}


div#sidebar nav[role="navigation"] li{
background-color: var(--bgcolorside);
font-family: var(--sidebarfontfam);
font-size: 120%;
line-height: 1.15;
color: var(--sidebartext);
text-align: left;
}

/*override Bootstrap's hover interaction*/
li[role="presentation"] > a:hover {
color: var(--sidebartext);
background-color: transparent;
}


div#complementary aside {
color: var(--sidebartext);
padding: 0;
font-size: 120%;
line-height: 2.5;
font-weight: 700;
}

div#complementary aside p#welcome {
color: var(--sidebartext);
margin: 0;
padding: 0;
font-family: var(--sidebarfontfam);
font-weight: bold;
}

div#page-content-wrapper {

/*Carolina Argyle */

box-sizing: border-box;  
background-color: #7BAFD4;
background-image:
repeating-linear-gradient(120deg, rgba(0,0,0,.1), rgba(0,0,0,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(0,0,0,.1), rgba(0,0,0,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.1) 75%, rgba(255,255,255,.1)),
linear-gradient(120deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.1) 75%, rgba(255,255,255,.1));
background-size: 70px 120px;
padding: 0;
font-size: 1.6em;
line-height: 1.6em;
display: block;
float: left;
margin-left: 30%;
width: 70.5882%;
}


div#page-content-wrapper main#content {
margin: 2.5%;
padding: 3%;
background-color: var(--bgcolormain);
font-size: 1.2rem;
line-height: 1.225rem;
}

div#page-content-wrapper footer {
margin: 2%;
padding: 2%;
font-size: 1.2rem;
line-height: 1.225rem;
font-family: var(--sidebarfontfamily);
color: var(--sidebartext);
background-color: var(--bgcolorside);
}

div#page-content-wrapper div#footercontent {
background-color: var(--bgcolorside);
font-size: 100%;
line-height: 1.15;
width: 85%;
margin: 0 auto;
padding: 3% 4.5%;
text-align: left;
}

div#page-content-wrapper footer div#footercontent div.center-block {
margin: 0 auto;
padding: 0;
text-align: center;
}

}
/*end large media query*/


/*extra large media query: 1400px = 87.5em*/
@media (min-width: 87.5em) {
	
html {
background-color: var(--bgcolorside);

}	

/*mimick the Wordpress Twenty-Fifteen stylesheet for layout here*/
body {
background-color: var(--bgcolorside);
width: calc(88%);
float: right;
}

div#wrapper {
width: 100%;
margin: 0 auto;
background-color: var(--bgcolorsideright);
}

div#sidebar-wrapper.affix {
width: calc(22% - 1em);
margin: 0 10% 0 0;
height: 100vmin;
padding: 0;
float: left;
position: fixed;
top: 0;
}

div#sidebar {
width: 100%;
margin: 0 auto;
padding: 1em;
}

div#page-content-wrapper {
width: calc(65% - 2em);
margin-left: calc(25% - 1em);
padding: 0 2em;		
}

} /*end extra large media query*/



/*print styles needed here*/

/*Fixes the padding for the Browse by Tag page*/
  
.hTagcloud {
   padding: 15;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    background-color: var(--bgcolormain);
}

.popular {
   padding: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
  
.v-popular {
   padding: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
  
.vv-popular {
  padding: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
  
.vvvv-popular {
  padding: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
  
.vvvvv-popular {
  padding: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
  
.vvvvvv-popular {
  padding: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
  
.vvvvvvv-popular {
  padding: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
  
.vvvvvvvv-popular {
  padding: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}

  
.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-color: currentcolor;
    background-color: var(--bgcolorside);
    color: var(--sidebartext);
}
  
.dropdown-menu > li > a:focus, .dropdown-menu > li > a {
    background-color: transparent;
    color: var(--sidebartext);
}
  
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    background-color: transparent;
    color: var(--sidebartext);
}
  
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: var(--bgcolorside);
    border-color: #337ab7;
    border-top-color: rgb(51, 122, 183);
    border-right-color: rgb(51, 122, 183);
    border-bottom-color: rgb(51, 122, 183);
    border-left-color: rgb(51, 122, 183);
    color: var(--sidebartext);
}
  
label {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}  

.dropdown-menu > li > a {
    white-space: normal;
}


h4 {
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
}

#simple-pages-breadcrumbs {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 11px;
}

a {
    color: var(--sidebartext);
}

.nav-pills > li > a:hover {
    color: var(--sidebartext);
}
