/* CSS Document */
* {margin:0;padding:0}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76.2%;
background-color: #5d87a1;
background-image:url(../images/site_images/body_gradient_bg.jpg);
background-repeat:repeat-x;
}
h1,h2,h3,h4,h5,h6 {font-family: "Times New Roman", Times, serif;}
a {color: #00456b;}
hr {color: #00456b;height: 1px;}
#wrapper {
width: 830px;
margin: 0 auto;
background-image: url(../images/site_images/container_shadow.png);
}
#container {
width: 820px;
margin: 0 5px;
padding: 0;
padding-top: 26px;
background-color: #FFFFFF;
background-image: url(../images/site_images/welcome.gif);
background-repeat: no-repeat;
}
#teens #container {
background-image: url(../images/site_images/welcome_teens.gif);
}
#kids #container {
background-image: url(../images/site_images/welcome_kids.gif);
}
#header {
width:834px;
height: 140px;
background-image:url(../images/site_images/header1.gif);
}
/*#kids #header {
width:834px;
height: 140px;
background-image:url(../images/site_images/header_kids.gif);
}
#teens #header {
width:834px;
height: 140px;
background-image:url(../images/site_images/header_teen.gif);
}*/
h1, h2, h3, h4, h5 {
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
margin-left: -9000px;
font-size: 0px;
}
#header #toolbox {
float: right;
padding: 20px;
margin-top: 54px;
}
#header #toolbox p{
text-align: right;
margin-right: 20px
}
#header #toolbox a{
text-decoration: none;
color: #00456b;
}
#header #toolbox a:hover{
text-decoration: underline;
}
#banner.home {
background-color: #587b7c;
height: 188px;
width: 820px;
margin-top:-3px;
background-image: url(../images/site_images/homebanner_bg.jpg);
background-repeat: repeat-x;
}
#banner {
background-color: #56004e;
height: 146px;
width: 820px;
margin-top:-2px;
}
#events #banner {
background-color: #587b7c;
height: 146px;
width: 820px;
margin-top:-2px;
}
#collections #banner {
background-color: #587b7c;
height: 146px;
width: 820px;
margin-top:-2px;
}
#libsvcs #banner {
background-color: #5d87a1;
height: 146px;
width: 820px;
margin-top:-2px;
}
#flag #banner {
background-color: #5d87a1;
height: 146px;
width: 820px;
margin-top:-2px;
}
#town #banner {
background-color: #7e732a;
height: 146px;
width: 820px;
margin-top:-2px;
}
#infosvcs #banner {
background-color: #7e732a;
height: 146px;
width: 820px;
margin-top:-2px;
}
#bannermessage {
margin-left: 629px;
padding-top: 20px;
}
#bannermessage p {
text-transform:uppercase;
color: #fff;
font-size: 1.1em;
margin: 10px;
}
#banner_ad_image {
float: left;
}
#banner_ad1 {
float: left;
width: 240px;
height: 188px;
}
#banner_ad1 h3.white {
padding: 10px 10px 0px 10px;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
font-size: 1.5em;
letter-spacing: 1px;
color: #fff;
text-align: right;
}
#banner_ad1 h2.white {
padding: 0px 10px 10px 10px;
font-family: "Times New Roman", Times, serif;
color: #fff;
text-align: right;
font-size: 20em;
}
#banner_ad1 div h4 {
padding: 0px 10px 10px 10px;
font-family: "Times New Roman", Times, serif
font-size: 2em;
color: #c2dad0;
text-align: right;
}
#banner_ad2 {
float: right;
width: 207px;
background-color: #c2dad0;
height: 188px;
}
#banner_ad2 h3 {
padding: 20px 20px 5px 20px;
font-family: "Times New Roman", Times, serif;
font-size: 1.3em;
}
#banner_ad2 p {
padding: 5px 20px 10px 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
}
#mainnav {
width: 820px;
}
#mainnav p {
text-align: center;
padding: 3px;
background-color: #004964;
color: #ffffff;
}
#kids #mainnav p {background-color: #368468;}
#teens #mainnav p {background-color: #162731;}
#mainnav a {
text-decoration: none;
color: #ffffff;
font-family: 'Times New Roman', Times, serif;
padding-left: 20px;
padding-right: 20px;
letter-spacing:1px;
font-size: 14px;
border-right: 1px solid white;
}
#mainnav a:hover {
text-decoration: underline;
}
#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;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#events a.eventlink:hover {
text-decoration: none;
}
#libsvcs a.libsvcslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#libsvcs a.libsvcslink:hover {
text-decoration: none;
}
#infosvcs a.infosvcslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#infosvcs a.infosvcslink:hover {
text-decoration: none;
}
#collections a.collectionslink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
}
#collections a.collectionslink: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;
}
#teens a.teenslink {
background-color: #5c686f ;
border-top: 2px solid #5c686f ;
border-bottom: 2px solid #5c686f ;
border-left: 4px solid #5c686f ;
margin-left: -4px;
}
#teens a.teenslink:hover {
text-decoration: none;
}
#kids a.kidslink {
background-color: #73a996 ;
border-top: 2px solid #73a996 ;
border-bottom: 2px solid #73a996 ;
border-left: 4px solid #73a996 ;
margin-left: -4px;
}
#kids a.kidslink:hover {
text-decoration: none;
}
#flag a.flaglink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#flag a.flaglink:hover {
text-decoration: none;
}
#town a.townlink {
background-color: #1a627d;
border-top: 2px solid #1a627d;
border-bottom: 2px solid #1a627d;
border-left: 4px solid #1a627d;
margin-left: -4px;
}
#town a.townlink:hover {
text-decoration: none;
}
#mainnav a.left {
border-left: 1px solid white;}
/************* Left Column *********************/
#leftcol {
float: left;
width: 180px;
background-color:#e1e2e3;
border-bottom: 1px dotted #b8bebb ;
}
#leftcol h3 {
padding: 3px 10px 0px 13px;
font-size: 1.3em;
font-weight: normal;
color: #260859;
}
#leftcol h5{
padding: 3px 10px 0px 13px;
font-size: 1.2em;
font-weight: normal;
color: #260859;
}
#leftcol h6 {
padding: 0px 10px 10px 13px;
}
#leftcol p{
padding: 3px 10px 0px 13px;
}
#leftcol a {
color:#1e5a7b;}
#leftcol input{
width: 114px ;
}
#leftcol img {
margin: 0;
padding: 0;
}
#leftcol #leftnav {
margin: 0;
margin-top: -1px;
padding: 0;
}
#leftcol #leftnav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#leftcol #leftnav li {
width: 157px;
padding: 3px 10px 3px 13px;
background-color: #4d8093;
color: #fff;
border-bottom: 1px solid #e1e2e3;
}
#teens #leftcol #leftnav li {
width: 157px;
padding: 3px 10px 3px 13px;
background-color: #5c686f;
color: #fff;
border-bottom: 1px solid #e1e2e3;
}
#kids #leftcol #leftnav li {
width: 157px;
padding: 3px 10px 3px 13px;
background-color: #73a996 ;
color: #fff;
border-bottom: 1px solid #e1e2e3;
}
#leftcol #leftnav li.section {
width: 157px;
padding: 3px 10px 3px 13px;
background-color: #004964;
color: #fff;
border-bottom: 1px solid #e1e2e3;
font-family: 'Times New Roman', Times, serif;
text-transform:uppercase;
font-size: .9em;
}
#teens #leftcol #leftnav li.section {
width: 157px;
padding: 3px 10px 3px 13px;
background-color: #162731;
color: #fff;
border-bottom: 1px solid #e1e2e3;
font-family: 'Times New Roman', Times, serif;
text-transform:uppercase;
font-size: .9em;
}
#kids #leftcol #leftnav li.section {
width: 157px;
padding: 3px 10px 3px 13px;
background-color: #368468;
color: #fff;
border-bottom: 1px solid #e1e2e3;
font-family: 'Times New Roman', Times, serif;
text-transform:uppercase;
font-size: .9em;
}
#leftcol #leftnav a {
font-family: "Times New Roman", Times, serif;
color: #fff;
text-decoration: none;
text-transform:uppercase;
font-size: .9em;
}
#leftcol #leftnav a:hover {
text-decoration: underline;
}
#leftcol #leftnav ul.subnav {
background-color: #e1e2e3;
margin-left: -10px;
margin-right: -10px;
}
#leftcol #leftnav ul.subnav li{
width: 135px;
padding: 3px 0px 3px 40px;
margin:0;
list-style-type: none;
background: transparent;
border-bottom: 1px solid #004964;
}
#leftcol #leftnav ul.subnav li a{
color: #004964;
}
#centercol {
float: left;
width: 448px;
border: 1px dotted #b8bebb ;
border-top: 0;
border-bottom: 0;
padding-top: 20px;
/*overflow:hidden;*/
}
#centercol h2 {
margin: 20px 20px 10px 20px;
font-size: 1.5em;
}
#kids #centercol h2 {
margin: 20px 20px 10px 20px;
font-size: 1.5em;
color: #254f86;
font-family: "Comic Sans MS","Curlz MT", Georgia, Courier,;
text-transform: uppercase;
letter-spacing: 1px;
}
#centercol h3 {
margin: 6px 20px;
color: #56004e;
font-size: 1.2em;
font-weight: bold;
text-transform:uppercase;
}
#kids #centercol h3 {
margin: 6px 20px;
color: #f5901e;
font-size: 1.2em;
font-family: "Comic Sans MS","Curlz MT", Georgia, Courier,;
}
#centercol p {
margin: 6px 20px;
line-height: 1.3em;
}
#centercol ul {
margin-left: 36px;
line-height: 1.3em;
}
#centercol li {
margin-top: 10px;
line-height: 1.3em;
}
#centercol ul a {
line-height: 1.5em;
}
#centercol ol {
margin-left: 43px;
line-height: 1.3em;
}
#centercol ul ol {
margin-left: 26px;
}
#centercol table {
margin:0; padding:0;
margin-left: 20px;
margin-right: 20px;
border:1px solid #ccc;
}
#centercol td {
padding: 4px;
margin: 0px;
vertical-align: top;
border:1px solid #ccc;
}
#centercol strong {
color: #56224e;
}
#rightcol {
float: left;
width: 190px;
padding-top: 20px;
background-color: #d4e5de;
background-image:url(../images/site_images/library_front_transparent.png);
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 200px;
}
#kids #rightcol {
float: left;
width: 190px;
padding-top: 20px;
background-color: #d2eef3;
background-image: url(../images/site_images/kids_rcol_bgimage.jpg);
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 150px;
border-bottom: 1px dotted #b8bebb;
}
#teens #rightcol {
float: left;
width: 190px;
padding-top: 20px;
background-color: #d2d3d5;
background-image: url(../images/site_images/teens_rcol_images.gif);
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 150px;
border-bottom: 1px dotted #b8bebb;
}
#rightcol.home {
float: left;
width: 178px;
padding-top: 20px;
background-color: #fff;
background-image:none;
padding-bottom: 10px;
}
#rightcol h2 {
font-size: 1.3em;
font-weight: normal;
padding: 20px 20px 0 20px;
color: #260859
}
#rightcol h3 {
font-size: 1.2em;
font-weight: normal;
padding: 10px 20px;
color: #260859
}
#rightcol p {
font-weight: normal;
padding: 10px 20px;
}
#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; padding: 10px;
margin-right: 0;
background-color:#aecdda;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#rightcol #eventbox p {
font-weight: normal;
font-size: .9em;
line-height: 1.2em;
padding: 0px;
padding-bottom: 10px;
}
#rightcol #eventbox h3 {
font-weight: bold;
/*color: #00456b;*/
line-height: 1.2em;
padding: 0px;
}
#rightcol li {
font-size: 1em;
font-weight: normal;
padding: 0px 20px 10px 20px;
list-style-type: none;
}
#rightcol #eventbox a{
font-size: 1em;
font-weight: bold;
color: #00456b;
}
#footer_wrapper {
width:864px;
background-image: url(../images/site_images/footer_shadow2.png);
background-position: bottom;
margin: 0 auto;
padding-bottom: 19px;
background-repeat: no-repeat;
}
#footer {
width:822px;
margin: 0 21px;
padding: 10px 0;
background-color: #250858;
color: #fff;
}
#teens #footer {
background-color: #802d0f;
}
#kids #footer {
background-color: #913d66;
}
#footer p{
text-align: center;
line-height: 1.5em;
font-size: .9em;
}
#footer a{
text-decoration: none;
color: #fff;
}
#footer a:hover{
text-decoration: underline;
}
.leftpic {margin-right: 16px; float: left;}
.rightpic {margin-left: 16px; float: right;}
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: -2px;
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;
}
.highlight {
background-color: #CCFFFF;
padding: 2px;
}