/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : Author : John Davies / john.davies@gforces.co.uk / G-Forces Web Management Ltd Type: Screen, Projection Description : Screen and projection stylesheet for Batt Cables site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* COMMON AND GLOBAL */ body { font:62.5%/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif; margin:0; padding:0; background:#ffffff; color:#333333; text-align:center; } /* This font sizing is for standards based browsers (firefox, opera, mozilla) that can re-size text. Declaring the font size in pixels makes it more consistent across browsers. */ td, textarea, input, select { font:100% "Trebuchet MS", Arial, Helvetica, sans-serif; } html>body td, html>body textarea, html>body input, html>body select { font-size:11px; } /* some browsers don't inherit the font into tables or textareas! */ /* ----- IDS ----- */ #container { width:892px; margin:0 auto; text-align:left; font-size:110%; } #printHeader { display:none; } #header { background:url(../images/layup/headerBg.gif) top left no-repeat; height: 103px; width: 892px; position: relative; } #header #logo { position: absolute; top: 19px; left: 23px; } #header #flags { position: absolute; top: 23px; right: 20px; width: 260px; } #header #flags .icon { float: left; margin-left: 7px; margin-bottom: 7px; } #header #flags .icon.usa { margin-left: 48px; } #header #search { position: absolute; top: 56px; right: 28px; } #header #search form { } #header #search form div { float: left; } #header #search label { width: 57px; float: left; padding-top: 4px; } #header #search input { width: 155px; font-weight: bold; text-align: center; border: 1px solid #d0d0d0; height: 15px; padding-top: 2px; } #header #search form .search { padding-top: 4px; padding-left: 4px; } #inner { background:url(../images/layup/borderBg.gif) top left repeat-y; } #inner .padding { padding: 0px 6px 30px 7px; } #bannerJumps { width: 239px; float: left; margin-bottom: 4px; } #quoteMe2 { margin-bottom: 4px; position: relative; display: block; width: 235px; height: 178px; } #quoteMe2 a { display: block; height: 100%; font-weight: normal; text-decoration: none; } #quoteMe2 .content { color: #ffffff; font-size: 12px; position: absolute; display: block; } #quoteMe2 .link { color: #313030; font-weight: bold; font-size: 14px; } #branchLocator2 { position: relative; display: block; width: 235px; height: 178px; } #branchLocator2 a { display: block; height: 100%; font-weight: normal; text-decoration: none; } #branchLocator2 .content { color: #ffffff; font-size: 12px; position: absolute; display: block; } #branchLocator2 .link { color: #313030; font-weight: bold; font-size: 14px; } #quoteMe { margin-bottom: 4px; position:relative; display: block; width: 235px; height: 120px; background:url(../images/layup/quoteMe.gif) top left no-repeat;} #quoteMe a { display: block; width: 235px; cursor: pointer; height: 120px; line-height: 120%; font-weight: normal; text-decoration: none; } #quoteMe .content { color: #000000; position: absolute; top: 42px; left: 24px; display: block; width: 200px; } #quoteMe .link { color: #000000; font-weight: bold; } #branchLocator { position:relative; display: block; width: 235px; height: 100px;background:url(../images/layup/branchLocator.gif) top left no-repeat;} #branchLocator a { display: block; width: 235px; height: 100px; cursor: pointer; line-height: 120%; font-weight: normal; text-decoration: none; } #branchLocator .content { color: #ffffff; position: absolute; top: 38px; left: 24px; display: block; width: 200px; } #branchLocator .link { color: #313030; font-weight: bold; } #flashBanner { float: left; width: 639px; } #boxJumps {} #boxJumps .box a { display: block; width: 290px; height: 108px; cursor: pointer; line-height: 120%; font-weight: normal; text-decoration: none;} #boxJumps .box { float: left; width: 290px; height: 108px; position: relative; } #boxJumps .box .link { font-weight: bold; } #boxJumps .box.products { background:url(../images/layup/boxProducts.gif) top left no-repeat; margin-right: 4px; } #boxJumps .box.products .content { display: block; width: 250px; display: block; position:absolute; left: 24px; top: 42px; } #boxJumps .box.latestNews { background:url(../images/layup/boxLatestNews.gif) top left no-repeat; margin-right: 4px; } #boxJumps .box.latestNews .content { display: block; width: 240px; display: block; position:absolute; left: 20px; top: 42px; } #boxJumps .box.search { background:url(../images/layup/boxSearch.gif) top left no-repeat; } #boxJumps .box.search .content { width: 240px; display: block; position:absolute; left: 20px; top: 39px; } #boxJumps .box.search form { margin-top: 8px;} #boxJumps .box.search input { color: #b2b2b2; width: 120px; float:left; height: 17px; border: 1px solid #b2b2b2; padding: 2px 8px 0px 8px; margin-right: 8px; } #boxJumps .box.search label { display:block; width:50px; float:left; font-weight: bold; text-transform:uppercase; margin-top: 1px; } #jumpButtons {} #jumpButtons ul { padding: 0; margin: 0; } #jumpButtons li { list-style: none; float: left; margin-right: 5px; margin-top: 4px; } #jumpButtons li.last { margin-right: 0px; margin-left: -1px; } #jumpLanguage { width: 530px; height: 130px; margin: 20px auto 0px auto; } #jumpLanguage img { float: left; } #jumpLanguage .traditional { margin-right: 40px; } #homeContent {} #homeContent .padding { padding: 23px 23px 0px 23px; } #homeLeft { float: left; width: 607px; padding-right: 50px; } #homeRight { float: left; width: 198px; } #homeRight .articleLink {} #homeRight .articleLink a { display: block; width: 198px; text-decoration: none; font-weight: normal; margin-bottom: 10px; border-bottom: 1px solid #eaeaea; padding-bottom: 0px; } #homeRight .articleLink h1 { font-size: 1.4em; font-weight: bold; } #copperPrice { font-size: 1.4em; font-weight: bold; line-height: 120%; } #copperPrice h1 { padding: 0px 0px 8px 0px; } #copperPrice .price { font-size: 1.2em; color: #b40f09; display: block; } #leftCol { float: left; width: 168px; margin-right: 19px; } #rightCol { float: left; width: 690px; } #rightCol .padding { padding: 14px 14px 0px 0px; } #indentedContent { padding: 0px 14px 0px 14px; } #internalInfo { float: right; margin: 0px 0px 20px 20px; } .internalImage { position: relative; margin-bottom: 10px; } .internalImage .frame { position:absolute; top: -2px; left: -2px; } .downloads { width: 238px; margin: 0px; border: 1px solid #dcdddd; } .downloads .padding { padding: 10px 12px 10px 12px !important; } .downloads .file { height: 42px; margin-top: 8px; } .downloads .file .icon { float: left; } .downloads .file .documentTitle { float: left; padding-top: 9px; padding-left: 8px; } .downloads .file a { text-decoration: none; } .downloads .file a:hover { text-decoration: underline; } .productCol { width: 325px; float: left; margin-top: 12px; } .productCol .title { color: #bd110b; width: 301px; background:url(../images/layup/dotsH.gif) bottom left repeat-x; padding: 6px 12px; } .productCol a { text-decoration: none; font-weight: normal; } .productCol a:hover { text-decoration: normal; font-weight: bold; } .productCol .active { text-decoration: normal; font-weight: bold; } .productCol.left { margin-right: 24px; } .productCol.right { margin-right: 0px; } .productCol .category { width: 325px; float: left; background:url(../images/layup/dotsH.gif) top left repeat-x; margin-bottom: 35px; } .productCol .category ul { padding: 5px 0px 0px 12px; margin: 0; } .productCol .category li { list-style: none; padding: 1px 0px 1px 0px; } #productDetails .productTitle { color: #cc0000; padding-left: 14px; } #productDetails .domtab { width: 679px; background:url(../images/layup/dotsH.gif) top left repeat-x; margin: 0px;padding: 0px; float:left; position:relative; } #productDetails .tabset_tabs { margin:0px; padding:0px 0px 0px 4px; list-style:none; height: 32px !important; width: 679px !important; background:url(../images/layup/dotsH.gif) bottom left repeat-x; } #productDetails .tabset_tabs li { list-style: none; display: inline; float:left; background:url(../images/layup/navDivider.gif) right 11px no-repeat; } #productDetails .tabset_tabs li a { cursor: pointer !important; color: #333333; font-weight: normal; padding:7px 10px 6px 10px; display:block; text-decoration:none; clear: right; } #productDetails .tabset_tabs a:hover { text-decoration:none; color:#333333; font-weight: bold; padding:7px 10px 6px 10px; } #productDetails .tabset_tabs .active a { font-weight: bold; text-decoration:none; color:#333333; padding:7px 10px 6px 10px; } #productDetails .tabset_print { display: none;} #productDetails .tabset_content { display:none; padding:14px 14px 0px 14px; position: relative; } #productDetails .tabset_content p { padding: 0px 0px 20px 0px; } #productDetails .tabset_content h1 { font-size: 1.0em; padding: 0px 0px 12px 0px; margin: 0; line-height: 120%; } #productDetails .productPhoto { float: right; margin: 0px 0px 25px 25px; } #productDetails table { margin: 0px; padding:0; width: 100%; } #productDetails .trAlt { background:#ebebeb !important; } #productDetails .tabset_content td { height: 26px; padding: 0px 0px 0px 4px; } #productDetails .tabset_content table.default td { padding: 0px 0px 0px 0px !important; } #productDetails .tabset_content thead { height: 0px !important; padding: 0px !important; } #productDetails .tabset_content th { padding: 0px 0px 0px 15px; line-height: 120%; } #productDetails #quote { margin-right: 60px; background:url(../images/layup/btnQuote.gif) top left no-repeat; width: 37px; float: left; text-align: center; } #productDetails #quote a { color: #cc0000; text-decoration: none; padding-top: 47px; width: 37px; display: block; } #productDetails #email { background:url(../images/layup/btnEmail.gif) top left no-repeat; width: 46px; float: left; text-align: center; } #productDetails #email a { color: #cc0000; text-decoration: none; padding-top: 47px; width: 46px; display: block; } .list { text-decoration: none; background:url(../images/layup/dotsH.gif) top left repeat-x; padding: 1px 0px 0px 0px; } .list a { display: block; width: 679px; cursor: pointer; text-decoration: none; } .list .thumb { display: block; float: left; width: 167px; } .list .title { display: block; position: relative; float: left; font-size: 1.0em; width: 512px; margin-top: 20px; height: 22px; color: #000000; font-weight: bold; padding: 0px !important;} .list .description { display: block; padding: 0px 0px 0px 0px; width: 512px; float: left; font-weight: normal; line-height: 130%; } .list .link { color: #cc0000; font-weight: bold; } .list .clear { clear: both; display: block; } .list .newsTitle { display: block; position: relative; float: left; font-size: 1.0em; width: 660px; margin-top: 14px; height: 22px; color: #000000; font-weight: bold; padding: 0px 0px 0px 14px !important;} .list .newsDescription { display: block; padding: 0px 0px 18px 14px; width: 660px; float: left; font-weight: normal; line-height: 130%; } /* ----- MAP ----- */ #addressBox { border: 1px solid #dcdcdc; float: left; width: 269px; height: 262px; margin-right: 7px; padding: 10px 20px 10px 20px; } #addressBox address { line-height: 120%;} #map { border: 1px solid #dcdcdc; width: 328px; float: left; } /* ----- CLASSES ----- */ .clear { clear:both; } .hide { display:none; } .show { display:block; } .printShow { display:none; } .float_left { float:left !important; } .float_right { float:right !important; } .align_left { text-align:left !important; } .align_center { text-align:center !important; } .align_right { text-align:right !important; } .align_justify { text-align:justify !important; } .align_bottom { vertical-align:bottom !important; } .image_right { float:right; padding:0 0 15px 15px; } .image_left { float:left; padding:0 15px 15px 0; } .image_center { margin:0 auto; } .relative { position:relative; } .inline {display:inline; } .hand { cursor:pointer; } .pageTitle { background:url(../images/layup/titleBg.gif) top left repeat-x; color: #cf010b; padding-left: 14px; padding-top: 8px; height: 26px; } /* ----- HEADINGS & PARAGRAPHS ----- */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 12px 0; font-size:100%; font-weight:bold;} h1 { } /* ----- TOP NAVIGATION ----- */ #nav { height: 24px; margin-top: 5px; } #nav ul { padding: 0px; margin: 0px 16px 0px 30px; } #nav li { list-style: none; display: block; background:url(../images/layup/navDivider.gif) right 5px no-repeat; float: left; } #nav li.date { font-weight: bold; color: #535353; background:none; width: 130px; } #nav li.last { background: none; } #nav a { display: block; float: left; color: #535353; text-decoration: none; padding: 0px 8px 0px 9px; } #nav a:hover { color: #cc0000; } #nav .active { color: #cc0000; } #nav a.last { padding: 0px 0px 0px 9px !important; } /* ----- LEFT NAVIGATION ----- */ #leftNav { background:url(../images/layup/navLeftBg.gif) top left repeat-x; padding-top: 9px; min-height: 522px; } #leftNav ul { padding: 0; margin: 4px 4px 0px 4px; } #leftNav li { list-style: none; background:url(../images/layup/navLeftDivider.gif) bottom left repeat-x; width: 159px; padding: 1px 0px 2px 0px; } #leftNav a { color: #333333; display: block; width: 127px; text-decoration: none; padding: 4px 12px 4px 20px; font-weight: normal; line-height: 120%; } #leftNav a:hover { color: #FFFFFF; background: #be1f17; display: block; width: 127px; font-weight: normal; } #leftNav .active { color: #FFFFFF; background: #be1f17; display: block; width: 127px; font-weight: normal; } #leftNav li.last { background: none; } #leftNav ul ul { padding: 0; margin: 1px 0px 0px 0px; background:url(../images/layup/navLeftDivider.gif) top left repeat-x; } #leftNav li li { list-style: none; background: none;} #leftNav li li a { background:url(../images/layup/iconArrow.gif) 19px 7px no-repeat; padding: 3px 0px 3px 32px; width: 127px; } #leftNav li li a:hover { color: #be1f17; background:url(../images/layup/iconArrowHover.gif) 19px 7px no-repeat; } #leftNav li li .active { color: #be1f17; background:url(../images/layup/iconArrowHover.gif) 19px 7px no-repeat; } /* ----- SITE MAP ----- */ #sitemap { list-style:none; margin:0 0 0 5px; padding:0;} #sitemap ul { list-style:none; margin:10px 0 0px 15px; padding:0;} #sitemap li { background:url(../images/layup/bulletSitemap.gif) 0px 11px no-repeat; padding:6px 0 5px 15px;} #sitemap a { text-decoration: none; } #sitemap a:hover { text-decoration: underline; } /* ----- BREADCRUMBS/PAGINATION/PAGE TOP AND BOTTOMS ----- */ #pageInfo { color: #4c4c4c; padding: 0px 0px 18px 14px; } #breadcrumbs { float: left; } #breadcrumbs a { text-decoration: none; font-weight: normal; } #breadcrumbs a:hover { text-decoration: underline; } #breadcrumbs .active { text-decoration: none; font-weight: bold; } #pagination { float: right; font-weight: bold; } #pagination a { padding: 0px 4px 0px 4px; text-decoration: none; } #pagination a:hover { background: #071656; padding: 0px 4px 0px 4px; color: #FFFFFF; text-decoration: none; } #pagination .active { background: #071656; padding: 0px 4px 0px 4px; color: #FFFFFF; text-decoration: none; } #paginationBottom { height: 30px; font-weight: bold; background:url(../images/layup/dotsH.gif) top left repeat-x; width: 679px; padding: 18px 0px 0px 0px; } #paginationBottom a { padding: 0px 4px 0px 4px; text-decoration: none; } #paginationBottom a:hover { background: #071656; padding: 0px 4px 0px 4px; color: #FFFFFF; text-decoration: none; } #paginationBottom .active { background: #071656; padding: 0px 4px 0px 4px; color: #FFFFFF; text-decoration: none; } /* ----- FOOTER ----- */ #footer {} #footer .padding { padding: 14px 29px 10px 29px;} #footer a { font-weight:normal; text-decoration:none;} #footer a:hover { text-decoration:underline;} /* ----- GLOBAL ----- */ img { display:block; border:0; } p { padding:0 0 12px 0; margin:0; line-height: 120%; } address { font-style:normal;} /* ----- LINKS ----- */ a { color:#333333; font-weight:bold; text-decoration:underline; } a:hover { text-decoration:none; } /* ----- FORMS ----- */ form { padding:0; margin:0; } fieldset { padding:0; margin:0; border:0px none; display:inline; } legend { padding:0; margin:0; display:none; } label { display:block; width:260px; float:left; } input, textarea { width:200px; font-size:11px !important;} .required { color:#cf010b; font-weight: bold; } .checkRadio { width:20px; position:relative; left:-7px;} #frmContact { margin-bottom:15px;} #frmContact p { padding:7px 0;} #frmContact select { width:204px;} #frmContact div { margin-bottom:10px;} #submit { width:73px; height:23px; border:none;} /* ----- Prototype Validation ----- */ input.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; } input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid #cf010b; color : #FF3300; } input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color : #000; } .validation-advice { margin: 5px 0; width:452px; padding: 5px; background-color: #cf010b; color : #FFF; font-weight: bold; } /* ----- TABLES ----- */ table { border-collapse:collapse; } table p { padding:0px; }