html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Конец сброса*/
/*================================*/
body {
height: 100%;
position:relative;
/*background: #eeeeee;*/
/*background: url(pep4.png);
background-size: 100%;
background-attachment: fixed;*/
margin: 0 auto;
}
html{
height: 100%;
margin: 0 auto;
}
#hea{
background: #ccf0f8;
padding-bottom: 0;
}
.hea_l{
display: inline-block;
width: 40%;
text-align: left;
}
.hea_c{
display: inline-block;
width: 39%;
text-align: center;
}
.hea_r{
display: inline-block;
width: 20%;
float: right;
text-align: left;
}
#prog{
position: absolute;
color: #034e83;
background: #eeeeee;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 40px auto;
width: 460px;
height: 26px;
font-size : 18px;
border-radius: 10px 10px 10px 10px;
border-top: 1px solid #173;
}
.wrap{
position:relative;
min-height: 50px;
}
.page{
position:relative;
min-height: 100%;
/*background: url(pep4.png) no-repeat;
background-size: 100%;
background-attachment: fixed;*/
}
/* ==================== КОНТЕНТ: слайдер ==================== */
#slider {
width: 600px; /* ширина слайда + боковые отступы личных украшательств */
height: auto;
background: #ddd;
border: #f8f9ed 10px solid;
margin: 0px auto;
padding: 1px;
text-align: left;
}
#slider .privet{
float : right;
text-align: center;
font-size: 10pt;
color: #05056a;
width: 26%;
}
/* ==================== КОНТЕНТ: спойлер под слайдером ==================== */
#slider .more {
display: none; /* контент спойлера изначально скрыт */
float:left;
width: 64%;
background: #eee; /* украшательство */
border: #bbb 1px solid; /* украшательство */
margin-top: 5px; /* украшательство */
padding: 10px; /* украшательство */
}
/* ==================== КОНТЕНТ: ссылки спойлера ==================== */
#slider .group .more1{
/*position: absolute; /* панель будем позиционировать */
/*right: 50%; /* двигаем на центр и оталкивается справа налево */
/*margin-right: 240px; /* отодвигаем влево за слайдер (половина его ширины) */
/*overflow: hidden;*/
display: none; /* контент спойлера изначально скрыт */
float : right;
text-align: center;
width: 26%;
background: #fff; /* украшательство */
border: #bbb 1px solid; /* украшательство */
margin-top: 5px; /* украшательство */
padding: 10px; /* украшательство */
border-radius: 20px 0 30px 0;
}
#slider .imgKey {
cursor: pointer;
font-size: 10pt;
color: #093;
}
#slider .imgKey:hover {
text-decoration: none; /* украшательство */
color: #403;
}
/*=================*/
#slider:checked ~ .privet {
color: yellow;
}
/* ======================Сбрасываем float=====================================*/
.group::before,
.group::after {
content: "";
display: table;
}
.group::after {
clear: both;
}
.group {
clear: both;
8zoom: 1;
}
/*====================================================================*/
#system{
/*
background: #e7ecef;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px auto;
width: 460px;
height: 20px;
font-size : 16px;
border-radius: 10px 10px 10px 10px;*/
width: 460px;
text-align: center;
background: #ddd;
border: #fff 10px solid;
margin: 5px auto;
padding: 10px;
/*ext-align: left;*/
}
.yesImS{
/*position: absolute;*/
color: #7c051b;
background: #e7ecef;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px auto;
padding-top: 5px;
padding-bottom: 5px;
width: 460px;
/*height: 20px;*/
font-size : 16px;
border-radius: 10px 10px 10px 10px;
}
#load{
/*color: #034e83;
background: #e7ecef;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px auto;
width: 460px;
height: 20px;
font-size : 16px;
border-radius: 10px 10px 10px 10px;
*/
width: 580px;
text-align: center;
background: #ccf0f8;/* #f6b89d;*/
/*border: #fff 10px solid;*/
border-radius: 10px 10px 10px 10px;
border-color: red;
margin: 1px auto; /* украшательство */
padding: 10px;
}
.yesImL{
/*position: absolute;*/
color: #7c051b;
background: #f6b89d;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px auto;
padding-top: 5px;
padding-bottom: 5px;
width: 560px;
/*height: 20px;*/
font-size : 16px;
border-radius: 10px 10px 10px 10px;
}
img [name^=pic]{
height: 74;
width: 32;
border: 0;
}
.textl{
width: 70%;
position: relative;
bottom: 4px;
}
.imgl{
width: 30%;
position: relative;
bottom: -6px;
}
#sale{
width: 460px;
text-align: center;
font-size: 18px;
background: #c8edc8;
color: #173;
border-radius: 10px;
border-top: 1px solid #173;
margin: 1px auto;
padding: 10px;
}
.yesIm_s{
/*position: absolute;*/
color: #0e360e;
background: #c8edc8;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px auto;
padding-top: 5px;
padding-bottom: 5px;
width: 460px;
/*height: 20px;*/
font-size : 15px;
border-radius: 10px 10px 10px 10px;
}
#foot{
position: absolute;
/*text-align: center;*/
/*flex: 0 0 auto;*/
/*display: table-row;*/
/*display: block;*/
height: 20px;
width: 96%;
background: #ddd;
border: #fff 10px solid;
margin: 1px auto;
padding: 5px;
bottom: 0;
left:0;
right:0;
/*margin-top: -20px;*/
}
.foot_l{
display: inline-block;
width: 33%;
text-align: left;
}
.foot_c{
display: inline-block;
width: 33%;
text-align: center;
}
.foot_r{
display: inline-block;
width: 33%;
float: right;
text-align: right;
}
/* ==================== НАВИГАТОРЫ: теневые флажки снимки==================== */
input[name^="shadow-"] {
display: none; /* вообще не показываем */
}
div[class^="yesIm"]{
display: none;
}
/* ==================== НАВИГАТОРЫ: кнопка ==================== */
.toggle {
cursor: pointer;
background: #ccc;
display: block;
text-align: center;
margin: 1px 5px 1px 15px;
line-height: 20px;
height: 20px;
width: 360px;
font-size : 12px;
}
.labelSlide{
/*cursor: pointer; /* украшательство */
background: #ccc; /* украшательство */
display: block; /* украшательство */
text-align: center; /* украшательство */
margin: 5px 5px 0px 5px; /* украшательство */
margin-left: 15px; /* украшательство */
line-height: 30px; /* украшательство */
height: 30px; /* украшательство */
width: 360px; /* украшательство */
font-size : 14px; /* украшательство */
}
/* ==================== НАВИГАТОРЫ: переключатель ==================== */
.toggle{
cursor: pointer; /* украшательство */
}
.toggle:after {
content: "Развернуть описание"; /* украшательство */
cursor: pointer; /* украшательство */
color: #08f; /* украшательство */
font-size: 9pt; /* украшательство */
text-decoration: underline; /* украшательство */
}
.toggle:hover:after {
text-decoration: none; /* украшательство */
}
/* включен */
input[name^="shadow-"]:checked + .toggle:after {
content: 'Свернуть описание'; /* украшательство */
}
/* ==================== НАВИГАТОРЫ: переключатель требования==================== */
.toggles{
cursor: pointer; /* украшательство */
}
.toggles:after {
content: "Показать требование"; /* украшательство */
cursor: pointer; /* украшательство */
color: #08f; /* украшательство */
font-size: 9pt; /* украшательство */
text-decoration: underline; /* украшательство */
}
.toggles:hover:after {
text-decoration: none; /* украшательство */
}
/* включен */
input[name^="shadow-"]:checked + .toggles:after {
content: 'Скрыть требование';
}
/* ==================== НАВИГАТОРЫ: переключатель load==================== */
.togglel{
cursor: pointer;
}
.togglel:after {
content: "Показать загрузки";
cursor: pointer;
color: #08f;
font-size: 9pt;
text-decoration: underline;
}
.togglel:hover:after {
text-decoration: none;
}
/* включен */
input[name^="shadow-"]:checked + .togglel:after {
content: 'Скрыть загрузки';
}
/* ==================== НАВИГАТОРЫ: переключатель условия==================== */
.toggle_s{
cursor: pointer;
}
.toggle_s:after {
content: "Показать условия";
cursor: pointer;
color: #08f;
font-size: 10pt;
text-decoration: underline;
}
.toggle_s:hover:after {
text-decoration: none;
}
/* включен */
input[name^="shadow-"]:checked + .toggle_s:after {
content: 'Скрыть условия';
}
/* ==================== КОНТЕНТ: img-z-index спойлера ==================== */
div[class^='yesImZ']{
z-index:1;
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 20%;
border: 1px dashed gray;
/*visibility: hidden;*/
color: black;
text-decoration: none;
}
div[class^='yesImIz']{
z-index:1;
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 57%;
border: 1px dashed gray;
/*visibility: hidden;*/
color: black;
text-decoration: none;
}
/* ==================== ОБРАБОТКИ ЧАСТНЫЕ: события спойлера 1 ==================== */
/* спойлер раскрыт - показываем контент спойлера */
input[name^="shadow-"]:checked + .SpoilerKey1 ~ .group .SpoilerBox1{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey1_1 ~ .yesIm1_1{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey1_2 ~ .yesIm1_2{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey1_3 ~ .yesIm1_3{
display: block !important;
}
/*----------------*/
input[name^="shadow-"]:checked + .SpoilerKey2 ~ .group .SpoilerBox2 {
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey2_1 ~ .yesIm2_1{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey2_2 ~ .yesImIz_2_2{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey2_3 ~ .yesIm2_3{
display: block !important;
}
/*----------------*/
input[name^="shadow-"]:checked + .SpoilerKey5 ~ .group .SpoilerBox5 {
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey5_1 ~ .yesImIz_5_1{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey5_2 ~ .yesImZ5_2{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey5_3 ~ .yesImIz_5_3{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey5_4 ~ .yesImIz_5_4{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey5_5 ~ .yesImIz_5_5{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey5_6 ~ .yesImIz_5_6{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey5_7 ~ .yesIm_5_7{
display: block !important;
}
/*----------------*/
input[name^="shadow-"]:checked + .SpoilerKey3 ~ .group .SpoilerBox3 {
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey3_1 ~ .yesImZ3_1{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey3_2 ~ .yesImZ3_2{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey3_3 ~ .yesImZ3_3{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey3_4 ~ .yesImZ3_4{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey3_5 ~ .yesImZ3_5{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey3_6 ~ .yesImZ3_6{
display: block !important;
}
/*----------------*/
input[name^="shadow-"]:checked + .SpoilerKey4 ~ .group .SpoilerBox4 {
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_1 ~ .yesImZ4_1{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_2 ~ .yesImZ4_2{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_3 ~ .yesImZ4_3{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_4 ~ .yesImZ4_4{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_5 ~ .yesImZ4_5{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_6 ~ .yesImZ4_6{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_7 ~ .yesImZ4_7{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_8 ~ .yesImZ4_8{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_9 ~ .yesImZ4_9{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_10 ~ .yesImZ4_10{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey4_11 ~ .yesImZ4_11{
display: block !important;
}
/*----------------*/
input[name^="shadow-"]:checked + .SpoilerKey6 ~ .group .SpoilerBox6 {
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_1 ~ .yesImZ6_1{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_2 ~ .yesImZ6_2{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_3 ~ .yesImZ6_3{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_4 ~ .yesImZ6_4{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_5 ~ .yesImZ6_5{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_6 ~ .yesImZ6_6{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_7 ~ .yesImZ6_7{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_8 ~ .yesImZ6_8{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_9 ~ .yesImZ6_9{
display: block !important;
}
input[name^="shadow-"]:checked + .ImgKey6_10 ~ .yesImZ6_10{
display: block !important;
}
/*----------------*/
input[name^="shadow-"]:checked + .Sys ~ .yesImS {
display: block !important;
}
/*----------------*/
input[name^="shadow-"]:checked + .Load ~ .yesImL {
display: block !important;
}
/*----------------*/
input[name^="shadow-"]:checked + .Sale ~ .yesIm_s {
display: block !important;
}