html, body {
width: 100%;
padding: 0;
margin: 0;
font-size: 11px;
}
div, p, ul, ol, li, dl, dd, dt, h1, h2, h3, h4, h5, h6, form, input, textarea, select {
margin: 0;
padding: 0;
}
img {border: 0;}
a {outline: none;}
#main {
min-width: 930px;
padding: 0px 35px 0px 35px;
}
#wrapper {
width: 100%;
max-width: 1380px;
margin: 0 auto;
}
#header {
float: left;
width: 100%;
height: 150px;
position: relative;
}
.logo {
position: absolute;
left: -25px; top: 25px;
}
.nav {
width: 48%;
position: absolute;
left: 28%; top: 50px;
}
.nav ul {
float: left;
width: 100%;
list-style: none;
margin: -8px 0px 0px 0px;
}
.nav ul li {
float: left;
width: 30%;
display: inline;
margin: 8px 2% 0px 0px;
line-height: 12px;
}
.nav ul li a {font: normal 12px Arial; font-style: italic; line-height: 12px; color: #f06000; text-decoration: underline;}
.nav ul li a:hover {text-decoration: none;}
.contact-phone {
width: 150px;
position: absolute;
right: 50px; top: 40px;
padding: 2px 0px 0px 20px;
background: url("../images/icon-1.gif") no-repeat 0 0;
font: normal 11px Arial;
color: #4c4c4c;
}
.contact-phone div {
font: bold 20px Arial;
color: #000000;
}
.contact-phone div img {vertical-align: middle;}
.contact-phone div span {color: #c64f00;}
#content {
float: left;
width: 100%;
font: normal 12px Arial;
color: #4c4c4c;
}
#content a {font: normal 12px Arial; font-style: italic; color: #f06000; text-decoration: underline;}
#content a:hover {text-decoration: none;}
#content h1, #content .h1 {
margin: 0px 0px 18px 0px;
font: bold 20px Arial;
color: #000000;
}
#content h1 a, #content .h1 a {font: normal 22px Arial; color: #000000; text-decoration: underline;}
#content h1 a:hover, #content .h1 a:hover {text-decoration: none;}
#content h2 {
margin: 0px 0px 12px 0px;
font: bold 15px Arial;
color: #000000;
}
#content h3 {
margin: 0px 0px 12px 0px;
font: bold 15px Arial;
font-style: italic;
color: #f06000;
}
#content input[type="text"] {
padding: 3px 3px 3px 3px;
border: 1px solid #e3e3eb;
border-top: 1px solid #aaadb2;
font: normal 12px Arial;
color: #4c4c4c;
}
#content input[type="password"] {
padding: 3px 3px 3px 3px;
border: 1px solid #e3e3eb;
border-top: 1px solid #aaadb2;
font: normal 12px Arial;
color: #4c4c4c;
}
#content textarea {
padding: 3px 3px 3px 3px;
border: 1px solid #e3e3eb;
border-top: 1px solid #aaadb2;
font: normal 12px Arial;
color: #4c4c4c;
}
.general-div {
float: left;
width: 100%;
margin: 0px 0px 25px 0px;
}
.left-column, .center-column, .right-column {float: left; width: 33.3%;}
.common-column {float: left; width: 66.6%;}
.left-column .wrapper, .center-column .wrapper, .common-column .wrapper {margin: 0px 20px 0px 0px;}
.right-column .wrapper {margin: 0px 0px 0px 0px;}
.left-side {float: left; width: 49%;}
.right-side {float: right; width: 49%;}
.clear {clear: both; font-size: 0px;}
.dots {font-size: 0;}
.dots span {
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
font-size: 0px;
z-index: 100;
background: #ffffff;
}
.dots .dtl {left: 0px; top: 0px;}
.dots .dtr {right: 0px; top: 0px;}
.dots .dbl {left: 0px; bottom: 0px;}
.dots .dbr {right: 0px; bottom: 0px;}
.headline {
float: left;
width: 99.9%;
height: 60px;
position: relative;
padding: 30px 0px 10px 0px;
background: #000000 url("../images/gradient-1.png") repeat-y 0 0;
font: normal 12px Arial;
color: #663333;
z-index: 100;
}
.headline .offset {padding: 0px 30px 0px 30px;}
.headline .increase-offset {padding: 0px 30px 0px 160px !important;}
.headline h1, .headline .h1 {
margin: 0px 0px 4px 0px !important;
font: bold 20px Arial;
color: #ffffff !important;
}
.headline a {font: normal 12px Arial !important; color: #cc9999 !important; text-decoration: underline !important;}
.headline a:hover {text-decoration: none !important;}
.headline .left-side img {position: absolute; left: 0px; bottom: 0px; z-index: -1;}
.path span {margin: 0px 7px 0px 7px; }
.text-block {
float: left;
width: 100%;
line-height: 18px;
text-align: justify;
}
.text-block p {margin: 0px 0px 12px 0px;}
.read-more {margin: 10px 0px 0px 0px;}
.order-block {
float: right;
position: relative;
padding: 6px 10px 0px 0px;
}
.order-block p {float: left;}
.order-block p span {
top: 3px;
position: relative;
margin: 0px 3px 0px 3px;
font: normal 22px Arial; color: #ff9933;
}
.order-block .order-button {
margin: 4px 0px 0px 18px;
cursor: pointer;
}
.order-form {
width: 298px;
height: 300px;
display: none;
position: absolute;
right: 0px; top: 40px;
padding: 16px 22px 0px 22px;
background: url("../images/order-bg.png") no-repeat 0 0;
}
.order-form table {
float: left;
width: 100%;
margin: -10px 0px 0px 0px;
}
.order-form table td {
vertical-align: top;
padding: 10px 0px 0px 0px;
}
.order-form table textarea {
width: 292px;
height: 70px;
}
.order-form .textfield {width: 292px;}
.order-form input.captcha {
width: 186px;
vertical-align: middle;
}
.order-form img.captcha {
vertical-align: middle;
margin: 0px 5px 0px 0px;
}
.order-form .cancel-order {cursor: pointer;}
.services {
float: left;
width: 100%;
margin: 0px 0px 25px 0px;
position: relative;
}
.services ul {
float: left;
width: 100%;
list-style: none;
margin: -2px 0px 0px 0px;
}
.services ul li {
float: left;
width: 33.3%;
height: 100px;
margin: 2px 0px 0px 0px;
overflow: hidden;
}
.services ul li .overlay {
width: 100%;
height: 100px;
position: absolute;
left: 0px; top: 0px;
z-index: 50;
}
.services ul li .offset {
height: 100px;
overflow: hidden;
position: relative;
margin: 0px 2px 0px 0px;
background: #000000 url("../images/gradient-1.png") repeat-y 0 0;
cursor: pointer;
}
.services ul li .offset .cell {
height: 100px;
margin: 0px 20px 0px 170px;
position: relative;
z-index: 40;
}
.services ul li .offset .cell div {
width: 100%;
height: 100px;
display: table-cell;
vertical-align: middle;
}
.services ul li img {position: absolute; left: 0;}
.services ul li a {font: bold 16px Arial !important; color: #ffffff !important; text-decoration: none !important;}
.services ul .hover a {color: #f06000 !important;}
.services-mini {
float: left;
width: 100%;
position: relative;
margin: 0px 0px 25px 0px;
}
.services-mini ul {
float: left;
width: 100%;
list-style: none;
margin: -1px 0px 0px 0px;
}
.services-mini ul li {
float: left;
width: 100%;
height: 50px;
margin: 1px 0px 0px 0px;
}
.services-mini ul li .offset {
height: 50px;
overflow: hidden;
position: relative;
margin: 0px 0px 0px 0px;
padding: 0px 20px 0px 90px;
background: #000000 url("../images/gradient-2.png") no-repeat 0 -50px;
cursor: pointer;
}
.services-mini ul li .offset .cell {
width: 100%;
height: 50px;
display: table-cell;
vertical-align: middle;
}
.services-mini ul li img {position: absolute; left: 0;}
.services-mini ul li a {font: bold 12px Arial !important; color: #ffffff !important; text-decoration: none !important;}
.services-mini ul .hover a {color: #f06000 !important;}
.services-mini ul .hover img{top: -50px;}
.services-mini ul .hover .offset{background-position: 0 0;}
.featured-block {
float: left;
width: 100%;
margin: 10px 0px 0px 0px;
}
.featured-block .frame {
padding: 6px 7px 7px 7px;
background: #dedede url("../images/bg-1.gif") no-repeat 100% 0;
}
.featured-block .offset {
padding: 20px 20px 20px 20px;
background: #ffffff;
}
.featured-block h1, .featured-block .h1 {
position: relative;
margin: -36px -10px 12px -10px !important;
}
.featured-block h1 span, .featured-block .h1 span {
padding: 0px 10px 0px 10px;
background: #ffffff;
}
.catalog {
float: left;
width: 100%;
}
.catalog ul {
float: left;
width: 100%;
list-style: none;
margin: -15px 0px 0px 0px;
}
.catalog ul li {
float: left;
width: 24.9%;
height: 160px;
margin: 15px 0px 0px 0px;
}
.catalog ul li .offset {margin: 0px 20px 0px 20px;}
.catalog ul li .catalog-img {
float: left;
width: 100%;
height: 125px;
overflow: hidden;
}
.catalog ul li .catalog-img table {width: 100%;}
.catalog ul li .catalog-img table td {
width: 100%;
height: 125px;
text-align: center;
}
.catalog ul li .catalog-text {
float: left;
width: 100%;
height: 32px;
overflow: hidden;
margin: 3px 0px 0px 0px;
text-align: center;
}
.catalog ul li a {font: normal 14px Arial !important; color: #000000 !important; text-decoration: underline !important;}
.catalog ul li a:hover {text-decoration: none !important;}
.products-list {
float: left;
width: 100%;
overflow: hidden;
}
.products-list ul {
float: left;
width: 100%;
list-style: none;
margin: -27px 0px 0px 0px;
padding: 0px 0px 10px 0px;
border-bottom: 1px solid #cccccc;
}
.products-list ul li {
float: left;
width: 49.9%;
height: 130px;
margin: 10px 0px 0px 0px;
padding: 16px 0px 0px 0px;
border-top: 1px solid #cccccc;
}
.products-list ul li .offset {margin: 0px 20px 0px 0px;}
.products-list ul li .product-img {
float: left;
width: 125px;
max-height: 115px;
overflow: hidden;
text-align: center;
}
.products-list ul li .product-text {margin: 0px 0px 0px 130px;}
.products-list ul li .product-name {
float: left;
width: 100%;
max-height: 36px;
overflow: hidden;
font: bold 15px Arial;
line-height: 18px;
color: #333333;
}
.products-list ul li .product-desc {
float: left;
width: 100%;
max-height: 42px;
overflow: hidden;
margin: 4px 0px 8px 0px;
line-height: 14px;
}
.products-list ul li .product-price {
float: left;
display: inline;
margin: 0px 10px 3px 0px;
padding: 3px 7px 3px 7px;
background: #f06000;
font: bold 12px Arial;
color: #ffffff;
}
.products-list ul li .read-more {
float: left;
margin: 3px 0px 0px 0px !important;
}
.product-detail {
float: left;
width: 100%;
border-bottom: 1px solid #cccccc;
padding: 0px 0px 20px 0px;
}
.product-detail .thumbs {
float: left;
width: 80px;
display: inline;
margin: 0px 20px 0px 20px;
}
.product-detail .thumbs ul {
float: left;
width: 80px;
list-style: none;
margin: -25px 0px 0px 0px;
}
.product-detail .thumbs ul li {
float: left;
width: 80px;
height: 125px;
overflow: hidden;
margin: 25px 0px 0px 0px;
}
.product-detail .detail-img {
float: left;
width: 170px;
height: 275px;
overflow: hidden;
}
.product-detail .detail-text {margin: 0px 0px 0px 310px;}
.product-detail .detail-text p {margin: 0px 0px 12px 0px;}
.contact-page {
float: left;
width: 100%;
}
.contact-page .map {margin: 20px 0px 0px 0px;}
.contact-page .map img {width: 100%;}
.contact-table {margin: 20px 0px 0px 0px;}
.contact-table table {width: 100%;}
.contact-table table th {
width: 25%;
font: bold 15px Arial;
vertical-align: top;
text-align: left;
color: #ff6633;
}
.contact-table table td {
padding: 14px 0px 0px 0px;
vertical-align: top;
}
.feedback {
float: left;
width: 100%;
margin: 20px 0px 0px 0px;
}
.feedback table {
float: left;
width: 100%;
margin: -10px 0px 0px 0px;
}
.feedback table td {
vertical-align: top;
padding: 10px 0px 0px 0px;
}
.feedback table textarea {
width: 100%;
height: 125px;
}
.feedback .textfield {width: 240px;}
.feedback input.captcha {
width: 134px;
vertical-align: middle;
}
.feedback img.captcha {
vertical-align: middle;
margin: 0px 5px 0px 0px;
}
.recent-news, .recent-articles {
float: left;
width: 100%;
}
.recent-news ul, .recent-articles ul {
float: left;
width: 100%;
list-style: none;
margin: -35px 0px 0px 0px;
}
.recent-news ul li, .recent-articles ul li {
float: left;
width: 100%;
margin: 35px 0px 0px 0px;
}
.recent-news ul li span, .recent-articles ul li span {
display: block;
margin: 4px 0px 0px 0px;
font: normal 11px Arial;
color: #4c4c4c;
}
.news-list {
float: left;
width: 100%;
}
.news-list ul {
float: left;
width: 100%;
list-style: none;
margin: -15px 0px 0px 0px;
}
.news-list ul li {
float: left;
width: 100%;
margin: 15px 0px 0px 0px;
}
.news-list ul li span {
display: block;
margin: 4px 0px 0px 0px;
font: normal 11px Arial;
color: #4c4c4c;
}
.news-list ul li .news-img {
float: left;
width: 100px;
margin: 0px 20px 0px 0px;
overflow: hidden;
}
.news-list ul li .news-text {display: table;}
.random-news {
float: left;
width: 100%;
margin: 50px 0px 0px 0px;
}
.random-news span {
display: block;
margin: 4px 0px 0px 0px;
font: normal 11px Arial;
color: #4c4c4c;
}
.random-news .offset {margin: 0px 25px 0px 25px;}
.random-news .left-side {text-align: left;}
.random-news .right-side {text-align: right;}
.random-news img {margin: -2px 0px 0px 0px;}
.random-news .left-side img {float: left; }
.random-news .right-side img {float: right;}
.special-offers {
float: left;
width: 100%;
}
.special-offers .offer-img {
float: left;
width: 100%;
}
.special-offers .offer-text {
float: left;
width: 100%;
margin: 20px 0px 0px 0px;
}
.special-offers .offer-name {
float: left;
width: 100%;
margin: 0px 0px 8px 0px;
}
.special-offers .offer-name a {
float: left;
padding: 3px 7px 3px 7px;
background: #f06000;
}
.special-offers .offer-name a {font: bold 14px Arial !important; color: #ffffff !important; text-decoration: underline !important;}
.special-offers .offer-name a:hover {text-decoration: none !important;}
.special-offers .offer-text p {padding: 0px 7px 0px 7px;}
.special-offers .offer-text .price {margin: 12px 0px 0px 0px;}
.special-offers .offer-text .price span {font: normal 20px Arial;}
.similar-products {margin: 0px -18px 0px -18px;}
.similar-wrapper {
float: left;
width: 100%;
overflow: hidden;
margin: 10px 0px 0px 0px;
}
.similar-products ul {
float: left;
width: 100%;
list-style: none;
margin: -17px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
}
.similar-products ul li {
float: left;
width: 100%;
padding: 16px 0px 16px 0px;
border-top: 1px solid #cccccc;
}
.similar-products ul li .wrapper {margin: 0px 10px 0px 10px;}
.similar-products ul li .similar-img {
float: left;
width: 125px;
max-height: 115px;
overflow: hidden;
text-align: center;
}
.similar-products ul li .similar-text {margin: 0px 0px 0px 130px;}
.similar-products ul li .similar-name {
float: left;
width: 100%;
max-height: 36px;
overflow: hidden;
font: normal 16px Arial;
line-height: 18px;
color: #999999;
}
.similar-price {
display: inline;
margin: 7px 0px;
padding: 3px 7px 3px 7px;
background: #f06000;
font: bold 12px Arial;
color: #ffffff;
}
.similar-products ul li .similar-price {
float: left;
margin: 6px 0px 0px 0px;
padding: 3px 7px 3px 7px;
background: #f06000;
font: bold 12px Arial;
color: #ffffff;
}
.similar-products ul li .read-more {
float: left;
width: 100%;
margin: 6px 0px 0px 0px !important;
}
.jump {
float: left;
width: 100%;
margin: 16px 0px 0px 0px;
text-align: right;
}
.jump .jump-wrapper {padding: 0px 20px 0px 0px;}
.company-teasers {
position: relative;
margin: 0px -35px 0px -35px;
}
.company-teasers .teasers-wrapper {
padding: 30px 35px 30px 35px;
background: #fbf6e5;
}
.company-teasers .teaser-img {
float: left;
width: 110px;
}
.company-teasers .teaser-text {
margin: 0px 0px 0px 120px;
font: normal 11px Arial;
line-height: 16px;
}
.company-teasers .teaser-text h1, .company-teasers .teaser-text .h1 {margin: 0px 0px 8px 0px !important;}
.latest-works-list {
float: left;
width: 100%;
margin: 50px 0px 0px 0px;
}
.latest-works-list h2 span {margin: 0px 5px 0px 5px;}
.latest-works-list h2 span img {margin: 0px 5px 0px 5px;}
.latest-works-list ul {
float: left;
width: 100%;
list-style: none;
}
.latest-works-list ul li {
float: left;
width: 50%;
padding-bottom: 10px;
}
.latest-works-list ul li .offset {margin: 0px 25px 0px 0px; }
.latest-works-list .work-text {font: normal 16px Arial !important;}
.latest-works {
float: left;
width: 100%;
}
.latest-works .work-img {
float: left;
width: 145px;
overflow: hidden;
}
.latest-works .work-text {
margin: 0px 0px 0px 150px;
font: normal 18px Arial;
color: #999999;
}
#footer {
float: left;
width: 100%;
padding: 25px 0px 25px 0px;
font: normal 12px Arial;
color: #000000;
}
#footer a {font: normal 12px Arial; font-style: italic; color: #f06000; text-decoration: underline;}
#footer a:hover {text-decoration: none;}
.footer-nav {
float: left;
width: 100%;
}
.footer-nav ul {
float: left;
width: 100%;
list-style: none;
}
.footer-nav ul li {
float: left;
margin: 0px 5% 0px 0px;
}
.copyright {
float: left;
width: 100%;
margin: 7px 0px 0px 0px;
}
.developer {
float: left;
width: 100%;
position: relative;
margin: 12px 0px 0px 0px;
}
.phone-numbers {
float: right;
width: 180px;
padding: 0px 20px 0px 0px;
}
.tbl td, .tbl th { border: 1px solid gray; padding: 5px; margin: 0; }
.tbl th { text-align: center; color: #f06000 }
.text-block ul { margin-left: 20px; }
.text-block .offer, .text-offer {
display: block;
margin: 10px 0;
padding: 10px 5px 10px 40px;
/* border: 1px solid silver; */
background: url(../images/offer.png) no-repeat left 50%;
color: #f06000;
font-weight: bold;
vertical-align: middle;
}
#highlight { background: #F1F1F1; border: 1px dotted #f06000; padding: 10px; margin-top: 5px; }
#highlight h2 { color: #f06000; }