@charset "UTF-8";
/* CSS Document */
body {
	background-color: #000;
	font-size: 18px;
	line-height: 18px;
	font-family: 'Black Ops One', cursive;
	color:#33FFFF;
}

a {
	color:#000;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

#wrapper {
	background-image:url(../images/radio.jpg);
	height: 518px;
	width: 900px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -450px;
	margin-top: -259px;
}


#wijzer {
	position: absolute;
	left: 80px;
	top: 69px;
}

#stations {
	position: absolute;
	left: 67px;
	top: 75px;
}

#foto {
	position: absolute;
	left: 649px;
	top: 58px;
}

#lijst {
	position: absolute;
	left: 635px;
	top: 48px;
}

#butL {
	position: absolute;
	left: 70px;
	top: 347px;
}

#butR {
	position: absolute;
	left: 461px;
	top: 347px;
}
#topL {
	position: absolute;
	left: 82px;
	top: 358px;
}
#topR {
	position: absolute;
	left: 472px;
	top: 358px;
}

#volume {
	position: absolute;
	left: 581px;
	top: 384px;
	width:40px;
	height:38px;
	text-align:center;
	font-size: 14px;
	line-height: 14px;
	color:#000;
}

#tekst {
	position: absolute;
	left: 657px;
	top: 310px;
	width:179px;
	height:86px;
	text-align:center;
}
#MP3teller {
	position: absolute;
	left: 691px;
	top: 375px;
	width:50px;
	height:43px;
	text-align:right;
	font-size: 14px;
	line-height: 14px;
}

#divider {
	position: absolute;
	left: 741px;
	top: 375px;
	width:10px;
	height:43px;
	text-align:center;
	font-size: 14px;
	line-height: 14px;
}

#MP3totaal {
	position: absolute;
	left: 751px;
	top: 375px;
	width:50px;
	height:43px;
	text-align:left;
	font-size: 14px;
	line-height: 14px;
}

#vlag {
	position: absolute;
	left: 15px;
	top: 419px;
	cursor: pointer;
}


#footer {
	position: absolute;
	left: 425px;
	top: 477px;
	width:50px;
	height:43px;
	text-align:center;
	font-size: 14px;
	line-height: 14px;
}

/* Groene highlights */

#playGroen {
	position: absolute;
	left: 104px;
	top: 258px;
}

#stopGroen {
	position: absolute;
	left: 204px;
	top: 261px;
}

#pauseGroen {
	position: absolute;
	left: 307px;
	top: 264px;
}

#muteGroen {
	position: absolute;
	left: 414px;
	top: 260px;
}

#downloadGroen {
	position: absolute;
	left: 516px;
	top: 262px;
}

/* Buttons */

#butPlay {
	position: absolute;
	left: 78px;
	top: 257px;
	cursor: pointer;
}

#butStop {
	position: absolute;
	left: 176px;
	top: 257px;
	cursor: pointer;
}

#butPause {
	position: absolute;
	left: 281px;
	top: 259px;
	cursor: pointer;
}

#butMute {
	position: absolute;
	left: 386px;
	top: 259px;
	cursor: pointer;
}

#butDownload {
	position: absolute;
	left: 489px;
	top: 259px;
	cursor: pointer;
}

#tuneDown {
	position: absolute;
	left: 76px;
	top: 372px;
	cursor: pointer;
}

#tuneUp {
	position: absolute;
	left: 134px;
	top: 371px;
	cursor: pointer;
}

#volumeDown {
	position: absolute;
	left: 472px;
	top: 370px;
	cursor: pointer;
}

#volumeUp {
	position: absolute;
	left: 524px;
	top: 370px;
	cursor: pointer;
}

#safariStart {
	height: 518px;
	width: 900px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -450px;
	margin-top: -259px;
	display:none;
	text-align:center;
	font-size:28px;
	line-height:26px;
	color:#CCC;
	background-color:#000;
}

#safariStart a {
	color:#CCC;
	text-decoration:underline;
	cursor:pointer;
}





/* Smaller than standard 960 (devices and browsers) */

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#wrapper {
		transform: scale(0.8);
	}
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#wrapper {
		transform: scale(0.5);
	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	#wrapper {
		transform: scale(0.4);
	}
}