#secret_text {
font-size: 14px;
float: center;
line-height: 10px;
} /* секретный текст, который выводится при ошибках 
  регистрации и авторизации */


body {
background: #fff;
top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background: #778899;
width: 100%;
/*height: 100%;*/
}  /* Тело всей области сайта */


#navigation  {
width: 680px;
height: 80px;
position: relative;
top: -35px;
margin-left: auto;
margin-right: auto;
background: linear-gradient(#40a3ff, #2b89e0 30%, #001529 80%);
} /* Панель навигации с кнопками */



#button0 {
width: 18%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #004f59;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
} /* Кнопка главной страницы сайта
   в пассивном состоянии ( зеленая ) */


#active-button0 {
width: 18%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;

background: linear-gradient(-4deg, #f20000, #014724);
background-size: 400% 400%;
-webkit-animation: Gradient 0.7s ease infinite;
-moz-animation: Gradient 0.7s ease infinite;
animation: Gradient 0.7s ease infinite;
} /* Кнопка главной страницы активная, оранжевая, c миганием */


@-webkit-keyframes Gradient {
0% {background-position: 0% 0%}
100% {background-position: 100% 100%}
}
@-moz-keyframes Gradient {
0% {background-position: 0% 0%}
100% {background-position: 100% 100%}
}
@keyframes Gradient {
0% {background-position: 0% 0%}
100% {background-position: 100% 100%}
} /* описание мигания активной кнопки */


#button0:hover {
width: 18%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* Кнопка главной страницы сайта неактивная,
   при наведении (фиолетовая) */


#active-button0:hover {
width: 18%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* Кнопка главной страницы сайта активная,
  оранжевая при наведении (фиолетовая) */


#button3 {
width: 10%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 21%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #004f59;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
} /* Кнопка страницы чат сайта
   в пассивном состоянии ( зеленая )*/


#active-button3 {
width: 10%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 21%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;

background: linear-gradient(-4deg, #f20000, #014724);
background-size: 400% 400%;
-webkit-animation: Gradient 0.7s ease infinite;
-moz-animation: Gradient 0.7s ease infinite;
animation: Gradient 0.7s ease infinite;
} /* Кнопка страницы чат активная, оранжевая, c миганием */


#button3:hover {
width: 10%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 21%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* Кнопка страницы чат сайта неактивная,
   при наведении (фиолетовая) */


#active-button3:hover {
width: 10%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 21%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* Кнопка страницы чат сайта активная,
  оранжевая при наведении (фиолетовая) */


#button4 {
width: 13%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 34%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #004f59;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
} /* Кнопка "Эфир" в пассивном состоянии, зеленая */


#active-button4 {
width: 13%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 34%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;

background: linear-gradient(-4deg, #f20000, #014724);
background-size: 400% 400%;
-webkit-animation: Gradient 0.7s ease infinite;
-moz-animation: Gradient 0.7s ease infinite;
animation: Gradient 0.7s ease infinite;
} /* Кнопка "Эфир" в активная, оранжевая, c миганием */

#button4:hover {
width: 13%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 34%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* Кнопка "Эфир" в пассивном состоянии, зеленая, 
  при наведении фиолетовая */


#active-button4:hover {
width: 13%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 34%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* Кнопка "Эфир" в активном состоянии, оранжевая,
  при наведении фиолетовая */


#button5 {
width: 17%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 76%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #004f59;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
} /* Кнопка "Выход" в пассивном состоянии, зеленая */


#active-button5 {
width: 17%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 76%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;

background: linear-gradient(-4deg, #f20000, #014724);
background-size: 400% 400%;
-webkit-animation: Gradient 0.7s ease infinite;
-moz-animation: Gradient 0.7s ease infinite;
animation: Gradient 0.7s ease infinite;
} /* кнопка "выход" активная, оранжевая, c миганием */


#button5:hover {
width: 17%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 76%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* кнопка "выход" пассивная, зеленая, 
  при наведении мыши фиолетовая*/


#active-button5:hover {
width: 17%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 76%;
right: 0;
margin: auto;
display: block;
margin-left: 3%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* кнопка "выход" активная, оранжевая, при наведении
   фиолетовая*/

#button {
width: 13%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 59%;
right: 0;
margin: auto;
display: block;
margin-left: -6%;
margin-right: 0%;
background: #004f59;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
} /* кнопка "вход" пассивная, зеленая*/


#active-button {
width: 13%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 59%;
right: 0;
margin: auto;
display: block;
margin-left: -6%;
margin-right: 0%;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;

background: linear-gradient(-4deg, #f20000, #014724);
background-size: 400% 400%;
-webkit-animation: Gradient 0.7s ease infinite;
-moz-animation: Gradient 0.7s ease infinite;
animation: Gradient 0.7s ease infinite;
} /* кнопка "вход" активная, оранжевая, c миганием */


#button:hover {
width: 13%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 59%;
right: 0;
margin: auto;
display: block;
margin-left: -6%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* кнопка "вход" пассивная, зеленая, при наведении
  фиолетовая */


#active-button:hover {
width: 13%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 59%;
right: 0;
margin: auto;
display: block;
margin-left: -6%;
margin-right: 0%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* кнопка "вход" активная, оранжевая, при наведении
  фиолетовая */


#button2 {
width: 27%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 74%;
right: 0;
margin: auto;
display: block;
margin-left: -5%;
margin-right: 30%;
background: #004f59;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
} /* кнопка "регистрация" пассивная, зеленая */


#active-button2 {
width: 27%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 74%;
right: 0;
margin: auto;
display: block;
margin-left: -5%;
margin-right: 30%;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;

background: linear-gradient(-4deg, #f20000, #014724);
background-size: 400% 400%;
-webkit-animation: Gradient 0.7s ease infinite;
-moz-animation: Gradient 0.7s ease infinite;
animation: Gradient 0.7s ease infinite;
} /* кнопка "регистрация" активная, оранжевая, c миганием */
 

#button2:hover {
width: 27%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 74%;
right: 0;
margin: auto;
display: block;
margin-left: -5%;
margin-right: 30%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* кнопка "регистрация" пассивная, зеленая, 
  при наведении фиолетовая */


#active-button2:hover {
width: 27%;
height: 50%;
position: absolute;
float: left;
top: 0;
bottom: 0;
left: 74%;
right: 0;
margin: auto;
display: block;
margin-left: -5%;
margin-right: 30%;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* кнопка "регистрация" активная, оранжевая, 
  при наведении фиолетовая */


#active-reset-button {
width: 30%;
height: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
margin-left: auto;
margin-right: auto;
line-height: 40px;
background: #004f59;
color: #FFF;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 50px;
font-size: 20px;
font-weight: bold;
} /* описание кнопки Reset */


#active-reset-button:hover {
width: 30%;
height: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
margin-left: auto;
margin-right: auto;
line-height: 40px;
background: #e50086;
color: #FFF;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 50px;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* описание активной кнопки Reset */


#active-info-button {
width: 100%;
height: 95%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
margin-left: auto;
margin-right: auto;
background: #004f59;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 0px;
color: #FFF;
font-size: 20px;
font-weight: bold;
} /* описание информационной кнопки "info" в подвале сайта */


#active-info-button:hover {
width: 100%;
height: 95%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
margin-left: auto;
margin-right: auto;
background: #e50086;
border:5px solid #014724;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 0px;
color: #FFF;
font-size: 20px;
font-weight: bold;
 -webkit-transition-property: background;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease;
} /* описание активной информационной кнопки "info" в подвале сайта */


#header {
width: 680px;
height: 190px;
position: relative;
top: -52px;
margin-left: auto;
margin-right: auto;
background: rgb(13, 46, 50);
background: linear-gradient(0deg, rgb(0, 235, 255) 5%, rgb(27, 175, 179) 35%, rgb(14, 52, 56) 100%);
line-height: 30px;
text-align: center;
font-weight: bold;
} /* вывеска сайта с надписью Телеканал Volt
  часами, датой */


#container-home  {
width: 680px;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
top: -40px;
margin-bottom: 52px;
background: #66a7ba;
line-height: 0px;
text-align: center;
font-size: 20px;
font-weight: bold;
} /* центральный блок сайта на странице "чат" */


#container-message {
width: 640px;
height: 520px;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 5px;
overflow: auto;
top: 38px;
background: #c8c8c8;
line-height: 28px;
text-align: left;
font-size: 20px;
font-weight: normal;
border-radius: 7px 7px 7px 7px;
} /* блок с формой сообщений на странице "чат" в
  центральном блоке для контента */

#message-form {
    width: 600px;
    height: 160px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 32px;
    margin-bottom: 180px;
    border-radius: 12px 12px 12px 12px;
    background: #66a7ba;
    line-height: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
} /* форма сообщений на странице "чат" */

#container-users-online {
    width: 600px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px 15px 15px;
    overflow: auto;
    top: 40px;
    margin-bottom: 35px;
    background: #b8b8b8;
    line-height: 5px;
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    border-radius: 7px 7px 7px 7px;
} /* блок со списком пользователей онлайн на странице "чат" */


#container-users-friends {
 width: 40%;

 float: left;
 margin-left: 20px;
 padding: 0 15px 15px 15px;
 overflow: auto;
 top: 40px;
 margin-bottom: 35px;
 background: #b8b8b8;
 line-height: 5px;
 text-align: center;
 font-size: 20px;
 font-weight: normal;
 border-radius: 7px 7px 7px 7px;
} /* блок со списком друзей на странице "личка"*/




#container-users {
width: 600px;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0 15px 15px 15px;
overflow: auto;
top: 25px;
margin-bottom: 15px;
background: #919191;
line-height: 5px;
text-align: center;
font-size: 20px;
font-weight: normal;
border-radius: 7px 7px 7px 7px;
} /* блок со списком пользователей на странице "чат" */



#button-users {
    position:relative;
    width: 42%;
    height: 8px;
    float: left;
    border: 2px  solid #000;
    color:#000;
    background: #849CA7;
    padding: 12px;
    margin: 10px;
    border-radius: 7px 7px 7px 7px;
} /* кнопка пользователя */



#button-users:hover {
    position:relative;
    width: 42%;
    height: 60px;
    float: left;
    border: 0px  solid #000;
    color: #000;
    background: hsla(120, 88%, 39%, 0.0001);
    padding: 12px;
    margin: 10px;
    font-size: 18px;
    border-radius: 7px 7px 7px 7px;
    transition: all 500ms ease;
} /* кнопка пользователя при наведении */



#online-users {
    position:relative;
    width: 273px;
    height: 28px;
    top: -21px;
    border: 0px  solid #000;
    margin-left: -17px;
    color: #000;
    background: hsla(250, 88%, 39%, 0.01);
    padding: 6px;
    font-size: 0px;
    border-radius: 7px 7px 7px 7px;
} /* кнопка пользователя с выпадением времени последнего посещения сайта НЕВИДИМАЯ */



#online-users:hover {
    position:relative;
    width: 107.5%;
    height: 78px;
    top: -18px;
    border: 2px  solid #000;
    color: #000;
    background: hsla(10, 100%, 50%, 0.6);
    padding: 4px;
    margin-left: -13px;
    line-height: 6px;
    font-size: 18px;
    border-radius: 7px 7px 7px 7px;
    transition: all 500ms ease;
} /* кнопка пользователя с выпадением времени последнего посещения сайта ВИДИМАЯ */


#container-primary {
width: 680px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
top: 11px;
margin-bottom: 25px;
background: #66a7ba;
line-height: 0px;
text-align: left;
font-size: 27px;
font-weight: bold;
} /*  блок сайта страницы "главная" */

#text-primary {
width: 620px;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 15px;
overflow: auto;
top: 10px;
margin-bottom: 30px;
background: #C8C8C8;
line-height: 32px;
text-align: left;
font-size: 20px;
font-weight: normal;
border-radius: 50px 3px 3px 3px;
} /* блок с текстом на странице "главная" */


#container-auth-reg {
width: 680px;
height: 620px;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
top: 11px;
margin-bottom: 38px;
background: #66a7ba;
line-height: 16px;
text-align: center;
font-size: 22px;
font-weight: bold;
} /* центральный блок сайта страницы "вход" и "регистрации" */


#text-reg {
width: 570px;
height: 260px;
position: relative;
margin-left: auto;
margin-right: auto;
top: 50px;
background: #66a7ba;
line-height: 55px;
font-size: 20px;
font-weight: normal;
} /* блок с текстом на странице "вход" и "регистрация" */


#login {
font-size: 20px;
} /* размер, шрифт поля логин */


#login_to {
font-size: 20px;
    width: 220px;
    height: 35px;
    margin-bottom: 15px;
} /* размер  поля получателя сообщений на главной странице */


#textarea {
width: 600px;
height: 130px;
font-size: 20px;
text-align: start;
margin-bottom: 15px;
background: #C8C8C8;
resize: none;
} /* размер поля сообщения на главной странице */


#password {
font-size: 20px;
} /* размер, шрифт поля пароль */


#enter {
font-size: 20px;
} /* размер, шрифт поля "Enter" */


#container-video  {
width: 680px;
height: 620px;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
top: 11px;
margin-bottom: 38px;
background: #66a7ba;
line-height: 0px;
text-align: center;
font-size: 28px;
color: #fff;
font-weight: bold;
} /* центральный блок с видео контентом
   на странице  "эфир" */


#footer  {
width: 680px;
height: 200px;
position: relative;
margin-left: auto;
margin-right: auto;
top: -25px;
margin-bottom: 90px;
background: linear-gradient(0deg, rgb(142, 178, 255) 5%, rgb(98, 139, 209) 35%, rgb(41, 81, 127) 100%);
line-height: 10px;
text-align: center;
} /* подвал сайта */