/* ================================================================================ screen.css ---------- Devon Mitton v 1.0 | 2009.06.29 ==================== Colors: BG: Border: ------- ================================================================================ */ /* ===== Import Components ===== */ @import "lib/reset.css"; @import "lib/typography.css"; /*@import "lib/forms.css";*/ /* ===== HTML Base Styles ===== */ html { background: #9dc1d0; } body { background: url("img/interface/bg_body.png") #c8dce9 left bottom repeat-x; min-width: 1000px; } form table { border-top: 2px solid #fff; } form td { border-bottom: 1px solid #fff; padding: 5px; } form tr:hover td { background: #f5f5f5; } form td.label { width: 120px; vertical-align: top; } textarea { resize: none; } /* ===== Universal Content Layout Elements ===== */ #utilities, #header, #main, #focus, #footer, #sociallinks { width: 100%; min-width: 1000px; } #utilities { background: #787a7c; height: 32px; position: relative: z-index: 3; } #utilities-navigation { float: right; padding-right: 10px; border-right: 1px dotted #9d9e9f; position: relative; top: 10px; } #utilities-navigation a { color: #e7e7e7; text-decoration: none; font-size: 10px; margin: 0 7px; position: relative; top: -2px; } #utilities-navigation.fr a { color: #e7e7e7; text-decoration: none; font-size: 10px; margin: 0 2px; position: relative; top: -2px; } #utilities-navigation a:hover { color: #fff; border-bottom: 1px dotted #fff; } #utilities-search { padding: 5px 10px 0 20px; float: right; } #search { padding: 1px 0; width: 100px; font-weight: normal; font-size: 10px; color: #787a7c; } #search-submit { border: none; background: none; color: #e7e7e7; font-size: 10px; font-family: Tahoma, Verdana, Arial, sans-serif; padding: 0px; margin: 0 2px 0 10px; } #search-submit:hover { color: #fff; border-bottom: 1px dotted #fff; } #utilities-language { float: right; } #language_btn { display: block; padding-top: 10px; height: 22px; width: 95px; text-align: center; font-size: 10px; color: #fff; text-decoration: none; background: url("img/interface/bg_language_btn.png") left top repeat-x; } #language_btn:hover { color: #787a7c; background: #fff; } #header { height: 72px; background: url("img/interface/bg_header.png") left top repeat-x; position: relative; z-index: 2; } #logo { float: left; } #logo a { display: block; float: left; } #primary-navigation { height: 39px; margin-top: 17px; position: absolute; right: 12px; } #primary-navigation a { float: left; height: 39px; background: url("img/interface/bg_primary_navigation.png") no-repeat; display: block; overflow: hidden; text-indent: -9999px; } #primary-navigation a#aboutLink { width: 122px; background-position: 0px 0px; } #primary-navigation a#supportLink { width: 235px; background-position: -122px 0px; } #primary-navigation a#campaignLink { width: 162px; background-position: -357px 0px; } #primary-navigation a#aboutLink:hover { width: 122px; background-position: 0px -39px; } #primary-navigation a#supportLink:hover { width: 235px; background-position: -122px -39px; } #primary-navigation a#campaignLink:hover { width: 162px; background-position: -357px -39px; } #primary-navigation a#aboutLink:active, #primary-navigation a#aboutLink.active { width: 122px; background-position: 0px -78px; } #primary-navigation a#supportLink:active, #primary-navigation a#supportLink.active { width: 235px; background-position: -122px -78px; } #primary-navigation a#campaignLink:active, #primary-navigation a#campaignLink.active { width: 162px; background-position: -357px -78px; } #primary-navigation-fr { height: 39px; margin-top: 17px; position: absolute; right: 12px; } #primary-navigation-fr a { float: left; height: 39px; background: url("img/interface/bg_primary_navigation_fr.png") no-repeat; display: block; overflow: hidden; text-indent: -9999px; } #primary-navigation-fr a#aboutLink { width: 120px; background-position: 0px 0px; } #primary-navigation-fr a#supportLink { width: 205px; background-position: -120px 0px; } #primary-navigation-fr a#campaignLink { width: 194px; background-position: -325px 0px; } #primary-navigation-fr a#aboutLink:hover { width: 120px; background-position: 0px -39px; } #primary-navigation-fr a#supportLink:hover { width: 205px; background-position: -120px -39px; } #primary-navigation-fr a#campaignLink:hover { width: 194px; background-position: -325px -39px; } #primary-navigation-fr a#aboutLink:active, #primary-navigation-fr a#aboutLink.active { width: 120px; background-position: 0px -78px; } #primary-navigation-fr a#supportLink:active, #primary-navigation-fr a#supportLink.active { width: 205px; background-position: -120px -78px; } #primary-navigation-fr a#campaignLink:active, #primary-navigation-fr a#campaignLink.active { width: 194px; background-position: -325px -78px; } #focus { } #focus-content { padding-top: 25px; height: 265px; background: url("img/interface/bg_main.png") center bottom no-repeat; } #focus-content .content { padding-left: 450px; padding-top: 60px; width: 520px; } #focus-content p { color: #2d2f31; margin-bottom: 10px; line-height: 1; } #focus-content a { color: #e09412; text-decoration: none; } #focus-1 { font-size: 18px; } #focus-2 { font-size: 24px; } #focus-3 { font-size: 36px; font-weight: bold; } #focus-flash { width: 400px; height: 350px; position: absolute; left: 30px; top: 0; } #focus-flash h1 { color: #2d2f31; margin-top: 75px; } #donate-now { background: #fff; height: 120px; } #donate-now .content { padding-left: 450px; padding-top: 35px; width: 520px; } #donate-now p { margin-bottom: 10px; color: #2d2f31; text-transform: uppercase; } #donate-now.fr p { margin-bottom: 10px; margin-left:-35px; color: #2d2f31; text-transform: uppercase; } #donate-now-button { display: block; position: absolute; right: 30px; top: 30px; width: 151px; height: 39px; padding-top: 12px; background: url("img/interface/bg_donate_now_button.png") left top no-repeat; color: #fff; text-transform: uppercase; font-size: 24px; font-family: Impact, Arial, sans-serif; text-decoration: none; text-align: center; font-weight: normal; } #donate-now-button.fr { display: block; position: absolute; right: -40px; top: 30px; width: 148px; height: 48px;padding-left: 3px; padding-top: 3px; background: url("img/interface/bg_donate_now_button_fr.png") left top no-repeat; color: #fff; text-transform: uppercase; font-size: 24px; font-family: Impact, Arial, sans-serif; text-decoration: none; text-align: center; font-weight: normal; } #crosslinks { height: 150px; background: url("img/interface/bg_crosslinks.png") left top repeat-x #e09412; } #crosslink-video, #crosslink-newsletter, #crosslink-official-site { float: left; text-align: center; position: relative; height: 150px; } #crosslink-video { width: 320px; background: url("img/interface/bg_crosslinks_video.png") left top no-repeat; } #crosslink-video p { background: url("img/icons/video.png") 100px 2px no-repeat; line-height: 1.8; text-align:right; padding-right:100px;} #crosslink-video p.fr { background: url("img/icons/video.png") 100px 2px no-repeat; line-height: 1.8;text-align:right; padding-right:80px; } #crosslink-newsletter { width: 310px; } #crosslink-newsletter p { background: url("img/icons/email.png") 50px center no-repeat; padding: 2px 0 2px 40px; } #crosslink-official-site { width: 310px; } #crosslinks p { text-transform: uppercase; color: #fff; font-weight: bold; margin-top: 20px; } #crosslinks #email { font-size: 14px; color: #bcbcbd; padding: 10px 20px; width: 160px; font-family: Georgia, Times, "Times New Roman", serif; } #crosslinks .crosslink-button { width: 105px; height: 45px; text-indent: -9999px; overflow: hidden; display: block; border: none; background: url("img/interface/bg_watch_now_button.png") left top no-repeat; position: absolute; left: 50%; margin-left: -52px; bottom: -20px; cursor:pointer; } #crosslinks .crosslink-button-fr { width: 175px; height: 45px; text-indent: -9999px; overflow: hidden; display: block; border: none; background: url("img/interface/bg_watch_now_button_fr.png") left top no-repeat; position: absolute; left: 40%; margin-left: -52px; bottom: -20px; cursor:pointer; } #crosslinks #watch-now-button { background-image: url("img/interface/bg_watch_now_button.png"); } #crosslinks #sign-up-button { background-image: url("img/interface/bg_sign_up_button.png"); } #crosslinks #visit-now-button { background-image: url("img/interface/bg_visit_now_button.png"); } #crosslinks-fr #watch-now-button-fr { background-image: url("img/interface/bg_watch_now_button_fr.png"); } #crosslinks-fr #sign-up-button-fr { background-image: url("img/interface/bg_sign_up_button_fr.png"); } #crosslinks-fr #visit-now-button-fr { background-image: url("img/interface/bg_visit_now_button_fr.png"); } #main { padding: 25px 0 0; background: url("img/interface/bg_main.png") center bottom no-repeat; } #primary-content { width: 606px; background: url("img/interface/bg_primary_content.png") left top repeat-y #fff; min-height: 500px; padding: 35px; margin-top: 5px; float: left; } #primary-content h1 { font-family: Impact, Arial, sans-serif; font-weight: normal; width: 606px; background: url("img/interface/bg_primary_title_bar.png") left top no-repeat; height: 39px; padding: 15px 35px 0; margin: -40px -35px 30px; } #secondary-content { width: 221px; float: right; } /* #secondary-content h2 { font-family: Impact, Arial, sans-serif; font-weight: normal; width: 161px; margin: -30px -30px 30px; height: 39px; background: url("img/interface/bg_secondary_title_bar.png") left top no-repeat; color: #fff; text-transform: uppercase; font-size: 24px; }*/ /* #secondary-content .alternate h2 { background-image: url("img/interface/bg_secondary_title_bar_alternate.png"); margin-bottom: 10px; }*/ #take-action-box { position: relative; z-index: 1; } #take-action-box #shine-star { position: absolute; top: -50px; right: -50px; z-index: 1; } #action-module { list-style: none; margin: 0 -30px; padding: 0; position: relative; } #action-module li { height: 30px; background: url("img/interface/bg_action_module_item.png") left top repeat-x #d9d9d9; border: 1px solid #fff; border-top: none; } #action-module li:hover { background-image: none; } #action-module li a { height: 26px; display: block; text-transform: uppercase; text-decoration: none; padding: 8px 30px 0; } #action-module li a.fr {font-size:10px;padding-top:2px;} #donations { position: relative; } #donations-breadcrumb { border-bottom: 5px solid #e09412; margin-bottom: 10px; padding-bottom: 10px; color: #bbb; } #donations-breadcrumb .crumb { margin: 0 5px; color: #aaa; } #donations-breadcrumb .current { color: #e09412; font-weight: bold; } #donations-breadcrumb a.crumb { color: #5a5a5a; font-weight: normal; } #donation-buttons { position: absolute; top: 0; right: 0; } #footer { height: 100px; padding-top: 40px; background: url("img/interface/bg_footer.jpg") center top no-repeat #58585A; border-top: 60px solid #2d3032; } #footer .content { padding: 0; width: 1000px; height:; } #footer a { color: #e7e7e7; text-decoration: none; font-size: 10px; margin: 0 7px; font-weight: bold; } #footer a:hover { color: #fff; border-bottom: 1px dotted #fff; } #footer-navigation { margin-bottom: 12px; } #footer-navigation span { color: #999999; font-size: 10px; font-weight: bold; padding-right: 14px; padding-bottom: 2px; margin: 0 7px; border-right: 1px dotted #9d9e9f; } #footer-legal span { color: #999999; font-size: 10px; margin: 0px 7px; } #sociallinks .content { padding: 0; width: 1000px; height:;position:relative;top:45px; left:0px; } #sociallinks .links { float:left; padding-left:4px;padding-right:4px;padding-top:2px; } #main-schedule { padding: 25px 0 0; } .content-schedule { margin: 0 auto; padding: 0 30px; width: 600px; position: relative; } .schedule { min-width: 600px; } #focus-schedule { min-width: 600px; } /* ===== Classed Elements ===== */ /* Container Classes */ .content { margin: 0 auto; padding: 0 30px; width: 940px; position: relative; } .block { width: 221px; background: url("img/interface/bg_secondary_block.png") left bottom no-repeat; padding-bottom: 5px; margin-bottom: 30px; } .module { background: #fff; padding: 30px 30px 25px; width: 161px; margin-top: 5px; } .module h2 { font-family: Impact, Arial, sans-serif; font-weight: normal; width: 161px; padding: 15px 30px 0; margin: -35px -30px 30px; height: 39px; background: url("img/interface/bg_secondary_title_bar.png") left top no-repeat; color: #fff; text-transform: uppercase; font-size: 24px; } .alt-module { padding: 30px 30px 25px; width: 161px; margin-top: 5px; padding-bottom: 0px;} .alt-module h2 { text-align:center; font-family: Impact, Arial, sans-serif; font-weight: normal; width: 161px; padding: 15px 30px 0; margin: -35px -30px 30px; height: 39px; background: url("img/interface/bg_secondary_title_bar.png") left top no-repeat; color: #fff; text-transform: uppercase; font-size: 24px; } .alternate { padding-bottom: 0px; } .alternate h2 { background-image: url("img/interface/bg_donate_now_button_large.png") ; margin-bottom: 10px; } .alternate_fr h2 { background-image: url("img/interface/bg_donate_now_button_large_fr.png") ; margin-bottom: 10px; height:80px;} .alternate h2.smaller { background-image: url("img/interface/bg_secondary_title_bar_alternate.png"); margin-bottom: 10px;padding-top: 5px; height: 49px;} .section { border-bottom: 1px solid #e1e1e1; margin-bottom: 15px; } .section p.date { color: #fbb03f; } #primary-content .section h3 { color: #58585A; font-size: 1.2em; font-weight: bold; text-transform: none; margin-bottom: 0; } #secondary-content .section { border-bottom: 1px dotted #cdcdcd; } #secondary-content .section h3 { font-family: Impact, Arial, sans-serif; font-weight: normal; } #secondary-content .section p { font-size: 0.9em; margin-bottom: 15px; } .image-block { padding-left: 207px; } .image-block img { width: 175px !important; } .image-box { width: 175px; padding: 10px; border: 1px solid #ccc; /*overflow-x: hidden; overflow-y: hidden;*/ margin-left: -207px; float: left; margin-bottom: 10px; } .more { border-top: 1px dotted #58585A; padding-top: 10px; } .more h3 { text-transform: none !important; color: #58585A !important; margin-bottom: 0 !important; } .more a { color: #fbb03f; text-transform: uppercase; text-decoration: none; } /* Component Classes */ .large-button { width: 546px; height: 23px; padding: 9px 30px 0; font-size: 14px; margin-bottom: 15px; display: block; background: url("img/interface/bg_large_button.png") left top no-repeat; color: #fff; text-transform: uppercase; text-decoration: none; } /* Component Ammendments */ /* Utility Classes */ .clear { clear: both; } .messages { padding: .8em; margin-bottom: 2em; border: 2px solid #ddd; } .message-title { padding: .8em; padding-left: 35px; margin: -0.8em -0.8em 0.8em; font-weight: bold; background: #ddd 10px center no-repeat; } .error, .notice, .success { } .error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; } .notice { background: #FFF6BF; color: #514721; border-color: #FFD324; } .success { background: #E6EFC2; color: #264409; border-color: #C6D880; } .error a, .cancel { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; } .error .message-title { background-color: #FBC2C4; background-image: url("img/icons/error.png"); color: #8a1f11; } .notice .message-title { background-color: #FFD324; background-image: url("img/icons/notice.png"); color: #514721; } .success .message-title { background-color: #C6D880; background-image: url("img/icons/success.png"); color: #264409; } .form-block { background: #EDEDED; border-bottom: 1px solid #ccc; margin-bottom: 2em; padding: 15px; } .buttons { border-top: 5px solid #e09412; padding-top: 1em; } .description { font-size: 0.9em; font-style: italic; } .edit { color: #e09412; } .input-text { width:150px; } /* ===== Debugging Information ===== */ .outline, .outline * { outline: 1px dotted #ccc; } /*@import "lib/debug.css";*/