/*---- SECTION TITLES: GLOBAL, TYPOGRAPHY, LINKS, LISTS, IMAGES, HEADER, MENU, FOOTER ----*/
/*---- RESET ----*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* remember to define focus styles! */
:focus {outline: 0;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote {padding: 5px 40px 10px 40px; font-size: 1.1em;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
ul {list-style-type: none;}

/*---- GLOBAL ----*/

body {color: #333; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 62.5%; background-color: #7c7c7c; background-image: url('../images/body_bg.png'); background-repeat: repeat-x;}
#wrapper {border: 10px solid #e6e6e6; width: 980px; margin: 15px auto 30px; background-color: #fff; height: 100%;}
#containerA, #containerB, #containerC {clear: both;}
#leftSide, #contentLeft, #containerC {margin-top: 10px;}
.clear {clear: both;}
.red {border: 1px solid red;}
.pink {background-color: pink;}
.italic {font-style: italic;}
.bold {font-weight: bold;}
.center {text-align: center;}
.floatRight {float: right;}
.floatLeft {float: left;}
.inline {display: inline;}
.top10 {margin-top: 10px;}
.toTop {text-align: right; margin: 20px 20px 20px 0;}
div.facebook {font-size:10px; margin-top:10px}
ul.general {list-style-type: disc; padding-left: 15px;}
ul.general li {line-height: 1.1 em; font-size: 1.2em; padding-bottom: 5px;}
.half {width: 320px; float: left;}
.third {width: 210px; float: left;}
.white {background: #fff !important;}
	
/*---- TYPOGRAPHY ----*/

p {font-size: 1.2em; margin-bottom: 1em; line-height: 1.2em;}
p.recommends {float: right; font-size: .9em; color: #999;}
h1 {font-size: 1.8em; font-weight: bold; color: #556b02;}
h2 {font-size: 1.7em; margin: 5px 0 15px; font-weight: bold; color: #556b02;}
h3 {font-size: 1.6em; margin: 5px 0; font-weight: bold; color: #556b02;}
h4 {font-size: 1.5em; margin: 5px 0; font-weight: bold; color: #556b02;}
h5 {font-size: 1.3em; margin: 5px 0; font-weight: bold; color:#556b02;}

.title {margin-top: 40px;}
.italic {font-style: italic;}
.bold {font-weight: bold;}
strong {font-weight: bold;}
em {font-style: italic;}
.gray {color: #666;}


a:link, a:visited {text-decoration: none; color: #960;}
a:hover, a:active {color: #2d4f77;}

/*---- IMAGES ----*/

img.location {border: 1px solid #999; padding: 2px; margin: 0 100px 10px 10px;}
img.locationIndex {border: 1px solid #999; padding: 2px; width: 175px; margin-bottom: 10px;}
img.pearlBook {float: left; border: 1px solid #999; padding: 2px; margin: 10px 10px 2px 0; width: 125px;}
img.bookClub {float: right; border: 1px solid #999; padding: 2px; margin: 10px 0 2px 10px; width: 125px;}
div.slideshow img {width: 75px; border: 1px solid #2d4f77; padding: 2px; margin-right: 9px;}
img.highlight, div.highlight {border: 1px solid #999; padding: 2px; margin: 0 10px 10px 10px; float: right; background: #fff;}
div.highlight p.credit {text-align: right; font-size: .85em; margin-top: 5px;}

		
/*---- HEADER ----*/

div#header {margin: 5px 0;}
div#header h2 {position: relative; display: block; overflow: hidden; padding: 0; cursor: pointer; float: left; width: 500px; height: 40px; font-size: 1em; margin: 0; zoom: 1;}
div#header h2 a {display:block; height:40px; outline:none;}
div#header h2 a span.logo {height: 40px; width: 500px; position: absolute; top: 0; left: 0; background-image: url('../images/globalSprite.png'); background-repeat: no-repeat; background-position: 0 0;}

/*---- MENU ----*/

div#menu {width: 220px; margin-top: 20px;}
div#menu h3 {position: relative; display: block; overflow: hidden; margin: 0; padding: 0; cursor: pointer; width: 220px; height: 30px;}
div#menu h3 a {display:block; height:30px; outline:none;}
div#menu h3 span {height: 30px; width: 220px; position: absolute; top: 0; left: 0; background-image: url('../images/globalSprite.png'); background-repeat: no-repeat;}
div#menu ul {padding-bottom: 20px; width: 220px; overflow: hidden; background-image: url('../images/navBg.png');}
div#menu li {margin: 5px 10px 0 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 1.3em; line-height: 1.3em; list-style-type: none;}
div#menu li a:link, div#menu li a:visited {font-weight: normal; color: #e6e6e6;}
div#menu li a:hover, div#menu li a:active {color: #fff;}

span.catalog {background-position: 0 -40px;}
span.catalog:hover, span.catalog:active {background-position: -220px -40px;}
span.about {background-position: 0 -70px;}
h3.on span.about, span.about:hover, span.about:active {background-position: -220px -70px;}
span.explore {background-position: 0 -100px;}
h3.on span.explore, span.explore:hover, span.explore:active {background-position: -220px -100px;}
span.services {background-position: 0 -130px;}
h3.on span.services, span.services:hover, span.services:active {background-position: -220px -130px;}
span.reference {background-position: 0 -160px;}
h3.on span.reference, span.reference:hover, span.reference:active {background-position: -220px -160px;}
span.kids {background-position: 0 -190px;}
h3.on span.kids, span.kids:hover, span.kids:active {background-position: -220px -190px;}
span.special {background-position: 0 -220px;}
h3.on span.special, span.special:hover, span.special:active {background-position: -220px -220px;}
span.events {background-position: 0 -250px;}
h3.on span.events, span.events:hover, span.events:active {background-position: -220px -250px;}
span.focal {background-position: 0 -280px;}
h3.on span.focal, span.focal:hover, span.focal:active {background-position: -220px -280px;}
span.help {background-position: 0 -310px;}
h3.on span.help, span.help:hover, span.help:active {background-position: -220px -310px;}

/*---- SECTION HEADERS ----*/

h1.section {position: relative; display: block; overflow: hidden; margin: 0 0 10px 0; padding: 0; cursor: pointer; width: 300px; height: 30px; float: right; clear: left;}
h1.section span {height: 30px; width: 300px; position: absolute; top: 0; left: 0; background-image: url('../images/globalSprite.png'); background-repeat: no-repeat;}
h1.section span.about {background-position: -650px -350px;}
h1.section span.explore {background-position: -650px -380px;}
h1.section span.services {background-position: -650px -410px;}
h1.section span.reference {background-position: -650px -440px;}
h1.section span.kids {background-position: -650px -470px;}
h1.section span.special {background-position: -650px -500px;}
h1.section span.events {background-position: -650px -530px;}
h1.section span.focal {background-position: -650px -560px;}
h1.section span.help {background-position: -650px -590px;}
h1.section span.news {background-position: -650px -620px;}

/*---- SIDE BAR ----*/

div.sideBar {width: 220px; background-color: #fff; margin: 20px 0;}
div.sideBar h4  {position: relative; display: block; overflow: hidden; margin: 0; padding: 0; cursor: pointer; width: 220px; height: 16px;}
div.sideBar h4 span {height: 16px; width: 220px; position: absolute; top: 0; left: 0; background-image: url('../images/globalSprite.png'); background-repeat: no-repeat;}
div.sideBar li {margin: 5px 10px 0 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 1.3em; line-height: 1.3em; list-style-type: none;}
div.sideBar li a:link, div.sideBar li a:visited {font-weight: normal; color: #666;}
div.sideBar li a:hover, div.sideBar li a:active {color: #999;}

div.sideBar span.sister {background-position: 0px -634px;}
div.sideBar span.quickSearch {background-position: 0px -615px;}
div.sideBar span.myAccount {background-position: 0px -594px;}
.searchBar {margin: 15px 0 5px 0;}
.submit {font-size: .9em; color: #666;, background: #ccc; width: 40px; float: right; margin-top: 18px;}

/*---- FOOTER ----*/

div#footer p {text-align: center; color: #fff; font-size: .9em;}
div#footer p a:link, div#footer p a:visited {color: #e6e6e6;}
div#footer p a:hover, div#footer p a:active {text-decoration: underline;}


/*---- SITE MAP ----*/

#siteMap {position: absolute; top: 100px; right: 0; border: 1px solid red;}

/*---- CONTENT ----*/

div#content a {font-weight: bold;}
div#content li {margin-left: 15px; font-size: 1.15em;}

div.breakOut {float: right; width: 225px; margin: 10px 0 10px 10px;}
div.breakOut img {border: 1px solid #999; padding: 2px;}
div.breakOut p {font-style: italic; font-size: 1em; margin: 5px 0 0 2px;}

/*---- TAB CONTENT ----*/
div.panes {background-color: #fff; margin-bottom: 20px; border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;}
div.panes div {padding-top: 2px;}
div.tabContent {padding: 0 0px 10px 0px; margin-left: 10px;}
div.tabContent h1, div.tabContent h2, div.tabContent h3, div.tabContent h4, div.tabContent h5 {color: #2d4f77; padding-left: 10px;}
div.tabContent h5 {margin-top: 20px;}
div.tabContent p {padding-left: 10px; padding-right: 10px;}
div.tabContent ul {margin-top: 5px; list-style-type: none;}
div.tabContent ul.winner li {display: block; float: left; width: 300px;}
div.tabContent ul.reviews {float:left; width: 300px;}
div.tabContent ul li > img {float: left; height: 100px; margin-right: 20px; border: 1px solid #999; padding: 2px;}
div.tabContent ol {margin: 10px 15px;}
div.tabContent ol li {margin-bottom: 3px;}
div#reference div.tabContent ul li {margin-bottom: 7px; font-size: 1.2em;}
div#awards div.tabContent ul li {margin: 7px 0 0 7px; font-size: 1.1em; letter-spacing: 1px; line-height: 1.1em;}

/*---- NEWS_ITEMS ----*/

#newsItem {margin-bottom: 10px; padding: 0 10px 10px 10px; background: url('../images/newsItem_bg.jpg') bottom left repeat-x; height: 100%;}
#newsItem p {margin-bottom: 10px;}
#newsItem h3 {color: #2d4f77; margin-top: 5px;}
#newsItem h4 {margin-top: 3px; font-size: 1em; text-align: right; color: #999;}
#newsItem img {float:right; border: 1px solid #333; padding: 2px; margin: 0 0 10px 10px; width: 150px;}
#newsItem img.vert {width: 90px; margin-right: 10px;}
.newsDate {float:left; width: 70px; margin: 5px 10px; padding: 10px ;  overflow:hidden; text-align: center; font-size: 1.2em; font-weight: bold; letter-spacing: 1px; line-height: 1.3em; color: #2d4f77; background: url('../images/newsItem_bg.jpg') bottom left repeat-x; border: 1px solid #e6e6e6;}

/*---- BOOK CLUBS & BOOK AWARDS----*/

.bookAward, .bookClub {margin-bottom: 10px; padding: 0 10px 10px 10px; background: url('../images/newsItem_bg.jpg') bottom left repeat-x; height: 100%;}
.bookClub p{margin-bottom: 10px;}
.bookClub h3 {color: #2d4f77; margin-top: 5px;}
.bookClub h5 {color: #2d4f77;}
.bookClubSchedule {margin-left: 30px; margin-right: 40px;}

/*---- INDEX CONTENT ----*/

#indexTabs {margin-top: 10px;}
#indexTabs div.panes {border-right: 1px solid #dfe8ed; border-left: 1px solid #dfe8ed; border-bottom: 1px solid #dfe8ed; padding-bottom: 20px;}
#indexTabs .dotted {border-right: 1px solid #dfe8ed; margin-right: 10px !important; padding-right: 15px !important;}
#indexTabs .entry, .tabContent .entry {padding: 5px 0 10px 10px; width: 310px; float: left;}
#indexTabs .entry img {margin: 0 10px 5px 15px; padding: 2px; float: right; display: inline; border: 1px solid #999;}
#indexTabs .entry img.vert {width: 50px;}
#indexTabs .entry img.horiz {width: 100px;}
#indexTabs h2 {margin: 0 0 10px 10px; line-height: 1em; padding-top: 5px; color: #2d4f77;}
#indexTabs h4 {margin: 20px 0 7px 0; line-height: 1em;}
#indexTabs p {margin:0 10px 7px 0;}
#indexTabs p.more {margin: 20px 10px 20px 0; text-align: center;}
#indexTabs img.title {margin-bottom: 10px;}
#indexTabs img.example {border: 1px solid #999; clear: right; float: right; margin: 0 5px 5px 5px; padding: 2px; width: 100px;}
#indexTabs p a:link, #indexTabs p a:visited {color: #960;}
#indexTabs p a:hover, #indexTabs p a:active {color: #2d4f77;}


/*---- LOCATIONS ----*/

.locationMap {width: 600px; height: 400px; margin: 10px auto; padding: 2px; background-color: #fff; border: 1px solid #2d4f77;}
.refLocations {float: left; width: 200px; margin-right: 20px;}

/*---- STAFF ----*/

ul.staff {margin: 0 30px 0 0; padding:0;}
ul.staff li {margin: 0 !important; padding-bottom: 5px;}

/*---- STAFF RECOMMENDS, HOT READS ----*/

div.recommends, div.hotReads {clear: both; margin-top: 15px; padding-bottom: 20px;}
div.recommends img, div.hotReads img {width: 50px; border: 1px solid #999; padding: 2px; margin: 5px 10px 5px 10px; float: left;}
div.recommends p, div.hotReads p {margin-left: 10px;}

/*---- FEATURED BOOKS ----*/

div.featured h3 {margin-bottom: 0; color: #333;}
div.featured h4 {color: #333;}
div.featured img {float: right; width: 200px; padding: 2px; background: #fff; margin: 0 0 10px 10px; border: 1px solid #2d4f77;}

/*---- BOOK KITS ----*/

ul.booklist {width: 210px; margin-right: 10px; float: left;}
ul.booklist li {margin-bottom: 10px;}

/*---- BUTTONS ----*/

p.button {width: 275px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #dfe8ed;  line-height: 2em; margin-left: 20px; border: 1px solid #2d4f77;}

/*---- SRC ----*/

div.srcBooks ul {width: 320px; float: left;}
div.srcBooks ul li {margin-bottom: 5px;}

ul.performers {margin: 0; padding: 0; position: relative; left: -5px;}
ul.performers li {width: 100px; height: 125px; margin-left: 10px; float: left; text-align: center;}
ul.performers li img {width: 96px; border: 1px solid #ccc; padding: 2px; margin-bottom: 7px;}
ul.performers li.davis {margin-left: 0px;}

div.srcProgram {display: none; height: 500px;}

div.srcProgram img.highlight {width: 100px;}
div.srcProgram div.half { margin-left: 25px; margin-top: 80px;}
div.srcProgram ul li {margin-bottom: 7px; margin-left: 0 !important;}
div.show {display: block;}

div.sponsors p {margin-left: 70px; height: 120px; margin-bottom: 20px; text-align: center;}
div.sponsors p img {float: left; margin-left: 10px; width: 100px;}

/*---- ENTABLATURE ----*/

div.entablature {width: 210px; height: 315px; margin: 1px 10px 10px 0; float: left; overflow: hidden; text-align: center; background-color: #efefef; border: 1px solid #ddd;}
div.entablature:hover {-moz-box-shadow:0 0 25px #999 inset; -webkit-box-shadow:0 0 25px #999 inset; box-shadow:0 0 25px #999 inset;}
div.entablature h3 {font-size: 1.4em;}

div.entablature p {margin-top: 7px;}
div.entablature img {width: 160px; height: 240px; margin: 12px;}

div.overlay {visibility: hidden;}
h4.author {margin-top: 0;}
img.author {height: 150px; float: right; margin-right: 10px; margin-left: 15px;}