@import 'reset.css';
html {
margin: 0;
padding: 0;
}
#mob{ display: none; }
body {
background-color: #fafafa;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 20px 0;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
html, body{
height: 100%;
}
.wrap h1, .wrap .welcome, .wrap h2, .wrap p, .mar {
margin-right: 10px;
margin-left: 10px;
}
h1, .welcome {
color: #3dade2;
font: Verdana;
font-size: 32px;
font-weight: normal;
text-shadow: 0 0 1px rgba(0, 0, 0, .01);
margin: 0 10px 20px 10px;
}
h2 {
color: #59b111;
font-size: 16px;
margin-top: 0px;
margin-bottom: 20px;
}
p {
margin-top: 0px;
margin-bottom: 20px;
}
a, a:visited, a b {
color: #59b111;
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
a img {
border: none;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input[type='text'], input[type='password'], textarea {
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 3px;
margin-left: 0px;
margin-right: 0px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
position: relative;
}
select {
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
position: relative;
}
label {
cursor: pointer;
}
/*------------------------------------------*/
/* layout
--------------------------------------------*/
.container_12 {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
position: relative;
}
#content {
overflow: hidden;
margin-right: 10px;
margin-left: 10px;
}
#column-right + #content {
margin-left: 10px;
/*margin-right: 310px; */
}
#column-left + #content {
margin-right: 10px;
margin-left: 310px;
}
#column-left + #column-right + #content {
margin-right: 310px;
margin-left: 310px;
}
#column-left {float: left;}
#column-right {float: right;}
/*------------------------------------------*/
/* top
--------------------------------------------*/
.top {
background: #000;
color: #fff;
position: relative;
overflow: hidden;
padding-bottom: 12px;
margin-bottom: 20px;
font-size: 11px;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
}
.top #welcome {
float: left;
z-index: 5;
color: #fff;
text-transform: uppercase;
margin-top: 20px;
margin-right: 20px;
}
.top #welcome a {
color: #59b111
}
.top .links {
font-size: 10px;
margin-top: 20px;
float: right;
}
.top .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
color: #000;
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
}
.top .links a + a {
margin-left: 8px;
}
.top .links a:hover {
text-decoration: underline;
}
#language {
float: left;
width: auto;
margin-top: 12px;
}
#language img {
cursor: pointer;
margin-left: 2px;
padding: 8px 6px;
position: relative
}
#currency {
float: left;
width: auto;
margin-top: 12px;
margin-left: 4px;
}
#currency a {
display: inline-block;
border-radius: 100% 100% 100% 100%;
-moz-border-radius: 100% 100% 100% 100%;
-o-border-radius: 100% 100% 100% 100%;
-webkit-border-radius: 100% 100% 100% 100%;
padding: 6px 10px;
color: #000;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
position: relative;
background: #fff;
}
#currency b, #currency a:hover {
color: #59b111;
font-weight: bold;
text-decoration: none;
}
/*------------------------------------------*/
/* header
--------------------------------------------*/
header {
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
min-height: 100px;
width: 100%;
}
header #logo {
float: left;
}
header #logo img{
max-width: 100%;
height: auto;
display: block;
margin: auto;
}
.phoneBlock {
width: 270px;
margin-right: 40px;
float: right;
color: #000;
}
.phoneBlock:first-child {
width: 270px;
margin-right: 0;
}
.phone {
width: 45px;
height: 45px;
background: #fff;
border: 1px solid #eee;
border-radius: 100% 100% 100% 100%;
-moz-border-radius: 100% 100% 100% 100%;
-webkit-border-radius: 100% 100% 100% 100%;
-o-border-radius: 100% 100% 100% 100%;
float: left;
text-align: center;
line-height: 45px;
margin-right: 7px;
}
.phone img {
vertical-align: middle;
}
.titleBlock {
display: block;
font-weight: bold;
padding-top: 10px;
}
header #cart {
z-index: 9;
float: right;
min-width: 300px;
height: 30px;
margin-top: 30px;
position: relative;
}
header #cart .heading {
float: left;
margin-left: 45px;
position: relative;
z-index: 1;
padding-left: 30px;
background: url(../image/cart.png) left no-repeat;
min-height: 20px;
line-height: 20px;
}
header #cart .heading h4 {
color: #333333;
display: none;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
header #cart .heading a {
color: #000;
text-decoration: none;
}
header #cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}
header #cart .content {
clear: both;
display: none;
position: absolute;
width: 300px;
right: 0;
top: 25px;
padding: 8px;
-moz-box-shadow: 0px 2px 8px #ccc;
-webkit-box-shadow: 0px 2px 8px #ccc;
box-shadow: 0px 2px 8px #ccc;
background: #FFF;
overflow: hidden;
}
header #cart .content span.sm {
display: block;
position: absolute;
top: -6px;
right: 13px;
width: 13px;
height: 7px;
background: url(../image/sm.png) no-repeat center;
}
header #cart.active .content {
display: block;
}
.mini-cart-info .one-product {
float: left;
clear: both;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
width: 100%;
position: relative;
}
.mini-cart-info .image {
width: 1px;
}
.mini-cart-info .image img {
padding: 3px;
text-align: left;
float: left;
margin-right: 10px;
}
.mini-cart-info .name {
padding-top: 15px;
margin-bottom: 5px;
}
.mini-cart-info .name small {
color: #666;
}
.mini-cart-info .name a {
text-decoration: none;
}
.mini-cart-info .quantity {
text-align: right;
}
.mini-cart-info td.total {
text-align: right;
}
.mini-cart-info .remove {
text-align: right;
position: absolute;
right: 10px;
top: 10px;
}
.mini-cart-info .remove img {
cursor: pointer;
}
.mini-cart-total {
text-align: right;
margin-bottom: 10px;
}
.mini-cart-total table {
border-collapse: collapse;
display: inline-block;
margin-bottom: 5px;
}
.mini-cart-total td {
color: #000;
padding: 4px;
}
header #cart .checkout {
text-align: right;
float: left;
width: 75px;
}
header #cart .checkout a {
display: block;
float: left;
width: 75px;
height: 26px;
text-align: center;
line-height: 26px;
color: #fff;
text-decoration: none;
margin-top: 10px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
a.ca {
background: #656565;
}
a.ch {
background: #3dade2;
}
a.ch:hover, a.ca:hover {
-webkit-transition: all .4s ease-in;
-moz-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
transition: all .4s ease-in;
background: #000;
}
header #cart .empty {
padding: 10px 0;
text-align: center;
}
/*------------------------------------------*/
/* Hotline
--------------------------------------------*/
.hotLine {
float: left;
font-size: 18px;
font-weight: bold;
min-width: 270px;
margin-top: 12px;
}
.hotLine img {
float: left;
margin-right: 10px;
}
.hotLine span {
font-size: 13px;
color: #3dade2;
}
/*------------------------------------------*/
/* menu
--------------------------------------------*/
.menuDevices {
display: none
}
.menuWrap {
background: -webkit-gradient(linear, left top, left bottom, from(#59b111), to(#59b111));
background: -moz-linear-gradient(top, #59b111, #59b111);
background: -o-linear-gradient(#59b111, #59b111);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#59b111', endColorstr='#59b111');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#59b111',endColorstr='#59b111')";
zoom:1;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
position: relative;
height: 45px;
margin-bottom: 20px;
margin-top: 20px;
}
#menu {
float: left;
height: 45px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
margin-left: 15px;
}
#menu > ul > li {
float: left;
z-index: 20;
height: 45px;
line-height: 45px;
padding: 0 20px;
position: relative;
}
#menu > ul > li:hover {
background: #2e2e2e;
}
#menu > ul > li > a {
font-size: 13px;
color: #eee;
text-decoration: none;
display: block;
z-index: 6;
}
#menu > ul > li:hover > a {
}
#menu > ul > li > div {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 300px;
z-index: 5;
margin-left: 0 !important;
background:#fff;
border: 1px solid #eee;
padding: 10px;
padding-bottom: 5px;
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
margin-left: 0;
width: 100%;
float: left;
clear: both;
}
#menu > ul > li > div > ul > li {
padding: 0;
height: 30px;
line-height: 23px;
background: #eee;
float: left;
display: inline;
width: 47%;
padding-left: 1%;
margin-bottom: 2%;
position: relative;
}
#menu > ul > li > div > ul > li:nth-child(even) {
margin-left: 4%;
}
#menu > ul > li > div > ul li:hover, #menu > ul > li > div > ul li:hover ul li:hover {
background: #ddd;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
display: block;
white-space: nowrap;
min-width: 120px;
color: #000;
}
#menu > ul > li > div > ul > li > a:hover, #menu > ul > li > div > ul li:hover ul li a:hover {
color: #59B111;
}
.imageMenu {
width: 300px !important;
height: auto !important;
clear: both;
background: #fff;
}
.imageMenu img {
width: 300px !important;
height: auto !important;
margin-bottom: 10px;
}
#menu > ul > li > div > ul > li ul {
display: none;
}
#menu > ul > li > div > ul li:hover ul {
display: block;
margin-left: 0;
z-index: 1000;
position: absolute;
left: 100%;
top: 0;
background:#fff;
border: 1px solid #eee;
padding: 10px;
padding-bottom: 5px;
width: 150px;
}
#menu > ul > li > div > ul li:hover ul li {
padding: 0;
height: 30px;
line-height: 23px;
background: #eee;
padding-left: 1%;
margin-bottom: 3%;
}
.arro {
position: absolute;
right: 4px;
top: 2px;
}
/*------------------------------------------*/
/* search
--------------------------------------------*/
#search {
float: right;
width: 290px;
z-index: 15;
height: 30px;
margin-top: 20px;
background: #fff;
position: relative;
border: 1px solid #eee;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
-o-border-radius: 3px 3px 3px 3px;
}
.button-search {
float: right;
margin: 6px 10px 0 0;
background: url(../image/search.png) no-repeat center center;
width: 17px;
height: 17px;
cursor: pointer;
display: block;
}
.button-search:hover {
background: url(../image/search.png) no-repeat center center;
}
.advanced {
float: left;
padding: 0 15px;
border-right: 1px solid #eee;
height: 30px;
line-height: 30px;
font-weight: bold;
color: #000;
}
#search input {
background: #FFF;
width: 250px !important;
height: 24px;
border: none;
font-size: 13px;
color: #000 !important;
margin-left: 0;
}
/*Autofill*/
#livesearch_search_results {
margin:0px;
padding:5px;
position: absolute;
top: 30px;
left: 0;
background-color: #fff;
list-style-type: none;
z-index: 12;
width: 300px;
border: 1px solid #eee;
color: #fff;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
#livesearch_search_results li {
padding: 5px;
}
#livesearch_search_results li + li {
border-top: 1px solid #eee;
}
#livesearch_search_results a,
#livesearch_search_results a:visited {
text-decoration: none;
width: 100%;
display: block;
}
#livesearch_search_results a:hover {
color: #fff !important;
}
#livesearch_search_results li:hover {
background-color: #ccc;
color: #fff !important;
}
#livesearch_search_results li:hover a {
color: #fff !important;
}
#livesearch_search_results .highlighted {
background-color: #ccc;
color: #fff !important;
}
/**/
/*------------------------------------------*/
/* Breadcrumb
--------------------------------------------*/
#content .breadcrumb {
margin: 0 0 20px 0;
}
.breadcrumb {
color: #787878;
font-weight: bold;
margin: 0 10px 20px 10px;
font-size: 12px;
}
.breadcrumb a {
color: #787878;
text-decoration: none;
}
.breadcrumb a + a {
color: #3dade2;
}
/*------------------------------------------*/
/* notifications
--------------------------------------------*/
.success, .warning, .attention, .information {
padding: 10px 0 10px 33px;
margin: 0 10px 20px 10px;
color: #555555;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.success {
background: #EAF7D9 url('../image/success.png') 10px center no-repeat;
border: 1px solid #BBDF8D;
}
.warning {
background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;
border: 1px solid #F8ACAC;
}
.attention {
background: #FFF5CC url('../image/attention.png') 10px center no-repeat;
border: 1px solid #F2DD8C;
}
.success .close, .warning .close, .attention .close, .information .close {
float: right;
padding-top: 4px;
padding-right: 4px;
cursor: pointer;
}
.required {
color: #FF0000;
font-weight: bold;
}
.error {
display: block;
color: #FF0000;
}
.help {
color: #999;
font-size: 10px;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
display: block;
}
/*------------------------------------------*/
/* table
--------------------------------------------*/
table {
background: #fff;
}
table.form {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
}
table.form tr td:first-child {
width: 150px;
}
table.form > * > * > td {
color: #000000;
}
table.form td {
padding: 4px;
}
input.large-field, select.large-field {
width: 300px;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
table.list td {
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
background-color: #EFEFEF;
padding: 0px 5px;
}
table.list thead td a, .list thead td {
text-decoration: none;
color: #222222;
font-weight: bold;
}
table.list tbody td {
vertical-align: top;
padding: 0px 5px;
}
table.list .left {
text-align: left;
padding: 7px;
}
table.list .right {
text-align: right;
padding: 7px;
}
table.list .center {
text-align: center;
padding: 7px;
}
table.radio {
width: 100%;
border-collapse: collapse;
}
table.radio td {
padding: 5px;
vertical-align: top;
}
table.radio td label {
display: block;
}
table.radio tr td:first-child {
width: 1px;
}
table.radio tr td:first-child input {
margin-top: 1px;
}
table.radio tr.highlight:hover td {
background: #F1FFDD;
cursor: pointer;
}
/*------------------------------------------*/
/* pagination
--------------------------------------------*/
.pagination {
font-size: 14px;
overflow: hidden;
margin: 0 10px 20px 10px;
clear: both;
}
.pagination .links {
float: left;
}
.pagination .links a {
display: inline-block;
padding: 4px 10px;
text-decoration: none;
color: #fff;
float: left;
background: #000;
margin-right: 2px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.pagination .links b {
display: inline-block;
float: left;
padding: 2.7px 10px;
font-weight: normal;
text-decoration: none;
color: #fff;
background: #59B111;
margin-right: 2px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.pagination .results {
float: right;
padding-top: 3px;
}
/*------------------------------------------*/
/* button
--------------------------------------------*/
a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #000;
position: relative;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 12px 0px 12px;
}
a.button:hover, input.button:hover {
/*background: #3dade2;*/
color: #fff;
}
.buttons {
background: #FFFFFF;
border: 1px solid #EEEEEE;
overflow: auto;
padding: 6px;
margin-bottom: 20px;
}
.buttons .left {
float: left;
text-align: left;
}
.buttons .right {
float: right;
text-align: right;
}
.buttons .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/*------------------------------------------*/
/* tabs
--------------------------------------------*/
.htabs {
height: 30px;
line-height: 16px;
border-bottom: 1px solid #DDDDDD;
margin: 0 10px 0 10px;
}
.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
padding: 7px 15px 6px 15px;
float: left;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;
margin-right: 2px;
display: none;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.htabs a.selected {
padding-bottom: 7px;
background: #FFFFFF;
}
.tab-content {
font-size: 12px;
background: #fff;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 10px;
margin: 0 10px 20px 10px;
z-index: 2;
overflow: auto;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
/*------------------------------------------*/
/* box
--------------------------------------------*/
.box {
font-size: 12px;
float: left;
}
.box .box-heading {
margin: 0 10px 20px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
line-height: 14px;
padding: 15px 10px;
color: #59b111;
background: #eee;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
text-transform: uppercase
}
.box-heading span {
background: #fff;
padding: 0 15px;
}
/*------------------------------------------*/
/* featured
--------------------------------------------*/
.featured {
width: 100%;
}
/* carousel effect on modules */
.caroufredsel_wrapper {
float: left !important;
}
.foo3 {
left: 0;
}
.list_carousel {
width: 100%;
display: block;
margin-left: 0;
margin-bottom: 0;
text-align: left;
position: relative;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
color: #999;
text-align: center;
margin: 0;
display: block;
float: left;
position: relative;
}
.list_carousel li + li {
}
.list_carousel.responsive {
width: 100%;
margin-left: 0;
}
.pager {
width: 100%;
text-align: center;
}
.pager a {
text-align: center;
position: relative;
display: inline-block;
margin: 20px 2px 0 2px;
width: 15px;
height: 15px;
background: #CCC;
font-size: 0;
border-radius: 100% 100% 100% 100%;
-moz-border-radius: 100% 100% 100% 100%;
-o-border-radius: 100% 100% 100% 100%;
text-decoration: none;
}
.pager a.selected {
width: 15px;
height: 15px;
text-decoration: underline;
background: #3dade2;
}
.next {
position: absolute;
right: 20px;
top: -68px;
font-size: 40px;
font-family: Arial, Helvetica, sans-serif !important
}
.prev {
position: absolute;
right: 50px;
top: -68px;
font-size: 40px;
font-family: Arial, Helvetica, sans-serif !important
}
.next:hover, .prev:hover {
color: #fff;
text-decoration: none;
}
.main {
text-align: center;
}
.hover-options {
display: none;
}
.main:hover .hover-options, .normalView:hover .hover-options, .product-list > div:hover .hover-options, .product-grid > div:hover .hover-options {
display: block;
position: absolute;
width: 80%;
padding: 10%;
font-size: 15px;
color: #000;
top: 0;
left: 0;
background: url(../image/hover-bg.png);
}
/*------------------------------------------*/
/* box products
--------------------------------------------*/
.box-product {
width: 100%;
text-align: center;
}
.normalView {
vertical-align: top;
color: #999;
text-align: center;
position: relative;
border: 1px solid #eee;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}
.normalView:hover {
border: 1px solid #F1A0B5;
}
.box-product .description {
position: relative;
padding: 10px;
clear: both;
font-size: 15px;
text-align: left;
color: #000;
}
.box-product .image {
display: block;
margin-bottom: 0px;
padding-bottom: 10px;
margin: 0 auto;
}
.box-product .image img {
padding: 3px;
text-align: center;
display: block;
margin: 0 auto;
max-width: 100%;
}
.box-product .name a {
color: #000;
padding: 10px;
padding-bottom: 0;
font-size: 15px;
text-align: left;
text-decoration: none;
display: block;
margin-bottom: 4px;
font-weight: bold;
}
.box-product .price {
display: block;
float: left;
font-size: 20px;
color: #000;
text-align: left;
padding: 10px;
padding-top: 0;
margin-bottom: 4px;
}
.box-product .price-old {
color: #fa7e6e;
font-size: 20px;
text-decoration: line-through;
}
.box-product .price-new {
}
.cartIcon, .wishIcon, .compareIcon {
width: 45px;
height: 45px;
background: #000;
text-align: center;
line-height: 45px;
float: right;
margin: -8px 10px 10px;
border-radius: 100% 100% 100% 100%;
-moz-border-radius: 100% 100% 100% 100%;
-o-border-radius: 100% 100% 100% 100%;
-webkit-border-radius: 100% 100% 100% 100%;
}
.cartIcon:hover, .wishIcon:hover, .compareIcon:hover {
background: #fa7e6e;
}
.cartImg, .wish, .compare {
display: block;
background: url(../image/cart-icon.png) no-repeat center;
width: 24px;
height: 23px;
font-size: 0pt;
border: none;
margin: 10px auto 0 auto;
text-align: center;
}
.wish {
background: url(../image/wish-icon.png) no-repeat center;
}
.compare {
background: url(../image/compare-icon.png) no-repeat center;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}
.saleIcon {
position: absolute;
left: 10px;
top: 10px;
color: #fff;
background: #f1a0b5;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
border-radius: 100% 100% 100% 100%;
-moz-border-radius: 100% 100% 100% 100%;
-webkit-border-radius: 100% 100% 100% 100%;
-o-border-radius: 100% 100% 100% 100%;
}
.newIcon {
position: absolute;
right: 10px;
top: 10px;
color: #fff;
background: #a4d2f2;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 15px;
text-transform: uppercase;
border-radius: 100% 100% 100% 100%;
-moz-border-radius: 100% 100% 100% 100%;
-webkit-border-radius: 100% 100% 100% 100%;
-o-border-radius: 100% 100% 100% 100%;
}
.bestIcon {
position: absolute;
right: 10px;
top: 10px;
color: #fff;
background: #a4d2f2;
width: 60px;
height: 60px;
line-height: 55px;
text-align: center;
font-size: 15px;
text-transform: uppercase;
border-radius: 100% 100% 100% 100%;
-moz-border-radius: 100% 100% 100% 100%;
-webkit-border-radius: 100% 100% 100% 100%;
-o-border-radius: 100% 100% 100% 100%;
}
/* box category */
/* box category // Accordion
======================================================*/
.category .box-heading {
background: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b), to(#000000));
background: -moz-linear-gradient(top, #4b4b4b, #000000);
background: -o-linear-gradient(#4b4b4b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b', endColorstr='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4b4b4b',endColorstr='#000000')";
zoom: 1;
position: relative;
padding: 15px 10px 15px 10px;
font-size: 25px;
font-weight: bold;
line-height: 14px;
color: #fff;
margin: 0
}
.box-category {
margin-top: -5px;
}
.box-category ul {
list-style: none;
margin: 10px 0 0 10px;
padding: 0;
}
.box-category > ul > li {
padding: 5px 0px 8px 0px;
position: relative;
}
.box-category > ul > li > a {
text-decoration: none;
color: #000;
font-size: 14px;
}
.box-category > ul > li > a:hover {
color: #787878;
}
.box-category > ul > li {
padding-left: 20px;
background: url(../image/arrow-left.png) left 8px no-repeat;
}
.box-category > ul > li a{
position: relative;
display: block;
width: 100%;
}
.box-category > ul > li a.active {
font-weight: bold;
color: #000;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul {
margin-top: 10px;
}
.box-category > ul > li ul > li {
padding: 5px 5px 0px 10px;
}
.box-category > ul > li ul > li > a {
text-decoration: none;
display: block;
color: #000;
}
.box-category > ul > li ul > li > a:hover {
color: #787878;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}
a .dcjq-icon {
position: absolute;
top: 50%;
right: 2px;
width: 8px;
margin-top: -17px;
height: 34px;
background: url(../image/plus.png) no-repeat 0 center;
}
a.dcjq-parent.active .dcjq-icon {
background: url(../image/minus.png) no-repeat 0 center;
}
/* Right and Left Columns
--------------------------------------------*/
#column-left .grid_3, #column-right .grid_3 {
float: none;
margin: 0;
}
#column-left .box , #column-right .box {
float: none;
margin-bottom: 20px;
clear: both
}
#column-left .box .box-heading, #column-right .box .box-heading {
font-size: 20px;
margin-right: 0;
margin-left: 0;
float: none;
}
#column-left .category .box-heading, #column-right .category .box-heading {
margin-bottom: 20px;
}
#column-left .normalView,
#column-right .normalView {
padding: 0;
margin: 0;
border: none;
min-height: inherit !important;
text-align: left;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
#column-left .box-product .name a,
#column-right .box-product .name a {
padding-top: 15px;
}
#column-left .price, #column-right .price,
#column-left .old-price, #column-right .old-price,
#column-left .box-product .price-old, #column-right .box-product .price-old {
font-size: 13px !important;
}
#column-left .normalView .image,
#column-right .normalView .image {
float: left;
margin-right: 10px;
width: 80px;
height: 100px;
}
#column-left .saleIcon, #column-left .bestIcon, #column-left .newIcon, #column-left .description, #column-left .cartIcon,
#column-right .saleIcon, #column-right .bestIcon, #column-right .newIcon, #column-right .description, #column-right .cartIcon {
display: none;
}
#column-left .cartIcon, #column-right .cartIcon {
margin: 0px 10px 10px;
}
#column-left .normalView:hover,
#column-right .normalView:hover {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
#column-left .box-product .rating,
#column-right .box-product .rating {
float: left;
}
#column-left .list_carousel li + li,
#column-right .list_carousel li + li {
border: 0 !important;
}
#column-left .list_carousel li .rating,
#column-right .list_carousel li .rating {
float: none;
}
/* featured on two columns
--------------------------------------------*/
#column-left .featured .normalView .image,
#column-right .featured .normalView .image {
float: none;
margin-right: 0;
width: inherit;
height: inherit;
}
#column-left .featured .description, #column-right .featured .description {
display: block
}
#column-left .featured .price, #column-right .featured .price,
#column-left .featured .old-price, #column-right .featured .old-price {
font-size: 20px;
}
#column-left .featured .cartIcon, #column-right .featured .cartIcon {
margin: -20px 10px 10px;
display: block;
}
#column-left .next, #column-right .next {
right: 10px;
}
#column-left .prev, #column-right .prev {
right: 40px;
}
#column-left .featured .grid_3, #column-right .featured .grid_3 {
float: left;
margin-right: 10px;
margin-left: 10px;
}
#column-left .featured .normalView, #column-right .featured .normalView {
padding-bottom: 0;
border: 1px solid #eee;
margin-bottom: 20px;
}
#column-left .featured .saleIcon {
display: block;
}
/*------------------------------------------*/
/* box filter
--------------------------------------------*/
ul.box-filter, ul.box-filter ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.box-filter li {
margin-bottom: 15px;
}
ul.box-filter span {
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #EEEEEE;
display: block;
padding-bottom: 5px;
margin-bottom: 8px;
}
ul.box-filter > li ul {
padding-bottom: 10px;
}
ul.box-filter > li ul li {
margin-bottom: 5px;
}
/*------------------------------------------*/
/* content
--------------------------------------------*/
.wrap .content, .wrap .buttons {
margin: 0 10px 20px 10px;
}
#content .content {
font-size: 12px;
overflow: hidden;
margin-bottom: 20px;
border: 1px solid #EEEEEE;
padding: 20px;
background: #fff;
margin-bottom: 20px;
}
#content .content .left {
float: left;
width: 49%;
}
#content .content .right {
float: right;
width: 49%;
}
/*------------------------------------------*/
/* category
--------------------------------------------*/
.category-info {
color: #787878;
float: none;
}
.category-info .image {
float: left;
margin: 0 10px 20px 10px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.category-info .image img {
width: 100%;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.right-part-2 {
margin: 0 10px 20px 10px;
}
.category-list {
margin-bottom: 20px;
}
.category-list ul {
float: left;
width: 18%;
}
.category-list div {
color: #000;
display: inline;
float: left;
width: 20%;
position: relative;
z-index: 0;
margin-right: 2%;
}
.category-list div:hover {
z-index: 50
}
.refine {
float: left;
width: 100%;
margin: 0 10px 20px 10px;
}
.category-list div .image-refine {
visibility: hidden;
position: absolute;
padding: 5px;
left: 10px;
border: 1px solid #eee;
}
.image-refine img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.category-list div:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
background: #fff;
top: -120px;
left: 10px; /*position where enlarged image should offset horizontally */
}
.category-list div a {
color: #000;
padding-left: 10px;
line-height: 18px;
background: url(../image/arrow-left.png) left 5px no-repeat;
text-decoration: none;
}
.category-list div a:hover {
color: #787878;
}
/*------------------------------------------*/
/* manufacturer
--------------------------------------------*/
.manufacturer-list {
background: #fff;
border: 1px solid #DBDEE1;
padding: 5px;
overflow: auto;
margin-bottom: 20px;
}
.manufacturer-heading {
background: #F8F8F8;
font-size: 15px;
font-weight: bold;
padding: 5px 8px;
margin-bottom: 6px;
}
.manufacturer-content {
padding: 8px;
}
.manufacturer-list ul {
float: left;
width: 25%;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 10px;
}
/*------------------------------------------*/
/* product
--------------------------------------------*/
.product-filter {
font-size: 12px;
background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b), to(#000000));
background: -moz-linear-gradient(top, #4b4b4b, #000000);
background: -o-linear-gradient(#4b4b4b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b', endColorstr='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4b4b4b',endColorstr='#000000')";
zoom: 1;
color: #fff;
margin: 0 1.1% 20px 1.1%;
float: left;
padding: 5px 0;
width: 97.8%;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.product-filter .display {
margin-right: 15px;
float: right;
padding-top: 5px;
color: #333;
}
.display_list a {
float: left;
font-size: 0pt;
width: 25px;
height: 25px;
background: url(../image/display.png) no-repeat top left;
display: block;
}
.display b {
float: left;
display: block;
margin-right: 10px;
margin-top: 5px;
}
.display_list {
margin: 0 2px;
float: right;
font-size: 0pt;
width: 25px;
height: 25px;
background: url(../image/display.png) no-repeat bottom left;
}
.display_grid a {
float: left;
font-size: 0pt;
width: 25px;
height: 25px;
background: url(../image/display.png) no-repeat bottom right;
display: block;
}
.display_grid {
float: left;
font-size: 0pt;
width: 25px;
height: 25px;
background: url(../image/display.png) no-repeat top right;
}
.product-filter .sort {
float: left;
margin-right: 15px;
margin-top: 5px;
}
.product-filter .limit {
margin: 5px 15px;
float: left;
}
.product-filter .sort select, .product-filter .limit select {
background: #fff;
border: none;
padding: 3px;
margin-left: 5px;
}
.product-compare {
margin-top: 10px;
font-weight: bold;
float: left;
}
.product-compare a {
text-decoration: none;
font-weight: bold;
color: #fff;
}
/*------------------------------------------*/
/* product list
--------------------------------------------*/
.product-list {
float: left;
width: 100%;
}
.product-list .saleIcon {
left: 10px;
right: auto
}
.product-list > div {
background: #fff;
position: relative;
border: 1px solid #eee;
overflow: hidden;
width: 97.4%;
margin: 0 1.2% 20px 1.2%;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.product-list > div .sale {
left: 10px;
}
.product-list .right {
float: right;
margin-left: 15px;
margin-bottom: 15px;
padding-left: 10px;
min-width: 120px;
padding: 15px;
border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
-o-border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
}
.product-list .image {
float: left;
margin-right: 30px;
padding: 10px;
}
.product-list .name {
margin-bottom: 15px;
padding-top: 10px;
font-weight: bold;
}
.product-list .name a {
font-size: 15px;
}
.product-list .name a:hover {
text-decoration: underline
}
.product-list .description {
color: #000;
font-size: 15px;
}
.product-list .rating {
color: #7B7B7B;
margin-bottom: 20px;
}
.product-list .price {
margin-bottom: 20px;
color: #000;
font-size: 20px;
display: block;
overflow: hidden;
}
.product-list .price-old {
color: #FA7E6E;
text-decoration: line-through;
}
.product-list .price-tax {
width: 100%;
display: block;
margin-top: 20px;
font-size: 12px;
font-weight: normal;
color: #BBBBBB;
}
.product-list .cartIcon, .product-list .wishIcon, .product-list .compareIcon {
float: left;
margin: 20px 10px 20px 0;
}
/*------------------------------------------*/
/* product grid
--------------------------------------------*/
.product-grid {
text-align: center;
font-size: 0;
}
.product-grid > div {
background: #fff;
vertical-align: top;
border: 1px solid #EEEEEE;
color: #999999;
/*width: 278px;*//*tri*/
display: inline-block;
margin: 0 10px 20px 10px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
position: relative;
text-align: left;
width: 203px;
}
.product-grid > div:hover, .product-list > div:hover {
border: 1px solid #f1a0b5
}
.product-grid .image {
display: block;
margin-bottom: 0px;
text-align: center
}
.product-grid .image img {
/*padding: 3px;*/
/*text-align: center*//*tri*/
padding: 3px;
text-align: center;
float: left;
width: 97%;
}
.product-grid .name a {
color: #3dade2;
text-decoration: none;
display: block;
margin-bottom: 4px;
font-size: 15px;
font-weight: bold;
padding: 10px;
padding-bottom: 0;
}
.product-grid .description {
font-size: 15px;
padding: 10px;
clear: both;
color: #000;
max-height: 50px;
overflow: hidden;
margin-bottom: 7px;
}
.product-grid .rating {
display: none;
margin-bottom: 4px;
}
.product-grid .price {
color: #000000;
display: block;
float: left;
font-size: 20px;
margin-bottom: 4px;
padding: 0 10px 10px;
text-align: left;
clear: both;
}
.product-grid .price-old {
color: #FA7E6E;
font-size: 20px;
text-decoration: line-through;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cartIcon, .product-grid .wishIcon, .product-grid .compareIcon {
float: left;
margin: 0 0 20px 10px;
}
/*------------------------------------------*/
/* Product details
--------------------------------------------*/
.product-info {
font-size: 12px;
overflow: hidden;
margin-bottom: 20px;
margin: 0 10px 20px 10px;
}
.product-info > .left {
float: left;
width: 400px;
margin-right: 15px;
}
.product-title {
color: #3dade2;
}
.product-info > .left + .right {
margin-left: 440px;
}
.product-info .image {
float: left;
margin-bottom: 10px;
padding: 10px;
text-align: center;
width: 400px;
border: 1px solid #eee;
}
.product-info > .left img {
width: 100%;
}
.product-info .image-additional {
width: 430px;
margin-left: -10px;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
padding: 2px;
width: 48px;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 10px;
}
.product-info .description {
padding: 5px 5px 10px 5px;
margin-bottom: 10px;
line-height: 20px;
color: #4D4D4D;
}
.product-info .description span {
color: #000;
font-weight: bold;
}
.product-info .description a {
color: #4D4D4D;
text-decoration: none;
}
.price-text {
font-size: 25px;
float: left;
margin-right: 20px;
}
.price-data {
float: left;
margin-top: 5px;
}
.product-info .price {
overflow: hidden;
border: 1px dashed #ccc;
padding: 15px;
margin-bottom: 25px;
font-size: 20px;
font-weight: bold;
color: #333333;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.product-info .price-old {
color: #F00;
font-size: 15px;
text-decoration: line-through;
}
.product-info .price-new {
float: left;
margin-right: 15px;
font-size: 20px;
}
.product-info .price-tax {
font-size: 12px;
font-weight: normal;
color: #999;
}
.product-info .price .reward {
font-size: 12px;
font-weight: normal;
color: #999;
}
.product-info .price .discount {
font-weight: normal;
font-size: 12px;
color: #4D4D4D;
}
.product-info .wish-compare {
width: 75px;
}
.product-info .wish {
background: url(../image/wish-icon-info.png) center no-repeat;
width: 25px;
height: 22px;
float: left;
margin-right: 10px;
}
.product-info .compare {
background: url(../image/compare-icon-info.png) center no-repeat;
width: 28px;
height: 21px;
float: left;
}
.cart-product {
padding: 10px 30px !important;
font-size: 18px !important;
font-weight: bold;
line-height: 22px !important;
height: auto !important
}
.option-title {
font-size: 25px;
}
.product-info .options {
border: 1px dashed #ccc;
background: #eee;
margin-bottom: 10px;
color: #000000;
padding: 3%;
width: 93.8%;
float: left;
}
.product-info .option-image {
margin-top: 3px;
margin-bottom: 10px;
}
.product-info .option-image label {
display: block;
width: 100%;
height: 100%;
}
.product-info .option-image img {
margin-right: 5px;
border: 1px solid #CCCCCC;
cursor: pointer;
}
.product-info .cart {
padding: 5px 0;
margin-bottom: 20px;
color: #4D4D4D;
float: left;
width: 100%;
}
.product-info .cart div {
float: left;
vertical-align: middle;
}
.wish-compare {
margin: 5px 0 0 10px;
}
.product-info .cart div > span {
padding-top: 7px;
display: block;
color: #999;
}
.product-info .cart .minimum {
padding-top: 15px;
font-size: 11px;
color: #999;
clear: both;
}
.cart .quantity {
background: #fff !important;
border: 1px solid #eee !important;
color: #000;
}
input.quantity {
background: #fff !important;
color: #000 !important
}
/*------------------------------------------*/
/* related products
--------------------------------------------*/
.related-product {
float: left;
width: 100%;
font-size: 0;
}
.realted-title {
background: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b), to(#000000));
background: -moz-linear-gradient(top, #4b4b4b, #000000);
background: -o-linear-gradient(#4b4b4b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b', endColorstr='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4b4b4b',endColorstr='#000000')";
zoom: 1;
color: #FFFFFF;
font-size: 18px;
line-height: 23px;
padding: 8px 10px 7px;
position: relative;
margin-bottom: 20px;
margin: 0 10px 20px 10px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.related {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #EEEEEE;
border-radius: 5px 5px 5px 5px;
color: #999999;
display: inline-block;
margin: 0 10px 20px;
position: relative;
text-align: left;
vertical-align: top;
width: 278px;
float: left;
}
.related:hover {
border: 1px solid #F1A0B5;
}
.related .image {
display: block;
margin-bottom: 0px;
text-align: center
}
.related .image img {
padding: 3px;
text-align: center
}
.related .name a {
color: #3dade2;
text-decoration: none;
display: block;
margin-bottom: 4px;
font-size: 15px;
font-weight: bold;
padding: 10px;
padding-bottom: 0;
}
.related .rating {
display: none;
margin-bottom: 4px;
}
.related .price {
color: #000000;
display: block;
float: left;
font-size: 20px;
margin-bottom: 4px;
padding: 0 10px 10px;
text-align: left;
clear: both;
}
.related .price-old {
color: #FA7E6E;
font-size: 20px;
text-decoration: line-through;
}
.related .price .price-tax {
display: none;
}
.related .cartIcon, .related .wishIcon, .related .compareIcon {
float: left;
margin: 0 0 20px 10px;
}
/*------------------------------------------*/
/* review
--------------------------------------------*/
.product-info .review {
color: #4D4D4D;
border: 1px dashed #ccc;
background: #eee;
margin-bottom: 10px;
width: 99.7%;
float: left;
}
.product-info .review a {
text-decoration: none;
}
.product-info .review a:hover {
color: #000
}
.product-info .review > div {
padding: 8px;
line-height: 20px;
}
.product-info .review > div + div {
border-top: 1px dashed #ccc;
}
.review-text {
text-align: right
}
.review-img {
float: left;
margin-top: 4px;
}
.product-info .review > div > span {
color: #38B0E3;
}
.product-info .review .share {
overflow: auto;
line-height: normal;
}
.product-info .review .share a {
text-decoration: none;
}
.review-list {
padding: 10px;
overflow: auto;
margin-bottom: 20px;
border: 1px solid #EEEEEE;
}
.review-list .author {
float: left;
margin-bottom: 20px;
}
.review-list .rating {
float: right;
margin-bottom: 20px;
}
.review-list .text {
clear: both;
}
.attribute {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.attribute thead td, .attribute thead tr td:first-child {
color: #000000;
font-size: 14px;
font-weight: bold;
background: #F7F7F7;
text-align: left;
}
.attribute tr td:first-child {
color: #000000;
font-weight: bold;
text-align: right;
width: 20%;
}
.attribute td {
padding: 7px;
color: #4D4D4D;
text-align: center;
vertical-align: top;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.compare-info {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.compare-info thead td, .compare-info thead tr td:first-child {
color: #000000;
font-size: 14px;
font-weight: bold;
background: #F7F7F7;
text-align: left;
}
.compare-info tr td:first-child {
color: #000000;
font-weight: bold;
text-align: right;
}
.compare-info td {
padding: 7px;
width: 20%;
color: #4D4D4D;
text-align: center;
vertical-align: top;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.compare-info .name a {
font-weight: bold;
}
.compare-info .price-old {
font-weight: bold;
color: #F00;
text-decoration: line-through;
}
.compare-info .price-new {
font-weight: bold;
}
/*------------------------------------------*/
/* wishlist
--------------------------------------------*/
.wishlist-info table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.wishlist-info td {
padding: 7px;
}
.wishlist-info thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #DDDDDD;
}
.wishlist-info thead .image {
text-align: center;
}
.wishlist-info thead .name, .wishlist-info thead .model, .wishlist-info thead .stock {
text-align: left;
}
.wishlist-info thead .quantity, .wishlist-info thead .price, .wishlist-info thead .total, .wishlist-info thead .action {
text-align: right;
}
.wishlist-info tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.wishlist-info tbody .image img {
border: 1px solid #DDDDDD;
}
.wishlist-info tbody .image {
text-align: center;
}
.wishlist-info tbody .name, .wishlist-info tbody .model, .wishlist-info tbody .stock {
text-align: left;
}
.wishlist-info tbody .quantity, .wishlist-info tbody .price, .wishlist-info tbody .total, .wishlist-info tbody .action {
text-align: right;
}
.wishlist-info tbody .price s {
color: #F00;
}
.wishlist-info tbody .action img {
cursor: pointer;
}
.login-content {
margin-bottom: 20px;
overflow: auto;
}
.login-content .left {
float: left;
width: 48%;
}
.login-content .right {
float: right;
width: 48%
}
.login-content .left .content, .login-content .right .content {
min-height: 190px;
}
/*------------------------------------------*/
/* orders
--------------------------------------------*/
.order-list {
margin-bottom: 10px;
}
.order-list .order-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.order-list .order-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.order-list .order-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.order-list .order-content div {
float: left;
width: 33.3%;
}
.order-list .order-info {
text-align: right;
}
.order-detail {
background: #EFEFEF;
font-weight: bold;
}
/*------------------------------------------*/
/* returns
--------------------------------------------*/
.return-list {
margin-bottom: 10px;
}
.return-list .return-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.return-list .return-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.return-list .return-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.return-list .return-content div {
float: left;
width: 33.3%;
}
.return-list .return-info {
text-align: right;
}
.return-product {
overflow: auto;
margin-bottom: 20px;
}
.return-name {
float: left;
width: 31%;
margin-right: 15px;
}
.return-model {
float: left;
width: 31%;
margin-right: 15px;
}
.return-quantity {
float: left;
width: 31%;
}
.return-detail {
overflow: auto;
margin-bottom: 20px;
}
.return-reason {
float: left;
width: 31%;
margin-right: 15px;
}
.return-opened {
float: left;
width: 31%;
margin-right: 15px;
}
.return-opened textarea {
width: 98%;
vertical-align: top;
}
.return-captcha {
float: left;
}
.download-list {
margin-bottom: 10px;
}
.download-list .download-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.download-list .download-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.download-list .download-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.download-list .download-content div {
float: left;
width: 33.3%;
}
.download-list .download-info {
text-align: right;
}
/*------------------------------------------*/
/* cart
--------------------------------------------*/
.cart-info table {
background: #fff;
width: 100%;
margin-bottom: 15px;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}
.cart-info td {
padding: 7px;
}
.cart-info thead td {
color: #fff;
font-weight: bold;
background-color: #333;
border-bottom: 1px solid #DDDDDD;
}
.cart-info thead .image {
text-align: center;
}
.cart-info thead .name, .cart-info thead .model, .cart-info thead .quantity {
text-align: left;
}
.cart-info thead .price, .cart-info thead .total {
text-align: right;
}
.cart-info tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.cart-info tbody .image img {
border: 1px solid #DDDDDD;
}
.cart-info tbody .image {
text-align: center;
}
.cart-info tbody .name, .cart-info tbody .model, .cart-info tbody .quantity {
text-align: left;
}
.cart-info tbody .quantity input[type='image'], .cart-info tbody .quantity img {
position: relative;
top: 4px;
cursor: pointer;
}
.cart-info tbody .price, .cart-info tbody .total {
text-align: right;
}
.cart-info tbody span.stock {
color: #F00;
font-weight: bold;
}
.cart-module > div {
display: none;
}
.cart-total {
border-top: 1px solid #DDDDDD;
overflow: auto;
padding-top: 8px;
margin-bottom: 15px;
}
.cart-total table {
float: right;
}
.cart-total td {
padding: 3px;
text-align: right;
}
/*------------------------------------------*/
/* checkout
--------------------------------------------*/
.checkout {
font-size: 12px;
}
.checkout-heading {
background: #F8F8F8;
border: 1px solid #DBDEE1;
padding: 8px;
font-weight: bold;
font-size: 13px;
color: #555555;
margin-bottom: 15px;
}
.checkout-heading a {
float: right;
margin-top: 1px;
font-weight: normal;
text-decoration: none;
}
.checkout-content {
padding: 20px;
background: #fff;
display: none;
overflow: hidden;
}
.checkout-content .left {
float: left;
width: 48%;
}
.checkout-content .right {
float: right;
width: 48%;
}
.checkout-content .buttons {
clear: both;
}
.checkout-product table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.checkout-product td {
padding: 7px;
}
.checkout-product thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #DDDDDD;
}
.checkout-product thead .name, .checkout-product thead .model {
text-align: left;
}
.checkout-product thead .quantity, .checkout-product thead .price, .checkout-product thead .total {
text-align: right;
}
.checkout-product tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.checkout-product tbody .name, .checkout-product tbody .model {
text-align: left;
}
.checkout-product tbody .quantity, .checkout-product tbody .price, .checkout-product tbody .total {
text-align: right;
}
.checkout-product tfoot td {
text-align: right;
border-bottom: 1px solid #DDDDDD;
}
.contact-info {
overflow: auto;
}
.contact-info .left {
float: left;
width: 48%;
}
.contact-info .right {
float: left;
width: 48%;
}
.sitemap-info {
background: #fff;
overflow: hidden;
margin-bottom: 40px;
padding: 20px;
margin-bottom: 20px;
-moz-box-shadow: 0px 0px 6px #eee;
-webkit-box-shadow: 0px 0px 6px #eee;
box-shadow: 0px 0px 6px #eee;
}
.sitemap-info .left {
float: left;
width: 48%;
}
.sitemap-info .right {
float: left;
width: 48%;
}
/*------------------------------------------*/
/* footer
--------------------------------------------*/
footer {
background: #000;
overflow: hidden;
padding: 15px 0;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
position: relative;
}
.customBlocks {
overflow: hidden;
}
.customBlocks .box-heading {
margin-right: 0 !important;
margin-left: 0 !important;
padding-right: 4%;
padding-left: 4%;
}
.customBlocks .box {
width: 100%;
margin-bottom: 20px;
}
footer h3 {
color: #3dade2;
font-size: 15px;
margin-top: 0px;
margin-bottom: 15px;
}
footer .column {
margin-bottom: 20px;
}
footer .grid_2 p {
margin-left: 0 !important;
margin-right: 0 !important;
}
footer .column ul {
margin-top: 0px;
}
footer ul {
margin-left: 10px;
}
footer ul li {
list-style-type: circle;
line-height: 20px;
}
footer .column a {
text-decoration: none;
color: #000;
}
footer .column a:hover {
text-decoration: underline;
}
.contactImg {
float: left;
margin-right: 10px;
}
#powered {
margin-top: 5px;
width: 100%;
padding-top: 10px;
clear: both;
}
.poweredby {
float: left;
margin-top: 7px;
}
.paymentIcons {
float: right;
margin-left: 0px;
}
.paymentIcons li {
float: left;
display: inline;
margin: 2px;
margin-left: 0;
}
.socialIcons {
margin-left: 0px;
}
.socialIcons li {
margin-bottom: 2px;
list-style-type: none;
}
.socialIcons img {
margin-right: 5px;
}
.socialIcons li img:hover {
opacity: .7;
}
.bottom {
border-top: 1px solid #111;
background: none !important;
padding-top: 10px;
}
footer #language {
float: right;
margin-top: 0;
}
footer #language img {
padding: 8px 2px;
}
/*------------------------------------------*/
/* custom blocks
--------------------------------------------*/
.footerBoxes {
float: left;
}
.footerBoxes li {
float: left;
margin-bottom: 15px;
}
.imgFooter {
float: left;
margin-right: 10px;
}
.colorBg {
background: #3dade2;
float: left;
width: 40px;
height: 33px;
text-align: center;
margin-right: 15px;
padding-top: 7px;
}
.colorBg img {
margin: auto;
display: block;
}
/*------------------------------------*/
/* twitter
--------------------------------------*/
.tweet,
.query {
font: 12px;
float: left;
width: 100%;
}
.tweet_list {
list-style: none;
margin: 0;
padding: 0;
}
.tweet_list li {
list-style-type: none;
margin-bottom: 15px;
position: relative;
padding-left: 40px;
min-height: 40px;
}
.tweet_list .tweet_avatar {
position: absolute;
left: 0;
top: 0;
}
.tweet_list .tweet_avatar img {
vertical-align: top;
}
/*------------------------------------------*/
/* banner
--------------------------------------------*/
#banner0{ margin-left: 20px !important;}
.banner {
display: inline;
float: left;
margin: 0 10px 0 10px !important;
vertical-align: top;
width: 31%;
}
.banner > div {
text-align: center;
display: inline !important;
}
.banner > div img {
display: inline-block;
margin-bottom: 20px;
max-width: 100%;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
/*------------------------------------------*/
/* GO TO TOP
--------------------------------------------*/
#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:0;
right:0;
overflow:hidden;
padding: 10px;
height:20px;
width:20px;
border-radius: 100% 100% 100% 100%;
-moz-border-radius: 100% 100% 100% 100%;
-o-border-radius: 100% 100% 100% 100%;
-webkit-border-radius: 100% 100% 100% 100%;
border:none;
color: #fff;
font-size: 0pt;
background:#3dade2 url(../image/totop.png) center center no-repeat;
}
#toTop:Hover {
background:#000 url(../image/totop.png) center center no-repeat;
display:block;
}
#toTop:active, #toTop:focus {
outline:none;
}
.affiliate-shopping {
text-align: center;
}
.highlightred{ border: 2px solid #FF0000 !important;}
/* `Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
position: relative;
}
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width: 80px;
}
.container_12 .grid_2 {
width: 180px;
}
.container_12 .grid_3 {
width: 25%;
}
.box .grid_3 {
width: 280px;
}
.container_12 .grid_4 {
width: 380px;
}
.container_12 .grid_5 {
width: 480px;
}
.container_12 .grid_6 {
width: 580px;
}
.container_12 .grid_7 {
width: 680px;
}
.container_12 .grid_8 {
width: 780px;
}
.container_12 .grid_9 {
width: 70%;
}
.container_12 .grid_10 {
width: 980px;
}
.container_12 .grid_11 {
width: 1080px;
}
.container_12 .grid_12 {
width: 1180px;
}
/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left: 100px;
}
.container_12 .prefix_2 {
padding-left: 200px;
}
.container_12 .prefix_3 {
padding-left: 300px;
}
.container_12 .prefix_4 {
padding-left: 400px;
}
.container_12 .prefix_5 {
padding-left: 500px;
}
.container_12 .prefix_6 {
padding-left: 600px;
}
.container_12 .prefix_7 {
padding-left: 700px;
}
.container_12 .prefix_8 {
padding-left: 800px;
}
.container_12 .prefix_9 {
padding-left: 900px;
}
.container_12 .prefix_10 {
padding-left: 1000px;
}
.container_12 .prefix_11 {
padding-left: 1100px;
}
/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right: 100px;
}
.container_12 .suffix_2 {
padding-right: 200px;
}
.container_12 .suffix_3 {
padding-right: 300px;
}
.container_12 .suffix_4 {
padding-right: 400px;
}
.container_12 .suffix_5 {
padding-right: 500px;
}
.container_12 .suffix_6 {
padding-right: 600px;
}
.container_12 .suffix_7 {
padding-right: 700px;
}
.container_12 .suffix_8 {
padding-right: 800px;
}
.container_12 .suffix_9 {
padding-right: 900px;
}
.container_12 .suffix_10 {
padding-right: 1000px;
}
.container_12 .suffix_11 {
padding-right: 1100px;
}
/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left: 100px;
}
.container_12 .push_2 {
left: 200px;
}
.container_12 .push_3 {
left: 300px;
}
.container_12 .push_4 {
left: 400px;
}
.container_12 .push_5 {
left: 500px;
}
.container_12 .push_6 {
left: 600px;
}
.container_12 .push_7 {
left: 700px;
}
.container_12 .push_8 {
left: 800px;
}
.container_12 .push_9 {
left: 900px;
}
.container_12 .push_10 {
left: 1000px;
}
.container_12 .push_11 {
left: 1100px;
}
/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
left: -100px;
}
.container_12 .pull_2 {
left: -200px;
}
.container_12 .pull_3 {
left: -300px;
}
.container_12 .pull_4 {
left: -400px;
}
.container_12 .pull_5 {
left: -500px;
}
.container_12 .pull_6 {
left: -600px;
}
.container_12 .pull_7 {
left: -700px;
}
.container_12 .pull_8 {
left: -800px;
}
.container_12 .pull_9 {
left: -900px;
}
.container_12 .pull_10 {
left: -1000px;
}
.container_12 .pull_11 {
left: -1100px;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after,
.container_12:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix,
.container_12 {
zoom: 1;
}
/* Custom
-----------------------------------------------------------------------------------------*/
/* layout
#column-left + #column-right + #content {margin-right: 310px; margin-left: 310px;}
#column-left + #content {margin-left: 300px;}
#column-right + #content {margin-right: 300px;}*/
@media screen and (min-width: 1300px){
.product-grid > div{
width: 158px;
float: left;
height: 370px;
overflow: hidden;
}
.product-grid .description,.product-grid .name a{
font-size: 12px;
padding: 10px;
}
.product-grid .cartIcon,
.product-grid .wishIcon,
.product-grid .compareIcon {
width: 40px;
height: 40px;
}
.product-grid .bottom-grid{
position: absolute;bottom: 0px;width: 100%;
}
#search input {
}
}
@media screen and (max-width: 1200px){
.container_12{ width: auto;}
#menu > ul > li{ padding: 0px 10px;}
}
@media screen and (max-width: 980px){
/* `Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: auto;
}
/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.container_12 .grid_1 {
width: 80px;
}
.container_12 .grid_2 {
width: 180px;
}
.container_12 .grid_3 {
width: 25%;
}
.container_12 .grid_4 {
width: 380px;
}
.container_12 .grid_5 {
width: 480px;
}
.container_12 .grid_6 {
width: 46%;
}
.container_12 .grid_7 {
width: 680px;
}
.container_12 .grid_8 {
width: 780px;
}
.container_12 .grid_9 {
width: auto;
}
.container_12 .grid_10 {
width: auto;
}
.container_12 .grid_11 {
width: auto;
}
.container_12 .grid_12 {
width: 1180px;
}
.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
position: relative;
}
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left: 80px;
}
.container_12 .prefix_2 {
padding-left: 160px;
}
.container_12 .prefix_3 {
padding-left: 240px;
}
.container_12 .prefix_4 {
padding-left: 320px;
}
.container_12 .prefix_5 {
padding-left: 400px;
}
.container_12 .prefix_6 {
padding-left: 480px;
}
.container_12 .prefix_7 {
padding-left: 560px;
}
.container_12 .prefix_8 {
padding-left: 640px;
}
.container_12 .prefix_9 {
padding-left: 720px;
}
.container_12 .prefix_10 {
padding-left: 800px;
}
.container_12 .prefix_11 {
padding-left: 880px;
}
/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right: 80px;
}
.container_12 .suffix_2 {
padding-right: 160px;
}
.container_12 .suffix_3 {
padding-right: 240px;
}
.container_12 .suffix_4 {
padding-right: 320px;
}
.container_12 .suffix_5 {
padding-right: 400px;
}
.container_12 .suffix_6 {
padding-right: 480px;
}
.container_12 .suffix_7 {
padding-right: 560px;
}
.container_12 .suffix_8 {
padding-right: 640px;
}
.container_12 .suffix_9 {
padding-right: 720px;
}
.container_12 .suffix_10 {
padding-right: 800px;
}
.container_12 .suffix_11 {
padding-right: 880px;
}
/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left: 80px;
}
.container_12 .push_2 {
left: 160px;
}
.container_12 .push_3 {
left: 240px;
}
.container_12 .push_4 {
left: 320px;
}
.container_12 .push_5 {
left: 400px;
}
.container_12 .push_6 {
left: 480px;
}
.container_12 .push_7 {
left: 560px;
}
.container_12 .push_8 {
left: 640px;
}
.container_12 .push_9 {
left: 720px;
}
.container_12 .push_10 {
left: 800px;
}
.container_12 .push_11 {
left: 880px;
}
/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
left: -80px;
}
.container_12 .pull_2 {
left: -160px;
}
.container_12 .pull_3 {
left: -240px;
}
.container_12 .pull_4 {
left: -320px;
}
.container_12 .pull_5 {
left: -400px;
}
.container_12 .pull_6 {
left: -480px;
}
.container_12 .pull_7 {
left: -560px;
}
.container_12 .pull_8 {
left: -640px;
}
.container_12 .pull_9 {
left: -720px;
}
.container_12 .pull_10 {
left: -800px;
}
.container_12 .pull_11 {
left: -880px;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after,
.container_12:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix,
.container_12 {
zoom: 1;
}
/* `EDITS
------------------------------------------------------------------------------------*/
/*banner*/
.banner {
width: 300px;
}
#column-left .banner, #column-right .banner {
width: 100%;
}
/*search*/
#search {
width: 310px;
}
#search input {
width: 160px;
}
/* grid */
.product-grid > div {
width: 218px;
}
.product-grid .image img {
max-width: 98%;
}
/* product details */
.product-info > .left, .product-info .image {
width: 330px;
}
.product-info .image-additional {
width: 360px;
}
.product-info > .left + .right {
margin-left: 370px;
}
.mousetrap {
width: 330px;
}
.cloud-zoom-big {
left: -10px !important;
width: 348px !important;
height: 350px !important;
}
.cart-product {
padding: 10px 20px !important;
}
.options textarea {
width: 80%;
}
/*related*/
.related {
width: 218px;
}
.related .image img {
width: 98%;
}
/*banner*/
.banner {
width: 220px;
}
#column-left .banner, #column-right .banner {
width: 100%;
}
/*header*/
header .grid_4, header .grid_8 {
width: 100% !important;
}
header .grid_4 {
text-align: center
}
header #logo {
float: none;
margin: 0 auto;
margin-bottom: 30px;
}
#cart {
z-index: 1000 !important;
margin-top: 20px !important;
}
.menuWrap {
background: transparent !important;
}
#menu {
width: 380px;
display: none;
}
.menuDevices {
display: block !important;
}
.menuDevices select {
padding: 2%;
background: #59B111;
color: #fff;
border: none;
width: 100%;
}
/*carousel*/
.jcarousel-skin-opencart .jcarousel-item-horizontal {
margin: 0 !important;
padding: 0 10px;
}
.jcarousel-skin-opencart .jcarousel-item-horizontal img {
max-width: 100%;
}
.box-product, .product-grid {
text-align: center
}
.newIcon, .saleIcon, .bestIcon {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 14px;
}
.product-grid .cartIcon, .product-grid .wishIcon, .product-grid .compareIcon {
float: left;
margin: 0 0 20px 6px;
}
.box-product > div.normalView, .product-grid > div, .related {
width: 158px;
}
.box-product > div.normalView .image img, .product-grid > div .image img, .related .image img {
width: 98%;
}
.category {
display: none;
}
#column-left .normalView, #column-right .normalView {
text-align: center
}
#column-left .normalView .image, #column-right .normalView .image {
float: none;
margin: 0 auto
}
#column-left .box-product .rating, #column-right .box-product .rating {
float: none;
}
.poweredby {
margin-bottom: 10px;
}
.paymentIcons {
float: left
}
#column-left .box .box-heading, #column-right .box .box-heading {
font-size: 15px;
}
#column-left .saleIcon, #column-right .saleIcon {
right: 35px;
}
.product-filter .display {
float: left;
clear: both;
margin: 0 0 5px 15px;
}
.mousetrap {
/*width: 330px;*/
}
.cloud-zoom-big {
left: -10px !important;
width: 20px !important;
/*height: 350px !important;*/
}
.product-info > .left {
width: 100%;
margin: 0 auto;
clear: both;
text-align: center;
}
.product-info .image {
float: none;
margin: 10px auto;
}
.product-info .image-additional {
margin: 0 auto;
text-align: center;
}
.product-info .image-additional a {
float: none;
display: inline-block
}
.product-info > .left + .right {
margin: 0;
}
}
@media screen and (max-width: 768px){
/*
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/*
Forces backgrounds to span full width,
even if there is horizontal scrolling.
Increase this if your layout is wider.
Note: IE6 works fine without this fix.
*/
/* `Containers
----------------------------------------------------------------------------------------------------*/
body{ overflow-x: hidden; height: 100%;}
.container_12 {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.checkout-content .left, .checkout-content .right{ width: auto; float: none; }
.checkout-product td {
padding: 3px;
}
/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
position: relative;
}
#banner0{ margin-right: 2.5% !important;
margin-left: 2.5% !important; }
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width: 95%;
}
.container_12 .grid_2 {
width: 95%;
}
.container_12 .grid_3 {
width: 95%;
}
.container_12 .grid_4 {
width: 95%;
}
.container_12 .grid_5 {
width: 95%;
}
.container_12 .grid_6 {
width: 95%;
}
.container_12 .grid_7 {
width: 95%;
}
.container_12 .grid_8 {
width: 95%;
}
.container_12 .grid_9 {
width: 95%;
}
.container_12 .grid_10 {
width: 95%;
}
.container_12 .grid_11 {
width: auto;
}
.container_12 .grid_12 {
width: auto;
}
/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left: 60px;
}
.container_12 .prefix_2 {
padding-left: 120px;
}
.container_12 .prefix_3 {
padding-left: 180px;
}
.container_12 .prefix_4 {
padding-left: 240px;
}
.container_12 .prefix_5 {
padding-left: 300px;
}
.container_12 .prefix_6 {
padding-left: 360px;
}
.container_12 .prefix_7 {
padding-left: 420px;
}
.container_12 .prefix_8 {
padding-left: 480px;
}
.container_12 .prefix_9 {
padding-left: 540px;
}
.container_12 .prefix_10 {
padding-left: 600px;
}
.container_12 .prefix_11 {
padding-left: 660px;
}
/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right: 60px;
}
.container_12 .suffix_2 {
padding-right: 120px;
}
.container_12 .suffix_3 {
padding-right: 180px;
}
.container_12 .suffix_4 {
padding-right: 240px;
}
.container_12 .suffix_5 {
padding-right: 300px;
}
.container_12 .suffix_6 {
padding-right: 360px;
}
.container_12 .suffix_7 {
padding-right: 420px;
}
.container_12 .suffix_8 {
padding-right: 480px;
}
.container_12 .suffix_9 {
padding-right: 540px;
}
.container_12 .suffix_10 {
padding-right: 600px;
}
.container_12 .suffix_11 {
padding-right: 660px;
}
/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left: 60px;
}
.container_12 .push_2 {
left: 120px;
}
.container_12 .push_3 {
left: 180px;
}
.container_12 .push_4 {
left: 240px;
}
.container_12 .push_5 {
left: 300px;
}
.container_12 .push_6 {
left: 360px;
}
.container_12 .push_7 {
left: 420px;
}
.container_12 .push_8 {
left: 480px;
}
.container_12 .push_9 {
left: 540px;
}
.container_12 .push_10 {
left: 600px;
}
.container_12 .push_11 {
left: 660px;
}
/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
left: -60px;
}
.container_12 .pull_2 {
left: -120px;
}
.container_12 .pull_3 {
left: -180px;
}
.container_12 .pull_4 {
left: -240px;
}
.container_12 .pull_5 {
left: -300px;
}
.container_12 .pull_6 {
left: -360px;
}
.container_12 .pull_7 {
left: -420px;
}
.container_12 .pull_8 {
left: -480px;
}
.container_12 .pull_9 {
left: -540px;
}
.container_12 .pull_10 {
left: -600px;
}
.container_12 .pull_11 {
left: -660px;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after,
.container_12:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix,
.container_12 {
zoom: 1;
}
/* `EDITS
------------------------------------------------------------------------------------*/
footer .column {
width: 100% !important;
margin-left: 20px;
}
img{max-width:100%; height:auto;}
#container{ width: 100% !important; overflow: hidden !important;}
#mob{ display: inline-block; float: right;}
#mob li a{ font-size: 16px; padding:10px; display: inline-block; padding-right: 20px; }
h1, .welcome{ font-size: 24px; line-height: 30px;}
.box .box-heading{ font-size: 20px; }
.top, .menuWrap{ display: none !important;}
.box-product .description{ font-size: 13px; line-height: 20px;}
.phoneBlock{
display: none;
}
header #logo{ float: left !important;
margin: 0 auto;
width: 50% !important; margin: 0px; }
header #logo img{ max-width: 200px; height: auto; margin: 0px; }
header #cart {
float: left;
}
header #cart .heading {
margin-left: 12px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width: 95%;
margin-left: 2.5%;
margin-right: 2.5%;
clear: both;
position: relative;
}
.alpha,
.omega {
margin-left: 0;
margin-right: 0;
}
.align_center,
.align_right {
text-align: left;
}
.clearfix {
clear: both
}
/*custom*/.flexslider{clear:both; margin-bottom: 20px !important;}
/* `EDITS
------------------------------------------------------------------------------------*/
body {
padding: 0px;
}
.top {
text-align: center
}
.top #welcome {
float: none;
}
.top .links {
float: none;
text-align: center;
margin-top: 10px;
width: 100%;
}
.top .links a {
padding: 0;
display: inline-block;
float: none;
text-align: center;
}
#language, #currency {
margin-top: 10px;
float: none;
}
.hotLine {
margin: 0 auto;
float: none;
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
}
.hotLine img {
display: none;
}
header {
text-align: center;
}
header #logo {
float: none;
margin: 0 auto;
}
#cart {
z-index: 1000 !important;
margin-top: 20px !important;
}
#search {
width: 100%;
text-align: left;
margin-bottom:5px;
}
#search input {
width: calc(100% - 40px) !important;
}
.menuWrap {
background: transparent !important;
}
#menu {
width: 380px;
display: none;
}
.menuDevices {
display: block !important;
}
.menuDevices select {
padding: 2%;
background: #59B111;
color: #fff;
border: none;
width: 100%;
}
/*.phone {
float: none;
margin: 20px auto 10px auto;
}*/
.category-list div {
width: 48%;
}
.banner {
display: block;
width: 95%;
margin-right: 2.5% !important;
margin-left: 2.5% !important;
text-align: center;
}
.banner img {
max-width: 100%;
}
.jcarousel-skin-opencart .jcarousel-item-horizontal {
margin: 0 !important;
padding: 0 16px;
}
.jcarousel-skin-opencart .jcarousel-item-horizontal img {
max-width: 100%;
margin-top: 20px;
}
.box-product, .product-grid {
text-align: center
}
.foo3 {
left: 0;
}
.list_carousel li .grid_3 {
display: inline;
float: left;
width: 280px;
}
.product-filter .sort {
margin-left: 15px;
}
.product-compare {
margin-left: 15px;
}
.product-list .image {
text-align: center;
width: 100%;
margin: 0;
float: none;
}
.product-list .right {
float: none;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
border: none;
}
.category {
display: none;
}
#column-left .normalView, #column-right .normalView {
text-align: center
}
#column-left .normalView .image, #column-right .normalView .image {
float: none;
margin: 0 auto
}
#column-left .box-product .rating, #column-right .box-product .rating {
float: none;
}
.wrap {
overflow: hidden;
width: 100%;
}
.category-info {
width: 100%;
}
.category-info .image {
text-align: center;
float: none;
}
.category-info .image img {
max-width: 100%
}
.box{ width: 100%;}
.box .box-heading {
text-align: center;
}
#column-left .box .box-heading, #column-right .box .box-heading {
font-size: 15px;
}
#column-left .saleIcon, #column-right .saleIcon {
right: 35px;
}
.product-filter .display {
float: left;
clear: both;
margin: 0 0 5px 15px;
}
.mousetrap {
width: 100%;
}
.cloud-zoom-big {
left: -10px !important;
width: 109% !important;
height: 109% !important;
}
.product-info > .left {
width: 100%;
margin: 0 auto;
clear: both;
text-align: center;
}
.product-info .image {
width: 90%;
float: none;
margin: 10px auto;
}
.product-info .image-additional {
width: 100%;
margin: 0 auto;
text-align: center;
}
.product-info .image-additional a {
float: none;
display: inline-block
}
.product-info > .left + .right {
margin: 0;
}
footer {
clear: both
}
footer .column {
width: 100%;
}
.htabs a {
width: 94%;
padding: 3%;
}
.login-content .left {
width: 100%;
}
.login-content .right {
width: 100%;
}
#content {
overflow: visible;
margin-right: 10px;
margin-left: 10px;
}
.paymentIcons {
float: left;
}
.bottom {
margin-top: 20px;
}
footer #language {
float: left
}
.product-list .name, .product-list .description {
margin-right: 10px;
margin-left: 10px;
}
.product-list .cartIcon {
margin-left: 10px;
}
.product-info .review {
width: 99%;
}
.product-info .options {
width: 93%;
}
iframe {
width: 100%;
}
}