/* -------------------------------------------------------------- TABLE OF CONTENTS 1. Cross-browser Reset 2. Standard elements defaults - Default styles for standard HTML elements. See /style-guide.html for markup examples. 3. Style Library - Styles repeated through site but aren't structural elements. 4. Main Structure - Includes header, main navigation, main wrapper, footer, etc 5. Template Styles - Specific styles for the different templates STYLE SHEET COMMENT DEFINITIONS CF -- Denotes a style that is used as a clear fix PFD (Prevent float drop) -- Denotes a fix for ie6 to prevent layout from breaking with oversized content IE(.css} -- Denotes a css property that is used for a bug fix in IE7 and below. NOTE if .css is present check alternative style sheet IE6(.css} -- Denotes a css property that is used for a bug fix in IE6. NOTE if .css is present check alternative style sheet IE8.css -- Denotes a style that has an alternative version in the ie8.css style sheet HL (hasLayout) -- Denotes a hasLayout fix for IE DMB (Double margin bug) -- Denotes double margin fix for ie6 Style Library - Denotes that a element draws most of its styles from style library -------------------------------------------------------------- */ /* -------------------------------------------------------------- 1. Cross-browser reset -------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1.5; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; } /* Remove possible quote marks (") from ,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Remove annoying border on linked images. */ a img { border: none; } /* PC FF3 adds an outline to Flash objects */ a, object { outline: none; } /* -------------------------------------------------------------- 2. Standard elements defaults -------------------------------------------------------------- */ /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h5 { font-family: georgia, serif; margin-bottom: 0.25em; color: #61A03D; font-weight: normal; } h1 { font-size: 3em; } h2 { font-size: 2.167em; color: #1E5400; } h3 { font-size: 1.333em; text-transform: uppercase; color: #1E5400; } h4 { font-size: 1.333em; font-weight: bold; } h5 { font-size: 1em; font-weight: bold; } h6 { font-size: 0.917em; text-transform: uppercase; color: #1E5400; } h1 a, h1 a:link, h2 a, h2 a:link, h3 a, h3 a:link, h4 a, h4 a:link, h5 a, h5 a:link, h6 a, h6 a:link { color: #1386BF; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #DD0000; } /* Text Elements -------------------------------------------------------------- */ body { color: #666666; font: 62.5% georgia, serif; } p { margin: 0 0 1em; line-height: 1.25; font-size: 1.333em; } p.summary { color: #808080; font-style: italic; font-size: 1.75em; } a { text-decoration: underline; } a,a:link { color: #1386BF; } a:visited { color: #8AC7E5; } a:hover, a:active, a:focus { color: #DD0000; } blockquote { margin: 0; color: #808080; font-style: italic; } strong { font-weight: bold; } em { font-style: italic; } address { font-style: normal; } cite { font-style: normal; font-size: 0.75em; color: #4C4C4C; text-transform: uppercase; } small { font-size: 0.625em; } sup, sub { line-height: 0; } dfn { font-style: italic; } del { color:#666; } pre { white-space: pre; } pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* Lists -------------------------------------------------------------- */ li ul, li ol { margin: 0 1.5em; padding-top: 1.5em; } ul, ol { margin: 0 1.5em 1.5em 1.5em; } ul ol li { background: none; padding-left: 0; } ol { list-style-type: decimal; } li { margin-bottom: 0.5em; line-height: 1.5; font-size: 1.167em; } li li { font-size: 1em; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} /* Tables -------------------------------------------------------------- */ table { margin-bottom: 1.4em; width:100%; border: 1px solid #E0DFDC; border-right: none; } th { color: #5C5443; background: #e0dfdc url(../images/design/th-bg.gif) 0 0 repeat-x; font-weight: bold; border-bottom: 1px solid #E0DFDC; border-right: 1px solid #E0DFDC; } th,td,caption { padding: 4px 10px 4px 5px; border-right: 1px solid #E0DFDC; } td { border-bottom: 1px dashed #E0DFDC; } tr.last td { border-bottom: none; } tr.odd td { } tfoot td { font-size: 0.833em; border-bottom: none; } caption { background: none; text-align: center; border: none;} /* Forms ----------------------------------------------------------- */ fieldset { margin-bottom: 1.5em; padding: 1em 0; border: 0; border-bottom: 1px dashed #BFBFBF; } fieldset.last { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } legend { font-weight: bold; } label { color: #5C5443; font: bold 1.167em georgia, serif; text-transform: capitalize; float: left; margin-right: 15px; width: 100px; text-align: right; } .field-area { margin-bottom: 0.833em; } .field-area input, .field-area textarea { width: 200px; border: 1px solid #C2BFB9; padding: 3px 0; color: #666666; font-size: 1em; font-family: arial, sans-serif; } .field-area textarea { height: 65px; } fieldset.submit { border: 0; padding-top: 0; } fieldset.submit input { background: #61A03D; color: #FFFFFF; font: bold 1.167em verdana; padding: 4px 6px; border: 0; text-transform: capitalize; } fieldset.submit input:hover { background: #5c983a url(../images/design/btn-hover.gif) 0 0 repeat-x; cursor: pointer; } span.message { display: block; font-size: 0.917em; padding-top: 0.5em; } span.error { color: #DD0000; } div#errors { background: #FFF5E6 url(../images/forms/error.gif) 10px 0.5em no-repeat; border: 1px solid #FFEBCC; font: normal 0.846em arial; margin: 0 0 1.5em 0; padding: 0.5em 10px 0.5em 50px; } div#errors h4 { color: #DD0000; font-weight: bold; } div#errors ul { margin-bottom: 0; } div#errors p { margin-bottom: 0; color: #000000; } div#errors li { margin-bottom: 0.5em; font-size: 1.084em; color: #000000; } /* -------------------------------------------------------------- 3. Style Library ----------------------------------------------------------- */ /* Float Styles ----------------------------------------------------------- */ .floatLeft { float: left; } .floatRight { float: right; } .clearLeft { clear: left; } .clearRight { clear: right; } .clear {clear: both;} img.floatLeft { margin: 0 1.5em 0 0; } img.floatRight { margin: 0 0 1.5em 1.5em; } /* Easy Clearing Styles ----------------------------------------------------------- */ .group:after, .callout-inner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* CF, IE.css, IE6.css */ /* Callouts ----------------------------------------------------------- */ a.callout { display: block; padding-right: 5px; background: url(../images/callouts/callout-shadow.gif) 100% 10px no-repeat; text-decoration: none; cursor: pointer; } .callout-inner { padding: 10px; display: block; border-top: 5px solid #61A03D; background: #FFFFFF url(../images/callouts/callout-bg-logo.gif) -30px 100% no-repeat; display: block; font: 1.333em georgia, serif; color: #5C5443; } .learn-more { padding: 4px; color: #ffffff; background: #61A03D; font: 0.688em verdana, sans-serif; text-transform: capitalize; } a.callout:hover .learn-more { text-decoration: underline; } .nologo { background: url(../images/callouts/callout-bg.gif) 0 100% repeat-x; } /* Text styles ----------------------------------------------------------- */ .dropcap { font-size: 2.75em; color: #1E5400; float: left; margin-right: 4px; margin-bottom: -5px; line-height: 1; } /* -------------------------------------------------------------- 4. Main Structure ----------------------------------------------------------- */ body { margin: 0; text-align: center; background: #fff url() 0 0 no-repeat; } #wrapper { text-align: left; width: 820px; margin: 0 auto; padding: 0; font-size: 1.2em; /* 62.5% + 1.2em = 12px */ } #header { position: relative; border-top: 4px solid #61A03D; border-bottom: 4px solid #EBEAE8; padding-top: 1.714em; } #logo { display: block; position: absolute; left: 40px; top: 1.714em; width: 181px; height: 86px; background: url(../images/design/logo.gif) 0 0 no-repeat; text-indent: -9999px; } #main-navigation { float: right; margin: 0; padding-right: 1.429em; /* ie.css */ } #main-navigation li { float: left; list-style: none; margin: 0 0 0 1.429em; padding-bottom: 1.214em; display: inline; /* DMB */ } #main-navigation a { color: #61A03D; display: block; padding: 0.286em 0.5em; text-decoration: none; font-size: 1.286em; text-transform: capitalize; } #main-navigation a:hover { color: #FFFFFF; background: #61A03D; } #main-navigation li.active { background: url(../images/design/li-active.gif) 50% 100% no-repeat; } #main-navigation li.active a:hover { background: none; color: #61A03D; } p.contact-phone { color: #ABABAB; float: right; padding: 0.571em 1.429em 0.571em 5.714em; border-bottom: 1px dashed #BFBFBF; margin-bottom: 0.714em; } p.contact-phone span { color: #1E5400; font-size: 1.5em; margin-left: 0.357em; } a.event-planner-login { position: absolute; right: 2.143em; top: 0; padding: 0.286em 0.5em 0.5em 0.5em; color: #FFFFFF !important; background: #61A03D; font: bold 0.833em verdana, sans-serif; text-decoration: none; text-transform: capitalize; } a.event-planner-login:hover { text-decoration: underline; cursor: pointer; } #main { padding: 1.286em 0 2em 0; background: url(../images/design/main-bg.gif) 55px 100% no-repeat; } #footer { clear: left; padding-top: 1.429em; border-top: 4px solid #EBEAE8; color: #61A03D; font: 0.643em arial, sans-serif; } #footer p { float: left; width: 375px; } #footer p .adr { display: block; } #footer #footer-numbers { float: left; list-style: none; margin-bottom: 0.25em; margin-bottom: 0; } #footer #footer-numbers li { text-align: right; margin: 0; } #footer #links { float: right; } #footer #links li { display: inline; } #footer #links li a { color: #61A03E; } /* -------------------------------------------------------------- 5. Template Styles ----------------------------------------------------------- */ /* Home Page Template ----------------------------------------------------------- */ #homepage-main-image { position: relative; width: 820px; height: 333px; padding-bottom: 1.286em; border-bottom: 4px solid #EBEAE8; margin-bottom: 1.286em; } #homepage-main-image img { position: absolute; top: 0; left: 0; } #homepage-main-image p { position: absolute; bottom: 20px; left: 20px; margin-bottom: 0; font-size: 3em; color: #FFFFFF; width: 540px; text-shadow: 1px 1px 2px #000000; } #homepage-intro { float: left; width: 450px; padding-left: 20px; margin-right: 20px; } #homepage-callouts { float: left; width: 320px; margin-top: -59px; overflow: hidden; /* PFD */ } #featured-service { padding-right: 4px; position: relative; background: url(../images/callouts/featured-service-shadow.gif) 100% 100% no-repeat; width: 300px; padding-bottom: 0.833em; border-bottom: 1px dashed #BFBFBF; margin-bottom: 0.833em; } #featured-service img { padding: 5px; background: #FFFFFF; border: 1px solid #E0DFDC; } #featured-service-intro { background: rgb(177, 174, 166); background: rgba(177, 174, 166, 0.85); position: absolute; top: 6px; left: 6px; width: 278px; padding: 5px; } #featured-service-intro h3 { font: 0.833em verdana, sans-serif; color: #332914; } #featured-service-intro h4 { font-size: 2em; color: #FFFFFF; } #featured-service-intro h4 .learn-more { color: #FFFFFF; text-decoration: none; font-size: 0.45em; } #featured-service-intro h4 .learn-more:hover { text-decoration: underline; } #homepage-callouts .callout { float: left; width: 140px; margin-right: 15px; /* Inherits from style library */ } #homepage-callouts .callout-inner { width: 120px; min-height: 80px; /* ie6.css, Inherits from style library */ } #homepage-callouts .contact-us .text { margin-bottom: 0.833em; display: block; } #homepage-callouts .contact-us .learn-more { background: none; font: 0.875em georgia, serif; color: #61A03D; text-transform: capitalize; padding-right: 13px; background: url(../images/design/green-arrow.gif) 100% 10px no-repeat; /* Inherits from style library */ } #homepage-callouts .featured-service .text { color: #5C5443; font: 0.625em verdana, serif; } #homepage-callouts .featured-service .text em { display: block; font-style: normal; color: #61A03D; font-size: 1.8em; font-family: georgia, sans-serif; margin-bottom: 0.833em; } /* General Template ( 3 Column ) ----------------------------------------------------------- */ #side-navigation { float: left; width: 151px; margin-right: 19px; overflow: hidden; /* PFD */ } #side-navigation ul { list-style: none; border-top: 1px solid #F3F2F1; margin: 0; } #side-navigation li { border-bottom: 1px solid #F3F2F1; margin: 0; } #side-navigation li a { color: #1E5400; font-size: 1.286em; text-decoration: none; padding: 0.286em 5px; display: block; } #side-navigation li a:hover, #side-navigation li.active a { background: #61A03D; color: #FFFFFF; } /* Third Level Navigation */ #side-navigation li ul { border-top: 0; list-style: disc; color: #61A03D; padding: 0 5px 0.25em 0; margin-left: 28px; } #side-navigation li ul li { border-bottom: none; /* ie6.css */ } #side-navigation li ul li a { color: #61A03D; font-size: 1em; } #side-navigation li ul li a:hover { background: none; } #side-navigation li.active ul li a { background: none; color: #61A03D; } #side-navigation li ul li a:hover { color: #1E5400; } #content { float: left; padding: 0 20px; width: 369px; overflow: hidden; /* PFD IE6 */ border-right: 1px dashed #BFBFBF; border-left: 1px dashed #BFBFBF; margin-right: 14px; } #aside { float: left; width: 225px; overflow: hidden; /* PFD */ } #aside-photo { background: url(../images/design/aside-photo-shadow.gif) 100% 100% no-repeat; padding-right: 5px; margin-bottom: 1.25em; } #aside-photo img { padding: 5px; background: #FFFFFF; border: 1px solid #E0DFDC; display: block; } #aside h4 { padding-top: 0.714em; border-top: 4px solid #EBEAE8; } #aside .callout-inner { width: 200px; /* ie6.css */ } #aside .callout-inner .text { float: left; width: 125px; /* ie.css */ margin-right: 5px; } #aside .callout-inner .learn-more { float: left; } /* Service Page Template ----------------------------------------------------------- */ #service-listing { list-style: none; margin: 0; padding-bottom: 20px; background: url(../images/design/services-ul-bg.gif) 100% 100% no-repeat; } #service-listing li { float: left; width: 120px; padding: 0 10px; margin: 0 0 0 20px; display: inline; /* ie6 dmb */ } #service-listing li img { padding: 5px; margin: 0 -10px 0.714em -10px; background: #FFFFFF; border: 1px solid #E0DFDC; display: block; } #service-listing li h2 { font-size: 1.143em; font-weight: bold; } #service-listing li p { font-size: 0.875em; } #service-intro { float: left; width: 370px; margin-right: 30px; padding-top: 1.429em; padding-left: 20px; } #additional-services { float: left; width: 220px; margin-right: 20px; padding-top: 1.429em; } #service-callouts { float: left; width: 160px; padding-top: 1.429em; } /* Contact Us Page Template ----------------------------------------------------------- */ #contact-info { float: left; width: 380px; padding-left: 20px; margin-right: 20px; } #contact-info h2 { margin-top: 1.875em; padding-top: 1.875em; border-top: 1px dashed #BFBFBF; font-size: 1.333em; font-weight: bold; color: #61A03D; } #contact-info ul { list-style: none; margin: 0; } #contact-info ul li { float: left; width: 210px; font-size: 1.333em; } #contact-info ul li.phone { width: 170px; } #contact-info ul li span { font-weight: bold; } #contact-form { float: left; width: 350px; padding: 2.083em 0 0 19px; border-left: 1px dashed #BFBFBF; } #contact-form fieldset.submit input { float: right; }