html {
	height: 100%;
}

body {
	background: url("./images/background.png") repeat-x #000000;
	overflow: hidden;
	height: 100%;
}

#LeftPane {
	width: 25%;
	float: left;
}

#RightPane {
	width: 75%;
	height: 100%;
	float: right;
	overflow: hidden;
	position: relative;
	color: #ffffff;
}

#RightPane ul {
	list-style: none;
}

ul.Playlist {
	list-style: none;
	padding-left: 10px;
}

ul.Playlist li a {
	color: #ffffff;
	font: bold 20px "Trebuchet MS", "Helvetica", Sans-serif;	
	text-decoration: none;
	padding: 8px 0px 0px 5px;
	color: #ffffff;
}

ol.Playlist {
	display: none;
}

ol.Playlist li {
	color: #ffffff;
	font: bold 14px "Trebuchet MS", "Helvetica", Sans-serif;	
	height: 27px;
	margin-bottom: 5px;
	padding: 8px 0px 0px 40px;
	background-repeat: no-repeat;
}

ol.Playlist li.playing {
	background-color: #940e23;
}

ol.Playlist li:hover {
	background-color: #b55646;
	cursor: pointer;
}

.TopBar ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.TopBar ul li {
	display: inline;
	float: left;
	height: 19px;
}
	
.TopBar ul li.Item {
	background-color: #940e23;
	color: #ffffff;
	font: bold 14px "Trebuchet MS", "Helvetica", Sans-serif;
}

.TopBar ul li.Selected {
	background-color: #b55646;
}

.TopBar ul li.Item a, ul li.Selected a {
	font: 14px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #ffffff;
	text-decoration: none;
	padding: 0px 5px 0px 5px;
}

#SongList {
	padding: 10px;
	overflow: scroll;
}

#SongList ul {
	margin: 0px;
	display: none;
	list-style: none;
}

#SongList ul li {
	font: 14px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #ffffff;
}


#SongList ul li a {
	font: 14px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #ffffff;
	cursor: pointer;
	text-decoration: none;
}

#SongList ul li a.edit {
	font-weight: bold;
	padding-bottom: 5px;
}

#SongList ul li a:hover {
	color: #940e23;
}

#Slides {
	position: relative;
	padding: 20px;
}

#Slides div.slide {
	float: left;
	height: 100%;
	overflow: hidden;
}

#Slides h1 {
	font: bold 24px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #ffffff;
}

#Control {
	height: 140px;
	text-align: center;
}

#Control img { padding: 0px 20px; }

#AlbumInfo ul { 
	list-style: none;
	margin: 0px 15px;
	padding: 0px;
	width: 450px;
}
#AlbumInfo img {
	display: block;
	height: 300px;
	width: 300px;
}

#AlbumInfo div > a {
	font: bold 18px "Trebuchet MS", Helvetica, Sans-serif;
	color: #fff;
	display: block;
	width: 300px;
	height: 32px;
	text-align: center;
	cursor: pointer;
	padding-top: 5px;
	background: #940e23;
	margin-top: 5px;
	text-transform: uppercase;
}

#AlbumInfo ul.search li {
	display: inline;
	float: left;
	text-align: center;
	padding: 10px;
}

#AlbumInfo ul li {
	font: 14px "Trebuchet MS", Helvetica, Sans-serif;
	color: #fff;
}

#AlbumInfo ul li:hover { font-weight: bold; }

#AlbumInfo ul li a {
	margin: 0px;
	cursor: pointer;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	display: block;
	float: left;
}

#AlbumInfo ul li a:hover { background-position: 0px -16px; }
#AlbumInfo ul li a.edit { background-image: url("./images/edit.png"); }
#AlbumInfo ul li a.delete { background-image: url("./images/delete.png"); }


#AlbumInfo ul li a span {
	display: none;
}

div.Section {
	background-repeat: no-repeat;
	height: 35px;
	margin: 15px 0px;
	clear: both;
}

div.Section:hover {
	background-color: #b55646;
	background-repeat: none;
	cursor: pointer;
}

div.Section a.AlbumArt {
	height: 35px;
	width: 35px;
	text-decoration: none;
	background: url("./images/addall.png") no-repeat;
	display: block;
	float: left;
}

div.Section a.AlbumArt:hover { background-position: bottom; }

div.Section div.AlbumTitle {
	text-decoration: none;
	float: left;
	font: bold 14px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #fff;
	padding-left: 10px;
}

/* Generic classes */
li.LeftCap {
	width: 9px;
	height: 19px;
	background: url("./images/endcaps.png") no-repeat;
}

li.RightCap {
	width: 9px;
	background: transparent url("./images/endcaps.png") no-repeat -9px;
}

#Art {
	float: left; 
	height: 300px;
	width: 300px;
	overflow: hidden;
	background-repeat: no-repeat;
}

#Art img { display: none; }
#Art:hover img { display: block; }

#Stats {
	float: left;
	padding: 0px 10px;
	margin: 0px;
	width: 450px;
}

#Stats h1 {
	font: bold 30px "Trebuchet MS", "Helvetica", Sans-serif;
	margin: 0px;
	padding: 0px;
	color: #b55646;
}

#Stats h2 {
	font: bold 24px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	color: #fff;
}

#Current a {
	font: bold 24px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #ffffff;
	cursor: pointer;
}

#Current div.form {
	display: none;
}

#Current div input {
	font: bold 24px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #000;
	width: 400px;
	background: #fff;
}

#Current div p, #Art p {
	margin: 0px;
	padding: 0px;
	font: 14px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #fff;
	cursor: pointer;
	clear: both;
}

fieldset {
	border: 0px;
	font: bold 18px "Trebuchet MS", Helvetica, Sans-serif;
	color: #fff;
	clear: both;
}

fieldset legend {
	font: bold 18px "Trebuchet MS", Helvetica, Sans-serif;
	color: #fff;
}

dt {
	font: 14px "Trebuchet MS", Helvetica, Sans-serif;
	clear: both;
	color: #fff;
	float: left;
	width: 100px;
	text-align: right;
	margin-right: 10px;
}

dd {
	margin: 0px;
	float: left;
}
dd input[type="text"] {
	font: 14px "Trebuchet MS", Helvetica, Sans-serif;
	width: 300px;
}

input[type="submit"] { width: 100px; height: 25px; margin-left: 5px; }
form div { float: left; }
form div[class="nofloat"] { float: none; clear: both; }
form div[class="nofloat"] input { height: 40px; }

#Upload input[id="disc"] { width: 50px; }
#Upload input[id="track"] { width: 50px; }
#Upload input[id="year"] { width: 100px; }

#Upload h2 {
	font: bold 14px "Trebuchet MS", "Helvetica", Sans-serif;
	color: #fff;
}

#EditInfo ul {
	background: #fff;
	border: 1px solid #000;
	position: absolute;
	width: 300px;
}

#EditInfo ul li a {
	font: 14px "Trebuchet MS", Helvetica, Sans-serif;
	cursor: pointer;
	color: #000;
}

#EditInfo ul li a:hover { font-weight: bold; }

.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.hidden { display: none; }

h1.success { background-color: #9adc2f; }
h1.error { background-color: #b55646; }

#Controls { text-align: center; margin: 0px auto; }

#Controls a {
	cursor: pointer;
	display: block;
	height: 50px;
	width: 50px;
	float: left;
	margin: 0px 15px;
}

#Controls span {
	display: none;
}

a.prev { background: url("./images/prev.png") no-repeat center; }
a.next { background: url("./images/next.png") no-repeat center; }
a.control {	background: url("./images/control.png") no-repeat center top; }
a.play { background-position: 0px 0px; }
a.pause { background-position: 0px -50px; }