/* ================================================================================ screen.css ---------- Devon Mitton | Mars Hill Group ==================== Colors: BG: Border: ------- Green: #056839 Dark Grey: #333 ================================================================================ */ /* ===== Import Components ===== */ @import "lib/reset.css"; @import "lib/typography.css"; /*@import "lib/forms.css";*/ /* ===== HTML Base Styles ===== */ body { background: #056839; } img.border { border: 1px solid #333; } /* ===== Universal Content Layout Elements ===== */ #header, #logo, #primary-navigation, #main-wrap, #main, #footer { float: left; width: 100%; min-width: 1020px; } #header { height: 468px; position: relative; background: left top repeat-x #333; } #home #header { background-image: url('img/interface/bg_header_home.jpg'); } #about #header { background-image: url('img/interface/bg_header_about.jpg'); } #events #header { background-image: url('img/interface/bg_header_events.jpg'); } #tagline { width: 418px; height: 110px; background: url('img/interface/bg_tagline.png') left top no-repeat; float: left; margin-top: 50px; overflow: hidden; text-indent: -9999px; } #logo { background: #056839; position: absolute; left: 0px; bottom: 0px; height: 120px; } /*#logo .content { padding-top: 30px; padding-bottom: 20px; }*/ #logo a { background: url('img/interface/bg_artspace_logo.png') left top no-repeat; display: block; width: 193px; height: 49px; overflow: hidden; text-indent: -9999px; position: absolute; left: 50px; top: 40px; } #main-wrap { background: url('img/interface/bg_main_wrap.jpg'); } #main { padding: 40px 0 50px; position: relative; background: url('img/interface/bg_main.jpg') left top repeat-x; } #primary-navigation { height: 40px; background: url('img/interface/bg_primary_navigation.png') left top repeat-x; position: absolute; top: 0px; left: 0px; } #primary-navigation ul.content { list-style: none; margin: 0; padding: 0px 40px; text-transform: uppercase; float: left; font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"; } #primary-navigation ul.content li, #primary-navigation ul.content li a { display: block; float: left; color: #fff; text-decoration: none; font-size: 14px; } #primary-navigation ul.content li { padding-bottom: 8px; } #primary-navigation ul.content li a { padding: 9px 10px 0; height: 23px; } #primary-navigation ul.content li a:hover { color: #ccc; background: none; } #primary-navigation ul.content li.active { background: url('img/interface/bg_primary_navigation_active_item.png') center bottom no-repeat; } #primary-navigation ul.content li:active a, #primary-navigation ul.content li.active a { color: #056839; } #primary-content { width: 605px; float: right; } #secondary-content { width: 245px; float: left; } #secondary-navigation { list-style: none; margin: 0; padding: 0; } #secondary-navigation li { font-size: 1.3em; font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"; text-transform: uppercase; margin-bottom: .5em; } #secondary-navigation li a { display: block; color: #222; text-decoration: none; } #footer { } #info { background: #161616; } #info .address { color: #fff; width: 300px; margin: 0 45px 0 0; float: left; } #info .credit { color: #888; position: absolute; top: 50px; right: 57px; font-size: 0.9em; font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"; } #footer-navigation { list-style: none; margin: 0; padding: 0; float: left; font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"; color: #fff; font-weight: bold; } #footer-navigation li, #footer-navigation li a { display: block; color: #fff; } #footer-navigation li a { text-decoration: none; padding: 3px 10px; text-transform: uppercase; } #footer-navigation li a:hover { color: #056839; background: none; } #sponsors { position: absolute; right: 60px; bottom: 48px; width: 300px; color: #fff``; } #manitoba { float: right; margin-left: 35px; } #winnipeg-foundation { float: right; } #contact-info { float: left; } #contact-info .content { float: left; } #contact-info h1 { margin: 0 10px 0 0; line-height: 1em; color: #fff; } #contact-info p { color: #fff; font-size: 15px; margin: 0; } #contact-info p .name, #contact-info p .email, #contact-info p .phone { display: block; float: left; padding: 10px; padding-left: 40px; background: url('img/interface/bg_contact_name.png') 5px center no-repeat; color: #fff; text-decoration: none; } #contact-info .name { background-image: url('img/interface/bg_contact_name.png')!important; } #contact-info .email { background-image: url('img/interface/bg_contact_email.png')!important; } #contact-info .phone { background-image: url('img/interface/bg_contact_phone.png')!important; } #events-calendar { margin-bottom: 30px; } #events-calendar img { border: none; } #events-calendar.list { border-top: 20px solid #056839; padding-top: 20px; } /* ===== Classed Elements ===== */ /* Container Classes */ .content { padding: 50px; width: 900px; position: relative; } .box { padding: 30px; background: url('img/interface/bg_box.jpg'); margin-bottom: 35px; position: relative; } .box .box-content, .box .showcase-content { padding: 30px; background: 150px 35px no-repeat #fff; position: relative; } .box .showcase-content { padding-left: 200px; background-image: url('img/interface/bg_box_content.png'); overflow: hidden; height: 120px; } /* === Change Request from Erika: turn the font into Georgia for Showcase Boxes for consistency. 2009.07.30 -Devon === */ /*.box .showcase-content p { font-family: "Helvetia Neue", Helvetica, Arial, "sans-serif"; font-size: 1em; } */ /* === End 2009.07.30 Change === */ .box img.showcase { position: absolute; z-index: 1; } .section { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 5px solid #ccc; } .column { width: 225px; position: relative; } .address { font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"; color: #fff; font-style: normal; line-height: 1.4em; } .address .name { font-weight: bold; font-size: 1.2em; line-height: 1.6em; } /* Component Classes */ .directory { list-style: none; margin: 0; padding: 0; } .directory li { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; } a.button { font-family: "Helvetica-Neue", Helvetica, Arial, "sans-serif"; text-transform: uppercase; font-size: 1.1em; display: inline-block; padding: 5px 5px; text-decoration: none; background: #056839; color: #fff; line-height: 1em; } a.button:hover { color: #ccc; } a.back-to-top { position: absolute; display: block; top: 30px; right: 30px; } .date { color: #056839; font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"; } /* Component Ammendments */ /* Utility Classes */ .block { display: block; } .left { float: left; } .right { float: right; } .clear { clear: both; } /* ===== Debugging Information ===== */ .outline, .outline * { outline: 1px dotted #ccc; } /*@import "lib/debug.css";*/