/* ================================================================================ screen.css ---------- Devon Mitton v 1.0 | 2009.06.29 ==================== Colors: BG: Border: ------- Light Blue: #c2d2d6 #beced1 #ecf2f3 Light Light Grey Green: #cbccb8 Light Grey Green: #d1d3c3 Grey Green: #c2c4ac #9c9e86 Dark Grey Green: #989980 #9c9e86 Light Green: #c6c982 Dark Green: #768956 ================================================================================ */ /* ===== Import Components ===== */ @import "lib/reset.css"; @import "lib/typography.css"; /*@import "lib/forms.css";*/ /* ===== HTML Base Styles ===== */ html, body { width: 100%; height: 100%; } html { background: #fff; background: url("img/interface/bg_body.jpg"); } body { min-width: 1000px; background: transparent;} form dl, form dt, form dd { margin: 0; padding: 0; } form dd { margin-bottom: 10px;} p { color: #55483a; } /* ===== Universal Content Layout Elements ===== */ #focus-wrapper, #focus, #band, #band-wrapper, #news-wrapper, #news, #footer { width: 100%; float: left; } .drawer { width: 100%; min-height: 0px; position: absolute; padding-bottom: 5px; z-index: 10; } .tab { position: absolute; right: 0; bottom: -54px; font-weight: bold; font-size: 20px; color: #fff; text-decoration: none; padding-top: 15px; height: 35px; text-align: center; } .front { z-index: 20; } #contact-drawer { background: url('img/interface/bg_contact_drawer.png') left bottom repeat-x; } #contact-drawer h1 { color: #fff; font-size: 52px; } #contact-drawer #contact-info { font-size: 16px; color: #55483a; } #contact-drawer #contact-info th { text-align: right; /*border-right: 1px solid #55483a;*/ /*border-right: 1px solid #868a28;*/ } #contact-drawer #contact-info th, #contact-drawer #contact-info td { padding: 5px 3px; border-bottom: 1px solid #868a28; letter-spacing:0px;} #contact-drawer #contact-info a { color: #55483a; } #contact-drawer #contact-info tr:hover th, #contact-drawer #contact-info tr:hover td { background-color: #b0b337; } #contact-drawer #contact-info td.last { text-align: right; } #contact-drawer-content { width: 100%; height: 175px; padding-top: 50px; padding-bottom: 50px; } #careers-drawer-content { width: 100%; height: 375px; padding-top: 50px; padding-bottom: 50px; } #contact-drawer-content.collapse { display: none; } #careers-drawer-content.collapse { display: none; } #careers-drawer { background: url('img/interface/bg_careers_drawer.png') left bottom repeat-x; } #careers-drawer ul, #careers-drawer h2, #careers-drawer h3, #careers-drawer h4, #careers-drawer p, #careers-drawer a { color: #fff; } #careers-drawer h2, #careers-drawer h3, #careers-drawer h4 { font-weight: bold; font-size: 18px; } #careers-drawer p, #careers-drawer li { font-size: 11px; line-height: 1.4em; } #careers-drawer li { margin-bottom: 2px; } #careers-drawer #careers-close-btn { color: #fff; position: absolute; top: -25px; right: 60px; } #job-list { float: left; } #job-list ul { padding: 0; list-style: none; margin: 0 0 20px 0; } #job-list li { font-size: 18px; padding-right: 22px; margin-right: 5px; background: right center no-repeat; line-height: 1em; margin-bottom: 0px; } #job-list li a { display: block; color: #fff; text-decoration: none; padding: 15px; border-top: 1px solid #463c2d; border-bottom: 1px solid #221b14; } #job-list li:hover, #job-list li:active, #job-list li.active { background-image: url("img/interface/bg_job_list_item.png"); } #job-list li.last a { border-bottom: 1px solid #463c2d; } #job-info { position: relative; float: left; width: 650px; } #job-info .job { position: absolute; display: none; } #job-info .job.default { display: block; } #contact-tab { background: url('img/interface/bg_contact_tab.png') center bottom no-repeat; right: 150px; width: 210px; } #careers-tab { background: url('img/interface/bg_careers_tab.png') center bottom no-repeat; width: 210px; } #blog-tab { background: url('img/interface/bg_blog_tab.png') center bottom no-repeat; width: 210px; right: 300px; } #focus-wrapper { background: url('img/interface/bg_focus_wrap.png') left top repeat-x #fff; } #focus { height: 475px; background: url('img/interface/bg_focus.jpg') center top no-repeat; } #focus #logo { position: absolute; top: 35px; z-index: 1; } #focus #logo a { display: block; width: 235px; height: 35px; background: url('img/interface/bg_logo.png') left top no-repeat; text-indent: -9999px; overflow: hidden; } #showcase { height: 475px; top: 0px; overflow-y: hidden; } #showcase p.first { font-size: 1.2em; } #showcase p { font-size: 1em; } .showcase-content { height: 350px; width: 720px; padding: 125px 115px 0; position: relative; } .showcase-content h1 { font-weight: bold; font-size: 60px; text-align: center; margin-bottom: 0; color: #3d3324; letter-spacing:-2px;} .showcase-content h2 { font-weight: bold; font-size: 18px; text-align: center; color: #3d3324; } .image-box { width: 280px; height: 240px; padding: 20px; background: url('img/interface/bg_showcase_imagebox.png') left top no-repeat; position: absolute; top: 125px; left: 115px; } .showcase-info { height: 240px; width: 365px; padding: 20px 0px 0 335px; position: relative; } .showcase-info img, .showcase-info p { margin-bottom: 10px; color: #55483a; } .showcase-info img { margin-bottom: 20px; } .showcase-info a.button { position: absolute; left: 85px; bottom: -15px; } /* SHOWCASES */ #showcase0 h1 { margin-top: 50px; } #idea-logo { margin-top: -80px; margin-left: -45px; } #icuc-logo { margin-top: -50px; margin-left: -20px; } #csica-logo { margin-top: -50px; margin-bottom: 35px; } .first-showcase { top: 0px; } #band-wrapper { height: 257px; margin-bottom: -10px; background: url("img/interface/bg_band_wrapper.png") left bottom repeat-x; } #band { height: 200px; background: url('img/interface/bg_band.jpg') left top repeat-x; padding: 27px 0 20px; } #band h2 { font-weight: bold; color: #fff; font-size: 22px; } #band p { color: #fff; font-size: 13px; line-height: 22px; } #band .content { padding-right: 500px; width: 450px; } #contact-form-wrapper { width: 380px; position: absolute; right: 25px; top: -50px; background: left top no-repeat; padding: 105px 30px 0px; z-index: 5; } #contact-form-wrapper h2 { position: absolute; left: 30px; top: 50px; color: #55483a; line-height: 1em; } #contact-form-wrapper p { color: #55483a; font-size: 1.2em; } #contact-form-wrapper p.intro { position: absolute; right: 30px; top: 52px; } #contact-form-wrapper .text-input { width: 365px; } #contact-form-wrapper .buttons { width: 380px; height: 41px; padding: 0px 30px 20px; margin: 0 -30px; background: left bottom no-repeat; position: absolute; bottom: -61px; z-index: 1000; } #contact-form-wrapper .text-area { width: 370px; max-width: 375px; height: 200px; max-height: 395px; resize: none; } #contact-submit { background: url('img/interface/bg_contact_submit.png') left top no-repeat ; border: 0px; width: 112px; height: 41px; overflow: hidden; text-indent: -9999px; cursor: pointer; z-index: 10; } #contact-form-wrapper, #contact-form-wrapper .buttons { background-image: url('img/interface/bg_contact_form.png'); } #news-wrapper { } #news { background: url("img/interface/bg_news.jpg") left top repeat-x; } #news .content { background: url("img/interface/bg_news_content.png") center top no-repeat; padding: 0; } #news-headline { height: 120px; background: url("img/interface/bg_news_headline.png") left center no-repeat; padding-left: 150px; padding-top: 50px; width: 778px; } #news-headline h3 { font-weight: bold; font-size: 18px; line-height: 1.2em; margin: 0; } #news-headline span { margin: 0px; color: #3d3324; } #news h4 { font-weight: bold; margin-bottom: 0; color: #3d3324; } #news p.date { font-weight: bold; margin-bottom: 10px; } #news p { font-size: 1em; font-weight: normal; color: #3d3324; } #news p.first { font-size: 120%; } #news a { color: #222; } #news-slider-window { float: left; width: 100%; overflow: hidden; position: relative; } #news-slider { position: absolute; } #news-slider-controls { float: left; width: 100%; position: relative; height: 25px; } #news-next-button { left: 0; } #news-previous-button { right: 0; } .news-button { cursor: pointer; display: block; position: absolute; } #footer { height: 90px; } #footer .content { border-top: 1px solid #66652b; width: 625px; padding: 25px 25px 25px 275px; } #footer-logo { position: absolute; background: url('img/interface/bg_footer_logo.png') left top no-repeat; width: 255px; height: 55px; overflow: hidden; text-indent: -9999px; left: 0px; top: 15px; } #footer p { color: #55483a; } /* ===== Classed Elements ===== */ /* Container Classes */ .content { width: 950px; margin: 0 auto; position: relative; padding: 0 25px; } .buttons { text-align: right; } a.button { width: 151px; height: 30px; font-size: 18px; font-weight: bold; padding-top: 12px; display: inline-block; color: #fff; text-decoration: none; background: url("img/interface/bg_button.png") left top no-repeat; text-align: center; } /* Component Classes */ .column { float: left; padding: 20px; margin: 0; } .full { width: 908px; } .half { width: 433px; } .third { width: 273px; } .text-input, .text-area { font-size: 24px; font-family: "Hoeffler Text", Georgia, "Times New Roman", Times, serif; color: #55483a; border: 1px solid #e3e3e3; background: url('img/interface/bg_input.png') left top no-repeat; } .text-input { padding: 2px 5px; } .text-area { padding: 0 0 0 5px; } .block { display: block; } .indent { text-indent: 1em; } .clear { clear: both; } .fine-print { font-size: 10px; margin-bottom: 5px; } /* Component Ammendments */ /* Utility Classes */ .error, .notice, .success { padding: 10px 10px 10px 35px; margin-bottom: 1em; border: 2px solid #ddd; } .error { background: url("img/icons/error.png") 10px no-repeat #FBE3E4; color: #8a1f11!important; border-color: #FBC2C4; } .notice { background: url("img/icons/notice.png") 10px no-repeat #FFF6BF; color: #514721!important; border-color: #FFD324; } .success { background: url("img/icons/success.png") 10px no-repeat #E6EFC2; color: #264409!important; border-color: #C6D880; } .error a { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; } .field { padding: 0!important; background-image: none!important; } * .cufon, * .cufon-canvas { vertical-align: baseline!important; } /* ===== Debugging Information ===== */ .outline, .outline * { outline: 1px dotted #ccc; } /*@import "lib/debug.css";*/