/* Main styles for Johnson CAT ::::::::::::::::::::::::::::::::::::::; */ * { margin: 0; padding: 0; } body { font: normal .65em/125% Arial, Helvetica, Geneva, sans-serif; color: #333; text-align: left; background: #f8f8f8 url(../_img/main_bg_fade.jpg) 0 92px repeat-x; } strong { font-size: 110%; } p { margin: 15px 0; font-size:11px; } /* breadCrumbTrack ---------------------------------------------------------------------------------*/ #breadCrumbTrack { position: relative; line-height: 19px; margin-top: -2px; padding: 3px 10px; background-color: #181512; border-top: 2px solid #333; font-size: 10px; color: #797878; } #breadCrumbTrack a { font-size: 11px; color: #797878; text-decoration: none; } #breadCrumbTrack a:hover { color: #ffcc00; } #breadCrumbTrack .LiveCrumb { color: #ffcc00; } /* columnLeft ---------------------------------------------------------------------------------*/ #columnLeft { float: left; display: inline; margin: 0 8px 0 8px; padding-top: 8px; width: 592px; } /* columnRight ---------------------------------------------------------------------------------*/ #column-right { float: left; width: 192px; padding-top: 8px; } #column-right #news { width: 192px; margin-bottom: 3px; background: transparent url(../_img/floridian_box.jpg) no-repeat; overflow: hidden; min-height: 243px; height: auto !important; height: 243px; } #column-right h3 { padding: 10px 8px 10px 8px; font-size: 12px; } #column-right p { margin: 0 12px 14px 8px; } #column-right #news a { color: #009AFE; margin-left: 3px; } #column-right #news a:hover { text-decoration: none; } /* contentArea ---------------------------------------------------------------------------------*/ #contentArea { width: 590px; background: transparent url(../_img/content-area_topfade.jpg) 0 32px repeat-x; } #contentArea h2 { font-size: 14px; line-height: normal; padding: 7px 10px; border-bottom: 1px solid #999; border-top: 3px solid #fc0; background: #ffcc00 url(../_img/orange_gradient.gif) repeat-x; display:block; float:left; width:570px; } #contentArea a { color: #336699; text-decoration: underline; font-size: 105%; } #contentArea #leftField { float: left; width: 395px; } #contentArea p { margin: 10px 10px 10px 15px; font-size: 105%; } #contentArea h3 { font-size: 14px; margin: 15px 0 0 10px; } #contentArea h4 { font-size: 11px; margin: 5px 0 5px 10px; font-style:italic; color:#777; } #contentArea h6 { font-size: 12px; margin: 5px 0 5px 10px; } #contentArea #leftField-lrg h3 span { background:#fff; border:1px solid #e6e6e6; padding:3px; font-size:12px; } #contentArea #leftField-lrg { float: left; width: 590px; } #contentArea #leftField-lrg .division { width:590px; border-bottom:1px solid #e6e6e6; } #contentArea #leftField-lrg img { float: right; background: transparent url(../_img/variable-use_bg.jpg) top left repeat-x; padding:5px; margin:5px; } #contentArea #leftField-lrg .directory { width:135px; height: 100px; display:inline; float:left; border-left:1px solid #ccc; border-right:1px solid #fff; border-top:1px solid #ccc; border-bottom:1px solid #fff; padding:5px; overflow:hidden;} #contentArea #leftField-lrg p { margin: 10px 10px 10px 10px; font-size: 105%; } #contentArea #leftField p { margin: 10px 10px 10px 10px; font-size: 105%; } #contentArea #leftField td { padding:3px 5px; font-size: 105%; } #contentArea #leftField h5 { font-size:12px; color:#555; background:#fff; margin:10px 0 0 0; padding:5px; } #contentArea #leftField h6 { font-size:10px; text-transform:uppercase; color:#999; letter-spacing:20px; background:#e6e6e6; margin:10px 0 0 0; padding:5px 10px; border-bottom:2px solid #ccc; } #contentArea #variableUseRight { float: left; width: 182px; background: transparent url(../_img/variable-use_bg.jpg) 0 10px no-repeat; } #contentArea #variableUseRight img { display: block; border: none; } #contentArea #variableUseRight div { margin: 16px 7px 7px 7px; border-bottom: 1px solid #ccc; } #contentArea #variableUseRight ul { list-style:none; margin:0; } #contentArea #variableUseRight li { margin:1px; padding:0; } #contentArea #variableUseRight li a { width:160px; display:block; padding:3px; background:#fff; color:#369; text-decoration:none;} #contentArea #variableUseRight li a:hover { background:#333; color: #ffa700; } #contentArea ul { width:580px; height:400px; list-style:none; display:block; margin:0 0 10px 8px; background: transparent url(../_img/triple-sector_bg.jpg) no-repeat; padding:8px 0 0 3px; } #contentArea li { width:163px; display:inline; } #contentArea li a { width:163px; padding:10px 5px 10px 20px; display:block; float:left; margin:1px; border:1px solid #e6e6e6; background: #fff url(../_img/list_nav_arrow.gif) 5px center no-repeat; } #contentArea li a:hover { width:163px; padding:10px 5px 10px 20px; display:block; float:left; margin:1px; border:1px solid #e6e6e6; background: #121212; color:#fc0; text-decoration:none; } #productPhoto { background-color: #fff; padding:0; width:200px; height:200px; display:block; float:left;} #productPhoto img { display: block; float:left; border: none; } #productOverview { width:390px; height:200px; margin:0; padding:0; float:right; background:#181512; } #productOverview h1 { font-size: 14px; line-height: normal; padding: 8px 10px 5px 10px; border-bottom: 1px solid #999; border-top: 3px solid #fc0; background: #999 url(../_img/grey_gradient.jpg) repeat-x; display:block; width:370px; } #productOverview p { margin:10px; color:#999; } #contentArea p {color: #666666; line-height: 1.4; margin: 0 0 16px 0;} #contentArea select { display:block; float:left; width:230px; height:20px; margin:10px 10px; font-size:10px; padding:2px; border:1px solid #ccc; background:#f8f8f8; } #productOverview select { display:block; float:left; width:230px; height:20px; margin:10px 10px 10px 0; font-size:10px; padding:2px; border:1px solid #ccc; background:#f8f8f8; } #productOverview p {color: #666666; line-height: 1.4; margin: 10px;} #contentArea select option, #productOverview select option { padding:3px; border-top:1px solid #e6e6e6; } #prod_select { display:block; float:left; width:400px; height:50px; background:url(../_img/bg_select.gif) no-repeat;} #contentArea td{ border-top:1px solid #e6e6e6; padding: 3px 0 8px 0; color:#888; } #contentArea h5 {font-size: 13px; color:#555; margin: 0; padding:4px; background:#f8f8f8; } #contentArea h5 span { font-size:11px; color:#c33; padding:2px; margin:2px; border:1px solid #e6e6e6; background:#fff; } /* online-tools ---------------------------------------------------------------------------------*/ #online-tools { margin: 4px 0 10px 5px; width: 187px; background: url(../_img/gray_gradient.gif) repeat-x; } #column-right #online-tools { margin: 4px 0 10px 3px; width: 188px; background: url(../_img/gray_gradient.gif) repeat-x; } #online-tools a { color: #009AFE; font-size: 85%; } #online-tools a:hover { text-decoration: none; } #online-tools #toolSelect { margin: 0 0 10px 8px; font-size: 11px; width: 150px; } #online-tools img { margin:0 10px 0 10px; float:left; clear:both; } /* Misc Classes & IDs ---------------------------------------------------------------------------------*/ .NextCompartMent { float: left; width: 188px; margin: 15px 2px 0 0; background: transparent url(../_img/compartment_bg.jpg) no-repeat; min-height: 140px; height: auto !important; height: 140px; } #conTainer { width: 883px; background: transparent url(../_img/edge_fade.jpg) right 0 no-repeat; border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; } .DecorLine { border-bottom: 1px solid #ccc; margin: 10px; } .LeadCompartment { float: left; display: inline; width: 188px; height: 140px; margin: 15px 2px 0 13px; background: transparent url(../_img/compartment_bg.jpg) no-repeat; } .ClearFloat { clear: both; height: 1px; overflow: hidden; } /* divisions ---------------------------------------------------------------------------------*/ #divisions { margin: 4px 0 10px 5px; width: 187px; background: url(../_img/gray_gradient.gif) repeat-x; } #column-right #divisions { margin: 4px 0 10px 3px; width: 188px; background: url(../_img/gray_gradient.gif) repeat-x; } #divisionList { margin: 0 5px 8px 5px; list-style-type: none; width: 170px; } #divisionList li { display: inline; } #divisionList a { display: block; width: 170px; height: 30px; margin: 3px 0 3px 0; text-indent: -1200px; overflow: hidden; } #divisionList #johnsonMachineryDivision { background: transparent url(../_img/divisions_bg.gif) 0 0 no-repeat; } #divisionList #johnsonMachineryDivision:hover { background: transparent url(../_img/divisions_bg.gif) -170px 0 no-repeat; } #divisionList #johnsonPowerDivision { background: transparent url(../_img/divisions_bg.gif) 0 -35px no-repeat; } #divisionList #johnsonPowerDivision:hover { background: transparent url(../_img/divisions_bg.gif) -170px -35px no-repeat; } #divisionList #johnsonRentalDivision { background: transparent url(../_img/divisions_bg.gif) 0 -70px no-repeat; } #divisionList #johnsonRentalDivision:hover { background: transparent url(../_img/divisions_bg.gif) -170px -70px no-repeat; } #divisionList #ever-pacDivision { background: transparent url(../_img/divisions_bg.gif) 0 -105px no-repeat; } #divisionList #ever-pacDivision:hover { background: transparent url(../_img/divisions_bg.gif) -170px -105px no-repeat; } #divisionList #johnsonLiftDivision { background: transparent url(../_img/divisions_bg.gif) 0 -140px no-repeat; } #divisionList #johnsonLiftDivision:hover { background: transparent url(../_img/divisions_bg.gif) -170px -140px no-repeat; } /* feature Items ---------------------------------------------------------------------------------*/ #featureFrame { width: 592px; height: 242px; } #featurePhoto { background-color: #fff; padding: 1px 0 2px 0; } #featurePhoto img { display: block; border: none; } /* footerBar ---------------------------------------------------------------------------------*/ #footerBar { float: left; width: 883px; margin-top: -8px; background: transparent url(../_img/bottom_fade.jpg) no-repeat; } #footerBar p { padding: 15px 0 0 30px; } #footerBar a { color: #009AFE; } /* leftNavList ---------------------------------------------------------------------------------*/ #leftNavList { width: 172px; background-color: #f8f8f8; list-style-type: none; margin: 0 0 20px 0; padding: 0 10px; } #leftNavList li { margin: 0; padding: 0; } #leftNavList li a { width: 146px; display: block; padding: 6px 13px; text-decoration: none; color: #333; font-size: 110%; border-bottom: 1px solid #e6e6e6; font-weight: bold; background: url(../_img/list_nav_arrow.gif) left center no-repeat; } #leftNavList li a:hover { color:#369; } #leftNavList li ul { list-style:none; } #leftNavList li ul li { margin: 0; padding: 0; } #leftNavList li ul li a { background:#fff; padding: 4px 13px; color:#777; font-weight:normal; } /* mainNav ---------------------------------------------------------------------------------*/ #mainNav { float: left; width: 582px; height: 30px; list-style-type: none; } #mainNav li { display: inline; } #mainNav .MainLink { display: block; float: left; height: 30px; text-indent: -1200px; overflow: hidden; } #mainNav #homeLink { width: 51px; background: transparent url(../_img/all_nav_words.jpg) 0 0 no-repeat; } #mainNav #homeLink:hover, #mainNav #homeLive { background: transparent url(../_img/all_nav_words.jpg) 0 -30px no-repeat; } #mainNav #companyLink { width: 65px; background: transparent url(../_img/all_nav_words.jpg) -51px 0 no-repeat; } #mainNav #companyLink:hover, #mainNav #companyLive { background: transparent url(../_img/all_nav_words.jpg) -51px -30px no-repeat; } #mainNav #newProductsLink { width: 98px; background: transparent url(../_img/all_nav_words.jpg) -116px 0 no-repeat; } #mainNav #newProductsLink:hover, #mainNav #newProductsLive { background: transparent url(../_img/all_nav_words.jpg) -116px -30px no-repeat; } #mainNav #usedProductsLink { width: 99px; background: transparent url(../_img/all_nav_words.jpg) -214px 0 no-repeat; } #mainNav #usedProductsLink:hover, #mainNav #usedProductsLive { background: transparent url(../_img/all_nav_words.jpg) -214px -30px no-repeat; } #mainNav #partsAndServicesLink { width: 109px; background: transparent url(../_img/all_nav_words.jpg) -313px 0 no-repeat; } #mainNav #partsAndServicesLink:hover, #mainNav #partsAndServicesLive { background: transparent url(../_img/all_nav_words.jpg) -313px -30px no-repeat; } #mainNav #financingLink { width: 72px; background: transparent url(../_img/all_nav_words.jpg) -422px 0 no-repeat; } #mainNav #financingLink:hover, #mainNav #financingLive { background: transparent url(../_img/all_nav_words.jpg) -422px -30px no-repeat; } #mainNav #contactUsLink { width: 85px; background: transparent url(../_img/all_nav_words.jpg) -494px 0 no-repeat; } #mainNav #contactUsLink:hover, #mainNav #contactUsLive { background: transparent url(../_img/all_nav_words.jpg) -494px -30px no-repeat; } /* mastHead ---------------------------------------------------------------------------------*/ #mastHead { height: 86px; padding-left: 611px; background: #181512 url(../_img/masthead_bg.jpg) 10px 10px no-repeat; } #mastHead-johnson_machinery { height: 86px; padding-left: 611px; background: #181512 url(../_img/masthead_bg.jpg) 10px 10px no-repeat; } #mastHead-divisions { height: 86px; padding-left: 611px; background: #181512 url(../_img/masthead_bg.jpg) no-repeat; } #mastHead-johnson_rental { height: 86px; padding-left: 611px; background: #181512 url(../_img/masthead_rental.jpg) no-repeat; } #mastHead-johnson_power_systems { height: 86px; padding-left: 611px; background: #181512 url(../_img/masthead_power.jpg) 10px 10px no-repeat; } #mastHead-ever-pac { height: 66px; padding-left: 611px; background: #181512 url(../_img/masthead_ever-pac.jpg) no-repeat; } /* navChannel ---------------------------------------------------------------------------------*/ #navChannel { margin-bottom: 1px; height: 30px; background: #292929 url(../_img/nav_channel_bg.jpg) repeat-x; } /* phoneNumber ---------------------------------------------------------------------------------*/ #phoneNumber { float: left; width: 201px; height: 30px; background: #292929 url(../_img/phone_number.jpg) no-repeat; } #phoneNumber-power { float: left; width: 201px; height: 30px; background: #292929 url(../_img/phone_number_power.jpg) no-repeat; } /* searchForm ---------------------------------------------------------------------------------*/ #searchForm { width: 200px; height: 31px; background: #262523 url(../_img/search_bg.jpg) no-repeat; text-align: left; } #searchForm #searchText { width: 145px; margin: 6px 5px 0 10px; border: 1px solid #999; color: #666; background-color: #fff; } #searchForm #submitButton { height: 16px; width: 29px; margin-top: 8px; background: transparent; border: none; } /* subPageLeft ---------------------------------------------------------------------------------*/ #subPageLeft { float: left; width: 209px; } .header-border { border: 2px solid #fff; width: 188px; } #subPageLeft h2 { width: 168px; padding: 7px 10px; text-transform: uppercase; font-size: 130%; color: #181512; background: #ffcc00 url(../_img/orange_gradient.gif) bottom left repeat-x; } #subPageLeft h3 { padding: 10px 0 8px 8px; font-size: 10px; line-height: normal; text-transform: uppercase; } #subPageLeft p { margin: 0 12px 14px 8px; } #subPageLeft .SafePadding { padding: 8px; } #subPageRight { float: left; width: 590px; } /* tripleSector ---------------------------------------------------------------------------------*/ #tripleSector { float: left; width: 590px; background: transparent url(../_img/triple-sector_bg.jpg) 3px 0 no-repeat; } #tripleSector a { color: #009AFE; } #tripleSector a:hover { text-decoration: none; } #tripleSector h3 { font-size: 12px; color: #fff; margin: 10px 0 4px 0; } #tripleSector img { display: block; float: right; margin-bottom: 5px; } #tripleSector .SafePadding { padding-left: 30px; } /* forms ---------------------------------------------------------------------------------*/ div.forms { clear:both; margin:20px; } div.forms label { display:block; float:none; margin:1em 0 0; font-weight:bold; } div.forms input.text { width:300px; } div.forms textarea { width:300px; } div.forms p.error { font-weight:bold; color:red; } /* sIFR -------------------------------------------------------------------------------------------------------------------------------*/ /* These are standard sIFR styles... do not modify */ .sIFR-flash { visibility: visible !important; margin: 0; } .sIFR-replaced { visibility: visible !important; } span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } /* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */ .sIFR-flash + div[adblocktab=true] { display: none !important; } /* You Can modify this as needed, but things can get wacky if you aren't careful.*/ .sIFR-hasFlash #subPageLeft h2 { visibility: hidden; letter-spacing: -9px; font-size: 21px; text-transform: uppercase; } /*.sIFR-hasFlash #subPageLeft h3 { visibility: hidden; letter-spacing: -9px; font-size: 12px; } .sIFR-hasFlash .CompartMent .SafePadding h3 { visibility: hidden; letter-spacing: -9px; font-size: 12px; } .sIFR-hasFlash #column-right #news h3 { visibility: hidden; letter-spacing: -9px; font-size: 12px; }*/ #rowe { cursor: pointer; }