/* ============================================================================ Copyright (c) 2009 National Switchgear Designed and coded by Ariamedia Managed via LaunchPoint (http://getlaunchpoint.com) ============================================================================ */ /* ----------------------- COLOR SWATCHES ----------------------- */ /* Switchgear Red: #8b0e04; Light Blue: #5bb6d7; Text Color: #494949; Stroke Color: #c9ced2; */ /* ----------------------- CSS IMPORTS ----------------------- */ @import url('reset.css'); @import url('text.css'); @import url('960.css'); /* ----------------------- GLOBALS / BLOCK LEVEL ----------------------- */ html { width: 100%; height: 100%; } body { background:#FFF; font: 12px Helvetica, Arial, sans-serif; color: #494949; } a { color: #494949; text-decoration: none !important; } a:hover { text-decoration: none !important; } a img { border: none; } h1 { font-size: 3em; font-weight: normal; padding: 4px 0px; } h2 { font-size: 2.5em; font-weight: normal; padding: 4px 0px; } h2.white { color: #FFFFFF; } h3 { font-size: 2em; font-weight: normal; padding: 4px 0px; } h4 { font-size: 1.8em; font-weight: normal; padding: 4px 0px; } h5 { font-size: 1.6em; font-weight: normal; padding: 4px 0px; } h6 { font-size: 1.4em; font-weight: normal; padding: 4px 0px; } h7 { font-size: 1.2em; font-weight: normal; padding: 4px 0px; } h8 { font-size: .9em; font-weight: normal; padding: 4px 0px; } h9 { font-size: 3em; font-weight: bold; } padding: 4px 0px; h10 { font-size: 2.5em; font-weight: bold; padding: 4px 0px; } h11 { font-size: 2em; font-weight: bold; } padding: 4px 0px; h12 { font-size: 1.8em; font-weight: bold; padding: 4px 0px; } h13 { font-size: 1.6em; font-weight: bold; padding: 4px 0px; } h14 { font-size: 1.4em; font-weight: bold; padding: 4px 0px; } h15 { font-size: 1.2em; font-weight: bold; padding: 4px 0px; } h16 { font-size: .9em; font-weight: bold; padding: 4px 0px; } hr { border: none; height: 0px; width: 100%; clear: both; border-top: 1px solid #CCC; } td { vertical-align: middle; } #mastHead { display: block; margin-left: auto; margin-right: auto; } #logo { display: block; float: left; height: 30px; width: 112px; margin: 24px 10px 10px 10px; } #navigation { float: left; height: 24px; width: 624px; margin: 26px 8px 10px 4px; padding: 4px; position: relative; z-index: 200 } #navigation ul { font-size: 1em; list-style: none; } #navigation ul li { display: block; float: left; margin: 0 14px 0 14px; } #navigation ul li a { display: block; padding: 10px 12px 6px 8px; margin-left: 10px; } #navigation ul li:hover a { background: url(../images/nav_tab.gif) right top; } #navigation ul li:hover { background: url(../images/nav_tab.gif) left top; } #navigation ul li span { display: inline-block; padding-left: 10px; margin-left: -8px; background: url(../images/spriteBluePlus.gif) left 2px no-repeat; cursor:pointer; } #navigation ul li div.wrap { position: absolute; left: -999em;} #navigation ul li:hover div.wrap, #navigation ul li.active div.wrap { left: auto; } #navigation ul li div.wrap ul { } #navigation ul li div.wrap ul li { background: none; margin: 10px 8px 0 2px; font-size: 1em; font-weight: bold; float: none; } #navigation ul li div.wrap ul li a { background: none; padding: 0; margin-right: 10px; white-space: nowrap; } #navigation ul li div.wrap ul li a:hover { color: #8b0e04; } .noBackground {background: none !important;} #navigation ul li div.wrap ul li ul li { font-weight: normal; margin-top: 2px; } #navigation .rc .content ul li, #navigation .rc .content ul li a, { float: none !important; } /* html structure for rounded corners (rc)
CONTENT HERE
css for rounded corners */ *:first-child+html .rc { width: 480px } .rc { position: relative; max-width: 60em; min-width: 8em; z-index: 1; margin-bottom: 0.5em; margin-left: 15px; margin-top: -1px; } .rc .content, .rc .t, .rc .b, .rc .b div { background: transparent url(../images/ddBg.png) no-repeat top right; _background-image: url(../images/ddBg.gif); } .rc .content { position: relative; zoom: 1; _overflow-y: hidden; padding: 10px 12px 8px 0px;} .rc .t { position: absolute; left: 0px; top: 0px; width: 15px; margin-left: -15px; height: 100%; _height: 500px; background-position: top left; } .rc .b { position: relative;} .rc .b, .rc .b div { height: 15px;font-size: 1px;} .rc .b { background-position: bottom right;} .rc .b div { position: relative; width: 15px; margin-left: -15px; background-position: bottom left;} .rc .content table tr td { vertical-align: top; } .navigationSearch { display: block; float: left; border-style: hidden; border-width: 0px; color: #494949; background: url(../images/spriteSearchBg.gif) 0 0 no-repeat; margin: 36px 0px 10px 0px; padding: 4px 10px 1px 20px; width: 150px; height: 20px;} #homeBanner { position: relative; display: block; width: 980px; height: 390px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; } #homeBanner .banner { width: 100%; height: 100%; } #homeBanner .banner h2 { padding: 15px 0 0 20px; } #homeBanner .banner p { padding: 0 0 0 20px; } #homeBanner .one { background: url(../images/bannerHome01.jpg) 0 0 no-repeat; } #homeBanner .two{ background: url(../images/bannerHome02.jpg) 0 0 no-repeat; } #homeBanner .three{ background: url(../images/bannerHome03.gif) 0 0 no-repeat; } #homeBanner .four{ background: url(../images/bannerHome04.jpg) 0 0 no-repeat; } #homeBanner .banner p.rotator01 { color: #494949; } #homeBanner .banner p.rotator02 { color: #FFFFFF; } #homeBanner .banner p.rotator03 { color: #FFFFFF; } #homeBanner .banner p.rotator04 { color: #FFFFFF; } /* ----------------------- HOME SECTION LINKS ----------------------- */ #homeLinks { width: 970px; position: absolute; bottom: -40px; left: 10px; z-index: 200 } .innovation a, .services a, .equipment a, .recovery a { display: block; float: left; margin-left: 11px; padding: 6px 12px; width: 202px; height: 135px; color: #FFF; font-size: 1.3em; } .innovation a p, .services a p, .equipment a p, .recovery a p { display: block; color: #FFF; font-size: .7em; margin-top: 2px; } .innovation a { background: url(../images/homeLink1.png) 0 0 no-repeat; } .services a { background: url(../images/homeLink2.png) 0 0 no-repeat; } .equipment a { background: url(../images/homeLink3.png) 0 0 no-repeat; } .recovery a { background: url(../images/homeLink4.png) 0 0 no-repeat; } .innovation a:hover { background-position: 100% 0; } .services a:hover { background-position: 100% 0; } .equipment a:hover { background-position: 100% 0; } .recovery a:hover { background-position: 100% 0; } #homeFeatures { display: block; margin-top: 40px;} #homeCase { display: block; float: left; background: url(../images/spriteHomeCase.gif) no-repeat; width: 440px; height: 130px; padding-right: 20px; margin: 10px 10px 10px 10px; } #homeCaseImg { display: block; float: left; width:216px; height:126px; margin:2px 0 0 2px;} #caseStudyDes { display: block; float: left; width:200px; height:115px; margin: 15px 0 0 20px; font-style: italic; font-size: 1em; line-height: 1.3em; } .name { display: block; font-size: .8em; line-height: 2.4em; font-style: normal; } .link a { display: block; margin-top: 10px; background: url(../images/spriteRedPlus.gif) 0 40% no-repeat; padding-left: 10px; font-style: normal; font-size: 1em; line-height: 1.3em; color: #8b0e04; } .link a:hover { background: url(../images/spriteRedMinus.gif) 0 44% no-repeat; } #quickLinks { display: block; float: left; width: 460px; height: 50px; margin: 10px 0px 10px 10px; font-size: .8em; } #quickLinks1 { display: block; float: left; width: 226px; margin-right: 20px; } #quickLinks2 { display: block; float: left; width: 94px; margin-right: 20px; } #quickLinks3 { display: block; float: left; width: 100px; } #quickLinks1Header { display: block; float: left; font-weight: bold; width: 220px; margin-bottom: 6px; } #quickLinks2Header { display: block; float: left; font-weight: bold; margin-bottom: 6px; } #quickLinks3Header { display: block; float: left; font-weight: bold; margin-bottom: 6px; } #quickLinks1a { display: block; float: left; line-height: 1.4em; width: 100px; } #quickLinks1a ul { font-weight: normal; } #quickLinks1a li a:hover { text-decoration: underline !important; } #quickLinks1b { display: block; float: left; font-weight: normal; line-height: 1.4em; width: 106px; margin-left: 20px; } #quickLinks1b ul { font-weight: normal; } #quickLinks1b li a:hover { text-decoration: underline !important; } #quickLinks2 { display: block; float: left; font-weight: normal; line-height: 1.4em; width: 94px; } #quickLinks2 ul { font-weight: normal; } #quickLinks2 li a:hover { text-decoration: underline !important; } #quickLinks3 { display: block; float: left; font-weight: normal; line-height: 1.4em; width: 100px; } #quickLinks3 ul { font-weight: normal; } #quickLinks3 li a:hover { text-decoration: underline !important; } #homeAddress { display: block; float: left; width: 460px; height: 40px; margin: 16px 0px 10px 10px; font-size: .8em; line-height: 1.2em; } #homeFooter { display: block; width: 940px; font-size: .8em; } #homeFooterLeft { display: block; float: left; width: 280px; } /* ----------------------- INTERIOR SECTION ----------------------- */ #innerBanner { display: block; width: 980px; height: 202px; margin-left: auto; margin-right: auto; margin-top: 10px; } #innerContent { display: block; float: left; width: 700px; margin-right: 20px; } #innerHeader { display: block; float: left; font-size: 2.5em; color: #5bb6d7; width: 700px; margin-bottom: 20px; margin-top:10px; } #innerInfo { display: block; float: left; font-size: 1.2em; line-height: 1.4em; } /*#innerInfo p { width: 700px; }*/ #innerInfo p.db { display: block; } #innerInfo span { } #innerInfo span.inner { display: block; float: left; width: 700px; } #innerInfo2 { display: block; float: right; width: 320px; font-size: 1.2em; line-height: 1.4em; } #innerInfo a { color: #8b0e04;} #innerInfo ul { display: block; } #innerInfo li { font-size: .9em; line-height: 1.2em; font-weight: normal; margin: 10px 0px 0px 10px; padding-left: 10px; list-style: none; background: url(../images/spriteBluePlus.gif) 0 3px no-repeat;} #innerInfo ol { font-weight: normal; line-height: 1.4em; margin: 4px 0px 10px 20px; } #innerInfo img { display: block; float: left; padding: 0 20px 10px 0;} #innerInfo td img { float: none; padding: 0; } #innerSidebar { display: block; float: left; background: url(../images/spriteSidebar.gif) 0 0 no-repeat; width: 181px; padding: 20px 20px 20px 19px; } #innerSidebarHeader { display: block; float: left; font-size: 1.2em; color: #5bb6d7; width: 180px; } .innerBreak { display: block; float: left; background: #FFF; width: 700px; height: 20px; margin:10px 0 10px 0; } #breadCrumbs { display: block; margin-bottom: 10px; float: left; } #breadCrumbs li { display: block; font-size:.9em; float: left; margin-right: 8px; color: #666666; } #breadCrumbs li a { color: #666666; } #breadCrumbs li a:hover { text-decoration: underline !important; } .bc_divider { color: #999999 !important; } #innerSideBar_Content { display: block; float: left; } #innerSideBar_Content ul { display: block; float: left; } #innerSideBar_Content ul li { display: block; font-size: .9em; font-weight: bold; line-height: 1.2em; margin-top: 10px; } #innerSideBar_Content ul li a { text-decoration: none; } #innerSideBar_Content ul li a:hover { color: #8b0e04; } #innerSideBar_Img { display: block; float: left; margin-top: 20px; width: 181px; height: 180px; } #innerInfo img.timeline { margin-top: 20px; } #innerInfo p.timeline_col1 {display: block; float: left; padding: 10px 20px 10px 10px; width: 200px; } #innerInfo p.timeline_col2 {display: block; float: left; padding: 10px 20px 10px 20px; width: 190px; } #innerInfo p.timeline_col3 {display: block; float: left; padding: 10px 10px 10px 20px; width: 200px; } #innerInfo div#Col_1 { display: block; float: left; width: 300px; } #innerInfo div#Col_2 { display: block; float: right; width: 300px; } #innerInfo ul.timeline li { font-size: 1em !important; line-height: 1.4em; font-weight: normal; padding-left: 10px; list-style: none; margin: 4px 0 0 0; background: url(../images/spriteBluePlus.gif) 0 5px no-repeat; } #innerDivider1 { display: block; float: left; background: #c9ced2; height: 1px; width: 940px; margin: 40px 0 10px 0; } #innerDivider2 { display: block; float: left; background: #c9ced2; height: 1px; width: 940px; margin: 40px 0 10px 0; } #innerMoreInfo { display: block; float: left; width: 440px; margin: 10px 20px 10px 0; } #innerMoreInfo img { display: block; float: left; margin-right: 10px; } #innerMoreInfoHeader { font-size: 1em; } #innerMoreInfoContent { font-size: .8em; line-height: 1.2em; margin-top: 6px; } #innerMoreInfoContent a { color: #8b0e04; } #innerMoreInfoContent a:hover { text-decoration: underline; } .pdfButton { display: block; float: left; background: url(../images/pdfBtn.gif) 0 0 no-repeat; color: #8b0e04; font-size: 11px; line-height: normal; width: 170px; height: 50px; padding: 10px 0 0 50px; } .pdfButton:hover { background: url(../images/pdfBtnHover.gif) 0 0 no-repeat; } div#innerContent div.downloadBtns { display: block; float: left; margin:20px 0 0 0; padding: 20px 0 20px 0; } #download { display: block; float: left; color: #8b0e04; background: url(../images/gradientBtnBg1.gif) 0 0 no-repeat; width: 200px; height: 40px; margin: 0px 20px 0px 0; padding: 10px; } #download { font-size: 11px; line-height: normal; } #download a:hover { background: url(../images/gradientBtnBg1Hover.gif) 0 0 no-repeat; } #download a:active { background: url(../images/gradientBtnBg1Active.gif) 0 0 no-repeat; } #download p.line2 { color: #494949; font-size: .7em; margin-top: 4px; } #download .downloadImg { display: block; float: left; width: 30px; height: 40px; margin-right: 10px; } #download img { padding: 0; } #related { display: block; float: left; color: #8b0e04; background: url(../images/gradientBtnBg1.gif) 0 0 no-repeat; width: 200px; height: 40px; margin: 0px 20px 0px 0; padding: 10px; } #related a:hover { background: url(../images/gradientBtnBg1Hover.gif) 0 0 no-repeat; } #related a:active { background: url(../images/gradientBtnBg1Active.gif) 0 0 no-repeat; } #related p.line2 { color: #494949; font-size: .7em; margin-top: 4px; } #related .relatedImg { display: block; float: left; width: 32px; height: 38px; margin-right: 10px; } #innerFooter { display: block; width: 940px; font-size: .8em; padding-bottom: 20px; } #innerFooterLeft { display: block; float: left; width: 280px; } #innerFooterRight { display: block; float: right; text-align: right; width: 580px; } #innerFeatures { } .w_360 { width: 360px; } /* ------------------------------- CONTACT FORM ------------------------------- */ #contactForm { display: block; float: left; } .contactLabel { display: block; float:left; width: 380px; } #innerInfo form#contactForm p { display: block; margin-top:10px; } #contactForm input, #contactForm textarea { font: 11px Helvetica, Arial, Sans-serif; padding: 5px; } .contactInput { display: block; float: left; width: 328px; background: #FFF; border: 1px solid #d2d2d0; margin: 0 0 10px 0; } .contactComments { display: block; float: left; width: 328px; height: 100px; background: #FFF; border: 1px solid #d2d2d0; margin: 0 0 10px 0; } .contactBtnCont { display: block; float: left; width: 600px;} .contactBtn { display: block; float: left; border: none; background: #FFF url(../images/submitBtn.gif) no-repeat; width: 80px; height: 30px; color: #494949; font-weight: bold; text-align: center; padding: 2px 0 4px 0; margin-left: 250px; } .contactBtn:hover { background: #FFF url(../images/submitBtnHover.gif) no-repeat; color: #000; } .contactNerf { display: none; }