/* -------------------------------------------------------------- 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. Main Structure Alternative Styles - Styles for main structure elements that have different styles in different templates 6. Template Styles - Specific styles for the different templates 7. Page Specific Styles - If a page has unique styles not found anywhere else on the site they would go here 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 SL - 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, h6 { font-family: helvetica; color: #004099; margin-bottom: 0.5em; } h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 2em; color: #998C80; } h4 { font-size: 1.167em; } h5 { font-size: 1em; } h6 { font-size: .833em; text-transform: uppercase; } /* Text Elements -------------------------------------------------------------- */ body { color: #333; font: 62.5% arial, helvetica, sans-serif; } p { margin: 0 0 1em; line-height: 1.5em; } .summary p { font-style: italic; color: #998C80; font-size: 1.75em; line-height: 1.5em; margin-bottom: 0.75em; } a { text-decoration: underline; } a,a:link { color: #007DB2; } a:visited { color: #77A1B2; } a:hover, a:active, a:focus { color: #FFB300; } blockquote { margin: 0 0 1.5em 0; } blockquote p, cite { font-size: 1em; font-style: italic; color: #817161; } cite { display: block; margin-bottom: 1.5em; } strong { font-weight: bold; } em { font-style: italic; } p small { font-size: 0.833em; } /* Following six styles generally do not need to be edited */ 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; } address { margin-bottom: 1em; } /* Lists -------------------------------------------------------------- */ ul { margin: 0 1.5em 1.5em 1.5em; } ol { list-style-type: decimal; margin: 0 1.5em 1.5em 1.5em; } li { margin-bottom: .5em; line-height: 1.5; } li ul, li ol { margin: 0 1.5em; padding-top: .5em; } li li { font-size: 1em; } ul ol li { background: none; padding-left: 0; } 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 #D9D9D9; border-bottom: none; border-right: none; } th { background: #e5e5e5 url(../images/design/th-bg.gif) 0 0 repeat-x; font-weight: bold; border-right: 1px solid #D9D9D9; } th,td,caption { padding: 4px 10px 4px 5px; } td { border-bottom: 1px solid #D9D9D9; border-right: 1px solid #D9D9D9; } tr.odd td { background: #FBFBFB; } tfoot { font-style: italic; } caption { background: #eee; text-align: center; } /* Forms ----------------------------------------------------------- */ fieldset { margin-bottom: 1.5em; padding: 1em 0; border: none; } fieldset.last { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } legend { font-weight: bold; } label { font: normal 0.917em arial, sans-serif; float: left; margin-right: 10px; width: 90px; color: #817161; text-transform: uppercase; text-align: right; } .required label { font-weight: bold; } .fieldArea { margin-bottom: 0.833em; } .fieldArea input, .fieldArea textarea, .fieldArea select { width: 150px; background-color: #EEE; border: none; border-top: 1px solid #ABABAB; } .fieldArea textarea { height: 65px; } .fieldArea option, .fieldArea select { color: #817161; } input.protect { display: none; } input.submit { cursor: pointer; } span.message { display: block; font-size: 0.917em; text-align: right; padding-top: 0.5em; } span.error { color: #D00; } 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: #D00; font-weight: bold; } div#errors ul { margin-bottom: 0; } div#errors p { margin-bottom: 0; color: #000; } div#errors li { margin-bottom: 0.5em; font-size: 1.084em; color: #000; } /* -------------------------------------------------------------- 3. Style Library ----------------------------------------------------------- */ .btn { background-color: #EDEAE8; color: #817161; font: bold 0.917em verdana; padding: 2px 6px; text-transform: uppercase; border: 3px solid #CEC8C2; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .btn:hover { background-color: #B1A89E; color: #FFF; border-color: #B1A89E; } .listing { clear: both; } .border { border: 4px solid #CEC8C2; margin-bottom: 1em; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: #ebe8e4 3px 3px 3px; -moz-box-shadow: #ebe8e4 3px 3px 3px; box-shadow: #ebe8e4 3px 3px 3px; } .material { color: #004099; } /* Bread Crumbs ----------------------------------------------------------- */ #breadCrumbs { list-style: none; margin: 0; } #breadCrumbs li { font-size: 0.917em; margin: 0; display: inline; } #breadCrumbs li a { color: #7399E5 } /* Pagination Styles ----------------------------------------------------------- */ .pagination { margin-bottom: 2em; } .pagination .pageInfo { color: #005580; float: right; font-weight: bold; } /* CF */ .pagination .first, .pagination .previous, .pagination .next, .pagination .last { background: url(../images/design/pagination.gif) 0 0 no-repeat; display: block; height: 16px; width: 16px; text-indent: -999em; float: left; margin-right: 5px; } .pagination .first:hover { background-position: 0 -16px; } .pagination .previous { background-position: -16px 0; } .pagination .previous:hover { background-position: -16px -16px; } .pagination .next { background-position: -32px 0; } .pagination .next:hover { background-position: -32px -16px; } .pagination .last { background-position: -48px 0; } .pagination .last:hover { background-position: -48px -16px; } .pagination .disabled { display: none; } .pagination .paginator { float: left; } .pagination .paginator .page { margin-right: 5px; } .pagination .paginator .current { color: #000; text-decoration: none; } .pagination .ellipse { float: left; margin-right: 5px; } /* @font-face ----------------------------------------------------------- */ @font-face { font-family: 'LeagueGothicRegular'; src: url('../fonts/League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'), url('../fonts/League_Gothic.woff') format('woff'), url('../fonts/League_Gothic.ttf') format('truetype'), url('../fonts/League_Gothic.svg#LeagueGothic') format('svg'); } h1 { font: 3em 'LeagueGothicRegular', Arial, sans-serif; letter-spacing: 0; } .no-fontface h1 { font-size: 2.333em; } /* Media Boxes ----------------------------------------------------------- */ /* .media { margin:10px; } */ .media, .bd { overflow:hidden; _overflow:visible; zoom:1; } .media .img { float:left; margin-right: 10px; } .media .img img { display:block; } .media .imgExt { float:right; margin-left: 10px; } /* Float Styles ----------------------------------------------------------- */ .floatLeft { float: left; } .floatRight { float: right; } .clearLeft { clear: left; } .clearRight { clear: right; } .clear { clear: both; } img.floatLeft { margin: 0 1.5em .5em 0; } img.floatRight { margin: 0 0 1.5em 1.5em; } /* Easy Clearing Styles ----------------------------------------------------------- */ .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* CF, IE.css, IE6.css */ /* -------------------------------------------------------------- 4. Main Structure ----------------------------------------------------------- */ body { text-align: center; background-color: #f6f5f3; } #page { text-align: left; padding: 0; font-size: 1.2em; /* 62.5% + 1.2em = 12px */ } #header { background: #000c48 url(../images/design/header-bg.gif) 0 100% repeat-x; } #headerInner { background: url(../images/design/header-inner-bg.jpg) 0 100% no-repeat; width: 870px; min-height: 146px; /* ie6.css */ margin: 0 auto; position: relative; z-index: 300; } #companyInfo { position: absolute; left: 279px; top: 15px; color: #FFF; margin-bottom: 0; } #companyInfo span { color: #007DB2; font: 1.917em 'LeagueGothicRegular', arial, sans-serif; padding-left: 5px; letter-spacing: 3px; } .no-fontface #companyInfo span { font-size: 1.417em; letter-spacing: 1px; } #mainSearchForm { position: absolute; right: 0; top: 15px; } #mainSearchForm .query { background: url(../images/design/search-bg.png) 0 0 no-repeat; height: 20px; border: none; width: 174px; padding: 2px 35px 0 15px; color: #80BED9; } #mainSearchForm .submit { background: url(../images/design/search-submit.png) 0 0px no-repeat; border: none; text-indent: -999em; font-size: 0; overflow: hidden; width: 12px; height: 18px; position: relative; right: 20px; top: -2px; } .searchForm { position: absolute; top: 45px; right: 0; height: 22px; width: 165px; } #logo { background: url(../images/design/logo.png) 0 0 no-repeat; position: absolute; top: 15px; } #logo a { text-indent: -999em; display: block; width: 194px; height: 122px; } #mainMenu { position: absolute; top: 60px; left: 259px; margin: 0; z-index: 300; } .no-fontface #mainMenu { left: 200px; } #mainMenu li { float: left; margin: 0; list-style: none; margin-right: 15px; } #mainMenu li a { color: #FFF; text-decoration: none; font: 2em/1em 'LeagueGothicRegular', arial, sans-serif; padding: 7px 20px; display: block; } /* NOTE */ .no-fontface #mainMenu li a { font-size: 1.333em; } #mainMenu li a.active { color: #D9C498; } #mainMenu li:hover a, #mainMenu li.hover a { background: url(../images/design/nav-hover-bg.png) 0 0 no-repeat; color: #FFC800; } #mainMenu li.noChildren a { background: none; } #mainMenu li#processing-recycling, #mainMenu li#our-locations { width: 134px; } /* NOTE styles should be on the same line */ #mainMenu li#disposal a, #mainMenu li#about a, #mainMenu li#contact a { padding: 31px 20px 10px; background-position: 100% 0 } #mainMenu li ul { background: url(../images/design/dropdown-bg.png) 0 100% no-repeat; /* ie6.css */ position: absolute; width: 166px; display: none; padding-top: 1em; margin: 0; z-index: 1; } #mainMenu li:hover ul, #mainMenu li.hover ul { left: auto; display: block; } #mainMenu li ul li { border-bottom: 1px solid #007DB2; float: none; margin: 0; zoom: 1; margin-top: -3px; } #mainMenu li ul li.last-child { border-bottom: 0; } #mainMenu li ul li a { background-image: none !important; margin-bottom: 0; font: 1.333em arial, sans-serif; padding: 0.5em 20px !important; color: #fff !important; } #mainMenu li ul li a:hover { background-color: #007DB2; } #mainMenu li ul li.last-child a:hover { background: url(../images/design/dropdown-bottom-bg.png) 0 100% no-repeat !important; } .no-fontface #mainMenu li#disposal a, .no-fontface #mainMenu li#about a, .no-fontface #mainMenu li#contact a { padding: 21px 20px 10px; background-position: 100% 0 } #contentMain { background-color: #FFF; } #contentMainInner { width: 870px; margin: auto; padding-bottom: 20px; position: relative; } #contentMainInner .corner { background: url(../images/design/main-content-corner.jpg) 0 0 no-repeat; position: absolute; top: 0px; left: 215px; display: block; width: 20px; height: 15px; } #sideBar { float: left; width: 225px; margin-right: 25px; } #localNav { padding: 25px 10px 0 0; background: url(../images/design/local-nav-bg.gif) 0 0 no-repeat; position: relative; } #localNavCorner { position: absolute; right: 10px; bottom: 0; height: 22px; width: 22px; background: url(../images/design/local-nav-corner.gif) 0 0 no-repeat; } #localNav ul { background: url(../images/design/local-nav-ul-bg.gif) 0 0 repeat-y; margin: 0; border-bottom: 4px solid #e0ddd9; } #localNav li { list-style: none; margin-bottom: 0; text-align: right; } #localNav li a { color: #004099; font: 22px 'LeagueGothicRegular', arial, sans-serif; letter-spacing: 1px; padding: 0.3em 25px 0.3em 0; margin: 0 5px; display: block; border-bottom: 1px solid #E0DDD9; } .no-fontface #localNav li a { font-size: 18px; } #localNav li.active a { border-bottom: 1px solid #E0DDD9; } #localNav li a:hover { color: #FFB300; text-decoration: underline; background-color: #FFF; } #localNav li a.active { color: #B1A89E; padding-right: 25px; text-decoration: none; } #localNav li.last-child a { border-bottom: none; } #localNav li ul { background: #e0ddd9 url(../images/design/sub-nav-bg.jpg) 5px 0 no-repeat; padding: .7em 0; } #localNav li ul li a { margin-right: 5px; font: 1em arial, sans-serif; color: #004099; text-decoration: underline; border-bottom: 1px solid #E0DDD9; } #callout { border-top: 1px dashed #CEC8C2; margin: 2em 10px; padding-top: 1.5em; } #callout #rotatingCallouts { margin-left: -25px; } #callout a.contactUs { background: url(../images/callouts/contact-us.jpg) 0 0 no-repeat; } #callout a.documents { background: url(../images/callouts/documents.jpg) 0 0 no-repeat; } #callout a.contactUs, #callout a.documents { display: block; width: 223px; height: 77px; text-indent: -999em; margin-left: -25px; } #footer { border-top: 4px solid #eeeae9; } #footerInner { width: 870px; font-size: .917em; color: #B1A89E; margin: 0 auto; padding: 25px 0; } #footerInner a { text-decoration: none; } #footerInner .contactInfo, #footerInner .one, #footerInner .two, #footerInner .three, #footerInner .four { float: left; left: 200px; } #footerInner .one, #footerInner .two, #footerInner .three { margin-right: 50px; } #footerInner .contactInfo ul, #footerInner .one ul, #footerInner .two ul, #footerInner .three ul, #footerInner .four ul { margin: 0; } #footerInner .contactInfo ul li, #footerInner .one ul li, #footerInner .two ul li, #footerInner .three ul li, #footerInner .four ul li { list-style: none; } #footerInner .contactInfo { margin-right: 80px; } .phone { background: url(../images/design/phone.jpg) 0 3px no-repeat; padding-left: 20px; } .fax { background: url(../images/design/fax.jpg) 0 4px no-repeat; padding-left: 20px; } /* ----------------------------------------------------------- 5. Main Structure Alternative Styles ----------------------------------------------------------- */ .home #contentMainInner { padding-top: 20px; width: 882px; } .two-column #sideBar { margin-right: 45px; } .home #header { background: url(../images/design/home-header-bg.png) 0 0 repeat-x; } .home #headerInner { height: 400px; background: none; } .home #header #headerInner #logo, .home #header #headerInner #mainMenu, .home #header #headerInner #mainSearchForm, .home #header #headerInner #companyInfo { z-index: 100; } /* NOTE: Specificity */ /* -------------------------------------------------------------- 6. Template Styles ----------------------------------------------------------- */ /* Shared Content between General and List Template ----------------------------------------------------------- */ #mainContent { background-color: #FFF; width: 550px; float: left; padding: 1.5em 0; margin-top: 20px; border-top: 5px solid #CEC8C2; border-bottom: 1px solid #CEC8C2; } #rotatingPictures { width: 190px; margin-bottom: 1em; } #rotatingPictures img.border { margin-bottom: 0; } /* General Template ( 3 Column ) ----------------------------------------------------------- */ .three-column #mainContent { width: 580px; background: url(../images/design/main-content-bg.gif) 100% 0 repeat-y; } #generalContent { width: 350px; float: left; overflow: hidden; margin-right: 20px; } #generalAside { width: 190px; float: left; overflow: hidden; padding: 0 10px; } #generalAside ul { color: #666; margin-right: 0; } #generalAside ul li { list-style: square; } /* List Template ( 2 Column ) ----------------------------------------------------------- */ #listingTop { border-bottom: 1px dashed #CEC8C2; padding-bottom: 1em; margin-bottom: 1.5em; } .listing { margin-bottom: 0.5em; float: left; width: 420px; padding: 0.75em 0 0.75em 130px; } .listing img { float: left; margin-left: -130px; display: inline; /* DMB */ } /* Homepage Template ----------------------------------------------------------- */ #homeAside { width: 230px; float: left; background: url(../images/design/home-box.gif) 0 0 no-repeat; padding: 1.5em 15px; margin-right: 30px; } #homeAside p { font: 2.2em 'LeagueGothicRegular', 'helvetica neue', arial, sans-serif; color: #998C80; } .no-fontface #homeAside p { font-size: 1.5em; } #homeContent { border-top: 3px solid #CEC8C2; width: 540px; float: left; widht: 550px; padding-top: 1.5em; } #homeCallouts { list-style: none; clear: left; width: 882px; margin: 0; padding: 1.5em 0 0 0; position: relative; left: -16px; top: 0; } #homeCallouts li { float: left; } #homeCallouts a { display: block; width: 292px; } #rotatingCallouts { width: 292px; margin-top: 13px; margin-left: 5px; } /* One Column Template ----------------------------------------------------------- */ .one-column #mainContent { width: 870px; } /* Contact Us Template ----------------------------------------------------------- */ .contact #mainContent { width: auto; } .contact #contactInfo { width: 205px; float: left; padding: 15px; border-right: 1px dashed #E0DDD9; } .contact #contactInfo span { color: #004099; font-size: 1.167em; font-family: helvetica; font-weight: bold; } .contact #contactContent { width: 575px; float: left; padding-left: 25px; padding-right: 0; } .contact fieldset { width: 285px; float: left; margin-bottom: 0; } .contact .stateFieldArea { width: 140px; float: left; } .contact .stateFieldArea input { width: 30px; margin-right: 0px; } .contact .zipCodeFieldArea { float: left; width: 100px; } .contact .zipCodeFieldArea label { width: 25px; } .contact .zipCodeFieldArea input { width: 55px; } #contact .submit { float: right; margin-right: 120px; } /* -------------------------------------------------------------- 7. Page Specific Styles ----------------------------------------------------------- */ /* Our Locations ----------------------------------------------------------- */ .our-locations-page #mainContent { width: auto; border: 0; } #locationContent { width: 540px; float: left; margin-right: 40px; } #mapLG { width: 532px; height: 395px; } #locationContent #map { margin-bottom: 1.5em; border: 4px solid #B1A89E; height: 395px; } #locationContent #map img { margin-bottom: 0; } #locationAside { width: 231px; border-top: 3px solid #CEC8C2; float: left; } #locationAside h3 { font-size: 1.5em; } #locationAside .mainOffice { background-color: #F3F1F0; color: #817161; padding: 10px 5px 5px 5px; border-bottom: 1px solid #CEC8C2; border-top: 1px solid #CEC8C2; } #locationAside .mainOffice p { font-size: .917em; margin: 0; margin-top: .5em; } #locationAside .phone { text-align: right; float: right; } #locationAside .locationListing { border-bottom: 1px dashed #CEC8C2; padding: 1.5em 0; } #locationAside .locationListing .locationName { font-size: 1.167em; } #locationAside .locationListing .phone { background: none; } #locationAside .locationListing h4 { border-bottom: 1px solid #BBB; color: #666; margin-bottom: 0; margin-top: 1em; font-weight: normal; } .siteInfo table, .siteInfo td, .siteInfo th { border: 0; } .siteInfo td, .siteInfo th, .siteInfo tr.odd td { background: none;border-top: 0px solid #ddd;vertical-align: top; } .siteInfo td:nth-child(2) { text-align: right; } #locationAside .siteInfo table { margin: .5em 0 0; } #locationAside .siteInfo td, #locationAside .siteInfo th { padding: 2px; } #locationAside .siteInfo table, #locationAside .locationListing { font-size: 10px; } /* Idv Locations ----------------------------------------------------------- */ .individualLocation #mainContent { width: auto; border: 0; } #indLocationContent { width: 476px; margin-right: 40px; border-top: 3px solid #CEC8C2; float: left; } #indLocationContent span { color: #004099; font-weight: bold; } #indLocationAside { width: 304px; float: left; } .googleMap { display: none; } #indLocationAside img { border: none; margin: 0; } #indLocationAside #map { border: 4px solid #B1A89E; padding-bottom: 0; margin-bottom: 1em; height: 221px; } #indLocationAside form { margin: 1.5em 0; border-bottom: 1px solid #E0DDD9; padding-bottom: 1.5em; } #indLocationAside fieldset { margin: 0; padding: 0; } #indLocationAside #startAddress { margin-right: 25px; float: left; margin-left: 15px; background-color: #EEE; border: 1px solid #EEE; border-top: 1px solid #ABABAB; margin-top: 4px; } #indLocationAside .tel { float: right; } #indLocationAside .phone, #indLocationAside .fax { display: block; color: #857566; } #indLocationAside p { color: #B1A89E; font-size: .833em; margin-top: 1.5em; } #indLocationAside .siteInfo { border-top: 3px solid #CEC8C2; border-bottom: 1px solid #E0DDD9; padding-top: 1.5em; } #indLocationAside .siteInfo ul { margin: 0; padding-left: 125px; margin-bottom: 1.5em; } #indLocationAside .siteInfo ul li { list-style: none; text-align: right; } #indLocationAside .siteInfo ul li span { float: right; padding-left: 25px; } #indLocationAside .siteInfo tr:last-child td { border-top: 1px dashed #ccc; } #indLocationAside .siteInfo td { padding: 4px 0; } #indLocationAside .siteInfo table { } #indLocationAside .siteInfo th { text-align: center; } /* LEED ----------------------------------------------------------- */ .recycled td { padding: 4px; } /* Management ----------------------------------------------------------- */ .management #listingTop { display: none; } /* C&D Recycling ----------------------------------------------------------- */ #materials { background-color: #e0ddd9; margin: 0 0 15px 15px; padding: 10px; float: right; width: 235px; } #materialPhotos { width: 230px; height: 171px; overflow: hidden; position: relative; } #materialPhotos img { position: absolute; top: 0; left: 0; display: none; z-index: 200; } #materialPhotos img#default { z-index: 100; display: block; } #materialsRecycled span { cursor: pointer; font-weight: bold; } #materialsRecycled p { display: none; } /* search ----------------------------------------------------------- */ #searchResultsForm { width: 700px; }