/* CSS Document */
/*** This section contains universal changes to the way HTML tags work. ***/
* {margin:0;padding:0}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76.2%;
background-color: #E1ECE8;
background-image:url(../images/site_images/body_gradient_bg.jpg);
background-repeat:repeat-x;
}
h1 {margin-left: -9000px;}
a img {border: 0;}
strong {
color: #5E9199;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a {color: #333;}
a:hover {color: #366;}
/*** The next sections contain formatting definitions of sections, as well as changes in the way HTML tags display in those sections. In general, the sections appear in the stylesheet as they do on the page, top to bottom, left to right. ***/
#header {
width:776px;
margin: 0 auto;
height: 156px;
background-image:url(../images/site_images/header.jpg);
background-repeat:no-repeat;
}
/*** The wrapper centers the page, and contains the shadow.***/
#wrapper {
width: 776px;
margin: 0 auto;
background-image: url(../images/site_images/shadow_760.png);
}
/*** The container contains the image which defines the columns.***/
#container {
width: 762px;
margin: 0 7px;
padding: 0;
background-color: #FFFFFF;
background-image:url(../images/site_images/content_bg.gif);
background-repeat:repeat-y;
}
#container.doublewide {
width: 762px;
margin: 0 7px;
padding: 0;
background-color: #FFFFFF;
background-image:url(../images/site_images/doublewide_content_bg.gif);
background-repeat:repeat-y;
}
/*** The header section contains the logo image and the upper-right-hand links, called the toolbox (catalog, my account, hours and directions, contact us) ***/
#header h1 {
font-size: 0px;
}
#header #toolbox {
float: right;
padding: 20px;
padding-bottom: 0;
margin-top:65px;
color: #fff;
}
#header #toolbox p{
text-align: right;
margin-right: 20px
}
#header #toolbox a{
text-decoration: none;
color: #fff;
}
#header #toolbox a:hover{
text-decoration: underline;
}
/*** The main nav is the horizontal navigation across the top.***/
#mainnav {
width: 757px;
margin-left: 2px;
}
#mainnav p{
text-align: center;
padding: 3px;
background-color: #5e9199;
color: #ffffff;
}
#mainnav a {
text-decoration: none;
color: #ffffff;
padding-left: 20px;
padding-right: 20px;
letter-spacing:.5px;
border-right: 1px solid white;
}
#mainnav a:hover {
text-decoration: underline;
}
#mainnav a.left {
border-left: 1px solid white;
}
/*** The following section lets each page show which section it's in, and yet maintain the Main Nav section as a Library Item, i.e., the same on every page. A class declaration in the body tag of each page lets the styleshee know which section the page is in, like this : , and, magically, the correct formatting for the "you are here" link will appear. ***/
#home a.homelink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
}
#home a.homelink:hover {
text-decoration: none;
}
#about a.aboutlink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#about a.aboutlink:hover {
text-decoration: none;
}
#events a.eventlink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
}
#events a.eventlink:hover {
text-decoration: none;
}
#reference a.referencelink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#reference a.reflink:hover {
text-decoration: none;
}
#resources a.resourceslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#resources a.resourceslink:hover {
text-decoration: none;
}
#passes a.passeslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
}
#passes a.passeslink:hover {
text-decoration: none;
}
#kids a.kidslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
}
#kids a.kidslink:hover {
text-decoration: none;
}
#teens a.teenslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#teens a.teenslink:hover {
text-decoration: none;
}
#readers a.readerslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#readers a.readerslink:hover {
text-decoration: none;
}
#park a.parklink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#park a.parklink:hover {
text-decoration: none;
}
#friends a.friendslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#friends a.friendslink:hover {
text-decoration: none;
}
/***End Main Nav ***/
/*** Begin What's New and Search Bar ***/
#search {
background-color: #fff;
background-image:url(../images/site_images/searchbar_gradient_bg.jpg);
background-repeat:repeat-y;
height: 40px;
width: 760px;
}
#search p {line-height: 40px;padding: 0 20px;}
#search .accent {color: #19626d;}
/*** Left Column ***/
#leftcol {
float: left;
width: 174px;
background-color:#cfe2db;
margin-left: 2px;
}
#leftcol h3{
font-size: 1em;
padding: 3px 10px 0px 20px;
color: #2e1c41;
}
#leftcol p{
padding: 3px 10px 0px 20px;
font-size: 1em;
}
#leftcol td {padding-right: 8px;padding-bottom: 3px;padding-top: 3px;border-bottom:
1px solid #c7c7c7;}
#leftcol #leftnav {
margin: 0;
margin-top: -1px;
padding: 0;
}
#leftcol #leftnav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#leftcol #leftnav li {
width: 147px;
padding: 3px 10px 3px 20px;
background-color: #5e9199;
color: #fff;
border-bottom: 1px solid #e1e2e3;
}
#leftcol #leftnav li.section {
width: 147px;
padding: 3px 10px 3px 20px;
background-color: #19626d ;
color: #fff;
border-bottom: 1px solid #e1e2e3;
}
#leftcol #leftnav a {
color: #fff;
text-decoration: none;
font-size: .9em;
}
#leftcol #leftnav a:hover {
text-decoration: underline;
}
/*** Center column, where most of the content is put. ***/
#centercol {
float: left;
width: 414px;
padding-top: 10px;
overflow: hidden;
}
#centercol.doublewide {
float: left;
width: 583px;
padding-top: 10px;
}
/*** The h2 tag is just for the page title. Don't use it for anything else. *****/
#centercol h2 {
margin: 0px 20px 10px 20px;
font-size: 1.5em;
}
/*** The h3 tag is for section titles within the content. *****/
#centercol h3 {
margin: 6px 20px;
color: #19626d;
font-size: 1.3em;
font-weight: normal;
}
#centercol p {
margin: 6px 20px;
line-height: 1.3em;
color: #1A627D;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#centercol hr { /*** Use this sparingly. ***/
margin: 6px 20px;
border: 2px dotted #cbcbcb;
}
#centercol table {
margin-left: 20px;
margin-right: 20px;
}
#centercol td {
line-height: 1.3em;
}
#centercol table.thinline {
border: 1px solid #c7c7c7;
border-right: 0;
border-bottom: 0;
}
#centercol table.thinline td {
border: 1px solid #c7c7c7;
border-left: 0;
border-top: 0;
}
#centercol ul {
margin-left: 34px;
margin-right: 10px;
}
#centercol li {
line-height: 1.5em;
}
/*** Right Column, used for related content (ads, tidbits, interesting info. ***/
#rightcol {
float: left;
width: 169px;
padding: 0; margin: 0;
margin-top: -2px;
padding-top: 8px;
background-color: #cfd7d3;
background-image:url(../images/site_images/rt_col_gradient_bg.jpg);
background-repeat:repeat-x;
overflow: hidden;
}
#rightcol h2 {
font-size: 1.3em;
font-weight: normal;
padding: 0 10px;
}
#rightcol h3 {
font-size: 1.1em;
padding: 0 10px;
padding-bottom: 0;
margin-bottom: 0;
color: #19626d;
}
#rightcol p {
padding: 10px;
}
#rightcol p.snug {
padding-top: 0;
margin-top: 0;
}
#rightcol #whats_new {
margin-top: -3px;
margin-right: 0px;
margin-bottom: 6px;
margin-left: 6px;
border-top-width: 0px;
border-right: 1px solid #cca383;
border-left: 1px solid #cca383;
border-bottom: 2px solid #e5d1c1;
}
#rightcol #whats_new p {
padding: 6px;
line-height: 1.2em;
}
#rightcol #eventbox {
margin: 6px;
margin-bottom: 0;
}
#rightcol #eventbox p {
font-weight: normal;
line-height: 1.2em;
padding: 0px 20px 10px 10px;
}
#rightcol li {
font-size: 1em;
font-weight: normal;
padding: 0px 20px 10px 20px;
list-style-type: none;
}
#rightcol #eventbox a{
font-size: 1em;
color: #2e1c41;
}
#rightcol #eventbox ul{
margin:0; padding: 0
}
#rightcol #eventbox li{
margin:0; padding: 5px 5px 8px 10px;
}
#rightcol table {
margin: 0;
margin-left: 11px;
}
#rightcol td {padding-right: 8px;padding-bottom: 3px;padding-top: 3px;border-bottom:
1px solid #c7c7c7;}
/*** This puts a shadow at the bottom of the page, before the footer info. *****/
#bottom {
width:774px;
height:0;
background-image: url(../images/site_images/bottom_shadow.jpg);
background-position: bottom;
margin: 0 auto;
padding-bottom: 10px;
background-repeat: no-repeat;
}
/*** The footer contains basic contact info. *****/
#footer {
width:760px;
margin: 0 auto;
}
#footer p{
text-align: center;
font-size: 9px;
color: #2e1c41;
}
#footer a{
text-decoration: none;
color: #2e1c41;
}
#footer a:hover{
text-decoration: underline;
}
/*** Useful classes. Put leftpic on images you want displayed to the left, and rightpic on images you want displayed to the right. ***/
.leftpic {margin-right: 16px; float: left;}
.rightpic {margin-left: 16px; float: right;}
/*** This solves a subtle design problem with CSS. *****/
hr.clear {
/* This keeps the container from collapsing. Use
right before you close the container. */
display: block;
clear: left;
/*margin: -0.66em 0;*/ /*This works in IE lte7 but screws up FF et al*/
margin: 0;
border: 0;
visibility: hidden;
overflow:hidden;
}
#IEroot hr.clear { /*This allows a style to work in IE lte(<=)7 which is not used by FF et al*/
/* This keeps the container from collapsing in IE. Use
right before you close the container. */
display: block;
clear: left;
margin: -0.66em 0; /*This works in IE lte7 but screws up FF et al*/
border: 0;
visibility: hidden;
overflow:hidden;
}
.accent {color: #19626d;}
#home #wrapper #container #centercol div p {
color: #2E1C44;
}
#home #wrapper #container #centercol div p {
color: #1A627D;
}
#home #wrapper #container #centercol div .style18 {
color: #2E1D41;
}
#wrapper #container #centercol div .style18 {
color: #2E1C44;
}
#home #wrapper #container #centercol div .style18 {
font-weight: normal;
}
#home #wrapper #container #centercol div .style18 {
font-weight: bold;
}
#home #wrapper #container #centercol div .style18 {
font-weight: bold;
}
#home #wrapper #container #centercol div .doublewide.style37 {
font-weight: bold;
}
#home #wrapper #container #centercol div .style18 {
font-weight: bold;
}
#home #wrapper #container #centercol div .section {
color: #000;
}
#home #wrapper #container #centercol div .section {
font-weight: normal;
}
#home #wrapper #container #centercol div .section {
}