sonicking

модуль All in One Tab

Рекомендуемые сообщения

sonicking    5

день добрый

есть модуль http://www.opencart.com/index.php?route=extension/extension/info&extension_id=7036&path=5&filter_search=product-tab&filter_license=0&filter_download_id=23

хотелось бы его чутка подредактировать, но знаний не хватает

дайте толчок, в какую сторону копать

требуется следующее

сейчас выглядит так

post-13206-0-30967300-1371583458_thumb.png

а хотелось бы так

post-13206-0-46151200-1371584338_thumb.png

т.е. выровнять все надписи по центру и сделать закладки одинаковой ширины

так же не нашёл возможность при выборе допустим 6 товаров в группе (Акции, Новое, Хиты) вывести в данном модуле продукты допустим по 3 штуки в две строки

вот так

post-13206-0-83003000-1371585141_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

 

предложенное там не срабатывает к сожалению

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Einshtein    622

используйте для элемента кнопки купить и цены стиль position:absolute;

при этом придется подправить позицию этих элементов относительно границ блока

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

используйте для элемента кнопки купить и цены стиль position:absolute;

при этом придется подправить позицию этих элементов относительно границ блока

 

спасибо за "пинок" в нужном направлении

правим в файле stylesheet.css. так?

 

плохо, когда не знал, да ещё и забыл... :-D

 

попробовал везде, где есть переменная position со значением не равным absolute поменять значение на absolute - ничего не меняется

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Einshtein    622

Вам нужен класс input.button {

Ему нужно прописать стиль о котором я писал.

так же нужно будет перепривязать кнопку купить к блоку с изображением, так как у него всегда стабильная позиция.

Более точно смогу сказать, когда буду у компьютера.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

Более точно смогу сказать, когда буду у компьютера.

спасибо за советы, попробую сам, но если не сложно, будучи у компьютера, посмотрите пожалуйста поточнее

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    645

как всегда спасибо стартопику за ссылку на сайт, в принципе для нас, экстрасенсов, это естественно, никакой пользы не принесет.
редактируем название товара под картинкой:

1. по всей видимости в tpl- ке прописано: <div class="......."> тут вызов названия товара из БД по ID </div>

2. ну например  класс назовем стандартно: name (<div class="name">тут вызов названия товара из БД по ID </div>)
тогда в стиле для этой кнопки (css -ку определите сами (скорее всего своя, потому как модуль,  но может и в stylesheet.css   8-)  ) тогда пропишем (исправим стиль) :

.какой то блок .name  {
	height:40px; <------ (тут прописываем высоту блока с названием, чтоб все
                              влезло, или не все, но чтоб не срезало полстроки)
	overflow: hidden; <--- (название не будет вылазить за пределы блока,
                                 влезет все, будет скрыто только высотой, если 
                                 она будет недостаточна для всего названия)
	text-align: center; <----- (это отпозиционирует текст по центру)
        margin-bottom: 5px; <----- (это отодвинет  все что ниже немного вниз, 
                                    тем самым не будет "слипания")	
}

 

редактируем строку с рейтингами: 
по аналогии смотрим имя класса присвоенный этому блоку в tpl-ке
мы опять же экстрасенсорно назовем этот блок  (<div class="review">тут вызов рейтинга товара из БД по ID </div>)

делаем аналогично: 


.какой то блок .review  {
	height:20px; <------ (тут прописываем высоту блока )
	margin-left: 10px; <----- (подбираем расстояние чтоб отпозиционировать
                              по центру (в зависимости от ширины дива с товаром)
        margin-bottom: 5px; <----- (это отодвинет  все что ниже немного вниз, 
                                    тем самым не будет "слипания")	
}

 

остальное цена и кнопка купить, можно оставить без изменений, если потребуется- сделать по аналогии с первым или вторым кодом (думаю, уяснив, что и как, остальные правки не вызовут у Вас больших затруднений)

как итог: все у нас будет выровнено 
P.S.

1. при определении высоты блока с ценой учитывайте, что там может выводиться цена скидки, поэтому определитесь еще и с размером шрифта для вывода цены и скидки

 

.какой то блок .price {    
    font-size: 12px; <--- тут
    ....
   
}
.какой то блок .price-old {
	 font-size: 12px; <--- тут
         ....
} 

 

2. если все собирается в кучу (что так же возможно, тут мне ясновидение отказывает) , добавляем к каждому классу 

position:absolute, тогда придется еще прописать отступы сверху : margin-top (но сомневаюсь)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

как всегда спасибо стартопику за ссылку на сайт, в принципе для нас, экстрасенсов, это естественно, никакой пользы не принесет.

 

день добрый

всегда приятно, когда кто то хочет помочь

ссылку на модуль я дал, а на сайт забыл

www.tek39.ru

сайт в стадии доработки/наполнения

сейчас попробую воспользоваться вашими рекомендациями, но взвешивая реально свои познания, думаю что не совсем получится

буду рад дальнейшим советам, если будет возможность

спаибо

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    645

для начала, если хотите использовать изображения такого размера в карточке товара как сейчас то предложу вот так:
 
1. строка 1012

.box-product > div {
	width: 200px;
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	margin-bottom: 20px;
}

кстати, уберется скролл снизу )))

 

2. меняем : 
строка 1031 

.box-product .name a {
color: #9C74ED;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
text-align: center;
}

 

на

.box-product .name {
	height:50px; 
	overflow: hidden; 
	text-align: center; 
        margin-bottom: 5px;
}
.box-product .name a {
	color: #9C74ED;
	font-weight: bold;
	text-decoration: none;
	display: block;
}

3. вставить куда нибудь в стили (я ставлю рядом с предыдущими, чтоб проще было для редактирования)

 

.box-product .cart input.button {
margin-left: 30%
}
 

или

.box-product .cart input.button {
   margin-left: 60px    
}

это уж как нравиться)))

 

P.S. 

ссылку на модуль я дал, а на сайт забыл

www.tek39.ru

сайт в стадии доработки/наполнения

и не стоит стесняться своих "недоработанных и ненаполненных" сайтов, для этого и существует этот форум, осуждать ни кто не будет, а советов дельных надают

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

спасибо за помощь, вроде всё получилось, не так страшен оказался чёрт, как его малюют :-) ещё бы выровнять ширину вкладок

 

 Новые поступления нашего магазинаЛидеры продажАкция! Акция! Акция!

 

сам попробую сдвинуть все продукты чуток в право (отступ от общей границы)

 

только одно но - в категориях тоже всё увеличилось - это увеличение от проделанных изменений не отделить?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    645

можно...в тпл-ке с модулем исправить .box-product на .box-product-main
и прописать все стили, что я дал в таком формате:


 

.box-product-main > div {
...
} 


.box-product-main .name{
...
} 
 

 

и так далее)) естественно для всего...для картинок, названия, цен, кнопки купить
P.S. копируете все что для 
.box-product, вставляете в стили и меняете название стиля первого дива .box-product на .box-product-main  конечно все стили что для .box-product (которые были до изменений оставляем)

)))) Все просто)

   

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

с категориями вроде всё получилось, но с главной страницей всё равно какая то кака...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    645

где вот это в стилях? 
 

.box-product-main > div {
	width: 200px;
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	margin-bottom: 20px;
}

и далее по тексту...
 

.box-product-main .name{
height:50px;
overflow: hidden;
text-align: center;
margin-bottom: 5px;
}
.box-product-main .cart input.button {
margin-left: 30%
}
 

и так далее...вы внимательно читаете мои инструкции? если сомневаетесь в моей компетенции, я откланиваюсь

P.S. копируете все что для .box-product, вставляете в стили и меняете название стиля первого дива .box-product на .box-product-main  конечно все стили что для .box-product (которые были до изменений оставляем)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

да вроде всё на месте...

сейчас ещё раз всё проделаю

может я не тот css-шник правлю?

я правлю тот, который в папке установленной темы 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    645

да вроде всё на месте...

сейчас ещё раз всё проделаю

может я не тот css-шник правлю?

я правлю тот, который в папке установленной темы 

тогда я- китайский летчик

fansycart видимо не Ваша тема в которой нет и намека на стили что я указал (кроме исправления стиля дива в тпл-ке) и путь

/catalog/view/theme/fansycart/stylesheet/stylesheet.css не является истинным к вашему доку  со стилями

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

html body div#container div#column-left div.products_container {
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:0 0 5px #D5D5D5;
-webkit-border-radius:10px 10px 10px 10px;
-webkit-box-shadow:0 0 5px #D5D5D5;
-khtml-border-radius:10px 10px 10px 10px;
-khtml-box-shadow:0 0 5px #D5D5D5;
border-radius:10px 10px 10px 10px;
box-shadow: 0 0 5px #D5D5D5;
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #E1E1E1;
padding:10px;
margin: 0 15px 0 0px;}



div#menu.hidden-phone ul li.me1 a{
padding: 0 40px;
}

html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
body {
background: #f5f5f5 url('../image/main_bgr.png');
color: #333333;
font-family: tahoma, sans-serif;
margin: 0px;
padding: 0px;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
@font-face {
font-family: 'FolksRegular';
src: url('folks-normal-webfont.eot');
src: url('folks-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('folks-normal-webfont.woff') format('woff'),
url('folks-normal-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}
h1{
color: #513847;
margin-top: 20px;
margin-bottom: 20px;
font-size: 18px;
font-weight: normal;
font-family: FolksRegular, sans-serif;
}
h1.pr_name {
margin-top: 28px;
margin-bottom: 16px;
}
.welcome {
color: #513847;
margin-top: 8px;
margin-bottom: 8px;
font-size: 18px;
font-weight: normal;
font-family: FolksRegular, sans-serif;
}
.welcome_text {
margin: 0 10px 28px 10px;
}
h1.general_heading {
color: #513847;
font-size: 18px;
margin: 20px 0 8px;
line-height: 26px;
}
h2 {
color: #513847;
font-size: 22px;
margin-top: 0px;
margin-bottom: 5px;
font-weight: normal;
font-family: FolksRegular, sans-serif;
}

p {
margin-top: 0px;
margin-bottom: 20px;
line-height: 1.5;
}
a, a:visited, a b {
color: #638c15;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus, a:active{
outline: 0;
}
a img {
border: none;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input[type=text], input[type=password], textarea {
background: #fcfcfc;
border: 1px solid #ddd;
padding: 4px;
margin-left: 0px;
margin-right: 0px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;

border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus {
outline: none;
-webkit-box-shadow:0 0 3px #a6d24f;
-moz-box-shadow:0 0 3px #a6d24f;
box-shadow:0 0 3px #a6d24f;
}
input[type=button]:focus, input[type=button]:active, input[type=submit]:focus, input[type=submit]:active{
outline: none;
}

select {
background: #fcfcfc;
border: 1px solid #e9e9e9;
padding: 3px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
select:focus {
outline: none;
-webkit-box-shadow:0 0 3px #a6d24f;
-moz-box-shadow:0 0 3px #a6d24f;
box-shadow:0 0 3px #a6d24f;
}
label {
cursor: pointer;
}
.h10 {
height: 10px;
}
.h20 {
height: 20px;
}
/* layout */
#container {
width: 970px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#column-left {
float: left;
width: 215px;
}
#column-right {
float: right;
width: 195px;
}

#content {
min-height: 400px;
margin-bottom: 25px;
background: #ffffff;
webkit-box-shadow: 0px 2px 5px #aaa;
-moz-box-shadow: 0px 2px 5px #aaa;
box-shadow: 0px 2px 5px #aaa;
padding: 20px;
overflow: hidden;
}
#column-left + #column-right + #content_inside, #column-left + #content_inside {
margin-left: 215px;
border-left: 0px solid #EEE;
padding-left: 20px;
}
#column-right + #content_inside {
margin-right: 215px;
border-right: 1px solid #EEE;
padding-right: 20px;
}
/* header */
#header {
height: 120px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
}


#header #logo {
left: 1px;
position: absolute;
top: 10px;
}
#header #logo2 {
left: 309px;
position: absolute;
top: 5px;
}


#header_btm {
position: absolute;
top: 80px;
right: 20px;
z-index: 1100;
}
#header_btm form{
float: right;
}
#language {
float: right;
margin-right: 12px;
color: #999;
line-height: 17px;
font-size: 11px;
}
#language img {
cursor: pointer;
}
#language a {
display: block;
padding: 4px 5px 4px 30px;
color: #777;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
white-space:nowrap;
font-size: 11px;
}
#language a:hover {
color: #333;
}
#l_options {
border-top: 1px dotted #ddd;
margin: 0 2px;
}
#l_switcher {
background: #fff;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 2px #ddd;
box-shadow:0 1px 2px #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
.l_selected {
display: block;
padding: 4px 7px 4px 7px;
color: #777;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
background: url('../image/arrow_down_small.png') 100% 50% no-repeat;
}
.l_selected img{
float:left;
margin: 3px 6px 0 0;
}

#currency {
float: right;
margin-right: 12px;
line-height: 17px;
font-size: 11px;
}
#currency a {
display: block;
padding: 4px 6px;
color: #777;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
white-space:nowrap;
font-size: 11px;
}
#currency a:hover {
color: #333;
}
#c_options {
border-top: 1px dotted #ddd;
margin: 0 2px;
}
#c_switcher {
background: #fff;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 2px #ddd;
box-shadow:0 1px 2px #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
.c_selected {
display: block;
padding: 4px 16px 4px 8px;
color: #777;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
background: url('../image/arrow_down_small.png') 100% 50% no-repeat;
}
#currency a b {
color: #333333;
text-decoration: none;
}
#header #cart {
position: absolute;
top: 0px;
right: 9px;
z-index: 1200;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-left: 172px;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
border: 1px solid transparent;
border-bottom: none;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
text-align: right;
display: none;
}
#header #cart .heading a {
color: #70a706;
text-decoration: none;
white-space: nowrap;
}
#header #cart .heading a span {
height: 27px;
line-height: 27px;
display: block;
background: url('../image/cart_icon.png') 100% 50% no-repeat;
padding-right: 35px;
font-size: 14px;
color: #555;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
-webkit-border-radius: 7px 0px 7px 7px;
-moz-border-radius: 7px 0px 7px 7px;
-khtml-border-radius: 7px 0px 7px 7px;
border-radius: 7px 0px 7px 7px;
background: #FFF;
}
#header #cart.active .heading {
margin-top: 5px;
padding-top: 10px;
padding-bottom: 14px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
}
#header #cart.active .content {
display: block;
}
#header #cart.active .heading {
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
background: #FFF;
}
.mini-cart-info table {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
.mini-cart-info td {
color: #333333;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
width: 1px;
}
.mini-cart-info .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
.mini-cart-info .name small {
color: #666;
}
.mini-cart-info .quantity {
text-align: right;
}
.mini-cart-info td.total {
text-align: right;
}
.mini-cart-info .remove {
text-align: right;
}
.mini-cart-info .remove img {
cursor: pointer;
}
.mini-cart-info a {
color: #333;
}
.mini-cart-total {
text-align: right;
}
.mini-cart-total table {
border-collapse: collapse;
display: inline-block;
margin-bottom: 5px;
}
.mini-cart-total td {
color: #444;
padding: 4px;
}
#header #cart .checkout {
text-align: right;
clear: both;
margin: 8px 0 6px;
color: #aaa;
}
#header #cart .checkout a{
color: #333;
}
#header #cart .empty {
padding-top: 50px;
text-align: center;
}
#header #search {
float: right;
width: 233px;
height: 27px;
z-index: 15;
background: url('../image/search_bgr.png') top left no-repeat;
}
#header #search .search_inside{
position: relative;
}
#header .button-search {
position: absolute;
top: 0px;
right: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 33px;
height: 27px;
cursor: pointer;
}
#header #search input {
position: absolute;
top: 0px;
left: 0px;
background: none;
padding: 4px 0 5px 7px;
height: 17px;
line-height: 17px;
width: 225px;
border: none;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
color: #777;
}
#header #search input:focus {
outline: none;
-webkit-box-shadow:0 0 4px #a6d24f;
-moz-box-shadow:0 0 4px #a6d24f;
box-shadow:0 0 4px #a6d24f;

}
#header #welcome {
position: absolute;
top: 53px;
right: 21px;
width: 298px;
text-align: right;
color: #888;
font-size: 11px;
z-index: 16;
}
#header #welcome a{
font-size: 11px;
color: #555;
}
#header .links {
position: absolute;
right: 200px;
top: 23px;
padding-right: 10px;
z-index: 1201;

display: none;
}
#header .links a {
color: #737373;
float: left;
display: block;
padding: 0px 0px 0px 13px;
text-decoration: none;
font-size: 12px;
background: url('../image/arrow_left.png') 0px 2px no-repeat;
}
#header .links a:hover {
text-decoration: underline;
}
#header .links a + a {
margin-left: 8px;
}
/* menu */
#menu {
background: url('../image/main_nav_bgr.png') center center no-repeat;
height: 32px;
webkit-box-shadow: 0px 4px 4px #aaa;
-moz-box-shadow: 0px 4px 4px #aaa;
box-shadow: 0px 4px 4px #aaa;
padding: 0px 0 0 20px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 1015;
padding: 0px 0px 0px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
font-size: 14px;
font-weight: bold;
color: #FFF;
line-height: 32px;
text-decoration: none;
display: block;
padding: 0px 14px 0px 14px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a {
background: #9B74EC/* url('../image/main_nav_bgr_hover.png') top left repeat-x*/;
color: #fff;
text-shadow: 0 1px 0px #9B74EC;
}
#menu > ul > li > a .home_icon{
width: 16px;
height: 32px;
display: block;
background: url('../image/home_icon.png') center 7px no-repeat;
}
#menu > ul > li > a:hover .home_icon{
background: url('../image/home_icon.png') center -34px no-repeat;
}

#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 1020;
padding: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
/* display: table;*/
}
#menu > ul > li > div > ul {
display: table-cell;
border-radius: 0px 0px 4px 4px;
padding-bottom: 4px;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 8px 14px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 160px;

-webkit-transition-property: color, background;
-moz-transition-property: color, background;
-o-transition-property: color, background;
transition-property: color, background;

-webkit-transition-duration: 0.2s, 0.2s;
-moz-transition-duration: 0.2s, 0.2s;
-o-transition-duration: 0.2s, 0.2s;
transition-duration: 0.2s, 0.2s;
}
#menu > ul > li ul > li > a.last_submenu_item{
/*
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 4px 4px; */
}
#menu > ul > li ul > li > a:hover {
background: #aed658;
color: #283600;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}
.breadcrumb {
color: #CCCCCC;
margin-bottom: 10px;
}
.breadcrumb a{
color: #888;
}
.success, .warning, .attention, .information {
padding: 10px 10px 10px 10px;
margin-bottom: 15px;
color: #555555;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.success a, .warning a, .attention a, .information a{
color: #444;
text-decoration: underline;
}
.success {
background: #f4ffd8;
border: 1px solid #e0f2b4;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.warning {
background: #fdebf0;
border: 1px solid #f5cedd;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.attention {
background: #FFF5CC;
border: 1px solid #F2DD8C;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.success .close, .warning .close, .attention .close, .information .close {
float: right;
padding-top: 4px;
padding-right: 4px;
cursor: pointer;
}
.required {
color: #ee0032;
font-weight: bold;
}
.f_form .required {
color: #ee0032;
font-weight: bold;
float: right;
}
#shipping-new .required {
color: #ee0032;
font-weight: bold;
float: right;
}
#payment-new .required {
color: #ee0032;
font-weight: bold;
float: right;
}
.error {
display: block;
color: #ee0032;
}
.help {
color: #999;
font-size: 10px;
font-weight: normal;
display: block;
}
table.form {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table.form tr td:first-child {
width: 150px;
padding-left: 20px;
}
table.form > * > * > td {
color: #333333;
}
table.form td {
padding: 4px;
}
table.form input[type=text], table.form select, table.form input[type=password],table.form textarea {
min-width: 200px;
}
input.large-field, select.large-field {
width: 300px;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
margin-bottom: 20px;
}
table.list td {
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
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: middle;
}
table.radio tr td:first-child {
width: 1px;
}
table.radio tr.highlight:hover td {
background: #F1FFDD;
cursor: pointer;
}
table.radio label {
width: 100%;
height: 15px;
display: inline-block;
}
.pagination {
border-top: 1px solid #EEEEEE;
padding-top: 8px;
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
.pagination .links {
float: left;
}
.pagination .links a {
display: inline-block;
border: 1px solid #e5e5e5;
padding: 4px 10px;
text-decoration: none;
color: #666;
border-radius: 5px;
-webkit-box-shadow:0 1px 0px #ddd;
-moz-box-shadow:0 1px 0px #ddd;
box-shadow:0 1px 0px #ddd;
}
.pagination .links b {
display: inline-block;
font-weight: bold;
border: 1px solid #e5e5e5;
border-radius: 5px;
background-color: #f5f5f5;
-webkit-box-shadow:0 1px 0px #ddd;
-moz-box-shadow:0 1px 0px #ddd;
box-shadow:0 1px 0px #ddd;
text-shadow: 0 0 1px #fff;
padding: 4px 10px;
}
.pagination .links a:hover {
display: inline-block;
border: 1px solid #e5e5e5;
border-radius: 5px;
background-color: #f5f5f5;
-webkit-box-shadow:0 1px 0px #ddd;
-moz-box-shadow:0 1px 0px #ddd;
box-shadow:0 1px 0px #ddd;
text-shadow: 0 0 1px #fff;
padding: 4px 10px;
}
.pagination .results {
float: right;
padding-top: 3px;
}
/* button */
a.button, input.button, input.sm_button, a.sm_button {
cursor: pointer;
color: #3b4429;
text-shadow: 0 1px 0px #c8e372;
line-height: 12px;
font-family: tahoma, sans-serif;
font-size: 12px;
font-weight: bold;
background: #9cc445 url('../image/button.png') top left repeat-x;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
border: 1px solid #a2c359;
border-bottom: 1px solid #87a645;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
input.sm_button {
font-size: 11px;
margin: 0;
height: 24px;
padding: 0px 10px 0px 10px;
}
a.sm_button {
font-size: 11px;
margin: 0;
padding: 3px 10px 3px 10px;
}
input.button {
margin: 0;
height: 24px;
padding: 0px 12px 0px 12px;
}
.product-info .cart .button {
margin: 0;
height: 36px;
padding: 0px 22px 0px 22px;
font-size: 13px;
color:#3f4a2a;
}
a.button:hover, input.button:hover , input.sm_button:hover{
background: #a4cf49 url('../image/button-active.png') repeat-x;
}
a.sm_button:hover{
background: url('../image/button-active.png') repeat-x;
text-decoration: none;
}

.buttons {
background: #FFFFFF;
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;
}
.htabs {
height: 30px;
line-height: 16px;
border-bottom: 1px solid #DDDDDD;
}
.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #F9F9F9;
padding: 7px 15px 6px 15px;
float: left;
font-family: tahoma, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #333333;
margin-right: 2px;
display: none;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-khtml-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;

}
.htabs a.selected {
padding-bottom: 7px;
background: #FFFFFF;
}
.htabs a:focus, .htabs a:active {
outline: 0;
}
.tab-content {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 18px;
margin-bottom: 20px;
z-index: 2;
overflow: auto;
-webkit-border-radius: 0 0px 4px 4px;
-moz-border-radius: 0 0px 4px 4px;
-khtml-border-radius: 0 0px 4px 4px;
border-radius: 0 0px 4px 4px;
}
/* box */
.box {
margin-bottom: 16px;
}

.box .box-heading {
color: #513847;
margin: 0 0 8px;
font-size: 14px;
font-weight: bold;
font-family: FolksRegular, sans-serif;
padding: 0 0 0 4px;
}

.box .box-content {
}
/* box_cat */
.box_category {
margin: 20px 0 30px;
}
.box_category .box-heading {
color: #513847;
margin: 0 0 8px;
font-size: 18px;
font-weight: normal;
font-family: FolksRegular, sans-serif;
padding: 0;
}
.box_category .box-content {

}
/* box products-main */
.box-product-main {
/* width: 100%;*/
overflow: auto;
}
html body div#container div#content div#content_inside div.category-info p{
text-align: justify;
}

.box-product-main > div {
width: 200px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product-main > div {
width: 119px;
}

.box-product-main .image {
display: block;
margin: 0px 10px;
}
.box-product-main .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product-main .name{
height:50px;
overflow: hidden;
text-align: center;
margin-bottom: 5px;
}
.box-product-main .cart input.button {
margin-left: 30%
}
.box-product-main .name a {
color: #9C74ED;
font-weight: bold;
text-decoration: none;
display: block;
}
.box-product-main .price {
display: block;
font-weight: bold;
color: #333333;
text-align: center;
margin-bottom: 4px;
}
.box-product-main .price-old {
font-size: 12px;
font-weight: normal;
color:#bbb;
text-decoration: line-through;
}
.box-product-main .price-new {
font-weight: bold;
}
.box-product-main .rating {
display: block;
margin-bottom: 4px;
}
/* box products */
.box-product {
/* width: 100%;*/
overflow: auto;
}
html body div#container div#content div#content_inside div.category-info p{
text-align: justify;
}

.box-product > div {
width: 112px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}

.box-product .image {
display: block;
margin: 0px 10px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #9C74ED;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
text-align: center;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
font-size: 12px;
font-weight: normal;
color:#bbb;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}
/* Product Holder */
.product_holder {
float: left;
width: 213px;
vertical-align: top;
margin: 0 15px 15px 0;
border: 1px solid #e2e2e2;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.product_holder:hover {
border: 1px solid #dee8c5;
}

.product_holder_inside{
margin: 1px;
padding-bottom: 10px;
overflow: hidden;
border: 2px solid #f8f8f8;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.product_holder:hover .product_holder_inside{
border: 2px solid #e7fbb7;
}
.last_in_row {
margin-right:0;
}


.special_promo {
background: url("../image/promo.png") no-repeat scroll left top transparent;
height: 60px;
position: absolute;
right: -2px;
top: -2px;
width: 85px;
z-index: 1000;
}


.clear {
clear: both;
visibility: hidden;
padding: 0 !important;
margin: 0 !important;
}
.cleared {
overflow: hidden;
}
.product_holder .image{
text-align: center;
}
.product_holder .image img{
position: relative;
margin: 8px 0;
}
.product_holder .pr_info{

}
.product_holder .name{
text-align: center;
font-weight: bold;
margin: 0 12px;
border-top: 1px dotted #ddd;
padding: 10px 0 6px;
}
.product_holder .price {
color: #B6066C;
font-size: 19px;
font-weight: bold;
margin: 0 12px;
text-align: center;
}
.product_holder .price .price-old{
font-size: 12px;
font-weight: normal;
color:#bbb;
text-decoration: line-through;
margin-right: 3px;
}
.product_holder .name a{
color:#4b4b4b;
}
.product_holder .cart{
text-align: center;
font-weight: bold;
margin: 0 12px;
padding: 8px 0 6px;
}
.product_holder .rating{
text-align: center;
padding: 8px 0 0px;
}
.product_holder .cart a{
background: url('../image/plus.png') 0px 3px no-repeat;
padding: 0px 0 0 16px;
}

/* In side column */
#column-left .product_holder, #column-right .product_holder {
float: none;
border: none;
width: 100%;
}
#column-left .product_holder, #column-right .product_holder {
/* border-bottom: 1px dotted #ddd; */
margin: 0 0 8px;
}
#column-left .general_heading, #column-right .general_heading {
border-bottom: 1px dotted #eee;
margin: 0px 8px 10px 0;
padding: 0 0 4px 0;
}
.in_column_bottom_padding {
height: 0px;
display:none;
}
#column-left .in_column_bottom_padding, #column-right .in_column_bottom_padding {
height: 16px;
display:block;
}

#column-left .product_holder_inside, #column-right .product_holder_inside{
margin: 0;
padding-bottom: 0px;
border: none;
}

#column-left .special_promo, #column-right .special_promo {
display: none;
}
#column-left .product_holder:hover, #column-right .product_holder:hover {
border: none;
box-shadow: none;
/* border-bottom: 1px dotted #ddd;*/
}
#column-left .product_holder:hover .product_holder_inside, #column-right .product_holder:hover .product_holder_inside{
border: none;
}
#column-left .product_holder .image, #column-right .product_holder .image{
float: left;
}
#column-left .product_holder .pr_info, #column-right .product_holder .pr_info{
margin: 0 5px 0 90px;
}
#column-left .product_holder .name, #column-right .product_holder .name{
text-align: left;
font-weight: normal;
margin: 0;
border: none;
}
#column-left .product_holder .price, #column-right .product_holder .price{
text-align: left;
margin: 0;
font-size: 13px;
}
#column-left .product_holder .cart, #column-right .product_holder .cart{
display: none;
}

/* box category */
.box-category {
padding: 0px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
margin: 3px 0px;
}
.box-category > ul > li + li {
}
.box-category > ul > li > a {
display: inline-block;
width: 173px;
color: #444;
text-decoration: none;
padding: 4px 10px 4px 18px;
background: #fff url('../image/arrow_left2.png') 4px 8px no-repeat;
font-size: 14px;
transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
border-radius: 7px;
}
.box-category > ul > li ul {
display: none;
margin: 6px 0 6px 10px;
}
.box-category > ul > li a.active {
font-weight: bold;
background-color: #9C74ED;
color: white;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 0px #ddd;
box-shadow:0 1px 0px #ddd;
}
.box-category > ul > li a:hover {
background-color: #9C74ED;
color: white;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 0px #ddd;
box-shadow:0 1px 0px #ddd;

}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {
margin: 3px 0px;
}
.box-category > ul > li ul > li > a {
display: inline-block;
color: #9C74ED;
font-size: 14px;
text-decoration: none;
padding: 4px 10px 5px 18px;
background: url('../image/arrow_left2.png') 4px 8px no-repeat;
transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
border-radius: 7px;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
background-color: #f5f5f5;
border-radius: 7px;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 0px #ddd;
box-shadow:0 1px 0px #ddd;
text-shadow: 0 0 1px #fff;
color: black;
}
/* Box list */
.box-content ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-content > ul > li {
background: url('../image/arrow_left.png') 4px 6px no-repeat;
padding: 4px 8px 5px 20px;
}
.box-content > ul > li > a {
color: #444;
text-decoration: none;
}
.box-content > ul > li > a:hover {
text-decoration: underline;
}

.my_account ul {
list-style: none;
margin: 0;
padding: 0;
}
.my_account ul li {
background: url('../image/arrow_left.png') 4px 6px no-repeat;
padding: 4px 8px 5px 20px;
}
.my_account ul li a {
color: #444;
text-decoration: none;
}
.my_account ul li a:hover {
text-decoration: underline;
}



/* content */
#content .content {
padding: 10px 0;
overflow: auto;
margin-bottom: 20px;
}
#content .content .left {
float: left;
width: 49%;
}
#content .content .right {
float: right;
width: 49%;
}
/* category */
.category-info {
overflow: auto;
margin-bottom: 20px;
line-height: 1.5em;
}
.category-info .image {
float: left;
padding: 5px;
margin-right: 15px;
}
.category-list {
overflow: auto;
margin-bottom: 20px;
}
.category-list ul {
float: left;
list-style: none;
margin: 4px 0;
padding: 0;
}
.category-list ul li {
margin: 7px 0px;
line-height: 18px;
}
.category-list .div a {
text-decoration: underline;
font-weight: bold;
}

.category-list ul li a {
color: #444;
text-decoration: none;
padding: 4px 8px 5px 20px;
background: url('../image/arrow_left2.png') 4px 6px no-repeat;
}
.category-list ul li a:hover {
background-color: #F9F9F9;
border-radius: 7px;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 2px #ddd;
box-shadow:0 1px 2px #ddd;
text-shadow: 0 0 1px #fff;
}


/* manufacturer */
.manufacturer-list {
padding: 5px;
overflow: auto;
margin-bottom: 20px;
}
.manufacturer-heading {
padding: 8px 8px 8px 13px;
font-weight: bold;
font-size: 14px;
color: #555555;
margin-bottom: 18px;
background-color: #F8F8F8;
border-radius: 5px;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 2px #ddd;
box-shadow:0 1px 2px #ddd;
text-shadow: 0 0 1px #fff;
}
.manufacturer-content {
padding: 8px;
}
.manufacturer-list ul {
float: left;
width: 25%;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 10px;
}
.manufacturer-list ul li a {
color: #444;
text-decoration: none;
padding: 4px 8px 5px 20px;
background: url('../image/arrow_left2.png') 4px 6px no-repeat;
}
.manufacturer-list ul li a:hover {
background-color: #F9F9F9;
border-radius: 7px;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 2px #ddd;
box-shadow:0 1px 2px #ddd;
text-shadow: 0 0 1px #fff;
}
a.lettering {
color: #444;
width: 16px;
text-decoration: none;
padding: 3px 8px 3px 8px;
border-radius: 7px;
}
a.lettering:hover {
background-color: #F9F9F9;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 2px #ddd;
box-shadow:0 1px 2px #ddd;
text-shadow: 0 0 1px #fff;
}
/* product */
.product-filter {
border-bottom: 1px solid #EEEEEE;
background: #f9f9f9;
padding: 10px 10px 7px;
overflow: auto;
border-radius: 5px;
margin-bottom: 20px;
font-size: 11px;
}
.product-filter .display {
margin-right: 15px;
float: left;
padding-top: 4px;
color: #666;
}
.product-filter .display a {
margin: -1px 2px 0 4px;
}
.product-filter .display a.list_view_link {
color: #333;
padding: 0px 0px 1px 19px;
text-decoration: none;
font-size: 11px;
background: url('../image/list_view_icon_active.png') 0px 0px no-repeat;
}
.product-filter .display a.list_view_link_active {
color: #777;
padding: 0px 0px 1px 19px;
text-decoration: none;
font-size: 11px;
background: url('../image/list_view_icon.png') 0px 0px no-repeat;
}
.product-filter .display a.grid_view_link {
color: #333;
padding: 0px 0px 1px 19px;
text-decoration: none;
font-size: 11px;
background: url('../image/grid_view_icon_active.png') 0px 0px no-repeat;
}
.product-filter .display a.grid_view_link_active {
color: #777;
padding: 0px 0px 1px 19px;
text-decoration: none;
font-size: 11px;
background: url('../image/grid_view_icon.png') 0px 0px no-repeat;
}
.product-filter .display a:hover {
text-decoration: underline;
}
.product-filter .sort {
float: right;
color: #666;
}
.product-filter .limit {
margin-left: 15px;
float: right;
color: #666;
}
.product-filter select {
font-size: 11px;
padding: 2px;
}

.product-compare {
float: left;
padding-top: 4px;

}
.product-compare a {
color: #444;
padding: 0px 0px 0px 13px;
text-decoration: none;
font-size: 11px;
background: url('../image/arrow_left.png') 0px 2px no-repeat;
}
.product-compare a:hover {
text-decoration: underline;
}
.product-list .prod_holder {
overflow: auto;
border: 1px solid #e2e2e2;
position: relative;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.product-list .prod_holder:hover {
border: 1px solid #dee8c5;
}

.product-list .prod_holder_inside{
margin: 1px;
padding: 0px 15px 0 0;
overflow: hidden;
border: 2px solid #f8f8f8;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
.product-list .prod_holder:hover .prod_holder_inside{
border: 2px solid #e7fbb7;
}
.product-list .right {
float: right;
margin-left: 20px;
padding-bottom: 20px;
}
.product-list > div + div {
margin: 16px 0 0;
}
.product-list .image {
float: left;
margin: -15px 20px 10px 10px;
}
.product-list .image img {

}
.product-list .name {
margin: 25px 0 10px;
}
.product-list .name a {
color: #4B4B4B;
font-weight: bold;
font-size: 15px;
}
.product-list .description {
line-height: 15px;
margin-bottom: 5px;
color: #4D4D4D;
}
.product-list .rating {
color: #7B7B7B;
}
.product-list .price {
float: right;
height: 50px;
text-align: right;
font-size: 15px;
color:#b6066c;
font-weight: bold;
margin-left: 20px;
}
.product-list .price-old {
font-size: 12px;
font-weight: normal;
color:#bbb;
text-decoration: line-through;
}
.product-list .price-new {
font-weight: bold;
}
.product-list .price-tax {
font-size: 12px;
font-weight: normal;
color: #BBBBBB;
}
.product-list .cart{
margin: 25px 0 0;
font-weight: bold;
padding: 2px 0 6px;
}
.product-list .cart a{
background: url('../image/plus.png') 0px 3px no-repeat;
padding: 0px 0 0 16px;
}

.product-list .wishlist, .product-list .compare {
margin: 2px 0 3px;
}
.product-list .wishlist a {
color: #444;
text-decoration: none;
background: url('../image/plus_tiny.png') 0px 2px no-repeat;
padding: 0px 0 0 16px;
font-size: 11px;
}
.product-list .compare a {
color: #444;
text-decoration: none;
background: url('../image/plus_tiny.png') 0px 2px no-repeat;
padding: 0px 0 0 16px;
font-size: 11px;
}
.product-list .special_promo {
display: none;
}











.product-grid {
;
padding-top: 2px;
}
.product-grid .prod_holder {
/* float: left; */
display: inline-block;

width: 216px;
vertical-align: top;
margin-left: 20px;
margin-bottom: 20px;
border: 1px solid #e2e2e2;
position: relative;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.product-grid .prod_holder:hover {
border: 1px solid #dee8c5;
}

.product-grid .prod_holder_inside{
margin: 1px;
padding-bottom: 6px;
overflow: hidden;
border: 2px solid #f8f8f8;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
.product-grid .prod_holder:hover .prod_holder_inside{
border: 2px solid #e7fbb7;
}



#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
text-align: center;
}
.product-grid .image img {
margin: 8px 0;
}
.product-grid .name {
text-align: center;
font-weight: bold;
margin: 0 12px;
border-top: 1px dotted #ddd;
padding: 10px 0 6px;
}
.product-grid .name a {
color:#4B4B4B;
font-size: 14px;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
margin: 8px 0 4px;
text-align: center;
}
.product-grid .price {
text-align: center;
font-weight: bold;
margin: 0 12px;
font-size: 15px;
color:#b6066c;
}
.product-grid .price-old {
font-size: 12px;
font-weight: normal;
color:#bbb;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart{
text-align: center;
font-weight: bold;
margin: 0 12px;
padding: 8px 0 6px;
}
.product-grid .cart a{
background: url('../image/plus.png') 0px 3px no-repeat;
padding: 0px 0 0 16px;
}

.product-grid .wishlist, .product-grid .compare {
text-align: center;
margin: 4px 0 8px;
}
.product-grid .wishlist a {
color: #444;
text-decoration: none;
background: url('../image/plus_tiny.png') 0px 2px no-repeat;
padding: 0px 0 0 16px;
font-size: 11px;
}
.product-grid .compare a {
color: #444;
text-decoration: none;
background: url('../image/plus_tiny.png') 0px 2px no-repeat;
padding: 0px 0 0 16px;
font-size: 11px;
}

.wishlist a:hover, .compare a:hover {
text-decoration: underline;
}


/* Product boxes in inner page (wider boxes) */
.products_container {
overflow: auto;
margin: 0 -15px 0 0;
padding-top: 2px;
}
#content_inside .products_container {
margin: 0 0 0 -20px;
}
#column-left .products_container, #column-right .product_container {
margin: 0;
}
#content_inside .product_holder {
width: 216px;
margin: 0 0 20px 20px;
float: none;
display: inline-block;
}




/* Product */
.product-info {
overflow: hidden; /* MESSES UP ZOOM : auto */
margin-bottom: 20px;
min-height: 394px;
}
.product-info > .left {
float: left;
margin-right: 15px;
}
.product-info > .left + .right {
margin-left: 322px;
}


.product-info .image {
float: left;
margin-bottom: 15px;
text-align: center;
border: 1px solid #e2e2e2;
position:relative;

border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}

.product-info .image_inside{
margin: 1px;
border: 2px solid #f8f8f8;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
padding: 6px;
position:relative;
z-index:20;
}
.product-info .image .zoom_btn{
position: absolute;
bottom: 12px;
right: 10px;
width: auto;
height: 11px;
z-index:21;
}
.product-info .image .zoom_btn a{
font-size: 10px;
line-height: 11px;
color: #999;
text-transform: uppercase;
background: #fff url('../image/zoom_tiny.png') 2px 2px no-repeat;
padding: 1px 1px 1px 16px;
}

.product-info .image-additional {
width: 312px;
;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
width: 86px;
height: 86px;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
padding: 3px;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 8px;
}
.product-info .image-additional a:focus, .product-info .image-additional a:active {
outline: 0;
}
.product-info .image-additional img:hover {
border: 1px solid #d6e7ac;
}
.product-info .description {
/* border-bottom: 1px dotted #eee;*/
padding: 2px 0px 0px 0px;
margin-bottom: 8px;
line-height: 20px;
color: #4D4D4D;
font-size: 12px;
}
.product-info .description span {
color: #888;
}
.product-info .description a {
color: #4D4D4D;
text-decoration: none;
}
.product-info .price {
/* overflow: auto; */
/* border-bottom: 1px dotted #eee; */
padding: 0px 0px 18px 0px;
margin-bottom: 24px;
font-size: 17px;
color: #333333;
}
.product-info .price_div {
margin-bottom: 10px;
}
.product-info .price .additional_prices span{
margin-top: 8px;
display: block;
}
.product-info .price .alt_font {
font-family: FolksRegular, sans-serif;
font-size: 22px;
color: #b6066c;
font-weight: bold;
line-height: 40px;
height: 39px;
vertical-align: middle;
/* background: #F9F9F9;
border: 1px solid #f4f4f4;
border-radius: 6px;
padding: 0 0 0 14px;*/
display: inline-block;
}
.text_price {
color: #4D4D4D;
font-size: 17px;
font-weight: normal;
font-family: tahoma, sans-serif;
}
.product-info .price-old {
font-weight: normal;
color:#aaa;
text-decoration: line-through;
}
.product-info .price-new {
}
.product-info .price-tax {
font-size: 13px;
font-weight: normal;
color: #888;
}
.product-info .price .reward {
font-size: 13px;
font-weight: normal;
color: #888;
}
.product-info .price .discount {
font-weight: normal;
font-size: 13px;
color: #888;
}
.product-info .options {
/* border-bottom: 1px dotted #eee;*/
padding: 18px 0px 0px 0px;
margin-bottom: 10px;
color: #333333;
}
.product-info .option-image {
margin-top: 3px;
margin-bottom: 10px;
}
.product-info .option {
font-size: 11px;
}
.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 {
border-bottom: 1px dotted #eee;
padding: 8px 0px 16px 0px;
margin-bottom: 4px;
color: #4D4D4D;
overflow: auto;
}
.product-info .cart div {
float: left;
vertical-align: middle;
padding: 10px 12px 9px 14px;
background: #f6f6f6;
border-bottom: 1px solid #eee;
border-radius: 6px;
font-size: 15px;
}
.product-info .cart div .qty_input{
padding: 6px 6px;
background: #fff;
}
.product-info .cart div > span {
padding-top: 7px;
display: block;
color: #999;
}
.product-info .cart .minimum {
padding-top: 5px;
font-size: 11px;
color: #999;
clear: both;
}
.cart_clearer {
clear: left;
height: 18px;
margin: 0;
display: block;
}
.product-info .review {
color: #999;
}
.product-info .review > div {
padding: 8px 0;
line-height: 20px;
}
.product-info .review > div img{
position: relative;
top: 3px;
}
.product-info .review > div > span {
color: #38B0E3;
}
.product-info .review .share {
overflow: auto;
line-height: normal;
}
.product-info .review .share a {
text-decoration: none;
}
.product-info .review a.rev_count {
font-size: 11px;
color: #444;
}
.tab-content #review .content {
color: #555;
}
.tab-content #review .content img{
position: relative;
top: 3px;
}
.tab-content #review .content .r_date{
margin: 8px 0;
color: #aaa;
}
.tab-content div.r_label{
color: #666;
margin: 20px 0 4px;
}
.tab-content b.r_label{
color: #666;
}
.product-info a.icon_plus {
background: url('../image/plus_tiny.png') 0px 3px no-repeat;
padding: 0px 0 0 16px;
font-size: 11px;
color:#444;
}
.attribute {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
margin-bottom: 20px;
}
.attribute thead td, .attribute thead tr td:first-child {
color: #333333;
font-size: 14px;
font-weight: bold;
background: #F7F7F7;
text-align: left;
}
.attribute tr td:first-child {
color: #333333;
font-weight: bold;
text-align: right;
width: 20%;
}
.attribute td {
padding: 7px;
color: #4D4D4D;
text-align: center;
vertical-align: top;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.compare-info {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
margin-bottom: 20px;
}
.compare-info thead td, .compare-info thead tr td:first-child {
color: #333333;
font-size: 14px;
font-weight: bold;
background: #F7F7F7;
text-align: left;
}
.compare-info tr td:first-child {
color: #333333;
font-weight: bold;
text-align: left;
}
.compare-info td {
padding: 7px;
width: 20%;
color: #4D4D4D;
text-align: center;
vertical-align: top;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.compare-info .name a {
font-weight: bold;
}
.compare-info .price-old {
font-size: 12px;
font-weight: bold;
color:#bbb;
text-decoration: line-through;
}
.compare-info .price-new {
font-weight: bold;
}
/* wishlist */
.wishlist-info table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
margin-bottom: 20px;
}
.wishlist-info td {
padding: 7px;
}
.wishlist-info thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #eee;
}
.wishlist-info thead .image {
text-align: center;
}
.wishlist-info thead .name, .wishlist-info thead .model, .wishlist-info thead .stock {
text-align: left;
}
.wishlist-info tbody .name a{
color: #444;
font-weight: bold;
}
.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 #eee;
}
.wishlist-info tbody .image img {
border: 1px solid #eee;
}
.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: 42%;
margin: 20px;
}
.login-content .right {
float: right;
width: 42%;
margin: 20px;
}
.login-content .left .content, .login-content .right .content {
min-height: 190px;
}
.login-content .heading {
float: left;
width: 100px;
font-weight: bold;
text-align: right;
margin-right: 12px;
padding-top: 6px;
}
.login-content .in_field {
float: left;
width: 160px;
}
.login-content .content a{
font-size: 11px;
}
.login-content h2, .f_form h2 {
border-bottom: 1px dotted #DDD;
padding-bottom: 5px;
}
.checkout-content h2 {
border-bottom: 1px dotted #DDD;
padding-bottom: 5px;
margin-bottom: 12px;
}
.bordered {
border-top: 1px solid #ccc;
}
/* 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%;
line-height: 1.6;
}
.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 {
width: 100%;
margin-bottom: 15px;
border-collapse: collapse;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
.cart-info td {
padding: 7px;
}
.cart-info thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #eee;
}
.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 #eee;
}
.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 .name a{
color: #444;
font-weight: bold;
}
.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 #eee;
overflow: auto;
padding-top: 8px;
margin-bottom: 15px;
}
.cart-total table {
float: right;
}
.cart-total td {
padding: 3px;
text-align: right;
}
/* checkout */
.checkout-heading {
padding: 8px;
font-weight: bold;
font-size: 13px;
color: #555555;
margin-bottom: 18px;
background-color: #F8F8F8;
border-radius: 5px;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 2px #ddd;
box-shadow:0 1px 2px #ddd;
text-shadow: 0 0 1px #fff;
}
.checkout-heading a {
float: right;
margin-top: 1px;
font-weight: normal;
text-decoration: none;
}
.checkout-content {
padding: 0px 40px 15px 40px;
display: none;
overflow: auto;
}
.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 #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
margin-bottom: 20px;
}
.checkout-product td {
padding: 7px;
}
.checkout-product thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #eee;
}
.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 #eee;
}
.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 #eee;
}
.contact-info {
overflow: auto;
line-height: 19px;
}
.contact-info .left {
float: left;
width: 48%;
}
.contact-info .right {
float: left;
width: 48%;
}
.contact-info-input{
width: 180px;
}

.sitemap-info {
overflow: auto;
margin-bottom: 40px;
}
.sitemap-info .left {
float: left;
width: 48%;
}
.sitemap-info .right {
float: left;
width: 48%;
}
.sitemap-info {
overflow: auto;
margin-bottom: 20px;
}
.sitemap-info ul {

list-style: none;
margin: 4px 0;
padding: 0;
}
.sitemap-info ul li {
margin: 7px 0px;
line-height: 18px;

}
.sitemap-info .div a {
text-decoration: underline;
font-weight: bold;
}

.sitemap-info ul li a {
color: #444;
text-decoration: none;
padding: 4px 8px 5px 20px;
background: url('../image/arrow_left2.png') 4px 6px no-repeat;
}
.sitemap-info .left > ul > li > a, .sitemap-info .right > ul > li > a {
font-weight: bold;
padding: 4px 8px 5px 8px;
background: none;
}
.sm_info_head {
padding: 4px 8px 5px 8px;
}
.sitemap-info ul li a:hover {
background-color: #F9F9F9;
border-radius: 7px;
-webkit-box-shadow:0 1px 2px #ddd;
-moz-box-shadow:0 1px 2px #ddd;
box-shadow:0 1px 2px #ddd;
text-shadow: 0 0 1px #fff;
}
.sitemap-info ul li ul {
margin: 7px 20px;
}





/* footer */
#footer {
/* background: url("../image/visa.png") no-repeat scroll 247px 0px transparent;*/
clear: both;
color: #606060;
overflow: auto;
padding: 0 0px 20px;
}


#footer h3 {
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
#footer .column {
display: none;
float: left;
min-height: 100px;
width: 17%;
}
#footer .big_column {
float: right;
width: 32%;

}
.icon_tweet {
float: right;
width: 28px;
height: 28px;
background-image: url('../image/icon_tweet.png');
background-position: 0px -28px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
text-indent: -9999px;
margin-left: 8px;
}
a.icon_tweet:hover {
background-position: 0px 0px;
}
.icon_facebook {
float: right;
width: 28px;
height: 28px;
background-image: url('../image/icon_facebook.png');
background-position: 0px -28px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
text-indent: -9999px;
margin-left: 8px;
}
a.icon_facebook:hover {
background-position: 0px 0px;
}
.icon_google {
float: right;
width: 28px;
height: 28px;
background-image: url('../image/icon_google.png');
background-position: 0px -28px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
text-indent: -9999px;
margin-left: 8px;
}
a.icon_google:hover {
background-position: 0px 0px;
}
#footer .column ul {
margin: 0px;
list-style: none;
padding: 0;
}
#footer .column ul li {
margin-bottom: 3px;
}
#footer .column a {
text-decoration: none;
color: #000;
padding: 0px 0px 0px 13px;
background: url('../image/arrow_left.png') 0px 2px no-repeat;
font-size: 11px;
color:#606060;
}
#footer .column a:hover {
text-decoration: underline;
}
#powered {
margin-top: 8px;
text-align: right;
clear: both;
font-size: 11px;
}
#powered a{
font-size: 11px;
}
/* banner */
/*
.banner div {
text-align: center;
width: 100%;
display: none;
}
.banner div img {
margin-bottom: 20px;
}
*/
.banner {
/* overflow: auto;*/
}
#column-left .banner, #column-right .banner {
overflow: hidden;
}
.banner div {
float: left;
margin: 0 15px 15px 0;
}
.banner div img {
}
.banner div.last_in_row {
margin-right: 0;
}

#column-left .banner{
margin: 10px 0;
}


/*********************************************************
ZOOM : START
/*********************************************************/
/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
border: 1px solid #aaa;
margin:-1px; /* Set this to minus the border thickness. */
background-color:#fff;
cursor:move;
}

/* This is for the title text. */
.cloud-zoom-title {
font-family:Arial, Helvetica, sans-serif;
position:absolute !important;
background-color:#444;
color:#fff;
padding:3px;
width:100%;
text-align:center;
font-weight:bold;
font-size:10px;
bottom:0px;
display: none;
}

/* This is the zoom window. */
.cloud-zoom-big {
border: 1px solid #ccc;
overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
color:white;
background:#222;
padding:3px;
border:1px solid #000;
border-radius: 4px;
}
/*********************************************************
ZOOM : END
/*********************************************************/

#tab-description {
line-height: 1.5em;
}
#tab-description p{
margin-bottom: 12px;
}
#tab-description ul{
list-style: none;
margin: 0;
padding: 0;
}
#tab-description ul li {
margin: 6px 0px;
padding: 0 0 0 24px;
background: url('../image/bullet2.png') 3px 3px no-repeat;
}
#tab-description ol{
margin: 0;
padding: 0 0 0 32px;
}
#tab-description ol li {
margin: 8px 0px;
padding: 0 0 0 2px;
}
.search_container {
border-bottom: 1px solid #EEE;
background: #F9F9F9;
padding: 20px;
margin: 10px 0 30px;
border-radius: 5px;
}
.search_table{
margin: 0px 0 0 12px;
}
.search_table td{
padding: 5px 0;
}
.search_table input[type=text], .search_table select {
min-width: 200px;
}

.cyan_price {
background: url('../image/price_bgr_left.png') top left no-repeat;
padding-left: 24px;
display: inline-block;
}

.cyan_price span {
background: url('../image/price_bgr_right.png') top right no-repeat;
color: #fff;
padding: 0 10px 0 5px;
display: inline-block;
}










@media only screen and (min-width: 781px) and (max-width: 960px) {


/* -------------- General ---------------------*/

.shown-tablet {display: block !important;}
.hidden-tablet {display: none !important;}


/* -------------- Layout ---------------------*/

#container {
width: auto;
margin: 0 10px;
}

/* -------------- Home Page ---------------------*/

.products_container {
overflow: auto;
margin: 0 -1% 0 0;
padding-top: 2px;
}
.product_holder {
float: left;
width: 18%;
vertical-align: top;
border: 1px solid #E2E2E2;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin: 0;
}
.product_holder + .product_holder {
margin: 0 0 2% 2%;
}

.product_holder img{
width: 90%;
margin: 5px auto;
}


/* -------------- Category Page ---------------------*/

.category-info img{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

.product-grid {
margin: 0 0 0 -3%;
padding-top: 2px;
}

.product-grid .prod_holder {
float: left;
width: 30%;
vertical-align: top;
margin-left: 3%;
margin-bottom: 3%;
border: 1px solid
#E2E2E2;
position: relative;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.product-grid .prod_holder img{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}


/* -------------- Product Page ---------------------*/

#content_inside .products_container{
margin: 0 0 0 -3%;
padding-top: 2px;
}

#content_inside .product_holder{
float: left;
width: 30%;
vertical-align: top;
margin-left: 3%;
margin-bottom: 3%;
border: 1px solid
#E2E2E2;
position: relative;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.product-info .cart .button {
padding: 0px 12px 0px 12px;
}

.product-info .cart .qty_input {
width: 20px;
}

.cloud-zoom-big {
left: -10px !important;
top: -10px !important;
width: 298px !important;
height: 298px !important;
}


/* -------------- Account Page ---------------------*/
.login-content .heading {
float: none;
text-align: left;
width: auto;
}

}

@media only screen and (max-width: 780px) {


/* -------------- General ---------------------*/

.shown-phone {display: block !important;}
.hidden-phone {display: none !important;}


/* -------------- Layout ---------------------*/
html {-webkit-text-size-adjust: none;}
body {padding: 10px 0px;}

#container {
width: auto;
min-width: 320px;
padding: 0;
}
#content {
padding: 10px;
}

#column-left, #column-right {
display: none;
}
#column-left + #column-right + #content_inside, #column-left + #content_inside, #column-right + #content_inside {
margin-left: 0px;
margin-right: 0px;
border-left: 0;
border-right:0;
padding-left: 0px;
padding-right: 0px;
}

.jcarousel-skin-opencart .jcarousel-item-horizontal img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#menu {
display: none;
}
#menu-phone {
width: auto;
background: url('../image/main_nav_bgr.png') center center no-repeat;
height: 32px;
position: relative;
}
#menu-phone-button {
position: relative;
z-index:900;
width: auto;
line-height: 32px;
font-size: 15px;
color: #fff;
text-indent: 14px;
}
#menu-phone-select{
position: absolute;
z-index:1000;
top: 0px;
left:0;
width: 100%;
height: 100%;
opacity:0;
cursor: pointer;
}


#header {
height: auto;
text-align: center;
padding-bottom: 46px;
}
#header #logo {
position:relative;
top: 0px;
left: 0px;
margin: 10px auto;
}

.links {
display: none;
}
.pagination .links {
display: block;
}
#header #cart {
position: relative;
text-align: center;
top: -6px;
left:0px;
}
#header #cart .heading {
float: none;
margin-left: 0;
}
#header #cart .content {
margin-left: 0px;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
}
#header #cart .heading a span {
display: inline-block;

}

#header #welcome {
position: relative;
margin: 8px 10px;
width: auto;
top:0;
left:0;
right: 0;
text-align: left;
text-align: center;
}
#header_btm {
position: absolute;
margin: 8px 0px;
right:0;
top: auto;
bottom: 0;
width: 100%;
text-align: left;
height: 28px;
}
#header #search {
float: none;
position:relative;
text-align: center;
width: 202px;
margin: 0 auto 20px auto;
}
#header #search .search_inside {
display: block;
}
#header #search input {
width: 196px;
}
#c_switcher {
box-shadow: none;
}
#l_switcher {
box-shadow: none;
}
#footer {
padding: 0 10px 12px;

}
#footer .big_column {
width: 45%;
}
#powered {
display: none;
}
#footer .column{
display: none;
}
#footer .column:first-child {
width: 45%;
display: block;
}

/* -------------- Home Page ---------------------*/

.products_container {
overflow: auto;
margin: 0;
padding-top: 2px;
}
.product_holder {
float: none;
width: 98%;
vertical-align: top;
border: 1px solid #E2E2E2;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin: 0;
}
.product_holder + .product_holder {
margin: 10px 0 0;
}
.product_holder_inside {
padding-bottom: 3px;
}

.product_holder .image {
float: left;
width: 40%;
}
.product_holder img{
width: 90%;
margin: 5px auto;
}
.product_holder .pr_info {
margin-left: 42%;
}
.product_holder .name {
text-align: left;
font-weight: bold;
margin: 16px 14px 0;
border-top: 0;
padding: 10px 0 6px;
}
.product_holder .name a{
font-size: 1.2em;
}
.product_holder .price {
text-align: left;
font-weight: bold;
margin: 0 14px;
font-size: 14px;
color: #B6066C;
}
.product_holder .cart {
text-align: left;
font-weight: bold;
margin: 0 12px;
padding: 8px 0 6px;
}

.banner {
display: none;
}
.welcome_text {
margin: 16px 0px 16px 0px;
}

.jcarousel-container-horizontal {
margin-top: 10px;
}

.jcarousel-skin-opencart .jcarousel-next-horizontal {
top: 50% !important;
margin-top: -16px !important;
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal {
top: 50% !important;
margin-top: -16px !important;
}



/* -------------- Category Page ---------------------*/

.category-info img{
max-width: 100%;
height: auto !important;
width: auto\9; /* ie8 */
}

.product-grid {
overflow: auto;
margin: 0;
padding-top: 2px;
}
.product-grid .prod_holder {
float: none;
width: 98%;
vertical-align: top;
border: 1px solid #E2E2E2;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin: 0;
}
.prod_holder + .prod_holder {
margin: 10px 0 0;
}
.product-grid .prod_holder_inside {
padding-bottom: 3px;
}

.product-grid .prod_holder .image {
float: left;
width: 40%;
margin-right: 5%;
}
.product-grid .prod_holder img{
width: 90%;
margin: 13% auto 18%;
}
.product-grid .prod_holder .pr_info {
margin-left: 42%;
}
.product-grid .prod_holder .name {
text-align: left;
font-weight: bold;
margin: 8px 14px 0;
border-top: 0;
padding: 6px 0 6px;
}
.product-grid .prod_holder .name a{
font-size: 1.2em;
}
.product-grid .prod_holder .price {
text-align: left;
font-weight: bold;
margin: 0 14px;
font-size: 14px;
color: #B6066C;
}
.product-grid .prod_holder .cart {
text-align: left;
font-weight: bold;
margin: 0 12px;
padding: 8px 0 6px;
}

.product-grid .wishlist, .product-grid .compare {
text-align: left;
}



.product-list {
overflow: auto;
margin: 0;
padding-top: 2px;
}
.product-list .prod_holder {
float: none;
width: 98%;
vertical-align: top;
border: 1px solid #E2E2E2;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin: 0;
}
.prod_holder + .prod_holder {
margin: 10px 0 0;
}
.product-list .prod_holder_inside {
padding-bottom: 3px;
}

.product-list .prod_holder .image {
float: none;
width: 40%;
margin: 3% 5%;
}
.product-list .prod_holder img{
width: 90%;
margin: 5px auto;
}
.product-list .prod_holder .pr_info {
margin-left: 42%;
}
.product-list .prod_holder .name {
text-align: left;
font-weight: bold;
margin: 4px 14px 0;
border-top: 0;
padding: 0px 0 6px;
}
.product-list .description {
display: none;
}
.product-list .prod_holder .name a{
font-size: 1.2em;
}
.product-list .prod_holder .price {
text-align: left;
font-weight: bold;
margin: 0 14px;
font-size: 14px;
color: #B6066C;
height: 40px;
}
.product-list .prod_holder .cart {
text-align: left;
font-weight: bold;
margin: 0 12px 0 0;
padding: 8px 0 6px;
}

.product-list .right {
margin: 12px 0 0 0px;
padding-bottom: 14px;
}

.product-list .wishlist, .product-list .compare {
text-align: left;
}
.product-filter .display {
display: none;
}
.product-filter .limit {
display: none;
}
.product-filter select {
max-width: 100px;
}

/* -------------- Product Page ---------------------*/

.product-info > .left {
float: none;
}
.product-info > .left + .right {
margin-left: 0px;
margin-top:12px;
}
#content_inside .products_container {
overflow: auto;
margin: 0;
padding-top: 2px;
}
#content_inside .product_holder {
width: 98%;
margin:0 0 10px 0;
}

.product-info .cart .button {
padding: 0px 12px 0px 12px;
}

.product-info .cart .qty_input {
width: 20px;
}

.cloud-zoom-big {
left: -10px !important;
top: -10px !important;
width: 298px !important;
height: 298px !important;
}


/* -------------- Pages ---------------------*/

.checkout-content {
padding: 0px 0px 12px 0px;
}

.login-content .heading {
float: none;
text-align: left;
width: auto;
}
.login-content .left {
width: 45%;
margin: 0px;
}
.login-content .right {
width: 45%;
margin: 0px;
}
.login-content .in_field {
width: 92%;
}
table.form input[type=text], table.form select, table.form input[type=password],table.form textarea {
min-width: none;
}
input.large-field, select.large-field {
width: auto;
}
#logo img {
max-width: 80%;
}
}
#logo img{-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-timing-function:ease}
#logo a:hover img{-webkit-animation-name:tada;-moz-animation-name:tada;animation-name:tada}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes tada{0%{-moz-transform:scale(1)}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
100%{-moz-transform:scale(1) rotate(0)}
}
@keyframes tada{0%{transform:scale(1)}
10%,20%{transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
100%{transform:scale(1) rotate(0)}
}[/spoiler
ну вот код файла с сервера, строка 1003

 

вот код файла с сайта

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    645

а это как обьясните? 

752ab2a981ad.jpg

 

 

P.S. дожился...спорю до красных соплей за чей то сайт))))) оно мне надо? если сам хозяин делать ни че не хочет?

 

код свой в спойлер спрячь...ни к чему тут такие портянки с кодом

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

ну что вы так возмущаетесь сразу, я с вами не спорю, учусь и пытаюсь понять, что не так

 

вот мой скрин

 

29WLTXcq.png  

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    645

правда? :?  ну и? что не так?

fedf4799b599.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

сам в шоке.....

ну теперь всё вроде так, только добавил в .box-product-main .price text-align: center; и кое что закомментировал.

 

осталось верхние закладки выровнять

 

и вот эти расстояния пытаюсь выровнять через .box-product-main > div { - ничего путного не выходит

MXSL6Xz6.png  

 

а так ОГРОМНОЕ спасибо за помощь!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    645

расстояния пытаюсь выровнять через .box-product-main > div { - ничего путного не выходит

а если немного подумать и двигать не товар, а блок с товаром?

может все таки так? или, млять...опять буим полночи решать так это или нет?

.box-product-main {overflow: auto;margin-left:10px;width: 100%;}
нервов уже ни каких...ей богу...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sonicking    5

всё, я понял, не туда я смотрю в Firebug-е

спасибо ещё раз за терпение!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Funny06    0

Подскажите, поставил данный модуль на Opencart 1.5.6.4. Почему то отображает товар не в строку а столбцом. Может кто знает как исправить. спасибо отклинкувшимся.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    2 014

Проверить  путём подключения в хидер шаблона (header.tpl)  скрипта

<script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу