/* CSS Document */

body {font-family:Verdana, Geneva, sans-serif;}

h2 {
 font-family:Verdana, Geneva, sans-serif;
 font-size: 14px;	
 margin-top: 0.2rem;
}

h1, div#main h2 {text-align: center;}

div#main h2 {font-size: 1.2rem;}

div#wrapper {padding: 1rem;}

div#main {
	padding: 0%;
	float: left;
}

div.content {
	width: 96%;
	padding: 2%;
	float: left;
	border: #1974bf solid 2px;	
	border-radius: 20px;
	margin-bottom: 1rem;
	background-color: beige;
}

div#right {
	float: left;
/*
	border: #1974bf solid 2px;	
    border-radius: 20px;
*/
}

div#playlist {
	float: left;
	border: #1974bf solid 2px;	
    border-radius: 20px;
 	font-family:Verdana, Geneva, sans-serif;
	font-size: 1rem;
	background-color: #c6e5ef;
}


@media only screen and (min-width:1024px) {
	div#main {width: 63%;}
	div#right {width: 28%; padding: 0 2%; margin-left: 2%;}
	div#playlist {width: 100%; padding: 1rem;}
}
@media all and (orientation: portrait) and (max-width:1023px) {
	div#main {width: 100%;}
	div#right {width: 100%; padding: 0; margin: 0;}
	div#playlist {width: 96%; padding: 2%;}
}


form#frm_play, form#frm_playall {
	width: 60%;
	margin: 0 auto;
}

.button {
	background-color: #DDD;
	border: 1px solid black;
    border-radius: 8px;
	font-size: 1.2rem;
}

.button:hover {
	background-color: #EEE;
}

.error {
	width: 90%;
	float: left;
	color: red;
	background-color: #eed1ce;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding: 0.5rem;
	margin: 1rem 5%;	
}

hr.cutoff {
    border: 3px dashed #ff0000;
    border-style: none none dotted; 
    color: #fff; 
    background-color: #fff;
}

hr.divider {margin: 1.2rem 0 1rem;}

td, select, input {font-size:18px;}

select {border: 1px solid black;}