body {
    font-family: Arial;
    font-size: 12px;
    color: #677180;
}

#container {
    width: 960px;
    margin: 0 auto;
}

/* top menu */

#menu {
    float:left;
    width:100%;
    overflow:hidden;
    position:relative;
}

#menu ul {
    clear:left;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
    text-align:center;
}

#menu ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0 10px;
    padding:0;
    position:relative;
    right:50%;
}

#menu ul li.separator {color: #d2d2d2;}
#menu ul li.separator:before {content: '|';}

#menu ul li a {
    display:block;
    color:#677180;
    font-size: 12px;
    text-decoration:none;
}

#menu ul li a.active, #menu ul li a:hover {color:#677180; font-weight: 700;}


/* widths */

.two-three {
    width: 625px;
    overflow: hidden;
}

.one-three {
    width: 295px;
    margin-left: 20px;
    overflow: hidden;
}

.full {
    width: 940px;
    overflow: hidden;
}

.margin-left {
    margin-left: 15px;
}

.margin-top {
    margin-top: 25px;
}

.negative-margin-top {
    margin-top: -25px;
}

.overflowed {
    overflow: hidden;
}

.padding {
    padding: 0 15px;
}

/* header */

#header {
    text-align: center;
    overflow: hidden;
    padding-top: 40px;
}

#header h1 {
    font-weight: normal;
    font-size: 24px;
    margin: 0;
    font-weight: 300;
    padding: 0;
}

.box.margin {margin:0 80px;}

/* boxes styles */

#box-wrapper {
    width: 980px;
    background: url('../images/shadow-box.png') no-repeat center bottom;
    padding-bottom: 70px;
    margin: 0 auto;
}

#box-wrapper img {max-width: none;}

.accordion {
    margin: 30px auto 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    box-shadow: 0px 0px 4px #777;
}

.accordion li {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    background: url('../images/box-bg.png') repeat-x;
    position: relative;
}

.accordion.horizontal {
    width: 940px;
    height: 331px;
}

.accordion.horizontal li {
    width: 235px;
    height: 331px;
    float: left;
}

.accordion.horizontal.hovered li {
    width: 66px;
}

.accordion.horizontal li.active {
    width: 742px;
}

.box-description {
    float: left;
    width: 600px;
    position: relative;
    background: url('../images/div.png') left 140px repeat-x;
    height: 331px;
    margin-left: 35px;
}

.box-description h3 {
    font-size: 18px;
    margin: 0;
    padding: 0;
    font-weight: 300;
}

.box-description h3 span {font-weight: 700;}
.box-description p {line-height: 19px;}

.box-description .about {
    position: absolute;
    background: url('../images/ico-info.png') no-repeat left 18px;
    left: 0;
    padding-left: 80px;
    top: 20px;
    height: 100px;
}

.box-description .include {
    position: absolute;
    background: url('../images/ico-details.png') no-repeat left 15px;
    padding-left: 90px;
    left: 0px;
    top: 150px;
}

.box-description .desc.first {margin-left: -10px;}

.box-description .desc  {
    display: inline-block;
    padding: 0 6px;
    text-align: center;
    font-size: 12px;
}

.box-description .include h3 {margin-bottom: 5px;}

.box-description .div {
    display: inline-block;
    height: 32px;
    width: 1px;
    background: #cdcfd4;
    margin-left: 1px;
    margin-right: 1px;
}

.box-description .desc strong {
    font-size: 18px;
    color: #3889da;
}

.box-description .price {
    position: absolute;
    bottom: 21px;
    width: 100%;
}

.box-description .button {
    width: 300px;
    float: right;
    text-align: right;
}

.box-description .total {
    width: 70px;
    float: left;
    text-align: right;
    line-height: 16px;
}

.box-description .sum {
    float: left;
    width: 200px;
    margin-left: 20px;
    margin-top: 7px;
}

.box-description .sum span {
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
}

.box-description .sum span sup {
    font-size: 14px;
}

.box-description .sum span .currency {
    font-size: 14px;
    margin-left: -1px;
}

.box-tab {
    font-size: 18px;
    color: #fff;
    float: left;
    width: 66px;
    height: 331px;
    box-shadow: 4px 0 18px #A7A7A7;
}

.box-tab span {
    -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
    -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    display: block;
    height: 184px;
    text-align: center;
    width: 229px;
    text-shadow: 0px 1px #111;
}

.tab-blue .box-tab {background: url('../images/tab-blue.jpg') no-repeat;}
.tab-blue .box-tab span {text-shadow: 0px 1px #406EFD;}
.tab-violet .box-tab {background: url('../images/tab-violet.jpg') no-repeat;}
.tab-violet .box-tab span {text-shadow: 0px 1px #2B3155;}
.tab-orange .box-tab {background: url('../images/tab-orange.jpg') no-repeat;}
.tab-orange .box-tab span {text-shadow: 0px 1px #914500;}
.tab-yellow .box-tab {background: url('../images/tab-yellow.jpg') no-repeat;}
.tab-yellow .box-tab span {text-shadow: 0px 1px #A29500;}

/* pagination */

#pagination {
    width: 860px;
    margin: -20px auto 70px;
    position: relative;
}

#pagination .btn-prev, #pagination .btn-next {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    border-radius: 8px;
    color: #697297;
    font-size: 12px;
    font-weight: 700;
    height: 29px;
    line-height: 29px;
    vertical-align: middle;
    background: url('../images/pagination-bg.png') repeat-x;
    width: 130px;
    border-left: 1px solid #cbced3;
    border-right: 1px solid #cbced3;
    box-shadow: 0 1px 1px #E0E0E0;
    text-align: center;
}

#pagination .btn-prev {
    left: 0;
    top: 0;
}

#pagination .btn-next {
    right: 0;
    top: 0;
}

/* buttons */

.btn-green {
    border-radius: 18px;
    height: 33px;
    background: url('../images/btn-green.png') repeat-x;
    color: #fff;
    text-shadow: 0 1px #4b7321;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    padding: 0 20px;
    vertical-align: middle;
    line-height: 33px;
    box-shadow: 0 2px 3px #b9babb;
    cursor: pointer;
}

.btn-green:hover {color:#c3f28c; text-decoration: none;}

.ico-cart, .ico-info {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../images/ico-cart.png') no-repeat;
    margin-right: 4px;
    vertical-align: text-top;
}

.ico-info {background: url('../images/ico-info.png') no-repeat;}

/* bottom */

#footer {
    text-align: center;
    overflow: hidden;
}

#footer h2 {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    padding: 50px 0 10px;
    margin: 0 auto 30px;
    background: url('../images/shadow-line.png') no-repeat center top;
    line-height: 26px;
}

#footer h2 span {
    display: block;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

#footer .box {
    width: 260px;
    padding: 0;
    text-align: center;
    float: left;
}

#footer .box h3 {
    font-weight: 700;
    color: #5b9834;
    font-size: 18px;
    padding: 35px 0 15px;
    margin: 0;
}

#footer .blue-dot {
    background: url('../images/dot-blue.png') no-repeat center top;
}

#footer .orange-dot {
    background: url('../images/dot-orange.png') no-repeat center top;
}

#footer .yellow-dot {
    background: url('../images/dot-yellow.png') no-repeat center top;
}