.list {font-size:14px;color:#ffcc99;font-family:Arial;}
.topnav {font-family:verdana;font-size:15px;color:#FFFFFF}
a.topnav {color:#E0E4E8;text-decoration:none}
a:hover.topnav {text-decoration:underline}
.topdate {width: 900px; background-color:#100C20; font-family:verdana;font-size:10px;padding-right:6px;color:#666666}
.box {background-color:#E9E9E9;height:25px;padding-left:6px;font-family:verdana;font-size:10px}
a.bottom {color:#666666;text-decoration:none}
a:hover.bottom {text-decoration:underline}
.content {font-family:arial;font-size:11px;color:#666666;line-height:1.35em;cursor:default}
a.top {color:#808080;text-decoration:none}
a:hover.top {text-decoration:underline}
a {color:#666666;text-decoration:none}
a:hover {text-decoration:none}
.copyRight {font-family:verdana;font-size:10px;padding-left:6px;color:#666666}
.navSide {width:8px;background-color:#005CCC}
.navButton {font-family:verdana;font-size:14px;height:22px;color:#FFFFFF;text-align:left}
.navButtonSmall {font-family:verdana;font-size:10px;height:22px;color:#FFFFFF;text-align:left}
.navDark {height:1px;background-color:#100C10}
.navButtonLight {height:2px;background-color:#100C40}
.navButtonDark {height:2px;background-color:#100C20}
a.navLink {color:#ffcc99;text-decoration:none; font-weight:bold}
a.navLink2 {color:#ffcc99;text-decoration:none}
a.navLink3 {color:#77b6db;text-decoration:none; font-weight:bold}
a:hover.navLink {text-decoration:underline}
a:hover.navLink2 {text-decoration:underline}
a:hover.navLink3 {text-decoration:underline}
.navBoxTop {background-color:#100C30;font-family:verdana;font-size:10px;color:#FFFFFF;padding:6px;padding-left:8px}
.navBoxTop2 {width: 900px; background-color:#100C30;font-family:verdana;font-size:10px;color:#FFFFFF;padding:6px; margin: 0 auto; text-align: center;}
.navBox {background-color:#100C20;font-family:arial;font-size:11px;color:#FFFFFF}
.mainBox {background-color:#100C20;font-family:arial;font-size:14px;color:#CCCCCC; padding-top:10px}
.navBoxDate {color:#CCCCCC}
h1 {color:#CCCCCC;font-size:1.9rem;font-weight:bold; font-family: 'Playfair Display', serif;}
h2 {color:#CCCCCC;font-size:1.7rem;font-weight:bold}
h3 {color:#CCCCCC;font-size:1.2rem;font-weight:bold}
h4 {color:#CCCCCC;font-size:1rem;font-weight:bold}
h5 {color:#CCCCCC;font-size:1rem;font-weight:bold}
h6 {color:#CCCCCC;font-size:1rem;font-weight:bold}
h1.hgd {color:#CCCCCC;font-size:28px;font-weight:bold;font-family: Monotype Corsiva;}

.heads {
	font-family: 'Playfair Display', serif;
}

.kog {
	color: #0044cc;
}

.huff {
	color: #ffd700;
}

.slyz {
	color: #007d34;
}

.gryff {
	color: #8c000f;
}

#dhtmltooltip{
color: #000000;
position: absolute;
width: 400px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 200;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

.spravka {border: 1px solid #ffffff; margin: 3px; padding: 10px 10px 10px 10px; text-align: left;}

*, *::before, *::after {
  box-sizing: border-box;
}

input[type="text"] {
  font-family: inherit; /* 1 */
  font-size: inherit; /* 1 */
  line-height: inherit; /* 1 */
  margin: 0; /* 2 */
}

.text-field {
  padding-bottom: 10px;
}

.link-field {
  padding: 8px;
}

.newBody {
	background: #1b1a2a; 
	background-image: url(/images/bricks.jpg);
	margin: auto;
	padding: 0;
	position: absolute;
	width: 100%;
}

@media screen and (min-width: 400px) {
  .text-field__input{
	width: 40%;
  }
  .lk-button{
	width:	40%;
  }
  
  .wrap {
	padding: 30px 5px;
	width: 80%;
	margin: 0 auto;
  }
  .small-button {
	width: 50px;  
  }
  
  .collapsible-menu {
	color: #fff;
    padding: 0px 10px;
	width: 17%;
	float: left;
  }
  
  .newhead {color:#CCCCCC;font-size:1.2rem;font-weight:bold}
  
  .mainBox2 {
	width: 900px; 
	background-color:#100C20;
	font-family: 'Playfair Display', serif;
	font-size:17px;
	color:silver; 
	padding: 30px 60px; 
	margin: 0 auto;
  }
}

@media screen and (max-width: 400px) {
  .text-field__input{
	width: 70%;
  }
  .lk-button{
	width: 70%;
  }
  .wrap {
	padding: 30px 5px;
	margin: 0 auto;
  }
  
  .small-button {
	width: 40px;  
  }
  
  .collapsible-menu {
	color: #fff;
	width: 100%;
	background-color:#100C20;
  }
  
  .newhead {color:#CCCCCC;font-size:2rem;font-weight:bold}
  
  .mainBox2 {
	width: 100%; 
	background-color:#100C20;
	font-family: 'Playfair Display', serif;
	font-size:28px;
	color: silver; 
	padding: 30px 60px; 
	margin: 0 auto;
  }
}

.wrap-menu {
	display: inline-block;
	padding: 5px 14px;
}

.chat-menu {
	display: inline-block;
	padding: 20px 5px;
	text-align: center;
}

.chat-menu a {
	text-decoration: none;
	text-align: center;
	color: gold;
	font-weight:bold;
	font-size:x-small;
}

/* стили для input */
.text-field__input {
  display: block;
  text-align:center; 
  height: calc(2.5rem + 2px);
  padding: 0.375rem 0.75rem;
  font-family:arial;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #bdbdbd;
  /* border-radius: 0.2rem; */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.admin-button{
 text-decoration:none; 
 text-align:center; 
 padding:8px 15px; 
 border:solid 1px silver;
 cursor: pointer; 
 font-family: arial;
 font-weight:bold;   
 }
 
.stand {
	background-color:#1b1a2a; 
	color:#e8e8e8;
}
 
.btn-red {
	background-color:#1b1a2a;
	font-weight: bold;
	color:red;
}

.btn-green {
	background-color:#1b1a2a;
	font-weight: bold;
	color:green;
}

.small-button{
 text-align:center; 
 padding:5px; 
 /*border:solid 1px silver;*/
 cursor: pointer; 
 font-family: arial;
 /*background-color:#1b1a2a; */
 }

.lk-button{
 text-decoration:none; 
 text-align:center; 
 padding:11px 32px; 
 border:solid 1px silver;
 cursor: pointer;
 /*-webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px;*/ 
 font-family: arial;
 font-weight:bold; 
 color:#e8e8e8; 
 background-color:#1b1a2a; 
 /*background-image: -moz-linear-gradient(top, #252157 0%, #14152e 100%); 
 background-image: -webkit-linear-gradient(top, #252157 0%, #14152e 100%); 
 background-image: -o-linear-gradient(top, #252157 0%, #14152e 100%); 
 background-image: -ms-linear-gradient(top, #252157 0% ,#14152e 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14152e', endColorstr='#14152e',GradientType=0 ); 
 background-image: linear-gradient(top, #252157 0% ,#14152e 100%);   
 -webkit-box-shadow:1px 1px -1px #1f1b1b, inset 0px 0px -20px #ffffff; 
 -moz-box-shadow: 1px 1px -1px #1f1b1b,  inset 0px 0px -20px #ffffff;  
 box-shadow:1px 1px -1px #1f1b1b, inset 0px 0px -20px #ffffff; */    
 }
 
 .chat-button{
 text-decoration:none; 
 text-align:center; 
 padding: 2px 10px; 
 border:solid 1px gold;
 cursor: pointer; 
 font-family: arial;
 font-weight:bold; 
 color: gold; 
 background-color:#000;  
 height: 35px; 
 }
 
 .chat-field__input {
  /* display: block; */
  text-align:center; 
  height: 35px;
  padding: 2px 5px; 
  font-family:arial;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #bdbdbd;
  width: 205px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.talk-field__input {
  /* display: block; */
  text-align:left; 
  height: 35px;
  padding: 2px 5px; 
  font-family:arial;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #bdbdbd;
  width: 50%;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.container-menu a {text-decoration: none; font-size: small; line-height: 1.5rem; font-weight: bold; color: gold;}
.container-menu {padding: 10px; width: 95%; background: #000; position:relative; padding: 5px;}
.container-text {
	width: 75%; 
	height: 80%; 
	overflow: auto; 
	font-weight: bold; 
	position:relative; 
	background-color: #000; 
	color: silver; 
	padding: 5px;
	}
.container-whoin {width: 20%; height: 80%; background: #000; color: silver; overflow: auto; padding: 5px;}
.container-mess {width: 95%; height: 8%; background: #000; color: silver; padding: 10px;}
.chat-body {background-image: url(playground/images/bricks.jpg); color: silver; margin: 10px;}

.menu-content {
    font-family: 'Playfair Display', serif;
    padding: 0 0 0 10px;
	background-color:#100C20;
}

.collapsible-menu ul {
    list-style-type: none;
    padding: 0;
}
.collapsible-menu a {
    display:block;
    padding: 10px;
    text-decoration: none;
	color: #fff;
}

.collapsible-menu label {
 font-family: 'Playfair Display', serif;
 font-size: 1.5rem;
 display: block;
 cursor: pointer;
 background: url(images/gerb.png) no-repeat left center;
 padding: 10px 0 10px 50px;
}
input#menu {
 display: none;
}

input:checked +label {
 background-image: url(images/gerb.png);
}

.menu-content {
 max-height: 0;
 overflow: hidden;
 font-family: 'Playfair Display', serif;
 padding: 0 0 0 10px;
}
/* Эффект переключения*/
input:checked ~ label {
 background-image: url(images/gerb.png);
}
input:checked ~ .menu-content {
 max-height: 100%;
}

.submenu {
 max-height: 0;
 overflow: hidden;
 font-family: 'Playfair Display', serif;
 padding: 0 0 0 10px;
}

.menu-content li a:hover > .submenu {
    font-family: 'Playfair Display', serif;
    padding: 0 0 0 10px;
	background-color:#100C20;
}

.piclk {
	max-width:650px;
	height:auto;
}