g/*
Jula - global.css
Tomasz Okborg
2009-05-18
Litium E-commerce, all rights reserved
*/
div.banner { margin-bottom: 16px; }
div.banner-wrapper { overflow: hidden; margin-bottom: 16px; }
div.start-page-banner { overflow: hidden; margin-bottom: 16px; }
div.start-page-banner p { margin-bottom: 0; }
div.full-banner { margin-bottom: 16px; }
input.quantity-field { width: 20px; text-align: right; }
input.text { font-size: 11px; }
.clickable { cursor:pointer; }
span.active { font-weight:bold; }
.clear { clear: both; float: none; }
div.usual { clear: both; }
div.hidden { display: none; }
.accepted { margin-left: 30px; font-size: 12px; font-weight: bold; color: #228B22; } /* class used for accepted messages (green) */
.disabled { background-color: #eee; } /* Used to dim disabled elements such as input fields etc. when disabled */
.row { display: block; overflow: hidden; clear: both; } /* Makes element act as a table row, used for layout */
.column { display: block; float: left; overflow: hidden; } /* Makes element act as a table cell, used for layout */
.left-half-box { width:265px; }
.right-half-box { width:270px; padding-left: 10px; }
.left-half-box *, .right-half-box * { width: 260px; }
.left-half-box select { width: 285px; } /* specified width to align with input fields in same form */
.strong { font-weight: bold }
.rightAlign { text-align: right }
.blurred { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; cursor: not-allowed }
.nowrap { white-space: nowrap; }
div.ajax-loader { position: relative; top: 80px; left: 80px; z-index: 1; height: 0px; }
div#checkout-lock { opacity: 0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); background-color: rgb(0, 0, 0); left:0; position:absolute; top:0; width:100%; z-index:300; }
div#checkout-lock2 { left:0; position:absolute; top:0; width:100%; z-index:400; }
#checkout-lock2 div { position: fixed; top: 50%; left: 50%;}
#checkout-lock2 img { position: relative; left: -110px; top:auto;}
a.arrow { background: url(/media/images/icon/category-arrow.gif) no-repeat 0px 2px; padding-left: 14px; }
ul.arrow { margin-bottom: 16px; font-size: 12px; line-height: 16px; }
ul.arrow li { background: url(/media/images/icon/category-arrow.gif) no-repeat 0px 3px; padding-left: 16px; margin-bottom: 8px; }
ul.arrow li em { margin-right: 16px; }
a.pdfLink { background: url(/media/images/icon/file/PDF.gif) no-repeat 0px 2px; padding: 2px 0px 1px 20px; }
a.small-cross { background: url(/media/images/icon/small-cross.png) no-repeat 0px 1px; padding: 2px 0px 1px 15px; font-size: 11px; text-decoration: none !important }
a.small-cross:hover { text-decoration: underline }
.tooltip { width: 128px; background: url(/media/images/layout/common/speech-bubble-info.gif) no-repeat bottom; padding: 8px 14px 30px 18px; color: white; font-size: 16px; text-align: center }
/* ----< Startpage item list >---- */
div.startpage-items { margin-bottom: 10px; background-color: #ffffff; padding: 3px 0px; width: 600px; }
div.startpage-items div.startpage-itembox
{
width:174px;
height: 126px;
padding: 5px 0;
float:left;
overflow: hidden;
position: relative;
cursor: pointer;
margin: 0px 10px 10px 0px;
padding:7px;
font-family: 'bitstream vera sans';
border:1px solid #ccc;
background-color: #fff;
/*-moz-border-radius: 5px;
border-radius: 5px;*/
}
div.startpage-items div.startpage-itembox:hover { border:1px solid #C33; }
div.startpage-items div.startpage-itembox h5 { font-family: Arial, Helvetica, sans-serif; min-height: 25px; margin-left: 2px; }
div.startpage-items div.startpage-itembox div.scroll-product-image { text-align: center; position: relative; width: 90px; height: 90px; }
div.startpage-items div.startpage-itembox div.scroll-product-image img { display: inline; }
div.startpage-items div.startpage-itembox div.scroll-product-image img.brand-logo { display: block; position: absolute; left: 0px; bottom: 0px; z-index: 100; }
/* ----< Product price styling >---- */
div.startpage-items div.product-price-wrapper { text-align:right; float: right; overflow: hidden; z-index: 100px; }
div.startpage-items div.product-buy-wrapper div.buy-button { margin-top: 25px; }
div.startpage-items div.old-product-price { font-size: 11px; margin-top: 0; font-family: Arial, Helvetica, sans-serif; min-height: 15px; text-align: right; }
div.startpage-items div.product-price { padding: 3px 0 3px 0; text-align: right; color: #000000; font-size: 20px; font-weight: bold; background: transparent; font-family: Arial, Helvetica, sans-serif; }
div.startpage-items div.product-price-special { padding: 3px 0 3px 0; text-align: right; color: #f40000; font-size: 20px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
div.startpage-items div.product-save { font-size: 11px; font-family: Arial, Helvetica, sans-serif; min-height: 15px; text-align: right; }
div.startpage-items div.buy-button { margin-top: 11px; text-align: right; }
div.startpage-items div.buy-button img { display: inline; }
/* -------- */
/* ----< Product page >---- */
div#content-product-details-wrapper input.addToList { border: 1px solid #aa171c; background-color: #de1e25; float: right; margin-left: 8px; padding: 3px; cursor: pointer; color: #fff; height: 25px; width: 110px }
div#content-product-details-wrapper input.pl { font-size: 9px; }
div#content-product-details-wrapper input.addToList:hover { background-color: #c61a21 }
div.label-quantity-buybutton input#product-quantity { border-width: 1px; border-style: solid none; border-color: #aa171c; float: left; text-align: center; background-color: #de1e25; margin: 0px !important; font-size: 14px; font-weight: bold; padding: 2px; color: #fff; height: 19px !important }
div.label-quantity-buybutton div#product-quantity-decrease { background: url('../images/products/quantity.gif'); height: 25px; width: 15px; float: left; cursor: pointer;}
div.label-quantity-buybutton div#product-quantity-increase { background: url('../images/products/quantity.gif') right; height: 25px; width: 15px; float: left; cursor: pointer; }
div.stock-link fieldset { border: 1px solid black; padding: 5px; margin-top: 5px }
div.stock-link fieldset legend { padding: 0px 5px; text-transform: uppercase; font-size: 9px; }
div.stock-link fieldset legend.pl { font-size: 8px }
div.stock-link fieldset ul { padding-left: 25px; font-size: 14px }
div.stock-link fieldset ul li.online { list-style-image:url('../images/icon/web.png'); margin: 5px 0px }
div.stock-link fieldset ul li.online a { color: #323232 !important }
div.stock-link fieldset ul li.online a:hover { text-decoration: underline }
div.stock-link fieldset ul li.customerService { list-style-image:url('../images/icon/phone.png'); margin: 5px 0px }
.ui-effects-transfer { background: url(../images/layout/common/background-cart-wrapper-active.png) no-repeat; width: 286px; height: 72px}
/* -------- */
/* ----< JulaClub application >---- */
#JulaClub .card { width: 200px; height: 130px; border: 1px solid black; cursor: pointer; background-repeat: no-repeat; background-position: center center }
#JulaClub .card:hover { border-color: yellow }
#JulaClub .cardinfo { width: 178px; padding: 5px 10px; font-size: 8pt; text-align: center;}
#JulaClub #club_card { background-image: url(/media/images/julaclub/cards/julaclub_tiny.gif); }
#JulaClub #club_smart_card { background-image: url(/media/images/julaclub/cards/julaclubsmart_tiny.gif)}
#JulaClub .selected { border-color: red; border-width: 3px; cursor: default; /*background-color: yellow*/ }
#JulaClub .selected:hover { border-color: red }
#JulaClub .spacer { margin-left: 10px; }
#JulaClub h2{ width: 410px; text-align: center }
/* -------- */
/* -------- */
/* ----< Banner scroll (old for delete) >---- */
/* root element for the scrollable. when scrolling occurs this element stays still. */
div.usual { margin-bottom: 10px; margin-top:-30px; }
div.usual div.banner-scroll { clear: both; overflow: hidden; background-color: #ffffff; padding: 3px 0; }
div.notabs { margin-top: -10px; }
div.banner-scroll div.scrollable { /* required settings */ position:relative; overflow:hidden; height: 140px; /* custom decorations */ padding:5px 0; float:left; width: 590px; }
div.banner-scroll div.scrollable h5 { font-family: Arial, Helvetica, sans-serif; min-height: 25px; margin-left: 2px; }
div.banner-scroll div.scrollable div.scroll-product-image { text-align: center; position: relative; width: 90px; height: 90px; }
div.banner-scroll div.scrollable div.scroll-product-image img { display: inline; }
div.banner-scroll div.scrollable div.scroll-product-image img.brand-logo { display: block; position: absolute; bottom: 0px; left: 0px; z-index: 100; }
/* root element for scrollable items. Must be absolutely positioned and it should have a super large width to accomodate scrollable items. it's enough that you set width and height for the root element and not for this element. */
div.banner-scroll div.scrollable div.items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; /* decoration */ margin-left:0; }
div.banner-scroll div.scrollable div.items > div:hover { border:1px solid #C33; }
/* single scrollable item */
div.banner-scroll div.scrollable div.items > div { float:left; overflow: hidden; position: relative; cursor: pointer; /* custom decoration */ width:174px; height: 126px; padding:7px; font-family: 'bitstream vera sans'; border:1px solid #ccc; background-color: #fff; margin-right: 10px; -moz-border-radius: 5px; border-radius: 5px; }
/* active item */
div.banner-scroll div.scrollable div.items div.active { border:1px inset #ccc; background-color:#fff; }
/* prev, next, prevPage and nextPage buttons */
div.banner-scroll a.prev,div.banner-scroll a.next,div.banner-scroll a.prevPage,div.banner-scroll a.nextPage { display:block; height: 142px; width: 13px; background-image:url(../images/icon/scroll-arrows.png); background-repeat: no-repeat; float:left; cursor:pointer; margin-top:5px; }
/* mouseover state */
div.banner-scroll a.prev:hover, div.banner-scroll a.prevPage:hover { background-position:0px -142px; }
/* next button uses another background image */
div.banner-scroll a.next, div.banner-scroll a.nextPage { background-image:url(../images/icon/scroll-arrows.png); background-position: -13px 0px; clear:right; }
div.banner-scroll a.next:hover, div.banner-scroll a.nextPage:hover { background-position:-13px -142px; }
/* disabled navigational button */
div.banner-scroll a.disabled { display:block; height: 142px; width: 13px; background-image:url(../images/icon/scroll-noarrows.png); background-repeat: no-repeat; float:left; cursor:default; margin-top:5px; }
/* -------- */
/* ----< General lightbox >---- */
#lightbox div { text-align: center; }
#lightbox img { display: inline; }
/* -------- */
/* ----< My pages - my data >---- */
div.form-myData { margin-bottom: 10px; }
div.form-myData input,div.form-myData select { display: block }
div.form-myData p { margin: 5px 0px 0px 0px !important; padding: 0px !important }
div.form-myData input.readOnly { border: 0; font-size: 14px }
input.do-submit { padding: 5px 10px }
div.mydata-infotext { font-size: 16px; padding: 7px 10px 0px 0px}
/* -------- */
/* ----< My pages - my balance >---- */
div.creditBubble p { font-size: 15px; margin-top: 10px; font-weight: bold }
div.creditBubble div { width: 150px; padding-top: 6px; height: 62px; text-align: center; color: black; font-size: 35px; background: url(/media/images/layout/common/speech-bubble.gif) }
/* ----< / My pages - my balance >---- */
/* ----< Order history >---- */
table.order th { font-weight: bold; vertical-align: bottom; border-color: #aaa096 }
table.order th h2 { margin-bottom: 0px }
table.order td { border-bottom: 1px solid #aaa096; }
table.order tr.oneOrder:hover { cursor: pointer; background-color: #eeebe5}
table.order tr.header { height: 30px; background: url(../images/layout/common/scroll_top_flat.gif) no-repeat; color: #FFFFFF; }
table.orderInfo { width: 270px }
table.orderSummary td.description { padding-right: 25px; padding-bottom: 3px; font-weight: bold }
table.orderSummary td.rightAlign { width: 50px; padding-bottom: 3px }
/* -------- */
/* ----< Product price styling >---- */
div.product-price-wrapper { text-align:right; }
div.product-price-wrapper { overflow: hidden; }
div.product-buy-wrapper div.buy-button { margin-top: 25px; }
div.product-price-wrapper { overflow: hidden; position: absolute; top: 40px; right: 10px; z-index: 100px; }
div.old-product-price { font-size: 11px; margin-top: 0; font-family: Arial, Helvetica, sans-serif; min-height: 15px; text-align: right; }
div.product-price { padding: 3px 0 3px 0; text-align: right; color: #000000; font-size: 20px; font-weight: bold; background: transparent; font-family: Arial, Helvetica, sans-serif; }
div.product-price-special { padding: 3px 0 3px 0; text-align: right; color: #f40000; font-size: 20px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
div.product-save { font-size: 11px; font-family: Arial, Helvetica, sans-serif; min-height: 15px; text-align: right; }
div.buy-button { margin-top: 11px; text-align: right; }
div.buy-button img { display: inline; }
/* -------- */
/* ----< Term table >---- */
table.term-table { margin-bottom: 20px; }
table.term-table td.header1 { width: 80px }
table.term-table td.header2 { width: 370px }
table.term-table td.header3 { width: 120px; font-size: 10px; font-style: italic; text-align: right }
table.term-table tr.sub > td { height:84px; padding: 15px 5px;}
table.term-table tr.sub:hover { background-color: #EAEAEA; cursor:pointer }
table.term-table td.sub1 { width: 80px; background: url(../images/icon/pdf.png) no-repeat 0px 10px; text-align:center; }
table.term-table td.sub2 { width: 370px; font-size: 12px }
table.term-table td.sub2 > h1 { margin: 0px 0px 10px 0px; padding: 0px }
table.term-table td.sub3 { width: 120px; text-align: right }
/* -------- */
/* ----< Press releases list >---- */
ul.press-releases { padding-left: 28px; margin: 0px 0px 10px -10px }
ul.press-releases > li { margin-bottom: 6px; font-size: 12px; list-style-image: url(../images/icon/category-arrow.png); line-height: 16px }
ul.press-releases li h2 { font-size: 12px; font-weight: normal; margin: 0px; padding: 0px 12px 0px 0px; display: inline;}
/* -------- */
/* ----< List with points >---- */
.with-points { line-height: normal }
ul.with-points { padding-left: 25px; margin: 0px 0px 10px -10px }
ul.with-points > li { margin-bottom: 6px; font-size: 12px; }
ol.with-points > li { list-style-type: decimal }
ul.with-points > li { list-style-type: disc }
/* -------- */
/* ----< Slidelist >---- */
.slide-list { padding-left: 25px }
.slide-list > li { font-weight: bold; margin-bottom: 3px; font-size: 12px; }
ol.slide-list > li { list-style-type: decimal }
ul.slide-list > li { list-style-type: disc }
.slide-list > li > div { display: none; font-weight: normal; margin: 5px 0px 10px 0px; width: 400px; line-height: 12pt }
.slide-list > h3 { margin: 25px 0px 5px -20px; }
.slide-list > li > h4 { cursor: pointer; font-size: 12px; line-height: normal; }
.big-headers > li > h4 { font-size: 14px; }
/* -------- */
/* ----< Paging >---- */
ul.paging { clear: both; float: none; text-align: center; margin: 10px 0px }
ul.paging li { display: inline; border: 1px solid #BEBEBE; padding: 3px 5px; margin: 0px 2px; }
ul.paging li { cursor: pointer }
ul.paging li.active { font-weight: bold; background-color: #999999; color: white; cursor: default }
ul.paging li.hidden { opacity: 0.5; filter:alpha(opacity=50); -moz-opacity:0.5; cursor: default }
/* -------- */
/* ----< Read more link >---- */
.read-more-link{ cursor: pointer; clear: both; }
/* -------- */
/* ----< Asterisk >---- */
span.required { padding-left: 5px; line-height: 14px; color: #cd0606; }
/* -------- */
/* ----< Icon header >---- */
div.icon-header { overflow: hidden; margin-bottom: 10px; }
div.icon-header img { float: left; margin-right: 7px; }
div.storesBox div.icon-header h4.se { width: 160px; height: 30px; text-indent: -999999px; background: url(../images/layout/sv/stores.png) no-repeat }
div.storesBox div.icon-header h4.no { width: 160px; height: 30px; text-indent: -999999px; background: url(../images/layout/no/stores.png) no-repeat }
div.storesBox div.icon-header h4.pl { width: 160px; height: 30px; text-indent: -999999px; background: url(../images/layout/pl/stores.png) no-repeat }
/* -------- */
/* ----< Text field and button wrapper >---- */
div.text-button-wrapper { overflow: hidden; min-height: 18px; margin: 5px 0; }
div.text-button-wrapper * { float: left; }
div.text-button-wrapper input.text { margin-right: 5px; width: 115px; }
/* -------- */
div.button-list { margin-top: 10px; margin-right: 10px; }
/* ----< Corners for boxes >---- */
.top-left { position: absolute; top: 0; left: 0; }
.top-right { position: absolute; top: 0; right: 0; }
.bottom-left { position: absolute; bottom: 0; left: 0; }
.bottom-right { position: absolute; bottom: 0; right: 0; }
/* -------- */
/* ----< Floated objects, both left and right >---- */
.left { float: left; overflow: hidden; display: block; }
.right { float: right; overflow: hidden; display: block; }
img.left { margin-right: 10px; margin-bottom: 10px; }
img.right { margin-left: 10px; margin-bottom: 10px; }
/* -------- */
/* ----< Radio button >---- */
.radio-button { margin-right: 25px; }
.radio-button input { height: 14px; width: 14px; margin-right: 2px; }
.radio-button input, .radio-button label { display: block; float: left; margin-top: 2px; }
.radio-button img { display: block; float: left; margin-left: 4px; }
/* -------- */
/* --< text with help image >-- */
.text-help-image { margin-right: 20px; margin-bottom: 10px; overflow: hidden; }
.text-help-image input, .text-help-image label { display: block; float: left; margin-top: 2px; }
.text-help-image img { display: block; float: left; margin-left: 4px; }
/* ---- */
/* --< Check box >-- */
.check-box { margin-right: 10px; }
.check-box input, .check-box label { display: block; float: left; }
.check-box label { margin-top: 3px; }
.check-box img { display: block; float: left; margin-left: 4px; margin-top: 1px; }
/* ---- */
/* --< Input field label top >-- */
.input-label-top input, .input-label-top label { display: block; }
.input-label-top input.text { margin-top: 1px; }
.input-label-top input.button { margin-left: 3px; }
div.label-top { margin-top: 5px; }
.input-label-top label { margin-top: 3px; }
.input-label-top img { float: left; margin-left: 4px; margin-top: 1px; }
/* ---- */
/* --< Input field >-- */
.input-field { margin-right: 10px; margin-top: 8px; }
.input-field input, .input-field label { display: block; float: left; }
.input-field input.text, .input-field textarea.text { margin-top: 1px; width: 175px; }
.input-field input.textReadOnly, .input-field textarea.textReadOnly { margin-top: 1px; width: 175px; background-color:#E8E9DD; border:1px solid #CCCCCC; }
.input-field input.button { margin-left: 3px; }
.input-field label { margin-top: 3px; width: 120px; }
.input-field img { display: block; float: left; margin-left: 4px; margin-top: 1px; }
/* ---- */
/* --< Error message layout >-- */
.error { font-weight: bold; color: #fd0303; line-height: 16px; padding: 10px 0; } /* class used for error messages (red) */
.errormessage { color: #ff0000; }
div.error-message-wrapper { position: absolute; overflow: hidden; font-weight: bold; color: #ff0000; }
#errorMSG { border: 1px solid white; margin-right: 10px }
/* ---- */
/* --< Box layout >-- */
div.box-top { position: absolute; top: 0; left: 0; }
div.box-bottom { position: absolute; bottom: 0; left: 0; }
div.box-content { overflow: hidden; margin: 0; padding: 0; }
/* < Box Narrow layout > */
div.box-wrapper-narrow { position: relative; padding: 15px; margin-bottom: 16px; }
div.box-wrapper-narrow div.box-top { height: 10px; width: 190px; }
div.box-wrapper-narrow div.box-bottom { height: 20px; width: 190px; }
/* */
/* < Box Full layout > */
div.box-wrapper-full { position: relative; margin-bottom: 16px; padding: 15px; }
div.box-wrapper-full div.box-top { height: 10px; width: 590px; }
div.box-wrapper-full div.box-bottom { height: 10px; width: 590px; }
/* */
/* ---- */
/* --< Color codes for categories in tree, category list and search >-- */
/* Color node 1 - Arbetskläder */
.node8507, .node11085, .node13663, .nodeCN_7431e04ba7_3, .nodeCN_7431e04ba7_2, .nodeCN_7431e04ba7{ background-color:rgb(169, 163, 112); border-color:rgb(169, 163, 112); }
/* Color node 2 - Verktyg */
.node8795, .node11373, .node13951, .nodeCN_8f7e2eed8d_2, .nodeCN_8f7e2eed8d_3, .nodeCN_8f7e2eed8d { background-color: #c0c0c0; border-color: #c0c0c0; }
/* Color node 3 - Maskiner */
.node8177, .node10755, .node13333, .nodeCN_50d2be9890_3, .nodeCN_50d2be9890_2, .nodeCN_50d2be9890 { background-color: rgb(143, 143, 143); border-color: rgb(143, 143, 143); }
/* Color node 4 - El*/
.node8350, .node10928, .node13506, .nodeCN_6338bc0226_3, .nodeCN_6338bc0226_2, .nodeCN_6338bc0226 { background-color: rgb(255, 192, 0); border-color: rgb(255, 192, 0); }
/* Color node 5 - VVS*/
.node9518, .node12096, .node14674, .nodeCN_d7647a0748, .nodeCN_d7647a0748_2, .nodeCN_d7647a0748_3 { background-color: rgb(255, 126, 0); border-color: rgb(255, 126, 0); }
/* Color node 6 - BYGG*/
.node9769, .node12347, .node14925, .nodeCN_f1fcc354fa, .nodeCN_f1fcc354fa_2, .nodeCN_f1fcc354fa_3 { background-color: rgb(216, 70, 27); border-color: rgb(216, 70, 27); }
/* Color node 7 - Trädgård */
.node9245, .node11823, .node14401, .nodeCN_bd8553b8c5_3, .nodeCN_bd8553b8c5_2, .nodeCN_bd8553b8c5 {background-color: rgb(132, 182, 95); border-color: rgb(132, 182, 95); }
/* Color node 8 - Transport*/
.node9140, .node11718, .node14296, .nodeCN_b2bca57e5e, .nodeCN_b2bca57e5e_2, .nodeCN_b2bca57e5e_3 { background-color: rgb(135, 192, 219); border-color: rgb(135, 192, 219); }
/* Color node 9 - Fritid*/
.node9565, .node12143, .node14721, .nodeCN_dbcc630e54_3, .nodeCN_dbcc630e54_2, .nodeCN_dbcc630e54 { background-color: rgb(92, 144, 178); border-color: rgb(92, 144, 178); }
/* Color node 10 - Elektronik*/
.node9404, .node11982, .node14560, .nodeCN_c9fd7a90e9_3, .nodeCN_c9fd7a90e9_2, .nodeCN_c9fd7a90e9{ background-color: rgb(0, 125, 189); border-color: rgb(0, 125, 189); }
/* Color node 11 - Hushåll */
.node8775, .node11353, .node13931, .nodeCN_8d0bf09892_3, .nodeCN_8d0bf09892_2, .nodeCN_8d0bf09892 { background-color: rgb(163, 134, 177); border-color: rgb(163, 134, 177); }
/* ---- */
.page-6 ul {
list-style-type: none;
overflow: hidden;
padding: 0 0 30px;
width: 540px;
}
.page-6 ul li {
float: left;
padding-right: 10px;
width: 100px;
}
.page-6 ul.vert li {
float: left;
height: 115px;
padding-right: 10px;
width: 100px;
}