/* FRAMEWORK ________________________________________________________________________*/ .clear { clear: both; } html { background: #FFF url(/sitefiles/18/gfx/bg.gif) 50% 0 repeat; height: 100%; } body { font-family: Arial, "Bitstream Vera Sans", "Lucida Grande", Tahoma, sans-serif; font-size: 62.5%; color: #333; background: url(/sitefiles/18/gfx/wrap-bg.png) 50% -11px repeat-y; min-height: 100%; } #wrap { width: 980px; margin: 0 auto; padding: 0 0 50px; position: relative; } #wrap #top { width: 880px; padding: 0 50px 15px; height: 172px; float: left; clear: both; position: relative; z-index: 10000; background: url(/sitefiles/18/gfx/top-bg.gif) 0 0 repeat-x; } #wrap #top h1 { position: absolute; top: 0; left: 50px; width: 880px; height: 124px; clear: both; background: url(/sitefiles/18/gfx/top-dots.gif) 0 123px no-repeat; } #wrap #top h1 a { display: block; width: 113px; height: 82px; text-indent: -9999px; background: url(/sitefiles/18/gfx/logo.png) 0 0 no-repeat; position: absolute; bottom: 9px; left: 0; clear: both; overflow: hidden; } #wrap #top h1 strong { display: block; font-style: italic; font-size: 3em; font-weight: normal; line-height: 1; text-align: right; color: #FFF; position: absolute; top: .3em; right: 0; clear: both; } #wrap #content, #wrap #footer { width: 880px; float: left; clear: both; padding: 0 50px 25px; position: relative; z-index: 20; overflow: hidden; } #wrap #content #content-top, #wrap #content #content-bottom { width: 880px; float: left; clear: both; padding: 0 0 20px; position: relative; } #wrap #footer .left { width: 400px; float: left; clear: left; } #wrap #footer .right { width: 400px; float: right; clear: right; } .main-col { width: 580px; float: left; clear: left; position: relative; } .side-col { width: 280px; float: right; clear: right; position: relative; } #light-overlay { background: #FFF; opacity: 0.8; *filter: alpha(opacity = 80); width: 980px; position: absolute; left: 0; top: 0; clear: both; z-index: 500; } /* MAIN MENU ________________________________________________________________________*/ #main-menu, #sub-menu { height: 31px; padding: 1px 1px 1px 0; display: block; position: absolute; top: 107px; right: 50px; clear: both; background: url(/sitefiles/18/gfx/main-menu/bg.gif) right top no-repeat; } #main-menu li, #sub-menu li { float: left; display: inline; height: 31px; line-height: 31px; } #main-menu li a, #sub-menu li a { display: block; float: left; padding: 0 20px; color: #FFF; text-transform: uppercase; font-size: 1em; text-decoration: none; background: #233A48 url(/sitefiles/18/gfx/main-menu/item-vertical-dots.gif) 0 1px repeat-y; position: relative; } #main-menu li.active a, #main-menu li a:hover, #sub-menu li.active a, #sub-menu li a:hover { background-color: #FFF; color: #233A48; } /* SUB MENU VARIATIONS ________________________________________________________________________*/ #sub-menu { top: 139px; } #sub-menu li a { background-color: transparent; color: #233A48; } #sub-menu li.active a, #sub-menu li a:hover { height: 30px; border-bottom: 1px solid #233A48; } #sub-menu li span#product-added { display: none; position: absolute; top: 0; right: -34px; clear: both; padding: 31px 34px 0; background: url(/sitefiles/18/gfx/product-added.png) 100% 0 no-repeat; height: 36px; line-height: 36px; } #sub-menu li span#product-added strong { position: relative; left: -16px; } /* BREADCRUMBS ________________________________________________________________________*/ #breadcrumbs { display: block; position: absolute; top: 150px; left: 50px; } #breadcrumbs li { float: left; display: inline; font-size: 1em; padding: 0 6px 0 0; background: url(/sitefiles/18/gfx/breadcrumbs-separator.gif) 100% 80% no-repeat; margin: 0 3px 0 0; line-height: 1; color: #999; } #breadcrumbs li.last { padding: 0; margin: 0; background: none; } #breadcrumbs li.label { background: none; margin: 0; } #breadcrumbs li a { color: #999; text-decoration: none; float: left; display: block; } #breadcrumbs li a:hover { text-decoration: underline; } /* CHILDREN OR SIBLINGS ________________________________________________________________________*/ #sub-or-sib { display: block; /*width: 880px;*/ width: 590px; height: 20px; float: left; clear: both; text-align: center; } #sub-or-sib del { clear: both; text-decoration: none; *display: inline-block; } #sub-or-sib del ul { display: table; padding: 0; margin: 0 auto; list-style: none; white-space: nowrap; } #sub-or-sib del ul li { display: table-cell; *float: left; padding: 0 40px 0 0; } #sub-or-sib del ul li.last { padding: 0; } #sub-or-sib del ul li a { text-decoration: none; font-size: 1.2em; color: #233A48; text-transform: uppercase; font-weight: bold; text-align: center; width: auto; display: block; *float: left; border-bottom: 1px dotted black; } /* CONTACT ALUTEC ________________________________________________________________________*/ #contact-alutec { color: #FFF; line-height: 1.8; width: 220px; position: absolute; left: 185px; top: 52px; clear: both; } #contact-alutec p { margin: 0; width: 90px; float: left; clear: left; } #contact-alutec ul { margin: 0; width: 120px; float: right; clear: right; } #contact-alutec a { color: #FFF; } /* TOP ACTIONS ________________________________________________________________________*/ #actions { position: absolute; top: 82px; right: 50px; clear: both; width: 520px; height: 15px; list-style: none; padding: 0; display: block; } #actions li { float: right; display: block; padding: 0 0 0 25px; height: 15px; line-height: 15px; color: #FFF; } #actions li#logout, #actions li#logged-in { text-transform: uppercase; } #actions li#logged-in { padding: 0 25px; background: url(/sitefiles/18/gfx/logged-in.gif) 100% 50% no-repeat; } #actions li#site-search { background: url(/sitefiles/18/gfx/search-terms.gif) 25px 0 no-repeat; clear: right; } #actions li a { color: #FFF; text-decoration: none; } #actions li a:hover { text-decoration: underline; } #actions li a, #actions li form, #actions li form fieldset { float: left; display: block; } #actions li form input, form#productSearch input { border: none; color: #CCC; font-size: 1em; background: none; float: left; }/*1px dotted #A8ABAD*/ #actions li form input.terms { font-style: italic; padding: 1px 3px 2px; width: 89px; height: 14px; margin: 0 7px 0 0; } form#productSearch { clear: both; padding: 0px 0 30px; } form#productSearch input.terms { border: 1px dotted #a8abad; font-style: italic; margin: 0 7px 0 0; } form#productSearch input.submit { width: 29px; height: 17px; cursor: pointer; border: 1px dotted #a8abad; } #actions li form input.submit { width: 29px; height: 15px; text-align: center; cursor: pointer; padding: 0 0 3px; background: url(/sitefiles/18/gfx/search-submit.gif) 0 0 no-repeat; } /* CART ________________________________________________________________________*/ #products-in-cart-indicator { width: 34px; height: 33px; position: absolute; overflow: hidden; clear: both; right: 16px; bottom: 15px; _bottom: 14px; } #products-in-cart-indicator a { display: block; float: left; clear: both; width: 34px; height: 33px; text-indent: -9999px; position: relative; overflow: hidden; background: url(/sitefiles/18/gfx/products-in-cart-indicator.png) 0 0 no-repeat; } #products-in-cart-indicator a:hover { background-position: 0 -33px; } #cart { width: 900px; position: absolute; top: 172px; right: 40px; clear: both; overflow: hidden; z-index: 1000; } #cart #cart-lines { width: 278px; float: right; clear: right; padding: 50px 1px 0; background: #FFF url(/sitefiles/18/gfx/cart-lines-bg-y.png) 50% 0 repeat-y; border-right: 10px solid #FFF; border-left: 10px solid #FFF; border-bottom: 10px solid #FFF; } #cart #cart-lines h2 { color: #233A48; font-weight: bold; line-height: 1; font-size: 1.2em; padding: 0 11px .8em; } #cart #cart-lines ul { width: 278px; float: left; clear: both; list-style: none; position: relative; } #cart #cart-lines ul li { width: 258px; float: left; clear: both; border-bottom: 1px solid #FFF; background: #E1E4E6; padding: .5em 10px .75em; } #cart #cart-lines ul li.even { background: #D2D6D9; } #cart #cart-lines ul li.last { border: none; } #cart #cart-lines ul li.summary { background: #233A48 url(/sitefiles/18/gfx/cart-lines-bg-x.png) 0 0 repeat-x; color: #FFF; text-align: right; border: none; font-size: 1.2em; line-height: 1.5; padding: .75em 10px; width: 260px; position: relative; left: -1px; } #cart #cart-lines ul li.summary em { font-style: italic; } #cart #cart-lines ul li h3 { width: 260px; float: left; clear: both; line-height: 1.5; padding: 0 0 .5em; } #cart #cart-lines ul li h3 a.product { color: #333; font-size: 1.2em; text-decoration: none; float: left; clear: left; } #cart #cart-lines ul li h3 a.remove { color: #333; font-size: 1em; text-decoration: none; font-style: italic; float: right; clear: right; } #cart #cart-lines ul li h3 a:hover { text-decoration: underline; } #cart #cart-lines ul li p.count { font-size: 1em; float: left; clear: left; line-height: 1.8; } #cart #cart-lines ul li p.price { font-size: 1.2em; float: right; clear: right; line-height: 1.5; } #cart #cart-controls { height: 54px; list-style: none; float: right; clear: left; padding: 72px 0 20px 10px; background: #FFF; } #cart #cart-controls li { float: left; display: block; background: url(/sitefiles/18/gfx/big-cart-button-dots.png) -249px 0 no-repeat; padding: 0 0 0 1px; border-left: 10px solid #FFF; } #cart #cart-controls li span { display: block; float: left; height: 54px; background: url(/sitefiles/18/gfx/big-cart-button-dots.png) 100% 0 no-repeat; padding: 0 1px 0 0; } #cart #cart-controls li span a { display: block; float: left; height: 51px; line-height: 51px; color: #333; text-decoration: none; font-size: 2em; text-transform: uppercase; padding: 1px 20px; position: relative; overflow: hidden; } #cart #cart-controls li span a:hover { border-bottom: 1px solid #233A42; padding: 1px 20px 0; } /* CHECKOUT ________________________________________________________________________*/ #checkout { width: 287px; float: left; clear: left; background: #233A48 url(/sitefiles/18/gfx/checkout-lines-bg-y.gif) 0 0 repeat-y; color: #FFF; padding: 20px 21px; margin: 0 0 50px; position: relative; } #checkout h2 { text-transform: uppercase; font-size: 1.2em; padding: 0 0 2em; font-weight: normal; } #checkout legend { display: none; } #checkout ul { width: 287px; float: left; clear: both; list-style: none; line-height: 1; } #checkout ul li { width: 287px; float: left; clear: both; padding: 0 0 .5em; position: relative; overflow: hidden; } #checkout ul li label { text-transform: uppercase; cursor: pointer; font-size: 1.2em; padding: 0 0 .25em; display: block; } #checkout ul li input { width: 275px; height: 14px; padding: 5px 6px 4px; color: #333; background: url(/sitefiles/18/gfx/checkout-input.gif) 0 0 no-repeat; border: none; font-size: 1.1em; margin: 0 0 5px; } #checkout ul li input.number { font-family: "Courier New", Courier, monospace; letter-spacing: 0.15em; font-weight: bold; } #checkout ul li.radio input { float: left; clear: left; padding: 0; background: none; height: auto; width: auto; margin: -1px 10px 0 0; *margin: -4px 10px 0 0; font-size: medium; } #checkout ul li.radio label { display: inline; float: left; } #checkout ul li .txa-wrap { width: 285px; float: left; clear: both; padding: 0 1px; position: relative; overflow: hidden; background: url(/sitefiles/18/gfx/txa-wrap-y.gif) 0 0 repeat-y; margin: 0 0 15px; } #checkout ul li .txa-wrap textarea { width: 265px; height: 79px; padding: 10px; margin: 1px 0; *margin: 0; border: none; line-height: 1.5; font-family: Arial, "Bitstream Vera Sans", "Lucida Grande", Tahoma, sans-serif; font-size: 1.1em; } #checkout ul li .txa-wrap .txa-top, #checkout ul li .txa-wrap .txa-bottom { width: 287px; height: 1px; position: absolute; overflow: hidden; left: 0; clear: both; background: url(/sitefiles/18/gfx/checkout-input.gif) 0 0 no-repeat; } #checkout ul li .txa-wrap .txa-top { top: 0; } #checkout ul li .txa-wrap .txa-bottom { bottom: 0; } #checkout ul li.formcontrols { padding: 0; } #checkout ul li.formcontrols input { height: 23px; width: 125px; cursor: pointer; float: right; text-align: center; background-image: url(/sitefiles/18/gfx/checkout-input-125.gif); font-size: 1.2em; text-transform: uppercase; margin: 0; padding: 1px 0 3px; *padding: 2px 0; } #checkout ul li#checkout-disclaimer { line-height: 1.5; font-size: 1.2em; padding: 0 0 2em; } #checkout ul li#zip-li { width: 101px; clear: left; } #checkout ul li#zip-li input { width: 89px; background-image: url(/sitefiles/18/gfx/checkout-input-101.gif); } #checkout ul li#city-li { width: 165px; *float: none; _float: left; clear: none; padding: 0 0 .5em 21px; } #checkout ul li#city-li input { width: 153px; background-image: url(/sitefiles/18/gfx/checkout-input-165.gif); } #checkout .top-dots, #checkout .bottom-dots { position: absolute; left: 0; width: 329px; height: 1px; overflow: hidden; font-size: 0; background: #233A48 url(/sitefiles/18/gfx/cart-lines-bg-x.png) 0 0 repeat-x; } #checkout .top-dots { width: 880px; top: 0; } #checkout .bottom-dots { bottom: 0; _bottom: -1px; } /* SITEMAP ________________________________________________________________________*/ #sitemap { width: 860px; padding: 0 0 0 20px; float: left; clear: both; font-size: 1.2em; line-height: 1.6; list-style-type: square; } #sitemap ul { padding: 0 0 0 20px; list-style-type: disc; } #sitemap ul ul { list-style-type: circle; } #sitemap a { color: #233A48; text-decoration: none; display: block; } #sitemap a:hover { text-decoration: underline; } /* CART ________________________________________________________________________*/ #counter { width: 550px; float: right; clear: right; padding: 50px 1px 0 0; background: #FFF url(/sitefiles/18/gfx/counter-lines-bg-y.gif) -1px 0 repeat-y; margin: 0 0 50px; } #counter h2 { width: 520px; padding: 0 15px .75em; color: #233A48; font-weight: bold; font-size: 1.3em; } #counter ul#empty-alternatives { font-size: 1.1em; line-height: 1.5; padding: 0 0 0 4em; list-style-type: square; } #counter ul#empty-alternatives li a { color: #E9241A; text-decoration: none; font-weight: bold; } #counter ul#empty-alternatives li a:hover { text-decoration: underline; } #counter table { width: 550px; float: left; clear: both; border-collapse: collapse; } #counter table tbody tr td { background: #E1E4E6; border-bottom: 1px solid #FFF; padding: 5px; line-height: 1; vertical-align: top; height: 51px; *height: auto; } #counter table tbody tr.even td { background: #D2D6D9; } #counter table tbody tr.last td { border: none; height: 50px; *height: auto; } #counter table tbody tr td.image { width: 60px; padding: 6px 5px 5px; background: #E1E4E6 url(/sitefiles/18/gfx/cart-image-bg.gif) 5px 6px no-repeat; vertical-align: middle; text-align: center; } #counter table tbody tr.even td.image { background-color: #D2D6D9; text-align: center; } #counter table tbody tr td.image a { display: block; } #counter table tbody tr td.name { width: 130px; vertical-align: top; font-size: 1.2em; padding-top: 10px; } #counter table tbody tr td.name a { color: #333; text-decoration: none; padding: 5px 0 0; } #counter table tbody tr td.name a:hover { text-decoration: underline; } #counter table tbody tr td.update { width: 138px; padding: 8px 5px 5px; } #counter table tbody tr td.update label, #counter table tbody tr td.update input { float: left; margin: 0 5px 0 0; } #counter table tbody tr td.update label { cursor: pointer; line-height: 15px; font-size: 1.1em; } #counter table tbody tr td.update input.qty { width: 19px; height: 14px; padding: 1px 3px 0 3px; background: url(/sitefiles/18/gfx/input-qty.gif) 0 0 no-repeat; font-size: 1em; color: #333; text-align: right; border: none; } #counter table tbody tr td.update input.update { text-transform: uppercase; width: 69px; height: 15px; text-align: center; color: #333; background: url(/sitefiles/18/gfx/input-update.gif) 0 0 no-repeat; padding: 0 0 2px; *padding: 1px 0; cursor: pointer; border: none; font-size: 1em; margin: 0; } #counter table tbody tr td.price { width: 167px; padding: 10px 5px 5px 0; } #counter table tbody tr td.price * { display: block; padding: 0 0 .75em; font-size: 1.2em; } #counter table tbody tr td.price strong { font-weight: normal; } #counter table tbody tr td.price a { margin: 0 5px 0 0; font-size: 1em; text-transform: uppercase; text-align: center; color: #333; width: 47px; height: 13px; padding: 1px; line-height: 13px; text-decoration: none; background: url(/sitefiles/18/gfx/a-delete.gif) 0 0 no-repeat; float: right; } #counter table tbody tr td.price a:hover { color: #E9241A; } #counter #counter-summary { width: 530px; float: left; clear: both; position: relative; overflow: hidden; background: #233A48 url(/sitefiles/18/gfx/cart-lines-bg-x.png) 0 0 repeat-x; color: #FFF; font-size: 1.2em; line-height: 1.5; padding: .5em 11px .5em 10px; text-align: right; } /* PRODUCT GROUP INFORMATION ________________________________________________________________________*/ #prod-group-info { width: 880px; float: left; clear: both; position: relative; overflow: hidden; /*padding: 0 0 40px;*/ } #prod-group-info .logo { width: 600px; position: relative; float: left; clear: both; padding: 0 0 0 280px; background: 0 50% no-repeat; } #prod-group-info .logo .text { width: 580px; padding: 20px 0 20px 20px; float: left; clear: both; position: relative; background: url(/sitefiles/18/gfx/prod-group-info-top.png) 0 0 no-repeat; font-size: 1.1em; } #prod-group-info .logo .text h2 { text-transform: uppercase; font-weight: normal; padding: 0 0 1.5em; line-height: 1; } #prod-group-info .logo .text p { line-height: 1.5; margin: 0; } #prod-group-info .logo .text .bottom { position: absolute; bottom: 0; left: 2px; clear: both; width: 28px; height: 2px; overflow: hidden; background: url(/sitefiles/18/gfx/prod-group-info-bottom.gif) 0 0 no-repeat; } /* BUYERS GUIDE ________________________________________________________________________*/ #buyers-guide { width: 280px; height: 300px; position: relative; float: right; clear: both; z-index: 10; } #buyers-guide h3 { color: #000; font-size: 1em; text-align: center; width: 280px; line-height: 1; position: absolute; top: 0; right: 0; clear: both; text-transform: uppercase; padding: 0 0 5px; background: #FFF; } #buyers-guide-frame { position: absolute; top: 16px; right: 0; clear: both; width: 274px; height: 278px; border: 3px solid #CCC; background: #FFF; z-index: 1000; } #buyers-guide-frame a#toggle-buyers-guide { display: block; width: 274px; height: 278px; float: right; clear: right; background: url(/sitefiles/18/gfx/one-or-the-other.png) 50% no-repeat; position: relative; overflow: hidden; text-indent: -9999px; } #buyers-guide-frame a#toggle-buyers-guide span { display: none; width: 50px; height: 50px; position: absolute; top: 116px; right: 112px; clear: both; background: url(/sitefiles/18/gfx/close-buyers-guide.png) 0 0 no-repeat; cursor: pointer; } #buyers-guide .expanded a#toggle-buyers-guide span { display: block; } /* dev kjøpsguide 2 */ div.buyers-guide-btns { position: absolute; right: 0; top: 0; width: 274px; height: 280px; border-left: 3px solid #CCCCCC; overflow: hidden; z-index: 5; } div#buyers-guide-choices { height: 224px; width: 818px; /* width: 218px;*/ padding: 28px; position: absolute; left: 0; top: 0; z-index: 1; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-seperator { width: 1px; float: left; height: 224px; border-left: 1px dotted black; margin: 0 11px; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-product { width: 260px; float: left; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-product h3 { position: relative; text-align: left; font-size: 20px; color: #233a48; padding: 5px 0; width: auto; text-transform: none; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-product h4 { font-size: 12px; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-product p { font-size: 12px; line-height: 1.4; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-product p strong { font-weight: bold; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-product div.bottom { margin: 10px 0 0; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-product a { display: block; line-height: 35px; height: 35px; width: 214px; background: url(/sitefiles/18/gfx/buyers-guide/btn.png) no-repeat; color: #000000; text-align: center; text-decoration: none; font-size: 12px; position: absolute; bottom: 30px; } div#buyers-guide-choices div.buyers-guide-choice div.buyers-guide-product a:hover { background-position: 0 -35px; color: #ffffff; } div.buyers-guide-btns a#bgOpenClose { width: 25px; height: 25px; background: url(/sitefiles/18/gfx/buyers-guide/qdot.png) no-repeat; _background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sitefiles/18/gfx/buyers-guide/qdot.png', sizingMethod='crop') display: block; text-indent: -9999px; position: absolute; top: 127px; left: 126px; } div.buyers-guide-btns a#bgClose { width: 13px; height: 12px; background: url(/sitefiles/18/gfx/buyers-guide/closebtn.png) no-repeat; display: block; text-indent: -9999px; position: absolute; top: 10px; left: 250px; } div.buyers-guide-btns a#topleft { display: block; float: left; clear: left; width: 96px; height: 53px; text-align: right; background: url(/sitefiles/18/gfx/buyers-guide/topleft.png) no-repeat scroll 0 0; position: absolute; top: 10px; left: 8px; padding: 64px 11px 12px 22px; color: #000000; line-height: 1.4; text-decoration: none; font-size: 12px; } div.buyers-guide-btns a#topleft:hover, div.buyers-guide-btns a#topleft.active { background-position: 0 -129px; color: #ffffff; } div.buyers-guide-btns a#topright { display: block; float: right; clear: right; width: 106px; height: 53px; text-align: left; background: url(/sitefiles/18/gfx/buyers-guide/topright.png) no-repeat scroll 0 0; position: absolute; top: 10px; left: 138px; padding: 54px 22px 22px 11px; color: #000000; line-height: 1.4; text-decoration: none; font-size: 12px; } div.buyers-guide-btns a#topright:hover, div.buyers-guide-btns a#topright.active { background-position: 0 -129px; color: #ffffff; } div.buyers-guide-btns a#bottomleft { display: block; float: left; clear: left; width: 97px; height: 98px; text-align: right; background: url(/sitefiles/18/gfx/buyers-guide/bottomleft.png) no-repeat scroll 0 0; position: absolute; top: 140px; left: 8px; padding: 8px 9px 23px 23px; color: #000000; line-height: 1.4; text-decoration: none; font-size: 12px; } div.buyers-guide-btns a#bottomleft:hover, div.buyers-guide-btns a#bottomleft.active { background-position: 0 -129px; color: #ffffff; } div.buyers-guide-btns a#bottomright { display: block; float: right; clear: right; width: 87px; height: 102px; text-align: left; background: url(/sitefiles/18/gfx/buyers-guide/bottomright.png) no-repeat scroll 0 0; position: absolute; top: 140px; left: 138px; padding: 8px 32px 19px 10px; color: #000000; line-height: 1.4; text-decoration: none; font-size: 12px; } div.buyers-guide-btns a#bottomright:hover, div.buyers-guide-btns a#bottomright.active { background-position: 0 -129px; color: #ffffff; } /***** END *******/ /* FRONT PRODUCT GROUP BOXES, THREE IN A ROW ________________________________________________________________________*/ #front-product-groups { width: 580px; float: left; clear: both; position: relative; overflow: hidden; z-index: 5; } #front-product-groups li { width: 180px; float: left; display: block; margin: 0 20px 0 0; padding: 16px 0 0; position: relative; overflow: hidden; } #front-product-groups li.last { margin: 0; } #front-product-groups li h3 { color: #000; font-size: 1em; text-align: center; width: 180px; line-height: 1; position: absolute; top: 0; left: 0; clear: both; font-weight: normal; } #front-product-groups li p { width: 180px; float: left; clear: both; } #front-product-groups li p a { text-decoration: none; display: block; float: left; clear: both; width: 180px; background: #233A48 url(/sitefiles/18/gfx/product-group-hover.png) -180px 0 no-repeat; padding: 64px 0 0; position: relative; } #front-product-groups li p a:hover { background-position: 5px 5px; } #front-product-groups li p a span.title { display: block; position: absolute; clear: both; overflow: hidden; text-indent: -9999px; background: 0 0 no-repeat; } #front-product-groups li p a img { float: left; } /* PRODUCTS SLIDER ________________________________________________________________________*/ .products-slider { width: 880px; height: 268px; padding: 20px 40px 0; float: left; clear: both; position: relative; left: -40px; overflow: hidden; margin: 0 0 40px; } .products-slider .products-navigation { position: absolute; top: 0; left: 40px; clear: both; padding: 0 15px; } .products-slider .products-navigation li { float: left; display: inline; font-size: 1.1em; padding: 0 .5em 0 0; font-weight: bold; } div#navigationContainer a#leftArrow { display: block; background: url(/sitefiles/18/gfx/leftArrowe.png) no-repeat; width:7px; height: 10px; float: left; margin-right: 15px; } div#navigationContainer a#rightArrow { display: block; background: url(/sitefiles/18/gfx/rightArrow.png) no-repeat; width:7px; height: 10px; float: left; } div#navigationContainer, .products-slider .products-navigation { height: 20px; width: 450px; } /*div.products-slider.images div#navigationContainer,*/ ul#products-navigation-images.products-navigation { height: 20px; width: auto; } ul#products-navigation-packages.products-navigation { width: auto; } ul#products-navigation-images.products-navigation { position: absolute; left: 0; top: 0; padding: 0; } div#navigationContainer div#navigationHolder { overflow: hidden; width: 535px; height: 20px; position: relative; float: left; margin-right: 10px; } div#navigationContainer { height: 20px; width: 900px; position: absolute; top: 0; left: 40px; } div#navigationContainer ul { /*margin: 0 auto; overflow: hidden; float: left; position: relative;*/ display: block; } .products-slider .products-navigation li a { color: #808080; text-decoration: none; } .products-slider .products-navigation li.active a, .products-slider .products-navigation li a:hover { color: #333; } .products-slider .products-navigation li a .bracket { display: none; } .products-slider .products-navigation li.active a .bracket { display: inline; } .products-slider .slide-nav { display: block; width: 40px; height: 268px; overflow: hidden; position: absolute; bottom: 0; clear: both; text-indent: -9999px; } .products-slider .previous-product { background: #FFF url(/sitefiles/18/gfx/previous-product.gif) -40px 50% no-repeat; left: 0; } .products-slider .previous-product:hover { background-position: 0 50%; } .products-slider .next-product { background: #FFF url(/sitefiles/18/gfx/next-product.gif) 8px 50% no-repeat; right: 0; } .products-slider .next-product:hover { background-position: -32px 50%; } .products-slider .slider { width: 880px; height: 268px; position: absolute; top: 0; left: 0; clear: both; overflow: hidden; margin: 20px 0 0 40px; } .products-slider .slider .product { width: 396px; height: 226px; float: left; padding: 21px 21px 21px 463px; position: relative; top: 0; } .products-slider .slider .product img { position: absolute; top: 0; left: 0; clear: both; } .products-slider .slider .product h3 { text-transform: uppercase; line-height: 1; font-size: 1.2em; padding: 0 0 1em; } .products-slider .slider .product p { font-size: 1.1em; line-height: 1.5; margin: 0 0 1.5em; } .products-slider .slider .product .contact, div#content-top div.contact, div.contact { width: 301px; height: 33px; text-transform: uppercase; position: absolute; bottom: 21px; right: 67px; clear: both; background: url(/sitefiles/18/gfx/contact-link2.gif) 0 0 no-repeat; text-align: center; font-size: 1.1em; overflow: hidden; } div#content-top div.contact, div.contact { position: relative; float: right; margin: 30px 0 0; right: 0; } .products-slider .slider .product .contact a, div#content-top div.contact a.aContactLink, div.contact a.aContactLink { display: block; width: 301px; height: 33px; line-height: 33px; position: relative; top: 0; left: 0; clear: both; color: #FFF; text-decoration: none; float: left; } .products-slider .slider .product .separator { position: absolute; top: 0; left: 442px; width: 1px; height: 268px; clear: both; background: url(/sitefiles/18/gfx/product-slide-separator.gif) 0 0 no-repeat; overflow: hidden; } .products-slider .frame-top, .products-slider .frame-bottom { width: 880px; height: 1px; position: absolute; overflow: hidden; bottom: 267px; left: 40px; clear: both; background: url(/sitefiles/18/gfx/dots-horizontal.gif) 0 0 repeat-x; } .products-slider .frame-bottom { bottom: 0; background-position: 1px 0; } .products-slider .frame-right, .products-slider .frame-left { width: 1px; height: 268px; position: absolute; overflow: hidden; bottom: 0; right: 40px; clear: both; background: url(/sitefiles/18/gfx/dots-vertical.gif) 0 1px repeat-y; } .products-slider .frame-left { right: 919px; background-position: 0 0; } /* PRODUCTS SLIDER - PACKAGE DEAL VARIATIONS ________________________________________________________________________*/ .package-deal { padding: 60px 40px 0; } .package-deal .slider { margin: 60px 0 0 40px; } .package-deal .slider .product { padding: 21px; width: 838px; } .package-deal .slider .product .left { width: 450px; float: left; clear: left; } .package-deal .slider .product .left h3 { text-transform: none; font-size: 3em; color: #D30026; font-weight: bold; padding: 0; width: 450px; float: left; clear: both; } .package-deal .slider .product .left img { top: auto; bottom: 11px; left: 21px; } .package-deal .slider .product .sales-arguments { width: 370px; height: 226px; float: right; clear: right; overflow: hidden; } .package-deal .slider .product .sales-arguments p { text-align: center; padding: .5em 0 1.5em; line-height: 1; } .package-deal .slider .product .sales-arguments.facts p { text-align: center; padding: .5em 0 1.5em; line-height: 1; } .package-deal .slider .product .sales-arguments p em { display: block; color: #000; font-style: italic; font-weight: bold; font-size: 1.4em; padding: 0 0 .5em; } .package-deal .slider .product .sales-arguments.facts p em { display: block; color: #000; font-style: italic; font-weight: bold; font-size: 1em; padding: 0 0 .5em; } .package-deal .slider .product .sales-arguments p strong { display: block; color: #D30026; /*font-size: 3em;*/ font-size: 2em; font-weight: bold; } .package-deal .slider .product .sales-arguments.facts p strong { /*font-size: 3em;*/ display: inline; color: #000; font-size: 1em; font-weight: bold; } .package-deal .products-navigation { padding: 0; height: 33px; } .package-deal .products-navigation li { float: left; display: inline; height: 31px; line-height: 31px; padding: 1px; background: url(/sitefiles/18/gfx/main-menu/bg.gif) 100% 0 no-repeat; margin: 0 10px 0 0; position: relative; } .package-deal .products-navigation li .left { display: block; width: 1px; height: 31px; position: absolute; top: 1px; left: 0; background: url(/sitefiles/18/gfx/dots-vertical.gif) 0 0 repeat-y; } .package-deal .products-navigation li a { display: block; float: left; padding: 0 20px; text-transform: uppercase; font-size: 1em; text-decoration: none; color: #000; } .package-deal .products-navigation li.active a, .package-deal .products-navigation li a:hover { height: 30px; border-bottom: 1px solid #233A48; color: #000; } /* PRODUCTS SLIDER - THREES VARIATIONS ________________________________________________________________________*/ .threes, .threes .slider { height: 330px; } .threes .slider .three { width: 880px; float: left; background: url(/sitefiles/18/gfx/three-dots-y.gif) 0 0 repeat-y; } .threes .slider .three .product { float: left; width: 258px; margin: 0 20px 0 0; padding: 11px; height: 308px; } .threes .slider .three .right, .threes .slider .three .last-2, .threes .slider .three .last-1, .threes .slider .three .last-0 { margin: 0; } .threes .slider .three .last-2 { border-right: 600px solid #FFF; } .threes .slider .three .last-1 { border-right: 300px solid #FFF; } .threes .slider .three .product .frame-top, .threes .slider .three .product .frame-bottom { background-image: url(/sitefiles/18/gfx/three-dots-x.gif); width: 280px; left: 0; } .threes .slider .three .product .frame-top { bottom: auto; top: 0; } .threes .slider .three .product .top { width: 258px; height: 145px; float: left; clear: both; margin: 0 0 20px; } .threes .slider .three .product .bottom { width: 258px; float: left; clear: both; } .threes .slider .three .product h3 { font-size: 1.1em; text-transform: none; } .threes .slider .three .product h3 strong { font-weight: bold; } .threes .slider .three .product .left { width: 100px; height: 270px; float: left; clear: left; } .threes .slider .three .product .right { width: 148px; float: right; clear: right; } .threes .slider .three .product .img { position: relative; } .threes .slider .three .product .img img { position: static; display: block; margin: 0 auto; } .threes .slider .three .product a.three-dee { display: block; width: 125px; position: absolute; left: 0; bottom: 0; clear: both; font-size: .9em; color: #808080; font-style: italic; line-height: 2; text-decoration: none; cursor: pointer; } .threes .slider .three .product .top a.three-dee { width: 258px; } .threes .slider .three .product a.three-dee strong { font-size: 1.222em; font-weight: bold; color: #000; } .threes .slider .three .product .text { } .threes .slider .three .product .bottom p { width: 100px; float: left; clear: left; } .threes .slider .three .product .right p { width: 148px; float: left; clear: left; } .threes .slider .three .product .bottom form { width: 148px; float: right; clear: right; } .threes .slider .three .product .right form { width: 148px; float: left; clear: both; } .threes .slider .three .product .text form ul { list-style: none; font-size: 1.1em; line-height: 1.5; width: 148px; float: left; clear: both; } .threes .slider .three .product .text form ul li { width: 148px; float: left; clear: both; } .threes .slider .three .product .text form ul li.qty { display: block; position: absolute; _position: static; bottom: 27px; right: 20px; width: 100px; height: 15px; line-height: 15px; float: none; clear: both; } .threes .slider .three .product .text form ul li.qty label { float: left; padding: 0 10px 0 0; cursor: pointer; } .threes .slider .three .product .text form ul li.qty input { width: 19px; height: 14px; padding: 1px 3px 0 3px; float: left; background: url(/sitefiles/18/gfx/input-qty.gif) 0 0 no-repeat; font-size: 1em; color: #000; text-align: right; border: none; } .threes .slider .three .product .text form ul li.buy { position: absolute; bottom: 0; right: 0; width: 174px; height: 18px; line-height: 18px; float: none; } .threes .slider .three .product .text form ul li.buy input { text-transform: uppercase; width: 154px; height: 18px; text-align: center; color: #FFF; background: url(/sitefiles/18/gfx/three-add-to-cart.gif) 0 0 no-repeat; padding: 0 0 2px; cursor: pointer; border: none; font-size: 1em; float: left; margin: 0; letter-spacing: -.025em; } .threes .slider .three .product .text form ul li.buy span.added-to-cart-indicator { display: block; float: left; width: 20px; height: 18px; background: url(/sitefiles/18/gfx/three-added-to-cart-indicator.gif) 0 0 no-repeat; position: relative; overflow: hidden; text-indent: -9999px; cursor: help; } .threes .slider .three .product .text form ul li.buy span.in-cart { background-position: 0 -18px; } .threes .slider .three .product .text em.not-logged-in { color: #808080; font-style: italic; } .threes .previous-product, .threes .next-product { height: 330px; } /* PRODUCTS SLIDER - IMAGE GALLERY VARIATIONS ________________________________________________________________________*/ .images { width: 580px; height: 340px; left: -50px; border-right: 160px solid #FFF; border-left: 160px solid #FFF; } .images .slider { height: 340px; } .images .slider .image { float: left; width: 580px; margin: 0; padding: 0; height: 340px; } .images .slider .image img { float: left; } .images .frame-top, .images .frame-bottom { width: 580px; bottom: 339px; } .images .frame-bottom { bottom: 0; } .images .frame-right, .images .frame-left { height: 340px; } .images .frame-left { right: 619px; } .images .slide-nav { height: 340px; } /* JAMAX SEARCH ________________________________________________________________________*/ #jamax-search { width: 880px; float: left; clear: both; } #jamax-search h2 { width: 880px; float: left; clear: both; font-size: 1.1em; color: #333; font-weight: normal; text-transform: uppercase; background: url(/sitefiles/18/gfx/dots-horizontal.gif) 0 90% repeat-x; line-height: 1; margin: 0 0 1.5em; } #jamax-search h2 span { display: block; float: left; background: #FFF; } #jamax-search form { width: 880px; float: left; clear: both; padding: 0 0 10px; } #jamax-search form input.text { width: 111px; height: 15px; padding: 4px 5px 0; float: left; margin: 0 10px 0 0; background: url(/sitefiles/18/gfx/jamax-search-text.gif) 0 0 no-repeat; font-size: 1.1em; color: #000; border: none; } #jamax-search form input.submit { text-transform: uppercase; width: 43px; height: 19px; text-align: center; color: #000; background: url(/sitefiles/18/gfx/jamax-search-submit.gif) 0 0 no-repeat; padding: 1px 0 2px; cursor: pointer; border: none; font-size: 1.1em; float: left; margin: 0 10px 0 0; } #jamax-search form a { display: block; float: left; text-transform: uppercase; width: 115px; height: 17px; padding: 1px; text-align: center; color: #FFF; text-decoration: none; line-height: 17px; font-size: 1.1em; background: url(/sitefiles/18/gfx/to-the-store.gif) 0 0 no-repeat; } #jamax-search form a:hover { font-weight: bold; } #jamax-subcats { width: 880px; height: 33px; float: left; clear: both; position: relative; overflow: hidden; padding: 0 0 15px; } #jamax-subcats li { float: left; display: inline; height: 31px; line-height: 31px; padding: 1px; background: url(/sitefiles/18/gfx/main-menu/bg.gif) 100% 0 no-repeat; margin: 0 10px 0 0; position: relative; } #jamax-subcats li .left { display: block; width: 1px; height: 31px; position: absolute; top: 1px; left: 0; background: url(/sitefiles/18/gfx/dots-vertical.gif) 0 0 repeat-y; } #jamax-subcats li a { display: block; float: left; padding: 0 20px; font-size: 1.1em; text-decoration: none; color: #000; } #jamax-subcats li.active a, #jamax-subcats li a:hover { height: 30px; border-bottom: 1px solid #233A48; color: #000; } /* DOCUMENTATION FILES ________________________________________________________________________*/ .documentation-files { padding: 0 0 25px; } .documentation-files, .documentation-files ul { width: 880px; float: left; clear: both; } .documentation-files h2 { width: 880px; float: left; clear: both; font-size: 1.1em; color: #333; font-weight: normal; text-transform: uppercase; background: url(/sitefiles/18/gfx/dots-horizontal.gif) 0 90% repeat-x; line-height: 1; margin: 0 0 2em; } .documentation-files h2 span { display: block; float: left; background: #FFF; } .documentation-files ul li { float: left; display: block; width: 205px; padding: 0 20px .75em 0; line-height: 16px; font-size: 1.1em; } .documentation-files ul li.clear { float: none; clear: both; width: 880px; padding: 0; overflow: hidden; height: 0; font-size: 0; } .documentation-files ul li.right { padding: 0 0 .75em; } .documentation-files ul li a { float: left; display: block; width: 181px; padding: 0 0 0 24px; color: #333; text-decoration: none; background: url(/sitefiles/18/gfx/doc-formats/doc.png) 0 0 no-repeat; } .documentation-files ul li a:hover { text-decoration: underline; } .documentation-files ul li.word a { background-image: url(/sitefiles/18/gfx/doc-formats/word.png); } .documentation-files ul li.acrobat a { background-image: url(/sitefiles/18/gfx/doc-formats/acrobat.png); } .documentation-files ul li.excel a { background-image: url(/sitefiles/18/gfx/doc-formats/excel.png); } .documentation-files ul li.powerpoint a { background-image: url(/sitefiles/18/gfx/doc-formats/powerpoint.png); } .documentation-files ul li.link a { background-image: url(/sitefiles/18/gfx/doc-formats/link.png); } /* FRONT PAGE ENTRY POINTS ________________________________________________________________________*/ #entry-points { width: 580px; height: 385px; float: left; clear: both; position: relative; overflow: hidden; } #entry-points h2 { position: absolute; top: 0; left: 0; clear: both; line-height: 1; font-size: 1.2em; color: #000; font-weight: bold; text-transform: uppercase; } #entry-points .top { width: 580px; height: 300px; position: absolute; top: 21px; left: 0; clear: both; } #entry-points .top #entry-pics { width: 360px; height: 300px; float: left; clear: left; position: relative; overflow: hidden; } #entry-points .top #entry-pics a { display: block; width: 360px; height: 300px; position: absolute; top: 0; left: 0; clear: both; } #entry-points .top #entry-pics a img { float: left; } #entry-points .top #entry-pics .dots { width: 360px; height: 1px; position: absolute; bottom: 0; left: 0; overflow: hidden; display: block; background: url(/sitefiles/18/gfx/dots-horizontal-white.gif) 0 0 repeat-x; z-index: 2; } #entry-points .top #entry-menu { list-style: none; width: 220px; float: right; clear: right; position: relative; overflow: hidden; height: 300px; } #entry-points .top #entry-menu li { width: 220px; /*height: 52px;*/ display: block; float: left; clear: both; /*position: relative;*/ overflow: hidden; color: #000; padding: 0 0 10px; background: #919DA4 url(/sitefiles/18/gfx/dots-horizontal-white.gif) 0 61px repeat-x; } #entry-points .top #entry-menu li.active { /*height: 104px;*/ background: #243B49 url(/sitefiles/18/gfx/dots-horizontal-white.gif) 0 113px repeat-x; color: #FFF; } #entry-points .top #entry-menu li h3 { text-transform: uppercase; font-size: 1.1em; line-height: 1; padding: 11px 15px 0; background: url(/sitefiles/18/gfx/dots-horizontal-white.gif) 1px 0 repeat-x; /*position: absolute;*/ top: 0; left: 0; clear: both; width: 190px; height: 51px; } #entry-points .top #entry-menu li p { font-size: 1.1em; line-height: 1.3; /*position: relative;*/ clear: both; overflow: hidden; height: 65px; padding: 26px 15px 0; } #entry-points .top #entry-menu li.active p { line-height: 1.75; height: auto; padding: 28px 15px 0; } #entry-points .top #entry-menu li.active p br { display: inline; } #entry-points .top #entry-menu li p strong { font-weight: bold; } #entry-points .top #entry-menu li p em { font-style: italic; } #entry-points .top .menu-dots { background: url(/sitefiles/18/gfx/dots-vertical-white.gif) 0 1px repeat-y; width: 1px; height: 300px; position: absolute; top: 0; right: 0; clear: both; overflow: hidden; } #entry-points .top .menu-dots-left { right: 219px; } #entry-points .bottom { width: 580px; height: 64px; position: absolute; bottom: 0; left: 0; clear: both; } #entry-points .bottom a.bottom-logo { display: block; width: 180px; height: 64px; float: left; clear: left; position: relative; overflow: hidden; background: #233A48 url(/sitefiles/18/gfx/product-group-hover.png) -180px 0 no-repeat; } #entry-points .bottom a.bottom-logo:hover { background-position: 5px 5px; } #entry-points .bottom a.bottom-logo span { display: block; position: absolute; clear: both; overflow: hidden; text-indent: -9999px; background: 0 0 no-repeat; } #entry-points .bottom .inner { padding: 0 20px; width: 360px; height: 64px; position: relative; overflow: hidden; background: #233A48 url(/sitefiles/18/gfx/dots-vertical-white.gif) 0 1px repeat-y; float: right; clear: right; } #entry-points .bottom .inner p { color: #FFF; font-size: 1em; line-height: 1.75; text-transform: uppercase; margin: .5em 0; } /* FRONT PAGE ENTRY POINTS ________________________________________________________________________*/ #production-steps, #production-steps ul { width: 880px; float: left; clear: both; } #production-steps h2 { clear: both; line-height: 1; font-size: 1.2em; color: #000; font-weight: bold; text-transform: uppercase; padding: 0 0 .75em; } #production-steps ul li { width: 270px; float: left; margin: 0 35px 35px 0; } #production-steps ul li.left { clear: left; } #production-steps ul li.right { margin: 0 0 35px; } #production-steps ul li.clear { float: none; clear: both; width: 880px; margin: 0; height: 0; position: relative; overflow: hidden; font-size: 0; } #production-steps ul li .img { width: 270px; float: left; clear: both; position: relative; color: #FFF; padding: 285px 0 0; } #production-steps ul li .img img { position: absolute; top: 0; left: 0; clear: both; } #production-steps ul li.right .img img { left: auto; right: 0; } #production-steps ul li .img p { background: #233A48; position: absolute; top: 250px; left:0; width: 260px; height: 32px; font-size: 1em; line-height: 1.4; padding: 3px 5px 0; } #production-steps ul li.right .img p { left: auto; right: 0; } #production-steps ul li .img p.wide { width: 565px; } #production-steps ul li .text { width: 270px; float: left; clear: both; padding: 40px 0 0; } #production-steps ul li .text h3 { font-weight: normal; font-size: 1.3em; padding: 0 0 1.5em; line-height: 1; } #production-steps ul li .text p { font-size: 1.1em; line-height: 1.65; margin: 0 0 1.5em; } /* FRONT BOXES, THREE SIDE BY SIDE ________________________________________________________________________*/ #employees, #employees ul { width: 880px; float: left; clear: both; } #employees h3 { clear: both; line-height: 1; font-size: 1.2em; padding: 0 0 .75em; } #employees ul li.employee { width: 318px; _height: 80px; min-height: 80px; padding: 11px 11px 11px 101px; float: left; clear: left; position: relative; overflow: hidden; margin: 0 20px 20px 0; background: url(/sitefiles/18/gfx/employee-dots-y.gif) 0 0 repeat-y; font-size: 1.1em; } #employees ul li.right { float: right; clear: right; margin: 0 0 20px; } #employees ul li.clear { margin: 0; padding: 0; width: 880px; float: none; clear: both; background: none; height: 0; position: relative; overflow: hidden; font-size: 0; } #employees ul li.employee .top { width: 430px; height: 1px; clear: both; position: absolute; top: 0; left: 0; background: url(/sitefiles/18/gfx/employee-dots-x.gif) 0 0 repeat-x; overflow: hidden; } #employees ul li.employee .bottom { width: 430px; height: 1px; clear: both; position: absolute; bottom: 0; left: 0; background: url(/sitefiles/18/gfx/employee-dots-x.gif) 0 0 repeat-x; overflow: hidden; } #employees ul li.employee .type, #employees ul li.employee .org { display: none; } #employees ul li.employee .meta { width: 125px; float: left; clear: left; } #employees ul li.employee .meta h4, #employees ul li.employee .desc h5 { line-height: 1; text-transform: uppercase; width: 125px; float: left; clear: both; padding: 0 0 .3em; } #employees ul li.employee .desc h5 { text-transform: none; } #employees ul li.employee .meta dl { width: 125px; float: left; clear: both; line-height: 1.5; } #employees ul li.employee .meta dl dt { float: left; clear: left; padding: 0 5px 0 0; width: 40px; } #employees ul li.employee .meta dl dd { float: left; width: 80px; } #employees ul li.employee .meta dl dd a { color: #233A48; text-decoration: none; font-weight: bold; } #employees ul li.employee .meta dl dd a:hover { text-decoration: underline; } #employees ul li.employee .photo { position: absolute; top: 11px; left: 11px; clear: both; } #employees ul li.employee .desc { width: 170px; float: right; clear: right; } #employees ul li.employee .desc p { font-size: 1em; line-height: 1.5; } /* ARTICLE FRONT BOXES, THREE SIDE BY SIDE ________________________________________________________________________*/ #front-boxes { width: 880px; float: left; clear: both; position: relative; } #front-boxes li { float: left; width: 280px; display: block; margin: 0 20px 0 0; } #front-boxes li.right { margin: 0; } #front-boxes li.clear { border: none; float: none; width: 880px; clear: both; height: 20px; background: #FFF; font-size: 0; } #front-boxes li h3 { color: #000; font-weight: normal; font-size: 1.5em; height: 26px; line-height: 26px; background: #D8C5B8 url(/sitefiles/18/gfx/new/corner.png) 100% 0 no-repeat; padding: 0 6px; } #front-boxes li h3 a { color: #000; text-decoration: none; display: block; } #front-boxes li h3 a:hover { text-decoration: underline; } #front-boxes li .content { height: 150px; position: relative; overflow: hidden; border: 1px solid #D8C5B8; border-top: none; } #front-boxes li .content .content-right { width: 178px; height: 150px; position: relative; overflow: hidden; float: right; clear: right; } #front-boxes li .content .img, #front-boxes li .content .img img { display: block; float: left; } #front-boxes li .content .vertigo { width: 100px; clear: left; } #front-boxes li .content .wide { clear: both; padding: 0 0 1em; } #front-boxes li p { line-height: 1.31; padding: .5em 10px; font-size: 1.3em; } #front-boxes li p.left-text { width: 160px; float: left; clear: left; padding-top: 0; } #front-boxes li p.read-more { width: 87px; height: 27px; position: absolute; bottom: 13px; clear: both; padding: 0; right: 96px; } #front-boxes li .content-right p.read-more { right: 46px; } #front-boxes li p.right-read-more { right: 10px; } #front-boxes li p.read-more a { display: block; width: 50px; height: 27px; line-height: 27px; padding: 0 27px 0 10px; color: #FFF; text-decoration: none; background: url(/sitefiles/18/gfx/new/read-more.png) 0 0 no-repeat; margin: 0 auto; } #front-boxes li p.read-more a:hover { text-decoration: underline; } /* ARTICLE FRONT BOXES, THREE SIDE BY SIDE ________________________________________________________________________*/ #art { width: 880px; float: left; clear: both; } #art .left { width: 270px; float: left; clear: left; } #art .left ul#art-pics { width: 270px; float: left; clear: both; } #art .left ul#art-pics li { width: 270px; float: left; margin: 0 0 35px; } #art .left ul#art-pics li .img { width: 270px; float: left; clear: both; position: relative; color: #FFF; } #art .left ul#art-pics li .img img { float: left; clear: both; } #art .left ul#art-pics li .img p { background: #233A48; width: 260px; height: 32px; float: left; clear: both; font-size: 1em; line-height: 1.4; padding: 3px 5px 0; } #art .right { width: 580px; float: right; clear: right; } #art .right h2 { font-size: 2em; font-weight: normal; line-height: 1; padding: 0 0 1em; } #searchResult div.result h2 { font-size: 2em; font-weight: normal; line-height: 1; padding: 5px 0; } #searchResult div.result { line-height: 1.5; padding: 10px 0; } #searchResult div.result h2 a { color: #000000; text-decoration: none; font-size: 1em; } #searchResult div.result p { font-size: 12px; } #searchResult div.result a { font-size: 12px; color: #000000; } #art .right p#excerpt { font-size: 1.3em; line-height: 1.75; margin: 0 0 2em; } #art .right p, #art .right ul, #art .right ol { font-size: 1.2em; line-height: 1.5; margin: 0 0 1.5em; } #art .right ul, #art .right ol { padding: 0 0 0 1.75em; } #art .right ul { list-style-type: square; } #art .right strong { font-weight: bold; } #art .right em { font-style: italic; } /* SCROLLABLE CONTENT ________________________________________________________________________*/ #scroll-wrap { width: 280px; height: 360px; padding: 0 0 25px; float: left; clear: left; overflow: hidden; position: relative; } #alutec .scroll-right { float: right; clear: right; } #scroll-wrap #scroller { width: 280px; clear: both; position: absolute; top: 0; left: 0; } #scroll-wrap #scroller h2 { font-size: 1.2em; font-weight: normal; color: #000; text-transform: uppercase; padding: 0 0 .75em; line-height: 1; } #scroll-wrap #scroller p { font-size: 1.1em; line-height: 1.5; margin: 0 0 1.5em; } #scroll-wrap .scroll-controls { width: 29px; height: 25px; line-height: 25px; clear: both; position: absolute; bottom: 0; left: 0; background: #FFF url(/sitefiles/18/gfx/dots-horizontal.gif) 0 24px repeat-x; padding: 0 0 0 251px; } #scroll-wrap .scroll-controls li { float: left; display: inline; padding: 8px 0 10px; } #scroll-wrap .scroll-controls li a { text-indent: -9999px; display: block; position: relative; overflow: hidden; width: 13px; height: 8px; background: url(/sitefiles/18/gfx/scroll-control.gif) 0 0 no-repeat; margin: 0 3px 0 0; } #scroll-wrap .scroll-controls li a#scroll-down { background-position: 0 -7px; margin: 0; } /* GENERIC TEMPLATE FOR IMAGE WITH IMAGE TEXT ________________________________________________________________________*/ .image-w-text { float: left; clear: left; padding: 0 20px 0 0; } .image-w-text-right { float: right; clear: right; padding: 0 0 0 20px; } .image-w-text-col-1 { width: 280px; } .image-w-text-cols-2 { width: 580px; } .image-w-text-cols-3 { width: 880px; padding: 0; clear: both; } .image-w-text h2 { clear: both; line-height: 1; font-size: 1.2em; color: #000; font-weight: bold; text-transform: uppercase; padding: 0 0 .75em; } .image-w-text img { float: left; } .image-w-text p { background: #233A48; color: #FFF; clear: both; height: 32px; font-size: 1em; line-height: 1.4; padding: 3px 5px 0; } /* LOGIN AND USER REGISTRATION ________________________________________________________________________*/ .login-and-reg { width: 880px; padding: 20px 50px; float: left; clear: both; position: relative; overflow: hidden; left: -50px; background: #233A48; color: #FFF; } #register-user, #login { width: 560px; padding: 20px 210px; } #forgot-password { width: 245px; padding: 20px 367px 20px 368px; } #login #login-box-left { width: 287px; background: #233A48 url(/sitefiles/18/gfx/checkout-lines-bg-y.gif) 0 0 repeat-y; float: left; clear: left; padding: 20px 21px 5px; position: relative; overflow: hidden; } #login #login-box-left h2, #login #login-box-right h2 { font-size: 1.2em; text-transform: uppercase; font-weight: normal; padding: 0 0 1.5em; } #login #login-box-left .top, #login #login-box-left .bottom { position: absolute; left: 0; width: 329px; height: 1px; overflow: hidden; font-size: 0; background: #233A48 url(/sitefiles/18/gfx/cart-lines-bg-x.png) 0 0 repeat-x; } #login #login-box-left .top { width: 880px; top: 0; } #login #login-box-left .bottom { bottom: 0; } #login #login-box-left ul { width: 287px; float: left; clear: both; list-style: none; line-height: 1; padding: 0 0 20px; } #login #login-box-left ul li { width: 287px; float: left; clear: both; padding: 0 0 .5em; position: relative; overflow: hidden; } #login #login-box-left ul li label { text-transform: uppercase; cursor: pointer; font-size: 1.2em; padding: 0 0 .25em; display: block; } #login #login-box-left ul li input { width: 275px; height: 14px; padding: 5px 6px 4px; color: #333; background: url(/sitefiles/18/gfx/checkout-input.gif) 0 0 no-repeat; border: none; font-size: 1.1em; margin: 0 0 5px; } #login #login-box-left ul li.formcontrols { padding: 0; } #login #login-box-left ul li.formcontrols input { height: 23px; width: 125px; cursor: pointer; float: right; clear: right; text-align: center; background-image: url(/sitefiles/18/gfx/checkout-input-125.gif); font-size: 1.2em; text-transform: uppercase; margin: 0 0 0 10px; padding: 1px 0 3px; *padding: 2px 0; } #login #login-box-left ul li.formcontrols a { width: 123px; height: 23px; line-height: 23px; display: block; float: left; clear: left; text-align: center; background-image: url(/sitefiles/18/gfx/checkout-input-125.gif); font-size: 1.2em; text-transform: uppercase; margin: 0; padding: 0 1px; text-decoration: none; color: #333; } #login #login-box-left p { font-size: 1.1em; line-height: 1.4; margin: 0 0 1.5em; } #login #login-box-left p a { color: #FFF; } #login #login-box-right { width: 200px; float: right; clear: right; padding: 20px 0 0; position: relative; overflow: hidden; } #login #login-box-right p { font-size: 1.1em; line-height: 1.4; margin: 0 0 1.5em; } #login #login-box-right p a#do-not-login { width: 193px; height: 23px; line-height: 23px; display: block; text-align: center; background-image: url(/sitefiles/18/gfx/checkout-input-195.gif); font-size: 1.1em; text-transform: uppercase; margin: 0; padding: 0 1px; text-decoration: none; color: #333; } #register-user .left { width: 330px; float: left; clear: left; } #register-user .right { width: 200px; float: right; clear: right; } #register-user table { width: 330px; float: left; clear: both; border-collapse: collapse; } #register-user table td { padding: 0 0 .5em; position: relative; font-size: 1.1em; } #register-user table td label { text-transform: uppercase; cursor: pointer; font-size: 1.2em; padding: 0 0 .25em; display: block; } #register-user table td input { width: 183px; height: 14px; padding: 5px 9px 4px 6px; color: #333; background: url(/sitefiles/18/gfx/checkout-input-165.gif) 0 0 no-repeat; border: none; font-size: 1.1em; margin: 0; } #register-user input.fatbutton { height: 33px; width: 138px; cursor: pointer; float: right; clear: right; text-align: center; background-image: url(/sitefiles/18/gfx/register.gif); font-size: 1.2em; text-transform: uppercase; margin: 0; padding: 1px 34px 6px 1px; *padding: 2px 34px 4px 1px; position: relative; right: -40px; } #register-user .right p { font-size: 1.1em; color: #B2B2B2; line-height: 1.4; } #register-user .right p.help { width: 200px; position: absolute; clear: both; bottom: 120px; left: 580px; } #register-user .right p a { font-size: 1.2em; width: 169px; height: 33px; line-height: 33px; display: block; position: absolute; clear: both; bottom: 27px; left: 600px; text-align: center; background-image: url(/sitefiles/18/gfx/checkout-input-171-33.gif); text-transform: uppercase; margin: 0; padding: 0 1px; text-decoration: none; color: #333; } #forgot-password h2 { font-size: 1.2em; text-transform: uppercase; font-weight: normal; padding: 0 0 1.5em; } #forgot-password p { font-size: 1.1em; line-height: 1.4; margin: 0 0 25px; } #forgot-password ul { width: 245px; float: left; clear: both; list-style: none; line-height: 1; padding: 0; } #forgot-password ul li { width: 245px; float: left; clear: both; padding: 0 0 .5em; position: relative; overflow: hidden; } #forgot-password ul li label { text-transform: uppercase; cursor: pointer; font-size: 1.2em; padding: 0 0 .25em; display: block; } #forgot-password ul li input { width: 233px; height: 14px; padding: 5px 6px 4px; color: #333; background: url(/sitefiles/18/gfx/checkout-input-245.gif) 0 0 no-repeat; border: none; font-size: 1.1em; margin: 0 0 5px; } #forgot-password ul li.formcontrols { padding: 0; } #forgot-password ul li.formcontrols input { height: 23px; width: 113px; cursor: pointer; float: right; clear: right; text-align: center; background-image: url(/sitefiles/18/gfx/checkout-input-125.gif); font-size: 1.2em; text-transform: uppercase; margin: 0 0 0 10px; padding: 1px 0 3px; *padding: 2px 0; } /* FOOTER CONTENT ________________________________________________________________________*/ #footer { margin: 0 auto; width: 860px; } #footer .left { float: left; } #footer .right { float: right; } #footer h4 { color: #7F7F7F; font-weight: normal; font-size: 1em; line-height: 2; width: 400px; float: left; clear: both; } #footer .right h4 { text-align: right; } #footer ul.bottom-logo-links { width: 400px; height: 51px; float: left; clear: both; padding: 0 0 10px; } #footer ul.bottom-logo-links li { float: left; display: block; width: 70px; height: 50px; position: relative; border-top: 1px solid #CDCED1; margin: 0 10px 0 0; } #footer ul.random li { float: right; margin: 0 0 0 10px; } #footer ul.bottom-logo-links li a { display: block; clear: both; width: 70px; height: 40px; padding: 10px 0 0; position: absolute; bottom: 0; left: 0; opacity: .5; *filter: alpha(opacity=50); background: 0 100% no-repeat; text-indent: -9999px; overflow: hidden; } #footer ul.bottom-logo-links li a:hover { border-top: 1px solid #9B9FAB; opacity: 1; *filter: alpha(opacity=100); } #footer #madeby { line-height: 1.8; font-size: 1em; color: #7F7F7F; border-top: 1px solid #81858C; width: 275px; float: left; clear: both; margin: 0; } #footer #madeby a { display: block; color: #7F7F7F; text-decoration: none; padding: .25em .5em; } #footer #madeby a:hover { background: #E1ECF2; color: #47A8E4; } #MainSlideContainer { height: 0; width: 600px; padding: 0 50px 0 330px; position: absolute; bottom: 0; left: 50%; margin: 0 0 0 -490px; background: #233A48; overflow: hidden; color: #FFF; z-index: 222; } #MainSlideContainer.kontaktside { height: auto; width: 820px; position: relative; margin: 0; padding: 10px 30px; left: 0; top: 0; } #MainSlideContainer.kontaktside a#closeScaleBtn { display: none; } #MainSlideContainer.kontaktside fieldset { /*width: 600px;*/ } #MainSlideContainer.kontaktside div.left { float: left; /*clear: left;*/ margin-right: 10px; width: 300px; height: 446px; display: block; clear: none; } #MainSlideContainer.kontaktside div.left .logo{ float: left; width: 200px; height: 75px; margin: 35px 0 0 50px; _margin: 35px 0 0 25px; background: url(/sitefiles/18/img/jamax-stillassystemer_kontaktskjema.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/sitefiles/18/img/jamax-stillassystemer_kontaktskjema.png", sizingMethod="scale"); } #MainSlideContainer.kontaktside ul.right { width: 300px; float: left; display: block; clear: none; } #MainSlideContainer.kontaktside ul.right span#responsebox { position: absolute; left: 80px; top: 0; } #MainSlideContainer.kontaktside ul.right textarea#beskjed { height: 96px; } #MainSlideContainer.kontaktside fieldset div#contactRadioList { position: relative; float: right; clear: right; left: 0; top: 0; width: 200px; margin-right: 10px; margin-top: 20px; } #MainSlideContainer a#closeScaleBtn { width: 58px; height: 27px; display: block; position: absolute; top: 0; right: 0; clear: both; overflow: hidden; text-indent: -9999px; background: url(/sitefiles/18/gfx/contactform_closebtn.png) 0 0 no-repeat; } #alutec .static-contact-form { height: auto; position: relative; margin: 0; left: -50px; background: #233A48 url(/sitefiles/18/gfx/white-logo.png) 50px 35px no-repeat; } #responsebox { display: block; float: left; clear: left; font-size: 1.2em; font-weight: bold; height: 23px; line-height: 23px; } #MainSlideContainer ul { width: 600px; float: left; clear: both; list-style: none; line-height: 1; padding: 20px 0; } #MainSlideContainer ul li { width: 290px; float: left; padding: 0 20px .3em 0; position: relative; overflow: hidden; } #MainSlideContainer ul li label { text-transform: uppercase; cursor: pointer; font-size: 1.2em; padding: 0 0 .2em; display: block; } #MainSlideContainer ul li input { width: 278px; height: 14px; padding: 5px 6px 4px; color: #333; background: url(/sitefiles/18/gfx/checkout-input.gif) 0 0 no-repeat; border: none; font-size: 1.1em; margin: 0 0 5px; } #MainSlideContainer ul li input.number { font-family: "Courier New", Courier, monospace; letter-spacing: 0.15em; font-weight: bold; } #MainSlideContainer ul li.radio input { float: left; clear: left; padding: 0; background: none; height: auto; width: auto; margin: -1px 10px 0 0; *margin: -4px 10px 0 0; font-size: medium; } #MainSlideContainer ul li.radio label { display: inline; float: left; } #MainSlideContainer ul li.txa { float: left; padding: 0 0 .3em; clear: both; } #alutec .static-contact-form ul li.txa { float: right; padding: 0 0 .3em; clear: right; } #MainSlideContainer ul li .txa-wrap { width: 288px; float: left; clear: both; padding: 0 1px; position: relative; overflow: hidden; background: url(/sitefiles/18/gfx/txa-wrap-y.gif) 0 0 repeat-y; margin: 0 0 15px; } #MainSlideContainer ul li .txa-wrap textarea { width: 268px; height: 129px; padding: 10px; margin: 1px 0; *margin: 0; border: none; line-height: 1.5; font-family: Arial, "Bitstream Vera Sans", "Lucida Grande", Tahoma, sans-serif; font-size: 1.1em; } #MainSlideContainer ul li .txa-wrap .txa-top, #MainSlideContainer ul li .txa-wrap .txa-bottom { width: 290px; height: 1px; position: absolute; overflow: hidden; left: 0; clear: both; background: url(/sitefiles/18/gfx/dots-horizontal-silver.gif) 0 0 repeat-x; } #MainSlideContainer ul li .txa-wrap .txa-top { top: 0; } #MainSlideContainer ul li .txa-wrap .txa-bottom { bottom: 0; } #MainSlideContainer ul li.formcontrols { padding: 0; float: left; clear: both; } #MainSlideContainer ul li.formcontrols input { height: 23px; width: 75px; cursor: pointer; float: left; text-align: center; background-image: url(/sitefiles/18/gfx/checkout-input-125.gif); font-size: 1.2em; text-transform: uppercase; margin: 0; padding: 1px 0 3px; *padding: 2px 0; } div#contactRadioList { position: absolute; top: 20px; left: 640px; clear: both; } div#contactRadioList h3 { text-decoration: none; text-transform: uppercase; font-size: 1.1em; display: block; margin: 0 0 .5em; width: 285px; } div#contactRadioList ul { list-style: none; margin: 0; padding: 0; } div#contactRadioList ul li { clear: both; height: 15px; line-height: 1.3; padding: 8px 0; } div#contactRadioList ul li input { width: auto; height: auto; display: block; float: left; margin: 0 10px 0 0; } div#contactRadioList ul li label { float: left; display: block; font-size: 1em; text-transform: none; } p.error-message { font-size: 1.8em; color: red; } div.standard { clear: both; }