@charset "utf-8";

/*-------------------------------CUSTOM DEFINES----------------------------------------*/
@font-face {
    font-family: 'DBOzoneXMedium';
    src: url('../fonts/db_ozone_x_med-webfont.eot');
    src: url('../fonts/db_ozone_x_med-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/db_ozone_x_med-webfont.woff') format('woff'),
         url('../fonts/db_ozone_x_med-webfont.ttf') format('truetype'),
         url('../fonts/db_ozone_x_med-webfont.svg#DBOzoneXMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*-------------------------------DEFINE BODY PROPERTIES----------------------------------------*/
body { background: url(../images/background.jpg) repeat-x left top #f1f0d7; color: #00778c; }

a { color: #e30613; }
a:hover { text-decoration: underline; color: #e30613; }

h1, h2, h3, h4, h5, h6 { font-weight: bold; display: block; line-height: 1.3em; }
h1 { font-size: 3.2em; }
h2 { font-size: 2.4em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.8em; }

strong, b { font-weight: bold; }
em, i { font-style: italic; }

div { z-index: 1; display: block; }

/* CUSTOM CLASS */
.center { margin: 0px auto; }
.left { float: left; display: inline; }
.right { float: right; display: inline; }
.clear { clear: both; margin: 0px; padding: 0px; overflow: hidden; line-height: 0px; font-size: 0em; height: 0px; visibility: hidden; display: block; }
.dott { height: 0px; overflow: hidden; border-bottom: dotted 1px #ccc; margin: 5px 0px; }
.line { height: 0px; overflow: hidden; border-bottom: solid 1px #ccc; margin: 5px 0px; }
.inline { display: inline-block; zoom: 1; }
.red { color: #e30613; }
.green { color: #365200; }
.blue { color: #153a44; }
.hint { color: #888; font-size: .96em; font-style: italic; }

input, textarea, select { font-size: 1em; }
.input { padding: 3px; border: solid 1px #ccc; color: #666; }
.form { font-weight: normal; }
.form li { margin-bottom: 8px; }
.form li label { width: 140px; font-weight: bold; text-align: right; }
.form li label.top { vertical-align: top; padding-top: 2px; }
.form.padding label { padding-right: 10px; }

.txtcenter { text-align: center; }
.txtleft { text-align: left; }
.txtright { text-align: right; }

.msginfo { background: url(../images/icn_alert_info.png) no-repeat 10px center #b8e5f0; color: #153a44; padding: 10px 32px; border: solid 1px #7bb9d0; font-weight: bold; }
.msgwarning { background: url(../images/icn_alert_warning.png) no-repeat 10px center #f6f4b4; color: #7a6800; padding: 10px 32px; border: solid 1px #c6a300; font-weight: bold; }
.msgerror { background: url(../images/icn_alert_error.png) no-repeat 10px center #f1d9d8; color: #e30613; padding: 10px 32px; border: solid 1px #cd0a00; font-weight: bold; }
.msgsuccess { background: url(../images/icn_alert_success.png) no-repeat 10px center #e3f6bf; color: #365200; padding: 10px 32px; border: solid 1px #80c200; font-weight: bold; }

.break { overflow: hidden; }
.break.twen { height: 20px; }
.break.fift { height: 15px; }
.break.ten { height: 10px; }
.break.five { height: 5px; }

.db { font-family: "DBOzoneXMedium"; font-weight: normal; }

.mainTitle { color: #e30613; font-size: 3.6em; line-height: 1em; }
.subTitle { color: #ff1969; font-size: 1.2em; line-height: 1em; font-family: Georgia; }
.extraTitle { font-size: 1.2em; line-height: 1em; font-style: italic; }
.speTitle { width: 480px; height: 42px; line-height: 42px; color: #fff; background: url(../images/bg-head-product.png) no-repeat left top; font-size: 2.2em; padding-left: 20px; }

.button, .submitForm { height: 30px; line-height: 30px; background: url(../images/bg-button-red.png) no-repeat left top; padding: 0px 10px; color: #fff; text-decoration: none; border: none; outline: none; }
.submitForm { font-weight: bold; }
.submitForm:hover, .button:hover { color: #fff; text-decoration: none; }

/*END-------------------------------DEFINE CONTENT PROPERTIES----------------------------------------*/
#wrapper { position: relative; width: 923px; padding-bottom: 40px; }

#header { position: relative; width: 920px; height: 180px; }

#logo { position: absolute; left: 0px; top: 20px; width: 378px; height: 137px; overflow: hidden; }

#topMenu { position: absolute; left: 390px; top: 30px; height: 30px; line-height: 30px; }
#topMenu a { color: #e30613; font-size: .96em; font-weight: bold; display: block; padding: 0px 15px; text-decoration: none; }
#topMenu a.active { color: #fff; background: url(../images/bg-button-red.png) no-repeat left top #e30613; text-decoration: none; }

#search { position: absolute; right: 0px; top: 14px; width: 177px; height: 34px; line-height: 34px; background: url(../images/bg-search.png) no-repeat left top; padding: 0px 10px; }
#search .input { background: #fff; border: none; color: #777; width: 150px; }
#search .submit { width: 17px; height: 17px; background: url(../images/icon-search.png) no-repeat left top; border: none; outline: none; }

#bodyTop { width: 923px; height: 29px; background: url(../images/bg-body-top.png) no-repeat left top; }
#bodyBottom { width: 923px; height: 20px; background: url(../images/bg-body-bottom.png) no-repeat left top; }
#body { position: relative; width: 883px; min-height: 400px; background: url(../images/bg-body.png) repeat-y left top; padding: 94px 20px 40px 20px; font-weight: bold; }
#body .leftPanel { width: 500px; }
#body .rightPanel { width: 260px; margin-right: 40px; background: #f4f1e2; padding: 20px; }
#body .rightPanel .mainTitle { font-size: 2.2em; }
#body .rightPanel .photo { width: 258px; border: solid 1px #ccc; }
#body .fourBox { position: relative; width: 192px; padding: 0px 10px; margin-right: 10px; }
#body .fourBox.last { margin-right: 0px; }
#body .fourBox .bgTop { width: 192px; height: 15px; overflow: hidden; background: url(../images/bg-box-top.png) no-repeat left top; }
#body .fourBox .inside { width: 166px; min-height: 100px; background: url(../images/bg-box-body.png) no-repeat left bottom; padding: 10px 13px; padding-top: 48px; }
#body .fourBox .inside .photo { width: 164px; height: 78px; overflow: hidden; border: solid 1px #ccc; margin-bottom: 10px; }
#body .fourBox .inside p { margin-bottom: 10px; }
#body .fourBox .heading { position: absolute; left: -1px; top: 15px; width: 212px; height: 48px; background: url(../images/bg-box-heading.png) no-repeat left top; font-size:1.8em; padding-left: 24px; color: #e30613; line-height: 40px; }

#social { position: absolute; right: -45px; top: 300px; width: 47px; height: 182px; overflow: hidden; }

#menu { position: absolute; left: -11px; top: 0px; width: 951px; height: 58px; background: url(../images/bg-menu.png) no-repeat left top;  padding-left: 0px; padding-top: 16px; font-size: 2.4em; z-index: 1000; }
#menu div { font-size: .6em; }
#menu ul li { padding: 0px 40px; }
#menu a { text-decoration: none; }
#menu a:hover, #menu a.active { color: #00778c; }

#floatImg { position: absolute; right: 0px; top: -20px; width: 380px; height: 400px; z-index: 2000; }
#floatImg.homePage { background: url(../images/float-home.png) no-repeat left top; }

#floatCookie { position: absolute; left: 0px; top: 60px; width: 920px; height: 120px; background: url(../images/float-cookie.png) no-repeat left top; z-index: 0; }

#footer { position: absolute; left: 0px; bottom: -17px; width: 920px; height: 30px; line-height: 30px; background: url(../images/bg-footer.png) no-repeat left top; text-align: center; color: #fff; font-size: .96em; }

#breadcomp { font-weight: normal; }

.productDetail { width: 340px; }
.productThumb { width: 138px; height: 94px; border: solid 1px #ccc; }

.twoItem li { width: 243px; height: 188px; border: solid 1px #ccc; margin-right: 10px; margin-bottom: 20px; }
.twoItem li.last { margin-right: 0px; }
	
#pagination { height: 32px; line-height: 32px; text-align: center; }
#pagination ul li { width: 40px; height: 32px; border: solid 1px #e5e5e5; border-top: none; border-bottom: none; font-size: 1.1em; }
#pagination ul li a { display: block; color: #fff; }
#pagination ul li a:hover { background: #080100; }
#pagination ul li.next, #pagination ul li.prev { border: none; background: #dbb200; padding: 0px 10px; width: 50px; }
#pagination ul li.next a, #pagination ul li.prev a, #pagination ul li.next a:hover, #pagination ul li.prev a:hover { color: #080100; font-weight: bold; background: #dbb200; }
#pagination ul li.active { background: #b2b2b2; color: #fff; font-weight: bold; }