*{margin:0;padding:0;}
html{height:100%;}
* html body{height:100%;}
body{min-height:100%;position:relative;}

body {
position: relative;
width:101%
font-size:100.01%;
margin: 0;
padding: 0;
height: 100%;
height: auto !important;
background-color: #ffeada;
}

.d1 h1 {
  text-align: center;
}

.d1 span {
  background: white;
  padding: 0 20px;
}

.mobile-menu {display: none;}

#logo {
background: #990000;
height: auto;
width: auto;

}
#logo a {
position: relative;  
color: white;
text-decoration: none; 
font-size: 14px;
text-transform: uppercase;
}
#logo ul { font-size: 0;}

#logo ul li {
line-height: 20px;
  margin: 10px;
}
ul.menu li {display: inline;}

#podmenu {
background: #990000;
height: auto;
width: 70%;

}
#podmenu a {
position: relative;  
color: white;
text-decoration: none; 
font-size: 14px;
text-transform: uppercase;
}
#podmenu ul {
font-size: 0;
list-style-type: upper-alpha; 
}

#podmenu ul li {
line-height: 20px;
margin: 10px;
}
ul.podmenu li {
display: inline;
}
#article-body #podmenu a {
color: #FFF;  
}  
#article-body, #article-body-dir {
position:relative; 
float: none;
margin-left: 14%;
width: 74%;
right: 0;
background-color: white;  
}

#article-body p, ol li, ul li 
{
max-width: 1100px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;  
color: #111;
text-align: justify;
line-height: 30px;
text-indent: 0px;
margin: 2% 2% 0 15%;
}
#article-body ol li, ul li 
{
margin: 2% 15% 0 20%;
list-style-type: none;  
}
#article-body a 
{
margin: text-decoration: none;
color: #800000;
}
#article-body-dir p, ol li, ul li 
{
max-width: 1100px;
}

.wiki-spiski li {
line-height: normal;  
} 
.wiki-spiski a {
font-size: 14px;    
}  

#empty {
clear: both;
height: 200px;
}
#footer {
background: #FF4D4D;
width:100%;
bottom: 0px;
}
.outline {
    width: 100%;
    max-width: 1100px;
    height: auto;
    background: #800000;
    border-left: 6px double #FFF;
    border-right: 6px double #FFF;
    border-top:  6px double #FFF;
    border-bottom: 6px double #FFF;
}
.images {
margin-top: 15px;
}
.imagesleft {
margin: 15px;
float:left;
}
.imagesright {
margin: 15px;
float:right;
}
#article-body h1, #article-body-dir h1
{
color: #990000;
margin: 2% 15% 0 15%;
}
#article-body h2
{
    background: #990000;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #fff;
    text-align: left;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.5;
    margin: 2% 3% 0 10%;
  	
}

#article-body h3,h4,h5,h6
{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    color: #990000;
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
	margin: 2% 5%;
}

#footer_menu {
background: #990000;
text-align:center;
}


#keywords {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2vw;
    margin: 10px 0 10px 0; /* Внешний отступ всего блока с тизерами от контента страницы. Стоит сверху и снизу по 10px, а слева и справа 0px */
    padding: 10px 0px 15px 0px; /* Внутренний отступ внутри блока. Чтобы не сливались с краями рамки тизеры. */
	text-align: center; /* Выравнивание текста во всем блоке по центру */
}

#keywords img {
	height: 150px; /* Установили принудительно высоту картинки в 100px, на случай если у вас будут все разного размера */
  	width: 150px; /* Установили принудительно ширину картинки в 100px, на случай если у вас будут все разного размера */
	margin: 4px 0;
	padding: 2px 0 2px 0; /* Внутренний отступ картинки. Сделали сверху 5px, чтобы стало ровно по верхней границе с текстом (не было лесенки) */
    border: 4px solid #fff;
    outline: solid 1px #ddd;
}

#keywords a {
    text-align: center; /* Выравнивание текста во всем блоке по центру */
	vertical-align: middle; /* Данный параметр выравнивает все тизеры по верхнему краю. Пригодится в случае, если у вас какой-то текст будет больше на 1-2 строки, чем остальные */
    margin: 10px 0; /* Внешний отступ каждого тизера сверзу и снизу по 10px */
    font-size: 12px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #000;
}

#keywords_system img {
	height: 150px; /* Установили принудительно высоту картинки в 100px, на случай если у вас будут все разного размера */
  	width: 150px; /* Установили принудительно ширину картинки в 100px, на случай если у вас будут все разного размера */
	margin: 4px 0;
	padding: 2px 0 2px 0; /* Внутренний отступ картинки. Сделали сверху 5px, чтобы стало ровно по верхней границе с текстом (не было лесенки) */
    border: 4px solid #fff;
    outline: solid 1px #ddd;
}

#keywords_system a {
    text-align: center; /* Выравнивание текста во всем блоке по центру */
	vertical-align: middle; /* Данный параметр выравнивает все тизеры по верхнему краю. Пригодится в случае, если у вас какой-то текст будет больше на 1-2 строки, чем остальные */
    margin: 10px 0; /* Внешний отступ каждого тизера сверзу и снизу по 10px */
    font-size: 12px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #000;
}

.ie10 .keywords_system {  
display: block;
}

.ie10 .keywords {  
display: block;
}


div.comment-body
{
    background: #FFFAFA;
    border-left: 4px solid #FFDDDD;
    margin: 5px 0px 0px 0px;
    padding: 5px 0px 5px 0px;
}
.comment-body p
{
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: normal;
text-indent: 0px;
margin: 0px;
}
p.avtor
{
font-weight:bold;
margin: 0px;
text-align: right;
text-transform: capitalize;
}



#text-spisok ul {
padding: 0; /* Убираем поля */
}
#text-spisok li {
margin-left: 4%;
margin-right: 4%;
list-style-type: disc;
}

.letter { 
    background: #FFFAFA;
    border-left: 4px solid #FFDDDD;
    font-style: italic;
    margin: 0px;
    padding: 10px 40px 10px 40px;
}
 .bolder { 
color:#FF6666;
font-weight: bold;
}

/* Блоки для оформления текста */
.note
{
text-align: right;
}
.noteclassic, .notelove, .notewarning, .notetip, .notehelp {
width: auto;
padding: 10px 20px 10px 90px;
margin: 5% 0%;
/*IE min-height hack*/
min-height: 60px;
height:auto !important;
overflow:visible;
position:relative;
border-top: 0px solid #C10011;
border-bottom: 0px solid #CC81AA;
/*Set the position of the background image*/
background-position: 20px 50%;
background-repeat: no-repeat;
text-align: justify;
}
.noteclassic, .notelove, .notewarning, .notetip, .notehelp p {
margin 0 0 0 0;
}
.notetip {
background-image: url(/design/tip.png);
background-color: #FFF2EE;  
}
.notelove {
background-color: #FFF2EE;  
background-image: url(/design/love.png);
border: 0px solid #C10011;
border-right: 0px solid #CC81AA;
border-bottom: 0px solid #CC81AA;
}
.notewarning {
background-color: #FFF2EE;  
background-image: url(/design/warning.png);
}

.noteclassic {
background-color: #eee;
background-position: 20px 10%;
background-image: url(/design/classic.png);
border-top: 2px solid #333;
border-bottom: 2px solid #666;
}
.notehelp {
background-color: #eee;  
background-image: url(/design/help.png);
}



/* Форма и кнопка для добавки сообщений */

.comments-wrapper label {font-family:Georgia, Times, "Times New Roman", serif;}

.comments-wrapper .comment_enter {
  font-family:Georgia, Times, "Times New Roman", serif;
  font-size: 28px;
    margin:0;
    display: inline;
}
.comments-wrapper .required_notification {
  font-size: 11px;
    color:#d45252; 
    margin:5px 0 0 0; 
    display:inline;
    float:right;
}

.comments-wrapper ul {
    width:76%;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.comments-wrapper li{
    padding:14px;
    border-bottom:1px solid #eee;
    position:relative;
}
.comments-wrapper label {
    width:100px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.comments-wrapper input {
    height:20px; 
    width:220px; 
    padding:5px 8px;
}
.comments-wrapper textarea {
  padding:8px; 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.comments-wrapper input, .comments-wrapper textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
}
.comments-wrapper input:focus, .comments-wrapper textarea:focus {
    background: #fff;
    border:1px solid #555;
    box-shadow: 0 0 3px #aaa;
}

.comments-wrapper .button {
  height:40px;
  width: 250px;
  margin-left: 40%;
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#b1412f), to(#d76a40));
    background: -webkit-linear-gradient(top, #b1412f, #d76a40);
    background: -moz-linear-gradient(top, #b1412f, #d76a40);
    background: -ms-linear-gradient(top, #b1412f, #d76a40);
    background: -o-linear-gradient(top, #b1412f, #d76a40);
    background: linear-gradient(top, #b1412f, #d76a40);
    border: 1px solid #dd532f;;
    border-bottom: 1px solid #d1705b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #b97676 inset;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #5d170c;
}
.comments-wrapper .buttont:hover {
    opacity:.85;
    cursor: pointer; 
}
.comments-wrapper .button:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
     
}

#content {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2vw;
  margin: 10px 0 10px 0; /* Внешний отступ всего блока с тизерами от контента страницы. Стоит сверху и снизу по 10px, а слева и справа 0px */
  padding: 10px 0px 15px 0px; /* Внутренний отступ внутри блока. Чтобы не сливались с краями рамки тизеры. */
 text-align: center; /* Выравнивание текста во всем блоке по центру */
}


.title_image_dir {
height: 250px; 
background-size: cover; 
position: relative;  
}

.title_image_dir p {
color: #fff;  
background-color: #800000;
position: absolute;
bottom: 0px;  
text-align: center;
width: 100%;
}  


.ie10 .content {  
display: block;
}

div#goroskop_menu li a {
    background: #fff; 
    color: #990000;   
    font-size: 15px;
    line-height: 1.0;
}
div#goroskop_menu a {
    background: #990000; 
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 1.0;
    margin: 2% 3% 0 10%;
}

.hide {
    display: none;
}

/* Для мобильных */

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

#vk {display:none;}

#article-body .mobile-menu {
position: fixed;
z-index: 100;   
display: block; 
top:0;
margin: 0;
padding: 0;  
background: #990000;
height: 35px;  
width: 100%;
bottom: 0;
border-bottom: 1px solid white;  
}
#article-body .mobile-menu p {
margin: 0 0 0 5%;  
  }
#article-body .mobile-menu  a {
position: relative;  
color: white;
text-decoration: none; 
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
display: inline-block;
margin: 0;
}  
  
#logo {
z-index: 100; 
position: fixed;
display: block;  
padding: 0;
background: #990000;
margin: 0;
width: 100%;
height: auto;  
color: white;
}
#logo {display: none; margin-top: 35px;}

ul.menu li {
display: block;  
  }  
  
  
  .figure {
width: 95%; 
  display: block;
  margin-left: auto;
  margin-right: auto;  
} 

.outline {
    width: 90%;
    padding: 30px 10px;
}
  
#article-body, #article-body-dir {
position:relative; 
float: none;
width: 100%;
top: 10px;
margin: 0;
}
#article-body p, ol li, ul li  {
margin: 2% 10% 0 10%;
}
  
#article-body img {
max-width: 100%; height: auto;
}
.images {
margin-top: 15px;
}
.imagesleft {
margin: 15px;
float:left;
}
.imagesright {
margin: 15px;
float:right;
}  
#article-body h1 {
font-size: 24px;
margin: 0 5%; 
line-height: inherit;
  }
#footer_menu {display: none;}
.note {text-align: center;}
.noteclassic, .notelove, .notewarning, .notetip, .notehelp {
width: 99%;
padding: 0px;
margin: auto;
background-image: none;
}

.comments-wrapper {
width:100%;
} 
.comments-wrapper ul {
width:100%;
}
.comments-wrapper textarea {
    width:100%;

}
.comments-wrapper .button {
width:100%;
margin-left: 0; 
}  
  #content 
{
width: 100%;
margin: 0;  
display: grid;
grid-template-columns: 1fr 1fr;
}
  #content a
{
font-size: 14px;
}  
  #keywords
{
width: 100%;
margin: 0;  
display: grid;
grid-template-columns: 1fr 1fr;
} 
 
}