
.white {
	color: white;
}
.red {
	color: red;
}
.green {
	color: green;
}
.blue {
	color: blue;
}
.silver {
	color: silver;
}
.grey {
	color: grey;
}
.gold {
	color: gold;
}

.whitebg {
    background-color: white;
}
.redbg {
	background-color: red;
}
.redbg:hover {
	background-color: red;
    color:black;
}

.greenbg {
	background-color: green;
}
.greenbg:hover {
	background-color: green;
    color:black;
}

.bluebg {
	background-color: blue;
}
.silverbg {
	background-color: silver;
}
.greybg {
	background-color: grey;
}
.goldbg {
	background-color: gold;
}

.whiteborder {
	margin: 3px 0;
	padding: 5px 10px;
	border-radius: 8px;
    border: 1px solid white;
}
.redborder {
	margin: 3px 0;
	padding: 5px 10px;
	border-radius: 8px;
    border: 1px solid red;
}
.greenborder {
	margin: 3px 0;
	padding: 5px 10px;
	border-radius: 8px;
    border: 1px solid green;
}
.goldborder {
	margin: 3px 0;
	padding: 5px 10px;
	border-radius: 8px;
    border: 1px solid gold;
}
.blueborder {
	margin: 3px 0;
	padding: 5px 10px;
	border-radius: 8px;
    border: 1px solid blue;
}
.blackborder {
	margin: 3px 0;
	padding: 5px 10px;
	border-radius: 8px;
    border: 1px solid black;
}
.greyborder {
	margin: 3px 0;
	padding: 5px 10px;
	border-radius: 8px;
    border: 1px solid grey;
}


.center {
	text-align: center;
}
.right {
	text-align: right;
}
.smail { /* ошибка заменить на small*/
	font-size: 80%;
}
.small {
	font-size: 80%;
}
.top {
	vertical-align: top;
}
.bold {
	font-weight: bold;
}
.norm {
	font-weight: normal;
}
.up {
	text-transform: uppercase;
}

.w_full {width: 100%;}
.w100p {width: 100%;}
.w99p {width: 99%;}
.w98p {width: 98%;}
.w97p {width: 97%;}
.w96p {width: 96%;}
.w95p {width: 95%;}

.w10 {width: 10px;}
.w20 {width: 20px;}
.w30 {width: 30px;}
.w40 {width: 40px;}
.w50 {width: 50px;}
.w60 {width: 60px;}
.w70 {width: 70px;}
.w80 {width: 80px;}
.w90 {width: 90px;}
.w100 {width: 100px;}
.w110 {width: 110px;}
.w120 {width: 120px;}
.w130 {width: 130px;}
.w140 {width: 140px;}
.w150 {width: 150px;}
.w170 {width: 170px;}
.w180 {width: 180px;}
.w200 {width: 200px;}
.w250 {width: 250px;}
.w300 {width: 300px;}
.w350 {width: 350px;}
.w360 {width: 360px;}
.w400 {width: 400px;}
.w500 {width: 500px;}
.w600 {width: 600px;}
.w700 {width: 700px;}
.w800 {width: 800px;}

.h20 {height: 20px;}
.h25 {height: 25px;}
.h30 {height: 30px;}
.h40 {height: 40px;}
.h50 {height: 50px;}
.h75 {height: 75px;}
.h100 {height: 100px;}
.h150 {height: 150px;}
.h180 {height: 180px;}
.h200 {height: 200px;}
.h250 {height: 250px;}
.h300 {height: 300px;}

h1 {
	font-size: 18px;
	margin: 0 0 5px 0;
	font-weight: bold;
}
h2 {
	font-size: 16px;
	margin: 0 0 5px 0;
	font-weight: bold ;
}
a {
	text-decoration: none;
}



#blink {
	-webkit-animation: blink 2s linear infinite; 
	animation: blink 2s linear infinite; 
	font-weight: bold; 
	color: #F00; 
}

.deactive {
    display: none;
}

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:inline-block;
   padding: .3em 1.5em .3em .6em;
   font-size:1em;
   cursor: pointer;
   position: relative;
    border-radius: 8px;
   border: 1px solid #888;
   background-color: #eee;
}
summary:hover {
    background-color: #fff;
}
summary:before {
  right: .3em;
  top: .4em;
  color: transparent;
  background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
  width: 1em;
  height: 1em;  
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: rotateZ(90deg);
}
summary ~ * {
   padding:0 1em 0 1em;
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
details{
  display:block;
  margin-bottom: .5rem;
}



@-webkit-keyframes blink { 
	0% { color: #F00; }
	50% { color: #FBB; }
	100% { color: #F00; }
}

@keyframes blink {  
	0% { color: #F00; }
	50% { color: #FBB; }
	100% { color: #F00; } 
}

