/* ================================================================================ screen.css ---------- Devon Mitton v 1.0 | 2009.10.02 ==================== Colors: ------- Light Yellow-Brown: #6e6d44 Brown: #3f261a Dark Brown: #2c1911 Pink-Beige: #fbeab8 Yellow: #f0b91a ================================================================================ */ /* ================================================================================ Imports ------- ================================================================================ */ @import "lib/reset.css"; @import "lib/typography.css"; /*@import "lib/forms.css";*/ /* ================================================================================ Base HTML Styles ---------------- ================================================================================ */ body { background: url("img/interface/bg_body.png") left top repeat-x #fff; min-width: 960px; } /*body { background: url("tmp/welcome.jpg") top center no-repeat; }*/ button { cursor: pointer; } button:active, button:active * { outline: none; } /* ================================================================================ Universal Content Items ----------------------- ================================================================================ */ #header, #focal-area, #main, #footer, #contact, #contact-content { width: 100%; float: left; } #header { position: absolute; left: 0; top: 0; z-index: 10; } #header #logo { position: absolute; left: 0; top: 20px; } #header #logo .icon { background: url("img/interface/bg_logo_icon.png") left top no-repeat; display: block; width: 152px; height: 128px; text-indent: -9999px; overflow: hidden; float: left; } #header #logo .tagline { font-size: 16px; font-weight: bold; position: relative; top: 60px; margin-left: 25px; color: #3f261a; } #header #primary-navigation { position: absolute; top: 20px; right: 0; } ul#nav { float:right; } #header #primary-navigation a.active { text-decoration: underline; } #like { clear:both; } #facebooktext { float:right; font-weight:bold; padding-top:14px; width:92px; padding-right:5px; } #facebooklike { float:right; margin-top:10px; margin-right:8px; width:48px; overflow:hidden; } #googleplus { height:20px; float:right; width:34px; overflow:hidden; margin-right:5px; margin-top:10px; } #focal-area { background: url("img/interface/bg_focal_area.png") center top no-repeat; position: relative; z-index: 1; } #focal-area.flash { height: 600px; } /*#focal-area.flash { border-bottom: 1px dotted red; }*/ #focal-area .content { background: url("img/interface/bg_focal_area_content.png") center bottom no-repeat; padding-top: 150px; padding-bottom: 50px; } #focal-area.flash .content { /*background: none; */padding-top: 200px; } #no-flash { background: url("img/interface/bg_no_flash.png") left top no-repeat; margin: 0 100px; padding: 20px; width: 720px; height: 220px; } #no-flash h1, #no-flash p.intro { font-size: 24px; font-weight: normal; margin: 15px 15px 0px; letter-spacing: -0.5px; color: #3f261a; } #no-flash p.intro { margin-top: 0px; margin-bottom: 30px; line-height: 1; } #no-flash .notice { background: #fbeab8; padding: 15px; } #no-flash .notice p.woah { font-size: 18px; line-height: 24px; color: #3f261a; font-weight: normal; } #no-flash .notice p.woah a { color: #3f261a; font-weight: bold; } #no-flash .notice p { letter-spacing: -0.25px; margin-bottom: 0; color: #6e6d44; } #main { padding-top: 0px; } #main.errorpage { padding-top: 200px; } #welcome #brand-statement h2 { margin-bottom: 0; line-height: 26px; } #welcome #brand-statement h3 { font-weight: bold; } #welcome #brand-statement p.last { margin-bottom: 0; } #welcome #contact-information { position: relative; } #welcome #contact-information #meebo-contact { background: url("img/interface/bg_contact_meebo.jpg") bottom right no-repeat #fff; height: 206px; padding-right: 137px; position: absolute; top: 75px; display: none; } #welcome #contact-information #meebo-contact button { position: absolute; bottom: 20px; right: 137px; } #meebo-container #close-meebo-button { background: url("img/icons/close_icon.png") left top no-repeat; width: 16px; height: 16px; z-index: 100; cursor: pointer; position: absolute; top: 5px; right: 5px; text-indent: -9999px; overflow: hidden; } #meebo-target { position: relative; } #meebo-container { position: absolute; top: 0; left: 340px; background: #fff; z-index: 100; } #meebo-target #meebo-container { top: -10px; left: 20px; background: #3f261a; } #welcome #blog-headlines ul { list-style: none; margin: 0; padding: 0; } #welcome #blog-headlines ul li { line-height: 1.2em; margin-bottom: 10px; } #welcome #social-networks { } #welcome #social-networks .social-badge { display: block; padding: 20px 10px 20px 58px; margin-bottom: 10px; background: left center no-repeat; text-decoration: none; } #welcome #social-networks .social-badge:hover { text-decoration: underline; } #welcome #social-networks #contact-badge { background-image: url("img/icons/social/contact.png"); } #welcome #social-networks #facebook-badge { background-image: url("img/icons/social/facebook.png"); } #welcome #social-networks #twitter-badge { background-image: url("img/icons/social/twitter.png"); } #is a.button { margin-top: 15px; } #welcome_page, #does_page, #has_page, #covers_page, #is_page { position: absolute; } #footer { background: url("img/interface/bg_footer.png") left bottom repeat-x; position: relative; height: 271px; } #footer-wrap { background: url("img/interface/bg_footer_wrap.png") left bottom repeat-x; width: 50%; position: absolute; right: 0; } #footer .content { background: url("img/interface/bg_footer_content.png") center bottom no-repeat; height: 270px; margin-left: -480px; padding: 0; } #footer-navigation { margin: 20px 0 50px; } #footer-navigation ul li { font-size: 11px; } #languages { padding-left: 10px; } #languages .language { display: inline-block; padding: 2px 5px 2px 30px; margin-right: 20px; font-size: 11px; background: left center no-repeat; text-decoration: none; } #languages .language:hover { text-decoration: underline; } #languages #en { background-image: url("img/icons/flags/en.png"); } #languages #fr { background-image: url("img/icons/flags/fr.png"); } #languages #es { background-image: url("img/icons/flags/es.png"); } #footer-logo { background: left top no-repeat; position: absolute; width: 288px; height: 110px; right: 0; bottom: 123px; overflow: hidden; text-indent: -9999px; } #footer-logo.en { background-image: url("img/interface/bg_footer_logo_en.png"); } #footer-logo.es { background-image: url("img/interface/bg_footer_logo_es.png"); } #footer-logo.fr { background-image: url("img/interface/bg_footer_logo_fr.png"); } #footer-logo.flash { background: none; text-indent: 0; overflow: normal; } #contact { } #contact-content { background: #3f261a; padding: 25px 0; } #contact-content h2 { color: #f0b91a; letter-spacing: -0.5px; position: relative; margin-bottom: 20px; } #contact-content .column { padding: 0 20px; } #contact-content .vcard { font-size: 14px; color: #F0b91a; text-align: right; line-height: 24px; border-left: 1px solid #2c1911; margin-bottom: 20px; } #contact-content .vcard a { color: #f0b91a; } #contact-content .vcard .org a { background: url("img/icons/vcard_icon.png") left center no-repeat; padding-left: 21px; } #contact-content .vcard .adr { margin-bottom: 30px; } #contact-content .vcard .card-label { text-transform: uppercase; } #contact-content #email-row { position: relative; top: 15px; } #contact-content #chat-button { display: none; } #contact-content #message-box { position: absolute; top: -10px; left: 20px; width: 551px; } #message-box { padding: 10px 10px 10px 35px; margin-bottom: 1em; border: 2px solid #ddd; } #message-box.error { background: url("img/icons/error.png") 10px no-repeat #FBE3E4; color: #8a1f11!important; border-color: #FBC2C4; } #message-box.notice { background: url("img/icons/notice.png") 10px no-repeat #FFF6BF; color: #514721!important; border-color: #FFD324; } #message-box.success { background: url("img/icons/success.png") 10px no-repeat #E6EFC2; color: #264409!important; border-color: #C6D880; } #message-box.error a { color: #8a1f11; } #message-box.notice a { color: #514721; } #message-box.success a { color: #264409; } #contact-information-phone, #contact-drawer-phone { position: absolute; border: none; background: none; width: 0px; height: 0px; visibility: hidden; top: -8000px; left: -8000px; } /* JavaScript Tweaks */ #hide-button { display: none; } #contact.drawer { position: absolute; top: 0; left: 0; z-index: 100; } #contact.drawer #hide-button { background: url("img/icons/hide_icon.png") left center no-repeat; position: absolute; top: 0; right: 20px; color: #fff; font-size: 13px; padding: 5px 0 5px 21px; cursor: pointer; display: block; } #contact.drawer #hide-button span:hover { border-bottom: 1px dotted #fff; } #contact.drawer #chat-button { display: block; position: absolute; bottom: 0px; } #contact.drawer #chat-button h1 { margin-bottom: 10px; } #contact.drawer #chat-button .button { position: absolute; top: 2px; right: 5px; } #contact.drawer #submit-button-send-message { color: #fff; height: 24px; padding: 0; margin: 0; line-height: 24px; } /*.iPad #contact.drawer #hide-button { display: none; }*/ .iPad #contact-content #chat-button { display: none; } /* HTML/CSS/JS logo Carousel */ #media-container { background: url("img/interface/bg_noflash_focal_area_slide_container.png") left center no-repeat; width: 980px; height: 350px; position: relative; margin: 150px auto 0; overflow: hidden; } #media-slider { width: auto; height: 200px; padding: 100px 0 50px; position: absolute; top: 0; left: 0; } #media-slider.slide { cursor: move; } .media-page { float: left; } .media-page .media-thumb img { cursor: pointer; -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.25))); } .media-page .media-thumb img[rel*=jpg] { -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.5))); } #media-page-indicator-container { position: absolute; left: 50%; bottom: 20px; } .media-page-indicator { width: 4px; height: 4px; border: 1px solid rgba(0,0,0,0.5); margin-right: 2px; -webkit-border-radius: 5px; float: left; } .media-page-indicator.active { background: rgba(0,0,0,0.5); } #media-viewer-container { position: absolute; top: 100px; left: 0; z-index: 250; width: 100%; text-align: center; } #media-viewer { margin: 0px auto; display: inline-block; } #media-viewer img, #media-viewer video { -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.5), 0px -1px 1px rgba(255,255,255,0.9); -webkit-border-radius: 10px; cursor: pointer; } #media-modal { position: absolute; width: 100%; height: 100%; z-index: 200; background: rgba(0,0,0,0.75); } #media-viewer-close-button { border: 3px solid #fff; -webkit-border-radius: 15px; -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.5); color: #fff; font-family: "Helvetica Neue", Helvetica, Arial; font-weight: 900;font-size: 16px; width: 20px; height: 20px; line-height: 20px; background: #000; text-align: center; text-indent: 1px; position: absolute; top: -10px; left: 50%; cursor: pointer; } #media-viewer-close-button.video { margin-left: 220px; } #media-viewer-close-button.image { margin-left: 180px; } /* ================================================================================ Container Classes ----------------- ================================================================================ */ .section { } .content { width: 960px; margin: 0 auto; position: relative; } .separator { border-top: 1px solid #ccc; padding-top: 15px; } .navigation ul { list-style: none; margin: 0; padding: 0; width: 100%; } .navigation ul li { display: inline; margin: 0 10px; font-size: 13px; letter-spacing: .5px; } .navigation ul li a { color: #6e6d44; text-decoration: none; } .navigation ul li a:hover { text-decoration: underline; } /* ================================================================================ Component Classes ----------------- ================================================================================ */ .column { float: left; padding: 20px 20px; } .full { width: 920px; } .half { width: 440px; } .third { width: 280px; } .quarter { width: 200px; } .fifth { width: 152px; } .two-fifths { width: 344px; } .three-fifths { width: 534px; } .four-fifths { width: 724px; } .two-thirds { width: 600px; } .three-quarters { width: 680px; } .text-input { background: url("img/interface/bg_form_text.png") left top no-repeat; font-size: 13px; color: #6e6d44; border: 1px solid #ccc; padding: 8px 10px; width: 260px; margin-bottom: 5px; font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", helvetica, arial, sans-serif; } textarea.text-input { padding-right: 0px; width: 270px; height: 70px; } .button { background: url("img/interface/bg_button.png") left top no-repeat; font-size: 11px; border: none; padding: 0 25px; height: 24px; width: 135px; text-align: right; font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", helvetica, arial, sans-serif; color: #3f261a; } a.button { padding: 5px 25px; height: 14px; width: 85px; display: block; text-decoration: none; } .checklist { margin: 0; padding: 0; list-style: none; } .checklist li { width: 162px; margin-right: 10px; margin-bottom: 15px; float: left; } .checklist li a { background: url("img/icons/expand_icon.png") left top no-repeat; display: block; padding: 2px 0 2px 25px; text-decoration: none; } .checklist li a:hover { text-decoration: underline; } .checklist li a span { display: block; font-size: 11px; } .fifth .checklist li { width: 142px; } .four-fifths .checklist li { width: auto; margin-right: 15px; } .four-fifths .checklist li a span { white-space: nowrap; } /* ================================================================================ Component Amendments -------------------- ================================================================================ */ .text-right .button { position: relative; left: 15px; } .contact-content-iframe-shim { position: absolute; border: 1px solid red; width: 100%; height: ; } /* ================================================================================ Utility Classes --------------- ================================================================================ */ .clear { clear: both; width: 1px; height: 1px; } .left { float: left; } .right { float: right; } .text-right { text-align: right; } .relative { position: relative; } /* ================================================================================ Debug ----- ================================================================================ */ .outline, .outline * { outline: 1px dotted #ccc; } /*@import "lib/debug.css";*/