body { background-color: #036; color: #333; min-width: 900px; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; margin: 18px 0 }
body.smallFont { font-size: 10px }
body.mediumFont { font-size: 12px }
body.largeFont { font-size: 14px }


/* ----- PAGE WRAPPER STYLES ----- */

div.pageWrapper { position: relative; width: 900px; left: 50%; margin: 0 0 0 -450px; padding: 0; float: left; border: solid 3px #ccc; background-color: white; }

div.pageWithTreeBackground { background-image: url(booktree_background.gif); background-repeat: no-repeat; background-position: right bottom; }

div.pageWithRightSidebar { }
div.pageWithRightSidebar div.pageContent { background-image: url(sidebarBorder.gif); background-repeat: repeat-y; background-position: 580px 10px; }

div.pageWithoutSidebar { }
div.pageWithoutSidebar div.pageBody { width: 840px }


div.happeningPage { }

div.kidsPageWelcome div.pageContent { margin-top: 0; background-image: url(kidshomebkgd.jpg); background-repeat: no-repeat; background-position: left top }
div.kidsPageWelcome div.pageBody { margin-top: 270px; background-image: url(../kids/images/orangebluefrog.gif); background-repeat: no-repeat;  background-position: left top }
div.kidsPageWelcome div.sideBar { border-left: dotted #003366 2px; padding-left: 10px; }


div.kidsPageInterior { background-image: url(kidsinterior.jpg); background-repeat: no-repeat; background-position: left 125px; }
div.kidsPageInterior div.pageContent { background-image: none  }
div.kidsPageInterior div.pageBody { margin-top: 100px  }
div.kidsPageInterior div.sideBar { margin-top: 100px; border-left: dotted #003366 2px; padding-left: 10px; }


div.teensPageWelcome div.pageContent { width: 100%; padding: 0; margin: 0; float: left; background-image: url(teenhomebkgd.jpg); background-repeat: no-repeat; background-position: top;  }
div.teensPageWelcome div.pageBody { width: 375px; padding: 0; margin-top: 220px; margin-left: 200px; float: left; }
div.teensPageWelcome div.sideBar { margin-top: 205px; border-left: dotted #003366 2px; padding-left: 10px; }

div.teensPageInterior div.pageContent { margin-top: 0; background-image: url(teenInterior.jpg); background-repeat: no-repeat; background-position: top; }
div.teensPageInterior div.pageBody { margin-top: 160px;  }
div.teensPageInterior div.sideBar { margin-top: 205px; border-left: dotted #003366 2px; padding-left: 10px; }





div.pageContent { width: 100%; padding: 0; margin: 10px 0 0 0; float: left;  }

div.pageContent a { color: #369; text-decoration: none }
div.pageContent a:hover { color: #360; text-decoration: underline; cursor: pointer }
div.pageContent a:visited {color: #360 }

div.pageBody { margin: 0 0 0 30px; position: relative; float: left; width: 500px; display: inline; } /* That "display: inline" is to make IE6 happy. It doubles side margins on floats, otherwise. Normal browsers ignore the attribute. */ 

div.sideBar { float: right; width: 300px; margin: 10px 10px 0 0; padding: 0; display: inline; }






div.happeningPage h1 { color: #360 }
div.happeningPage h2 { color: #369 }
div.catalogPage   h1, div.catalogPage   h2 { color: #390 }
div.kidsPage      h1, div.kidsPage      h2 { color: #636 }
div.teensPage     h1, div.teensPage     h2 { color: #c63 }
div.mailPage      h1, div.mailPage      h2 { color: #699 }
div.businessPage  h1, div.businessPage  h2 { color: #630 }
div.aboutPage     h1, div.aboutPage     h2 { color: #933 }





/* ----- PAGE HEADER STYLES ----- */



div.pageHeader { background-color: white; background-image: url(pcpllogo.gif); background-repeat: no-repeat; width: 100%; height: 125px; position: relative; z-index: 99 }
div.pageHeader div.ask { float: right; height: 22px; line-height: 22px; color: white; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; background-color: #c63; padding: 0 8px; margin: 0 2px 0 0 }
div.pageHeader div.ask:hover { background-color: #e07038; cursor: pointer }

div.pageHeader div.myAcct { float: right; color: white; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; background-color: green; height: 22px; line-height: 22px; padding: 0 8px   }
div.pageHeader div.myAcct:hover { background-color: #009400; cursor: pointer }

div.pageHeader div.searchBar { position: absolute; top: 24px; right: 0; height: 45px; font-size: 12px; width: 250px; font-weight: bold;  }
div.pageHeader div.searchBar div.searchLabel { position: absolute; top: 0; left: 0; height: 22px; line-height: 22px; width: 80px; color: #036; text-transform: uppercase; text-align: right }
div.pageHeader div.searchBar input.searchField { position: absolute; top: 0; right: 37px; width: 120px; height: 20px; border: solid 1px gray; padding: 0 4px; }
div.pageHeader div.searchBar div.goButton { float: right; height: 22px; line-height: 22px; width: 36px; text-align: center; background-color: teal; color: white; font-weight: bold;  } 
div.pageHeader div.searchBar div.searchSelect { text-align: right; position: absolute; top: 24px; color: gray; width: 98%; padding: 0 5px 0 0    }

div.fontSize { position: absolute; right: 10px; bottom: 35px; font-size: 9px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color: #666; }
div.fontSize span.small { font-size: 10px; font-weight: bold }
div.fontSize span.medium { font-size: 12px; font-weight: bold }
div.fontSize span.large { font-size: 14px; font-weight: bold }
body.smallFont div.fontSize span.small { text-decoration: underline }
body.mediumFont div.fontSize span.medium { text-decoration: underline }
body.largeFont div.fontSize span.large { text-decoration: underline }




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

ul.menu { position: absolute; top: 95px; color: white; font-size: 13px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; height: 26px; line-height: 26px; background-image: url(topNav/default.gif); background-repeat: repeat-x; margin: 0; padding: 0; width: 900px; list-style-type: none; z-index: 90; overflow: visible; border-color: #390; border-style: solid; border-width: 2px 0; }
ul.menu li { float: left; padding: 0 10px; position: relative; height: 26px; font-weight: bold; overflow: visible; border-color: #699; border-style: solid; border-width: 0 1px 0 0; white-space: nowrap }		

ul.menu li ul { position: absolute; top: 26px; left: 0; padding: 0; margin: 0; display: none; width: 230px; list-style-type: none; z-index: 91   } 
ul.menu li ul li { float: none; border-style: solid; border-width: 0 0 1px; font-weight: normal  }

ul.menu li ul li.menuLevel1 { }
ul.menu li ul li.menuLevel2 { padding-left: 30px }




ul li#menu1.hover, ul.section1, div.happeningPage ul li#menu1 { background-image: url(topNav/happen.gif); }
ul li#menu2.hover, ul.section2, div.catalogPage ul li#menu2 { background-image: url(topNav/catalog.gif); }
ul li#menu3.hover, ul.section3, div.kidsPage ul li#menu3 { background-image: url(topNav/kids.gif); }
ul li#menu4.hover, ul.section4, div.teensPage ul li#menu4 { background-image: url(topNav/teen.gif); }
ul li#menu5.hover, ul.section5, div.mailPage ul li#menu5 { background-image: url(topNav/mail.gif); }
ul li#menu6.hover, ul.section6, div.businessPage ul li#menu6 { background-image: url(topNav/business.gif); }
ul li#menu7.hover, ul.section7, div.aboutPage ul li#menu7 { background-image: url(topNav/about.gif); }
ul li#menu8.hover, ul.section8 { background-image: url(topNav/happen.gif); }

ul li#menu1 ul li { background-color: #069; border-color: #036; }
ul li#menu2 ul li { background-color: #696; border-color: #390; }
ul li#menu3 ul li { background-color: #969; border-color: #636; }
ul li#menu4 ul li { background-color: #F96; border-color: #c63; }
ul li#menu5 ul li { background-color: #699; border-color: #366; }
ul li#menu6 ul li { background-color: #C96; border-color: #630; }
ul li#menu7 ul li { background-color: #C66; border-color: #900; }

ul li#menu1 ul li ul li { background-color: #036; border-color: #069 }
ul li#menu2 ul li ul li { background-color: #390; border-color: #696 }
ul li#menu3 ul li ul li { background-color: #636; border-color: #969 }
ul li#menu4 ul li ul li { background-color: #c63; border-color: #f96 }
ul li#menu5 ul li ul li { background-color: #366; border-color: #699 }
ul li#menu6 ul li ul li { background-color: #630; border-color: #c96 }
ul li#menu7 ul li ul li { background-color: #900; border-color: #c66 }

ul li#menu1 ul li.hover { background-color: #036; border-color: #069; }
ul li#menu2 ul li.hover { background-color: #390; border-color: #696; }
ul li#menu3 ul li.hover { background-color: #636; border-color: #969; }
ul li#menu4 ul li.hover { background-color: #c63; border-color: #F96; }
ul li#menu5 ul li.hover { background-color: #366; border-color: #699; }
ul li#menu6 ul li.hover { background-color: #630; border-color: #C96; }
ul li#menu7 ul li.hover { background-color: #900; border-color: #C66; }

ul li#menu1 ul li ul li.hover { background-color: #069; border-color: #036; }
ul li#menu2 ul li ul li.hover { background-color: #696; border-color: #390; }
ul li#menu3 ul li ul li.hover { background-color: #969; border-color: #636; }
ul li#menu4 ul li ul li.hover { background-color: #F96; border-color: #c63; }
ul li#menu5 ul li ul li.hover { background-color: #699; border-color: #366; }
ul li#menu6 ul li ul li.hover { background-color: #C96; border-color: #630; }
ul li#menu7 ul li ul li.hover { background-color: #C66; border-color: #900; }


ul.menu li.hover ul  { display: block }
ul.menu li ul li.hover ul li { display: block }


/* ----- FORMS ----- */

table.dataform { border-style: none; border-spacing: 0; border-collapse: collapse; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; }
table.dataform th { font-weight: normal; text-align: left; font-size: 9px; vertical-align: bottom }
table.dataform td { padding: 0 10px 10px 0; vertical-align: top; font-size: 11px; }





/* ----- PAGE CONTENT STYLES ----- */


div.pageContent h1, div#richArticleEditor-panel h1 { font-size: 160%; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-weight: bold; margin: 0; padding: 8px 10px 2px 0px; }
div.pageContent h2, div#richArticleEditor-panel h2 { font-size: 133%; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-weight: bold; margin: 0; padding: 8px 0px 0px 0px; }
div.pageContent p.intro, div.pageContent h5, div#richArticleEditor-panel h5  { color: #666; font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 142%; line-height: 110%}
div.pageContent h6, div#richArticleEditor-panel h6 { } /* Credits */


div.pageContent ol li { margin-bottom: .5em }




p.articleDate { }
p.articleByline { margin: 0; font-size: 80% }
p.articleByline span.authorName { }
p.articleByline span.authorTitle { margin-left: 10px; font-style: italic  }

/* ----- PAGE FOOTER STYLES ----- */

div.pageFooter { color: #ccc; clear: both; height: 55px; position: relative; width: 100%; padding: 10px 0 0 0; }

div.bottomNav { border-color: #999; border-style: solid; border-width: 1px 0 0; margin: 0 10px; height: 30px;}
div.bottomNav div { background-repeat: no-repeat; height: 20px; float: left; margin-top: 5px; margin-left: 40px; cursor: pointer }
div.bottomNav div:hover { background-position: 0 -20px;  }
div.bottomNav div.help { background-image: url(bottomNav/help.gif); width: 153px; margin-left: 36px }
div.bottomNav div.locations { background-image: url(bottomNav/locations.gif); width: 154px;  }
div.bottomNav div.blogs { background-image: url(bottomNav/blogs.gif); width: 116px;  }
div.bottomNav div.email { background-image: url(bottomNav/email.gif); width: 107px;  }
div.bottomNav div.news { background-image: url(bottomNav/news.gif); width: 117px;  }

div.copyright { background-color: #360; text-align: center; height: 25px; line-height: 25px; margin: 0; color: white ; font-size: 12px; }
div.copyright a { text-decoration: none; color: white }
div.copyright a:hover { color: #ccc }

div.pageCredits { text-align: center; color: #999; font-size: 10px; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; position: relative;  }
div.pageCredits p { margin-top: 8px }
div.pageCredits a { color: #999; text-decoration: none }
div.pageCredits a:hover { color: #999 }




/* ----- MISCELLANEOUS STYLES ----- */



.bold { font-weight: bold }
.italic { font-style: italic }
.boldItalic { font-weight: bold; font-style: italic }
.contact {color: #fff; background-color: #360; font-size: 11px; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; text-align: center; padding: 6px 0; }

/* Photo styles */
.photo_right {
float:right;
padding:5px 0px 15px 15px;
}
.photo_left {
float:left;
padding:5px 15px 15px 0px;
}