/* ------------------------------ site: Luftig Warren last date: 01/12/09 author: Chad Cross - Juxtaflo Web Studio - juxtaflo.com url: luftigwarren.com ------------------------------ */ /* ------------------------------ Pixel to em conversions: 16 x 1.5em = 24px 16 x 1.25em = 20px 16 x 1.125em = 18px 16 x 1em = 16px 16 x 0.875em = 14px 16 x 0.75em = 12px Colors: #333 #e05307 - orange ------------------------------ */ /* GLOBAL ------------------------------ */ html,body { background: #fff; font-family: Tahoma, Geneva, sans-serif; color: #333; margin: 0; padding: 0; } a:link { font-weight: normal; color: #000; text-decoration: underline; } a:visited { font-weight: normal; color: #333; text-decoration: underline; } a:hover, a:active { text-decoration: underline; color: #e05307; } p { padding: 0; margin: 0 0 20px 0; font-size: 0.75em/*12px*/; line-height: 1.125em/*18px*/; } p.listStart { padding: 0; margin: 0 0 10px 0; } p.paddedMargin { padding: 0 0 20px 0; margin: 0; } hr {} .orangeType { color: #E05307; } .whiteType { color: #FFF; } /* HEADINGS ------------------------------ */ h1 { font-size: 1.125em/*18px*/; margin: 0 0 1em/*16px*/ 0; color: #e05307; font-weight: bold; } h2 { color: #e05206; font-size: 0.875em/*14px*/; font-weight: bold; margin: 0 0 0.75em/*12px*/ 0; padding: 0; } h3 { color: #333; font-size: 0.75em/*12px*/; font-weight: bold; margin: 0 0 0.75em/*12px*/ 0; padding: 0; } h3.noLowGap { margin: 0; } h3.noLowGap a:link { color: #e05206; font-weight: bold; margin: 0; padding: 0; text-decoration: none; } h3.noLowGap a:visited { color: #666; font-weight: bold; margin: 0; padding: 0; text-decoration: none; } ul h3, ol h3 { font-size: 1em;} h4 { color: #000; font-size: 0.75em/*12px*/; font-weight: bold; margin: 5px 0; padding: 0; } /* IMAGES ------------------------------ */ img{ border: 0; } img.floatRight{ float: right; margin: 0 0 10px 10px; } img.floatRightPrinter{ float: right; margin: 0; padding: 0; } img.floatLeft{ float: left; margin: 0 20px 10px 0; padding: 0 20px 0 0; border-right: 1px solid #E05307; } img.imageFloatLeftForm { float: left; margin: 0 20px 20px 0; padding: 0 20px 0 0; border-right: 1px solid #E05307; display: inline; } img.sidebarImage { margin-bottom: 10px; } /* LISTS ------------------------------ */ ul, ol { margin-bottom: 20px; /* list-style: none; */ font-size: 0.75em/*12px*/; line-height: 1.125em/*18px*/; } li { margin-bottom: 10px; } ul li { background: transparent url("../images/bullet_arrow.gif") no-repeat 0px 6px; padding-left: 20px; overflow: hidden; font-weight: normal; color:#333; } ul li ul, ol li ul, ul li ol, ol li ol { margin: 15px 0 20px 0px; font-size: 1em/*12px*/; padding-left: 10px; } ul li ol li { background-image: none; padding-left: 0; } div.bulletFix { margin: 0 0 0 20px; }/* This is used to fix the issue of dissapearing bullets when next to a floated element */ dl { padding: 0; margin: 0 0 20px 15px; line-height: 18px; } dt { font-weight: bold; padding: 0 0 5px 0; margin: 0; } dd { padding: 0 0 5px 0; margin: 0; } /* NAVIGATION - PRIMARY ------------------------------ */ #navigation { background: #fff /*url("../images/nav_top.jpg") no-repeat top left*/; float: left; width: 750px; margin: 0; padding: 0; } #navigation ul { margin: 0; padding: 0; list-style-type: none; font-size: 0.6875em/*11px*/; } #navigation ul li { background-image: none; float: left; margin: 0; padding: 0; } #navigation a:link, #navigation a:visited { background: transparent url("../images/nav_bar.jpg") no-repeat top left; display: block; width: 112px; height: 75px; border-top: 2px solid #e05307; font-weight: bold; text-decoration: none; padding: 45px 0 0 7px; margin: 0 6px 0 0; } #navigation a:hover { background: #e05206; color: #fff; } #navigation ul li.active { background: #e05206; display: block; width: 112px; height: 35px; border-top: 2px solid #e05307; font-weight: bold; padding: 85px 0 0 7px; margin: 0 6px 0 0; color: #fff; }/* for the link of the page that the user is on */ #navigation ul li.active a:link, #navigation ul li.active a:visited { background-image: none; padding: 0; font-size: 1em; text-decoration: underline; color: #fff; } /* NAVIGATION - SECONDARY ------------------------------ */ ul.subnav { border: 1px solid #ccc; margin: 0 0 10px 0; padding: 0; font-size: 0.75em/*12px*/; } ul.subnav li { margin: 0; padding: 0; background-image: none; } ul.subnav li h2 { margin: 0; padding: 10px; background-color: #f5f5f5; border-bottom: 1px solid #ccc; color: #e05307; font-size: 1.083em/*13px*/; } ul.subnav li h2 a:link, ul.subnav li h2 a:visited { display: block; padding: 10px; margin: -10px; color: #e05307; font-size: 1em/*13px*/; font-weight: bold; text-decoration: underline; } ul.subnav li h2.active { background: #e05206; color: #fff; } ul.subnav li ul { margin: 0; padding: 0;} ul.subnav li ul li { border-bottom: 1px solid #ccc; padding: 0; margin: 0; } ul.subnav li ul li.first {} ul.subnav li ul li.last { border-bottom: none; } ul.subnav li a:link, ul.subnav li a:visited { display: block; padding: 5px 10px; text-decoration: none; } ul.subnav li a:hover { background: #eee; color: #e05206; } ul.subnav li.active { background: #e05206; padding: 5px 10px; color: #fff; } /* Home Page ad version */ .servicesList ul.subnav { border: none; } .servicesList ul.subnav li h3 { margin: 0; padding: 10px 0; background-color: #fff; border-bottom: 1px solid #ccc; } .servicesList ul.subnav li h3 a:link, .servicesList ul.subnav li h3 a:visited { display: block; padding: 10px 0; margin: -10px 0; color: #333; font-weight: bold; text-decoration: underline; } .servicesList ul.subnav li ul li.last { border-bottom: 1px solid #ccc; } .servicesList ul.subnav li a:link, .servicesList ul.subnav li a:visited { padding: 5px 0; } /* LAYOUT - HEADER ------------------------------ */ #header { width: 970px; margin: 0 auto 0 auto; padding: 0; overflow: hidden; } #logo { float: left; width: 142px; height: 50px; margin: 60px 78px 0 0; padding: 0; } /* LAYOUT - BANNER ------------------------------ */ #banner { width: 970px; position: relative; background: url("../images/banner_home.jpg") no-repeat top left; height: 170px; margin: 0 auto 20px auto; padding: 0; } #banner p { display: block; font-size: 1em/*16px*/; position: absolute; bottom: 28px; width: 600px; color: #e05307; padding-left: 31px; margin: 0; font-weight: bold; } #banner p span { font-size: 0.875em/*14px*/; color: #ccc;} /* Change the image based on page */ .home #banner { background: url("../images/banner_home.jpg") no-repeat top left; } .services #banner { background: url("../images/banner_services.jpg") no-repeat top left; } .philosophy #banner { background: url("../images/banner_philosophy.jpg") no-repeat top left; } .benefits #banner { background: url("../images/banner_benefits.jpg") no-repeat top left; } .success #banner { background: url("../images/banner_our_focus.jpg") no-repeat top left; } .resources #banner { background: url("../images/banner_resources.jpg") no-repeat top left; } .contact #banner { background: url("../images/banner_contact_us.jpg") no-repeat top left; } .successManufacturing #banner { background: url("../images/banner_cs_weldaloy.jpg") no-repeat top left; } .successProfessional #banner { background: url("../images/banner_cs_mrpr.jpg") no-repeat top left; } .privacy #banner { background: url("../images/banner_privacy_policy.jpg") no-repeat top left; } /* LAYOUT - BANNER2 ------------------------------ */ #banner2 { width: 970px; position: relative; background: url("../images/polaris_banner970x100.gif") no-repeat top left; height: 100px; margin: 0 auto 20px auto; padding: 0; } #banner2 p { display: block; font-size: 1em/*16px*/; position: absolute; bottom: 38px; width: 600px; color: #011a9f; padding-left: 320px; margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #banner p span { font-size: 0.9em/*14px*/; color: #ccc; } /* Change the image based on page */ .polaris #banner2 { background: url("../images/banner_polaris_970x100.gif") no-repeat top left; } .ptc #banner2 { background: url("../images/banner_ptc_970x100.gif") no-repeat top left; } .scs #banner2 { background: url("../images/banner_scs_970x100.jpg") no-repeat top left; } /* LAYOUT - CONTENT ------------------------------ */ #content { width: 970px; margin: 10px auto 0 auto; /* use a 10px top margin because that is all home page needs */ padding: 0; overflow: hidden; } #leftColumn { float: left; width: 200px; margin: 0 10px 0 0; padding: 0; } #middleColumn { float: left; width: 530px; margin: 0 10px 0 10px; padding: 0; } .sidebar-right #middleColumn, .sidebar-left #middleColumn { margin: 0 10px 0 0px; width: 750px; } #rightColumn { float: right; width: 200px; margin: 0 0 0 10px; padding: 0; } /*make the sidebar a little wider on some landing pages*/ .ptc #middleColumn, .scs #middleColumn { margin: 0 10px 0 0px; width: 650px; } .ptc #rightColumn, .scs #rightColumn { float: right; width: 300px; margin: 0 0 0 10px; padding: 0; } div.contentSubIsland { width: 530px; padding: 0; margin: 0 0 10px 0; overflow: hidden; }/* holder for modules of content/images in the body content*/ div.contentSubIsland div { float: left; width: 325px; } div.contentSubIsland div ul {margin-left: 0; padding-left: 0;} /*not used anymore... I think */ div.floatList { float: right; width: 225px; margin: 0 0 20px 0; padding: 0; } div.floatList h3 { margin: 0 0 5px 0; } div.floatList2 { float: right; width: 415px; margin: 0 0 20px 0; padding: 0; } div.contentBlock { overflow: hidden; margin: 0; padding: 0; } /* LAYOUT - FOOTER ------------------------------ */ #footer { width: 970px; margin: 10px auto 0 auto; padding: 0 0 10px 0; overflow: hidden; font-size: 10px; color: #999; } #footerLeft { float: left; margin: 0; padding: 0; } #footerRight { float: right; margin: 0; padding: 0; } #footer a:link { text-decoration: none; color: #666; } #footer a:visited { text-decoration: none; color: #666; } #footer a:hover { text-decoration: underline; } #footerSub { width: 970px; margin: 10px auto 0 auto; padding: 10px 0 10px 0; overflow: hidden; font-size: 10px; color: #999; border-top: 1px solid #E05206; } #footerSub a:link { text-decoration: none; color: #666; } #footerSub a:visited { text-decoration: none; color: #666; } #footerSub a:hover { text-decoration: underline; } /* FORM ------------------------------ */ /* use on newsletter form box only*/ .homeModuleNewsletter form{ margin: 104px 0 0 15px; padding: 0; } .arrow-btn { float: left; background: transparent url("../images/button_arrow.png") no-repeat; width: 21px; height: 21px; outline: none; border: 0; padding: 0; margin: 0 0 0 5px; } .arrow-btn:hover { background: transparent url("../images/button_arrow.png") no-repeat -21px 0; } .newsletter{ float: left; height: 17px; width: 171px; border: 1px solid #ccc; text-align: left; padding: 2px 4px 0 4px; margin: 0; } /* use on newsletter module form box only*/ .moduleContent form { margin: 0; padding: 0; } .arrow-btn { float: left; background: transparent url("../images/button_arrow.png") no-repeat; width: 21px; height: 21px; outline: none; border: 0; padding: 0; margin: 0 0 0 5px; } .arrow-btn:hover { background: transparent url("../images/button_arrow.png") no-repeat -21px 0; } .moduleContent .newsletter { float: left; height: 17px; width: 226px; border: 1px solid #ccc; text-align: left; padding: 2px 4px 0 4px; margin: 0; } /* standard form elements*/ form { font-size: 0.75em/*12px*/; } fieldset { margin: 0; padding: 10px 10px 0 10px ; overflow: hidden; border: 1px solid #ccc; } legend { color: #333; Font-weight: bold; } label { padding: 2px 0 0 0; font-weight: bold; } input { border: 1px solid #ccc; } .buttonSubmit { float: none; background: #ff0000; border: 1px solid #fff; outline: 0; padding: 5px; margin: 0 0 10px 105px; color: #fff; text-transform: uppercase; font-weight: bold; -moz-border-radius: 7px; -webkit-border-radius: 7px; } .landingForm .buttonSubmit { float: none; } /* use this for normal input boxes*/ div.fi { width: 100%; margin: 0 0 10px 0; padding: 0; overflow: hidden; } div.fi label { float: left; width: 100px; margin-right: 5px; } div.fi input { width: 225px; margin: 0; padding: 0 0 0 4px; color: #333; } div.fi textarea { width: 225px; margin: 0; padding: 0 0 0 4px; color: #333; } div.fiText { display: block; padding: 0px; text-align: left; margin: 0; padding: 5px 0 5px 10px; } /* use this when there are multiple inputs like radio buttons or checklists*/ div.fiMulti { margin: 0 0 10px 0; padding: 5px 0 5px 0; overflow: hidden; } div.fiMulti input { width: 20px; border-top: 0px solid #555; border-left: 0px solid #555; border-bottom: 0px solid #ccc; border-right: 0px solid #ccc; text-align: left; padding: 4px 0 0 10px; margin-left: 10px; } div.fiMulti label { float: left; display: block; padding: 0px; text-align: left; padding: 2px 0 0 0; } /* use this when there are multiple inputs like radio buttons or checklists and when they need to be side by side*/ div.fiMultiDoubler { width: 470px; margin: 0; padding: 0; } div.fiMultiFloat { float: left; width: 235px; margin: 0; padding: 5px 0 5px 0; } div.fiMultiFloat input { width: 20px; border-top: 0px solid #555; border-left: 0px solid #555; border-bottom: 0px solid #ccc; border-right: 0px solid #ccc; text-align: left; padding: 4px 0 0 10px; margin-left: 10px; } div.fiMultiFloat label { float: right; display: block; width: 195px; padding: 0; text-align: left; padding: 4px 0 0 0; } /* use this when there are nornmal inputs when they need to be side by side*/ div.fiFloat { float: left; width: 235px; margin: 0; padding: 5px 0 5px 0; } div.fiFloat input { float: left; width: 100px; border-top: 1px solid #555; border-left: 1px solid #555; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; text-align: left; padding: 0 0 0 4px; margin: 0; } div.fiFloat label { float: left; width: 100px; padding: 4px 0 0 10px; margin: 0; text-align: left; } div.fiFloat select { float: left; width: 100px; padding: 0; margin: 0 0 0 10px; text-align: left; } div.fiRecaptcha { display: block; margin: 5px 0 0 0; padding: 0; } div.fiRecaptcha label { display: block; width: 100%; } /* pageForm creates rounded corners */ .pageForm { background: transparent; padding: 15px; } .pageForm h2 { color:#fff;} .wrap1 { background: #e05307 url("../images/corners/topRight.png") no-repeat top right; width: 50%; } .wrap2 { background: transparent url("../images/corners/topLeft.png") no-repeat top left;} .wrap3 { background: transparent url("../images/corners/bottomRight.png") no-repeat bottom right;} .wrap4 { background: transparent url("../images/corners/bottomLeft.png") no-repeat bottom left;} .pageForm form fieldset { background: transparent; border: 0; padding: 0; margin: 0; } .pageForm form .fi { } .pageForm form .fi label { float: left; width: 25%; margin-right: 10px; color: #fff; } .pageForm form .fi input { width: 65%; } .pageForm .buttonSubmit { margin-left: 97px; background: #fff; border: 2px solid #111; outline: 1px; color: #333; } /*On landing page forms only*/ form.landingForm { margin-bottom: 20px; } /* BLOCK ------------------------------ */ div.moduleTop { background: transparent url("../images/block_top.gif") no-repeat top left; width: 200px; height: 18px; padding: 0; margin: 0; } div.moduleContent { background: transparent url("../images/block_sliver.gif") repeat-y top left; width: 180px; padding: 0 10px 0 10px; margin: 0; overflow: hidden; } div.moduleBottom { background: transparent url("../images/block_bottom.gif") no-repeat top left; width: 200px; height: 22px; padding: 0; margin: 0 0 10px 0; } div.homeModule { float: left; margin: 0 10px 0 0; padding: 0; display: inline; /* hack for IE 6 double margin float bug */ } div.homeModuleLast { float: left; margin: 0; padding: 0; display: inline; /* hack for IE 6 double margin float bug */ } div.homeModuleSmallTop { margin: 0 0 10px 0; padding: 0; } div.homeModuleSmallBottom { margin: 0; padding: 0; } /* BLOCK - FREE REPORT BOX ------------------------------ */ .freeReportBoxWrap { background: #e05307 url("../images/block_solid_bottom.gif") no-repeat bottom left; } .freeReportBox { background: transparent url("../images/block_solid_top.gif") no-repeat top left; padding: 18px 10px 10px 10px; margin: 0 0 10px 0; } .freeReportBox h2 { color: #fff; } .freeReportBox h3 { color: #ccc; } .freeReportBox p { margin-bottom: 10px; color: #fff; } .freeReportBox a:link, .freeReportBox a:visited { color: #fff; } /* free report form */ .freeReportBox form { width: 180px; } .freeReportBox form fieldset { background: #cf4a02; border: 1px solid #cf4a02; padding: 5px 5px 0 5px; margin-bottom: 10px; } .freeReportBox form .fi { } .freeReportBox form .fi label { float: left; width: 25%; margin-right: 10px; color: #fff; } .freeReportBox form .fi input { width: 65%; } .freeReportBox .buttonSubmit { float: right; width: 100%; height: auto; background: #eee; border: 2px solid #111; outline: 1px; padding: 5px; margin: 5px 0 5px 0; font-weight: bold; color: #b64203; font-size: 0.875em/*12px*/; cursor: pointer; } .freeReportBox p.privacy { text-align: right; } .freeReportBox p.privacy a:link, .freeReportBox p.privacy a:visited { color: #ccc; font-size: 0.9167em/*11px*/; } /* BLOCK - FREE REPORT BOX 300 PIXELS WIDE ------------------------------ */ .freeReportBoxWrap300 { background: #e05307 url("../images/block_solid_bottom_300.gif") no-repeat bottom left; } .freeReportBoxWrap300 .freeReportBox { background: transparent url("../images/block_solid_top_300.gif") no-repeat top left; padding: 18px 10px 10px 10px; margin: 0 0 10px 0; } .freeReportBoxWrap300 .freeReportBox h2 { color: #fff; } .freeReportBoxWrap300 .freeReportBox h3 { color: #ccc; } .freeReportBoxWrap300 .freeReportBox p { margin-bottom: 10px; color: #fff; } .freeReportBoxWrap300 .freeReportBox a:link, .freeReportBoxWrap300 .freeReportBox a:visited { color: #fff; } /* free report form */ .freeReportBoxWrap300 .freeReportBox form { width: 280px; }