* { margin: 0; padding: 0; }

body {
	background: url(background2.jpg);
	background-position: left top;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: #ffffff;
	font-family: 'Verdana', sans-serif;
	color: #000;
}
#container {
	margin: 0 4% 0 4%;
}
#banner {
	/*background-image:url(banner4.gif);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 70%;*/
	height: auto;
	width: 100%;
	margin: 3% 0 3% 0;
	float: left;
	}
	#banner img {width: 70%;
	margin: 0 15% 0 15%;
	}
	
	
/*#welcome {
	
	
	
	float:left;
	width: 90%;
background:rgba(83, 107, 141,0.4);

	margin: 0 10% 0 10%;
	font-size: 1.3em;
	color:#333;
	padding: 0 1em;

}*/
h1 {
	

}
#songs h1 {
	text-align: center;
}
#catalogue h1, #contact h1 {
	/* [disabled]text-transform:lowercase; */
	letter-spacing: 6px;
	color:#f00e00;
	line-height: 28px;
	font-weight: normal;
	
	}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #0000B9;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6F0099;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}



h2 {
/*	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
*/	font-size: 1.4em;
	color: #4389E9;
	margin-top: 10px;
}

#topnav {
	
	}
#topnav ul{


}
#topnav li {
	list-style: none;
	font-size: 1.5em;
	text-align: center;
	letter-spacing: 1px;
	float:left;
	padding: 1em 2% 0 2%;
	width: 29%;
}
/*#topnav  li:nth-child(2){
	width: 29%;
}#topnav  li:nth-child(3){
	width: 29%;
}#topnav  li:nth-child(4){
	width: 14%;
}*/
#topnav li a {

	color: #f00e00;
	text-transform: uppercase;
	
}
#home #topnav li.home a, #hooks #topnav li.hooks a, #catalogue #topnav li.catalogue a, #contact #topnav li.contact a {
	color: #950700;

/*	text-decoration:underline;
*/}
ul#topnav li:hover a {
	color: #B00900;
	/* [disabled]background: #0c610e;
	text-shadow: none;
	background-color: #869DAF;

*/
}
#feature {
	float:right;}

#error_box{
	color: #FF0000;
	font-weight: bold;
}

#album, #contact_content {
	clear:both;
	width: 80%;
	margin: 0 auto;
}
#album h3{
	text-align:center;
	font-size: 1em;
	color: #F00E00;
	padding: 0 0 1em 0;
}
#album img {
	margin: 0 25% 0 25%;
	width: 50%;
}
#album_title{
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	color: #272795;
	width: 100%;
	
	}
.album_column {
	float: left;
	width: 50%;
}
.album_column_centre {
	margin: 0 auto 0 auto;
}
#catalog_album .album_column {
	margin-top: 10px;
}/*
.right .album_column {
	float: right;
}
*/

.album_column ul, #feature li {
	
/*	margin: 0 0px 20px 0;
*/}
.album_column li, #feature li {
	
	list-style-type: none;
		background:rgba(83, 107, 141,0.4);
	display: block;
	padding-top: 7px;
	padding-right: 0.5em;
	padding-bottom: 8px;
	padding-left: 2.4em;
	
}

.smaller {
	font-size: 0.85em;
}
.album_column  li,  #feature a li {
	margin: 3px 18px 0 0px;
	background-image:  	url("play_arrow_03.gif");
	background-repeat: no-repeat;
	background-position: 10px 6px;
	color:#333;
	font-size: .85em;

}
/*.album_column a:hover li, .album_column a:active li, .album_column a:focus li {
	background-image: url("play_arrow_02.gif");
	color: #fff;
}
.album_column h3, */.set_cover h3 {
	color: #CCC;
	font-size: 2em;
	/* [disabled]font-weight: bold;
*/
	padding: 10px 0 0 20px;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
}
#catalog_album {
	clear:both;
	width: 80%;
	height:5em;
	margin: 0 auto;
	
}
#player_container {
	width: 420px;
	margin: 0px auto 0 auto;
	padding-top:20px;
	display: block;
	clear:both;
}
/*#home div.jp-interface {
    background-color: rgb(170, 181, 202);

}*/
#home div.jp-audio, div.jp-audio-stream{
	border: thin solid #333;
}
/* Move controls to the right to increase width of player
#home div.jp-audio div.jp-type-single div.jp-progress {
/*    width: 360px;
}
#home div.jp-audio div.jp-volume-bar {
    
/*    left: 330px;
*left: 530px;
}
#home div.jp-audio a.jp-volume-max, div.jp-audio-stream a.jp-volume-max {
    margin-left: 256px; /*56
}*/
#lyrics {
	background:rgba(83, 107, 141,0.25);
	overflow-y: scroll;
	height: 450px;
	/*float: left;*/
	border: thin solid #333;
	margin: 20px auto 0 auto;
	text-align: center;
	width: 75%;
	padding: 0 1em;
}
 #lyrics p {
	padding: 0;
	font-style:normal;
}
#lyrics h4 {
	color:#f00e00;
	margin: 1.4em 0 1em 0;
	font-size:1.4em;
}
#lyrics p {
	font-size: 0.85em;
}

.subtitle {
	font-size: smaller;
	padding-top: 2px;
	float:right;
	/*visibility:hidden;*/
	}		
.genre {
	font-size: smaller;
	padding-top: 2px;
	float:right;
	/*visibility:hidden;*/
	}
.select_genre {
	font-size:1em;
}
.select_genre_dropdown{
	font-size:0.9em; 
	}

/* ~~ The footer ~~ */
footer {
	padding: 8px 0 8px 0;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both;
	text-align: center;
	color: #ccc;
	background:rgba(83, 107, 141, 1);
	font-size: .8em;
	margin: 10px 0 0 0;/* opacity:0.8;
	filter:alpha(opacity=80); 
	For IE8 and earlier */

}
@media screen and (max-width: 844px) {
	body {font-size: 110%; }
	#topnav li  {
		
		font-size: 1em;
		/*padding: 1em 5% 0 0;*/
	}
	.album_column  li {
       height: 2em;
	}
/*	.genre {visibility:hidden;}
*/	
}
@media screen and (max-width: 570px) {
	body {font-size: 120%; }
	.album_column {
       width: 100%;
	   float:none;
	}
	#topnav li  {
		width: 100%;
		float:none;
		margin: 0 auto;
	}
}