﻿/* overview */

.products
{
    padding-top:20px;
}

.products .item
{
    float:left;
    width:182px;
    background:url(images/background-product.png);
    display:inline;
    margin:0 14px 20px 14px;
}

.products .item img
{
    padding:6px;
}

.products .item .details
{
    float:left;
    background:url(images/background-product.png) no-repeat bottom left;
    padding:5px 0;
}

.products .item .details .name
{
    padding:0 15px;
    float:left;
    padding-bottom:2px;
    width:150px;
}

.products .item .details .promo
{
    padding:0 15px;
    float:left;
    height:1em;
    padding-bottom:2px;
    width:150px;
    color:#ee3032;
}

.products .item .details .price
{
    padding:0 15px;
    float:left;
    font-weight:bold;
}

.products .item .details .button
{
    float:left;
    padding:10px 15px;    
}

/* detail */
.productDetail
{
    width:640px;
    float:left;
}

.productDetail .detailLeft
{
    float:left; 
    width:290px
}

.productDetail .detailLeft .image
{
    float:left;
    width:255px;
}

.productDetail .detailLeft .image img
{
    background:#fff;
    padding:10px;
}

.productDetail .detailRight
{
    float:left;
    width:350px;
}

.productDetail .detailRight img.logo
{
    float:right;
    border:solid 1px #efece3;
    padding:10px;
    background:#fff;
}

.productDetail .info
{
    float:left;
    margin-top:2em;
    clear:both;
}

.productDetail .info h2
{
    margin:0.5em 0;
    padding:0;
}

.productDetail .info h2 img
{
    margin-bottom:-2px;
    display:inline;
    margin-right:0.5em;
}

.productDetail .image .order
{
    margin-top:12px;
}

.productDetail .image .buttons
{
    margin-top:12px;
}

.orderForm
{
    width:100%;
    float:left;
}

.orderButtons
{
    width:100%;
    float:left;
    text-align:right;
    margin-top:1em;
}


/* orderSpecifications */
table.orderSpecifications
{
    float:right;
}

table.orderSpecifications td
{
    padding:2px 0;
}



/* specifications */

table.specifications
{
    border-collapse:collapse;
}

table.specifications tr td
{
    padding:2px 0;
    margin:0;
    vertical-align:middle;
    border-bottom:solid 1px #ddd;
}

table.specifications tr td.first
{
    width:200px;
    text-align:left;
    padding-left:5px;
}

table.specifications tr td.second
{
    width:450px;
    padding-right:10px;
    text-align:left;
}

/* productSheet */

table.productSheet
{
    border-collapse:collapse;   
}

table.productSheet tr td
{
    border-bottom:1px solid #DDDDDD;
    margin:0;
    padding:2px 0;
    vertical-align:middle;
}


table.productSheet tr td.first
{
    padding-left:5px;
    width:200px;
    text-align:left;
}

table.productSheet tr td.second
{
    width:450px;
    padding-right:10px;
    text-align:left;
}

/* remark */
.productDescription,
.productPromotion,
.shopRemark
{
   margin:1em 0;
   padding:20px;
   width:597px;
   color:#ee3032;
   border:solid 1px #ee3032;
   line-height:1.6em;
   float:left;
}

.productDescription
{
    border-color:#ddd;
    color:#444;
}

.shopRemark 
{
   margin-top:0;
}

/* other */

.remark
{
    font-weight:bold;
    font-size:0.8em;
    text-transform:uppercase;
    width:95%;
    float:left;
    padding:2px 5px;
}

.basketButtons
{
   float:left;
   display:block;
   margin:2em 0;
   width:100%;
   text-align:right;
}

.basketButtons a
{
    margin-right:10px;
}

.basketTable, 
.messageTable, 
.totalTable
{
    border-right:solid 1px #ddd;
    border-bottom:solid 1px #ddd;
    border-left:solid 1px #eee;
    margin-bottom:1em;
    float:left;
}

.totalTable
{
    width:630px;
    border-collapse:collapse;
}

.totalTable .header,
.basketTable .header
{
    background:#EE3032 url(images/background-table-header.png);
    border-bottom:solid 1px #ccc;
    color:#fff;
    font-weight:bold;
}

.messageTable .header,
.basketTable .headerGray
{
    background:#EE3032 url(images/background-table-header-gray.png);
    border-bottom:solid 1px #ccc;
    color:#fff;
    font-weight:bold;
}

.basketTable .row
{
    border-bottom:solid 1px #ddd;
}

.basketTable .alt
{
    border-bottom:solid 1px #ddd;
}

.basketTable .row img, 
.basketTable .alt img
{
    padding:2px; 
    background:white;
    border:solid 1px #ddd;
}

.buttonsRight, 
.buttonsLeft,
.buttonsCenter
{
   margin:2em 0;
   float:left;
   width:100%;
}

.buttonsRight a
{
    margin-left:10px;
}

.buttonsLeft a
{
    margin-right:10px;
}

.buttonsRight
{
    text-align:right;
    width:630px;
}

.buttonsCenter
{
    text-align:center;
}

.buttonsLeft
{
    text-align:left;
}

#accountMenu, #messageMenu
{
    padding:1em 0;
}

#accountMenu a, #messageMenu a
{
    display:inline-block;
    text-decoration:none;
    background:url(images/background-button-narrow2.png) no-repeat;
    width:102px;
    margin-right:10px;
    padding:2px 0 2px 8px;
}

#accountMenu a.active, #messageMenu a.active
{
    color:#ee3032;
}


#steps
{
    float:left;
    display:inline;
    background:url(images/background-dot.png) repeat-x center left;
    margin-left:70px;
}

#steps a,
#steps span
{
    display:inline-block;
    width:30px;
    height:30px;
    text-align:center;
    line-height:30px;
    font-size:1.4em;
    color:#fff;
    background:url(images/background-circle.png);
    float:left;
    text-decoration:none;
}

#steps a.active,
#steps a:hover,
#steps span.active
{
    background:url(images/background-circle-active.png);
}

#steps .step1
{
    margin-left:0;
}

#steps .step2,
#steps .step3,
#steps .step4
{
    margin-left:120px;
}

#stepsText
{
    padding-left:10px;
    width:630px;
    float:left;
    margin-bottom:1em;
}

#stepsText div
{
    width:110px;
    padding:0 10px;
    margin:10px;
    text-align:center;
    float:left;
}

#stepsText div.active
{
    font-weight:bold;
}

.error
{
    background:#EE3032;
    color:#fff;
}
