@import url("../../_base/common/css/default.css");

HTML,
BODY,
TABLE,
CHECKBOX,
INPUT,
RADIO,
SELECT,
TEXTAREA { font-family: Tahoma, "DejaVu Sans", Arial, sans-serif; font-size: 9pt; line-height: 1.5; }

HTML { margin: 0; padding: 0; }

BODY { margin: 0; padding: 0; color: #444; text-align: center; background: white; }

UL { margin-top: 0; margin-bottom: 0; }

A { color: black; text-decoration: none; }

A:hover,
A:active { text-decoration: underline; }

INPUT.input,
SELECT.input,
TEXTAREA.input { border: solid 1px #ccc; color: black; font-weight: normal; background: white !important; padding: 1px 0; width: 100%; }

.price { color: #666; font-weight: bold; }

.ecotax { font-size: 8pt; }

.oldprice { display: block; }

.abstract { color: #888; }

/* ============================================================
 * FORM
 * ============================================================ */

DIV.form { text-align: left; }

DIV.form .formfd { padding: 3px 0; }

DIV.form .formfd-isrequired LABEL { font-weight: bold; }

DIV.form .formfd-help { color: #777; }

DIV.form .formfd-iserror { color: red; }

/* ------------------------------------------------------------
 * GENERAL: default (as TABLE)
 * ------------------------------------------------------------ */

TABLE.default { margin: 0; }
TABLE.default TR { }
TABLE.default TD { padding: 5px 7px; vertical-align: top; }
TABLE.default TH { padding: 5px 7px; vertical-align: top; }

/* ============================================================
 * LISTING
 * ============================================================ */

TABLE.listing { }
TABLE.listing TH { background: #bdbc7a; color: white; white-space: nowrap; }
TABLE.listing .selected { background: #d6d2ad; }
TABLE.listing .over { background: #e8e4be; }

/* ------------------------------------------------------------
 * GENERAL: data
 * ------------------------------------------------------------ */

.data .title { }
.data .value { }

/* ============================================================
 * BUTTON BAR
 * ============================================================ */

.buttonbar { margin: 0.5em 0; }
.buttonbar TABLE { width: 100%; }

/* ============================================================
 * NAVIGATION
 * ============================================================ */

.navigation { padding: 5px 0; color: #888; }

.navigation A SPAN,
.navigation SPAN SPAN { padding: 0 5px; }

/* ============================================================
 * LAYOUT
 * ============================================================ */

BODY { margin: 10px 0; }

.wrapper { width: 1024px; text-align: left; margin: auto; }

#header { height: 110px; background: url(images/bgheader.png) no-repeat; }

#mainmenu { text-align: right; line-height: 1; font-size: 110%; }

#main { padding-top: 10px; }

#body-column { float: left; width: 160px; padding: 0 20px; overflow: hidden; }

#body { float: right; width: 784px; padding: 0 20px; overflow: hidden; }

#footer { font-size: 90%; color: black; padding: 10px 20px 10px 220px; width: 784px; text-align: center; }

/* ------------------------------------------------------------
 * LAYOUT: index
 * ------------------------------------------------------------ */

#index #body,
#index #footer { width: 984px; padding: 0 20px; }

/* ------------------------------------------------------------
 * COMPONENT: logo (header)
 * ------------------------------------------------------------ */

#logo { margin: 0; padding: 0; width: 635px; height: 115px; float: left; }
#logo A { width: 635px; height: 115px; display: block; }

/* ------------------------------------------------------------
 * COMPONENT: masterheader (header)
 * ------------------------------------------------------------ */

#masterhead { width: 389px; height: 115px; float: right; }

/* ------------------------------------------------------------
 * PLACEHOLDER: main menu
 * ------------------------------------------------------------ */

#mainmenu * { color: #888; }

#mainmenu DIV.component DIV.component { margin: 0; padding: 0; }
#mainmenu DIV.component { margin: 0; margin-left: 20px; padding: 10px 0; display: block; float: right; }
#mainmenu DIV.component DIV,
#mainmenu DIV.component P { float: left; display: block; }
#mainmenu DIV.component P { padding-left: 5px; margin: 0; }

#mainmenu H3, #mainmenu LI { font-weight: bold; font-size: 100%; padding: 0; margin: 0; padding-right: 5px; padding-left: 15px; margin-left: 10px; background: url(images/bgtoptitle.png) no-repeat left 0.15em; display: block; float: left; }
#mainmenu DIV.top,
#mainmenu DIV.bottom { display: none; }
#mainmenu DIV.content { display: block; padding: 0; margin: 0; float: left; }

#mainmenu LI { margin-right: 20px; margin-left: 0; }

#mainmenu UL { margin: 0; padding: 0; }

/* ------------------------------------------------------------
 * COMPONENT: user account (mainmenu)
 * ------------------------------------------------------------ */

/* ------------------------------------------------------------
 * COMPONENT: cart (mainmenu)
 * ------------------------------------------------------------ */

#mainmenu DIV.cart-empty DIV.content { display: none; }
#mainmenu DIV.comp-boxcart DIV.clear { display: none; } /* padding bug with IE */

/* ------------------------------------------------------------
 * PLACEHOLDER: breadcrumb
 * ------------------------------------------------------------ */

#pathway { text-align: left; padding: 0 0 10px; display: none; }
#pathway * { color: #888; }

#pathway .comp-breadcrumb H3 { display: none; }
#pathway .comp-breadcrumb UL { margin: 0; padding: 0; list-style: none; }
#pathway .comp-breadcrumb LI { display: inline; white-space: nowrap; padding-left: 15px; padding-right: 5px; background: url(images/bulletpathway.png) no-repeat left 2px; }
#pathway .comp-breadcrumb LI.first { background: none; padding-left: 0; }

/* ------------------------------------------------------------
 * PLACEHOLDER: body column
 * ------------------------------------------------------------ */

#body-column { font-size: 90%; }
#body-column TD { font-size: 90%; }
#body-column H3 { margin: 0; padding: 0; font-size: 120%; font-weight: bold; color: black; border-bottom: solid 4px black; text-transform: uppercase; }
#body-column DIV.content,
#body-column DIV.content A { color: #666; }
#body-column DIV.content { padding: 3px 0; }
#body-column DIV.bottom { margin-bottom: 20px; }
#body-column .price { font-size: 110%; }
#body-column OL { margin: 0; padding: 0; list-style: decimal inside; font-weight: normal; }
#body-column UL { margin: 0; padding: 0; list-style: none; text-align: left; }
#body-column LI { margin: 0; padding: 2px 0; }
#body-column LI LI { padding-left: 10px; }
#body-column .selected { font-weight: bold; }
#body-column DIV.content DIV.bottom { margin-bottom: 10px; }
#body-column DIV.content P { margin: 0; padding: 0; }

/* ------------------------------------------------------------
 * COMPONENT: search (body-column)
 * ------------------------------------------------------------ */

#body-column .comp-boxsearch H3,
#body-column .comp-boxsearch SPAN.submit { display: none; }

/* ------------------------------------------------------------
 * PLACEHOLDER: body
 * ------------------------------------------------------------ */

#body H1 { margin: 0; padding: 0; font-size: 180%; font-weight: normal; }
#body H3 { border-bottom: solid 1px #ccc; font-size: 140%; font-weight: bold; margin: 0; padding: 0; }

#body .box DIV.content { padding: 0.7em 0; }

/* ------------------------------------------------------------
 * PLACEHOLDER: footer
 * ------------------------------------------------------------ */

#footer H3 { display: none; }
#footer A { color: #2c2c2c; font-weight: normal; }
#footer UL { margin: 0; padding: 0; list-style: none; }
#footer LI { display: inline; list-style: none; margin-right: 20px; padding: 0; }
#footer P { margin: 0; padding: 4px 0; }

/* ------------------------------------------------------------
 * COMPONENT: category listing (body)
 * ------------------------------------------------------------ */

#body .comp-catlist TD { vertical-align: top; font-weight: bold; padding: 5px 0; }
#body .comp-catlist TD P { padding: 0; margin: 0; }
#body .comp-catlist TD P A { font-weight: normal; }

/* ------------------------------------------------------------
 * COMPONENT: product description
 * ------------------------------------------------------------ */

.comp-productdescription { display: none; }

/* ------------------------------------------------------------
 * COMPONENT: product header
 * ------------------------------------------------------------ */

.comp-productheader DIV.box H3 { display: none; }
.comp-productheader TD.productimage { padding: 5px 7px; width: 150px; min-width: 150px; text-align: center; white-space: nowrap; vertical-align: top; }
.comp-productheader TD.productimage DIV.tell-a-friend { margin: 0.5em 0 0; }
.comp-productheader TD.productinfo { padding: 5px 7px; vertical-align: top; padding-left: 1em; width: 100%; }
.comp-productheader TD.productinfo DIV { padding: 0; }
.comp-productheader .price { font-size: 100%; }
.comp-productheader .manufacturer { margin: 0; float: right; }
.comp-productheader DIV.price { font-size: 200%; font-weight: bold; margin-top: 0; line-height: 1.1; margin-bottom: 10px; }
.comp-productheader .xinfo { text-align: left; }

.comp-productheader .add-to-cart SPAN { margin-left: 1em; vertical-align: middle; }
.comp-productheader .add-to-cart .quantity INPUT { width: 30px; text-align: center; background: #eee !important; padding: 2px; border: solid 1px #aaa; font-weight: bold; color: black; }
.comp-productheader .add-to-cart .add INPUT { vertical-align: middle; margin-top: -2px; }

.comp-productheader .attributes { margin: 1em 0; }
.comp-productheader .attributes .formfd-label { clear: both; float: left; padding-right: 10px; }
.comp-productheader .attributes INPUT,
.comp-productheader .attributes SELECT { width: auto; }

.comp-productheader DIV.box H3 { display: none; }

.comp-productheader .comp-productdescription { display: block; }

.comp-productheader TABLE.productinfo { border: solid 1px #ccc; padding: 10px; }

.comp-productheader .productbuynow { margin-top: 5px; border: solid 1px #ccc; padding: 10px; text-align: right; }

/* ------------------------------------------------------------
 * COMPONENT: product thumb
 * ------------------------------------------------------------ */

.products-thumbnail TD { text-align: center; padding: 5px; }

.product-thumb { margin: auto; border-collapse: collapse; border: solid 1px #ccc; width: 192px; }
.product-thumb TD { padding: 0; vertical-align: top; text-align: left; border: solid 1px #ccc; }
.product-thumb TD.image { vertical-align: middle; text-align: center; height: 202px; }
.product-thumb TD.image:hover { border: solid 1px black; }
.product-thumb P.title { height: 30px; font-weight: bold; padding: 10px; line-height: 1.2; overflow: hidden; margin: 0; }
.product-thumb P.price { font-size: 160%; padding: 0; margin: 0; padding-right: 20px; text-align: right; }
.product-thumb P.buynow { text-align: center; padding: 0; padding-bottom: 10px; }

/* ------------------------------------------------------------
 * COMPONENT: product thumb (body column))
 * ------------------------------------------------------------ */

#body-column .product-thumb { width: 100%; }
#body-column .product-thumb TD { padding: 4px 5px; }
#body-column .product-thumb TD.image { height: auto; }
#body-column .product-thumb P.stock { text-align: right; padding: 2px 0; }
#body-column .product-thumb P.title { height: auto; }

/* ------------------------------------------------------------
 * COMPONENT: product menu
 * ------------------------------------------------------------ */

#body .inline-menu { font-family: Arial; }
#body .inline-menu UL { margin: 0; padding: 0; padding-top: 9px; line-height: 26px; height: 26px; text-align: center; }
#body .inline-menu LI { color: #666; margin: 0; }
#body .inline-menu LI * { background: url(images/ptabl.png) no-repeat left top; padding: 6px 0px 5px 13px; }
#body .inline-menu LI * SPAN { background: url(images/ptabl.png) no-repeat left top; padding: 6px 13px 5px 0px; }
#body .inline-menu A { text-decoration: none; color: black; }
#body .inline-menu LI SPAN.first { background: url(images/ptablfirst.png) no-repeat left -52px; }
#body .inline-menu LI A.first { background: url(images/ptablfirst.png) no-repeat left top; }
#body .inline-menu LI SPAN SPAN { background: url(images/ptabr.png) no-repeat left -52px; }
#body .inline-menu LI A SPAN { background: url(images/ptabr.png) no-repeat left top; }
#body .inline-menu LI SPAN.last { background: url(images/ptabr.png) no-repeat right -52px; }
#body .inline-menu LI SPAN.last SPAN { background: url(images/ptabr.png) no-repeat right -52px; }
#body .inline-menu LI A.last SPAN { background: url(images/ptabr.png) no-repeat right top; }
#body .inline-menu LI A:hover,
#body .inline-menu LI A:active { background: url(images/ptabl.png) no-repeat left -26px; }
#body .inline-menu LI A.first:hover,
#body .inline-menu LI A.first:active { background: url(images/ptablfirst.png) no-repeat left -26px; }
#body .inline-menu LI A:hover SPAN,
#body .inline-menu LI A:active SPAN { background: url(images/ptabr.png) no-repeat left -26px; color: white; }
#body .inline-menu LI A.last:hover SPAN,
#body .inline-menu LI A.last:active SPAN { background: url(images/ptabr.png) no-repeat right -26px; }

#body .inline-menu LI * { *padding-top: 0; *padding-bottom: 0; }
#body .inline-menu LI * SPAN { *padding-top: 6px; *padding-bottom: 6px; }

/* ------------------------------------------------------------
 * COMPONENT: box cart (body-column)
 * ------------------------------------------------------------ */

#body-column DIV.comp-boxcart TD { vertical-align: top; }
#body-column DIV.comp-boxcart TD.quantity { padding-right: 7px; }
#body-column DIV.comp-boxcart .total { padding: 1px 7px; text-align: right; background: #aa3; color: white; margin: 2px 0; }
#body-column DIV.comp-boxcart .total * { color: white; }

/* ------------------------------------------------------------
 * COMPONENT: login
 * ------------------------------------------------------------ */

DIV.comp-login { margin: 0; float: left; width: 380px; }

/* ------------------------------------------------------------
 * COMPONENT: create account
 * ------------------------------------------------------------ */

DIV.comp-newaccount { margin: 0; float: right; width: 380px; }

/* ------------------------------------------------------------
 * PLACEHOLDER: checkout payment
 * ------------------------------------------------------------ */

#checkout-payment .comp-order-detail { display: none; }
#checkout-payment .comp-paymentconfirm .content { margin: 3em 0; }

/* ------------------------------------------------------------
 * COMPONENT: account general information
 * ------------------------------------------------------------ */

.comp-account-params .info { border-right: solid 1px #ccc; }

/* ------------------------------------------------------------
 * PLACEHOLDERS: during checkout phase
 * ------------------------------------------------------------ */

DIV.method .title { font-weight: bold; }
DIV.method .subtitle { font-weight: normal; }
DIV.method TABLE.listing TD,
.method TABLE.listing TH { border: none; padding: 5px 7px; }

DIV.address P { margin: 0; padding: 0; }

#body DIV.address { float: left; width: 200px; margin-top: 1em; }
#body DIV.shipping,
#body DIV.payment { float: right; width: 564px; padding: 0; margin: 0; margin-top: 1em; }

/* ------------------------------------------------------------
 * CHECKOUT PROGRESS BAR
 * ------------------------------------------------------------ */

DIV.checkout-bar { margin-top: 1em; text-align: center; height: 37px; padding: 0; background: url(images/bgcheckoutbar.png) repeat-x; }
DIV.checkout-bar OL { list-style: none; padding: 0; margin: auto; height: 37px; width: 500px; }
DIV.checkout-bar LI { margin: 0; height: 37px; line-height: 1; float: left; width: 100px; }
DIV.checkout-bar LI A,
DIV.checkout-bar LI SPAN { background: url(images/checkoutbar_fr.png) top left no-repeat; height: 37px; line-height: 37px; float: none; width: 100px; display: block; border: 0; text-decoration: none; }
DIV.checkout-bar LI * SPAN { display: none; }

/* Step 1 */
DIV.checkout-bar LI.cart SPAN { background-position: 0px -74px; }
DIV.checkout-bar LI.cart A.done { background-position: 0px -37px; }
DIV.checkout-bar LI.cart SPAN.selected { background-position: 0px 0px; }

/* Step 2 */
DIV.checkout-bar LI.address SPAN { background-position: -100px -74px; }
DIV.checkout-bar LI.address A.done { background-position: -100px -37px; }
DIV.checkout-bar LI.address SPAN.selected { background-position: -100px 0px; }

/* Step 3 */
DIV.checkout-bar LI.shipping SPAN { background-position: -200px -74px; }
DIV.checkout-bar LI.shipping A.done { background-position: -200px -37px; }
DIV.checkout-bar LI.shipping SPAN.selected { background-position: -200px 0px; }

/* Step 4 */
DIV.checkout-bar LI.confirm SPAN { background-position: -300px -74px; }
DIV.checkout-bar LI.confirm A.done { background-position: -300px -37px; }
DIV.checkout-bar LI.confirm SPAN.selected { background-position: -300px 0px; }

/* Step 5 */
DIV.checkout-bar LI.payment SPAN { background-position: -400px -74px; }
DIV.checkout-bar LI.payment A.done { background-position: -400px -37px; }
DIV.checkout-bar LI.payment SPAN.selected { background-position: -400px 0px; }

/* ------------------------------------------------------------
 * PAGE: category
 * ------------------------------------------------------------ */

#page-category DIV.filter { display: none; }