/* 	1.0 Page Header
--------------------------------------------------- */

#page-header {
background: #004d99;
background: linear-gradient(to bottom, #004080 0%, #004d99 100%);
box-shadow: 0 0px 18px rgba(0,0,0,0.25);
}

#page-header .flag, #page-content .flag, #page-footer .flag {
height: 32px;
position: absolute;
top: 6px; left: -26px;
width: 60px;
}

/* 	1.1 Header Nav
--------------------------------------------------- */

#page-header #header-nav, #page-content #header-nav, #page-footer #header-nav {
background: #004d99 url(/graphics/css/header-bg.jpg) no-repeat 0 100%;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}

#page-header #header-nav .nav-bar, #page-content #header-nav .nav-bar, #page-footer #header-nav .nav-bar {margin-bottom: 9px;}

#page-header #logo, #page-content #logo, #page-footer #logo {
background: url(/graphics/css/header-logo.gif) no-repeat 111px 100%;
height: 100%;
position: absolute;
width: 411px;
}
#page-header #logo-pb, #page-content #logo-pb, #page-footer #logo-pb {
background: url(/graphics/css/header-logo-pb.gif) no-repeat 111px 100%;
height: 100%;
position: absolute;
width: 411px;
}
#page-header #logo a, #page-header #logo-pb a, #page-content #logo a, #page-content #logo-pb a, #page-footer #logo a, #page-footer #logo-pb a {display: block; height: 100%; text-indent: -9999px;}

#page-header #header-abbr, #page-content #header-abbr, #page-footer #header-abbr {
background: #004d99 url(/graphics/css/header-abbr-bg.jpg) no-repeat 0 100%;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}
#page-header #header-abbr p, #page-content #header-abbr p, #page-footer #header-abbr p {margin-bottom: 43px;}

#page-header #logo-abbr, #page-content #logo-abbr, #page-footer #logo-abbr {
background: url(/graphics/css/header-abbr-logo.gif) no-repeat 77px 100%;
height: 100%;
position: absolute;
width: 321px;
}
#page-header #logo-pb-abbr, #page-content #logo-pb-abbr, #page-footer #logo-pb-abbr {
background: url(/graphics/css/header-abbr-logo-pb.gif) no-repeat 77px 100%;
height: 100%;
position: absolute;
width: 321px;
}
#page-header #logo-abbr a, #page-header #logo-pb-abbr a, #page-content #logo-abbr a, #page-content #logo-pb-abbr a, #page-footer #logo-abbr a, #page-footer #logo-pb-abbr a {display: block; height: 100%; text-indent: -9999px;}


/* 	1.2 Header Toolbar
--------------------------------------------------- */

#page-header #header-toolbar, #page-content #header-toolbar, #page-footer #header-toolbar {
background: #d9caad;
background: linear-gradient(to bottom, #f2e2c2 0%, #d9caad 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#page-header #header-toolbar .span2, #page-content #header-toolbar .span2, #page-footer #header-toolbar .span2 {z-index: 3;}

#page-header .toolbar-menu, #page-content .toolbar-menu, #page-footer .toolbar-menu {margin-left: -12px; width: 196px;}
#page-header .toolbar-menu h5, #page-content .toolbar-menu h5, #page-footer .toolbar-menu h5 {margin-bottom: 0; padding: 6px 12px;}
#page-header .toolbar-menu h5 a, #page-content .toolbar-menu h5 a, #page-footer .toolbar-menu h5 a {display: block;}
#page-header .toolbar-menu h5 a:hover, #page-content .toolbar-menu h5 a:hover, #page-footer .toolbar-menu h5 a:hover {color: #e57300; text-decoration: none;}
#page-header .toolbar-menu h5 a.lg-dropdown, #page-content .toolbar-menu h5 a.lg-dropdown, #page-footer .toolbar-menu h5 a.lg-dropdown {background-image: url(/graphics/css/icon-lg-dropdown.gif);}
#page-header .toolbar-menu h5 a.lg-dropdown:hover, #page-content .toolbar-menu h5 a.lg-dropdown:hover, #page-footer .toolbar-menu h5 a.lg-dropdown:hover {background-image: url(/graphics/css/icon-lg-dropdown-hover.gif);}
#page-header .toolbar-menu h5 a .small, #page-content .toolbar-menu h5 a .small, #page-footer .toolbar-menu h5 a .small {color: #808080;}
#page-header .toolbar-menu h5 a span.lg-cart, #page-content .toolbar-menu h5 a span.lg-cart, #page-footer .toolbar-menu h5 a span.lg-cart {background-image: url(/graphics/css/icon-lg-cart.png);}
#page-header .toolbar-menu h5 a:hover span.lg-cart, #page-content .toolbar-menu h5 a:hover span.lg-cart, #page-footer .toolbar-menu h5 a:hover span.lg-cart {background-image: url(/graphics/css/icon-lg-cart-hover.png);}


#page-header .toolbar-menu.active, #page-content .toolbar-menu.active, #page-footer .toolbar-menu.active {
background: #333;
background: linear-gradient(to bottom, #4d4d4d 0%, #333333 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

#page-header .active h5 a, #page-content .active h5 a, #page-footer .active h5 a {color: #f2f2f2; text-shadow: 0 1px 0 rgba(0,0,0,0.25);}
#page-header .active h5 a:hover, #page-content .active h5 a:hover, #page-footer .active h5 a:hover {color: #f2f2f2;}
#page-header .active h5 a.lg-dropdown, #page-header .active h5 a.lg-dropdown:hover, #page-content .active h5 a.lg-dropdown, #page-content .active h5 a.lg-dropdown:hover, #page-footer .active h5 a.lg-dropdown, #page-footer .active h5 a.lg-dropdown:hover {background-image: url(/graphics/css/icon-lg-dropdown-active.gif);}
#page-header .active h5 a .small, #page-content .active h5 a .small, #page-footer .active h5 a .small {color: #bfbfbf;}
#page-header .active h5 a span.lg-cart, #page-header .active h5 a:hover span.lg-cart, #page-content .active h5 a span.lg-cart, #page-content .active h5 a:hover span.lg-cart, #page-footer .active h5 a span.lg-cart, #page-footer .active h5 a:hover span.lg-cart {background-image: url(/graphics/css/icon-lg-cart-active.png);}

#page-header .active .toolbar-container, #page-content .active .toolbar-container, #page-footer .active .toolbar-container {display: block;}
#page-header .toolbar-container, #page-content .toolbar-container, #page-footer .toolbar-container {
background: #f2f2f2;
border-top: 3px solid #333;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
display: none;
position: absolute;
top: 100%;
width: 196px;
z-index: 1;
}

#page-header .toolbar-dropdown-menu, #page-header .toolbar-slideout-menu, #page-content .toolbar-dropdown-menu, #page-content .toolbar-slideout-menu, #page-footer .toolbar-dropdown-menu, #page-footer .toolbar-slideout-menu {float: left; padding: 12px 12px 0;}
#page-header .toolbar-slideout-menu, #page-content .toolbar-slideout-menu, #page-footer .toolbar-slideout-menu {display: none;}

#page-header .toolbar-content, #page-content .toolbar-content, #page-footer .toolbar-content {float: left;	width: 172px;}
#page-header .toolbar-slideout-menu .toolbar-content, #page-content .toolbar-slideout-menu .toolbar-content, #page-footer .toolbar-slideout-menu .toolbar-content {width: 210px;}
#page-header .toolbar-slideout-menu .promo, #page-content .toolbar-slideout-menu .promo, #page-footer .toolbar-slideout-menu .promo {margin-left: 24px;}

#page-header .toolbar-content li a, #page-content .toolbar-content li a, #page-footer .toolbar-content li a {display: block; font-weight: bold;}
#page-header .toolbar-content li a:hover, #page-content .toolbar-content li a:hover, #page-footer .toolbar-content li a:hover {color: #e57300; text-decoration: none;}
#page-header .toolbar-content li a.selected, #page-content .toolbar-content li a.selected, #page-footer .toolbar-content li a.selected {color: #e57300;}
#page-header .toolbar-content li a span.small, #page-content .toolbar-content li a span.small, #page-footer .toolbar-content li a span.small {
color: #808080;
display: block;
font-size: 11px; font-size: 1.1rem;
font-weight: normal;
line-height: 1.5;
}

#page-header .with-subjects-slideout .toolbar-container, #page-content .with-subjects-slideout .toolbar-container, #page-footer .with-subjects-slideout .toolbar-container,
#page-header .with-state-slideout .toolbar-container, #page-content .with-state-slideout .toolbar-container, #page-footer .with-state-slideout .toolbar-container,
#page-header .with-library-slideout .toolbar-container, #page-content .with-library-slideout .toolbar-container, #page-footer .with-library-slideout .toolbar-container,
#page-header .with-subscriptions-slideout .toolbar-container, #page-content .with-subscriptions-slideout .toolbar-container, #page-footer .with-subscriptions-slideout .toolbar-container,
#page-header .with-fundraising-slideout .toolbar-container, #page-content .with-fundraising-slideout .toolbar-container, #page-footer .with-fundraising-slideout .toolbar-container {min-height: 434px; width: 664px;}

#page-header .with-subjects-slideout #subjects-slideout, #page-content .with-subjects-slideout #subjects-slideout, #page-footer .with-subjects-slideout #subjects-slideout,
#page-header .with-state-slideout #state-slideout, #page-content .with-state-slideout #state-slideout, #page-footer .with-state-slideout #state-slideout,
#page-header .with-library-slideout #library-slideout, #page-content .with-library-slideout #library-slideout, #page-footer .with-library-slideout #library-slideout,
#page-header .with-subscriptions-slideout #subscriptions-slideout, #page-content .with-subscriptions-slideout #subscriptions-slideout, #page-footer .with-subscriptions-slideout #subscriptions-slideout,
#page-header .with-fundraising-slideout #fundraising-slideout, #page-content .with-fundraising-slideout #fundraising-slideout, #page-footer .with-fundraising-slideout #fundraising-slideout {display: block;}

#page-header .with-subjects-slideout .toolbar-container, #page-content .with-subjects-slideout .toolbar-container, #page-footer .with-subjects-slideout .toolbar-container {background: #f2f2f2 url(/graphics/css/slideouts/series.png) no-repeat right bottom ;}
#page-header .with-state-slideout .toolbar-container, #page-content .with-state-slideout .toolbar-container, #page-footer .with-state-slideout .toolbar-container {background: #f2f2f2 url(/graphics/css/slideouts/common-core.png) no-repeat right bottom;}
#page-header .with-library-slideout .toolbar-container, #page-content .with-library-slideout .toolbar-container, #page-footer .with-library-slideout .toolbar-container {background: #f2f2f2 url(/graphics/css/slideouts/titlewise.png) no-repeat right bottom;}
#page-header .with-library-slideout .toolbar-container.twise-disabled, #page-content .with-library-slideout .toolbar-container.twise-disabled, #page-footer .with-library-slideout .toolbar-container.twise-disabled {background-image: none;}
#page-header .with-subscriptions-slideout .toolbar-container, #page-content .with-subscriptions-slideout .toolbar-container, #page-footer .with-subscriptions-slideout .toolbar-container {background: #f2f2f2 url(/graphics/css/slideouts/titleez.png) no-repeat right bottom;}
#page-header .with-fundraising-slideout .toolbar-container, #page-content .with-fundraising-slideout .toolbar-container, #page-footer .with-fundraising-slideout .toolbar-container {background: #f2f2f2 url(/graphics/css/slideouts/titlewish.png) no-repeat right bottom;}

#page-header #search-container, #page-content #search-container, #page-footer #search-container {float: right; left: -50%; position: relative;}
#page-header #search-container + p, #page-content #search-container + p, #page-footer #search-container + p {margin-bottom: 6px; padding-top: 1px;}
#page-header #search-bar, #page-content #search-bar, #page-footer #search-bar {left: 50%; margin-top: 6px; position: relative;}
#page-header #search-bar .active > a, #page-content #search-bar .active > a, #page-footer #search-bar .active > a {color: #333;}

#page-header #search-field, #page-header #search-submit, #page-content #search-field, #page-content #search-submit, #page-footer #search-field, #page-footer #search-submit,
#page-header #custnum-dropdown, #page-header #custnum-field, #page-header #custnum-submit, #page-content #custnum-dropdown, #page-content #custnum-field, #page-content #custnum-submit, #page-footer #custnum-dropdown, #page-footer #custnum-field, #page-footer #custnum-submit {float: left;}

#page-header #custnum-dropdown, #page-content #custnum-dropdown, #page-footer #custnum-dropdown {
background: #fff;
border: 1px solid #ccc;
border-right: none;
padding: 0 3px 0 9px;
position: relative;
}
#page-header #custnum-dropdown > span, #page-content #custnum-dropdown > span, #page-footer #custnum-dropdown > span {display: block; line-height: 23px; padding: 3px;}

#page-header #search-field, #page-header #custnum-field, #page-content #search-field, #page-content #custnum-field, #page-footer #search-field, #page-footer #custnum-field {position: relative;}
#page-header #search-field input, #page-header #custnum-field input, #page-content #search-field input, #page-content #custnum-field input, #page-footer #search-field input, #page-footer #custnum-field input {
border-right: none;
border-left: none;
height: 25px;
margin: 0;
}
#page-header #search-field .dropdown-menu, #page-content #search-field .dropdown-menu, #page-footer #search-field .dropdown-menu {left: -8px; margin-top: 5px; padding-top: 9px; padding-bottom: 6px;}
#page-header #search-field .dropdown-content, #page-content #search-field .dropdown-content, #page-footer #search-field .dropdown-content {width: 268px;}
#page-header #search-field .ui-autocomplete-loading, #page-content #search-field .ui-autocomplete-loading, #page-footer #search-field .ui-autocomplete-loading {
background: white url(/graphics/css/indicator.gif) right center no-repeat;
}

#page-header #search-submit input, #page-header #custnum-submit input, #page-content #search-submit input, #page-content #custnum-submit input, #page-footer #search-submit input, #page-footer #custnum-submit input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
height: 31px;
line-height: 29px;
margin: 0;
padding: 0 12px;
-webkit-appearance: none;
}
#page-header #search-submit input:active, #page-header #custnum-submit input:active, #page-content #search-submit input:active, #page-content #custnum-submit input:active, #page-footer #search-submit input:active, #page-footer #custnum-submit input:active {
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
}

/* 	2.0 Page Content
--------------------------------------------------- */

#page-content {border-top: 1px solid #fff;}
#page-content .container {padding-top: 18px;}

#page-header .feature, #page-content .feature, #page-footer .feature {
background-repeat: no-repeat;
border-radius: 6px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
height: 118px;
margin-bottom: 9px;
}

/* 	2.1 Home Page
--------------------------------------------------- */

#page-header #about-follett-genres-splash, #page-content #about-follett-genres-splash, #page-footer #about-follett-genres-splash {
background: #fff url(/graphics/landingpages/about-follett-genres/splash.png) no-repeat center right;
background-size: cover;
width: 80%;
height: 300px;
position: relative;
}

#page-header #explore-follett-genres-splash, #page-content #explore-follett-genres-splash, #page-footer #explore-follett-genres-splash {
background: #fff url(/graphics/landingpages/explore-follett-genres/splash.jpg) no-repeat center right;
background-size: cover;
height: 170px;
border-radius: 12px;
}

#page-header .square-num, #page-content .square-num, #page-footer .square-num{
background: #fff url(/graphics/css/square.png) no-repeat center center;
color: #fff;
font-size: 60px;
font-weight: 600;
text-align: center;
height: 60px;
width: 100px;
border-radius: 12px;
padding-top: 40px;
margin: auto;
margin-bottom: 30px;
}


/* 	2.9 "Fundraising" Landing Pages
--------------------------------------------------- */

#page-header #fundraising-billboard, #page-content #fundraising-billboard, #page-footer #fundraising-billboard {
background: url(/graphics/landingpages/titlewish/fundraising-billboard2.png) no-repeat center center;
height: 330px;
}

/* 	--------------------------------------------------
3.0 Page Footer
--------------------------------------------------- */

#page-footer p {font-size: 11px; font-size: 1.1rem; line-height: 1.5;}

/* 	--------------------------------------------------
4.0 Responsive Elements
4.1 Page Header
4.2 Page Content
4.3 Page Footer
--------------------------------------------------- */

/* 	4.1 Page Header
--------------------------------------------------- */

@media (min-width: 1230px) {
#page-header .flag, #page-content .flag, #page-footer .flag {left: -36px;}
#page-header #logo, #page-header #logo-pb, #page-content #logo, #page-content #logo-pb, #page-footer #logo, #page-footer #logo-pb {background-position: 101px 100%; width: 401px;}
#page-header #logo-abbr, #page-header #logo-pb-abbr, #page-content #logo-abbr, #page-content #logo-pb-abbr, #page-footer #logo-abbr, #page-footer #logo-pb-abbr {background-position: 67px 100%; width: 311px;}
#page-header .toolbar-menu, #page-header .toolbar-container, #page-content .toolbar-menu, #page-content .toolbar-container, #page-footer .toolbar-menu, #page-footer .toolbar-container {width: 234px;}
#page-header .toolbar-content, #page-content .toolbar-content, #page-footer .toolbar-content {width: 210px;}
#page-header .with-subjects-slideout .toolbar-container, #page-content .with-subjects-slideout .toolbar-container, #page-footer .with-subjects-slideout .toolbar-container,
#page-header .with-state-slideout .toolbar-container, #page-content .with-state-slideout .toolbar-container, #page-footer .with-state-slideout .toolbar-container,
#page-header .with-library-slideout .toolbar-container, #page-content .with-library-slideout .toolbar-container, #page-footer .with-library-slideout .toolbar-container,
#page-header .with-subscriptions-slideout .toolbar-container, #page-content .with-subscriptions-slideout .toolbar-container, #page-footer .with-subscriptions-slideout .toolbar-container,
#page-header .with-fundraising-slideout .toolbar-container, #page-content .with-fundraising-slideout .toolbar-container, #page-footer .with-fundraising-slideout .toolbar-container {width: 702px;}
#page-header #search-field input, #page-content #search-field input, #page-footer #search-field input {width: 364px;}
#page-header #search-field .dropdown-content, #page-content #search-field .dropdown-content, #page-footer #search-field .dropdown-content {width: 364px;}
}

/* 	--------------------------------------------------
5.0 Touch-Specific Elements
--------------------------------------------------- */

/* 	5.1 Links
--------------------------------------------------- */

.has-touch #page-header .toolbar-menu h5 a:hover, .has-touch #page-content .toolbar-menu h5 a:hover, .has-touch #page-footer .toolbar-menu h5 a:hover {color: #0066cc;}
.has-touch #page-header .toolbar-menu h5 a.lg-dropdown:hover, .has-touch #page-content .toolbar-menu h5 a.lg-dropdown:hover, .has-touch #page-footer .toolbar-menu h5 a.lg-dropdown:hover {background-image: url(/graphics/css/icon-lg-dropdown.gif);}
.has-touch #page-header .toolbar-menu h5 a:hover span.lg-cart, .has-touch #page-content .toolbar-menu h5 a:hover span.lg-cart, .has-touch #page-footer .toolbar-menu h5 a:hover span.lg-cart {background-image: url(/graphics/css/icon-lg-cart.png);}
.has-touch #page-header .active h5 a:hover, .has-touch #page-content .active h5 a:hover, .has-touch #page-footer .active h5 a:hover {color: #f2f2f2;}
.has-touch #page-header .toolbar-content li a:hover, .has-touch #page-content .toolbar-content li a:hover, .has-touch #page-footer .toolbar-content li a:hover {color: #0066cc; text-decoration: none;}
