/*reset.css*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
/*fonts.css*/body{font:13px helvetica,arial,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% helvetica,arial,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}

body{
	text-align: left;
	padding-top: 20px;
}

body a{
	color: #f00;
	text-decoration: none;
}

body a:hover{
	text-decoration: underline;
}

div#wrapper{
	position: relative;
	width: 1024px;
	margin: 0 auto;
	
}

body #audio{
	width: 640px;
	height: 30px;
}

img#cover{
	float: left;
	padding-right: 30px;
}

h1,h2,h3{
	font-family: Times;
}
h1{
	font-size: 2em;
}

h2{
	font-size: 1.5em;
}
/* Songs */
ol#songs{
	width: 200px;
	float: left;
	margin-top: 1em;
	list-style-position: inside;
}
ol#songs li{
	list-style-type: decimal-leading-zero;
	padding: 2px 5px;
}


ol.playing li.current,ul.playing li.playing{
	background: #FF0300;
}
ul.playing li.playing .playpause{
	color: #a1a1a1 !important;
}

ol.playing li.current a{
	color: #fff !important;
}
div#audiocontainer{
	padding-top: 10px;
	clear: both;
}
div#audiocontainer audio{
	width: 100%;
}

/* Look disabled when a sample is playing */
ol#songs.playing a{
	color: #f00;
}

ol#songs a{
	color: #a1a1a1;
}



/* Samples */
ul#samples{
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid #a1a1a1;
	height: 361px;
	background: #fff;
	color: #000;
	overflow-y: scroll;
	border-bottom: none;
	text-align: left;
	width: 450px;
}
ul#samples img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
}

ul#samples li{
	background: transparent url(../i/cd.png) 40px 40px no-repeat;
	padding-left: 110px;
	position: relative;
	height: 100px;
	border-bottom: 1px solid #a1a1a1;
	
}

ul#samples li.loading{
	background: url(../i/loading.gif) 100% 40% no-repeat;
}

ul#samples a.playpause{
	margin-top: 1em;
	cursor: pointer;
	display: block;
	width: 200px;
	height: 16px;
	text-indent: 20px;
	overflow: hidden;
	background: url(../i/control_play.png) top left no-repeat;
}

ul#samples.playing li.playing a.playpause{
	background: url(../i/control_pause.png) top left no-repeat !important;
}

ul#samples a.spotify{
	cursor: pointer;
	display: block;
	width: 200px;
	height: 16px;
	text-indent: 20px;
	overflow: hidden;
	background: url(../i/spotify.png) top left no-repeat;
}

/* Look disabled when a sample is playing */

ul#samples .playpause,ul#samples.playing li.playing a{
	color: #f00;
}

ul#samples.playing .playpause{
	color: #a1a1a1;
}


ul#samples li audio{
	display: none;
}

div.about{
	float: left;
	margin-top: 0.5em;
	text-align: left;
	width: 500px;
}

div.about p{
	margin-bottom: 1em;
}

div#about2{
	padding-left: 20px;
}

div#about3{
	margin-top: 0em;
	width: 100%;
}

/* Progress */
#progressbar{
	width: 1024px;
	height: 200px;
}


.hide{
	display: none;
}

#caveats{
	padding-left: 2em;
	list-style: square;
	margin-bottom: 4em;
}