/* -------------
Tablet CSS
------------- */
@media screen and (max-width : 1200px) {
	html{
		margin-top: 0px;
		background: url('/images/background.jpg') no-repeat fixed !important;
	        -webkit-background-size: cover;
	        -moz-background-size: cover;
	        -o-background-size: cover;
	        background-size: cover;
	}
	body{
		width: 100%;
	}
	#box_logo{
		position: relative;
		padding: 15px 0px;
		width: 100%;
		height: auto;
		margin: auto;
		max-width: 350px;
	}
	#logo_login{
		position: relative;
		width: 98%;
		padding: 0% 1%;
		padding-left: 0px;
		-webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
			-moz-animation: fadein 4s; /* Firefox < 16 */
		-ms-animation: fadein 4s; /* Internet Explorer */
	 	-o-animation: fadein 4s; /* Opera < 12.1 */
	    animation: fadein 4s;
	}
	#content{
		float: left;
		width: 98%;
		padding: 0% 1%;
		margin: 0;
		min-width: 350px !important;
	}
	#head_server{
		display: none;
	}
	#head_about{
		display: none;
	}
	#head_settings{
		display: none;
	}
	.webplayer{
		display: none;
	}
	#station_name{
		width: 38%;
	}
	.status_alarme{
		width: 33%;
	}
	#settings{
		width: 5.5%;
	}
	#trash{
		width: 5%;
	}
	#log{
		width: 5%;
	}
	.volume_control{
		width: 80px;
	}
	#pm_counter_1{
		display: none;
	}
	#pm_counter_2{
		display: none;
	}
}

/* -------------
Phaplet CSS
------------- */
@media screen and (max-width : 950px) {
	#head_wrapper_top{
		width: 98%;
		padding: 5px 1%;
		float: left;
		height: auto;
		border-bottom: 2px;
		border-style: solid;
		border-color: white;
	}	
	#box_logo{
		position: relative;
		padding: 15px 0px;
		width: 100%;
		height: auto;
		margin: auto;
		max-width: 250px;
	}
	#logo_login{
		position: relative;
		width: 98%;
		padding: 0% 1%;
		padding-left: 0px;
		-webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
			-moz-animation: fadein 4s; /* Firefox < 16 */
		-ms-animation: fadein 4s; /* Internet Explorer */
	 	-o-animation: fadein 4s; /* Opera < 12.1 */
	    animation: fadein 4s;
	}
	#station_name{
		width: 48%;
	}
	.status_alarme{
		width: 23%;
	}
	#settings{
		display: none;
	}
	#trash{
		display: none;
	}
	.vertical_div_box_alarms{
		display: none;
	}
	#log{
		width: 6%;
		padding-right: 1%;
	}
	#add_button_stream{
		display: none;
	}
}
@media screen and (max-width : 850px) {
	/* Lightboxen */
	#box_screen_form {
	    position: absolute;
	    margin-left: 0;
	    margin-top: 0;
	    left: 0;
	    width: 98%;
	    height: 100%;
	    padding: 0% 1%;
	    border: 0px solid #FFF;
	}
	#popup_large_drag{
		display: none;
	}
	#close_log{
		display: none;
	}
	/* Ende Lightboxen */
	/* Log anpasssen */
	.log_filename{
		display: none;
	}
	.log_delete{
		display: none;
	}
	.log_kategorie{
		width: 17%;
	}
	.log_timestamp{
		width: 23%;
	}
	.log_songinfo{
		width: 47%;
	}
	.log_icon{
		width: 4%;
	}
	/* Ende Log anpassen */
	.screen_account{
		padding-top: 0px;
	}
	#logo img{
		padding-top: 0px;
	}
	.volume_control{
		display: none;
	}
	#log{
		width: 6.5%;
	}
	.listeners{
		display: none;
	}
}
@media screen and (max-width : 700px) {
	#headtitle{
		display: none;
	}
	/* Log anpasssen */
	.log_icon{
		display: none;
	}
	#kat_txt_mob{
		display: block;
	}
	#kat_txt{
		display: none;
	}
	.log_kategorie{
		width: 12%;
	}
	.log_timestamp{
		width: 32%;
	}
	.log_songinfo{
		width: 47%;
	}
	/* Ende Log anpassen */
	#txt_toogle{
		display: none;
	}
	.status_toogle{
		width: 4%;
	}
	#station_name{
		width: 52%;
	}
}
@media screen and (max-width : 500px) {
	/* Log anpasssen */
	#kat_txt_mob{
		display: none;
	}
	#kat_txt{
		display: block;
	}
	.log_icon{
		display: block;
	}
	.log_songinfo{
		display: none;
	}
	.log_status{
		width: 3%;
	}
	.log_icon{
		width: 8%;
	}
	.log_kategorie{
		width: 35%;
	}
	.log_timestamp{
		width: 49%;
	}
	/* Ende Log anpassen */
}

/* -------------
Mobile CSS
------------- */
@media screen and (max-width : 470px) {
	#station_name{
		width: 55%;
	}
	.status_alarme{
		width: 15%;
	}
	#logo{
		width: 140px;
	}
	#screen_time{
		display: none;
	}
	.screen_account{
		min-width: 200px;
	}
	/* Player */
	#alarm_txt_mob{
		display: block;
	}
	#alarm_txt{
		display: none;
	}
}