/*
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 */
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; }
img#checkout-lock { position: fixed; top: 50%; left: 50%; }
/* ----< Banner scroll >---- */
/* 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; width: 510px; height: 140px; /* custom decorations */ padding:5px 0; }
div.banner-scroll div.scrollable h5 { font-family: Arial, Helvetica, sans-serif; min-height: 25px; }
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:4px; }
/* single scrollable item */
div.banner-scroll div.scrollable div.items > div { float:left; overflow: hidden; position: relative; cursor: pointer; /* custom decoration */ width:166px; height: 126px; padding:7px; font-family: 'bitstream vera sans'; border:1px solid #ccc; background-color: #fff; margin-right: 4px; }
/* active item */
div.banner-scroll div.scrollable div.items div.active { border:1px inset #ccc; background-color:#fff; }
/* this makes it possible to add next button beside scrollable */
div.banner-scroll div.scrollable { float:left; width: 562px; }
/* 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; }
/* -------- */
/* ----< 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; }
/* -------- */
/* ----< Paging >---- */
ul.paging { clear: both; float: none; text-align: center; }
ul.paging li { display: inline; }
ul.paging li.active { font-weight: bold; }
/* -------- */
/* ----< 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; }
/* -------- */
/* ----< 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; }
/* ---- */
/* --< 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: 10px; 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 */
.node274, .node1316, .node3837 { background-color:rgb(169, 163, 112); border-color:rgb(169, 163, 112); }
/* Color node 2 */
.node276, .node1334, .node3855 { background-color: #c0c0c0; border-color: #c0c0c0; }
/* Color node 3 */
.node277, .node1352, .node3873 { background-color: rgb(143, 143, 143); border-color: rgb(143, 143, 143); }
/* Color node 4 */
.node278, .node1297, .node3818 { background-color: rgb(255, 192, 0); border-color: rgb(255, 192, 0); }
/* Color node 5 */
.node279, .node1388, .node3909 { background-color: rgb(255, 126, 0); border-color: rgb(255, 126, 0); }
/* Color node 6 */
.node280, .node1407, .node3928 { background-color: rgb(216, 70, 27); border-color: rgb(216, 70, 27); }
/* Color node 7 */
.node281, .node1442, .node3963 { background-color: rgb(132, 182, 95); border-color: rgb(132, 182, 95); }
/* Color node 8 */
.node275, .node1470, .node3991 { background-color: rgb(135, 192, 219); border-color: rgb(135, 192, 219); }
/* Color node 9 */
.node282, .node1497, .node4018 { background-color: rgb(92, 144, 178); border-color: rgb(92, 144, 178); }
/* Color node 10 */
.node283, .node1515, .node4019 { background-color: rgb(0, 125, 189); border-color: rgb(0, 125, 189); }
/* Color node 11 */
.node284, .node1542, .node4046 { background-color: rgb(163, 134, 177); border-color: rgb(163, 134, 177); }
/* ---- */