/* === Стили споллера внизу сайта  === */


/* === ====================================== Первый вариант (Чекбокс) ===============================================  === */    
.spoiler >  input + .box {
	display: none;
}
.spoiler >  input:checked + .box {
	display: block;
}
/* В штмл прописать
<div class="spoiler"><input type="checkbox" />
<div class="box">Текст сообщения в спойлере.</div>
</div>
*/


/* === ====================================== Второй вариант (Надпись) ===============================================  === */
 .spoiler_desc {
     background: #333333;
     padding: 0 5px;
     border-radius: 0 0 5px 5px;
     margin-top: 22px;
 }
 .spoiler_desc p {
     cursor: text;
     color: #FFFFFF;
 }
 .spoiler_close {
     display: none;
     width: 100%;
     height: 22px;
     background: #FFFF66;
     border-radius: 5px 5px 0 0;
     text-indent: 10px;
     cursor: default;
     border-bottom: 1px dotted #000000;
     position: absolute;
     top: 0px;
     left: 0;
 }
 .spoiler_close:hover { background: #F5FF27; }
 .spoiler_open:before {
     content: 'Открыть';
     border-bottom: 1px dotted #000000;
     cursor: default;
     text-indent: 10px;
     border-radius: 5px 5px 0 0;
     width: 100%;
     height: 22px;
     background: #FFFF66;
     display: block;
     position: absolute;
     top: 0px;
     left: 0;
 }
 .spoiler_open:hover:before { background: #F5FF27; }
 .spoiler_open {
     margin: 5px 0 0 15px;
     height: 23px;
     width: 240px;
     outline: none;
     float: left;
     position: relative;
     overflow: hidden;
     -webkit-transition: height 0.3s ease;
     -moz-transition: height 0.3s ease;
     -ms-transition: height 0.3s ease;
     -o-transition: height 0.3s ease;
     transition: height 0.3s ease;
 }
 .spoiler_open:focus { height: 122px; }
 .spoiler_open:focus .spoiler_close { display: block; }
 .spoiler_open:focus:before { display: none; }

/* В штмл прописываем 
<div class="spoiler_open" tabindex="1">
 <div class="spoiler_desc">
  <p>Нужно знать, как и что делать, чтобы текст появился под спойлером,
  а в заголовке спойлера было "Открыть-Закрыть".</p>
 </div>
 <span tabindex="0" class="spoiler_close">Закрыть</span>
</div>

<div class="spoiler_open" tabindex="2">
 <div class="spoiler_desc">
  <p>Нужно знать, как и что делать, чтобы текст появился под спойлером,
  а в заголовке спойлера было "Открыть-Закрыть".</p>
 </div>
 <span tabindex="0" class="spoiler_close">Закрыть</span>
</div>
*/


/* === =================================================================================================================  === */
body
{
 
    width: 100%;
    margin: 0 auto;
    font-family: Arial, Helvetica;
        color: #9C9C84;
	
	background: url( "../img/template/bg-body2.png") repeat;
        -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
/*	background-size: cover; /* Масштабируем фон */
    background-attachment:fixed;
}
table {
    width: 100%;
}

div#sait {
    width: 75%;
    margin: auto;
    margin-top: 8em;
}
td {
    /* display: block; */
   max-width: 12%;
}
td img {
    width: 100%;
}
/*________________________#header________________________________________________________*/
/*.logo {
        display: block;
    position: absolute;
    margin-top: -4em;
    width: 34em;
    right: 11%;
    min-height: 5em;
    background: url("../img/template/logo.png") no-repeat;
    
}*/

.logo {
    display: block;
    position: absolute;
    margin-top: -8em;
    width: 34em;
    right: 9.4%;
    min-height: 12em;
    background: url("../img/template/logo.png") no-repeat;
        z-index: 0;
}
.menu { display: block;
    position: relative;
    width: 100%;
    min-height: 3em;
    margin-bottom: 3em;
    margin-top: 4em;
    /* padding: 0.8em; */
    border: 0.1em outset #0A0A09;
    border-radius: 0.4em;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: 0 2px 2px rgba(49, 43, 36, 0.67);
    z-index: 1;}
.menu ul {
    padding-left: 0;
    padding-right: 0;
}
.menu li {
	 float: left;
    list-style-type: none;
    padding: 0 1em;
}

.menu li.activ {    background: linear-gradient(to top, rgba(224, 159, 40, 0), #272723);
    border-top: 0.1em outset #F7F6EF;
	}
/*	
.menu li:hover   {	background: linear-gradient(to top, rgba(224, 159, 40, 0), #231F04);
    border-top: 0.1em outset #F1D82D;}
    */
.menu li:hover a {
    color: #F56108;
}
.menu a {
	color: #F3F3E9;
    font-weight: bolder;
    text-decoration: none;
    text-shadow: 1px 0px 0em rgba(218, 210, 210, 0.84);
    
}	

.menu ul li ul {
    position: absolute;
        display: none;
        z-index: 999;
}
.menu ul li:hover ul {
    position: absolute;
    display: none;
    /*display: block;
    /* background: azure; */
    border: 0.1em outset #0A0A09;
    background: rgba(0, 0, 0, 0.72);
    padding: 1em;
    border-radius: 0.4em;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: 0 2px 2px rgba(49, 43, 36, 0.67);
}
.menu ul li ul li{
    float: none;
    margin-bottom: 0.4em;
}
.menu ul li ul li a{
    color: #F3F3E9 !important;
}
.menu ul li ul li a:hover{
    color:  #F56108 !important;
}
 /*******************************************************************************************/
 
 #content{   
    min-height: 24em;
    border: 0.1em outset #0A0A09;
   background: rgba(0, 0, 0, 0.72);
    padding: 1em;
        border-radius: 0.4em;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: 0 2px 2px rgba(49, 43, 36, 0.67);
    }
	div#content p img {
    padding: 0 0.3em;
}
img.catalog {
		opacity: 0.7;
}
img.catalog:hover {
    opacity: 1;
}

/*******************************************************************************************/