/*

 * Description:
 * Rules for screen display only. General display rules should appear in
 * layout_all.css or basesyles.css.
 *
 */






/* Basic Layout */
#pageBounds {
  background: #680000  url("../dir_images/com/bg_pageBounds5.gif") right top repeat-y; /*maroon #680000  #FFE071*/
  min-width: 730px;
  margin: 15px 7px 0 15px;
  padding: 10px 18px 0 10px;
}

div.hr hr {
  display: none;
}

div.hr.top {
  margin: -10px 0 -5px -10px;
  background: transparent url("../dir_images/com/bg_cornerTL5.gif") left top no-repeat;
}

div.hr.top .rc {
  margin: -10px -18px 0 0;
  height: 15px;
  background: transparent url("../dir_images/com/bg_cornerTR5.gif") right top no-repeat;
}

div.hr.bottom {
  clear: both;
  margin: -5px 0 0 -10px;
  background: transparent url("../dir_images/com/bg_cornerBL5.gif") left bottom no-repeat;
}

div.hr.bottom .rc {
  height: 15px;
  margin: 0 -18px 0 0;
  background: transparent url("../dir_images/com/bg_cornerBR5.gif") right bottom no-repeat;
}

div.hr.contentBoundsBottom {
  background: #FFE071 url("../dir_images/com/bg_closeMainCol.gif") left bottom no-repeat; /*#FFE071*/
}

div.hr.contentBoundsBottom .rc {
  height: 63px;
  background: transparent url("../dir_images/com/bg_closeSideCol.gif") right bottom no-repeat;
}

div.border {
  margin: 1em 0 0;
  clear: left;
  background: transparent url("../dir_images/com/bg_border_hr.gif") left top repeat-x;
}

div.border hr {
  display: none;
  height: 0;
  margin: 0;
}


/* Masthead
------------------------------------------------------------- */
#mastHead {
  text-align: left;
  background: #fff url("../dir_images/com/bg_mastHead5.gif") 202px 0 repeat-x;
  position: relative;
  z-index: 1;
}

#mastHead h2 {
  display: block;
  margin: 0;
  padding: 0;
  width: 202px;/*202   337px  387*/
  height: 101px; /*101    110px*/
  background: #fff url("../dir_images/com/logo.gif") left top no-repeat;
  float: left;
  position: relative;
  z-index: 2;
}

#mastHead h2 a {
  display: block;
  height: 101px;
  text-indent: -999px;
  overflow: hidden;
}

#mastHead #sectionImage {
  display: block;
  float: left;
  width: 374px; /*311px   251px  365*/
  height: 101px; /*101px    110px*/
  margin: 0 0 0;
  background: transparent url("../dir_images/com/bg_sectionImage-home.gif") left top no-repeat;
}


 
/* Search */
 div#search {
  float: right;
  padding: 5px 10px 0; 
  display: inline;
  background: #640000; /*url("../dir_images/com/bg_search.gif") right top no-repeat;    blue #004791  Green #9dce36  #014fa1*/
  min-height: 96px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFE071;
  width: 172px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 152px;
}


#pageTools {
  clear: both;
  width: 100%;
  background: url(../dir_images/com/bg_underLogo5.gif);/*this color under the Logo. blue #004791 gray #8094C1  Green #9dce36 red #fb0101*/
  color: #0161ab;
  font-size: 92%;
}

#pageTools p {
  margin: 0;
  float: right;
  background: url(../dir_images/com/bg_underLogo5.gif); /* this color under search box. blue #004791 gray #8094C1  Green #9dce36 */
  padding-bottom: 3px;
  width: 172px;
  height: 18px;
}

#pageTools a {
  color: #0161ab;
}

#pageTools a img {
  position: relative;
  top: 3px;
  border-bottom: 2px solid #0161ab;
}

#pageTools .logout {
  padding: .20em 0 0 .5em;
  color: #FFE071;
  float: left;
  font-weight: bold;
}

#pageTools .logout a {
  color: #FFE071;
  text-decoration: underline;
}

#pageTools .logout a:hover {
  color: #C83979;
  text-decoration: underline;
}

/* Navigation
------------------------------------------------------------- */
/* Main Mavigation */
#mnav {
  clear: both;
  background: #FFE071;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid #FFE071;
  text-align: center;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

#mnav li {
  background: #fcc917;
  float: left;
}

#mnav li a {
  display: block;
  position: relative;
  background: url(../dir_images/com/bgpwpl.gif);
  line-height: 140%;
  padding: 5px 0;
  margin-right: 1px;
  border: 1px solid #FFE071;
  border-bottom: none;
  color: #191919;
  text-decoration: none;
  font-size: 95%;
}

#mnav li a:hover {
  background: url(../dir_images/com/home_ws_005_narw.gif);
}

#mnav #home {
  width: 8%;
}

#mnav #bmm {
  width: 8%;
}

#mnav #how {
  width: 10%;
  
}

#mnav #research {
  width: 10%;
}

#mnav #events {
  width: 15%;
}

#mnav li#kids {
  width: 8%;
}

#mnav #teens {
  width: 8%;
}

#mnav #about {
  width: 11%;
}

#mnav #ask {
  width: 11%;
}

#mnav #login {
  width: 11%;
  margin-right: -10px;
}

#mnav #login a {
  margin-right: 0;
}

/* Secondary Navigation */

#snav {
  margin-top: .5em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 110%;
  font-weight: bold;
  padding-top: .5em;
}

#snav li {
  margin: 0 0 .9em; /* X and Y Margin*/
  margin-top: .5em;
  border-bottom: 4px solid #F7CF9A;
}

/*#snav li a
{
	color: #000066;
	margin: 0;
	padding: 2px;
	display: block;
	width: 90%;
	text-decoration: none;
}*/
#snav a:visited
{
color: #000066;
text-decoration: none;
}

#snav a:hover
{
	background-color: #BCE0DF; /*#ECEFF6 */
	color: #000066;
	text-decoration: none;
}


/* One Navigation */
#tnav {
  margin-top: .5em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-weight: normal;
  padding-top: .5em;
}

#tnav li {
  list-style-image: url(../dir_images/com/dot1.gif);
  list-style-type: none;
  list-style-position:inside;
  margin: 0 1.5em .2em; /* X and Y Margin*/
  margin-top: .5em;
}
#tnav a:hover
{
	font-size: 120%;
	font-weight: bold;
	background-color: #BCE0DF; /*#ECEFF6 */
	color: #000066;
	text-decoration: none;
}


/* Third Navigation */
#thirdnav {
  margin-top: .5em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 110%;
  font-weight: bold;
  padding-top: .5em;
}

#thirdnav li {
  margin: .5em .5em .5em; /* X and Y Margin*/
  margin-top: .5em;
  border-bottom: 2px solid #F7CF9A;
}

#thirdnav a:visited
{
color: #000066;
text-decoration: none;
}

#thirdnav a:hover
{
	background-color: #BCE0DF; /*#ECEFF6 */
	color: #000066;
	text-decoration: none;
}


/* Search Navigation */
#searchnav {
  margin-left: 0;
  margin-top: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
 
}

#searchnav a:visited
{
	color: #FFE071;
	text-decoration: none;
}

#searchnav a:hover
{
	background-color: #772220; /*#ECEFF6  #BCE0DF*/
	color: #FFE071;
	text-decoration: none;
}


/* Data Navigation */
#datanav {
  margin-left: 0;
  margin-top: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
 
}

#datanav a:visited
{
color: #000066;
text-decoration: none;
}

#datanav a:hover
{
	background-color: #BCE0DF; /*#ECEFF6  #BCE0DF*/
	color: #000066;
	text-decoration: none;
}

/* Kids Data Navigation */
#kidnav {
  margin-left: 0;
  margin-top: 4px;
  font-family: "Comic Sans MS";
  font-size: 110%;
  font-weight: bold;
 
}

#kidnav a:visited
{
color: #000066;
text-decoration: none;
}

#kidnav a:hover
{
	background-color: #BCE0DF; /*#ECEFF6  #BCE0DF*/
	color: #000066;
	text-decoration: none;
}


#skidnav {
  margin-top: .5em;
  font-family: "Comic Sans MS";
  font-size: 110%;
  font-weight: bold;
  padding-top: .5em;
}

#skidnav li {
  margin: 0 0 .9em; /* X and Y Margin*/
  margin-top: .5em;
  border-bottom: 4px solid #F7CF9A;
}

/*#snav li a
{
	color: #000066;
	margin: 0;
	padding: 2px;
	display: block;
	width: 90%;
	text-decoration: none;
}*/
#skidnav a:visited
{
color: #000066;
text-decoration: none;
}

#skidnav a:hover
{
	background-color: #BCE0DF; /*#ECEFF6 */
	color: #000066;
	text-decoration: none;
}



#moreDetails #tnav a 
{
  color: #191919;   /*color for tnav  #c73978*/
}
#moreDetails #thirdnav a 
{
  color: #191919;   /*color for thirdnav    #619f0E  0152A4 #000066*/
}
#moreDetails #searchnav a 
{
  color: #FFE071;   /*color for thirdnav    #619f0E  0152A4*/
}
#moreDetails #datanav a 
{
  color: #000066;   /*color for thirdnav    #619f0E  0152A4*/
}
#moreDetails #kidnav a 
{
  color: #000066;   /*color for thirdnav    #619f0E  0152A4*/
}
#moreDetails #skidnav a 
{
  color: #191919;   /*color for thirdnav    #619f0E  0152A4*/
}
#moreDetails #snav a,
#onlineResearch #mainColumn #signUp,
#onlineResearch #mainColumn #signUp a {
  color: #191919;
}



/* Content Bounds
------------------------------------------------------------- */

#contentBounds {
	text-align: left;
	background: #FFE071 url("../dir_images/com/bg_contentBounds.gif") right top repeat-y; /* #FFE071 */
	/*height: 700px; /* main page background height*/
  padding: 0 0 0 2px;
	border-right: 2px solid #FFE071;
}

#sideColumn {
  float: right;
  width: 159px;
  margin: 15px 5px 0 0;
  display: inline;
  padding-bottom: 20px;
}

#mainColumn {
  margin-right: 171px;
  width: 100%;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: auto;
}


/* Side Column */
/*------------------------------------------------------------- */
#sideColumn a {
  color: #9d080d;
}

#sideColumn ul {
  margin: 0;
  border-top: 1px dotted #FFE071;
}

#sideColumn li {
  border-bottom: 1px dotted #FFE071;
  padding: 2px 0 2px 2px;
}

#sideColumn dl {
  background: #ffe071 url("../dir_images/com/bg_dl.gif") left top repeat-y;
  width: 159px;
}

#sideColumn dt {
  background: #680000 url("../dir_images/com/bg_dt.gif") left top no-repeat;  /* 3F0101 883326 color for library location */
  color: #FFE071;
  font-size: 117%;
  padding-left: 5px;
  line-height: 27px;
  font-weight: bold;
}

#sideColumn dd {
  padding: 3px 3px 8px 5px;
  background: transparent url("../dir_images/com/bg_dd.gif") left bottom no-repeat;
}

#sideColumn dd div.location img {
  border: 1px solid #7f271b;
  margin: 4px 0 10px 1px;
}

#sideColumn dd div.location {
  background: #fcefc1; /**/
  margin: 0 -2px 0 -3px;
  padding: 0 0 0 3px;
  width: 152px;
}

#sideColumn select,
#sideColumn input#zip {
  margin-top: 2px;
  border: 1px solid #9d080d;
}

select#choose_library {
  width: 149px;
  font-size: 92%;
  padding: 2px;
}

#sideColumn dl input#zip {
  width: 107px;
  float: left;
}

#sideColumn dl input#branch_go {
  float: right;
  margin-top: -2px;
}

#sideColumn dl p.map {
  clear: both;
  font-size: 92%;
}

h3.ask {
  margin: 30px;
  padding: 0;
  width: 108px;
  height: 45px;
  background:  transparent url("../dir_images/com/facebook_button.gif") left top no-repeat;
}

h3.readers {
  margin: 30px;
  padding: 0;
  width: 108px;
  height: 45px;
  background:  transparent url("../dir_images/com/readers_blog.gif") left top no-repeat;
}


h3.readers a {
  display: block;
  height: 120px;
  text-indent: -999px;
  overflow: hidden;
}

h3.ask a {
  display: block;
  height: 120px;
  text-indent: -999px;
  overflow: hidden;
}

h3.flickr {
  margin: 30px;
  padding: 0;
  width: 108px;
  height: 34px;
  background:  transparent url("../dir_images/com/flickr.gif") left top no-repeat;
}


h3.flickr a {
  display: block;
  height: 120px;
  text-indent: -999px;
  overflow: hidden;
}

h3.twitter {
  margin: 30px;
  padding: 0;
  width: 108px;
  height: 45px;
  background:  transparent url("../dir_images/com/twitter.gif") left top no-repeat;
}


h3.twitter a {
  display: block;
  height: 120px;
  text-indent: -999px;
  overflow: hidden;
}

h3.delicious {
  margin: 30px;
  padding: 0;
  width: 108px;
  height: 27px;
  background:  transparent url("../dir_images/com/delicious.gif") left top no-repeat;
}


h3.delicious a {
  display: block;
  height: 120px;
  text-indent: -999px;
  overflow: hidden;
}


h3.hour {
  margin: 0;
  padding: 0;
  width: 148px;
  height: 249px; /*236px*/
  background:  transparent url("../dir_images/com/hours.gif") left top no-repeat;
}

/*form buttons main column*/
#askLibrarianForm input.submitBtn,
#eventPreRegForm input.submitBtn,
#EventPreRegForm input.submitBtn,
#contactUsForm input.submitBtn,
#eventPreRegForm input.submitBtn,
#bookReviewForm input.submitBtn,
#newsSignUp input.submitBtn {
  width:94px;
  height:29px;
  border:none;
}

#teenHowToForm input.submitBtn,
#teens #bookReviewForm input.submitBtn,
#teens #askLibrarianForm input.submitBtn,
#teens #eventPreRegForm input.submitBtn {
  width:90px;
  height:26px;
  border:none;
}

/* Page Header */

#pageHeader {
  color: #FFE071;
  padding: 0 10px -8px 10px;
  background: #5b99ee url("../dir_images/com/bg_mainCol5.gif") right top repeat-y; /* Blue for page header #1c99d8  red #a03031*/
}

#pageHeader .hr hr {
  display: none;
}
#pageHeader .hr {
  display: block;
  margin: 0 -10px 0 0;
  height: 10px;
  background: transparent url("../dir_images/com/bg_pageHeader5.gif") right top no-repeat;
}


#featureMore {
  float: left;
  width: 33%;
  margin: 1em 0 0 2%;
  padding: 0;
  display: inline;
}

#pageHeader a {
  color: #9ad34f;
  text-decoration: none;
  font-weight: bold;
}

#pageHeader a:hover {
  text-decoration: underline;
}

#pageHeader h2 a {
  color: #FFE071;
}

#pageHeader h3 {
  font-size: 110%;
  color: #FFE071;
  margin: 0;
  line-height: normal;
}

#pageHeader img.alignleft {
  border: 9px solid #FFE071;
  margin: 0 15px 5px 0;
  padding: 0;
  width: 91px;
}


#contentBounds ul {
  margin: 0 0 1em 0;
}

.breadcrumb {
  font-size: 92%;
  margin: -20px 0 1.5em;
  position: relative;
}

/* Main Column More Details */

/*#moreDetails {
  padding: 10px;
  background: #FFE071 url("../dir_images/com/bg_moreDetails_home.gif") right top no-repeat;
}*/

#full {
  width: 94%;
  padding-bottom: 1em;
}

.full {
  width: 94%;
  padding-bottom: 1em;
}

.third {
	float: left;
	padding-left: 1.5%;
	display: inline;
	background: transparent url("../dir_images/com/bg_third.gif") left top repeat-y;
	width: 44%;
}

.one {
  background: none;
  margin-right: 2%;
  padding-left: 0;
  width: 35%;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 25%;
}
.two {
  margin-right: 2px;
  
  }
.three {
  float: right;
  padding-left: 2%;
  margin-right: 0;
  display: inline;
  width: 24%;
  }

.two_thirds {
  float: left;
  margin: 0;
  padding: 0 0 1em 3%;
  display: inline;
  background: transparent url("../dir_images/com/bg_third.gif") left top repeat-y;
  overflow: hidden;
  width: 66%;
}

.two_thirds .third.three {
  float: right;
  display: inline;
}


#moreDetails .two_thirds h3.eventTeaserTitle {
  margin-left: 75px;
  padding: 0;
  font-size: 110%;
}

#moreDetails h3 {
  margin: 0 0 .25em;
  padding: 0;
}

#moreDetails h4,
#moreDetails h3.snav {
	font-size: 130%;
	color: #680000;
	font-weight: bold;
	margin: 0 0 .25em;
}

#onlineResearch #mainColumn #signUp {
  font-size:110%;
  font-weight:bold;
  line-height:1.2em;
}

#moreDetails a {
  color: #680000; /* Link colors on regular page #619f0E */
}

.ra img {
  width: 50px;
  height: 75px;
  background: transparent url("../dir_images/com/transparent.gif") left top no-repeat;
}


.callout,
#moreDetails h3.callout {
  color: #c73978;
}

#moreDetails h3.callout {
  padding-top: 10px;
  font-size: 140%;
}



/* Footer
------------------------------------------------------------- */
#footer {
  clear: both;
  color: #FFE071;
  margin: 10px 0 0;
}

#footer a {
  color: #FFE071;
}

#footer ul {
  padding-left: 25%;
  margin: 0 0 15px;
}

#footer li {
  float: left;
  margin-right: 5px;
}

#footer li.last {
  margin-right: 80px;
}

/* Copyright */
.copyright {
  white-space: nowrap;
}

/* Section Specific
------------------------------------------------------------- */



/* Events
------------------------------------- */

#pageHeader h1 {
  position: relative;
  font-size: 160%;
  line-height: 1.2em;
  font-weight: bold;
  margin: 0;
  margin-top: -5px;
  margin-bottom: .25em;
  color: #3F0101;
}

#event #pageHeader #feature {
  margin-top: 1.5em;
  background: none;
  width: 70%;
}

#event #pageHeader #feature h3 a {
  font-weight: normal;
}

#event #pageHeader #featureMore {
  width: 20%;
}

#event #moreDetails img.alignleft {
  width: auto;
  clear: both;
  padding: 10px;
  margin: 0 15px 10px 3px;
  clip: rect(0, 130px, 165px, 0); /* Clips the image beyond its bounds */
}

#event #moreDetails #gutter {
  margin-left: 168px;
}

#moreDetails h3 {
  color: #333;
  font-size: 150%;
  line-height: normal;
}

#event #moreDetails p {
  margin-bottom: .5em;
}



/* iCal */


#ical {
  margin: 1em 0;
}

#ical img {
  position: relative;
  top: 4px;
}



/* My CPL Login */

#mnav li.cplLogin a {
  background: #FFE071;
}

/* Search Pages */

#endeca.searchForm #mainColumn {
  margin: 0 0 0 185px;
}

#endeca.searchForm #mainColumn a {
  color: #619f0E;
}

#endeca #lib_search form {
  margin-top: -2px;
  margin-bottom: -10px;
  }

#endeca #lib_search input,
#endeca #lib_search select {
  margin: 0 .75em 0 0;
  position: relative;
  top: -10px;
  width: 200px;
  border: 1px solid #99ca31;
  padding: 1px 0;
}

#endeca #lib_search input#lib_go {
  width: 29px;
  height: 30px;
  border: none;
  padding: 0;
  position: relative;
  top: 0;
  background: transparent url("../dir_images/com/lib_search-go.png") left top no-repeat;
}


/*  Wrapper helps with two thirds when using classes with background colors */

.width_wrapper {
  width: 100%;
}




/*  generic page styles */

.sort {
  width: 95%;
  margin: 1em 0 0 0;
  padding: 0 0 1em 0;
}

.sort label {
  text-transform: uppercase;
  font-size: 92%;
}
.sort label.asTyped {
  text-transform: none;
}

.sort select {
  width: 200px;
  border: 1px solid #99ca31;
}

.tableStyle td {
  border-top: 1px solid #f9c2ff;
  padding: 5px;
}





/* sIFR rules */

.sIFR-flash {
  visibility: visible !important;
  margin: 0;
}

.sIFR-replaced {
  visibility: visible !important;
}

span.sIFR-alternate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash #kids #feature h2.sifr {
  visibility: hidden;
  font-size: 30px;
  margin-bottom: .5em;
  letter-spacing: -2px;
}

.sIFR-hasFlash #kids #feature h3.sifr {
  visibility: hidden;
  font-size: 22px;
  margin-bottom: .5em;
  letter-spacing: -2px;
}

.sIFR-hasFlash #kids #moreDetails h2.sifr {
  visibility: hidden;
  font-size: 25px;
  margin-bottom: .25em;
}

.sIFR-hasFlash #kids #moreDetails h3.sifr {
  visibility: hidden;
}

.sIFR-hasFlash #kids #moreDetails h4.sifr {
  visibility: hidden;
}


/* header compliance */
h1.seo_masthead {
  text-indent:-9999px;
  height: 0px;
  overflow: hidden;
  margin: 0;
}