/* * * * * * * * * * * * * * * * * * * @author Mike Cavaliere * * @company DraftFCB * * * * * * * * * * * * * * * * * * * * * This is the primary Hampton css file, to be included on all pages. * * Conventions: * * We apply multiple classes to the tag for each page, to take full advantage of CSS cascading. * This allows us to apply styling only where needed on a section-specific, subsection-specific, page-specific * or sitewide scale. * * The tag for each page should have: * * ...one of the following (sets main nav highlighting): * * .section-home * .section-save * .section-nominate * .section-new * .section-hidden * .section-lost * .section-driveabouts * * ...AND one of the following, if in the 'save-a-landmark' subsection (sets subnav highlighting): * * .subsection-saved * .subsection-facts * .subsection-route-66 * .subsection-expert * .subsection-restored * .subsection-american * .subsection-international * .subsection-lost * * ...AND a class for the page (applies page-specific styles), e.g. something like: * * .pg-home * OR * .pg-route-66 * OR * .pg-driveabouts-detail * etc... * * * * * */ @charset "utf-8"; /* Based on Eric Meyer's CSS Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: #fff; background: #003366; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } fieldset { border: 0 none; } input,textarea,select{ font-family:inherit; font-size:inherit; font-weight:inherit; } ul, ol {padding-left: 0px;} input.text { padding-top: 3px; } input.checkbox { padding-top: 3px; } input.radio { width: 13px; height: 13px; margin: 0; padding-top: 3px; } /*select { padding-top: 3px; }*/ /* Font size reset */ * {font-size: 100.1%;} html {font-size: 62.5%;} body { font: 12px Verdana, Arial, Helvetica, sans-serif; line-height: 14px; margin: 0; } h1 {font-size: 20px; line-height: 26px; margin-bottom: 12px;} h2 {font-size: 1.8em; line-height: 100%; margin-bottom: 12px;} h3 {font-size: 1.6em; } h4 {font-size: 1.5em;} h5 {font-size: 1.4em;} h6 {font-size: 1.3em;} p { margin-bottom: 12px; line-height: 14px; } p.summary { font-weight: bold; } em.date { display: block; margin-bottom: 5px; color: #8b8b8b; font-style: italic; } sup { font-size:small; position:relative; top:-3px; } h2 { font-size: 16px; color: #547b2e; } h3 { font-size: 14px; color: #b51749; } h3 a { color: #b51749; } /* * Anchors */ a { color: #133d6d; text-decoration: none; } a.block { display: block; font-weight: bold; } a.more { font-weight: bold; } a.archives { display: block; text-decoration: underline; text-align: right; font-weight: normal; } a.arrow { display: block; padding-left: 10px; background: transparent url(../images/icons/arrows.png) 0px -143px no-repeat scroll; font-size: 13px; text-decoration: underline; } a.noarrow { font-size: 13px; text-decoration: underline; } a.back { display: block; padding-left: 10px; margin-bottom: 12px; background: transparent url(../images/icons/arrows.png) 0px -286px no-repeat scroll; font-size: 13px; text-decoration: underline; } a.thumb { float: left; display: block; text-align: center; } /* * General form styles */ form sup.required { color: #dc1d3b; } form span.required { display: block; margin-bottom: 12px; color: #606060; font-size: 11px; text-align: right; } form h3 { margin-bottom: 4px; } form div.form-block { margin-bottom: 23px; } input.text, textarea { border-top: 1px solid #c8c8c8; border-left: 1px solid #a8a8a8; border-bottom: 1px solid #f7f7f7; border-right: 1px solid #f3f3f3; } /* * Reusable Classes */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /* * Injected icons */ a.restored { position: relative; } a.restored span.restored { display: block; position: absolute; top: -9px; left: -8px; width: 29px; height: 27px; background: transparent url(../images/icons/restored-lg.png) top left no-repeat scroll; } /* * Elements with image replacement */ .swap { display: block; text-indent: -100000px; width: 100%; background-color: transparent; background-position: top left; background-repeat: no-repeat; } h1.all-american-landmarks { width: 159px; height: 61px; margin: 0 auto 12px; background-image : url(../images/graphics/american-landmarks.png); } /* * JS-injected rounded corners */ span.top { display: block; position: absolute; top: 0px; left: 0px; } span.bottom { display: block; position: absolute; bottom: 0px; left: 0px; } /* * */ ul.legend { } ul.legend li { /*display: block; list-style-image: url(../images/icons/restored.png);*/ list-style: none; color: #666; margin-left: 14px; } ul.legend li.restored { position: relative; left: -26px; padding-left: 24px; background: transparent url(../images/icons/restored.png) 0 0 no-repeat scroll; } /* * Toggleable content blocks */ .expandable-trigger { cursor: pointer; } /* * Pagination module */ div.pagination { float: right; clear: both; width: 100%; font-size: 11px; margin: 0 0 12px 0px; } div.pagination label { float: right; margin-right: 10px; color: #8b8b8b; font-weight: bold; } div.pagination ol { margin: 0; padding: 0; float: right; } div.pagination ol li { float: left; list-style-type: none; } div.pagination ol li a { margin-right: 10px; font-weight: bold; } /* * Buttons */ a.btn { display: block; text-indent: -10000px; } a.btn-go { display: block; width: 71px; height: 29px; margin: 15px auto 0; background: transparent url(../images/buttons/go.png) top left no-repeat scroll; text-indent: -10000px; } a.btn-find { display: block; width: 101px; height: 26px; background: transparent url(../images/buttons/find-hampton.gif) top left no-repeat scroll; text-indent: -10000px; } a.btn-print { display: block; width: 91px; height: 26px; background: transparent url(../images/buttons/print.gif) top left no-repeat scroll; text-indent: -10000px; } a.btn-view-restoration-photos { width: 121px; height: 26px; background: transparent url(../images/buttons/view-restoration-photos.gif) top left no-repeat scroll; } a.submit { display: block; text-indent: -10000px; } /* * Sliding doors button - flexes to content */ .btn-sd { float: left; display: block; font-weight: bold; border: 0 none; text-decoration: none !important; padding-left: 8px; background-color: transparent; background-repeat: no-repeat; background-image: url(../images/buttons/button-sprite-l.png); -background-image: url(../images/buttons/button-sprite-l.gif); background-position: top left; } .btn-sd span { color: #FFF; float: left; display: block; line-height: 26px; padding: 0 12px 0 4px; background-color: transparent; background-repeat: no-repeat; background-image: url(../images/buttons/button-sprite-r.png); -background-image: url(../images/buttons/button-sprite-r.gif); background-position: top right; font-size:10px; } /* Hide an element offscreen */ .hide { position: absolute; top: -100000px; left: -100000px; } /* * Lists */ ol.cols { margin-bottom: 12px; } ol.cols li { float: left; list-style-type: none; } ol.cols li { float: left; width: 143px; margin-right: 12px; list-style-type: none; } ol.cols li p { font-size: 11px; line-height: 14px; padding-right: 20px; } ol.cols li.first { margin-left: 0; } ol.cols li.last { margin-right: 0; background: transparent none; } ol.cols h2 { margin-bottom: 0px; } ol.cols h2 a { display: block; font-size: 13px; color: #b51749; text-decoration: none; } ol.cols strong { display: inline; font-size: 100%; } ol.teasers { clear: both; padding-left: 0; } ol.teasers h3 { margin: 0px; } ol.teasers em { padding-top: 0px; } ol.teasers li { padding-bottom: 15px; list-style-type: none; } ol.teasers li div.thumb { float: left; width: 125px; } ol.teasers li div.thumb a.thumb { margin-bottom: 3px; float: none; } ol.teasers li div.thumb a.btn-find { display: block; text-align: center; margin: 0 auto; } ol.teasers li a.thumb img { margin: 0 auto; } ol.teasers li div.summary { float: right; width: 310px; } ol.teasers li div.buttons a.btn { float: left; font-weight: normal; } /* Main elements */ body { background: #003366; } #wrap-out { position: relative; margin: 0 auto; width: 1004px; /*padding-bottom: 23px;*/ } #wrap-in { position: relative; padding: 25px 20px 0 28px; z-index: 50; /* Above the footer */ } #head { position: relative; } #head h1.logo { margin: 0px; padding: 0px; } #head h1.logo a { display: block; width: 113px; height: 76px; background: transparent url(../images/hampton-logo.png) top left no-repeat scroll; text-indent: -100000px; } #head h1 { float: left; margin-bottom: 0; } #site-search { float: right; margin-right: 7px; margin: 0px; padding: 0px; } #site-search span { font-weight: bold; } #site-search label { float: left; padding-top: 4px; } #site-search input.text { float: left; margin-left: 4px; padding-left: 4px; color: #999; } #site-search a.submit { float: left; width: 28px; height: 29px; margin-left: 8px; background: transparent url(../images/srch-arrow.png) top left no-repeat scroll; } #site-search a.book-trip { float: left; display: block; width: 136px; height: 25px; margin-left: 15px; background: transparent url(../images/buttons/book-your-next-trip.gif) top left no-repeat scroll; text-indent: -100000px; } /* * Body of Page */ #body { padding: 0 0 0 137px; } /* * Content box */ .content-box { position: relative; padding: 0 20px; margin-bottom:45px; margin-top:17px; background: transparent url(../images/layout/content-bg-1.png) top left repeat-y scroll; color: #252525; zoom: 1; } .content-box .top { width: 493px; height: 17px; top: -17px; position: absolute; background: transparent url(../images/layout/content-box-ends.png) top left no-repeat scroll; } .content-box .bottom { width: 493px; height: 17px; bottom: -17px; background: transparent url(../images/layout/content-box-ends.png) bottom left no-repeat scroll; } .content-box ul { margin-left: 18px; } .expandable { margin: 0 -20px; padding: 10px 20px; background: transparent url(../images/layout/content-bg-1.png) top left repeat-y scroll; } /* * Footer */ #foot { clear: both; height: 25px; position: relative; /*font-size: 8px;*/ font-size: .70em; background: #003366; text-align: center; margin-left: auto; margin-right: auto; z-index: 20; } #foot ul li { } #foot p.copyright { float: left; } #foot a { border-right: 1px solid #fff; padding-right: 8px; margin-right: 8px; color: #FFF; text-decoration: underline; } #foot-nav { width: 850px; margin-left: auto; margin-right: auto; text-align: center; } #foot-nav li { list-style-type: none; float: left; line-height: 25px; } #foot-nav li.last a { padding-right: 0; border-right: 0 none; margin-right: 0; } /* * Top Navigation */ #primary-nav { float: left; margin: 0; padding: 0; width: 840px; /* Explicit for IE7 */ } #primary-nav li { list-style-type: none; float: left; } #primary-nav li a { display: block; background-color: transparent; background-image: url(../images/main-nav.png); line-height: 37px; text-indent: -100000px; text-decoration: none; } /* Backdrop */ body #wrap-out { background: transparent url(../images/graphics/hampton-bg-4.jpg) top left no-repeat scroll; } body.section-home #wrap-out { background: transparent url(../images/graphics/hampton-bg-1.jpg) top left no-repeat scroll; } body.section-nominate #wrap-out { background: transparent url(../images/graphics/hampton-bg-2.jpg) top left no-repeat scroll; } body.section-save.pg-route-66 #wrap-out { background: transparent url(../images/graphics/hampton-bg-3.jpg) top left no-repeat scroll; } body.section-new.pg-new #wrap-out { background: transparent url(../images/graphics/hampton-bg-5.jpg) top left no-repeat scroll; } body.section-hidden.pg-hidden #wrap-out { background: transparent url(../images/graphics/hampton-bg-6.jpg) top left no-repeat scroll; } /* Activate on state for current section */ .section-home #primary-nav li.home a, .section-save #primary-nav li.save a, .section-nominate #primary-nav li.nominate a, .section-new #primary-nav li.new a, .section-hidden #primary-nav li.hidden a, .section-driveabouts #primary-nav li.driveabouts a, #primary-nav li a:hover { } /* Home */ #primary-nav li.home { } #primary-nav li.home a { width: 68px; background-position: 0 0; } .section-home #primary-nav li.home a, #primary-nav li.home a:hover { background-position: 0 -37px; } /* Save-a-Landmark */ #primary-nav li.save a { width: 136px; background-position: -68px 0; } .section-save #primary-nav li.save a, #primary-nav li.save a:hover { background-position: -68px -37px; } /* Nominate a Landmark */ #primary-nav li.nominate a { width: 160px; background-position: -204px 0; } .section-nominate #primary-nav li.nominate a, #primary-nav li.nominate a:hover { background-position: -204px -37px; } /* What's New */ #primary-nav li.new a { width: 97px; background-position: -364px 0; } .section-new #primary-nav li.new a, #primary-nav li.new a:hover { background-position: -364px -37px; } /* Hidden Landmarks */ #primary-nav li.hidden a { width: 137px; background-position: -461px 0; } .section-hidden #primary-nav li.hidden a, #primary-nav li.hidden a:hover { background-position: -461px -37px; } /* Lost Landmarks */ #primary-nav li.lost a { width: 123px; background-position: -598px 0; } .section-lost #primary-nav li.lost a, #primary-nav li.lost a:hover { background-position: -598px -37px; } /* Driveabouts */ #primary-nav li.driveabouts a { width: 119px; background-position: -721px 0; } .section-driveabouts #primary-nav li.driveabouts a, #primary-nav li.driveabouts a:hover { background-position: -721px -37px; } /* * Sub Nav */ #body #secondary-nav { height: 154px; margin: 0 0 25px 0; background: transparent url(../images/layout/road-sign.png) top left no-repeat scroll; } #secondary-nav img { float: left; margin: 24px 30px 0 45px; } #secondary-nav ul { float: left; margin-top: 23px; } #secondary-nav li { list-style-type: none; } #secondary-nav li a { background: transparent url(../images/icons/arrows.png) left -81px no-repeat scroll; display: block; padding-left: 14px; margin-bottom: 6px; font-size: 13px; line-height: 12px; text-decoration: none; color: #fff; } #secondary-nav li a:hover { text-decoration: underline; } /* * Sub Nav hover/on-state */ .subsection-saved #secondary-nav li.saved a, .subsection-facts #secondary-nav li.facts a, .subsection-route-66 #secondary-nav li.route-66 a, .subsection-expert #secondary-nav li.expert a, .subsection-restored #secondary-nav li.restored a, .subsection-american #secondary-nav li.american a, .subsection-american2010 #secondary-nav li.american2010 a, .subsection-international #secondary-nav li.international a, .subsection-lost #secondary-nav li.lost a, #secondary-nav li a:hover { color: #ffcc00; background-position: 0 -340px; } /* Landmark Search form */ #landmark_search { position: absolute; top: 0px; left: 0px; padding: 95px 0 34px; /* make room for header/footer images */ color: #252525; font-size: 10px; } #landmark_search .top { width: 241px; height: 95px; background: transparent url(../images/layout/find-landmark-top.png) top left no-repeat scroll; } #landmark_search .bottom { width: 241px; height: 34px; position: static; background: transparent url(../images/layout/find-landmark-bottom.png) top left no-repeat scroll; } #landmark_search div.body { padding: 0px 19px 0 26px; background: transparent url(../images/layout/find-landmark-bg.png) top left repeat-y scroll; } #landmark_search label { display: block } #landmark_search label.expandable-trigger { border-top: 1px solid #ffcc66; border-bottom: 1px solid #ffcc66; padding: 6px 0 6px 17px; margin-bottom: 8px; background-color: transparent; background-image: url(../images/icons/arrows.png); background-repeat: no-repeat; } #landmark_search label.trigger-on { background-position: 0px -200px; } #landmark_search label.trigger-off { background-position: 0px -240px; } #landmark_search input.text { color: #000; padding-left: 5px; } #landmark_search fieldset { margin-bottom: 8px; } #landmark_search fieldset.category-radios { margin-left: 15px; } #landmark_search fieldset.category-radios input.radio { float: left; margin-right: 5px; } #landmark_search fieldset.category-radios label { float: left; margin-right: 8px; } #landmark_search fieldset.checkboxes { padding: 0; border: 0 none; margin: 0 0 0 15px; } #landmark_search fieldset.checkboxes:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #landmark_search fieldset.checkboxes { display: inline-block; } html[xmlns] #landmark_search fieldset.checkboxes { display: block; } * html #landmark_search fieldset.checkboxes { height: 1%; } #landmark_search fieldset.checkboxes input.checkbox { float: left; margin: 0 5px 0 0; } #landmark_search fieldset.checkboxes label { float: left; padding-top: 3px; color: #fff; } .page-description div.details { float: left; width: 200px; } /* * Layout */ #col-primary { float: left; width: 493px; /* Note: the homepage version is wider */ } #col-secondary { position: relative; float: right; width: 241px; z-index: 100; } /* * Hidden Landmarks */ .pg-hidden .arrow { margin-bottom: 12px; } /* * Forms */ .form-block h3 { color: #5477ba; margin-left: 184px; } .form-block p { margin-left: 184px; color: #898989; } .form-block span.detail { display: block; color: #898989; } .form-block fieldset { margin-bottom: 7px; padding: 0; } .form-block label { float: left; display: block; width: 130px; padding-left: 45px; margin-right: 8px; text-align: right; } .form-block input.text { width: 241px; } .form-block textarea { width: 241px; height: 93px; } .form-block select { width: 170px; } .form-block a.submit { width: 70px; height: 31px; margin: 0 0 30px 184px; background: transparent url(../images/buttons/submit.png) top left no-repeat scroll; } .form-block fieldset input.checkbox { float: left; position: relative; top: -4px; margin-left: 180px; } .form-block fieldset.contact-me label { width: 241px; padding: 0; text-align: left; } .form-block h3.expandable-trigger { margin-left:174px; padding-left:10px; background-color: transparent; background-image: url(../images/icons/arrows.png); background-repeat: no-repeat; } .form-block h3.trigger-on { background-position: 0px -35px; } .form-block h3.trigger-off { background-position: 0px 2px; } /* * Driveabouts page */ .pg-driveabouts #col-primary h2 { margin-bottom: 16px; } .pg-driveabouts #col-primary h3 { margin-bottom: 4px; } /* * Save-A-Landmark page */ .pg-save div.postcards { display: block; position: absolute; width: 483px; height: 260px; bottom: 0px; left: 0px; /*background: transparent url(../images/graphics/postcards.png) -28px bottom no-repeat scroll;*/ } .pg-save #body { margin-bottom: 140px; } /* * Saved Landmarks page */ .pg-saved ol.cols { clear: both; margin-bottom: 25px; border-top: 1px solid #c09a14; } .pg-saved ol.cols li { width: 127px; margin: 0 25px; padding-top: 15px; } .pg-saved ol.cols li.first { margin-left: 0; } .pg-saved ol.cols li.last { margin-right: 0; } .pg-saved ol.cols h2 a { display: block; font-size: 12px; color: #b51749; text-decoration: none; } .pg-saved ol.cols a.thumb { height: 84px; margin-bottom: 5px; } .pg-saved ol.cols a.more { display: block; font-size: 11px; } .pg-saved ol.cols em { margin-bottom: 3px; } /* * Landmark Details page */ .pg-detail a.arrow { margin-bottom: 20px; } .pg-detail h2 { margin-bottom: 0; font-size: 19px; color: #b51749; } .pg-detail div.thumb { margin-bottom: 12px; } .pg-detail div.thumb img { float: left; margin-right: 12px; } .pg-detail div.thumb a.btn { float: left; } /* * Landmark Details page */ .pg-american #body h2 { margin-bottom: 12px; font-size: 19px; font-weight: normal; color: #666; } /* * Meet Our Expert page */ .pg-expert img.main { float: left; margin-right: 15px; } .pg-expert .page-description { margin-bottom: 12px; } .pg-expert .page-description a.arrow { float: left; } /* * Landmark Facts page */ .pg-facts .content-box ul li { list-style-type: none; margin-bottom: 12px; } /* * Restored Landmarks */ .pg-restored-detail .page-description img.main { float: left; margin-right: 15px; } .pg-restored-detail #body a.arrow { margin-bottom: 20px; } .pg-restored-detail #body em { font-size: 14px; } .pg-restored-detail #body h2 { color: #b51749; font-size: 19px; } .pg-restored-detail .page-description { margin-bottom: 20px; } .pg-restored-detail .page-description ul.legend, .pg-restored-detail .page-description a.btn { margin-bottom: 10px; } .pg-restored-detail .page-description ul.legend:after, .pg-restored-detail .page-description a.btn:after { } /* * Driveabouts */ .pg-driveabouts .content-box ul { margin-bottom: 12px; } /* * Driveabouts Detail */ .pg-driveabouts-detail a.btn-print { float: right; margin-bottom: 12px; } ol.teasers div.summary { position: relative; } .pg-driveabouts-detail ol.teasers .btn-sd { background-position: left -26px; position: absolute; top: 0px; right: 0px; } .pg-driveabouts-detail ol.teasers .btn-sd span { background-position:right -26px; /* center text vertically */ height:19px; padding-bottom:7px; padding-top:1px; } /* * Route 66 Petition */ .pg-route-66-petition .form-block fieldset.confirm input.checkbox { margin-left: 80px; float: left; } .pg-route-66-petition .form-block fieldset.confirm label { width: 300px; text-align: left; padding-left: 10px; } .pg-route-66-petition .form-block label { width: 90px; }