/* YUI CSS RESET */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
em{font-style:italic;font-weight:normal;}
strong{font-weight:bold;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:92%;font-weight:bold; color:#063f53;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:100%;line-height:100%;}
/* Page styles
================================ */
html { font-size: 75%; height: 100%; }
body { font: normal 1em/1.3 Arial, sans-serif; text-align: center; position: relative; background: url('../i/body-bg.jpg') repeat 0 0; }
div#page { margin: 0 auto; width: 999px; text-align: left; border-left: solid 1px #ededed; border-right: solid 1px #ededed; }
div#container { overflow: hidden; zoom: 1; padding: 15px; }
div#leftcol { float: left; width: 241px; }
div#rightcol { float: right; width: 220px; }
div#rightcol2 { display: none; }
div#centercol { margin: 0 240px 0 258px; }
div#centercol3 { margin: 7px 0 0 258px; }
div#content { padding: 0 10px; }
/* Common styles
================================ */
a { text-decoration: underline; color: #4d4d4d; outline: none; }
a:hover { text-decoration: none; }
p { margin: 3px 0 7px; }
p.center { text-align: center; }
a.more { float: right; color: #b30a10; font-size: 90%; }
.borders { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.banner { margin-bottom: 15px; text-align: center; }
.spacer { display: block; clear: both; height: 1px; font-size: 0; }
h1 { color: #bf0954; font-size: 1.8em; padding-left: 10px; margin-bottom: 10px; font-family: calibri; font-weight: normal; }
h2 { color: #bf0954; font-size: 1.5em; margin-bottom: 10px; font-family: calibri; font-weight: normal; }
h4 { color: #515151; font-size: 1.1em; padding-left: 12px; margin-bottom: 5px; font-family: calibri; text-transform: uppercase; }
#content { margin-top: 7px; padding: 10px; overflow: hidden; zoom: 1; border: solid 1px #e6e6e6; background: #fff; }
#content h1 { padding-left: 0; }
.pos { color: #009900; }
dl dt a { color: #bf0954; font-size: 1.2em; }
dl dd { margin-bottom: 10px; font-size: .95em; }
.content-img { float: left; margin: 0 10px 5px 0; }
.all-news { padding: 0 10px; }
/* Header styles
================================ */
#head { height: 122px; position: relative; }
#head img#logo { position: absolute; top: 13px; left: 36px; }
#head-tools { position: absolute; top: 5px; left: 315px; padding-left: 85px; background: url('../i/phone-ico.jpg') no-repeat 0 50%; }
#head-tools a { color: #6b6454; text-decoration: underline; font-size: .95em; }
#head-tools h3 { color: #bf0954; font-size: 1.6em; font-family: calibri; }
div.phone { color: #bf0954; font-size: 1.8em; font-family: calibri; }
div.phone span { color: #8d8d8d; }
a#add-favorite { padding: 2px 0 2px 20px; background: url('../i/fav-ico.jpg') no-repeat 0 0; }
div#head-title { position: absolute; top: 0; right: 30px; font-size: 0; height: 18px; width: 323px; background: url('../i/head-title.jpg') no-repeat 0 0; }
#search-form { position: absolute; top: 30px; right: 30px; }
#search-form input.txt { height: 17px; padding: 2px; margin-top: 18px; border: solid 1px #d4ccbf; border-right: 0; }
#search-form input.btn { vertical-align: top; }
#breadcrumbs { padding: 10px 10px 5px; }
#breadcrumbs a { font-size: .95em; margin: 0 3px; }
#breadcrumbs img { vertical-align: top; }
/* Menu & left column styles
================================ */
#main-menu { height: 42px; background: url('../i/menu-bg.jpg') repeat-x 0 0; }
#main-menu ul { overflow: hidden; zoom: 1; }
#main-menu ul li { float: left; margin: 0 17px; }
#main-menu ul li a { float: left; padding: 13px 20px 12px; text-decoration: none; text-align: center; color: #8b8b8b; font-family: Arial; }
#main-menu ul li a.sale { color: #fff; font-weight: bold; background: url('../i/menu-sale-bg.jpg') no-repeat 0 50%; }
#main-menu ul li a.c,
#main-menu ul li a:hover { background: #af0039; color: #fff; text-decoration: underline; }
ul.close { display: none; }
#calatog-menu { margin-bottom: 15px; background: url('../i/leftcol-menu-bg.jpg') repeat-y 0 0 #fff; }
#calatog-menu ul li { padding: 5px 0; }
#calatog-menu ul li a { display: block; padding: 5px 10px 0 25px; color: #5f5d5e; background: url('../i/menu-closed.jpg') no-repeat 10px 8px; }
#calatog-menu ul li ul { padding-top: 5px; }
#calatog-menu ul li ul li { padding: 0; }
#calatog-menu ul li ul li a { padding: 5px 10px 5px 40px; font-size: .95em; background: none; }
#calatog-menu ul li ul li a.c,
#calatog-menu ul li ul li a:hover { background: #fce5ed; }
#auth-form { height: 81px; padding: 8px; background: url('../i/auth-form-bg.jpg') no-repeat 0 0; }
#auth-form input.txt { float: left; padding: 2px; margin: 2px 0 5px; border: solid 1px #d3ccbc; }
#auth-form input.btn { vertical-align: top; }
#auth-form a { font-size: .95em; margin: 0 4px; }
/* Right column styles
================================ */
#basket { height: 60px; color: #6a6454; padding: 15px 8px; line-height: 22px; margin-bottom: 15px; background: url('../i/basket-bg.jpg') no-repeat 0 0; }
#basket b { color: #bd0050; }
#catalog-order { display: block; margin: 10px 5px 0; width: 50px; height: 30px; }
#basket-fly { display: none; position: absolute; width: 150px; height: 80px; background: #ccc; }
.box { margin-bottom: 15px; background: url('../i/rightcol-box-bg.jpg') repeat-y 0 0 #fff; }
#news-list { padding: 0 10px; }
#news-list li { padding: 10px 0; border-bottom: dotted 1px #515151; }
#news-list li p { font-size: .95em; color: #515151; }
#news-list li h5 { margin: 5px 0 7px; font-size: .95em; color: #515151; }
#news-list li span { display: block; padding: 1px 0; width: 75px; font-size: .95em; text-align: center; color: #fff; background: url('../i/news-date.jpg') no-repeat 0 0; }
/* Product styles
================================ */
#products-filter { padding: 0 10px; overflow: hidden; zoom: 1; margin: 10px 0; }
#products-filter li { float: left; color: #6b6356; font-size: .95em; margin-right: 15px; }
#products-filter li a { float: left; color: #6b6356; font-size: .95em; text-decoration: underline; }
#products-filter li.c { padding-left: 6px; background: url('../i/bg.jpg') no-repeat 0 0; }
#products-filter li.c a { padding: 0 6px 3px 0; color: #fff; background: url('../i/bg.jpg') no-repeat 100% 0; }
.product-line { display: block; clear: both; border-bottom: solid 1px #e6e6e6; margin: 5px 0; }
#category-descr { padding: 10px; font-size: .95em; border-top: solid 1px #e6e6e6; }
#product,
#products { overflow: hidden; zoom: 1; border: solid 1px #e6e6e6; background: #fff; }
#products .right { float: right; margin-right: 20px; }
.product { float: left; width: 205px; padding: 0 0 10px; margin: 10px; }
.prod-image { width: 205px; background: url('../i/product-top-bg.jpg') no-repeat 0 0; }
.prod-image a { display: block; text-align: center; padding: 15px; background: url('../i/product-bot-bg.jpg') no-repeat 0 100%; }
.product .h3 { display: block; margin: 5px 10px; font-size: 1.3em; color: #383838; }
.product p { font-size: .95em; color: #515151; }
.prod-code { display: block; margin: 0 0 5px; font-size: .95em; }
.prod-code b { color: #bf0954; }
.prod-info { overflow: hidden; zoom: 1; margin: 4px 0 0; text-align: right; border-top: dotted 1px #515151; padding: 5px 10px 3px; }
.prod-info span { float: left; color: #bf0954; font-size: 2em; }
.prod-delivery { padding: 10px; color: #515151; font-size: .95em; background: #f9f9f9; }
#product .prod-image { float: left; margin: 10px; }
#product #products { border: 0; }
.prod-card { padding: 10px; font-size: .95em; color: #6a6454; }
.prod-card .prod-info { border-top: 0; margin: 10px 0; }
#product p { margin: 0 10px; color: #515151; font-size: .95em; }
#add-to-favorite { font-size: .95em; color: #6a6454; padding: 2px 0 2px 20px; background: url('../i/fav-ico.jpg') no-repeat 0 0; }
.price-list { width: 95%; margin: 5px 10px; border-collapse: collapse; }
.price-list th { padding: 2px 5px; font-weight: bold; border: solid 1px #c82a6b; color: #fff; background: #e975a4; }
.price-list td { padding: 2px 5px; border: solid 1px #c82a6b; }
/* Order styles
================================ */
#order { overflow: hidden; zoom: 1; padding: 10px; border: solid 1px #e6e6e6; background: #fff; }
.basket { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.basket thead td { padding: 6px 8px; color: #5f5d5d; background: #fef7dd; }
.basket tbody td { padding: 6px 8px; }
.basket tbody td input { padding: 1px 2px; border: solid 1px #d3ccbd; }
.basket tbody td.price { font-size: 1.4em; color: #bf0954; font-weight: bold; }
.basket tbody td.act { vertical-align: bottom; }
.basket tbody td.act a { font-size: .95em; }
#order-delivery { padding: 10px; overflow: hidden; zoom: 1; margin: 10px 0; border-top: solid 1px #e6e6e6; }
#order-delivery #order-sum { float: right; color: #383838; }
#order-sum div span { color: #c82a6b; font-weight: bold; }
#delivery-point { font-size: 1.1em; margin-bottom: 7px; }
#sum-point { font-size: 1.5em; }
.order-info { padding: 10px; color: #c82a6b; font-size: .95em; font-weight: bold; margin-bottom: 10px; background: #f9f9f9; }
.order-form { width: 100%; }
.order-form tr th { font-size: .95em; padding: 2px 5px; text-align: right; }
.order-form tr td { font-size: .95em; padding: 2px 5px; text-align: left; }
.order-form tr th b { color: #c82a6b; }
.order-form tr td label.error { display: block; color: #c82a6b; }
textarea,
input.txt { padding: 2px; border: solid 1px #d3ccbc; }
.form-validate { padding: 10px; }
#choose-delivery { border-top: solid 1px #e6e6e6; }
#choose-delivery h1 { padding-left: 8px; }
#choose-delivery ul { padding: 0 20px; }
#choose-delivery ul li { font-size: .95em; padding-bottom: 10px; overflow: hidden; zoom: 1; }
#choose-delivery span.price { float: right; font-weight: bold; font-size: 1em; }
/* Pager styles
================================ */
.pager { clear: both; padding: 10px 20px; font-size: .95em; }
.pager a { margin: 0 2px; font-size: .95em; padding: 1px 4px; color: #686554; }
.pager span { color: #fff; padding: 1px 4px; font-weight: bold; background: #bd0953; }
.pager-top { border-bottom: solid 1px #e6e6e6; }
/* Calendar styles
================================ */
.calendar { width: 90%; margin: 0 10px; border-collapse: collapse; }
.calendar tr th,
.calendar tr td { padding: 1px 2px; text-align: center; font-size: .95em; }
.calendar tr th { font-weight: bold; }
.calendar tr td { border-bottom: solid 1px #e6e6e6; }
.calendar tr td a { font-weight: bold; color: #c82a6b; }
/* Callback styles
================================ */
#popup { display: none; position: absolute; width: 300px; border: solid 2px #ccc; background: #fff; }
/* Footer styles
================================ */
#foot { height: 47px; position: relative; background: url('../i/foot-bg.jpg') repeat-x 0 0; }
#foot p#copy { color: #6b6452; position: absolute; top: 20px; left: 40px; }
#foot img#sp { position: absolute; top: 10px; right: 40px; }
/* Calendar styles
================================ */
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url('../i/calendar.gif') no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
/* makes the input field shorter once the date picker code
* has run (to allow space for the calendar icon
*/
input.dp-applied {
width: 140px;
float: left;
}
table.jCalendar {
border: 1px solid #000;
background: #aaa;
border-collapse: separate;
border-spacing: 2px;
}
table.jCalendar th {
background: #333;
color: #fff;
font-weight: bold;
padding: 3px 5px;
}
table.jCalendar td {
background: #ccc;
color: #000;
padding: 3px 5px;
text-align: center;
}
table.jCalendar td.other-month {
background: #ddd;
color: #aaa;
}
table.jCalendar td.today {
background: #666;
color: #fff;
}
table.jCalendar td.selected {
background: #f66;
color: #fff;
}
table.jCalendar td.selected.dp-hover {
background: #f33;
color: #fff;
}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
background: #fff;
color: #000;
}
table.jCalendar tr.selectedWeek td {
background: #f66;
color: #fff;
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
background: #bbb;
color: #888;
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
background: #bbb;
color: #888;
}
/* For the popup */
/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */
div.dp-popup {
position: relative;
background: #ccc;
font-size: 10px;
font-family: arial, sans-serif;
padding: 2px;
width: 171px;
line-height: 1.2em;
}
div#dp-popup {
position: absolute;
z-index: 199;
}
div.dp-popup h2 {
font-size: 12px;
text-align: center;
margin: 2px 0;
padding: 0;
}
a#dp-close {
font-size: 11px;
padding: 4px 0;
text-align: center;
display: block;
}
a#dp-close:hover {
text-decoration: underline;
}
div.dp-popup a {
color: #000;
text-decoration: none;
padding: 3px 2px 0;
}
div.dp-popup div.dp-nav-prev {
position: absolute;
top: 2px;
left: 4px;
width: 100px;
}
div.dp-popup div.dp-nav-prev a {
float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
cursor: default;
}
div.dp-popup div.dp-nav-next {
position: absolute;
top: 2px;
right: 4px;
width: 100px;
}
div.dp-popup div.dp-nav-next a {
float: right;
}
div.dp-popup a.disabled {
cursor: default;
color: #aaa;
}
div.dp-popup td {
cursor: pointer;
}
div.dp-popup td.disabled {
cursor: default;
}