/* ALGEMENE INSTELLINGEN */

header, nav, footer{
	display: block;
}

html, body, form, fieldset, legend, ol, li, h1, h2, p{
	margin: 0;
	padding: 0;
}

/* BODY */
body{
	color: rgb(200,200,200);
	background-color: rgb(10,10,20);
	font-family: Calibri, Verdana, Geneva, sans-serif;
 	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0;
	padding-right: 0; 
	text-align: left;
}

/* CONTAINER */
div#container{
	margin: 0;
}

/* HEADER */
div#header{
	height: 20px;
	color: rgb(180,180,180);
	background-color: rgb(20,20,20);
	width: 100%; 
	margin-top: 10px;
	margin-bottom: 0px;
}

div#header h1{
	margin-left: 10px;
	font-size: 22px;
	font-weight: bold;
	color: rgb(200,200,200);
	margin-bottom: 0px;
}


/* USER */
div#user{
	height: 30px;
	background-color: rgb(10,10,20);
	color: rgb(180,180,180);
	width: 100%;
	font-size: 13px;
}

div#user p{
	text-align: right;	
}

div#user a{
	font-size: 13px;
	color: rgb(180,180,180);
	text-decoration: none;
}

div#user a:hover{
	color: rgb(220,220,220);
	text-decoration: none;
}

div#user a:active{
	color: rgb(220,220,220);
	text-decoration: underline;
}


div#user form{
	text-align: right;	
}


div#user input{
  background-color: rgb(30,30,30);
	color: rgb(180,180,180);
  font-size: small;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(100,100,100);
  margin-bottom: 1px;
	padding-left:5px;
}

div#user button{
  background-color: rgb(130,130,130);
  color: rgb(180,180,180);
  font-size: small;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(100,100,100);
  margin-bottom: 1px;
}

/* NAV */
div#nav ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 12px;
}

div#nav li{
	font-size: 15px;
    list-style:none;
    float:left;
    padding-top: 5px;
    padding-bottom: 5px; 
    padding-left: 20px;
    padding-right: 20px;
    border-right: 4px solid rgb(10,10,20);
	background-color: rgb(60,60,60);
	color: rgb(100,100,100);
    border-radius: 10px 10px 0px 0px;
}

div#nav li:hover {
		color: rgb(150,150,150);
}

div#nav li.active {
		background-color: rgb(100,100,100);
		color: rgb(200,200,200);
}


/* MAIN */
div#main{
	width: 100%;
	margin-top: 16px;
	background-color: rgb(100,100,100);
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
} 


/* MESSAGE */
div#message{
	margin-top: 10px;
	color: orange;
	font-size: 12px;
}


/* LOGIN */
div#login{
	margin-top: 10px;
	padding: 10px;
	background-color: rgb(90,90,90);
	border: 2px solid rgb(120,120,120);
	font-size: 14px;
    border-radius:10px;
}

div#login h2{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}

div#login a{
	color: rgb(200,200,200);
	text-decoration: underline;
}

div#login a:hover{
	color: rgb(220,220,220);
	text-decoration: underline;
}

div#login a:active{
	color: rgb(220,220,220);
	text-decoration: underline;
}

form li {
	margin-top: 5px;
}

form fieldset {
	margin-top: 20px;
	border: none;
}

form ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

form legend{
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
}

form label{
	border: none;
	width: 180px;
	display: block;
	float: left;
}

form input{
	background-color: rgb(200,200,200);
}

form select{
	background-color: rgb(200,200,200);
}

/* STATIONS */
div#stations{
	margin-top: 0px;
	padding: 10px;
	padding-top: 0px;
	background-color: rgb(90,90,90);
	border: 2px solid rgb(120,120,120);
	font-size: 14px;
}

div#stations h1{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

div#stations h2{
    margin-top: 20px;
}

div#stations a:link{
	text-decoration: none;
	color: rgb(200,200,200);
}

div#stations a:visited{
	text-decoration: none;
	color: rgb(200,200,200);
}

div#stations a:hover{
	text-decoration: none;
	font-size: 20px;
	color: white;
}

div#stations a:active{
	text-decoration: none;
	color: rgb(200,200,200);
}


/* COUNTRY */
div#country{
	margin-top: 0px;
	padding: 0px;
	vertical-align: middle;
}

div#country img{
	margin-right: 10px;
	border: 1px solid rgb(120,120,120);
}

div#country h1{
	vertical-align: middle;
	font-size: 32px;
	margin-top: 20px;
}

/* STATION */
div#station{
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 10px;
	background-color: rgb(70,70,70);
	border: 2px solid rgb(120,120,120);
	font-size: 14px;
	vertical-align: middle;
    border-radius:10px;
}

div#station:hover{
	background-color: rgb(60,60,60);
	border: 2px solid rgb(200,200,200);
}

div#station img{
	width: 50px;
	margin-right: 10px;
	border: 1px solid rgb(120,120,120);
}

div#stations h2{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
}


/* STATION.EDITING */
div#station.editing{
	margin-top: 10px;
	padding: 10px;
	background-color: rgb(40,40,40);
	border: 4px solid rgb(220,220,220);
	font-size: 14px;
	vertical-align: middle;
}

div#station.editing:hover{
	background-color: rgb(20,20,20);
	border: 4px solid rgb(220,220,220);
}

div#station.editing img{
	width: 50px;
	margin-right: 10px;
	border: 1px solid rgb(120,120,120);
}

div#stations.editing h2{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
}


/* FOOTER */
div#footer{
	font-size: 12px;
	color: rgb(80,80,80);
	background-color: rgb(10,10,20);
	padding-top: 8px;
	padding-bottom: 10px;
	text-align: center;
}

div#footer img{
	margin-left: 2px;
	width: 10px;
	border: 1px solid rgb(80,80,80);
}


ul#streamlist{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul#streamlist a:link{	
	text-decoration: none;
	font-size: 16px;
	color: rgb(180,180,180);
}


ul#streamlist a:active{
	text-decoration: none;
	font-size: 16px;
	color: white;
}

ul#streamlist a:visited{	
	text-decoration: none;
	font-size: 16px;
	color: rgb(180,180,180);
}

ul#streamlist a:hover{	
	text-decoration: none;
	font-size: 16px;
	color: white;
}

table, th, td {
	margin: 0;
	padding: 0;
	border-spacing: 0;
}

th {
	vertical-align:bottom;
}

tr {
	
}

td {
	
}

tfoot  td{
	padding-top: 10px;
}

span#button{
	color: rgb(255,255,255);
	font-size: 14px;		
	border: 1px solid rgb(120,120,120);		
	border-radius: 4px;
	/* background */
	background: rgb(192,192,192); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(192,192,192,1) 0%, rgba(197,197,197,1) 12%, rgba(201,201,201,1) 25%, rgba(191,191,191,1) 39%, rgba(181,181,181,1) 50%, rgba(166,166,166,1) 51%, rgba(172,172,172,1) 60%, rgba(181,181,181,1) 76%, rgba(176,176,176,1) 91%, rgba(172,172,172,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(192,192,192,1)), color-stop(12%,rgba(197,197,197,1)), color-stop(25%,rgba(201,201,201,1)), color-stop(39%,rgba(191,191,191,1)), color-stop(50%,rgba(181,181,181,1)), color-stop(51%,rgba(166,166,166,1)), color-stop(60%,rgba(172,172,172,1)), color-stop(76%,rgba(181,181,181,1)), color-stop(91%,rgba(176,176,176,1)), color-stop(100%,rgba(172,172,172,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(192,192,192,1) 0%,rgba(197,197,197,1) 12%,rgba(201,201,201,1) 25%,rgba(191,191,191,1) 39%,rgba(181,181,181,1) 50%,rgba(166,166,166,1) 51%,rgba(172,172,172,1) 60%,rgba(181,181,181,1) 76%,rgba(176,176,176,1) 91%,rgba(172,172,172,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(192,192,192,1) 0%,rgba(197,197,197,1) 12%,rgba(201,201,201,1) 25%,rgba(191,191,191,1) 39%,rgba(181,181,181,1) 50%,rgba(166,166,166,1) 51%,rgba(172,172,172,1) 60%,rgba(181,181,181,1) 76%,rgba(176,176,176,1) 91%,rgba(172,172,172,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(192,192,192,1) 0%,rgba(197,197,197,1) 12%,rgba(201,201,201,1) 25%,rgba(191,191,191,1) 39%,rgba(181,181,181,1) 50%,rgba(166,166,166,1) 51%,rgba(172,172,172,1) 60%,rgba(181,181,181,1) 76%,rgba(176,176,176,1) 91%,rgba(172,172,172,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(192,192,192,1) 0%,rgba(197,197,197,1) 12%,rgba(201,201,201,1) 25%,rgba(191,191,191,1) 39%,rgba(181,181,181,1) 50%,rgba(166,166,166,1) 51%,rgba(172,172,172,1) 60%,rgba(181,181,181,1) 76%,rgba(176,176,176,1) 91%,rgba(172,172,172,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c0c0', endColorstr='#acacac',GradientType=0 ); /* IE6-9 */
}

span#button a:link{
	font-size: 14px;	
	padding-left: 5px;
	padding-right: 5px;
	color: rgb(255,255,255);
	text-decoration: none;
}

span#button a:visited{
	font-size: 14px;	
	padding-left: 5px;
	padding-right: 5px;
	color: rgb(255,255,255);
	background-color: #CCC;
	text-decoration: none;
}

span#button a:hover{
	font-size: 14px;	
	padding-left: 5px;
	padding-right: 5px;
	color: rgb(50,50,50);
	/*background-color: #CCC;*/
	text-decoration: none;		border-radius: 4px;
	/* background */
	background: rgb(192,192,192); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(192,192,192,1) 0%, rgba(197,197,197,1) 12%, rgba(201,201,201,1) 25%, rgba(191,191,191,1) 39%, rgba(181,181,181,1) 50%, rgba(166,166,166,1) 51%, rgba(172,172,172,1) 60%, rgba(181,181,181,1) 76%, rgba(176,176,176,1) 91%, rgba(172,172,172,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(192,192,192,1)), color-stop(12%,rgba(197,197,197,1)), color-stop(25%,rgba(201,201,201,1)), color-stop(39%,rgba(191,191,191,1)), color-stop(50%,rgba(181,181,181,1)), color-stop(51%,rgba(166,166,166,1)), color-stop(60%,rgba(172,172,172,1)), color-stop(76%,rgba(181,181,181,1)), color-stop(91%,rgba(176,176,176,1)), color-stop(100%,rgba(172,172,172,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(192,192,192,1) 0%,rgba(197,197,197,1) 12%,rgba(201,201,201,1) 25%,rgba(191,191,191,1) 39%,rgba(181,181,181,1) 50%,rgba(166,166,166,1) 51%,rgba(172,172,172,1) 60%,rgba(181,181,181,1) 76%,rgba(176,176,176,1) 91%,rgba(172,172,172,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(192,192,192,1) 0%,rgba(197,197,197,1) 12%,rgba(201,201,201,1) 25%,rgba(191,191,191,1) 39%,rgba(181,181,181,1) 50%,rgba(166,166,166,1) 51%,rgba(172,172,172,1) 60%,rgba(181,181,181,1) 76%,rgba(176,176,176,1) 91%,rgba(172,172,172,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(192,192,192,1) 0%,rgba(197,197,197,1) 12%,rgba(201,201,201,1) 25%,rgba(191,191,191,1) 39%,rgba(181,181,181,1) 50%,rgba(166,166,166,1) 51%,rgba(172,172,172,1) 60%,rgba(181,181,181,1) 76%,rgba(176,176,176,1) 91%,rgba(172,172,172,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(192,192,192,1) 0%,rgba(197,197,197,1) 12%,rgba(201,201,201,1) 25%,rgba(191,191,191,1) 39%,rgba(181,181,181,1) 50%,rgba(166,166,166,1) 51%,rgba(172,172,172,1) 60%,rgba(181,181,181,1) 76%,rgba(176,176,176,1) 91%,rgba(172,172,172,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c0c0', endColorstr='#acacac',GradientType=0 ); /* IE6-9 */	
}

span#button a:active{
	font-size: 14px;	
	padding-left: 5px;
	padding-right: 5px;
	color: rgb(0,0,75);
	text-decoration: none;
}

div#flags img{
	margin-right: 2px;
	border: 2px solid rgb(120,120,120);
	opacity:0.3;
	filter:alpha(opacity=30); /* For IE8 and earlier */
}

div#flags img.selected{
	border: 2px solid rgb(180,180,180);
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

div#flags img:hover{
	border: 2px solid rgb(180,180,180);
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

div#flags img.selected:hover{
	border: 2px solid rgb(180,180,180);
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

div#flags a:hover{
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	font-size: 1px;
	color: white;
}

div#heart {
	padding-top: 15px;
	padding-left: 16px;
	padding-right: 0px;
	padding-bottom: 0px;
}

a.nofavourite {
display: block;
width: 20px;
height: 20px;
background: transparent url(images/heart_black.png) no-repeat;
}

a.nofavourite:hover {
background: transparent url(images/heart_grey.png) no-repeat;
}

a.favourite {
display: block;
width: 20px;
height: 20px;
background: transparent url(images/heart_red.png) no-repeat;
}

a.favourite:hover {
background: transparent url(images/heart_red.png) no-repeat;
}


div#stationinfo ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 12px;
}

div#stationinfo li{
	font-size: 13px;
  list-style:none;
  float:left;
  padding-top: 1px;
  padding-bottom: 1px; 
  padding-left: 8px;
  padding-right: 8px;
  margin-right: 4px;
	margin-bottom: 4px;
	background-color: rgb(110,110,110);
	color: rgb(30,30,30);
	border: 1px solid rgb(60,60,60);
}


div#buttonlist ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 12px;
}

div#buttonlist li{
  list-style:none;
  float:left;
  padding-top: 1px;
  padding-bottom: 1px; 
  padding-left: 0px;
  padding-right: 4px;
	margin-top: 4px;
  margin-right: 4px;
	margin-bottom: 4px;
}

span#listbutton{
	color: rgb(20,20,20);
	font-size: 13px;		
	border: 1px solid rgb(180,180,180);		
	background: rgb(130,130,130); 
}

span#listbutton a:link{
	border: 1px solid rgb(180,180,180);		
	font-size: 13px;
	color: rgb(20,20,20);
	padding-left: 4px;
	padding-right: 4px;
}

span#listbutton a:visited{
	border: 1px solid rgb(180,180,180);		
	font-size: 13px;
	color: rgb(20,20,20);
	padding-left: 4px;
	padding-right: 4px;
}


span#listbutton a:hover{
	border: 1px solid rgb(220,220,220);		
	font-size: 13px;	
	color: rgb(230,230,230);
	padding-left: 4px;
	padding-right: 4px;
}

span#delstream a:link{
	color: rgb(180,0,0);
}
span#delstream a:visited{
	color: rgb(180,0,0);
}
span#delstream a:active{
	color: rgb(180,0,0);
}
span#delstream a:hover{
	color: rgb(255,0,0);
}

span#delstation{
	font-size: 13px;
}

span#delstation a:link{
	color: rgb(180,0,0);
	font-size: 13px;
}
span#delstation a:visited{
	color: rgb(180,0,0);
	font-size: 13px;
}
span#delstation a:active{
	color: rgb(180,0,0);
	font-size: 13px;
}
span#delstation a:hover{
	color: rgb(255,0,0);
	font-size: 13px;
}