/* ================================================================================ 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 { background: #a5a792; width: 100%; } body { min-width: 1050px; width: 100%; } h2 { color: #768956; text-transform: uppercase; font-weight: bold; } h3 { color: #c6c982; text-transform: uppercase; font-weight: bold; } h4 { color: #768956; text-transform: uppercase; font-weight: bold; } p { color: #858175; } ul li a { color: #858175; line-height:30px;} address { font-style: normal; line-height: 1.4em; font-size: 1.2em; color: #666153;} address span { display: block; } address span span { display: inline; } a { color: #c13828; } img { margin-bottom: none; } /* ===== Universal Content Layout Elements ===== */ #home #primary-content h3 a { color:#d82d1f;font-size:18px;} #main #primary-content h3 a { color:#d82d1f;font-size:18px;} #header, #headline-bar, #infobar-wrap, #focal-area, #main, #footer { float: left; } #bg_header { height:181px; width:100%; background: url('img/header/bg_header.png') no-repeat scroll center top; } #bg_header h1 { height:100px; width:200px; position:absolute; z-index:10; left:24%; top:4%;} #header { width: 100%; height: 181px; background: url('img/header/bg_header_thin.png'); } #header .content { height: 100px; } #header h1#logo { background: url('img/interface/bg_logo.png') top left no-repeat; position: absolute; left: 0; top: 35px; } #header h1#logo a { text-indent: -9999px; overflow: hidden; display: block; width: 425px; height: 45px; } #utilities-navigation { margin: 0; padding: 0; float: right; list-style: none; position: absolute; right: -25px; top: 20px; } #utilities-navigation li { float: left; border-left: 1px solid #ecf2f3; border-right: 1px solid #beced1; font-size: .9em; } #utilities-navigation li.first { border-left: none; } #utilities-navigation li.last { border-right: none; } #utilities-navigation li a { font-size:10px; display: block; padding: 3px 7px 5px; color: #85875f; text-decoration:none; } #utilities-navigation li a:hover { font-size:10px; display: block; padding: 3px 7px 5px; color: #85875f; text-decoration:underline; } #navigation { position: relative; top: 107px; left: 295px; width: 685px; height: 53px; overflow: hidden; } #primary-navigation { list-style: none; margin: 0; margin-top: 10px; height: 43px; padding: 0; position: absolute; width: 685px; } #primary-navigation li { float: left; } #primary-navigation li a { display: block; float: left; width: 685px; height: 43px; text-align: center; overflow: hidden; text-indent: -9999px; background: url('img/header/bg_primary_navigation.png') top left no-repeat; } li#homeLink a { background-position: 0px 0px;width: 59px; } li#productsLink a { background-position: -59px 0px;width: 110px; } li#servicesLink a { background-position: -169px 0px;width: 97px; } li#contractorsLink a { background-position: -266px 0px;width: 154px; } li#ourpartners a { background-position: -420px 0px;width: 109px; } li#aboutLink a { background-position: -529px 0px;width: 83px; } li#careersLink a { background-position: -612px 0px;width: 73px; } li#homeLink a:hover { background-position: 0px -43px; } li#productsLink a:hover { background-position: -59px -43px; } li#servicesLink a:hover { background-position: -169px -43px; } li#contractorsLink a:hover { background-position: -266px -43px; } li#ourpartners a:hover { background-position: -420px -43px; } li#aboutLink a:hover { background-position: -529px -43px; } li#careersLink a:hover { background-position: -612px -43px; } li#homeLink a:active { background-position: 0px -43px; } li#productsLink a:active { background-position: -59px -43px; } li#servicesLink a:active { background-position: -169px -43px; } li#contractorsLink a:active { background-position: -266px -43px; } li#ourpartners a:active { background-position: -420px -43px; } li#aboutLink a:active { background-position: -529px -43px; } li#careersLink a:active { background-position: -612px -43px; } #primary-content ul { font-size:12px; color:#858175; } #primary-content li { padding:0 0 .5em 0; } #primary-content div img { margin-left: -20px; } /* by Alpesh */ #primary-content p { font-size:12px; } #primary-content a { color:#858175; } #learn-more { background: url('/_css/img/header/bg_Order.jpg') no-repeat; width:190px; height:148px; padding:22px 36px 22px 22px; } #learn-more h2 { color:#ffffff; font-size:20px; } #learn-more p { color:#ffffff; font-size:14px; } #learn-more a { color:#ffffff; font-size:14px; } #search { margin: 0; padding: 0; float: right; position: absolute; right: -25px; top: 50px; background: url('img/header/bg_search.png') top left no-repeat; width: 165px; height: 34px;} /*#search { width: 165px; height: 34px; background: url('img/header/bg_search.png') top left no-repeat; position: relative; top: 50px; right: 0px; float:right; }*/ #search-input { border: none; background: transparent; width: 120px; padding: 5px 2px; color: #747474; position: absolute; top: 6px; left: 5px; } #search-submit { border: none; background: transparent; width: 24px; height: 24px; overflow: hidden; position: absolute; top: 6px; right: 6px; opacity: 0; cursor: pointer; } #main { width: 100%; background-color: #fff; position: relative; } #main #content-wrap { padding-top: 50px; } #main #content-wrap table td img { margin-left: -7px; } #main #content-wrap table td h3 { margin-left: -5px; } #primary-content h3 a { color:#b9bc7d; font-size:18px; } #main #primary-content { width: 630px; float: left; padding: 20px 0; min-height: 500px; height: auto!important; height: 600px; } #main #secondary-content { position: relative; float: right; top: 0; right: 0; width: 291px; padding: 20px 0; } #main #secondary-content #login-box { width: 134px; height: 65px; background: url('img/interface/bg_login_box.png') top left no-repeat; position: relative; padding: 60px 0 0 130px; margin: 10px auto 0; } #main #secondary-content #login-box h2 { position: absolute; color: #fff; top: 20px; left: 20px; font-size: 25px; width: 220px; } #main #secondary-content #login-box a { display: block; color: #fff; margin-bottom: 2px; text-decoration: none; font-size: .85em; } #main #secondary-content #login-box a#signIn-button { position: absolute; top: 60px; left: 20px; } #home #main #secondary-content { margin-top: -165px; } #home #main { padding-top: 120px; } #footer { width: 100%; min-height: 120px; height: auto!important; height: 120px; border-top: 10px solid #4e4f45; border-bottom: 1px solid #959681; background: #81826d; margin-bottom: 20px; } #footer #footer-logo { position: absolute; top: 15px; } #footer #footer-logo a { display: block; width: 166px; height: 77px; text-indent: -9999px; overflow: hidden; background: url('img/interface/bg_logo_footer.png') top left no-repeat; } #footer #contact-info { position: absolute; top: 15px; left: 200px; } #footer #contact-info address { margin: 0; } #footer #contact-info span { display: block; color: #cdcdc5; font-size: 11px; font-family: "Trebuchet MS", Tahoma, Helvetica, Arial, "sans-serif"; line-height: 1.3em; } #footer #contact-info span span, #footer #contact-info span a { display: inline; font-size: 11px; color: #fff; } #footer #contact-info span.name { margin-bottom: 3px; } #footer #footer-navigation { list-style: none; margin: 0; position: absolute; right: 0; width: 325px; top: 15px; padding: 20px 0px; } #footer #footer-navigation li { display: inline; margin-right: 10px; font-family: "Trebuchet MS", Tahoma, Helvetica, Arial, "sans-serif"; font-size: 12px; } #footer #footer-navigation li a { color: #fff; font-size: 12px; } #footer #footer-legal { position: absolute; width: 325px; font-size: 8px; color: #cdcdc5; right: 0; top: 60px; } /* ===== Additional ID Elements ===== */ #focal-area { width: 100%; height: 335px; overflow: hidden; background: url('img/header/fishtile.jpg') top left repeat-x; min-width:960px;position:relative} #focal-area-wrap { width: 100%; height: 299px; position:absolute;left:50%; margin-left:-480px} #focal-area-wrap .content { width: 415px; float:left; } #focal_area_message { width: 545px; height:165px; float:left; padding-top:67px; padding-left:23px;} #focal-area #grain { width: 100%; height:38px; background: url('img/interface/bg_main.jpg') top left repeat-x #fff; } /*#focal-area { width: 100%; height: 335px; overflow: hidden; background: url('img/header/bg_focal_area.png') top left repeat-x; min-width:960px;position:relative} #focal-area-wrap { width: 100%; height: 299px; background: url('img/header/bg_focal_area_fish.png') top center no-repeat;position:absolute;left:50%; margin-left:-480px} #focal-area-wrap .content { width: 415px; float:left; } #focal_area_message { width: 545px; height:165px; float:left; padding-top:67px; padding-left:23px;} #focal-area #grain { width: 100%; height:38px; background: url('img/interface/bg_main.jpg') top left repeat-x #fff; }*/ #infobar-wrap { background: url('img/interface/bg_infobar_left.png') top left repeat-x; position: relative; top: -1px; height: 164px; position: absolute; left: 0; width: 100%; } /*#infobar-wrap { background: url('img/interface/bg_infobar_left.png') top left repeat-x; position: relative; top: -1px; height: 164px; position: absolute; left: 0; width: 100%; z-index:4;}*/ #infobar { height: 164px; background: url('img/interface/bg_infobar_right.png') top left repeat-x; width: 50%; position: absolute; right: 0; } #infobar .content { position: absolute; left: -500px; height: 135px; padding-top: 29px; background: url('img/interface/bg_infobar.png') top left no-repeat; } #red-box { width:400px; float:left; padding-left:30px; } #red-box h3 { color:#ffffff; text-transform:none; line-height:22px } #contact-box { float:left; width: 175px; height: 90px; padding: 20px; background: url('img/interface/bg_infobar_contactbox.png') top left no-repeat; color: #fff; } #contact-box h2 { font-weight: bold; text-transform: uppercase; font-size: 25px; color: #fff; margin-bottom: 10px; } #contact-box h2 a { color: #fff; font-size: 25px; text-decoration:none; } #contact-box h2 a:visited { color: #fff; font-size: 25px; text-decoration:none; } #contact-box h2 a:hover { color: #fff; font-size: 25px; text-decoration:underline; } #contact-box p { font-size: 14px; line-height: 1em; color: #fff; } #contact-box p dfn { text-transform: uppercase; font-weight: normal; font-style: normal; } #contractors-box .box-top { padding-right: 150px; width: 111px; } #contractors-box #contractor { width: 187px; height: 241px; position: absolute; bottom: -4px; right: -36px; } #headline-bar { height: 140px; width: 100%; background: url('img/header/bg_headline_bar.png') top left repeat-x #c13828; } #headline-bar h3 { margin-top: -20px; margin-left: 22px; font-weight:bold; font-size:22px; color:#FFF;} #headline-bar .content { position:relative; left:50%; margin-left:-500px; width: 960px; height:140px;background: url('img/header/bg_headline_bar_content.png'); } #headline-bar .contentblank { position:absolute; left:50%; margin-left:-500px; width: 960px; height:140px;background: url('img/header/bg_headline_bar_content_blank.png'); text-align:left; } #headline-bar h1 { font-size:48px; padding-top:30px; padding-left:22px; color: #fff; font-weight: bold; text-transform: uppercase; } #headline-bar #grain {width: 100%;height:38px; background: url('/_css/img/interface/bg_main.jpg') top left repeat-x #fff; position:absolute;top:321px;left:0px;z-index:1;} #item-details .item-image { border: 1px solid #9c9d85; margin-bottom: 20px; } /* ===== Classed Elements ===== */ /* Container Classes */ .content { margin: 0 auto; width: 960px; position: relative; } .box { width: 291px; margin-bottom: 5px; } .box-top { width: 231px; background: url('img/interface/bg_aside_box.png') top left no-repeat; padding: 30px; padding-bottom: 10px; min-height: 120px; position: relative; z-index:4; } .box-bottom { width: 291px; background: url('img/interface/bg_aside_box.png') bottom left no-repeat; height: 20px; } .box h2 { font-size: 25px; color: #fff; font-weight: bold; text-shadow: #000 0px 1px 1px; text-transform: uppercase; } .box p { color: #fff; font-size: 11px; } .box .links { list-style: none; font-size: 1.05em; margin: 0px 0px 20px 0px; padding: 0; border-top: 1px solid #949850; border-bottom: 1px solid #c8cb97; } .box .links li a { font-size: 1.05em; display: block; padding: 5px 0px 5px 25px; color: #fff; border-bottom: 1px solid #949850; border-top: 1px solid #c8cb97; text-decoration: none; background: url('img/icons/bullet_links.png') 5px center no-repeat; } .box .links li a:hover, .box .links li a:active, .box .links li a.active { color: #666153; } #locations { background: url('img/interface/bg_locations_table.png') center no-repeat; } #locations td { padding: 20px 20px; width: 180px; } .article, .section { border-bottom: 1px dashed #b7b7a6; padding-bottom: 20px; margin-bottom: 20px;} .item h4 { margin-left: -17px; text-align:left;} .item .description { margin: 15px 3px 5px -20px; font-size: 1.1em; color: #666153; display: block; line-height: 1.2em; } .item .info { margin-bottom: 15px; margin-left:-20px; } .item .info span { font-size: 1em; color: #666153; display: block; line-height: 1.2em; margin-bottom: 10px; } /* Component Classes */ .column { float: left; padding: 15px;} .column-inline { display: inline-block; padding: 10px; } .full { width: 598px; } .half { width: 278px; } .third { width: 170px; } .quarter { width: 138px; } .smalldesc { margin-left: -20px; width:170px;} .separate { background: url('img/interface/bg_separator.png') 87% 13% no-repeat ; } .details { color: #858175; } .details dl { font-size: 1.2em; } .details div { margin-bottom: 10px; } .details dt { display: inline; font-size: 1.2em; } .details dd { display: inline; font-size: 1.2em; margin: 0; } /* Component Ammendments */ /* Utility Classes */ .center { text-align: center; } .left { float: left; } .right { float: right; } .block { display: block; } .label { font-size: 9pt; font-weight: bold; margin: 5px; color: #444; } .mute { color: #888; } .first { font-size: 1.2em !important; } /* ===== Debugging Information ===== */ .outline, .outline * { outline: 1px dotted #ccc; } /* -- search page styles -- */ .aY a{font-weight: bold; color:#858175; line-height:1.4em;} .aY span{font-size:12px; color:#858175; line-height:1.4em;} .aX{padding-left:15px; padding-top:0px; margin-top:3px; font-size:12px; color:#858175; line-height:1.4em;} /*@import "lib/debug.css";*/