html, body
{
    margin: 0;
    padding: 0;
}
body
{
	background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
/*    background-size: 100% auto;*/
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: bottom left;
}
.enabled
{
    background-color: red;
    background-position:95.5%;
}
.disabled
{
    background-color: green;
}
.wrapper {
    min-width:600px;
    max-width:1000px;
    width: 80%;
/* whatever width you want */
    display: inline-block;
    position: absolute;
    bottom:0;
}
.wrapper:after {
    padding-top: 56.25%;
    /* 16:9 ratio */
    display: block;
    content: '';
}
.radiola
{
    /*border:4px solid #fff;*/
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /*min-width: 455px;*/
    background-image: url('radiola.jpg');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
}
.mailogo
{
    /*border:4px solid #fff;*/
    position: absolute;
    top: 10px;
    bottom: 0;
    right: 0;
    left: 10px;
    width: 50px;
    height: 50px;
    /*min-width: 455px;*/
    background-image: url('mai.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
}
.maicaption
{
	text-align:center;
	font-family: Arial, Verdana, sans-serif;
	font-weight: bold;
	position: relative;
	top: 65px;
	color: white;
}
a:visited {
	color:white;
	text-decoration:none;
}
.panel
{
    background-color: black;
    color:#0f0;	
    font-family: Consolas, Courier, "Courier New", monospace;
    font-size:100%;
	font-size:1.5vw;
    font-weight: bold;
    border: 2px solid #bc964d;
	position: absolute;
	overflow:hidden;
	padding: 5px 2px 0 5px;
}
.info_line
{
    width:31%;
    height:3%;
    left: 26.1%;
    top: 72.4%;
    white-space: nowrap;
	font-size:70%;
	padding:0;
	border: 0;
}
.big_panel
{
	width:59.6%;
    height:42%;
    left: 11%;
	bottom: 43%;	
}
#history_panel
{
	font-size:85%;
	/*overflow:auto;*/
	white-space: nowrap;
}
.summary
{
	/*top: 22%;*/
	right:28.0%;
	width:26%;
	height:41%;
	bottom:43.5%;
	/*text-align:right;*/
}
.album_art {
    position: absolute;
/* background-color: black;
   border: 2px solid #bc964d;*/
    width:50%;
    height:43%;
    left:11%;
	bottom:44%;
}
.album_art img {
    max-width: 100%;
    max-height: 100%;
    margin:auto;
	position:absolute;
	bottom:0%;
	height:240px;
}
.panel_button
{
    background-image: url('panel_button.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    width:2.4%;
    height:4.2%;
    bottom:16%;
    cursor:pointer;
}
#startstop_button
{
	left:29.4%;
}
#volumedown_button
{
	left:31.9%;
}
#volumeup_button
{
	left:34.4%;
}
#summary_button
{
	left:36.9%;
}
#history_button
{
	left:39.4%;
}
#listeners_button
{
	left:41.9%;
}

#european_art_button
{
	left:44.4%;
}
#russian_art_button
{
	left:46.9%;
}
#soviet_art_button
{
	left:49.4%;
}
#moscow_art_button
{
	left:51.9%;
}
#song_history, #listeners, #summary, #art, #art_title, #art_back_arrow,
#eu_flag, #ru_flag, #su_flag, #msk_flag
{
	display:none;
}
.selected
{
	color: yellow;
}
#art
{
	text-align: right;
	padding:0;
}
#art_image
{
	height:100%;
}
#art:hover #art_title
{
	display:block;
	position:relative;
	bottom:10%;
	padding-right:5%;
	background-color:black;
	color:yellow;	
}
#art:hover #art_back_arrow
{
	display:block;
	position:absolute;
	top:0;
	padding-top:20%;
	width:50px;
	height:100%;
	/*background-color:#111;*/
	color:yellow;
	text-align:center;
	font-family:"Times New Roman", serif;
	cursor:pointer;
}
.flag
{
    background-repeat: no-repeat;
    position: absolute;
    width:2.2%;
    height:2.3%;
    bottom:20.4%;
	position:absolute;
}
#eu_flag
{
    background-image: url('eu.png');
	left:44.4%;
}
#ru_flag
{
    background-image: url('ru.png');
	left:46.9%;
}
#su_flag
{
    background-image: url('su.png');
	left:49.4%;
}
#msk_flag
{
    background-image: url('msk.png');
	left:51.9%;
}
@media screen and (min-width: 400px)
{
	body{
	    background-image: url('bgnd.jpg');
	}
}
 @media all and (max-device-width: 600px) {
	 body {
		 background-image:none;
	 }
	 .info_line{
		 height:5%;
	 }
	 .wrapper{

	 }
 }
 @media all and (max-width: 785px) {
	.panel {
		font-size:12px;
	}
	 .info_line {
/*		color:red;*/
		font-size:10px;
	 }

 }
 @media all and (min-width: 1200px) {
	.panel {
		font-size:16px;
	}
	.info_line {
/*		color:lightblue;*/
		font-size:80%;
	 }
 }