body{background:#fff; text-align:center; font-family:Arial, sans-serif; padding:0px 0 50px; margin:0px;}

/* NAVIGATION-SKIP */
#navSkip { position: absolute; left: -3000px; }
#navSkip a:focus, #navSkip a:active { position: absolute; left: 3000px; }

/* LAYOUT */
#header, #main, #navBar, #motive, #footer, .inBox{width:100%}
.wrapShadow{width:960px; margin:0 auto; text-align:left; padding:0 12px; background:url('/img/bg/shadow.png') 0 0 repeat-y;}

#header .inBox{padding:1px 0; height:72px; position:relative; overflow: hidden;}
#main .inBox{width:100%; min-height:500px; padding:0px 0;}

#navBar{background:#589f30 url('/img/bg/navBar.png') 0 0 repeat-x;}

/* COL */
#col-content {float: right; display: inline; width: 630px;}
#col-side {float: left; display: inline; width: 240px;}

/* IN */ 
#main .in {padding: 25px 30px;}

/* LOGO BOX */
#logoBox .title{margin:0; padding:0px; font-size:117%; line-height:1; color:#333; position:absolute; left:26px; top:24px;}
#logoBox .logo{float:left; padding-right:9px; width:129px;}
#logoBox .claim{float:left; padding:0 0 0 40px; background:url('/img/bg/logoLine.png') 0 70% no-repeat; line-height:1.3; margin: -5px 0 0;}
#logoBox img{display:block;}

/* SIDE LOGO */
#sideLogo .title{margin:0; padding:0px; font-size:117%; line-height:1; color:#333; position:absolute; right:26px; top:24px;}

/* BOXES */
.darkGray-box{border-top:1px solid #666666; background:#7c7c7c url('/img/bg/darkGray-box.png') 0 0 repeat; border-bottom:2px solid white; color:white;}
.darkGray-box a{color:#ffea00}
.darkGray-box a:hover{color:#fff}
.lightGray-box{background:#fff url('/img/bg/lightGray-box.png') 0 100% repeat-x;}

/* SEARCH BOX */
#searchBox{float:right; padding:10px 30px 0 0;}
#searchBox .int-text{padding:4px 3px 3px;width:130px; font-size:100%; font-family:Arial, sans-serif;}

/* MAIN MENU */
#mainMenu {width:715px; float:left; display:inline; padding:9px 0 9px;}
#mainMenu li{float:left; display:inline; margin:0; }
#mainMenu .item{float:left; display:inline; color:#fff; margin:0; font-weight:normal; font-size:117%; text-decoration:none; background:url('/img/bg/mainMenu-item.png ') 0 0 no-repeat;}
#mainMenu .item .w{float:left; display:inline; position:relative; padding:4px 15px 0; height:23px; background:url('/img/bg/mainMenu-item.png ') 100% -100px no-repeat;}
#mainMenu .border{position:absolute; top:100%; left:-28px; width:100%; height:15px; background:url('/img/bg/mainMenu-item.png ') 15px -950px no-repeat; display:none;}
#mainMenu .border span{height:100%; display:block; background:url('/img/bg/mainMenu-item.png') 100% -980px no-repeat; position:relative; left:15px;}
#mainMenu .first .item, #mainMenu .last .item .w{background:none;}

#mainMenu a.item:hover, #mainMenu strong.item, #mainMenu a.hover, #mainMenu .active a.item {background:url('/img/bg/mainMenu-item.png ') 0 -200px no-repeat; margin-left:-13px; position:relative; z-index:3;}
#mainMenu a.item {cursor:pointer;}
#mainMenu a.item:hover .w, #mainMenu strong.item .w, #mainMenu a.hover .w, #mainMenu .active a.item .w {background:url('/img/bg/mainMenu-item.png ') 100% -300px no-repeat; padding-left:28px;}
#mainMenu a.item:hover .border, #mainMenu strong.item .border, #mainMenu a.hover .border, #mainMenu .active a.item .border {display:block;}

#mainMenu .first a.item .w {padding-left: 15px !important;}
#mainMenu .first a.item:hover, #mainMenu .first strong, #mainMenu .first a.item.hover  {background:url('/img/bg/mainMenu-item.png ') -30px -200px no-repeat; margin-left:0px;}
#mainMenu .first a.item:hover .border, #mainMenu .first a.strong .border, #mainMenu .first a.item.hover .border {background: none; left: 0;}
#mainMenu .first a.item:hover .border span, #mainMenu .first a.strong .border span, #mainMenu .first a.item.hover .border span {background-position:-550px -1020px; position:relative; left: 0px;}

#mainMenu .last a.item:hover .w, #mainMenu .last strong.item .w, #mainMenu .last a.hover .w, #mainMenu .last.active a.item .w{ background:url('/img/bg/mainMenu-item.png ') 100% -400px no-repeat !important;}
#mainMenu .last .item .border span {background-position:100% -1061px;}

#mainMenu .active a strong{font-weight: normal;}

/* MOTIVE */
#motive{background:#e1e1e1 url('/img/bg/motive.png') center bottom no-repeat;}
#motive .inBox{padding:0 0 1px; background:#c5c5c5 url('/img/bg/motive-border.png') 0 100% no-repeat; position:relative;}
#motive .fragments{background:#dddddd url('/img/bg/motive-fragment.png') 0 0 repeat-x; min-height:168px;}
#motive .spc{padding:1px 0; min-height:166px; width:100%; position:absolute; left:0px; top:0; overflow: hidden;}
#motive .overlay{background:url('/img/bg/motive-overlay.png') 0 0 no-repeat; width:208px; height:168px; overflow:hidden; position:absolute; right:0; top:0; z-index:2;}
#motive a{color:#333; text-decoration:none; background:url('/img/bg/dot-green.png') 1px 11px no-repeat; padding:4px 1px 4px 10px; display:block;}
#motive a:hover{color:#4d8c29;}
#motive .reset{float:left; width:161px; margin-right:30px;}
#motive .reset li{border-top:1px solid #d6d6d6; vertical-align:bottom;}
#motive .reset li:first-child{border:none;}
#motive .text{padding:5px 0 0 30px; display:none;}
.motive1{background:url('/img/illust/motive-1.jpg') 100% 0 no-repeat;}
.motive1 h2{font-size: 250%; margin: 0;}
.motive2{background:url('/img/illust/motive-2.jpg') 500% 0 no-repeat;}
.motive3{background:url('/img/illust/motive-3.jpg') 500% 0 no-repeat;}
.motive4{background:url('/img/illust/motive-4.jpg') 500% 0 no-repeat;}
.motive5{background:url('/img/illust/motive-5.jpg') 500% 0 no-repeat;}
.motive6{background:url('/img/illust/motive-6.jpg') 500% 0 no-repeat;}
.motive7{background:url('/img/illust/motive-7.jpg') 500% 0 no-repeat;}
#motive .active{z-index:1;}
#motive .active .text{display:block;}

/* SIDE MENU */
#sideMenu {position: relative; margin: 7px 0 15px;}
#sideMenu ul.reset {border: 1px solid #cfcfcf; border-width: 0 1px 1px; background: url('/img/bg/side-menu.png') 0 0 repeat; color: #fff;}
#sideMenu li {border-bottom: 1px solid #969696;}
#sideMenu li a, #sideMenu li strong {display: block; border-bottom: 1px solid #5d5d5d; font-weight: normal; color: #fff; text-decoration: none; padding: 7px 15px 7px 30px; background: url('/img/bg/side-menu-a.png') 13px 0.90em no-repeat; font-size: 108%;}
#sideMenu li a:hover {color: #333; background: #ffd500 url('/img/bg/side-menu-a-active.png') 13px 0.9em no-repeat;}
#sideMenu li.active {background: #5F5F5F url('/img/bg/side-menu-active.png') 0 0 repeat;}
#sideMenu li.active a, #sideMenu li strong {background: url('/img/bg/side-menu-a.png') 13px 0.9em no-repeat; color: #fff;}
#sideMenu li.last, #sideMenu li.last a, #sideMenu li.last strong, #sideMenu li.last li.last a, #sideMenu li.last li.last strong {border: none;}
#sideMenu li.active ul.reset {border: none; background: url('/img/bg/sub-menu.png') 0 0 repeat; border-top: 1px solid #969696;}
#sideMenu li.active li {border: none;}
#sideMenu li.active li a, #sideMenu li.active li strong {font-size: 100%; padding: 5px 15px 5px 45px; background: url('/img/bg/side-menu-a-active.png') no-repeat; background-position: 30px 0.7em !important; border-bottom: 1px solid #717171;}
#sideMenu li.active li a:hover, #sideMenu li.active li.active a, #sideMenu li.active li strong {background-color: #ffce00; color: #333;}
#sideMenu .cor {width: 5px; height: 5px; background-image: url('/img/bg/corner-side-menu.png');}

/* HOME */
#home .bannerBox{float:right; display: inline; width:290px; margin-top:25px;}
#home .in{padding:1px 30px 20px;}
#home .newsBox{float:left; display: inline; width:240px; padding-right:62px;}
#home .helpBox{float:left; display: inline; width:270px;}
#home .col-l{float:left; display: inline; width:580px;}
#home .col-r{float:right; display: inline; width:290px; overflow: hidden;}

/* BREADCRUMB */
#breadcrumb{background:#dfdfdf url('/img/bg/motive.png') center -330px no-repeat; font-size: 92%;}
.home #breadcrumb {background-position: center bottom;}
#breadcrumb .inBox{padding:0 0 1px; background:#dfdfdf url('/img/bg/breadcrumb.png') 100% 100% no-repeat;}
#breadcrumb .inBox p.reset{padding: 11px 30px 10px;}
#breadcrumb .row {font-size: 13px;}

/* ANNOT BOX */
#annotBox {margin: 0 0 1.3em;}
#annotBox p {font-weight: bold; font-size: 117%;}
#annotBox p.param {font-weight: normal; font-size: 175%;}
#annotBox p.param sup, #annotBox p.param sub {font-size: 60%;}
.preview {font-weight: bold; font-size: 100%;}

/* CONTENT */
#productDetail .content {margin: 0 0 40px;}
#order h1 {font-size: 200%; padding: 0 0 0.3em; border-bottom: 1px solid #ccc; margin-bottom: 0;}
#order #annotBox {margin-bottom: 5px;}

/* CROSSROADs */
.mainCrossroad{padding:8px 0 14px;}
.mainCrossroad .reset{float:left; width:100%; margin-bottom:14px;}
.mainCrossroad .reset li{float:left; width:184px; margin-left:14px;}
.mainCrossroad .reset .first{margin:0;}
.mainCrossroad .reset a{display:block; width:100%; padding-top:60px; color:white; text-decoration:none;}
.mainCrossroad .reset a:hover{color:#ffdc1f;}
.mainCrossroad .name{display:block; background:#65a42c url('/img/bg/mainCrossroad-bottom.png') 0 100% no-repeat; padding:6px 1px 7px; text-align:center;}
.mainCrossroad .title{font-size:12px; font-weight:bold; margin:0; padding:0; line-height:1;	}

.crossroad .reset {margin: 30px 0 15px;}
.crossroad .reset li {overflow: hidden; padding: 20px 0 15px 180px; border-top: 1px solid #e5e5e5;}
.crossroad .reset li.first {border: none;}
.crossroad .reset li p {margin: 0;}
.crossroad .reset li p.desc {margin: 0 0 1em;}
.crossroad .reset li h2{line-height:1.2; font-size:133%; margin:0 0 0.35em; font-weight: bold;}
.crossroad .reset li .img{width:170px; display:block; text-align:center; float: left; display: inline; margin: 0 0 0 -180px;}
.crossroad .reset li a:hover span{border-color:#81c8f1;}
.crossroad .reset li .section {font-size: 91.6%; margin: 0;}
.crossroad .reset li .section strong {font-weight: normal;}
.crossroad .searched-term {background:#eeeeee; text-decoration:underline;}

/* CATEGORY LIST */
.catList {background: #f2f2f2; padding: 0 20px; position: relative; overflow: hidden; margin: 0 0 20px;}
.catList .reset li {border-bottom: 1px solid #d5d5d5; padding: 15px 0; margin-bottom: -1px;}
.catList h3 {font-size: 117%; margin: 0 0 0.2em; font-weight: normal;}
.catList h3 a {padding: 0 0 0 33px; background: url('/img/ico/folder.png') 1px 0 no-repeat; color: #333; display: block;}
.catList p {margin: 0; color: #999999; padding: 2px 0 0;}
.catList p a {padding: 0 0 0 33px; background: url('/img/ico/video.png') 0 0 no-repeat; color: #333;}
.catList a:hover {color: #65A42C !important;}

/* PRODUCT LIST */
.productList h2 {font-size: 150%;}
.productList ul.reset {margin: 0; overflow: hidden;} 
.productList .reset li {float: left; display: inline; width: 171px; padding: 0 20px; margin: 20px 0 20px -1px; background: url('/img/bg/dot.png') 0 0 repeat-y;}
.productList h3 {margin: 3px 0 0; font-size: 117%;}
.productList h3 span {display: block; text-align: center; padding: 3px 0; height: 170px;}
.productList h3 span img {position: relative; top: 50%;}
.productList h3 strong {display: block; text-decoration: underline; margin: 5px 0 0; cursor: pointer;}
.productList .param {font-size: 117%; margin: 0 0 6px;}
.productList .param sup, .productList .param sub {font-size: 70%;}

/* VARIANTS LIST */
.variats-list {margin: 0 0 15px; overflow: auto; width: 100%;}
.variats-list h2 {font-size: 150%; margin: 0 0 0.5em;}
.variats-list table {border: none; background: none; margin: 0 0 20px;}
.variats-list thead th {vertical-align: middle;}
.variats-list tbody th {white-space: nowrap;}
.variats-list th, .variats-list td {border: none; background: none; margin: 0; padding: 8px 6px; vertical-align: text-top;}
.inBasket th, .inBasket td {padding: 4px 6px;}
.variats-list td, .variats-list tbody th {border-top: 1px solid #ccc;}
.variats-list input.int {width: 38px;}
.variats-list img {vertical-align: middle;}
.variats-list input {vertical-align: middle;}
.variats-list tfoot tr td {background: #ffdb00; border-top: none; padding: 7px 6px; font-size: 125%;}
.inBasket tfoot tr td {padding: 5px 6px;}
.variats-list td.grey, .variats-list th.grey {background: #f2f2f2 !important;}
.variats-list td.priceNoDPH {color: #666;}

/* BUTTONS */
.buttons {border-top: 1px solid #ccc; padding: 15px 0; margin: 30px 0 0 !important;}

/* CONTACT LIST */
.contactList {overflow: hidden; margin: 0 0 30px;}
.contactList ul.reset {width: 48%;}
.contactList ul.reset li {overflow: hidden; border-bottom: 1px solid #ccc; margin: 0 0 -1px; padding: 6px 0;}
.contactList li strong {float: left; display: inline; width: 120px;}
.contactList li span {float: right; display: inline; width: 160px;}

/* PREBASKET */
.preBasket {padding: 0 250px 0 0; overflow: hidden; margin: 20px 0 40px;}
.preBasket h2 {font-size: 200%; margin: 0 0 1em 0;} 
.preBasket h3 {font-size: 175%; font-weight: bold;}
.preBasket h3 a {color: #65A42C !important;}
.preBasket h3 .img {width: 195px; float: right; display: inline; margin: 0 -250px 0 0; text-align: center;}
.preBasket .oh {overflow: hidden;}
.preBasket .priceDPH {font-size: 125%; font-weight: bold;}
.preBasket .price {font-size: 92%; color: #666;}

/* ORDER */
#order form p {margin: 0 0 10px;}
#order form h2 {font-size: 150%; margin: 1.5em 0  0.5em;}
#order form .open-box {margin: 15px 0;}
#order form .open-box h2 {margin: 0 0 0.5em;}
#order form .open-box h2 label {font-weight: normal;}
#order label {font-weight: bold;} 
#send-pass label {display: block;}
#send-pass {margin: 10px -3px 5px; display: block;}
#send-text {display: block; margin: 3px 0 0; font-size: 92%; color: #666;}

/* STEPS */
.step-list {overflow: hidden; margin: 0 0 25px; height: 87px;}
.step1Active {background: url('/img/bg/step1.png') 0 0 no-repeat;}
.step2Active {background: url('/img/bg/step2.png') 0 0 no-repeat;}
.step3Active {background: url('/img/bg/step3.png') 0 0 no-repeat;}
.step-list ul li {float: left; display: inline; font-size: 158%; font-weight: bold; line-height: 1; padding: 22px 35px 0; height: 65px; color: #fff;}
.step-list ul li.active {color: #333;}
.step-list ul li.hover {cursor: pointer; text-decoration: underline;}
.step-list strong {font-size: 13px; font-weight: normal;}
#step1 {margin: 0 25px 0 0;}
#step2 {margin: 0 30px 0 0;}
#step3 .spc strong {font-size: 19px; font-weight: bold; display: block; padding: 17px 0 0;}

/* CONTACT BOX */
.contactBox h2 {font-size: 150%; margin: 20px 0 15px;}
.contactBox .localityAdd {float: left; display: inline;}
.contactBox .localityAdd path {cursor: pointer;}
.contactBox .cityAdd {float: right; display: inline; width: 150px;}
.contactBox .cityAdd select {padding: 5px 0;}
.contactBox .cityAdd option {padding: 2px 15px; margin: 1px 0 0; font-family: arial;}
.contactBox .cityAdd .tip {color: #666; display: block; margin: 10px 0 0;}
.contactBox .cityAdd label {font-weight: normal !important;}
#order .contactBox .cityAdd {width: 48%;}
#order .shopsList p, #order .shopsList input {margin: 0 3px 0 0;}
#order .shopsList label {font-weight: normal;}
 
.seller-box, .contactBox .transferList {position: relative; margin: 25px 0 0;}
.seller-box .info, .contactBox .transferList .info {background: #caf2fe url('/img/ico/info.png') 15px 50% no-repeat; font-size: 117%; color: #3f7a92; margin: 0 !important; padding: 6px 10px 10px 65px; line-height: 1.2;}
.seller-box .items, .contactBox .transferList .items {background: #e5f9ff; color: #3f7a92; padding: 10px 10px 7px 40px; margin: 0 !important;}
.contactBox .transferList .items input {float: left; display: inline; margin: 2px 0 0 -18px;}
.contactBox .transferList .items span {display: block; font-weight: normal; margin: 0 0 5px;}
.seller-box {margin: 20px 0;} 
.seller-box .info {padding: 10px 10px 10px 65px;}
.seller-box .items {padding: 10px 30px;}

/* PRODUCT INFO */
.productInfo {margin: 0 0 45px;}
#contact .productInfo {margin: 0 0 15px;}
.productInfo .main-img {float: left; display: inline; width: 400px; text-align: center;}
.productInfo .productAtts {float: right; display: inline; width: 200px;}
#contact .productInfo .productAtts {width: 190px;}
.productAtts .logo {text-align: center;}

/* GOOGLE MAP */
.gMap {background: #efefef; padding: 25px 25px 20px; text-align: center; margin: 0 0 30px;}
#gMap {height: 250px;}

/* TIP BOX */
.tipBox {background: #caf2fe url('/img/ico/info.png') 20px 50% no-repeat; position: relative; font-size: 117%; color: #3f7a92; margin: 0 0 40px; padding: 10px 20px 10px 75px;}
.tipBox p {line-height: 1.3; margin: 0;}
.tipBox a {color: #3f7a92;}

/* OPEN TIME */
.openTime h2 {font-size: 150%; margin: 20px 0 5px; padding: 0 0 0.3em; border-bottom: 1px solid #ccc;}
.openTime p {font-size: 117%;}

/* WHY US */
.whyUs{padding:11px 0 8px;}
#home .whyUs .in {padding: 0 30px;}
.whyUs .mainTitle{margin:0.6em 0 0; font-size:133%; float:left; width:160px;}
.whyUs .p{margin:0;}
.whyUs .reset{float:left; width:415px; font-size:108%; margin:0.8em 0 0;}
.whyUs .reset li{margin-bottom:10px;}
.whyUs .number{display:inline-block; width:21px; height:21px; line-height:21px; vertical-align:middle; background:url('/img/bg/whyUs-number.png') 0 0 no-repeat; color:white; text-align:center; margin-right:5px;}

/* NEW BOX */
.newsBox .mainTitle{ margin:1.3em 0 0.7em;}
.newsBox  p{line-height:1.4; margin:0;}
.newsBox .title{font-size:108%; font-weight:bold; margin:0 0 0.4em;}
.newsBox .reset li{padding-left:45px; position:relative; margin-bottom:1.9em; vertical-align:middle;}
.newsBox .date{display:block; width:37px; text-align:center; line-height:1.3; font-weight:bold; position:absolute; top:2px; left:0;}
.newsBox .more{font-weight:bold;}

/* HELP BOX */
.helpBox .mainTitle{ margin:1.3em 0 0.7em;}
.helpBox  p{line-height:1.3; margin:0;}
.helpBox .title{font-size:108%; font-weight:bold; margin:0 0 0.4em;}
.helpBox .reset li{padding-left:70px; position:relative; margin-top:1.9em; vertical-align:bottom;}
.helpBox .reset li.first{margin:0;}
.helpBox .date{display:block; width:37px; text-align:center; line-height:1.3; font-weight:bold; position:absolute; top:2px; left:0;}
.helpBox .img{position:absolute; top:0; left:0; width:60px; height:60px; display:table; text-align:center;}

/* BANNER BOX */
.bannerBox .item{width:100%; overflow:hidden; display:block; margin-bottom:25px;}
.bannerBox .item img{display:block;}

/* IMG vetical align middle */
.imgMiddle{display:table-cell; vertical-align: middle; width:100%; left:0;}
.imgMiddle .imgInner{width:100%;}

/* FORMs */
.form .spc{padding:15px 17px 10px; background:#f0f1f3;}
.form label{font-weight: bold;}
.form p{margin-bottom:0.5em;}
.form .cor, .gray-box .cor{background-image:url('/img/bg/cor-form-white.png'); width: 2px; height: 2px}
.form .l{margin-top:0.6em;}

.new-search .spc {padding: 13px 15px;} 
.new-search h2 {display: inline; margin: 0; font-size: 150%;}
.new-search p {display: inline;}
.new-search p input {vertical-align: middle;}
.new-search p .int-text {font-size: 100%; width: 300px;}

/* PAGING */
.paging{background:#F2F2F2; width:100%; padding:9px 0; position: relative;}
.paging p{text-align:center; padding:0 12em; margin:0 10px; position:relative;}
.paging a, .paging strong{ display:-moz-inline-block; display:inline-block; height:19px; padding:0px 3px; min-width:10px; text-align:center; line-height:19px; position:relative; color:#333; text-decoration:none;}
.paging a:hover{border-color:#909090;}
.paging strong{font-weight:bold;}
.paging .next, .paging .prev{position:absolute; font-size:92%; line-height:19px; top:0; min-width:70px; border: 1px solid #dfdfdf; background: #fff;}
.paging .prev{left:9px;}
.paging .next{right:9px;}

/* ATT IMAGES */
.att-images {margin: 0 0 10px;}
.att-images ul.reset {margin: 0 0 20px -20px;}
.att-images ul.reset li {float: left; width: 170px; padding: 12px; border: 1px solid #eee; margin: 0 0 0 20px;}
.att-images a {display: block; text-align: center; height: 170px; text-decoration: none;}

/* ATT FILES */
.att-files {position: relative; margin: 0 0 30px;}
.att-files .spc {border: 1px solid #f3f3f3; border-width: 0 1px; border-top: 1px solid #e7e7e7; background: #f9f9f9; padding: 0 10px;}
.att-files .first {border-top: 1px solid #f3f3f3;}
.att-files ul.reset {overflow: hidden; padding: 10px 0;}
.att-files .in {background-repeat: no-repeat; background-position: 0 50%; padding: 0 0 0 40px !important; min-height: 28px; border: none; display: block; text-decoration: none;font-size: 117%; color: #333;}
.att-files img {display: block;}
.att-files .in:hover {color: #65A42C;}
.att-files strong {text-decoration: underline; font-weight: normal;}
.att-files span {color: #999; text-transform: uppercase;}
.att-files .cor {background-image:url('/img/bg/corner-img.png'); width: 3px; height: 3px;}

.tableFiles a {padding:2px 0 2px 22px; background-repeat:no-repeat; background-position:0 50%; display: block;}

.productFiles {margin: 0 0 20px;}
.productFiles h2 {margin: 0 0 0.3em; font-size: 133%;}
.productFiles a {padding:4px 0 4px 22px; background-repeat:no-repeat; background-position:0 5px; display: block;}
.ai { background-image: url('/img/fileico/ai.png');}
.avi {background-image: url('/img/fileico/avi.png');}
.tif, .png, .jpg, .gif, .bmp {background-image: url('/img/fileico/jpg.png');}
.cdr {background-image: url('/img/fileico/cdr.png');}
.doc, .docx {background-image: url('/img/fileico/doc.png');}
.exe {background-image: url('/img/fileico/exe.png');}
.html {background-image: url('/img/fileico/html.png');}
.mp3 {background-image: url('/img/fileico/mp3.png');}
.pdf {background-image: url('/img/fileico/pdf.png');}
.ppt, .pptx {background-image: url('/img/fileico/ppt.png');}
.psd {background-image: url('/img/fileico/psd.png');}
.qt {background-image: url('/img/fileico/qt.png');}
.swf {background-image: url('/img/fileico/swf.png');}
.dwg, .dxf {background-image: url('/img/fileico/dwg-dxf.png');}
.txt {background-image: url('/img/fileico/txt.png');}
.xls, .xlsx, .xlt, .xlsx { background-image: url('/img/fileico/xls.png');}
.zip {background-image: url('/img/fileico/zip.png');}
.unknown {background-image: url('/img/fileico/unknown.png');}

.pdf-big {background-image: url('/img/fileico/pdf-big.png');}
.avi-big, .wmv-big {background-image: url('/img/fileico/avi-big.gif');}
.tif-big {background-image: url('/img/fileico/tif-big.gif');}
.png-big {background-image: url('/img/fileico/png-big.gif');}
.jpg-big {background-image: url('/img/fileico/jpg-big.gif');}
.gif-big {background-image: url('/img/fileico/gif-big.gif');}
.bmp-big {background-image: url('/img/fileico/bmp-big.gif');}
.cdr-big {background-image: url('/img/fileico/cdr-big.gif');}
.doc-big, .docx-big {background-image: url('/img/fileico/doc-big.gif');}
.exe-big {background-image: url('/img/fileico/exe-big.gif');}
.html-big {background-image: url('/img/fileico/html-big.gif');}
.mp3-big {background-image: url('/img/fileico/mp3-big.gif');}
.dwg-big, .dxf-big {background-image: url('/img/fileico/dwg-dxf-big.gif');}
.ppt-big, .pptx-big {background-image: url('/img/fileico/ppt-big.gif');}
.psd-big {background-image: url('/img/fileico/psd-big.gif');}
.swf-big {background-image: url('/img/fileico/swf-big.gif');}
.txt-big {background-image: url('/img/fileico/txt-big.gif');}
.xls-big, .xlsx-big, .xlt-big, .xlsx-big { background-image: url('/img/fileico/xls-big.gif');}
.zip-big {background-image: url('/img/fileico/zip-big.gif');}
.unknown-big {background-image: url('/img/fileico/unknown-big.gif');}

/* ATT VIDEO */
.productVideo {background: #f2f2f2; position: relative;}
.productVideo a {display: block; background: url('/img/ico/video-big.png') 25px 50% no-repeat; padding: 10px 10px 10px 90px; text-decoration: none; color: #333;}

/* CORNERS */
.cor{overflow:hidden; position:absolute; background-repeat:no-repeat; display:block; line-height: 1px; font-size: 1px;}
.cor-l{top:0; left:0; background-position:0 0;}
.cor-r{top:0; right:0; background-position:100% 0;}
.cor-bl{bottom:0; left:0; background-position:0 100%;}
.cor-br{bottom:0; right:0; background-position:100% 100%;}
.info-message .cor, .ok-message .cor, .error-message .cor, .seller-box .cor, .transferList .cor, .paging .cor, .productVideo .cor, .catList .cor, .tipBox .cor {background-image:url('/img/bg/corner-white.png'); width: 3px; height: 3px;}

/* INLINE LINK */
a.inline-link{display:inline-block; vertical-align:middle; color:#fff; text-decoration:none; cursor:pointer; height:31px; overflow:hidden; background-repeat:no-repeat; background-position:0 0;}
a.inline-link span{display:inline-block; height:31px; line-height:29px; padding:0 26px 0 15px; background-position:100% -100px; background-repeat:no-repeat;}

/* MESSAGE */
.ok-message {padding: 15px 15px 15px 75px; background: #6aae3a url('/img/ico/ok.png') 23px 50% no-repeat; color: #dcfac6; font-size: 117%; margin: 20px 0; position: relative;}
.error-message {padding: 15px 15px 15px 75px; background: #c31c1c url('/img/ico/error.png') 23px 50% no-repeat; color: #fff; font-size: 117%; margin: 20px 0; position: relative;}
.info-message {padding: 15px 15px 15px 75px; background: #CAF2FE url('/img/ico/info.png') no-repeat 23px 50%; color: #3F7A92; font-size: 117%; margin: 20px 0; position: relative;}

/* WEB MAP */
.webmap {background: none; margin: 0; padding: 0;}
.webmap li {background: none; margin: 0 0 20px; padding: 0;}
.webmap ul {margin: 0; padding: 0 0 0 3px; background: url('/img/bg/dot.png') 3px 0 repeat-y;}
.webmap li li {background: url('/img/bg/dot.png') 2px 1.8em repeat-x; background-position: 2px 1.2em; margin: 0; padding: 2px 0 2px 12px;}
.webmap li li:last-child {background-image: url('/img/bg/dot-last.png');}
.webmap li li li {background-position: 2px 0.9em;}
.webmap li span {display: block; background: #fff; padding: 6px 3px; font-size: 150%; font-weight: bold; text-decoration: none;}
.webmap li img {margin: 0 2px 0 0; cursor: pointer;}
.webmap li li span {font-size: 117%; font-weight: bold; padding: 4px 3px;}
.webmap li li li span {font-size: 100%; font-weight: normal; padding: 1px 3px;}

.wrapHouse {margin: 10px 0 0;}
.house {position: relative; float: left; display: inline; width: 450px;}
.house .img {position: absolute; cursor: pointer; width: 40px; overflow: hidden;}
.house #img2 {left: 352px; top: 158px;}
.house #img3 {left: 298px; top: 194px;}
.house #img4 {left: 88px; top: 184px;}
.house #img5 {left: 88px; top: 104px;}
.house #img6 {left: 140px; top: 30px;}
.house #img7 {left: 37px; top: 214px;}
.house #img9 {left: 50px; top: 138px;}
.house #img11 {left: 150px; top: 143px;}
.house #img12 {left: 325px; top: 100px;}
.house #img13 {left: 190px; top: 100px;}
.house #img14 {left: 60px; top: 65px;}
.house #img17 {width: 77px !important; margin: 0 !important; right: 20px; bottom: 20px; position: absolute; cursor: pointer; overflow: hidden;}
.house #img17 img {margin: 0 !important;}
.detail {float: right; width: 170px;}
.detail li {margin: 0;}

/* MESSAGE */
.message {margin: 15px 0;}
.ok-message p {padding:7px 20px 7px 35px; background:10px 50% no-repeat; border:1px solid; font-weight:bold; background-color:#E3FDB6; background-image:url('../img/ico/bullet-tick.png'); border-color:#8AC722; color:#4B7600; margin: 0;}
.error-message p {padding:7px 20px 7px 35px; background:10px 50% no-repeat; border:1px solid; font-weight:bold; background-color:#FFCCCC; background-image:url('../img/ico/bullet-cross.png'); border-color:#DB0000; color:#B10000; margin: 0;}
.info-msg {padding: 3px 15px 1px 27px; background: url('../img/ico/info.png') 0 50% no-repeat;}
.ok-msg {padding: 8px 15px 7px 40px; background: url('../img/ico/ok.png') 0 50% no-repeat; font-size: 117%;}
.error-msg {padding: 8px 15px 7px 40px; background: url('../img/ico/error.png') 0 50% no-repeat; font-size: 117%;}
.orange-msg {padding: 8px 15px 7px 40px; background: url('../img/ico/orange.png') 0 50% no-repeat; font-size: 117%;}

/* CALCULATOR */
#calculator h2 {font-size: 150%; font-weight: normal;}
.step1 h2 {margin: 30px 0 15px;}
.step1 {height: 800px;}
.step1 .firstLevel {font-size: 117%; position: relative;width: 100%;}
.step1 .firstLevel li {float: left; display: inline; width: 300px; text-align: center;}
.step1 .firstLevel li span {display: block; color: #60a534; padding: 15px 0 10px; background: url('../img/calc/firstlevel-li.png') 0 100% no-repeat; height: 125px; overflow: hidden; cursor: default;}
.step1 .firstLevel li.roof span {background: url('../img/calc/firstlevel-li-first.png') 0 100% no-repeat;}
.step1 .firstLevel li img {display: block; margin: 0 auto 7px;}
.step1 .secondLevel {position: absolute; top: 150px; left: 0; width: 900px; background: url('../img/calc/secondlevel.png') 0 0 no-repeat;}
.step1 .secondLevel li span {background: none !important;}
.step1 .thirdLevel {margin: 10px 0 0;}
.step1 .thirdLevel li {background: #F2F1F1 url('../img/calc/thirdlevel-li.png') 0 0 repeat-x; border-bottom: 1px solid #ccc; text-align: left; margin: 0 30px; width: 240px;}
.step1 .thirdLevel li a {display: block; text-decoration: none; color: #333; line-height: 18px; padding: 7px 26px; background: url('../img/calc/thirdlevel-li-a.png') 10px 0.8em no-repeat;}
.step1 .thirdLevel li a:hover {color: #60a534;}

/* hover */
.step1 .firstLevel li.hover span {background: url('../img/calc/firstlevel-li-hover.png') 100% 100% no-repeat;}
.step1 .firstLevel li.roof.hover span {background: url('../img/calc/firstlevel-li-first-hover.png') 0 100% no-repeat;} 

/* no - js */
.firstLevel .reset{display: none;}
.step1 li.hover .secondLevel, .step1 .secondLevel li.hover .reset{display: block;}


.step2 .content {background: url('../img/calc/step2-content.png') 0 0 no-repeat; padding: 10px 30px; zoom: 1;}
.step2 h2 {margin: 20px 0 15px;}

.step2 .tabs-nav {margin: 0; padding: 0; overflow: hidden; zoom: 1; background: url('../img/calc/tabs.png') 0 100% no-repeat;}
.step2 .tabs-nav li {float: left; display: inline; background: url('../img/calc/tabs.png') 100% 100% no-repeat; padding: 0 1px 0 0; margin: 0; text-align: center; border-bottom: 1px solid #c0c0c0;}
.step2 .tabs-nav li a {float: left; display: inline; width: 179px; background: url('../img/calc/tabs-bg.png') 100% 100% repeat-x; padding: 27px 0 20px; text-decoration: none; color: #333; border-bottom: 7px solid;}
.step2 .tabs-nav li.first {padding: 0 1px;}
.step2 .tabs-nav li.first a {width: 178px;}
.step2 .tabs-nav li.active {border: none; padding-bottom: 1px;}
.step2 .tabs-nav li.active a {float: left; display: inline; background: none; padding: 20px 0 27px; border: none; border-top: 7px solid;}
.step2 .tabs-nav li a:hover {background: #fff;}
.step2 .tabs-nav li.green1 a {border-color: #38700d;}
.step2 .tabs-nav li.green2 a {border-color: #5da425;}
.step2 .tabs-nav li.green3 a {border-color: #79cd38;}
.step2 .tabs-nav li.orange a {border-color: #ff9b00;}
.step2 .tabs-nav li.grey a {border-color: #bdbdbd;}

.step2 .motive {margin: 0 0 30px;}
.step2 .motive .l {width: 450px; text-align: center;}
.step2 .motive .r {width: 300px; margin: 0 25px 0 0;}
.step2 .motive .r h3 {margin: 0 0 10px; font-size: 125%;}
.step2 .motive .r li {padding: 3px 0;}
.step2 .motive .r li span {margin: 0;}

.step2 .form-in {background: #e9e9e9; padding: 20px; margin: 0 0 40px; zoom: 1;}
.step2 .form-in p {margin: 0 0 10px; overflow: hidden; zoom: 1;}
.step2 .form-in label.bold, .step2 .form-in .i-block {float: left; display: inline; margin: 0 10px 0 0;}
.step2 .form-in label.bold {margin: 17px 10px 0 0;}
.step2 .form-in label.no-margin {margin: 0 10px 0 0;}
.step2 .motive .r li span, .step2 .form-in label.bold span {display: inline-block; width: 20px; height: 20px; overflow: hidden; line-height: 20px; color: #fff; text-align: center; vertical-align: middle; background: url('../img/calc/number.png') 0 0 no-repeat; margin: 0 3px 0 0; position: relative; top: -1px;}
.step2 .form-in .i-block label {font-size: 92%; color: #666;}
.step2 .form-in .i-block label input {margin: 0; padding: 0;}
.step2 .form-in .result {margin: 20px -20px -20px; padding: 5px 15px 8px; text-align: center; font-size: 150%; background: #ffd90f; border-top: 1px solid #fff;}

.step2 .graphResult {height: 37px; overflow: hidden; background: #f4f4f4; margin: 0 1px 6px 0;}
.step2 .graphResult .in {float: left; display: inline; height: 37px; line-height: 37px; color: #fff; font-weight: bold; font-size: 117%; padding: 0 10px !important;}
.step2 .graphResult .in.green1 {color: #fff; background-color: #38700d;}
.step2 .graphResult .in.green2 {color: #fff; background-color: #5da425;}
.step2 .graphResult .in.green3 {color: #fff; background-color: #79cd38;}
.step2 .graphResult .in.orange {color: #fff; background-color: #ff9b00;}
.step2 .graphResult .in.red {color: #fff; background-color: #db0000;}
.step2 .graph .l {margin: 0 0 0 0; text-align: right; padding: 5px 0 0; font-size: 92%; color: #666;}
.step2 .graph .l strong {color: #333; font-size: 125%;}
.step2 .graph .borderFirst {border-top: 5px solid;}
.step2 .graph .borderSecond {border-bottom: 5px solid; height: 60px; margin-bottom: 5px;}
.step2 .graph .green1 {border-color: #38700d;}
.step2 .graph .green2 {border-color: #5da425;}
.step2 .graph .green3 {border-color: #79cd38;}
.step2 .graph .orange {border-color: #ff9b00;}
.step2 .graph .red {color: #db0000; border-color: #db0000;}

.w-160 {width: 210px;}
.w-360 {width: 360px;}
.w-110 {width: 110px;}
.w-60 {width: 60px;}