html, body { margin:0; padding:0; -webkit-text-size-adjust:none; }
body {
background-image:url('../images/bg.png');
background-color:#e8e8e8;
font-family:Helvetica, Arial, sans-serif;
}
#main {
width:100%;
}
/* ================================= 1.| Свет ===== */
#light {
width:640px;
height:524px;
background:url('../images/light.png') no-repeat;
margin-left:-336px;
left:50%;
position:absolute;
top:-200px;
z-index:-2;
}
/* ================================= 2.| Полоса сверху ===== */
#polosa {
background:#aa0000;
height:4px;
}
/* ================================= 3.| Надзаголовок ===== */
#nadzagolovok {
color:#eee;
font-size:15px;
padding:10px;
text-align:center;
}
/* ================================= 4.| Заголовок ===== */
#zagolovok{
color:#eee;
width:900px;
font-size:37px;
font-weight:bold;
text-align:center;
text-shadow:2px 2px 2px #000;
margin:0px auto 20px auto;
}
/* ================================= 5.| Слайдер ===== */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus { outline:none; }
.slides,
.flex-control-nav,
.flex-direction-nav {
margin:0;
padding:0;
list-style:none;
}
.flexslider a img { outline:none; border:none; }
.flexslider {
margin:0 20px;
padding:0;
}
.flexslider .slides > li {
display:none;
-webkit-backface-visibility:hidden;
}
.flexslider .slides img {
width:100%;
display:block;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.slides:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides { display:block; }
* html .slides { height:1%; }
.flexslider {
position:relative;
zoom:1;
padding:10px;
background:#aaa;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0, .2);
box-shadow:0px 1px 1px rgba(0,0,0, .2);
}
.flex-container {
min-width:150px;
max-width:1000px;
margin:0 auto;
}
.flexslider .slides { zoom:1; }
.flex-direction-nav a {
background: rgb(238,238,238); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-8 */
display:block;
position:absolute;
margin:-17px 0 0 0;
width:35px;
height:35px;
top:50%;
cursor:pointer;
text-indent:-9999px;
z-index:2;
}
.flex-direction-nav a:before {
display:block;
position:absolute;
content:'';
width:9px;
height:13px;
top:11px;
left:11px;
background:url(../images/arrows.png) no-repeat;
}
.flex-direction-nav a:after {
display:block;
position:absolute;
content:'';
width:0;
height:0;
top:35px;
}
.flex-direction-nav .flex-next {
right:-5px;
-webkit-border-radius:3px 0 0 3px;
-moz-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
}
.flex-direction-nav .flex-prev {
left:-5px;
-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
}
.flex-direction-nav .flex-next:before { background-position:-9px 0; left:15px; }
.flex-direction-nav .flex-prev:before { background-position:0 0; }
.flex-direction-nav .flex-next:after {
right:0;
border-bottom:5px solid transparent;
border-left:5px solid #31611e;
}
.flex-direction-nav .flex-prev:after {
left:0;
border-bottom:5px solid transparent;
border-right:5px solid #31611e;
}
.flexslider .flex-control-nav {
position:absolute;
width:100%;
bottom:-40px;
text-align:center;
margin:0 0 0 -10px;
}
.flex-control-nav li {
display:inline-block;
zoom:1;
}
.flex-control-paging li a {
display:block;
cursor:pointer;
text-indent:-9999px;
width:15px;
height:15px;
margin:0 3px;
background-color:#b6b6b6 \9;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
-webkit-box-shadow:inset 0 0 0 2px #b6b6b6;
-moz-box-shadow:inset 0 0 0 2px #b6b6b6;
box-shadow:inset 0 0 0 2px #b6b6b6;
}
.flex-control-paging li a.flex-active {
background: rgb(255,48,25); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,48,25,1) 0%, rgba(187,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(187,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(187,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(187,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(187,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(187,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#bb0000',GradientType=0 ); /* IE6-8 */
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
.flexslider .slides p {
display:block;
position:absolute;
width:100%;
left:0;
bottom:0;
padding:5px 0;
margin:0;
font-family:Helvetica, Arial, sans-serif;
text-align:center;
font-size:15px;
line-height:20px;
color:white;
background-color:#222222;
background:rgba(0,0,0, .7);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.clearfix:after{
clear:both;
content:' ';
display:block;
font-size:0;
line-height:0;
visibility:hidden;
width:0;
height:0
}
/* ================================= 6.| ФОРМА (подписки) ===== */
#optin-box {
background: rgb(76,76,76); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzJiMmIyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkxJSIgc3RvcC1jb2xvcj0iIzFjMWMxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(43,43,43,1) 37%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(37%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(43,43,43,1) 37%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(43,43,43,1) 37%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(43,43,43,1) 37%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(43,43,43,1) 37%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-8 */
width:960px;
margin:70px auto 0 auto;
text-align:center;
border-top:3px solid #aaa;
border-bottom:3px solid #aaa;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
overflow:auto;
}
#optin-box .call1 {
font-size:27px;
color:#fff;
text-align:center;
font-weight:bold;
text-shadow:1px 1px #000;
padding:15px 0 10px 0;
}
#optin-box .call2 {
font-size:15px;
color:#fff;
text-align:center;
text-shadow:1px 1px #000;
padding:0 20px 15px 20px;
}
#optin-box input {
-webkit-border-radius:8px;
-khtml-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin:5px 0 20px 20px;
}
#optin-box input[type="text"] {
color:#333;
border:2px solid #aaa;
font-size:18px;
padding:10px 10px;
width:30%;
float:left;
}
#optin-box input#name { background:#fff url(../images/name.png) no-repeat center right; }
#optin-box input#email { background:#fff url(../images/email.png) no-repeat center right }
#optin-box input[type="submit"] {
background:#cc0000;
border:2px solid #aaa;
color:#fff;
cursor:pointer;
font-size:18px;
font-weight:bold;
text-decoration:none;
padding:10px 25px;
float:left;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
#optin-box input[type="submit"]:hover { background:#ff0000; color:#fff; border:2px solid #fff; }
#optin-box .lock { width:55px; height:55px; }
#optin-box #confident { display:none; }
/* ================================= 7.| Кнопулечки ===== */
#social {
width:405px;
margin:40px auto 20px auto;
}
.social_headline {
text-align:center;
color:#777;
padding:0 0 10px 0;
}
.pluso {
margin:0 0 0 20px;
}
/* ================================= 8.| Комментарии ===== */
#d_comments_area {
width:940px;
margin:0 auto;
border:10px solid rgba(0, 0, 0, 0.02);
-webkit-border-radius:8px;
-khtml-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-webkit-box-shadow:0em 0em 2em rgba(0,0,0,0.8);
-moz-box-shadow:0em 0em 2em rgba(0,0,0,0.8);
box-shadow:0em 0em 2em rgba(0,0,0,0.8);
}
.d_comments {
padding:20px 10px;
background:#222222;
}
/* ================================= 9.| Подвал сайта ===== */
#footer {
width:90%;
font-size:13px;
color:#aaa;
text-align:center;
border-top:1px dashed #444;
margin:0 auto 20px auto;
padding:15px 0 0 0;
text-shadow:1px 1px #000;
}
#footer a { color:#aaa; text-decoration:none; margin:0 5px;}
#footer a:hover { color:#fff; }
#footer p { color:#aaa; }
#footer p a { color:#555; font-size:10px; }
#footer p a:hover { color:#fff; }
/* 1024
*********************************************************************/
@media screen and (max-width:1024px) {
#nadzagolovok{
width:90%;
margin:0 auto;
}
#zagolovok{
width:90%;
font-size:35px;
}
#optin-box {
width:90%;
}
#optin-box input {
margin:5px 0 20px 0;
}
#optin-box input[type="text"] {
font-size:18px;
padding:10px 10px;
width:40%;
float:none;
}
#optin-box input#email { margin:0 0 0 10px; }
#optin-box input[type="submit"] {
padding:10px 25px;
margin:0;
float:none;
}
#optin-box .lock { display:none;}
#optin-box #confident { display:block; color:#555; margin:15px 0; text-shadow:1px 1px 1px rgba(0,0,0,0.4); }
#d_comments {
width:90%;
}
#footer {
width:90%;
}
}
/* 768
*********************************************************************/
@media screen and (max-width:768px) {
#light {
width:90%;
height:300px;
margin-left:0;
left:0%;
position:absolute;
top:0px;
z-index:-2;
}
#optin-box input {
margin:5px 0 20px 0;
}
}
/* 640
*********************************************************************/
@media screen and (max-width:640px) {
#zagolovok{
font-size:30px;
}
#light {
width:100%;
height:300px;
position:absolute;
top:-100px;
z-index:-2;
}
}
/* 568 iPhone 5 горизонтальное положение
*********************************************************************/
@media screen and (max-width:568px) {
#nadzagolovok{
width:95%;
margin:0 auto;
}
#zagolovok{
width:95%;
font-size:1.8em;
}
}
/* 480 iPhone 4 горизонтальное положение
*********************************************************************/
@media screen and (max-width:480px) {
#zagolovok{
width:95%;
font-size:1.5em;
}
#nadzagolovok{
font-size:0.79em;
}
.flexslider .slides p {
display:none;
}
.flexslider {
padding:0.3em;
margin:0 0.7em;
}
#optin-box {
width:95%;
padding:0;
}
#optin-box input[type="text"] {
font-size:0.9em;
}
}
/* 320 iPhone 4-5 вертикальное положение
*********************************************************************/
@media screen and (max-width:320px) {
#nadzagolovok{
width:93%;
margin:0 auto;
font-size:0.8em;
padding:0:
}
#zagolovok{
width:95%;
font-size:1.2em;
margin:0 auto 20px auto;
padding:0:
}
#social {
width:320px;
margin:30px 0 20px 0;
}
.pluso {
margin:0 0 0 20px;
}
.pluso span {
display:none;
}
#optin-box .call1 {
font-size:1.4em;
padding:20px 10px 5px 10px;
text-shadow:none;
}
#optin-box .call2 {
font-size:0.875em;
padding:5px 10px 5px 10px;
text-shadow:none;
}
#optin-box input {
margin:10px 0 15px 0;
}
#optin-box input[type="text"] {
font-size:1em;
width:80%;
float:none;
}
#optin-box input#email { margin-left:0; }
#optin-box input[type="submit"] {
padding:10px 25px;
margin:15px 0 10px 0;
float:none;
}
#optin-box .lock { display:none;}
#optin-box #confident { color:#aaaaaa; margin:5px 0 10px 0; text-shadow:none; }
#d_comments {
display:none;
}
}
