BODY {FONT-FAMILY: Verdana; FONT-SIZE: 14px;}



a.gallery:hover, a.gallery:active {text-decoration: none; color: #FF9C00;}

A.menu {COLOR: #666666; TEXT-DECORATION: none}
A.menu:hover {COLOR: #009900; TEXT-DECORATION: none}

/* кнопки списка страниц */
.pgbutt   {font-family: Verdana; font-size:14px; padding:20px 20px; text-decoration: none;}
.pgbutt a {color: white; border: 1px #FF0000 solid; width:10px; padding:3px 6px; background: #FF8C00;
           -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.pgbutt a:hover   {color: black; border: 1px #FF0000 solid; background: #FFDAB9;}
.pgbutt a:visited {border: 1px #FF0000 solid; TEXT-DECORATION: none;}

.knopka{
    background-color: #FF8C00;
    border: none;
    color: white;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /*Safari*/
    transition-duration: 0.4s;
    cursor: pointer;
	border-radius: 10%;
}

.knopka-orange {background-color: white; color: black; border: 2px solid #FF8C00;}
.knopka-orange:hover {background-color: #FFA500; color: white;}

/*  Стили кнопок УДАЛИТЬ и РЕДАКТИРОВАТЬ */
.del {float:left; margin: 0 15px 15px 0; border:#f00 solid 5px; width:15px;height:15px; padding:1px; text-align:center;}
.edit {float:left; margin: 0 15px 15px 0; border:#0F0 solid 5px; width:15px;height:15px; padding:1px; text-align:center;}

/* Здесь ниже задаётся стиль для ссылок - все ссылки в квадратиках обведённых нежным оттенком основного цвета 
.pgbutt a {font-family: Verdana; padding-top:2px;padding-bottom:2px;
text-decoration: none; border: 1px #FF8000 solid; background: #FEF7E9; padding:1px 4px 1px 4px; margin: 5px 1 0 0;
 -moz-border-radius: 4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;}*/

.maininput {WIDTH: 200px; color: 000000; border: #808080 1 solid;}
.simpleok {WIDTH: 50px; background-color: cccccc; color: 000000; font-weight: bold; border: #808080 1 solid;}
.longok {WIDTH: 130px; background-color: cccccc; color: 000000; border: #808080 1 solid;}

.toptable {FONT-SIZE: 12px; background: #FF9B04}

.small {FONT-SIZE: 12px;}

TD {FONT-SIZE: 13px}
TD.menu {FONT-SIZE: 13px; FONT-WEIGHT: bold}
TD.main {FONT-SIZE: 13px; FONT-WEIGHT: bold}
TABLE.seredina {background: #FFFFFF}

TABLE.bakfon {background: #FFCD95}
TR.vip {background: #FFF5DD}
TR.row1 {background: #FFFFFF}
TR.row2 {background: #FFF5DD}







/*   22-10-2018 для главной адаптивные таблицы   */

/* ------------- Контейнер с адаптивными блоками------------- */
.masonry {
    margin: 1.5em 0;
    padding: 0;
    column-gap: 1.5em; /* Общее расстояние между колонками */
    font-size: .85em;
    -moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */
    -webkit-column-gap: 1.5em; /* Расстояние между колонками  для Safari, Chrome и iOS */
}
 
/* Элементы в виде плиток с содержанием */
.item-wr {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 10 1.5em;
    width: 250px;
    box-sizing: border-box; /* Изменения алгоритма расчета ширины и высоты элемента.*/
    -moz-box-sizing: border-box; /* Для Firefox */ 
    -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */ 
    box-shadow: 2px 2px 4px 0 #ccc; /* Внешняя тень плиток */
}
 

/* Стили ссылок внутри плиток */
.item-wr a {
text-decoration: none;
color: #359CC6;
margin: 0 10px;
}
 
/* Стили ссылок при наведении */
.item-wr a:hover {
color: #E88F00;    
border-bottom: 1px dotted #9F1D35;
}
 
/* Стили картинок, видое и фреймов внутри адаптивных плиток */
img, iframe {
max-width: 100%;
height: auto;
display: block;
}
 
/* Медиа-запросы для различных размеров адаптивного макета */
@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}
 
@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
 
@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
 
@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
 
@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

/* div'ы для выравнивания по левому краю или по правому */
div.tools {position: releative; background-color: #FFDAB9; max-width: 98%; min-height:80px; margin: 0; bottom: 0}
div.wrapper {margin: 0 auto; min-width:320px; height:150px;}

div.left {float:left;}
div.right  {float:right;}

div.left_block {float:left;}
div.right_block  {float:left; max-width:1000px; min-width:244px; height:150px; text-align:center;}
div.right_block2 {float:right; text-align:center; height:150px;}



/* 5) Стиль для блока загрузки - ДАЛЕЕ >>> */
#cssbar-wrapper {width:300px; height:19px; position:absolute; left:50%;}
#cssbar-border {border:3px solid rgb(34,44,50); height:100%; width:100%; position:relative; left:-50%; top:-50%; padding:4px 3px;}
#cssbar-whitespace {overflow:hidden; height:100%; width:100%; margin:0 auto; overflow:hidden; position:relative;}
#cssbar-line {background-color:rgb(34,44,50); position:absolute; height:100%; width:100%; animation:cssbar-slide 4s steps(40) infinite;
 -o-animation:cssbar-slide 4s steps(40) infinite; -ms-animation:cssbar-slide 4s steps(40) infinite;
 -webkit-animation:cssbar-slide 4s steps(40) infinite; -moz-animation:cssbar-slide 4s steps(40) infinite;}
@keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}} @-o-keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}}
@-ms-keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}} @-webkit-keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}}
@-moz-keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}}


/* КОММЕНТАРИИ красиво с подсветкой 09-2019 */
.blockquote-1 {
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
    margin: 5px 5px 5px 5px;
    padding: 10px 10px;
	min-height:50px;
  position: releative;
    font-size: 14px;
	text-align: left;
    background: #efefef;
    color: #000;
    font-style: italic;
}
.blockquote-1::before {
    border: 14px solid transparent;
    border-top: 14px solid #efefef;
    border-bottom: 0;
    height: 0;
    width: 0;
    border-top-width: 25px;
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    transform-origin: center;
    transform: rotate(180deg) skew(-25deg) translateY(17px);
}
.blockquote-1 cite {
    position: absolute;
    bottom: -24px;
    left: 62px;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    color: #000;
}


/* 10-2019 кнорки вперёд-назад вернуться и для оформления */

.wr_knopki { border: 3px solid; display: block; font-size: 18px; line-height: 10px;
 padding: 10px; text-align: center; text-transform: uppercase; }

.wr_knopki:hover {text-decoration: none !important;}

.wr_knopki.red {color: #eb2116 !important;}
.wr_knopki.yellow {color: #FFD700 !important;}
.wr_knopki.green {color: #09b767 !important;}
.wr_knopki.purple {color: #800080 !important;}
.wr_knopki.blue {color: #1e83d6 !important;}
.wr_knopki.dark {color: #4e5a77 !important; }

.wr_knopki.red:hover {background-color: #eb2116 !important; color: #fff !important;}
.wr_knopki.green:hover {background-color: #09b767 !important; color: #fff !important;}
.wr_knopki.yellow:hover {background-color: #FFD700 !important; color: #fff !important;}
.wr_knopki.purple:hover {background-color: #800080 !important; color: #fff !important;}
.wr_knopki.blue:hover { background-color: #1e83d6 !important; color: #fff !important;}
.wr_knopki.dark:hover { background-color: #4e5a77 !important; color: #fff !important;}
 
/* .wr_block{	float: left;  margin:auto; width:150px; position: relative; min-height: 1px; padding: 1px;}*/
.wr_block {
margin:10pt;
padding:10pt;
display:inline-block;
vertical-align: middle;}