/* 	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);
}

.flag {
	height: 32px;
	position: absolute;
	top: 6px; left: -26px;
	width: 60px;
}

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

#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);
}

#header-nav .nav-bar {margin-bottom: 9px;}

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

#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);
}
#header-abbr p {margin-bottom: 43px;}

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


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

#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);
}
#header-toolbar .span2 {z-index: 3;}

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


.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);
}

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

.active .toolbar-container {display: block;}
.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;
}

.toolbar-dropdown-menu, .toolbar-slideout-menu {float: left; padding: 12px 12px 0;}
.toolbar-slideout-menu {display: none;}

.toolbar-content {float: left;	width: 172px;}
.toolbar-slideout-menu .toolbar-content {width: 210px;}
.toolbar-slideout-menu .promo {margin-left: 24px;}

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

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

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

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

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

#search-field, #search-submit,
#custnum-dropdown, #custnum-field, #custnum-submit {float: left;}

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

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

#search-submit input, #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;
}
#search-submit input:active, #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;}

.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
--------------------------------------------------- */

#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;
}

#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;
}

.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
--------------------------------------------------- */

#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) {
	.flag {left: -36px;}
	#logo, #logo-pb {background-position: 101px 100%; width: 401px;}
	#logo-abbr, #logo-pb-abbr {background-position: 67px 100%; width: 311px;}
	.toolbar-menu, .toolbar-container {width: 234px;}
	.toolbar-content {width: 210px;}
	.with-subjects-slideout .toolbar-container,
	.with-state-slideout .toolbar-container,
	.with-library-slideout .toolbar-container,
	.with-subscriptions-slideout .toolbar-container,
	.with-fundraising-slideout .toolbar-container {width: 702px;}
	#search-field input {width: 364px;}
	#search-field .dropdown-content {width: 364px;}
}

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

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

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