/* -------------------------------------- filename: watkins.css created: 7/16/07 CODE GLOSSARY: banner, sidebar background blue: #82cadd Content: light blue (title): #B9E1ED dark blue (H1..Hn, links): #007ca4 Footer: text and links: #82cadd; Quote box: Bkgrnd: #b3dfea Border: #82cadd most text: font-family: Verdana, Helvetica, sans-serif; H1...Hn and FOOTER: font-family: Verdana, Helvetica, sans-serif; Serif fonts: font-family: Georgia, "Times New Roman", serif; ---------------------- This css page is organized in sections: =BASIC =TEXT =LAYOUT and STYLE the main IDs: =WRAPPER =CONTENT =HEADER =NAV =MAINMENU =FOOTER =QUOTE =HACK (an established hack) =KLUDGE (an awkward workaround) =BUG (a potential or known problem) ------------------------------------------ BEGIN CSS: ------------------------------------------*/ /* =BASIC ------------------------------- */ * {padding:0; margin:0;} html { overflow-y: scroll; } body { font-size:62.5%; font-family: Arial, Helvetica, sans-serif; } /* =HACK Rutter's 62.5% font-size hack 1.0 em is 10px 0.8 em is 8 px 1.4 em is 14 px etc */ /* =TEXT --------------------------------- */ #content a:link, #content a:visited { color:#007ca4; } #footer a:link { color:#82cadd; } #footer a:visited { color:#82cadd; } #footer #pipemenu a { text-decoration:none; } /* creates some padding for the hover background and stops it from overflowing to the right*/ #mainmenu a { display:block; padding-left:5px; width:97%; } #mainmenu a:link, #mainmenu a:visited { font-size:14px; font-family: Arial, Helvetica, Verdana, sans-serif; font-weight:bold; color:black; text-decoration:none; } #mainmenu a:hover { background-color:#007ca4; color:#FFFFFF; } /* hides the home page link */ body.home a#home { display:none; } /* sets the menu item color for the page being viewed*/ body.services a#services, body.about a#about, body.resources a#resources, body.schedule a#schedule, body.contact a#contact { color:#007ca4; } /* prevents hover colors for the menu item on the page being viewed*/ body.services a:hover#services, body.about a:hover#about, body.resources a:hover#resources, body.schedule a:hover#schedule, body.contact a:hover#contact { background-color:white; color:#007ca4; } #nav .telephone { font-size:2.0em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; } #nav .email { font-size:1.2em; font-family: Arial, Helvetica, Verdana, sans-serif; font-weight:bold; color:#FFFFFF; } #nav #contactinfo a, a:visited { color:#FFFFFF; } #content #title { font-size:4.0em; font-style:italic; font-weight:normal; color:#82cadd; line-height: 60px; } #content h1 { font-size:1.6em; font-weight:bold; color:#007ca4; font-family: Arial, Verdana, Helvetica, sans-serif; } #content h2 { font-size:1.4em; font-weight:bold; color:#007ca4; font-family: Arial, Helvetica, Verdana, sans-serif; } #content p, #byline { font-size:1.2em; font-family: verdana, Helvetica, Verdana, sans-serif; line-height: 16px; } #content li { font-size:1.2em; font-family: Verdana, Helvetica, sans-serif; list-style-type: square; line-height: 16pt; } #footer { color:#82cadd; font-size:.9em; font-family: Verdana, Arial, Helvetica, sans-serif; } /* =LAYOUT and STYLE ------------------------------- */ /* =WRAPPER contains header, nav and content*/ #wrapper { width:812px; position:relative; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px; background-image: url(images/sidebar_blue.gif); background-repeat:repeat-y; } /* =HACK begin Alsett Clearing Method */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } /*with a fix for ie mac*/ .clearfix {display:inline-block;} /*plus the holly hack for ie6 windows*/ .clearfix {display:block;} /*END Alsett Clearing Method */ /* =HEADER layout and style ---------------------------- */ #header { background-color:#82cadd; height:101px; position:relative; margin-bottom:0px; } #gap { background-color:#ffffff; margin-bottom:20px; } /*the header has a 20px bottom margin to offset the large text of the title because spans don't have verticle margins. if this margin changes, so must the negative top margin of the nav. */ /* this controls the 4 banner images */ #header {position:relative; z-index:999;} #header img { float:right; margin-right:3px; margin-top:3px; } /* this controls the logo */ #header h1 img{ width:162px; height:64px; position:relative; float:left; margin: 18px 9px 0px 9px; } /* =NAV layout and style ----------------------------------*/ #nav { background-image:url(images/gradient_fill.gif); background-repeat: repeat-x; background-color:#82cadd; position:relative; z-index:0; float:left; width:180px; height:494px; padding-bottom:0px; } /*the negative 20px top margin makes up for the header's 20px bottom margin*/ #nav ul { margin-left:14px; margin-top:80px; list-style:none; } #nav li { margin-bottom:9px; } #nav #contactinfo { margin-left:14px; margin-bottom:0px; margin-top:100px; } /* =CONTENT and =FOOTER layout and style ----------------------------*/ #content { width:632px; background-color:#ffffff; float: left; } #slideshow { height: 300px; width: 400px; margin-right: 20px; margin-left: 20px; position: relative; } #content span#title { margin: 20px; font-family: "Times New Roman", Times, serif; } #content h1, h2, p, ul { margin-left:20px; margin-bottom:0px; } #content h1 { margin-top: 20px; } #content h2 { margin-top: 12px; } /* =KLUDGE this lines up the list bullets with the rest of the margins*/ #content ul { margin-left:3.5em; } /* =KLUDGE then we pull the lower list back out, since it has no bullets*/ #footer ul { margin-left: 1.7em; } /*=BUG if inline display of these uls gets buggy, change to float left*/ div#footer ul, ul#pipemenu li, ul#address li { display:inline; clear:both; font-size: 10px; } div#footer li { padding-left: .3em; } div#footer { height:30px; float:left; margin: 30px 0px 10px 10px; } /* the blue pipe in the footer menu*/ .menubar { border-left: solid .1em #33CCCC; } /* =QUOTE layout and style------------------------*/ #quote { background-color:#b3dfea; border-color: #82cadd; border-style:solid; border-width:2px; width:150px; float:right; margin-left:30px; margin-top:20px; margin-bottom: 30px; } #quote p { margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; } #quote .textup { vertical-align:text-top; } #quote #byline { text-align: right; margin-right: 10px; margin-bottom:20px; } .byline2 { font-size: 8pt; line-height: 12px; } .contact_info { font-size: 11pt; line-height: 20px; } .sitemap1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #000000; text-align: left; list-style-type: disc; text-indent: 0pt; font-weight: bold; margin-left: 50px; } .sitemap2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #000000; text-align: left; list-style-type: none; text-indent: 0pt; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; margin-left: 50px; } .sitemap3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #000000; text-align: left; list-style-type: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 40px; margin-left: 50px; } .floatleft { float: left; padding-right: 25px; } .floatright { float: right; padding-left: 20px; } .spcontact {color:#007ca4;font-size:12px;cursor:pointer;} .contctin {width:163px;border:1px solid #666666;}