Files
AtomicOld/design/atomic/css/old/style.css
2026-02-15 18:29:53 +03:00

1134 lines
21 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@import url("reset.css");
/* @group Общий стиль */
html,
body {
width: 100%;
height: 100%;
font: 13px Tahoma, Arial, Helvetica, Geneva, sans-serif;
background-color: #f5f5f5;
}
p{margin-bottom: 15px;}
h1 {
font-size: 30px;
margin-bottom: 10px;
font-weight: normal;
text-shadow: 0px 1px 0px #fff;
}
h2 {
clear: both;
font-size: 20px;
margin-bottom: 10px;
font-weight: normal;
}
h3 {
font-size: 16px;
margin-top: 0px;
margin-bottom: 10px;
font-weight: normal;
}
a { color: #0095eb; }
a:hover { color: #e84d07; }
e[type="button"] {
cursor:hand;
cursor:pointer;
}
/* @end — Общий стиль */
/* @group Верхняя строка */
#top_background{
min-height: 44px;
padding-top: 10px;
width: 100%;
overflow: hidden;
padding-bottom: 5px;
}
#top{
margin:0px auto;
width: 940px;
}
#menu{
margin-left: -10px;
float: left;
margin-top: 7px;
max-width: 700px;
}
#menu li{
height: 30px;
display: block;
float: left;
list-style: none;
}
#menu li a{
margin-right: 5px;
font-size: 12px;
display: block;
float: left;
padding: 6px 11px 6px 11px;
color: #606060;
}
#menu li.selected a, #menu li:hover a{
border: 1px solid #d5d5d5;
background-color: #ffffff;
padding: 5px 10px 6px 10px;
border-radius: 20px;
text-decoration: none;
}
#blog{
list-style: none;
}
#currencies{
margin-bottom:15px;
}
#currencies ul{
margin-top: 10px;
}
#currencies ul li{
font-size: 12px;
display: inline;
padding-right: 5px;
list-style: none;
}
#currencies ul li a{
white-space: nowrap;
color: #505050;
}
#currencies ul li.selected a{
text-decoration: none;
}
#cart_informer{
background-color: #fff;
padding: 5px 13px 6px 13px;
border-radius: 15px;
float: right;
margin-top: 6px;
margin-left: 10px;
color: #505050;
}
/* @group Шапка сайта */
#header {
margin:0px auto;
width: 940px;
overflow: hidden;
clear: both;
margin-bottom: 20px;
}
/* @group Футкр сайта */
#footer {
margin:0px auto;
width: 940px;
overflow: hidden;
clear: both;
height: 60px;
padding-top: 30px;
text-align: center;
}
#account{
float: right;
font-size: 12px;
margin: 12px 10px 10px 0px;
margin-top: 12p
margin-right: 1e0px;
text-align: right;
color: #505050;
}
#account #login{
padding-left: 7px;
}
#account #logout{
padding-left: 7px;
}
#logo{
margin-top: 15px;
padding-left: 0px;
float: left;
clear: left;
width: 250px;
height: 105px;
}
#logo1{
margin-top: 15px;
padding-left: 0px;
float: left;
width: 250px;
height: 105px;
}
#contact{
float: right;
text-align: right;
margin-top: 15px;
margin-right: 5px;
font-sdtyle: italic;
height: 40px;
color: #505050;
font-size: 15px;
text-shadow: 0px 1px 0px #fff;
}
#contact #phone{
font-size: 18px;
}
#contact #phone1{
font-size: 18px;
margin-top: 10px;
}
#main {
margin:0px auto;
width: 100%;
}
#content {
float: right;
width: 680px;
margin-bottom: 20px;
}
#left {
width: 260px;
float: left;
overflow: hidden;
}
#search{
margin-top: 9px;
margin-bottom: 10px;
height: 28px;
}
#search .input_search{
width: 170px;
height: 20px;
font-size: 12px;
border: 1px solid #b0b0b0;
display: block;
float: left;
}
#search .button_search {
width: 32px;
height: 28px;
background-position-y: middle;
background: url(../images/search.png) no-repeat;
border-style: none;
cursor: pointer;
cursor: hand;
display: block;
float: left;
}
/* @group Меню каталога*/
#catalog_menu {
margin-top: 10px;
margin-bottom: 10px;
}
#catalog_menu ul {
padding-left: 0px;
padding-bottom: 5px;
list-style: none;
}
#catalog_menu ul ul {
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
#catalog_menu ul li {
font-size: 16px;
margin-top: 8px;
}
#catalog_menu ul li img{
vertical-align: middle;
}
#catalog_menu ul li a.selected{
color: #ffffff;
background-color: #0095eb;
padding: 3px;
}
#catalog_menu ul ul li {
font-size: 14px;
}
#catalog_menu ul ul ul li {
font-size: 12px;
}
/* @end — Меню каталога*/
#all_brands {
width: 220px;
margin-bottom: 15px;
}
/* @group Brands */
#brands {
clear: both;
margin-bottom: 10px;
margin-top: 10px;
}
#brands a {
color: #ec0060;
font-size: 12px;
margin-right: 10px;
}
#brands img{
vertical-align: middle;
}
#brands a:hover {
color: #000;
}
#brands a.selected {
background-color: #ec0060;
color: #fffeff;
padding: 2px 2px 2px 2px;
}
/* @end */
/* Хлебные крошки */
#path{
margin-top: -20px;
margin-bottom: 5px;
font-size: 11px;
color: #a0a0a0;
}
#path a{
color: #a0a0a0;
}
/* @end */
/* @group Товар подробно */
.product .image {
text-align: center;
width: 300px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
float: left;
padding: 5px;
margin-right: 20px;
}
.product .image img{
max-width: 300px;
}
.product .images {
float: left;
clear: left;
width: 300px;
margin-right: 20px;
margin-bottom: 10px;
padding-top: 15px;
padding-bottom: 15px;
}
.product .images img{
text-align: center;
width: 50px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
float: left;
padding: 5px;
margin: 4px 10px 10px 0px;
}
.product .description{
float: left;
width: 600px;
}
.product .features {
list-style: none;
width: 100%;
display: block;
clear: both;
margin-top: 15px;
margin-bottom: 25px;
border-bottom: 1px solid #e0e0e0;
}
.product .features li {
padding: 10px 5px 10px 5px;
overflow: hidden;
border-top: 1px solid #e0e0e0;
background-color: #f0f0f0;
}
.product .features li.even{
background-color: #e9e9e9;
}
.product .features label {
font-style: normal;
display: block;
width: 30%;
float: left;
}
.product .features p {
float: left;
display: block;
width: 70%;
}
.product .variants {
float: left;
font-size: 12px;
}
.product .variant td{
padding-bottom: 6px;
vertical-align: middle;
}
.product .compare_price {
font-size: 14px;
text-decoration: line-through;
white-space: nowrap;
color: #707070;
}
.product .price {
font-size: 14px;
white-space: nowrap;
font-weight: bolder;
}
.product .variant_name {
float: left;
margin-right: 10px;
font-size: 12px;
}
.product .variant_radiobutton {
margin-right: 5px;
margin-left: 0px;
}
#back_forward {
font-size: 14px;
margin-bottom: 20px;
clear: both;
}
#back_forward a.prev_page_link{
margin-right: 20px;
}
/* @end — Товар подробно*/
.tiny_products {
list-style: none;
display: block;
}
.tiny_products .product{
width: 210px;
margin-right: 10px;
margin-bottom: 30px;
display: -moz-inline-box;
display: inline-block;
*zoom: 1;
*display: inline;
word-spacing: normal;
vertical-align: top;
}
.tiny_products .product .image {
vertical-align: middle;
text-align: center;
width: 200px;
height: 200px;
line-height: 200px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 5px;
margin-bottom: 10px;
}
.tiny_products .product .image img{
vertical-align: middle;
max-width: 200px;
}
.tiny_products .product h3 {
font-size: 14px;
margin-bottom: 10px;
font-weight: normal;
}
.tiny_products .product h3.featured{
background: url('../images/star.png') no-repeat left middle;
padding-left: 20px
}
.products {
list-style: none;
display: block;
}
.products .product{
width: 100%;
display: block;
clear: both;
overflow: hidden;
}
.products .product .image {
text-align: center;
width: 200px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
float: left;
padding: 5px;
margin: 4px 0px 20px 0px;
}
.products .product .image img{
max-width: 200px;
}
.products .product .product_info {
float: right;
width: 450px;
margin-bottom: 40px;
}
.products .product h3 {
font-size: 20px;
margin-bottom: 5px;
font-weight: normal;
}
.products .product h3.featured{
background: url('../images/star.png') no-repeat left middle;
padding-left: 20px
}
.products .product .annotation {
font-size: 12px;
color: #505050;;
margin-bottom: 5px;
}
/* Кнопка */
.button {
float: left;
clear: left;
cursor: pointer;
}
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #cccccc;
display:inline-block;
color:#555555;
font-family:arial;
font-size:14px;
font-weight:bold;
padding:6px 20px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.button:active {
position:relative;
top:1px;
}
/* @group Фильтр по свойствам */
#features {
background-color: #f0f0f0;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
margin-top: 20px;
margin-bottom: 10px;
width: 100%;
}
#features .feature_name{
padding: 7px;
}
#features .feature_values{
padding: 7px;
}
#features a {
padding-right: 6px;
white-space: nowrap;
}
#features a.selected {
//background-color: #4a4a4a;
color: #505050;
text-decoration: none;
}
/* @end — Фильтр по свойствам*/
/* @group Сортировка */
.sort {
color: #505050;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: normal;
font-style: normal;
}
.sort a{
margin-right: 5px;
}
.sort .selected {
color: #505050;
text-decoration: none;
margin-right: 5px;
}
/* @end */
/* @group Постраничная навигация */
.pagination {
margin-top: 5px;
margin-bottom: 5px;
font-size: 12px;
overflow: hidden;
}
.pagination a {
display: block;
float: left;
background-color: #fffeff;
margin-right: 5px;
margin-bottom: 5px;
padding: 7px 4px;
min-width: 22px;
text-align: center;
border: 1px solid #d7d7d7;
text-decoration: none;
}
.pagination a.selected:hover,
.pagination a.selected {
background-color: #18a5ff;
color: #ffffff;
border-color: #008fe9;
}
.pagination a:hover {
background-color: #f8f8f8;
}
.pagination a.next_page_link, .pagination a.prev_page_link{
border: none;
background: none;
}
/* @end */
/* @group Просмотренные товары */
#browsed_products{
margin-bottom: 20px;
overflow: hidden;
}
#browsed_products li{
display: block;
float: left;
overflow: hidden;
border: 1px solid #e0e0e0;
background-color: #ffffff;
margin: 0 7px 7px 0;
width: 50px;
height: 50px;
}
#browsed_products li a{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 50px;
height: 50px;
}
/* @end — Просмотренные товары */
/* @group Формы */
input[type="text"],
input[type="password"]
{
width: 100%;
font-size: 18px;
}
.form
{
width:400px;
margin-bottom: 20px;
}
.form textarea
{
width:100%;
height:100px;
font-size: 18px;
}
.form label {
display:block;
font-size: 14px;
}
.form input[type="text"]{
display:block;
margin-bottom: 10px;
}
/* @group Комментарии */
.comment_list {
margin-top: 15px;
list-style: none;
}
.comment_list li {
padding-bottom: 15px;
}
.comment_header {
font-size: 18px;
}
.comment_header i {
font-weight: normal;
font-style: normal;
color: #878787;
font-size: 13px;
}
/* @end — Комментарии*/
/* @group Форма отправки комментария */
.comment_form {
background-color: #f3f3f3;
border: 1px solid #e0e0e0;
padding: 20px;
margin-top: 20px;
width: 90%;
overflow: hidden;
}
.comment_form h2 {
margin-bottom: 0px;
}
.comment_form .comment_textarea {
width: 100%;
height: 100px;
font-size: 12px;
}
.comment_form label {
display: block;
float: left;
width: 100px;
font-size: 18px;
margin-top: 15px;
}
.comment_form .input_name {
font-size: 16px;
width: 250px;
margin-top: 15px;
}
.comment_form .input_captcha {
float: left;
width: 150px;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-top: 15px;
height: 36px;
}
.comment_form .captcha {
float: left;
display: block;
margin-top: 15px;
margin-right: 10px;
}
.comment_form .button,
.feedback_form .button,
.register_form .button,
.login_form .button{
float: right;
display: block;
margin-top: 10px;
margin-right: 0px;
}
/* @end — Форма отправки комментария */
/* @group Форма отправки обратной связи */
.feedback_form {
background-color: #f3f3f3;
border: 1px solid #e0e0e0;
padding: 20px;
margin-top: 20px;
width: 90%;
overflow: hidden;
}
.feedback_form .input_captcha {
float: left;
width: 150px;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-top: 15px;
height: 36px;
}
.feedback_form .captcha {
float: left;
display: block;
margin-top: 15px;
margin-right: 10px;
}
.feedback_form .button_send {
font-size: 18px;
float: right;
margin-top: 25px;
}
/* @end — Форма отправки комментария */
/* @group Корзина */
#purchases tr{
border-top: 1px solid #d5d5d5;
height: 70px;
}
#purchases th{
vertical-align: top;
padding-top: 10px;
font-size: 18px;
font-weight: normal;
}
#purchases .image{
width: 50px;
text-align: center;
}
#purchases .image a{
border: 1px solid #e0e0e0;
background-color: #ffffff;
margin: 0 7px 7px 0;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 50px;
height: 50px;
}
#purchases .name{
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
#purchases td.name{
font-size: 14px;
}
#purchases td .download_attachment{
white-space: nowrap;
color: #3b8500;
padding: 5px 10px 7px 10px;
border-bottom-color: 1px dotted green;
background-color: #ccff72;
line-height: 30px;
}
#purchases .price{
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
text-align: right;
}
#purchases td.price{
font-size: 14px;
}
#purchases .remove{
padding-left: 15px;
text-align: right;
}
#purchases .amount{
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
}
#purchases .amount select{
font-size:12px;
}
ul#deliveries{
margin-top: 20px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 20px 20px 0 20px;
list-style: none;
}
ul#deliveries li{
margin-bottom: 20px;
}
ul#deliveries li div.checkbox{
float: left;
}
ul#deliveries li h3, ul#deliveries li .description{
display: block;
margin-left: 25px;
}
/* @end */
/* @group Кабинет */
#orders_history
{
list-style: none;
}
#orders_history li
{
margin-bottom: 10px;
}
#orders_history li a
{
font-size: 16px;
}
/* @end — Кабинет */
/* @group Детали заказа */
table.order_info
{
margin-right: 20px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
table.order_info td
{
padding: 10px;
border: 1px dotted #e0e0e0;
font-size: 14px;
}
.checkout_button
{
padding: 10px 20px 10px 20px;
border: 1px solid #51a400;
background-color: #d3ffa9;
color: #2e5e00;
font-size: 14px;
}
/* @end */
/* Сообщение с ошибкой */
.message_error{
clear: both;
height: 18px;
padding: 10px 20px;
margin-bottom: 15px;
margin-top: 10px;
overflow: hidden;
color: red;
background-color: #ffcaca;
border: 1px dotted #ff4545;
}
.nav2 {
text-align: center;
background-color: #00c6f1;
text-shadow: 0 1px 0 #0282c4;
-moz-box-shadow: inset 1px 1px 0 #80e6f9;
-ms-box-shadow: inset 1px 1px 0 #80e6f9;
-webkit-box-shadow: inset 1px 1px 0 #80e6f9;
box-shadow: inset 1px 1px 0 #80e6f9;
filter: progid :DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#6891e7,EndColorStr=#304ea6);
background-image: -moz-linear-gradient(top,#00cdf3 0,#00b3ed 100%);
background-image: -ms-linear-gradient(top,#00cdf3 0,#00b3ed 100%);
background-image: -o-linear-gradient(top,#00cdf3 0,#00b3ed 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#00cdf3),color-stop(100%,#00b3ed));
background-image: -webkit-linear-gradient(top,#00cdf3 0,#00b3ed 100%);
background-image: linear-gradient(top bottom,#00cdf3 0,#00b3ed 100%);
margin: 1px auto 4px;
padding: 11px;
border: 1px solid #1891c2;
outline: 0;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
.nav2 li {
padding: 5px 3px;
position: relative;
float: left;
right: 50%;
border-right: 1px solid #80E6F9;
border-left: 1px solid #04A3CB;
}
#b {
position: relative;
float: left;
left: 50%;
}
.nav2 .nobr {
border-right: none;
}
.nav2 .nobl {
border-left: none;
}
.topmenulink {
color: white;
font: bold 16px Arial;
text-decoration: none;
padding: 15px 6px;
}
.topmenulink:hover, .active {
padding-top: 16px;
background: url(../images/menu_arrow.png) no-repeat center 0;
border-bottom: 3px solid #0377a3;
color: #ffff00;
}
.active2, .active2:hover {
background: #009cc6;
text-shadow: 0 1px 0 #666;
border-radius: 3px;
box-shadow: inset 0px 1px 0 #80e6f9;
border-width: 1px;
border-style: solid;
border-bottom-color: #1282af;
border-left-color: #1282af;
border-right-color: #1282af;
border-top-color: #1891c2;
padding: 8px 5px;
color: #fff;
}
/* @end */
/* ФИЛЬТРЫ */
.filter{
}
.filter .block{
clear: both;
margin: 0 0 10px 0;
}
.filter .block h4{
font-size: 14px;
color: rgb(0, 0, 0);
border-bottom: 1px dotted rgb(204, 204, 204);
padding: 5px 10px;
margin-bottom: 10px;
}
.filter .block.range_slider{
}
.filter .block.range_slider{
}
.filter .block.range_slider div.price_inputs{
padding: 0px 10px;
margin-bottom: 20px;
}
.filter .block.range_slider div.price_inputs label{
}
.filter .block.range_slider div.price_inputs input.imin{
border: 1px solid rgb(196, 196, 196);
padding: 5px;
width: 40px;
margin: 0px 5px;
border-radius: 3px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
}
.filter .block.range_slider div.price_inputs input.imax{
border: 1px solid rgb(196, 196, 196);
padding: 5px;
width: 40px;
margin: 0px 5px;
border-radius: 3px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
}
.filter .block.range_slider div.price_inputs span.saperate{
margin: 0 20px;
}
.filter .block ul{
clear: both;
margin: 0 5px;
}
.filter .block ul li{
clear: both;
}
.filter .block ul li input[type=checkbox]{
float: left;
}
.filter .block ul li label{
display: block;
margin-left: 20px;
}
.filter p#clearAll a{
/* display: block; */
text-decoration: none;
border-bottom: 1px dashed;
}
/* Ширина слайдера */
.filter .block >.slider {
width: 250px;
margin: 0 auto 10px;
}
/* Контейнер слайдера */
.ui-slider {
position: relative;
}
/* Ползунок */
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 11px; /* Задаем нужную ширину */
height: 11px; /* и высоту */
background: url(../images/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
cursor: pointer
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
overflow: hidden;
box-shadow: inset 6px 0 0 #ffa95a, inset -7px 0 0 #ffa95a;
}
/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */
.ui-slider-horizontal {
height: 5px; /* задаем высоту согласно дизайна */
}
/* позиционируем ползунки */
.ui-slider-horizontal .ui-slider-handle {
top: -4px;
margin-left: -6px;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
/* оформление полосы по которой ходит ползунок */
.ui-widget-content {
/* border: 1px solid #D4D4D4; */
background: #d8d8d8;
}
/* оформление активного участка (между двумя ползунками) */
.ui-widget-header {
border: 1px solid #D4D4D4;
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #FF890B), color-stop(1, #FC6B03) ); background-image: -o-linear-gradient(bottom, #FF890B 0%, #FC6B03 100%); background-image: -moz-linear-gradient(bottom, #FF890B 0%, #FC6B03 100%); background-image: -webkit-linear-gradient(bottom, #FF890B 0%, #FC6B03 100%); background-image: -ms-linear-gradient(bottom, #FF890B 0%, #FC6B03 100%); background-image: linear-gradient(to bottom, #FF890B 0%, #FC6B03 100%);
}
/* скругление для полосы слайдера */
.ui-corner-all {
}