@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext');
@import url('../font-awesome.min.css');

body {margin:0; padding:10px;
	font-size: 13pt; line-height: 1.85em; font-weight: 300; color:#666;
	font-family:'Open Sans', Helvetica, Arial, Verdana, sans-serif;
	background-image:url('images/bg.jpg');
	background-repeat:no-repeat; background-position:center center; background-size:cover;
	}

a {text-decoration:none; color:#FFF;}
a:hover 	{text-decoration:none; color:#FFF;}
div {display:block; margin:0; padding:0;}
img		{border-width:0; margin:0;}


#mainarea {width:100%; overflow:hidden;}

#logo {display:block; width:200px; margin:0; overflow:hidden;}
#logo img {width:inherit;}
		
#jwstream {padding-top:6px; margin-left:5px;}

.menu {display:block; clear:both; width:200px; height:40px; margin:0 0 4px 0; padding:0; overflow:hidden;
	font-size:0.9em; line-height:40px; color:#FFF;
	border-radius:0.2em; background-color:rgba(0,0,0,0.5);
	-webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -ms-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;
	z-index:8000;
	}
.menu:hover {color:#FFF; background-color:rgba(0,0,0,0.8);}
.menu .ico {display:inline-block; width:46px; font-family:FontAwesome; font-size:1.5em; line-height:40px; vertical-align:top; text-align:center;
	-webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -ms-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;
	z-index:8000;
	}
a.menu:hover .ico,
.menu a:hover .ico {color:#00ABE7;}
a.menu.active .ico,
.menu a.active .ico {color:#00ABE7;}


#disp {display:block; clear:both; width:200px; height:200px; margin:0 0 4px 0; padding:0; overflow:auto; overflow-x:hidden;
	border-radius:0.2em; background-color:rgba(0,0,0,0.8);
	-webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -ms-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;
	z-index:9000;
	}
#disp.active {width:50%; margin:-300px 0 4px 220px; height:auto;}
@media only screen and (max-width:479px) {
	#disp.active {width:200px; height:200px; margin:0 0 4px 0;}
	}

.disprow {display:block; height:24px; line-height:22px; font-size:0.6em; color:#999; padding-left:1em;}
.disprow:first-child {border-bottom:1px #00ABE7 solid;}
.disprow:last-child {border-top:1px #00ABE7 solid; border-bottom:none;}
.disprow:hover {color:#FFF;}
.disprow a {color:#999;}
.disprow a:hover {color:#FFF;}
.disprow span {font-family:FontAwesome; font-size:1.5em; padding:0 0.4em; color:#FFF;}
.disprow .close {float:right; font-size:0.9em;}
.disprow .close span {color:#999;}
.disprow .close:hover span {color:#FFF;}

.ainfo {border-bottom:1px #00ABE7 solid; padding:0.5em 1em;
	color:#FFF; font-size:0.8em; line-height:1.1em;
	}                 
.ainfo .atytul {padding:0.5em 0; font-size:1.5em; line-height:1.1em;}           
.ainfo .akto 	{display:block; clear:both; font-size:1.0em; line-height:38px; overflow:hidden;}
.ainfo .akto .who 	{display:block; clear:both; overflow:hidden; white-space:nowrap; height:38px; margin-bottom:0.3em; padding-right:1em; color:#FFF;
	white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis;
	}
.ainfo .akto .who:hover 	{color:#00ABE7;}
.ainfo .akto .who img {display:block; float:left; width:32px; height:38px; margin-right:10px;}

.ainfo .asite	{display:block; clear:both; float:right; white-space:nowrap; margin:1em 0; padding:0 1em; color:#00ABE7; font-size:0.85em;
	line-height:26px; text-align:center; border:1px #00ABE7 solid; border-radius:3px;}
.ainfo .asite:hover {color:#FFF; background-color:#00ABE7;}

.ainfo .aopis	{display:block; clear:both; font-size:0.9em; line-height:1.6em;}


.alist {padding:0.5em 1em; overflow:hidden;}                 
.alist .audelem {clear:both; display:block;
	padding:0.2em 0 0.2em 55px; font-size:0.8em; line-height:1.6em; color:#FFF;
	}
.alist .audelem.active {color:#00ABE7;}
.alist .audelem .elemtime {float:left; width:30px; margin-left:-55px; font-size:0.85em; color:#999;}
.alist .audelem.active .elemtime {color:#00ABE7;}
.alist .audelem .elemico {float:left; width:20px; margin-left:-20px; font-family:FontAwesome; color:#00ABE7; text-align:center;}
.alist .audelem .elemico.fa-play {color:#00ABE7;}
.alist .audelem .elemtit {float:left; padding:0 0.4em; font-size:0.9em;}
.alist .audelem a.elemtit:hover {color:#00ABE7;}
.alist .audelem.active .elemtit	 {color:#00ABE7;}
.alist .audelem.old .elemtit	 {color:#DDD;}


#dispanow {width:85%; height:0; overflow:hidden; padding:0 15% 0 1em; color:#FFF; background-color:#00ABE7; line-height:22px;}
#dispanow.active {height:auto; min-height:30px;}
#dispanow .audelem {padding-left:24px; margin:6px 0;}
#dispanow .audelem .elemtime {display:none;}
#dispanow .audelem .elemico {float:left; width:24px; margin-left:-24px; font-family:FontAwesome; color:#FFF; text-align:left; cursor:pointer;}
#dispanow .audelem a.elemtit,
#dispanow .audelem a.elemtit:hover {color:#FFF;}



#infoimg {display:block; width:100%; min-width:200px; margin-bottom:0; overflow:hidden; font-size:1.1em;
	white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis;
	}
#infoimg .fa {font-size:0.9em; margin-left:0.75em;} 		
		
@media only screen and (max-width:479px) {
	viewport: { scalable: false }
	}