Moved files to interface folder named brink

2026-05-16 00:25:31 +01:00 · 2012-03-21 13:32:41 +01:00
parent b565629b2d
commit c400908ab2
82 changed files with 5090 additions and 1076 deletions
--- a/data/css/data_table.css
+++ b/data/css/data_table.css
@@ -1,9 +1,12 @@
 .dataTables_wrapper {
-	border-radius: 5px;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	width: 100%;
-	background-color: #313131;
+	border-radius: 20px;
+	-webkit-border-radius: 20px;
+	-moz-border-radius: 20px;
+	width: 88%;
+	margin: 20px auto 0 auto;
+	padding: 25px;
+	background-color: white;
+	position: relative;
 	min-height: 155px;
 	clear: both;
 	_height: 302px;
@@ -23,25 +26,26 @@
 	text-align: center;
 	color: #999;
 	font-size: 14px;
-	background-color: #343434;
+	background-color: white;
 }

 .dataTables_length {
-	/*
-	 * Look in styles.css 
-	 * */
+	width: 40%;
+	float: left;
 }

 .dataTables_filter {
-	/*
-	 * Look in style.css
-	 * */
+	width: 50%;
+	float: right;
+	text-align: right;
+	margin-bottom: 15px;
 }

 .dataTables_info {
-	/*
-	 * Look in style.css
-	 * */
+	width: 50%;
+	float: left;
+	background-color: white;
+	font-weight: bold;
 }

 .dataTables_paginate {
@@ -49,7 +53,7 @@
 	* width: 50px;
 	float: right;
 	text-align: right;
-	margin-top: 15px;
+	background-color: white;
 }

 /* Pagination nested */
@@ -82,8 +86,7 @@
 * DataTables display
 */
 table.display {
-	margin: auto; 
-	width: 100%;
+	margin: 20px auto; 
 	clear: both;
 	
 	/* Note Firefox 3.5 and before have a bug with border-collapse
@@ -101,11 +104,10 @@ table.display {
 }

 table.display thead th {
-	padding: 3px 15px 6px 15px;
-	background-color: #414141;
-	color: White;
+	padding: 3px 18px 3px 10px;
+	background-color: white;
 	font-weight: bold;
-	font-size: 12px;
+	font-size: 16px;
 	cursor: pointer;
 	* cursor: hand;
 }
@@ -122,7 +124,7 @@ table.display tr.heading2 td {

 table.display td {
 	padding: 3px 10px;
-	font-size: 12px;
+	font-size: 16px;
 }

 table.display td.center {
@@ -163,47 +165,44 @@ table.display td.center {
 * DataTables row classes
 */
 table.display tr.odd.gradeA {
-	background-color: #546B00;
+	background-color: #ddffdd;
 }

 table.display tr.even.gradeA {
-	background-color: #445014;
+	background-color: #ddffdd;
 }

 table.display tr.odd.gradeC {
-	background-color: #7A51A5;
+	background-color: #ddddff;
 }

 table.display tr.even.gradeC {
-	background-color: #6A33A5;
+	background-color: #ddddff;
 }

-/*
- * GradeSkipped 
- * */
 table.display tr.odd.gradeX {
-	background-color: #4F0043;
+	background-color: #ffdddd;
 }

 table.display tr.even.gradeX {
-	background-color: #3B0F34;
+	background-color: #ffdddd;
 }

 table.display tr.odd.gradeU {
-	background-color: #28064C;
+	background-color: #ddd;
 }

 table.display tr.even.gradeU {
-	background-color: #241239;
+	background-color: #eee;
 }


 table.display tr.odd.gradeZ {
-	background-color: #313131;
+	background-color: #FCFAFA;
 }

 table.display tr.even.gradeZ {
-	background-color: #272727;
+	background-color: white;
 }


@@ -236,11 +235,10 @@ table.display tr.even.gradeZ {
 }

 .dataTables_empty {
-	color: #575757;
 	font-size: 24px;
 	text-align: center;
 	vertical-align: middle;
-	background-color: #343434; 
+	background-color: white; 
 	height: 50px;
 	width: 90%;
 }
@@ -274,49 +272,33 @@ td.details {

 .paging_full_numbers span.paginate_button,
 	.paging_full_numbers span.paginate_active {
-	border: 1px solid #000;
-	color: #000;
-	font-weight: bold;
-	padding: 3px 5px;
+	border: 1px solid #aaa;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	padding: 2px 5px;
 	margin: 0 3px;
 	cursor: pointer;
 	*cursor: hand;
-	border-radius: 3px;
-	text-shadow: rgb(255,255,255);
 }

 .paging_full_numbers span.paginate_button {
-	background-image: linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
-	background-image: -o-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
-	background-image: -moz-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
-	background-image: -webkit-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
-	background-image: -ms-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
-	border-bottom: 1px solid #000; 
+	background-color: #ddd;
 }

 .paging_full_numbers span.paginate_button:hover {
-	background-image: linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
-	background-image: -o-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
-	background-image: -moz-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
-	background-image: -webkit-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
-	background-image: -ms-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
-	border-bottom: 1px solid #000; 
-	color: #fff;
+	background-color: #ccc;
 }

 .paging_full_numbers span.paginate_active {
-	background-color: #800000;
-	color: #fff;
+	background-color: #99B3FF;
 }

 table.display tr.even.row_selected td {
-	background-color: #660000;
-	color: #fff;
+	background-color: #B0BED9;
 }

 table.display tr.odd.row_selected td {
-	background-color: #4d0000;
-	color: #fff;
+	background-color: #9FAFD1;
 }

 div.box {
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -0,0 +1,310 @@
+/*  HTML5 ✰ Boilerplate  */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after,
+q:before, q:after { content: ''; content: none; }
+ins { background-color: #ff9; color: #000; text-decoration: none; }
+mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+del { text-decoration: line-through; }
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+table { border-collapse: collapse; border-spacing: 0; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+input, select { vertical-align: middle; }
+
+body { font:13px/1.231 sans-serif; *font-size:small; } 
+select, input, textarea, button { font:99% sans-serif; }
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+html { overflow-y: scroll; }
+a:hover, a:active { outline: none; }
+ul, ol { margin-left: 2em; }
+ol { list-style-type: decimal; }
+nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
+small { font-size: 85%; }
+strong, th { font-weight: bold; }
+td { vertical-align: top; }
+
+sub, sup { font-size: 75%; line-height: 0; position: relative; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
+textarea { overflow: auto; }
+.ie6 legend, .ie7 legend { margin-left: -7px; } 
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+.ie6 input { vertical-align: text-bottom; }
+label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+button, input, select, textarea { margin: 0; }
+input:valid, textarea:valid   {  }
+input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
+.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
+
+::-moz-selection{ background: grey; color:#fff; text-shadow: none; }
+::selection { background: grey; color:#fff; text-shadow: none; }
+
+button {  width: auto; overflow: visible; }
+.ie7 img { -ms-interpolation-mode: bicubic; }
+
+body, select, input, textarea {  color: #444; }
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+
+/*
+    // ========================================== \\
+   ||                                              ||
+   ||               Custom Styles                  ||
+   ||                                              ||
+    \\ ========================================== //
+*/
+
+a:link {
+	color: #5E2612; 
+  	text-decoration: none; 
+  	}
+a:visited {
+  	color: #5E2612; 
+	text-decoration: none; 
+	}
+a:hover { /*this effect is not shown in NN4.xx*/
+  	color: #999999; 
+	text-decoration: underline;
+  	}
+a:active {/*colour in NN4.xx is red*/ 
+  	color: #5E2612; 
+  	text-decoration: underline; 
+	}
+a.blue {
+	color: blue;
+	}
+
+container {  }
+
+body { background-color: #EBF4FB; min-width: 935px; }
+
+header { min-height: 68px; width: 100%; min-width: 935px; padding-left: 0px; padding-right: 10px; background-color: #CDC9C9; position: fixed; z-index: 998; }
+
+h1 { font-size: 24px; }
+h2 { font-size: 20px; }
+h3 { font-size: 16px; }
+h4 { font-size: 14px; }
+
+p.indented { padding-top: 20px; margin-left: 20px; font-size: 14px; }
+p.center { text-align: center; font-size: 18px; }
+.smalltext2 { font-size: 12px; margin-left: 45px; }
+
+div#updatebar { text-align: center; min-width: 970px; width: 100%; background-color: light-blue; float: left; }
+div#logo { float: left; padding-left: 10px; }
+
+ul#nav { margin: 25px 0 0 0; float: left; list-style-type: none; }
+ul#nav li { margin: 40px 0px auto 10px;  display: inline; }
+ul#nav li a { padding: 5px; font-size: 16px; font-weight: bold; color: #330000; text-decoration: none; }
+ul#nav li a:hover { background-color: #a3e532; }
+
+div#subhead_container { height: 30px; width:100%; min-width: 1000px; background-color:#330000; float: left; list-style-type: none; z-index: 998; overflow: hidden; }
+ul#subhead_menu { margin-top: 5px; }
+ul#subhead_menu li { width: 100%; height: 100%; display: inline; }
+ul#subhead_menu li a { padding: 5px 15px 10px 15px; vertical-align: middle; color: white; font-size: 16px; text-decoration: none; }
+ul#subhead_menu li a:hover { width: 100%; height: 100%; background-color: #grey; }
+
+div#searchbar { margin: 24px 30px auto auto; float: right; }
+
+div#main { margin: 0; padding: 80px 0 0 0; }
+
+.table_wrapper { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; width: 88%; margin: 20px auto 0 auto; padding: 25px; background-color: white; position: relative; min-height: 200px; clear: both; _height: 302px; zoom: 1; }
+.manage_wrapper { width: 88%; margin: 20px auto 0 auto; padding: 25px; min-height: 150px; clear: both; _height: 302px; zoom: 1; }
+.table_wrapper_left { padding: 25px; background-color: #ffffff; float: left; width: 40%; min-height: 100px; margin-top: 25px; margin-left: 30px; margin-right: auto; -moz-border-radius: 20px; border-radius: 20px; }
+.table_wrapper_right{ padding: 25px; background-color: #ffffff; width: 40%; min-height: 100px; margin-top: 25px; margin-left: auto; margin-right: 30px; -moz-border-radius: 20px; border-radius: 20px; }
+
+.configtable { font-size: 14px; line-height:18px; }
+.configtable td { width: 350px; padding: 10px; }
+.configtable td#middle { vertical-align: middle; }
+
+table#artist_table { background-color: white; width: 100%; padding: 20px; }
+
+table#artist_table th#select { text-align: left; }
+table#artist_table th#name { text-align: left; min-width: 200px; }
+table#artist_table th#status { text-align: left; min-width: 50px; }
+table#artist_table th#album { text-align: left; min-width: 300px; }
+table#artist_table th#have { text-align: center; }
+table#artist_table td#name { vertical-align: middle; text-align: left; min-width:200px; }
+table#artist_table td#status { vertical-align: middle; text-align: left; min-width: 50px; }
+table#artist_table td#album { vertical-align: middle; text-align: left; min-width: 300px; }
+table#artist_table td#have { vertical-align: middle; }
+
+div#paddingheader { padding-top: 48px; font-size: 24px; font-weight: bold; text-align: center; }
+div#nopaddingheader { font-size: 24px; font-weight: bold; text-align: center; }
+table#album_table { background-color: white; }
+
+table#album_table th#select { vertical-align: middle; text-align: left; min-width: 10px; }
+table#album_table th#albumart { text-align: left; min-width: 50px; }
+table#album_table th#albumname { text-align: center; min-width: 150px; }
+table#album_table th#reldate { width: 175px; text-align: center; min-width: 70px; }
+table#album_table th#status { width: 175px; text-align: center; min-width: 80px; }
+table#album_table th#type { width: 175px; text-align: center; min-width: 100px; }
+table#album_table th#bitrate { text-align: center; min-width: 60px; }
+table#album_table td#select { vertical-align: middle; text-align: left; }
+table#album_table td#albumart { vertical-align: middle; text-align: left; }
+table#album_table td#albumname { vertical-align: middle; text-align: center; }
+table#album_table td#reldate { vertical-align: middle; text-align: center; }
+table#album_table td#status { vertical-align: middle; text-align: center; font-size: 13px; }
+table#album_table td#type { vertical-align: middle; text-align: center; }
+table#album_table td#have { vertical-align: middle; }
+table#album_table td#bitrate { vertical-align: middle; text-align: center; font-size: 13px; }
+
+img.albumArt { float: left; padding-right: 5px; }
+div#albumheader { padding-top: 48px; height: 200px; }
+div#track_wrapper { margin-left: -50px; padding-top: 20px; font-size: 16px; width: 100%; }
+
+table#track_table th#number { text-align: right; min-width: 10px; }
+table#track_table th#name { text-align: center; min-width: 350px; }
+table#track_table th#duration { width: 175px; text-align: center; min-width: 100px; }
+table#track_table th#location { text-align: center; width: 250px; }
+table#track_table th#bitrate { text-align: center; min-width: 75px; }
+
+table#track_table td#number { vertical-align: middle; text-align: right; }
+table#track_table td#name { vertical-align: middle; text-align: center; font-size: 15px; }
+table#track_table td#duration { vertical-align: middle; text-align: center; }
+table#track_table td#location { vertical-align: middle; text-align: center; font-size: 11px; }
+table#track_table td#bitrate { vertical-align: middle; text-align: center; font-size: 12px; }
+
+table#history_table { background-color: white; width: 100%; font-size: 13px; }
+
+table#history_table td#dateadded { vertical-align: middle; text-align: center; min-width: 150px; font-size: 14px; }
+table#history_table td#filename { vertical-align: middle; text-align: center; min-width: 100px; font-size: 15px; }
+table#history_table td#size { vertical-align: middle; text-align: center; min-width: 75px; font-size: 14px; }
+table#history_table td#status { vertical-align: middle; text-align: center; font-size: 14px; }
+table#history_table td#action { vertical-align: middle; text-align: center; font-size: 14px; }
+
+table#log_table { background-color: white; }
+
+table#log_table th#timestamp { text-align: left; min-width: 150px; }
+table#log_table th#level { text-align: left; min-width: 60px; }
+table#log_table th#message { text-align: left; min-width: 500px; }
+
+table#upcoming_table th#albumart { text-align: center; min-width: 50px; }
+table#upcoming_table th#albumname { text-align: center; min-width: 200px; }
+table#upcoming_table th#artistname { text-align: center; min-width: 150px; }
+table#upcoming_table th#reldate { text-align: center; min-width: 100px; }
+table#upcoming_table th#type { text-align: center; min-width: 75px; }
+
+table#upcoming_table td#select { vertical-align: middle; text-align: center; }
+table#upcoming_table td#albumart { vertical-align: middle; text-align: center; min-width: 50px; }
+table#upcoming_table td#albumname { vertical-align: middle; text-align: center; min-width: 200px; }
+table#upcoming_table td#artistname { vertical-align: middle; text-align: center; min-width: 150px; }
+table#upcoming_table td#reldate { vertical-align: middle; text-align: center; min-width: 100px; }
+table#upcoming_table td#type { vertical-align: middle; text-align: center; min-width: 75px; }
+table#upcoming_table td#status { vertical-align: middle; text-align: center; }
+
+table#wanted_table th#albumart { text-align: center; min-width: 50px; }
+table#wanted_table th#albumname { text-align: center; min-width: 200px; }
+table#wanted_table th#artistname { text-align: center; min-width: 150px; }
+table#wanted_table th#reldate { text-align: center; min-width: 100px; }
+table#wanted_table th#type { text-align: center; min-width: 75px; }
+
+table#wanted_table td#select { vertical-align: middle; text-align: center; }
+table#wanted_table td#albumart { vertical-align: middle; text-align: center; min-width: 50px; }
+table#wanted_table td#albumname { vertical-align: middle; text-align: center; min-width: 200px; }
+table#wanted_table td#artistname { vertical-align: middle; text-align: center; min-width: 150px; }
+table#wanted_table td#reldate { vertical-align: middle; text-align: center; min-width: 100px; }
+table#wanted_table td#type { vertical-align: middle; text-align: center; min-width: 75px; }
+table#wanted_table td#status { vertical-align: middle; text-align: center; }
+
+table#searchresults_table th#albumname { text-align: left; min-width: 225px; }
+table#searchresults_table th#artistname { text-align: center; min-width: 325px; }
+table#searchresults_table th#score { text-align: center; min-width: 75px; }
+
+table#searchresults_table td#albumname { vertical-align: middle; text-align: left; min-width: 200px; }
+table#searchresults_table td#artistname { vertical-align: middle; text-align: left; min-width: 300px; }
+table#searchresults_table td#score { vertical-align: middle; text-align: center; min-width: 75px; }
+
+div.progress-container { border: 1px solid #ccc; width: 100px; height: 14px; margin: 2px 5px 2px 0; padding: 1px; float: left; background: white; }
+div.progress-container > div { background-color: #a3e532; height: 14px; }
+.havetracks { font-size: 13px; margin-left: 36px; padding-bottom: 3px; vertical-align: middle; }
+
+footer { margin: 20px auto 20px auto; }
+div#version { text-align: center; font-weight: bold; }
+div#donate { text-align: center; margin: 20px auto 20px auto; }
+
+div#shutdown{ text-align: center; vertical-align: middle; }
+
+.cloudtag { padding-top: 30px; font-size:16px; }
+#cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
+#cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
+#cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
+#cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
+#cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
+#cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
+#cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
+#cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
+#cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
+#cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
+
+#cloud { padding: 2px; line-height: 1.5em; text-align: center; }
+#cloud a { padding: 0px; }
+#cloud { margin: 0; }
+#cloud li { display: inline; }
+
+
+
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.hidden { display: none; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+@media all and (orientation:portrait) {
+
+}
+
+@media all and (orientation:landscape) {
+
+}
+
+@media screen and (max-device-width: 480px) {
+
+  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
+}
+
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
+  -ms-filter: none !important; } 
+  a, a:visited { color: #444 !important; text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; }
+  tr, img { page-break-inside: avoid; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3{ page-break-after: avoid; }
+}
--- a/data/interfaces/brink/CSS/StyleSheet.css
+++ b/data/interfaces/brink/CSS/StyleSheet.css
@@ -77,16 +77,6 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; }
   ||                                              ||
    \\ ========================================== //
 */
-table thead.fixed
-{
-position: fixed;
-width: 100%;
-}
-table thead.fixed tr
-{
-display: block;
-width: 100%;
-}

 /*
 *	Univarsal 
@@ -105,7 +95,7 @@ width: 100%;
  *	Links Styles 
  * */
 a:link {
-	color: #fff;
+	color: rgb(240,240,240);
  	text-decoration: none; 
  	}
 a:visited {
@@ -113,31 +103,18 @@ a:visited {
 	text-decoration: none; 
 	}
 a:hover { /*this effect is not shown in NN4.xx*/
-  	color: #fff; 
+  	color: rgb(255,255,255); 
 	text-decoration: underline;
  	}
 a:active {/*colour in NN4.xx is red*/ 
  	color: #fff; 
  	text-decoration: underline; 
 	}
-a.blue {
-	color: blue;
-	}

 #container { width: 100%; margin: auto; }

 body { background-color: #313131; color: rgb(190,190,190); overflow: hidden; overflow-y: hidden; overflow-x: hidden; }

-
-
-table.display thead tr th 
-{
-border: 1px solid #000;
-color: #000;
-text-shadow: 1px 1px rgb(100,100,100);
-line-height: 100%;
-}
-
 h1,
 h1 a,
 h1 a:hover
@@ -175,16 +152,20 @@ box-shadow: 0px 0px 2px #000;

 div#logo 
 { 
-	padding-left: 10px;
+	padding-left: 5px;
 	height: 30px; 
 	width: 30px;
 }
 /*Update box*/
+div.btnClose:after
+{
+	content: "X";
+}
 div.btnClose 
 {
    overflow: hidden;
    -moz-border-radius: 0px 0px 0px 5px; -webkit-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px;
-    background-color: rgb(60,0,5);
+    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
    width: 20px;
    height: 20px;
@@ -240,30 +221,24 @@ ul#nav
 	width: 200px; 
 	padding: 0; 
 	margin: 0; 
-	background-color: rgba(0,0,0,0.2); 
+	background-color: rgba(255,255,255,0.1);
 	border-right: 1px solid #000; 
 	padding-top: 30px; 
 	z-index: 300;
 	box-shadow: 0px 0px 3px #000;
 }

-ul#nav li { display: block; width: 100%; padding: 0; margin: 0;}
-ul#nav li:hover { 
-display: block; 
-width: 100%; 
-background: rgba(0,0,0,0.2);
+ul#nav li  
+{
+    display: block; 
+    width: 100%; 
+    padding: 0; 
+    margin: 0;
 }
-
-ul#nav li.selected 
-{ 
-background-image: linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-background-image: -o-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-background-image: -moz-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-background-image: -webkit-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-background-image: -ms-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-border-bottom: 1px solid #000;
-border-top: 1px solid #000;
-font-weight: bold;
+ul#nav li:hover { 
+    display: block; 
+    width: 100%; 
+    background: rgba(0,0,0,0.2);
 }

 ul#nav li a 
@@ -333,35 +308,30 @@ ul#subhead_menu li a

 ul#subhead_menu li a:hover 
 {
-color: rgb(255,255,255);
-font-weight: bold;
+	color: rgb(255,255,255);
+	font-weight: bold;
 }

 /* Searchbar Styles */
 div#searchbar 
 { 
 	position: fixed;
+	padding-left: 16px;
 	top: 5px;
 	right: 20px;
-	border-radius: 20px; 
-	color: #fff;
-	background-color: rgb(70,0,10);
-	border-top: 1px solid rgb(90,0,20);
-	border-left: 1px solid rgb(90,0,20);
-	box-shadow: 1px 1px 2px rgb(240,0,20);
+	border-radius: 20px;
+	background-position: 5px center;
+	background-repeat: no-repeat;
 }
 div#searchbar input[type=text] { 
-background-color: rgb(70,0,10); 
-border-radius: 20px 0px 0px 20px; 
-color: #fff;
-padding: 2px 10px 2px 10px; 
-border: 0; 
-box-shadow: none;
+	background-color: rgba(0,0,0,0.0); 
+	color: #fff;
+	border: 0px; 
+	box-shadow: none;
 }
 div#searchbar select 
 { 
-	color: #fff;
-	background-color: rgb(80,0,10);
+	background-color: rgba(0,0,0,0.0);
 	border: 0;
 }
 div#searchbar input[type=submit] 
@@ -374,7 +344,6 @@ height: 22px;
 width: 40px;
 line-height: 13px;
 margin-top: -1px;
-margin-right: -15px;
 color: #000;
 text-align: center;
 }
@@ -409,7 +378,7 @@ div#main
 	font-size: 12px;
 	font-weight: bold;
 	color: rgb(20,0,5);
-	text-shadow: 1px 1px rgb(123,0,10);
+	text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
 }

 /*Filter text input styles*/
@@ -422,9 +391,9 @@ div#main
 	-moz-border-radius: 20px;
 	height: 12px;
 	padding-left: 10px; 
-	background-color: rgb(30,0,10); 
+	background-color: rgba(0,0,0,0.8); 
 	border: 1px solid #000;
-	box-shadow: 1px 1px 2px rgb(123,0,10);
+	box-shadow: 1px 1px 0px rgba(255,255,255,0.3);
 }

 .dataTables_length 
@@ -587,8 +556,8 @@ text-shadow: 1px 1px 0px rgb(173,61,0);
 .select{
 	position: absolute;
 	height: 20px;
-	width: 110px;
-	padding: 0 10px 0 8px;
+	width: 115px;
+	padding: 0px 15px 0px 10px;
 	color: #000;
 	font-weight: bold;
 	text-shadow: 1px 1px 0px rgb(170,170,170);
@@ -597,19 +566,13 @@ text-shadow: 1px 1px 0px rgb(173,61,0);
 	border-radius: 3px;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
-	box-shadow: 1px 1px 0px rgb(90,90,90);
+	box-shadow: 1px 1px 0px rgba(255,255,255,0.2);
 	border: 1px solid #000;
-	background-image: url(../images/select.png) right center;
-	background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-    background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-    background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-    background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-    background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-	background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-	background-position:  right;
+	background: url(../Images/sort_asc.png);
+	background-position: 98% 50%;
 	background-repeat: no-repeat;
-	overflow: hidden;
 	background-color: rgb(160,160,160);
+	overflow: hidden;
 }

 /*Tooltip*/
@@ -688,7 +651,7 @@ input[type="text"]
 	box-shadow: 1px 1px 1px rgb(70,70,70);
 }
 .manage_wrapper { width: 88%; margin: 20px auto 0 auto; padding: 25px; min-height: 150px; clear: both; _height: 302px; zoom: 1; }
-.table_wrapper_half { float: left; width: 50%; min-height: 100px; margin-top: 25px; }
+.table_wrapper_half { float: left; width: 50%; min-height: 100px; padding-bottom: 15px; }

 .configtable { font-size: 14px; line-height:18px; }
 .configtable td { width: 350px; padding: 10px; }
@@ -724,19 +687,29 @@ div#nopaddingheader { font-size: 24px; font-weight: bold; text-align: left; }

 table#album_table { width: 100%; }
 /* Album Tableheader*/
-table#album_table th#select { vertical-align: middle; text-align: left; min-width: 10px; }
-table#album_table th#albumart { text-align: left; min-width: 50px; }
-table#album_table th#albumname { text-align: left; min-width: 150px; }
-table#album_table th#reldate { width: 175px; text-align: left; min-width: 70px; }
-table#album_table th#status { width: 175px; text-align: left; min-width: 80px; }
-table#album_table th#type { width: 175px; text-align: left; min-width: 100px; }
-table#album_table th#bitrate { text-align: left; min-width: 60px; }
+table#album_table th#select { vertical-align: middle; text-align: left; width: 25px; }
+table#album_table th#albumart {vertical-align: middle; text-align: left; width: 70px; }
+table#album_table th#albumname {vertical-align: middle; text-align: left; min-width: 150px; }
+table#album_table th#reldate {vertical-align: middle; width: 175px; text-align: left; min-width: 70px; }
+table#album_table th#status {vertical-align: middle; width: 175px; text-align: left; min-width: 80px; }
+table#album_table th#type {vertical-align: middle; width: 175px; text-align: left; min-width: 60px; max-width: 100px; }
+table#album_table th#bitrate {vertical-align: middle; text-align: left; min-width: 60px; }
 /* Album tabledata */
 table#album_table td#select { vertical-align: middle; text-align: left; }
 table#album_table td#albumart { vertical-align: middle; text-align: left; }

 /* Album art image sizes */
-.album-art-small { float: left; border-radius: 8px; overflow: hidden; box-shadow: 0px 0px 3px #000; background-color: #000;}
+.album-art-small 
+{
+	margin: 3px;
+	float: left;
+	overflow: hidden; 
+	background-color: #000;
+	width: 60px;
+	height: 60px;
+	box-shadow: 1px 1px 1px #000; 
+	border-radius: 3px; 
+}
 .album-art-small img { width: 60px; height: 60px; z-index: 200; }
 .album-art-big 
 { 
@@ -867,7 +840,7 @@ div.progress-container
    width: 100%; 
    height: 15px; 
    margin: 2px 5px 2px 0px; 
-    background: rgb(30,30,30);
+    background-color: rgba(0,0,0,0.2);
    color: rgb(30,30,30); 
    text-shadow: 1px 1px rgb(50,50,50);
    text-align: center;
@@ -878,7 +851,7 @@ div.progress-container
 div.progress-container div  
 {
    height: 100%;
-    background-image: url(../images/progress.png);
+    background-color: rgba(255,255,255,0.1);
 }
 /*text format for match/procent*/
 .searchmatch,
@@ -967,4 +940,230 @@ div#shutdown{ text-align: center; vertical-align: middle; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
+}
+
+/********************************
+ *	Data_tables.css moved here  *
+ ********************************/
+
+table.display thead tr th 
+{
+	cursor: pointer;
+	* cursor: hand;
+	padding-left: 15px;
+	border: 1px solid #000;
+	color: #000;
+	text-shadow: 1px 1px rgba(255,255,255,0.2);
+	height: 20px;
+	line-height: 20px;
+	overflow: hidden;
+}
+
+table.display td 
+{
+	padding: 0px 5px 0px 15px;
+	font-size: 12px;
+}
+
+table.display tfoot th 
+{
+	padding: 3px 18px 3px 15px;
+	border-top: 1px solid black;
+	font-weight: bold;
+}
+
+table.display tr.heading2 td 
+{
+	border-bottom: 1px solid #aaa;
+}
+
+table.display td.center 
+{
+	text-align: center;
+}
+
+/*Sorting*/
+.sorting_asc {
+	background: url(../images/sort_asc.png) no-repeat center right;
+}
+
+.sorting_desc {
+	background: url(../images/sort_desc.png) no-repeat center right;
+}
+
+.sorting {
+	background: url(../images/sort_both.png) no-repeat center right;
+}
+
+.sorting_asc_disabled {
+	background: url(../images/sort_asc_disabled.png) no-repeat center right;
+}
+
+.sorting_desc_disabled {
+	background: url(../images/sort_desc_disabled.png) no-repeat center right;
+}
+
+/*
+ * Grades 
+ * */
+
+table.display tr.odd.gradeA {
+	background-color: #546B00;
+}
+
+table.display tr.even.gradeA {
+	background-color: #445014;
+}
+
+
+
+/*Wanted*/
+table.display tr.odd.gradeC {
+	background-color: #7A51A5;
+}
+
+table.display tr.even.gradeC {
+	background-color: #6A33A5;
+}
+
+/*
+ * GradeSkipped 
+ * */
+table.display tr.odd.gradeX {
+	background-color: #4F0043;
+}
+
+table.display tr.even.gradeX {
+	background-color: #3B0F34;
+}
+
+table.display tr.odd.gradeU {
+	background-color: #28064C;
+}
+
+table.display tr.even.gradeU {
+	background-color: #241239;
+}
+
+/*Skipped*/
+table.display tr.odd.gradeZ {
+	background-color: #373737;
+}
+
+table.display tr.even.gradeZ {
+	background-color: #313131;
+}
+
+.dataTables_scroll {
+	clear: both;
+}
+
+.dataTables_scrollBody {
+	*margin-top: -1px;
+}
+
+.top, .bottom {
+	padding: 15px;
+	background-color: #F5F5F5;
+	border: 1px solid #CCCCCC;
+}
+
+.top .dataTables_info {
+	float: none;
+}
+
+.clear {
+	clear: both;
+}
+
+.dataTables_empty {
+	color: #575757;
+	font-size: 24px;
+	text-align: center;
+	vertical-align: middle;
+	background-color: #343434; 
+	height: 50px;
+	width: 90%;
+}
+
+tfoot input {
+	margin: 0.5em 0;
+	width: 100%;
+	color: #444;
+}
+
+tfoot input.search_init {
+	color: #999;
+}
+
+td.group {
+	background-color: #d1cfd0;
+	border-bottom: 2px solid #A19B9E;
+	border-top: 2px solid #A19B9E;
+}
+
+td.details {
+	background-color: #d1cfd0;
+	border: 2px solid #A19B9E;
+}
+
+.paging_full_numbers {
+	width: 400px;
+	height: 22px;
+	line-height: 22px;
+}
+
+.paging_full_numbers span.paginate_button,
+ 	.paging_full_numbers span.paginate_active {
+	border: 1px solid #000;
+	color: #000;
+	font-weight: bold;
+	padding: 3px 5px;
+	margin: 0 3px;
+	cursor: pointer;
+	*cursor: hand;
+	border-radius: 3px;
+	text-shadow: rgb(255,255,255);
+}
+
+.paging_full_numbers span.paginate_button {
+	background-image: linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+	border-bottom: 1px solid #000; 
+}
+
+.paging_full_numbers span.paginate_button:hover {
+	background-image: linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+	border-bottom: 1px solid #000; 
+	color: #fff;
+}
+
+.paging_full_numbers span.paginate_active {
+	background-color: #800000;
+	color: #fff;
+}
+
+table.display tr.even.row_selected td {
+	background-color: #660000;
+	color: #fff;
+}
+
+table.display tr.odd.row_selected td {
+	background-color: #4d0000;
+	color: #fff;
+}
+
+div.box {
+	height: 100px;
+	padding: 10px;
+	overflow: auto;
+	border: 1px solid #8080FF;
+	background-color: #E5E5FF;
 }
--- a/data/interfaces/brink/CSS/data_table.css
+++ b/data/interfaces/brink/CSS/data_table.css
@@ -0,0 +1,143 @@
+.dataTables_wrapper {
+	border-radius: 5px;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	width: 100%;
+	background-color: #313131;
+	min-height: 155px;
+	clear: both;
+	_height: 302px;
+	zoom: 1; /* Feeling sorry for IE */
+}
+
+.dataTables_processing {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 20px;
+	height: 30px;
+	margin-left: -125px;
+	margin-top: -15px;
+	padding: 14px 0 2px 0;
+	border: 1px solid #ddd;
+	text-align: center;
+	color: #999;
+	font-size: 14px;
+	background-color: #343434;
+}
+
+.dataTables_length {
+	/*
+	 * Look in styles.css 
+	 * */
+}
+
+.dataTables_filter {
+	/*
+	 * Look in style.css
+	 * */
+}
+
+.dataTables_info {
+	/*
+	 * Look in style.css
+	 * */
+}
+
+.dataTables_paginate {
+	width: 44px;
+	* width: 50px;
+	float: right;
+	text-align: right;
+	margin-top: 15px;
+}
+
+/* Pagination nested */
+.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
+	height: 19px;
+	width: 19px;
+	margin-left: 3px;
+	float: left;
+}
+
+.paginate_disabled_previous {
+	background-image: url('../images/back_disabled.jpg');
+}
+
+.paginate_enabled_previous {
+	background-image: url('../images/back_enabled.jpg');
+}
+
+.paginate_disabled_next {
+	background-image: url('../images/forward_disabled.jpg');
+}
+
+.paginate_enabled_next {
+	background-image: url('../images/forward_enabled.jpg');
+}
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables display
+ */
+table.display {
+	margin: auto; 
+	width: 100%;
+	clear: both;
+	
+	/* Note Firefox 3.5 and before have a bug with border-collapse
+	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) 
+	 * border-spacing: 0; is one possible option. Conditional-css.com is
+	 * useful for this kind of thing
+	 *
+	 * Further note IE 6/7 has problems when calculating widths with border width.
+	 * It subtracts one px relative to the other browsers from the first column, and
+	 * adds one to the end...
+	 *
+	 * If you want that effect I'd suggest setting a border-top/left on th/td's and 
+	 * then filling in the gaps with other borders.
+	 */
+}
+
+table.display thead th {
+	/*Moved*/
+}
+
+table.display tfoot th {
+	/*Moved*/
+}
+
+table.display tr.heading2 td {
+	border-bottom: 1px solid #aaa;
+}
+
+table.display td {
+	/* Moved */
+}
+
+table.display td.center {
+	text-align: center;
+}
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables sorting
+ */
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables row classes
+ */
+ /*Downloaded*/
+/*Moved*/
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Misc
+ */
+
--- a/data/interfaces/brink/CSS/jquery.jscrollpane.css
+++ b/data/interfaces/brink/CSS/jquery.jscrollpane.css
--- a/data/interfaces/brink/CSS/selectFix.css
+++ b/data/interfaces/brink/CSS/selectFix.css
--- a/data/interfaces/brink/Images/box-big.png
+++ b/data/interfaces/brink/Images/box-big.png
--- a/data/interfaces/brink/Images/cd-big.png
+++ b/data/interfaces/brink/Images/cd-big.png
--- a/data/interfaces/brink/Images/checkbox-original.png
+++ b/data/interfaces/brink/Images/checkbox-original.png
--- a/data/interfaces/brink/Images/checkbox.png
+++ b/data/interfaces/brink/Images/checkbox.png
--- a/data/interfaces/brink/Images/cover.ai
+++ b/data/interfaces/brink/Images/cover.ai
--- a/data/interfaces/brink/Images/cover.psd
+++ b/data/interfaces/brink/Images/cover.psd
--- a/data/interfaces/brink/Images/headphoneslogo-black.png
+++ b/data/interfaces/brink/Images/headphoneslogo-black.png
--- a/data/interfaces/brink/Images/headphoneslogo.png
+++ b/data/interfaces/brink/Images/headphoneslogo.png
--- a/data/interfaces/brink/Images/progress.png
+++ b/data/interfaces/brink/Images/progress.png
--- a/data/interfaces/brink/Images/radio
+++ b/data/interfaces/brink/Images/radio
--- a/data/interfaces/brink/Images/radio-original.png
+++ b/data/interfaces/brink/Images/radio-original.png
--- a/data/interfaces/brink/Images/radio.png
+++ b/data/interfaces/brink/Images/radio.png
--- a/data/interfaces/brink/Images/remove.png
+++ b/data/interfaces/brink/Images/remove.png
--- a/data/interfaces/brink/Images/screen/album.PNG
+++ b/data/interfaces/brink/Images/screen/album.PNG
--- a/data/interfaces/brink/Images/screen/artist.PNG
+++ b/data/interfaces/brink/Images/screen/artist.PNG
--- a/data/interfaces/brink/Images/screen/history.PNG
+++ b/data/interfaces/brink/Images/screen/history.PNG
--- a/data/interfaces/brink/Images/screen/index.png
+++ b/data/interfaces/brink/Images/screen/index.png
--- a/data/interfaces/brink/Images/screen/manage.PNG
+++ b/data/interfaces/brink/Images/screen/manage.PNG
--- a/data/interfaces/brink/Images/screen/settings.png
+++ b/data/interfaces/brink/Images/screen/settings.png
--- a/data/interfaces/brink/Images/screen/upcomming.png
+++ b/data/interfaces/brink/Images/screen/upcomming.png
--- a/data/interfaces/brink/Images/search-black.png
+++ b/data/interfaces/brink/Images/search-black.png
--- a/data/interfaces/brink/Images/search-grey.png
+++ b/data/interfaces/brink/Images/search-grey.png
--- a/data/interfaces/brink/Images/search-white.png
+++ b/data/interfaces/brink/Images/search-white.png
--- a/data/interfaces/brink/Images/search.png
+++ b/data/interfaces/brink/Images/search.png
--- a/data/interfaces/brink/Images/select.psd
+++ b/data/interfaces/brink/Images/select.psd
--- a/data/interfaces/brink/Images/sort_asc.png
+++ b/data/interfaces/brink/Images/sort_asc.png
--- a/data/interfaces/brink/Images/sort_both.png
+++ b/data/interfaces/brink/Images/sort_both.png
--- a/data/interfaces/brink/Images/sort_desc.png
+++ b/data/interfaces/brink/Images/sort_desc.png
--- a/data/interfaces/brink/JS/FancyScript.js
+++ b/data/interfaces/brink/JS/FancyScript.js
@@ -71,6 +71,7 @@ function rotate(degree) {
 });

 //Acesskey
-$(document).ready(function(){
-	$("dataTables_filter div input").attr("acesskey", "a");
-});
+function accesskey()
+{
+	document.getElementByClassName('.dataTables_filter div input').accessKey="q";
+}
--- a/data/interfaces/brink/JS/custom-form-elements.js
+++ b/data/interfaces/brink/JS/custom-form-elements.js
@@ -25,7 +25,7 @@ Visit http://ryanfait.com/ for more information.

 var checkboxHeight = "25";
 var radioHeight = "25";
-var selectWidth = "130";
+var selectWidth = "143";


 /* No need to change anything after this */
--- a/data/interfaces/brink/JS/jquery-1.7.1.js
+++ b/data/interfaces/brink/JS/jquery-1.7.1.js
--- a/data/interfaces/brink/JS/jquery.jscrollpane.js
+++ b/data/interfaces/brink/JS/jquery.jscrollpane.js
--- a/data/interfaces/brink/JS/jquery.jscrollpane.min.js
+++ b/data/interfaces/brink/JS/jquery.jscrollpane.min.js
--- a/data/interfaces/brink/JS/jquery.mousewheel.js
+++ b/data/interfaces/brink/JS/jquery.mousewheel.js
--- a/data/interfaces/brink/Themes/Default.css
+++ b/data/interfaces/brink/Themes/Default.css
@@ -0,0 +1,92 @@
+/* 
+ * * * * * * * * *
+ * Colors Styles *
+ * * * * * * * * *
+ * A great site to adjust the colors is:
+ * http://gradients.glrzad.com/
+ * Just copy the lines, and replace it in here.
+ */
+/* Main Header */
+header
+{
+	background-image: linear-gradient(bottom, rgb(207,207,207) 0%, rgb(245,245,245) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(207,207,207) 0%, rgb(245,245,245) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(207,207,207) 0%, rgb(245,245,245) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(207,207,207) 0%, rgb(245,245,245) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(207,207,207) 0%, rgb(245,245,245) 100%);
+	border-bottom: 1px solid #000; 
+}
+
+#subhead_container{
+	background-image: linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
+	background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
+	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
+	background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
+	border-bottom: 1px solid #000; 
+}
+
+footer {
+	background-image: linear-gradient(bottom, rgb(82,82,82) 0%, rgb(117,117,117) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(82,82,82) 0%, rgb(117,117,117) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(82,82,82) 0%, rgb(117,117,117) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(82,82,82) 0%, rgb(117,117,117) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(82,82,82) 0%, rgb(117,117,117) 100%);
+	border-top: 1px solid #000; 
+}
+/*Main menu current page*/
+#nav li.selected,
+#nav li.selected:hover 
+{
+	background-image: linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(23,23,23) 0%, rgb(48,48,48) 100%);
+}
+
+/*Tooltip Color*/
+.tooltip
+{
+	background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+    background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+    background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+    background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+    background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+}
+/*Tooltip popup Color*/
+div#updatebar,
+.tooltip span
+{
+	background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+    background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+    background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+    background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+    background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+	/*Font Color*/
+	color: #000;
+}
+/*Tablehead color*/
+h1,
+table.display thead tr th 
+{ 
+	background-image: linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+}
+
+/*Top left search field*/
+div#searchbar select,
+div#searchbar input[type=text]
+{
+	color: #000;
+}
+div#searchbar
+{
+	background-image: url(../images/search.png);
+	background-color:#FFF;
+	border: 1px solid rgba(0,0,0,0.5);
+	box-shadow: 1px 1px 0px rgba(255,255,255,0.5);
+}
--- a/data/interfaces/brink/Themes/Radisse.css
+++ b/data/interfaces/brink/Themes/Radisse.css
@@ -75,9 +75,9 @@ div#updatebar
 h1,
 table.display thead tr th 
 { 
-	background-image: linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-	background-image: -o-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-	background-image: -moz-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-	background-image: -webkit-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
-	background-image: -ms-linear-gradient(bottom, rgb(69,69,69) 0%, rgb(102,102,102) 100%);
+	background-image: linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(134,134,134) 0%, rgb(168,168,168) 100%);
 }
--- a/data/interfaces/brink/album.html
+++ b/data/interfaces/brink/album.html
@@ -0,0 +1,138 @@
+<%inherit file="base.html" />
+<%! 
+	from headphones import db, helpers
+	myDB = db.DBConnection()
+%>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="deleteAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}">Delete Album</a></li>
+			%if album['Status'] == 'Skipped':
+			<li><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=False">Mark Album as Wanted</a></li>
+			%elif album['Status'] == 'Wanted':
+			<li><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True">Force Check</a></li>
+			<li><a href="unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}">Mark Album as Skipped</a></li>
+			%else:
+			<li><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=False">Retry Download</a></li>
+			<li><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True">Try New Version</a></li>
+			%endif			
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<div class="table_wrapper">
+		<a id="btnBack" class="btnStatus" href="artistPage?ArtistID=${album['ArtistID']}">
+			Back to ${album['ArtistName']}
+		</a>
+		<div class="clear"></div>
+		<div id="albumheader">
+			<div class="album-art-big">
+				<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.LZZZZZZZ.jpg" alt="albumart" class="albumArt" title="${album['ArtistName']} - ${album['AlbumTitle']}">
+				<div class="album-art-cd"></div>
+			</div>
+			<div id="album-describtion">
+			<h1>${album['AlbumTitle']}</h1>
+			by <a href="/artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a>
+			<br>
+			<%
+				totalduration = myDB.action("SELECT SUM(TrackDuration) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
+				totaltracks = len(myDB.select("SELECT TrackTitle from tracks WHERE AlbumID=?", [album['AlbumID']]))
+				try:
+					albumduration = helpers.convert_milliseconds(totalduration)
+				except:
+					albumduration = 'n/a'
+			
+			%>
+			<br />
+			%if description:
+			<h3>Description:</h3>
+			${description['Summary']}
+			%endif
+			<br />
+			<br />
+			Playtime: ${albumduration}
+			</div>
+		</div>
+		<div id="track_wrapper">
+			<table class="display" id="track_table">
+				<thead>
+					<tr>
+						<th id="number">#</th>
+						<th id="name">Track Title</th>
+						<th id="duration">Duration</th>
+						<th id="location">Local File</th>
+						<th id="bitrate">Bit Rate</th>
+					</tr>
+				</thead>
+				<tbody>
+				%for track in tracks:
+					<%
+						if track['Location']:
+							grade = 'A'
+							location = track['Location']
+						else:
+							grade = 'X'
+							location = ''
+							
+						if track['BitRate']:
+							bitrate = str(track['BitRate']/1000) + ' kbps'
+						else:
+							bitrate = ''
+
+						try:
+							trackduration = helpers.convert_milliseconds(track['TrackDuration'])
+						except:
+							trackduration = 'n/a'
+					%>
+					<tr class="grade${grade}">
+						<td id="number">${track['TrackNumber']}</td>
+						<td id="name">${track['TrackTitle']}</td>
+						<td id="duration">${trackduration}</td>
+						<td id="location">${location}</td>
+						<td id="bitrate">${bitrate}</td>
+					</tr>
+				%endfor
+				<%
+				unmatched = myDB.select('SELECT * from have WHERE ArtistName LIKE ? AND AlbumTitle LIKE ?', [album['ArtistName'], album['AlbumTitle']])			
+				%>
+				%if unmatched:
+					 %for track in unmatched:
+					 <%
+					 	duration = helpers.convert_seconds(float(track['TrackLength']))
+					 %>
+					<tr class="gradeC">
+						<td id="number">${track['TrackNumber']}</td>
+						<td id="name">${track['TrackTitle']}</td>
+						<td id="duration">${duration}</td>
+						<td id="location">${track['Location']}</td>
+						<td id="bitrate">${int(track['BitRate'])/1000} kbps</td>
+					</tr>
+					%endfor
+				%endif
+				</tbody>
+			</table>
+		</div>
+	</div>
+</%def>
+
+<%def name="headIncludes()">
+	
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#track_table').dataTable(
+			{
+				"aaSorting": [],
+				"bFilter": false,
+				"bInfo": false,
+				"bPaginate": false
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/artist.html
+++ b/data/interfaces/brink/artist.html
@@ -0,0 +1,161 @@
+<%inherit file="base.html"/>
+<%!
+	from headphones import db
+%>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="refreshArtist?ArtistID=${artist['ArtistID']}">Refresh Artist</a></li>
+			<li><a href="deleteArtist?ArtistID=${artist['ArtistID']}">Delete Artist</a></li>
+			%if artist['Status'] == 'Paused':
+				<li><a href="resumeArtist?ArtistID=${artist['ArtistID']}">Resume Artist</a></li>
+			%else:
+				<li><a href="pauseArtist?ArtistID=${artist['ArtistID']}">Pause Artist</a></li>
+			%endif
+			%if artist['IncludeExtras']:
+				<li><a href="removeExtras?ArtistID=${artist['ArtistID']}">Remove Extras</a></li>
+			%else:	
+				<li><a href="getExtras?ArtistID=${artist['ArtistID']}">Get Extras</a></li>
+			%endif
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<div id="paddingheader">
+		<h1>
+			${artist['ArtistName']}
+		</h1>
+		%if artist['Status'] == 'Loading':
+		<h3><i>(Album information for this artist is currently being loaded)</i></h3>
+		%endif		
+	</div>
+	<form action="markAlbums" method="get"><input type="hidden" name="ArtistID" value=${artist['ArtistID']}>
+	<p class="indented">Mark selected albums as 
+		<select class="styled" name="action">
+  			<option value="Wanted">Wanted</option>
+  			<option value="WantedNew">Wanted (new only)</option>
+  			<option value="Skipped">Skipped</option>
+  			<option value="Downloaded">Downloaded</option>
+		</select>
+		<input type="submit" value="GO">
+	</p>
+	<table class="display" id="album_table">
+		<thead>
+			<tr>
+				<th id="select"><input class="styled" type="checkbox" onClick="toggle(this)" /></th>
+				<th id="albumart"></th>
+				<th id="albumname">Name</th>
+				<th id="reldate">Date</th>
+				<th id="type">Type</th>
+				<th id="status">Status</th>
+				<th id="have">Have</th>
+				<th id="bitrate">Bitrate</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for album in albums:
+			<%
+				if album['Status'] == 'Skipped':
+					grade = 'Z'
+				elif album['Status'] == 'Wanted':
+					grade = 'X'
+				elif album['Status'] == 'Snatched':
+					grade = 'C'
+				else:
+					grade = 'A'
+
+				myDB = db.DBConnection()					
+				totaltracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=?', [album['AlbumID']]))
+				havetracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=? AND Location IS NOT NULL', [album['AlbumID']])) + len(myDB.select('SELECT TrackTitle from have WHERE ArtistName like ? AND AlbumTitle LIKE ?', [album['ArtistName'], album['AlbumTitle']]))
+				
+				try:
+					percent = (havetracks*100.0)/totaltracks
+					if percent > 100:
+						percent = 100
+				except (ZeroDivisionError, TypeError):
+					percent = 0
+					totaltracks = '?'
+					
+				avgbitrate = myDB.action("SELECT AVG(BitRate) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
+				if avgbitrate:
+					bitrate = str(int(avgbitrate)/1000) + ' kbps'
+				else:
+					bitrate = ''
+				
+			%>
+			<tr class="grade${grade}">
+				<td id="select"><input class="styled" type="checkbox" name="${album['AlbumID']}" class="checkbox" /></td>
+				<td id="albumart">
+				<div class="album-art-small">
+					<a href="albumPage?AlbumID=${album['AlbumID']}">
+						<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" title="${artist['ArtistName']} - ${album['AlbumTitle']}">
+					</a>
+				</div>
+				</td>
+				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+				<td id="reldate">${album['ReleaseDate']}</td>
+				<td id="type">${album['Type']}</td>
+				<td id="status"><span class="btn${album['Status']} btnStatus" title="${album['Status']}">${album['Status']}</span>
+				%if album['Status'] == 'Skipped':
+					<a class="btnGet btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Get this album">Get</a>
+				%elif album['Status'] == 'Wanted':
+					<a class="btnAbort btnStatus" href="unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Abort current status, and set to skipped">Abort</a>
+				%else:
+					<a class="btnRetry btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Retry the same nbz">Retry</a>
+					<a class="btnNew btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True" title="Try a new download, skipping all previously tried nzbs">New</a>
+				%endif
+				</td>
+				<td id="have"><span title="${percent}"><span>
+					<div class="progress-container" title="You have ${havetracks} of a total ${totaltracks}">
+						<div style="width:${percent}%">
+							
+						</div>
+					</div>
+				</td>
+				<td id="bitrate">${bitrate}</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+	</form>
+</%def>
+
+<%def name="headIncludes()">
+	
+	%if artist['Status'] == 'Loading':
+	<meta http-equiv="refresh" content="5">
+	%endif
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#album_table').dataTable(
+			{
+				"aoColumns": [
+					null,
+					null,
+					null,
+					null,
+					null,
+					null,
+					{ "sType": "title-numeric"},
+					null
+				],
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ albums per page",
+					"sEmptyTable": "No album information available",
+					"sInfo":"Showing _TOTAL_ albums",
+					"sInfoEmpty":"Showing 0 to 0 of 0 albums",
+					"sInfoFiltered":"(filtered from _MAX_ total albums)"},
+				"bPaginate": false,
+				"aaSorting": [[4, 'asc'],[3,'desc']]
+
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/base.html
+++ b/data/interfaces/brink/base.html
@@ -0,0 +1,124 @@
+<%
+	import headphones
+	from headphones import version
+%>
+<!doctype html>
+<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	
+	<title>Headphones - ${title}</title>
+	<meta name="description" content="">
+	<meta name="author" content="">
+	
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		
+	<link rel="shortcut icon" href="interfaces/brink/Images/favicon.ico">
+	<link rel="apple-touch-icon" href="interfaces/brink/Images/headphoneslogo.png">
+	<link rel="stylesheet" href="interfaces/brink/CSS/StyleSheet.css">
+	<link rel="stylesheet" href="interfaces/brink/Themes/Default.css">
+	<link rel="stylesheet" href="interfaces/brink/css/data_table.css">
+	
+	<script src="js/jquery-1.7.1.js"></script>
+	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
+	${next.javascriptIncludes()}
+	
+	<script src="js/plugins.js"></script>
+	<script src="js/script.js"></script>
+	
+	<!-- Script by Brinken -->
+		<script type="text/javascript" src="interfaces/brink/JS/FancyScript.js"></script>
+		<!-- Custom Form elements-->
+		<script type="text/javascript" src="interfaces/brink/JS/custom-form-elements.js" ></script>
+		<!-- jScrollPane -->
+			<!-- styles needed by jScrollPane -->
+			<link type="text/css" href="interfaces/brink/CSS/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+			<!-- jScrollPane script -->
+			<script type="text/javascript" src="interfaces/brink/JS/jquery.jscrollpane.js" ></script>
+			<!-- Mousewheel support -->
+			<script type="text/javascript" src="interfaces/brink/JS/jquery.mousewheel.js" ></script>
+			<!-- Add to Scrollbars #main -->
+			<script>
+			$(function(){
+				$('.main').jScrollPane();
+			});
+			</script>
+		
+	${next.headIncludes()}
+	
+	<script src="js/libs/modernizr-1.7.min.js"></script>
+</head>
+<body>
+	<div id="container">
+		% if not headphones.CURRENT_VERSION:
+            <div id="updatebar">
+				<div class="btnClose" title="Close" ></div>
+                You're running an unknown version of Headphones. 
+				<br />
+				<br />
+				<br />
+				<a class="update-link" href="update">Update</a>
+            </div>
+            % elif headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.INSTALL_TYPE != 'win':
+            <div id="updatebar">
+				<div class="btnClose" title="Close" ></div>
+                A newer version is available. <br /> 
+				You're ${headphones.COMMITS_BEHIND} commits behind. 
+				<br />
+				<br />
+				<br />
+				<a class="update-link" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}">Version</a>
+				<a class="update-link" href="update">Update</a>
+            </div>
+			% endif
+		<header>
+					
+			<div id="logo">
+				<a href="home"><img src="interfaces/brink/Images/headphoneslogo-black.png" alt="headphones"></a>
+			</div>
+			${next.headerIncludes()}
+			<div id="searchbar">
+                <form action="search" method="get">
+                    <input type="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" accesskey="s" />
+                    <select name="type">
+  						<option value="artist">Artist</option>
+  						<option value="album">Album</option>
+					</select>
+                    <input class="submit" type="submit" value="GO"/>
+                </form>
+            </div>
+			<div class="clear" />
+		</header>
+		<ul id="nav">
+				<li><a class="elseSelect" href="home" accesskey="1">Home</a></li>
+				<li><a href="upcoming" accesskey="2">Upcoming</a></li>
+				<li><a href="extras" accesskey="3">Suggestions</a></li>
+				<li><a href="manage" accesskey="4">Manage</a></li>
+				<li><a href="history" accesskey="5">History</a></li>
+				<li><a href="logs" accesskey="6">Logs</a></li>
+				<li><a href="config" accesskey="7">Settings</a></li>
+		</ul>
+			<div id="main" class="main">
+				${next.body()}
+			</div>
+
+		<footer>
+		</footer>
+	</div>
+	
+</script>
+	<!--[if lt IE 7 ]>
+	<script src="js/libs/dd_belatedpng.js"></script>
+	<script> DD_belatedPNG.fix('img, .png_bg');</script>
+	<![endif]-->
+</body>
+</html>
+
+<%def name="javascriptIncludes()"></%def>
+<%def name="headIncludes()"></%def>
+<%def name="headerIncludes()"></%def>
--- a/data/interfaces/brink/config.html
+++ b/data/interfaces/brink/config.html
@@ -0,0 +1,680 @@
+<%inherit file="base.html"/>
+<%!
+	import headphones
+%>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="shutdown">Shut Down</a></li>
+			<li><a href="restart">Restart</a></li>
+		</ul>
+	</div>	
+</%def>
+<%def name="body()">
+    <form action="configUpdate" method="post">
+	    <div class="table_wrapper">
+            <a name="web_interface"><h1>Web Interface</h1></a>
+
+            <table class="configtable" summary="Web Interface">
+                <tr>
+                    <td>
+                      <h3>HTTP Host:</h3>
+                        <input type="text" name="http_host" value="${config['http_host']}" size="30" maxlength="40" />
+						    <div class="tooltip">
+							    <span>
+								    i.e. localhost or 0.0.0.0
+							    </span>
+						    </div>
+                    </td>
+                    <td>
+                        <p>HTTP Username:</p>
+                        <input type="text" name="http_username" value="${config['http_user']}" size="30" maxlength="40" />
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>
+                        <p>HTTP Port:</p>
+                        <input type="text" name="http_port" value="${config['http_port']}" size="10" maxlength="40" />
+                        <div class="tooltip">
+							<span>
+								Default is: 8181
+							</span>
+						</div>
+                    </td>
+
+                    <td>
+					    <p>
+						    <h3>HTTP Password:</h3>
+						    <input type="password" name="http_password" value="${config['http_pass']}" size="30" maxlength="40" />
+					    </p>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <p>
+						    Launch Browser on Startup
+						    <input class="styled" type="checkbox" name="launch_browser" value="1" ${config['launch_browser']} />
+					    </p>
+                    </td>
+                </tr>
+            </table>
+	    </div>
+	    <div class="table_wrapper">
+            <a name="download"><h1>Download Settings</h1></a>
+            <table class="configtable" summary="Download Settings">
+	            <tr>
+                    <td colspan="2">
+                        <h2>SABnzbd:</h2>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <h3>
+                            SABnzbd Host:
+                        </h3>
+                        <input type="text" name="sab_host" value="${config['sab_host']}" size="30" maxlength="40" />
+					    <div class="tooltip">
+						    <span>
+							    Usually http://localhost:8080
+						    </span>
+					    </div>
+                    </td>
+                    <td>
+                        <h3>
+                            SABnzbd Username:
+                        </h3>
+                        <input type="text" name="sab_username" value="${config['sab_user']}" size="20" maxlength="40" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <h3>
+                            SABnzbd API:
+                        </h3>
+                        <input type="text" name="sab_apikey" value="${config['sab_api']}" size="36" maxlength="40" />
+                    </td>
+                    <td>
+                        <h3>SABnzbd Password:</h3>
+                        <input type="password" name="sab_password" value="${config['sab_pass']}" size="20" maxlength="40" />
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>
+                        <h3>SABnzbd Category:</h3><input type="text" name="sab_category" value="${config['sab_cat']}" size="20" maxlength="40" />
+                    </td>
+                    <td>
+                        <h3>Music Download Directory:</h3><input type="text" name="download_dir" value="${config['download_dir']}" size="40" />
+					    <div class="tooltip">
+						    <span>
+							    Full path to the directory where SAB downloads your music | i.e. /Users/name/Downloads/music
+						    </span>
+					    </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+					    <p>
+						    Use Black Hole: 
+						    <input class="styled" type="checkbox" name="blackhole" value="1" ${config['use_blackhole']} />
+					    </p>
+                    </td>
+
+                    <td>
+                        <h3>
+                            Black Hole Directory:
+                        </h3>
+                        <input type="text" name="blackhole_dir" value="${config['blackhole_dir']}" size="40" />
+                        <div class="tooltip">
+                            <span>
+                                Folder your Download program watches for NZBs
+                            </span>
+                        </div>
+                    </td>
+                </tr>
+
+
+                <tr>
+                    <td>
+                        <h3>
+                            Usenet Retention:
+                        </h3>
+					    <input type="text" name="usenet_retention" value="${config['usenet_retention']}" size="20" maxlength="40" />
+                    </td>
+                    <td></td>
+                </tr>
+            
+            
+		        <tr>
+                    <td colspan="2">
+                        <h2>Torrent:</h2>
+                    </td>
+                </tr>
+
+		        <tr>
+                    <td>
+                        <h3>Black Hole Directory:</h3><input type="text" name="torrentblackhole_dir" value="${config['torrentblackhole_dir']}" size="40">
+					    <div class="tooltip">
+						    <span>Folder your Download program watches for Torrents</span>
+						    </div>
+                    </td>
+                    <td>
+                        <h3>
+                            Minimum seeders:
+                        </h3>
+                        <input type="text" name="numberofseeders" value="${config['numberofseeders']}" size="5" />
+                        <div class="tooltip">
+						    <span>
+                                Number of minimum seeders a torrent must have to be accepted
+                            </span>
+                        </div>
+                    </td>
+                </tr>
+		        <tr>
+                    <td>
+                        <h3>
+                            Music Download Directory:
+                        </h3>
+                        <input type="text" name="download_torrent_dir" value="${config['download_torrent_dir']}" size="40" />
+
+                        <div class="tooltip">
+						    <span>
+							    Full path to the directory where your torrent client downloads your music
+							    i.e. /Users/name/Downloads/music
+						    </span>
+					    </div>
+                    </td>
+                    <td></td>
+                </tr>
+            </table>
+	    </div>
+        <div class="table_wrapper">
+            <a name="providers">
+            <h1>
+                Search Providers
+            </h1>
+            </a>
+            <table class="configtable" summary="Search Providers">
+                <tr>
+                    <td>
+                        <p>
+                            NZBMatrix:
+                            <input class="styled" type="checkbox" name="nzbmatrix" value="1" ${config['use_nzbmatrix']} />
+                        </p>
+					    
+                    </td>
+                    <td>
+                        <p>
+                            NZBMatrix Username
+                            <input type="text" name="nzbmatrix_username" value="${config['nzbmatrix_user']}" size="30" maxlength="40" />
+                        </p>
+                        
+                    </td>
+
+                    <td>
+                        <p>NZBMatrix API:
+                        <input type="text" name="nzbmatrix_apikey" value="${config['nzbmatrix_api']}" size="36" maxlength="40" />
+                        </p>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>
+                        <p>
+                        <input class="styled" type="checkbox" name="newznab" value="1" ${config['use_newznab']} />
+                        Newznab:
+                        </p>			
+                    </td>
+
+                    <td>
+                        <h3>Newznab Host: </h3>
+                          <input type="text" name="newznab_host" value="${config['newznab_host']}" size="30" maxlength="40" />
+                          <div class="tooltip">
+                              <span>
+                                 i.e. http://nzb.su
+                              </span>
+                          </div>
+                    </td>
+
+                    <td>
+                        <h3>Newznab API: </h3>
+                          <input type="text" name="newznab_apikey" value="${config['newznab_api']}" size="36" maxlength="40" />
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>
+                        <h3>NZBs.org: 
+						    <input class="styled" type="checkbox" name="nzbsorg" value="1" ${config['use_nzbsorg']} />
+					    </h3>
+                    </td>
+
+                    <td>
+
+                        <h3>NZBs.org UID: </h3>
+                          <input type="text" name="nzbsorg_uid" value="${config['nzbsorg_uid']}" size="30" maxlength="40">
+                    
+                    </td>
+
+                    <td>
+
+                        <h3>NZBs.org Hash: </h3>
+                          <input type="text" name="nzbsorg_hash" value="${config['nzbsorg_hash']}" size="36" maxlength="40">
+                    
+                    </td>
+                </tr>
+			
+			    <tr>
+                    <td>
+                        <p>
+                            Newzbin
+				            <input class="styled" type="checkbox" name="newzbin" value="1" ${config['use_newzbin']} />
+                            
+                        </p>
+                    </td>
+
+                    <td>
+                        <p>
+                            Newzbin UID:
+                            <input type="text" name="newzbin_uid" value="${config['newzbin_uid']}" size="30" maxlength="40" />
+                        </p>
+                    
+                    </td>
+
+                    <td>
+                        <p>Newzbin Password 
+                        <input type="text" name="newzbin_password" value="${config['newzbin_pass']}" size="36" maxlength="40" />
+                        </p>
+                    </td>
+                </tr>
+		        <tr>
+		            <td>
+                        <h2>Torrent:</h2>
+                        <p>
+				            <input class="styled" type="checkbox" name="use_isohunt" value="1" ${config['use_isohunt']} />
+                            Isohunt:
+                        </p>
+                        <p>
+				            <input class="styled" type="checkbox" name="use_mininova" value="1" ${config['use_mininova']} />
+                            Mininova
+                        </p>
+                        <p>
+					        <input class="styled" type="checkbox" name="use_kat" value="1" ${config['use_kat']} />
+                            Kick Ass Torrents 
+                        </p>
+                    </td>
+                </tr>
+            </table>
+	    </div>
+	    <div class="table_wrapper">
+            <a name="post_processing">
+			    <h1>
+				    Quality &amp; Post Processing
+			    </h1>
+		    </a>
+
+            <table class="configtable" summary="Quality & Post Processing">
+                <tr>
+                    <td width="200">
+                	    <h2>Album Quality:</h2>
+					    <p>
+						    <input class="styled" type="radio" name="preferred_quality" value="0" ${config['pref_qual_0']} />
+						    Highest Quality excluding Lossless
+					    </p>
+					    <p>
+						    <input class="styled" type="radio" name="preferred_quality" value="1" ${config['pref_qual_1']} /> 
+						    Highest Quality including Lossless
+					    </p>
+					    <p>
+						    <input class="styled" type="radio" name="preferred_quality" value="3" ${config['pref_qual_3']} /> 
+						    Lossless Only
+					    </p>
+					    <p>
+						    <input class="styled" type="radio" name="preferred_quality" value="2" ${config['pref_qual_2']} /> 
+						    Preferred Bitrate:
+						    <input type="text" name="preferred_bitrate" value="${config['pref_bitrate']}" size="3" maxlength="5" />kbps
+					    </p>
+					    <p>
+						    <input class="styled" type="checkbox" name="detect_bitrate" value="1" ${config['detect_bitrate']} />
+						    Auto-Detect Preferred Bitrate 
+					    </p>
+                    </td>
+                    <td>
+                          <h2>Post-Processing:</h2>
+                      	    <p>
+							    <input class="styled" type="checkbox" name="move_files" value="1" ${config['move_files']} /> 
+							    Move downloads to Destination Folder
+						    </p>
+                      	    <p>
+							    <input class="styled" type="checkbox" name="rename_files" value="1" ${config['rename_files']} />
+							    Rename files
+						    </p>
+                            <p>
+							    <input class="styled" type="checkbox" name="correct_metadata" value="1" ${config['correct_metadata']} /> 
+							    Correct metadata
+						    </p>
+                            <p>
+							    <input class="styled" type="checkbox" name="cleanup_files" value="1" ${config['cleanup_files']} />
+							    Delete leftover files (.m3u, .nfo, .sfv, .nzb, etc.)
+						    </p>
+                      	    <p>
+							    <input class="styled" type="checkbox" name="add_album_art" value="1" ${config['add_album_art']} /> 
+							    Add album art as 'folder.jpg' to album folder
+						    </p>
+                      	    <p>
+							    <input class="styled" type="checkbox" name="embed_album_art" value="1" ${config['embed_album_art']} /> 
+							    Embed album art in each file
+						    </p>
+                      	    <p>
+							    <input class="styled" type="checkbox" name="embed_lyrics" value="1" ${config['embed_lyrics']} /> 
+							    Embed lyrics
+						    </p>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>
+                        <br />
+
+                        <h3>
+						    Path to Destination folder:
+					    </h3>
+					    <input type="text" name="destination_dir" value="${config['dest_dir']}" size="40" />
+                        <div class="tooltip">
+						    <span>
+							    i.e. /Users/name/Music/iTunes or /Volumes/share/music
+						    </span>
+					    </div>
+                    </td>
+                </tr>
+		    </table>
+	    </div>
+	    <div class="table_wrapper">
+            <a name="advanced_settings"><h1>Advanced Settings</h1></a>
+        
+            <table class="configtable" summary="Advanced Settings">
+                <tr>
+                    <td>
+                	    <h2>Renaming Options:</h2>
+					    <br />
+                        <h3>
+						    Folder Format:
+					    </h3>
+					    <input type="text" name="folder_format" value="${config['folder_format']}" size="43" />
+                        <div class="tooltip">
+						    <span>
+							    Use: artist, album, year, releasetype and first (first letter in artist name)
+                      		    E.g.: first/artist/album [year] = G/Girl Talk/All Day [2010]
+						    </span>
+					    </div>
+                        <br /><br />
+                        <h3>
+						    File Format:
+					    </h3>
+						    <input type="text" name="file_format" value="${config['file_format']}" size="43" />
+							<div class="tooltip">
+								<span>
+									Use: tracknumber, title, artist, album and year
+								<span>
+							</div>
+                    </td>
+				</tr>
+				<tr>
+                    <td>
+                          <h2>Miscellaneous:</h2>
+						    <br />
+                      	    <p>
+							    <input class="styled" type="checkbox" name="include_extras" value="1" ${config['include_extras']} />
+							    Automatically Include Extras When Adding an Artist
+						    </p>
+                          <div class="tooltip"><span>(EPs, Compilations, Live Albums, Remix Albums and Singles)</span></div>
+					    <br /><br />
+					    <h3>
+						    Interface: 
+                        <h3>
+
+                        <select class="styled" name="interface">
+					    %for interface in config['interface_list']:
+						    <%
+							    if interface == headphones.INTERFACE:
+								    selected = 'selected="selected"'
+							    else:
+								    selected = ''
+						    %>
+						    <option value="${interface}" ${selected}>
+                                ${interface}
+                            </option>
+					    %endfor
+					    </select>
+						<!--
+							Make config for change of ColorStyle.css.
+						-->
+					    <br /><br />
+                        <h3>Log Directory:</h3>
+					    <input type="text" name="log_dir" value="${config['log_dir']}" size="40" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+					    <div class="tooltip">
+						    <span>
+							    Note: this option requires the lame or ffmpeg encoder
+						    </span>
+					    </div>
+                        <h2>Re-Encoding Options:</h2>
+                        <p>
+						    <input class="styled" type="checkbox" name="encode" id="encode" value="1" ${config['encode']} /> 
+						    Re-encode downloads during postprocessing
+					    </p>
+                        <div id="encoderoptions">
+							    <input class="styled" type="checkbox" name="encoderlossless" value="1" ${config['encoderlossless']} /> 
+							    Only re-encode lossless files (.flac)                   
+						    <br />
+						    <%
+							    if config['encoder'] == 'lame':
+								    lameselect = 'selected="selected"'
+								    ffmpegselect = ''
+							    else:
+								    lameselect = ''
+								    ffmpegselect = 'selected="selected"'
+						    %>
+						    <h4>Encoder: </h4>
+                            <select class="styled" name="encoder">
+							    <option value="lame" ${lameselect}>lame</option>
+							    <option value="ffmpeg" ${ffmpegselect}>ffmpeg</option>
+						    </select>
+
+						    <h4>Format: </h4>
+                            <select name="encoderoutputformat">
+						        %for x in ['mp3', 'ogg', 'm4a']:
+						        <%
+							        if config['encoderoutputformat'] == x:
+								        outputselect = 'selected'
+							        else:
+								        outputselect = ''
+						        %>
+						        <option value="${x}" ${outputselect}>${x}</option>
+						        %endfor
+						    </select>
+						    <br />
+						    <h3>
+							    Audio Properties:
+						    </h3>
+						    <br />
+						    <p>VBR/CBR:
+							    <select name="encodervbrcbr">
+							    %for x in ['cbr', 'vbr']:
+								    <%
+									    if config['encodervbrcbr'] == x:
+										    outputselect = 'selected'
+									    else:
+										    outputselect = ''
+								    %>
+								    <option value=${x} ${outputselect}>${x}</option>
+							    %endfor
+							    </select>
+                            </p>
+                            <p>
+					            Quality: 
+                                <select class="styled" name="encoderquality">
+					                %for x in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]:
+						            <%
+							            if config['encoderquality'] == x:
+								            outputselect = 'selected'
+							            else:
+								            outputselect = ''
+						            %>
+						            <option value=${x} ${outputselect}>${x}</option>
+					                %endfor
+					            </select>
+                            </p>
+					    <br />
+					    <p>Bitrate: 
+                            <select class="styled" name="bitrate">
+					            %for x in [64, 128, 192, 256, 320]:
+						            <%
+							            if config["bitrate"] == x:
+								            bitrateselected = "selected"
+							            else:
+								            bitrateselected = ''
+						            %>	
+						            <option value=${x} ${bitrateselected}> ${x} kbps</option>
+					            %endfor
+					        </select>
+					
+					        <%
+						        if config["samplingfrequency"] == 44100:
+							        freq44100 = 'selected="selected"'
+							        freq48000 = ''
+						        else:
+							        freq44100 = ''
+							        freq48000 = 'selected="selected"'
+					        %>
+                        </p>
+                        <p>
+					        Sampling: 
+                            <select class="styled" name="samplingfrequency">
+						        <option value=44100 ${freq44100}>44.1 kHz</option>
+						        <option value=48000 ${freq48000}>48.0 kHz</option>
+					        </select>
+                        </p>
+					        <br />
+					        <br />					
+                            <h3>Advanced Encoding Options:</h3>
+					        <h4>
+					        (ignores audio properties)
+					        </h4>
+					        <input type="text" name="advancedencoder" value="${config['advancedencoder']}" size="43" />
+					        <br />
+                            <h3>Path to Encoder:</h3>
+                            <input type="text" name="encoderfolder" value="${config['encoderfolder']}" size="43" />
+                	    </div>
+                    </td>
+		            <td>
+                        <h2>
+						    Prowl Notification:
+					    </h2>
+                        <p>
+						    <input class="styled" type="checkbox" name="prowl_enabled" id="prowl" value="1" ${config['prowl_enabled']} />
+						    Enable Prowl Notifications
+					    </p>
+                        <div id="prowloptions">
+		      	            <h3>
+							    API key:
+						    </h3>
+						    <input type="text" name="prowl_keys" value="${config['prowl_keys']}" size="40" />
+                            <br />
+                            <br />
+                      	    <p>
+							    <input class="styled" type="checkbox" name="prowl_onsnatch" value="1" ${config['prowl_onsnatch']} />
+							    Notify on snatch?
+						    </p>
+						    <br />
+                      	    <h3>
+							    Priority (-2,-1,0,1 or 2):
+						    </h3>
+						    <input type="text" name="prowl_priority" value="${config['prowl_priority']}" size="2" />
+                        </div>
+		            </td>
+                </tr>
+                <tr>
+				    <td>
+					    <h3>Muscbrainz Mirror: </h3>
+					    <select class="styled" name="mirror">
+					        %for mirror in config['mirror_list']:
+						        <%
+							        if mirror == headphones.MIRROR:
+								        selected = 'selected="selected"'
+							        else:
+								        selected = ''
+							        if mirror == "localhost":
+								        mirrortext = "  (use localhost:7143)"
+							        else:
+								        mirrortext = ''
+						        %>
+						        <option class="styled" value="${mirror}" ${selected}>
+                                ${mirror} ${mirrortext}
+                                </option>
+					        %endfor
+					    </select>
+				    </td>
+                </tr>
+            </table>
+        </div>
+
+        <p class="center">
+			<input class="submit" type="submit" value="Save Changes" />
+			<br />
+            (Web Interface changes require a restart to take effect)
+        </p>
+    </form>
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script>
+	$(document).ready(function()
+	{
+		if ($("#encode").is(":checked"))
+			{
+				$("#encoderoptions").show();
+			}
+		else
+			{
+				$("#encoderoptions").hide();
+			}
+		
+		$("#encode").click(function(){
+			if ($("#encode").is(":checked"))
+			{
+				$("#encoderoptions").show("fast");
+			}
+			else
+			{
+				$("#encoderoptions").hide("fast");
+			}
+		});
+
+		if ($("#prowl").is(":checked"))
+			{
+				$("#prowloptions").show();
+			}
+		else
+			{
+				$("#prowloptions").hide();
+			}
+		
+		$("#prowl").click(function(){
+			if ($("#prowl").is(":checked"))
+			{
+				$("#prowloptions").show("fast");
+			}
+			else
+			{
+				$("#prowloptions").hide("fast");
+			}
+		});
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/extras.html
+++ b/data/interfaces/brink/extras.html
@@ -0,0 +1,13 @@
+<%inherit file="base.html" />
+<%def name="body()">
+	<div class="table_wrapper">
+		<h1>Artists You Might Like</h1>
+		<div class="cloudtag">
+			<ul id="cloud">
+			%for artist in cloudlist:
+				<li><a href="addArtist?artistid=${artist['ArtistID']}" class="tag${artist['Count']}">${artist['ArtistName']}</a></li>
+			%endfor
+			</ul>
+		</div>
+	</div>
+</%def>
--- a/data/interfaces/brink/history.html
+++ b/data/interfaces/brink/history.html
@@ -0,0 +1,82 @@
+<%inherit file="base.html"/>
+<%!
+	from headphones import helpers
+%>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="clearhistory?type=all">Clear All History</a></li>
+			<li><a href="clearhistory?type=Processed">Clear Processed</a></li>
+			<li><a href="clearhistory?type=Unprocessed">Clear Unprocessed</a></li>
+			<li><a href="clearhistory?type=Snatched">Clear Snatched</a></li>
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<table class="display" id="history_table">
+		<thead>
+			<tr>
+				<th id="dateadded">Date Added</th>
+				<th id="filename">File Name</th>
+				<th id="size">Size</th>
+				<th id="status">Status</th>
+				<th id="action"></th>
+			</tr>
+		</thead>
+		<tbody>
+		%for item in history:
+			<%
+				if item['Status'] == 'Processed':
+					grade = 'A'
+				elif item['Status'] == 'Snatched':
+					grade = 'C'
+				elif item['Status'] == 'Unprocessed':
+					grade = 'X'
+				else:
+					grade = 'U'
+					
+				fileid = 'unknown'
+				if item['URL'].find('nzb') != -1:
+					fileid = 'nzb'
+				if item['URL'].find('torrent') != -1:
+					fileid = 'torrent'
+			%>
+			<tr class="grade${grade}">
+				<td id="dateadded">${item['DateAdded']}</td>
+				<td id="filename">${item['Title']} [<a href="${item['URL']}">${fileid}</a>]<a href="albumPage?AlbumID=${item['AlbumID']}">[album page]</a></td>
+				<td id="size">${helpers.bytes_to_mb(item['Size'])}</td>
+				<td id="status">${item['Status']}</td>
+				<td id="action">[<a href="queueAlbum?AlbumID=${item['AlbumID']}&redirect=history">retry</a>][<a href="queueAlbum?AlbumID=${item['AlbumID']}&new=True&redirect=history">new</a>]</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#history_table').dataTable(
+			{
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ items per page",
+					"sEmptyTable": "No History to Display",
+					"sInfo":"Showing _START_ to _END_ of _TOTAL_ items",
+					"sInfoEmpty":"Showing 0 to 0 of 0 items",
+					"sInfoFiltered":"(filtered from _MAX_ total items)"},
+				"iDisplayLength": 25,
+				"sPaginationType": "full_numbers",
+				"aaSorting": []
+
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/index.html
+++ b/data/interfaces/brink/index.html
@@ -0,0 +1,90 @@
+<%inherit file="base.html"/>
+<%!
+	from headphones import helpers
+%>
+
+<%def name="body()">
+	<table class="display" id="artist_table">
+		<thead>
+			<tr>
+				<th id="name">Artist Name</th>
+				<th id="status">Status</th>
+				<th id="album">Latest Album</th>
+				<th id="have">Have</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for artist in artists:
+			<%
+				totaltracks = artist['TotalTracks']
+				havetracks = artist['HaveTracks']
+				if not havetracks:
+					havetracks = 0
+				try:
+					percent = (havetracks*100.0)/totaltracks
+					if percent > 100:
+						percent = 100
+				except (ZeroDivisionError, TypeError):
+					percent = 0
+					totaltracks = '?'
+				
+				if artist['ReleaseDate'] and artist['LatestAlbum']:
+					releasedate = artist['ReleaseDate']
+					albumdisplay = '<i>%s</i> (%s)' % (artist['LatestAlbum'], artist['ReleaseDate'])
+					if releasedate > helpers.today():
+						grade = 'A'
+					else:
+						grade = 'Z'
+				elif artist['LatestAlbum']:
+					releasedate = ''
+					grade = 'Z'
+					albumdisplay = '<i>%s</i>' % artist['LatestAlbum']
+				else:
+					releasedate = ''
+					grade = 'Z'
+					albumdisplay = '<i>None</i>'
+				
+				if artist['Status'] == 'Paused':
+					grade = 'X'
+				
+			%>
+			<tr class="grade${grade}">
+				<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
+				<td id="status">${artist['Status']}</td>
+				<td id="album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
+				<td id="have"><span title="${percent}"></span>
+					<div class="progress-container" title="You have ${havetracks} of ${totaltracks} total.">
+						<span class="havetracks">${havetracks}/${totaltracks}</span>
+						<div style="width:${percent}%"></div>
+					</div>
+				</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	link rel="stylesheet" href="css/interfaces/brink/css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#artist_table').dataTable(
+			{
+			
+				"aoColumns": [
+					{ "sType": "title-string"},
+					null,
+					{ "sType": "title-string"},
+					{ "sType": "title-numeric"}
+				],
+				"bPaginate": false
+			});
+			
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/logs.html
+++ b/data/interfaces/brink/logs.html
@@ -0,0 +1,60 @@
+<%inherit file="base.html"/>
+<%!
+	from headphones import helpers
+%>
+
+<%def name="body()">
+	<table class="display" id="log_table">
+		<thead>
+			<tr>
+				<th id="timestamp">Timestamp</th>
+				<th id="level">Level</th>
+				<th id="message">Message</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for line in lineList:
+			<%
+				timestamp, message, level, threadname = line
+				
+				if level == 'WARNING' or level == 'ERROR':
+					grade = 'X'
+				else:
+					grade = 'Z'
+			%>
+				<tr class="grade${grade}">
+					<td id="timestamp">${timestamp}</td>
+					<td id="level">${level}</td>
+					<td id="message">${message}</td>
+				</tr>
+		%endfor
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#log_table').dataTable(
+			{
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ lines per page",
+					"sEmptyTable": "No log information available",
+					"sInfo":"Showing _START_ to _END_ of _TOTAL_ lines",
+					"sInfoEmpty":"Showing 0 to 0 of 0 lines",
+					"sInfoFiltered":"(filtered from _MAX_ total lines)"},
+				"bStateSave": true,
+				"iDisplayLength": 100,
+				"sPaginationType": "full_numbers",
+				"aaSorting": []
+
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/manage.html
+++ b/data/interfaces/brink/manage.html
@@ -0,0 +1,118 @@
+<%inherit file="base.html" />
+<%!
+	import headphones
+	from headphones.helpers import checked
+%>
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="manageArtists">Manage Artists</a></li>
+			%if not headphones.ADD_ARTISTS:
+			<li><a href="manageNew">Manage New Artists</a></li>
+			%endif
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<div class="table_wrapper">
+		<h1>Scan Music Library</h1>
+		<table class="configtable">
+			<tr>
+				<td>
+					<p>
+						Where do you keep your music?
+					</p>
+					<form action="musicScan" method="GET">
+						%if headphones.MUSIC_DIR:
+							<input type="text" value="${headphones.MUSIC_DIR}" name="path" size="60" />
+							<div class="tooltip">
+							<span>
+								You can put in any directory, and it will scan for audio files in that folder
+								(including all subdirectories)<br />
+								For example: '/Users/name/Music'
+							</span>
+						</div>
+						%else:
+						<p>
+							<input type="text" value="Enter a Music Directory to scan" onfocus="if (this.value==this.defaultValue) this.value='';" name="path" size="60" />
+							<div class="tooltip">
+								<span>
+									You can put in any directory, and it will scan for audio files in that folder
+									(including all subdirectories)<br />
+									For example: '/Users/name/Music'
+								</span>
+							</div>
+						</p>
+						%endif
+						<br />
+						<p>
+							<input class="styled" type="checkbox" name="autoadd" value="1" ${checked(headphones.ADD_ARTISTS)} /> Automatically add new artists
+						</p>
+						<input type="submit" />
+						<div class="tooltip">
+							<span>
+								This process runs in the background.
+							</span>
+						</div>
+					</form>
+				</td>
+			</tr>
+		</table>
+	</div>
+
+	<div class="table_wrapper_half">
+		<h1>Import Last.FM Artists</h1>
+		<table class="configtable">
+			<tr>
+				<td>
+					<p>
+					Enter the username whose artists you want to import:
+					</p>
+					<form action="importLastFM" method="GET" align="left">
+						<%
+							if headphones.LASTFM_USERNAME:
+								lastfmvalue = headphones.LASTFM_USERNAME
+							else:
+								lastfmvalue = 'Last.fm Username'
+						%>
+						<input type="text" value="${lastfmvalue}" onfocus="if (this.value==this.defaultValue) this.value='';" name="username" size="18" />
+						<br />
+						<br />
+						<input type="submit" />
+					</form>
+				</td>
+			</tr>
+		</table>
+	</div>
+	
+	<div class="table_wrapper_half">
+		<h1>Placeholder :-)</h1>
+		<table class="configtable">
+			<tr>
+				<td>
+					<form action="" method="GET" align="left">
+						<input type="text" onfocus="if (this.value==this.defaultValue) this.value='';" name="" size="18" />
+						<br />
+						<br />
+						<input type="submit" />
+					</form>
+				</td>
+			</tr>
+		</table>
+	</div>
+	
+	<div class="table_wrapper">
+		<h1>Force Search</h1><br />
+		<table class="configtable">
+			<tr>
+				<td>
+					<h3><a href="forceSearch">Force Check for Wanted Albums</a></h3>
+					<h3><a href="forceUpdate">Force Update Active Artists</a></h3>
+					<h3><a href="forcePostProcess">Force Post-Process Albums in Download Folder</a></h3><br /><br />
+					<h3><a href="checkGithub">Check for Headphones Updates</a></h3>
+				</td>
+			</tr>
+		</table>
+	</div>
+</%def>
--- a/data/interfaces/brink/manageartists.html
+++ b/data/interfaces/brink/manageartists.html
@@ -0,0 +1,82 @@
+<%inherit file="base.html" />
+
+<%def name="body()">
+	<div id="paddingheader">
+		<h1>Manage Artists<h1>
+	</div>
+	<form action="markArtists" method="get">
+	<p class="indented">
+		<select name="action">
+  			<option value="pause">Pause</option>
+  			<option value="resume">Resume</option>
+  			<option value="refresh">Refresh</option>
+  			<option value="delete">Delete</option>
+		</select>
+		selected artists
+		<input type="submit" value="Go">
+	</p>
+	<table class="display" id="artist_table">
+		<thead>
+			<tr>
+				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
+				<th id="name">Artist Name</th>
+				<th id="status">Status</th>
+				<th id="album">Latest Album</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for artist in artists:
+			<%
+				if artist['Status'] == 'Paused':
+					grade = 'X'
+				elif artist['Status'] == 'Loading':
+					grade = 'C'
+				else:
+					grade = 'Z'
+					
+				if artist['ReleaseDate'] and artist['LatestAlbum']:
+					releasedate = artist['ReleaseDate']
+					albumdisplay = '<i>%s</i> (%s)' % (artist['LatestAlbum'], artist['ReleaseDate'])	
+				elif artist['LatestAlbum']:
+					releasedate = ''
+					albumdisplay = '<i>%s</i>' % artist['LatestAlbum']
+				else:
+					releasedate = ''
+					albumdisplay = '<i>None</i>'
+			%>
+			<tr class="grade${grade}">
+				<td id="select"><input type="checkbox" name="${artist['ArtistID']}" class="checkbox" /></td>
+				<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
+				<td id="status">${artist['Status']}</td>	
+				<td id="album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+	</form>
+</%def>
+
+<%def name="headIncludes()">
+	
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#artist_table').dataTable(
+			{
+				"aoColumns": [
+					null,
+					{ "sType": "title-string"},
+					null,
+					{ "sType": "title-string"}
+				],
+				"bStateSave": true,
+				"bPaginate": false
+				
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/managenew.html
+++ b/data/interfaces/brink/managenew.html
@@ -0,0 +1,52 @@
+<%inherit file="base.html" />
+<%!
+	import headphones
+%>
+<%def name="body()">
+	<div id="paddingheader">
+		<h1>Manage New Artists<h1>
+		<h3><a href="musicScan?path=${headphones.MUSIC_DIR}&redirect=manageNew">Scan Music Library</a></h3>
+	</div>
+	<form action="addArtists" method="get">
+	<p class="indented">
+		Add selected artists
+		<input type="submit" value="Go">
+	</p>
+	<table class="display" id="artist_table">
+		<thead>
+			<tr>
+				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
+				<th id="name">Artist Name</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for artist in headphones.NEW_ARTISTS:
+			<tr class="gradeZ">
+				<td id="select"><input type="checkbox" name="${artist}" class="checkbox" /></td>
+				<td id="name">${artist}</a></td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+	</form>
+</%def>
+
+<%def name="headIncludes()">
+	
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#artist_table').dataTable(
+			{
+				"aaSorting": [[1, 'asc']],
+				"bStateSave": false,
+				"bPaginate": false
+				
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/searchresults.html
+++ b/data/interfaces/brink/searchresults.html
@@ -0,0 +1,79 @@
+<%inherit file="base.html" />
+
+<%def name="body()">
+
+	<div id="paddingheader">
+		<h1>Search Results</h1>
+	</div>
+	<table class="display" id="searchresults_table">
+		<thead>
+			<tr>
+			%if type == 'album':
+				<th id="albumname">Album Name</th>
+			%endif
+				<th id="artistname">Artist Name</th>
+				<th id="score">Score</th>
+				<th id="add"></th>
+			</tr>
+		</thead>
+		<tbody>
+			%if searchresults:
+				%for result in searchresults:
+				<%
+					if result['score'] == 100:
+						grade = 'A'
+					else:
+						grade = 'Z'
+				%>
+				<tr class="grade${grade}">
+				%if type == 'album':
+					<td id="albumname"><a href="${result['albumurl']}">${result['title']}</a></td>
+				%endif
+					<td id="artistname"><a href="${result['url']}">${result['uniquename']}</a></td>
+					<td id="score">
+						<div class="searchscore" title="The match result is: ${result['score']}%">
+										
+									
+							<div class="progress-container" title="Match result is ${result['score']}%">
+								<span class="searchmatch">${result['score']}%</span>
+								<div style="width: ${result['score']}%"></div>
+							</div>
+							</div>
+					</td>
+				%if type == 'album':	
+					<td id="add"><a href="addReleaseById?rid=${result['albumid']}">Add this album</a></td>
+				%else:
+					<td id="add"><a href="addArtist?artistid=${result['id']}">Add this artist</a></td>
+				%endif
+				</tr>
+				%endfor
+			%endif
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#searchresults_table').dataTable(
+			{
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ results per page",
+					"sEmptyTable": "No results",
+					"sInfo":"Showing _START_ to _END_ of _TOTAL_ results",
+					"sInfoEmpty":"Showing 0 to 0 of 0 results",
+					"sInfoFiltered":"(filtered from _MAX_ total results)"},
+				"iDisplayLength": 25,
+				"sPaginationType": "full_numbers",
+				"aaSorting": []
+
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/brink/shutdown.html
+++ b/data/interfaces/brink/shutdown.html
@@ -0,0 +1,13 @@
+<%inherit file="base.html"/>
+
+<%def name="headIncludes()">
+	<meta http-equiv="refresh" content="${timer};url=index">
+</%def>
+
+<%def name="body()">
+	<div class="table_wrapper">
+		<div id="shutdown">
+		<h1>Headphones is ${message}</h1>
+		</div>
+	</div>
+</%def>
--- a/data/interfaces/brink/upcoming.html
+++ b/data/interfaces/brink/upcoming.html
@@ -0,0 +1,108 @@
+<%inherit file="base.html" />
+<%def name="body()">
+	<div class="table_wrapper">
+		<h1>Upcoming Albums</h1>
+		<table class="display" id="upcoming_table">
+		<thead>
+			<tr>
+				<th id="albumart"></th>
+				<th id="artistname">Artist</th>
+				<th id="albumname">Album Name</th>
+				<th id="reldate">Release Date</th>
+				<th id="type">Type</th>
+				<th id="status">Status</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for album in upcoming:
+			<tr class="gradeZ">
+				<td id="albumart">
+					<div class="album-art-small">
+						<a href="albumPage?AlbumID=${album['AlbumID']}">
+							<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg">
+						</a>
+					</div>
+				</td>
+					
+				<td id="artistname">
+					<a href="artistPage?ArtistID=${artist['ArtistID']}">
+						${album['ArtistName']}
+					</a>
+				</td>
+				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+				<td id="reldate">${album['ReleaseDate']}</td>
+				<td id="type">${album['Type']}</td>
+				<td id="status">${album['Status']}</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+	</div>
+	
+	<form action="markAlbums" method="get">
+		<div class="dataTables_mark">
+	<p class="indented">Mark selected albums as 
+		<select class="styled" name="action">
+  			<option value="Skipped">Skipped</option>
+  			<option value="Downloaded">Downloaded</option>
+		</select>
+		<input type="submit" value="Go">
+	</p>
+	</div>
+	<div class="table_wrapper">
+		<h1>Wanted Albums</h1>
+		<table class="display" id="wanted_table">
+		<thead>
+			<tr>
+				<th id="select"><input class="styled" type="checkbox" onClick="toggle(this)" /></th>
+				<th id="albumart"></th>
+				<th id="artistname">Artist</th>
+				<th id="albumname">Album Name</th>
+				<th id="reldate">Release Date</th>
+				<th id="type">Type</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for album in wanted:
+			<tr class="gradeZ">
+				<td id="select"><input class="styled" type="checkbox" name="${album['AlbumID']}" class="checkbox" /></th>
+				<td id="albumart">
+					<div class="album-art-small">
+					<a href="albumPage?AlbumID=${album['AlbumID']}">
+						<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg">
+					</a>
+					</div>
+				</td>
+				<td id="artistname">
+					<a href="">
+						${album['ArtistName']}
+					</a></td>
+				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+				<td id="reldate">${album['ReleaseDate']}</td>
+				<td id="type">${album['Type']}</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+		
+	</div>
+</%def>
+
+<%def name="headIncludes()">
+	
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#wanted_table').dataTable(
+			{
+				"bFilter": false,
+				"bInfo": false,
+				"bPaginate": false
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/default/album.html
+++ b/data/interfaces/default/album.html
@@ -23,18 +23,11 @@

 <%def name="body()">
 	<div class="table_wrapper">
-		<a id="btnBack" class="btnStatus" href="artistPage?ArtistID=${album['ArtistID']}">
-			Back to ${album['ArtistName']}
-		</a>
-		<div class="clear"></div>
-		<div id="albumheader">
-			<div class="album-art-big">
-				<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.LZZZZZZZ.jpg" alt="albumart" class="albumArt" title="${album['ArtistName']} - ${album['AlbumTitle']}">
-				<div class="album-art-cd"></div>
-			</div>
-			<div id="album-describtion">
+		<h2><a href="artistPage?ArtistID=${album['ArtistID']}"><- Back to ${album['ArtistName']}</a></h2>
+		<div id="albumheader">	
+			<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.LZZZZZZZ.jpg" height="200" width="200" alt="albumart" class="albumArt">
 			<h1>${album['AlbumTitle']}</h1>
-			by <a href="/artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a>
+			<h2>${album['ArtistName']}</h2>
 			<br>
 			<%
 				totalduration = myDB.action("SELECT SUM(TrackDuration) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
@@ -45,15 +38,12 @@
 					albumduration = 'n/a'
 			
 			%>
-			<br />
+			<h3>Tracks: ${totaltracks}</h3>
+			<h3>Duration: ${albumduration}</h3>
 			%if description:
-			<h3>Description:</h3>
+			<h3>Description: </h3>
 			${description['Summary']}
 			%endif
-			<br />
-			<br />
-			Playtime: ${albumduration}
-			</div>
 		</div>
 		<div id="track_wrapper">
 			<table class="display" id="track_table">
--- a/data/interfaces/default/artist.html
+++ b/data/interfaces/default/artist.html
@@ -24,27 +24,25 @@

 <%def name="body()">
 	<div id="paddingheader">
-		<h1>
-			${artist['ArtistName']}
-		</h1>
+		<h1>${artist['ArtistName']}<h1>
 		%if artist['Status'] == 'Loading':
 		<h3><i>(Album information for this artist is currently being loaded)</i></h3>
 		%endif		
 	</div>
 	<form action="markAlbums" method="get"><input type="hidden" name="ArtistID" value=${artist['ArtistID']}>
 	<p class="indented">Mark selected albums as 
-		<select class="styled" name="action">
+		<select name="action">
  			<option value="Wanted">Wanted</option>
  			<option value="WantedNew">Wanted (new only)</option>
  			<option value="Skipped">Skipped</option>
  			<option value="Downloaded">Downloaded</option>
 		</select>
-		<input type="submit" value="GO">
+		<input type="submit" value="Go">
 	</p>
 	<table class="display" id="album_table">
 		<thead>
 			<tr>
-				<th id="select"><input class="styled" type="checkbox" onClick="toggle(this)" /></th>
+				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
 				<th id="albumart"></th>
 				<th id="albumname">Name</th>
 				<th id="reldate">Date</th>
@@ -86,34 +84,21 @@
 				
 			%>
 			<tr class="grade${grade}">
-				<td id="select"><input class="styled" type="checkbox" name="${album['AlbumID']}" class="checkbox" /></td>
-				<td id="albumart">
-				<div class="album-art-small">
-					<a href="albumPage?AlbumID=${album['AlbumID']}">
-						<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" title="${artist['ArtistName']} - ${album['AlbumTitle']}">
-					</a>
-				</div>
-				</td>
+				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></td>
+				<td id="albumart"><img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" height="50" width="50"></td>
 				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
 				<td id="reldate">${album['ReleaseDate']}</td>
 				<td id="type">${album['Type']}</td>
-				<td id="status"><span class="btn${album['Status']} btnStatus" title="${album['Status']}">${album['Status']}</span>
+				<td id="status">${album['Status']}
 				%if album['Status'] == 'Skipped':
-					<a class="btnGet btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Get this album">Get</a>
+					[<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}">want</a>]
 				%elif album['Status'] == 'Wanted':
-					<a class="btnAbort btnStatus" href="unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Abort current status, and set to skipped">Abort</a>
+					[<a href="unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}">skip</a>]
 				%else:
-					<a class="btnRetry btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Retry the same nbz">Retry</a>
-					<a class="btnNew btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True" title="Try a new download, skipping all previously tried nzbs">New</a>
+					[<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Retry the same download again">retry</a>][<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True" title="Try a new download, skipping all previously tried nzbs">new</a>]
 				%endif
 				</td>
-				<td id="have"><span title="${percent}"><span>
-					<div class="progress-container" title="You have ${havetracks} of a total ${totaltracks}">
-						<div style="width:${percent}%">
-							
-						</div>
-					</div>
-				</td>
+				<td id="have"><span title="${percent}"><span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
 				<td id="bitrate">${bitrate}</td>
 			</tr>
 		%endfor
--- a/data/interfaces/default/base.html
+++ b/data/interfaces/default/base.html
@@ -20,97 +20,81 @@
 	
 	<link rel="shortcut icon" href="images/favicon.ico">
 	<link rel="apple-touch-icon" href="images/headphoneslogo.png">
-	<link rel="stylesheet" href="css/StyleSheet.css">
-	<link rel="stylesheet" href="css/ColorStyles.css">
-	
-	<script src="js/jquery-1.7.1.js"></script>
-	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
-	${next.javascriptIncludes()}
-	
-	<script src="js/plugins.js"></script>
-	<script src="js/script.js"></script>
-	
-	<!-- Script by Brinken -->
-		<script type="text/javascript" src="js/FancyScript.js"></script>
-		<!-- Custom Form elements-->
-		<script type="text/javascript" src="js/custom-form-elements.js" ></script>
-		<!-- jScrollPane -->
-			<!-- styles needed by jScrollPane -->
-			<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
-			<!-- jScrollPane script -->
-			<script type="text/javascript" src="js/jquery.jscrollpane.js" ></script>
-			<!-- Mousewheel support -->
-			<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>
-			<!-- Add to Scrollbars #main -->
-			<script>
-			$(function(){
-				$('.main').jScrollPane();
-			});
-			</script>
-		
+	<link rel="stylesheet" href="css/style.css?v=2">
 	${next.headIncludes()}
 	
 	<script src="js/libs/modernizr-1.7.min.js"></script>
 </head>
 <body>
 	<div id="container">
-		% if not headphones.CURRENT_VERSION:
+		<header>
+			% if not headphones.CURRENT_VERSION:
            <div id="updatebar">
-				<div class="btnClose" title="Close" >X</div>
-                You're running an unknown version of Headphones. 
-				<br />
-				<br />
-				<br />
-				<a class="update-link" href="update">Update</a>
+                You're running an unknown version of Headphones. <a class="blue" href="update">Click here to update</a>
            </div>
            % elif headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.INSTALL_TYPE != 'win':
            <div id="updatebar">
-				<div class="btnClose" title="Close" >X</div>
-                A newer version is available. <br /> 
-				You're ${headphones.COMMITS_BEHIND} commits behind. 
-				<br />
-				<br />
-				<br />
-				<a class="update-link" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}">Version</a>
-				<a class="update-link" href="update">Update</a>
+                A <a class="blue" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a class="blue" href="update">Click here to update</a>
            </div>
 			% endif
-		<header>
-					
 			<div id="logo">
 				<a href="home"><img src="images/headphoneslogo.png" alt="headphones"></a>
 			</div>
-			${next.headerIncludes()}
+			<ul id="nav">
+				<li><a href="home">home</a></li>
+				<li><a href="upcoming">upcoming</a></li>
+				<li><a href="extras">extras</a></li>
+				<li><a href="manage">manage</a></li>
+				<li><a href="history">history</a></li>
+				<li><a href="logs">logs</a></li>
+				<li><a href="config">settings</a></li>
+			</ul>
 			<div id="searchbar">
                <form action="search" method="get">
-                    <input type="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" accesskey="s" />
+                    <input type="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" />
                    <select name="type">
  						<option value="artist">Artist</option>
  						<option value="album">Album</option>
 					</select>
-                    <input class="submit" type="submit" value="GO"/>
+                    <input type="submit" value="Add"/>
                </form>
            </div>
-			<div class="clear" />
-		</header>
-		<ul id="nav">
-				<li><a class="elseSelect" href="home" accesskey="1">Home</a></li>
-				<li><a href="upcoming" accesskey="2">Upcoming</a></li>
-				<li><a href="extras" accesskey="3">Suggestions</a></li>
-				<li><a href="manage" accesskey="4">Manage</a></li>
-				<li><a href="history" accesskey="5">History</a></li>
-				<li><a href="logs" accesskey="6">Logs</a></li>
-				<li><a href="config" accesskey="7">Settings</a></li>
-		</ul>
-			<div id="main" class="main">
-				${next.body()}
+            <div id="subhead">
+				${next.headerIncludes()}
 			</div>
+		</header>
+
+		<div id="main" class="main">
+			${next.body()}
+		</div>

 		<footer>
+			<div id="version">
+				Version: ${headphones.CURRENT_VERSION}
+				%if version.HEADPHONES_VERSION != 'master':
+				(${version.HEADPHONES_VERSION})
+				%endif
+			</div>
+			<div id="donate">
+				<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
+					<input type="hidden" name="cmd" value="_s-xclick">
+					<input type="hidden" name="hosted_button_id" value="93FFC6WDV97QS">
+					<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
+					<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
+				</form>
+				<br>
+				powered by musicbrainz (<a href="http://metabrainz.org/donate/index.html">donate</a>)
+			</div>
 		</footer>
 	</div>
+
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
+	${next.javascriptIncludes()}
 	
-</script>
+	<script src="js/plugins.js"></script>
+	<script src="js/script.js"></script>
+
 	<!--[if lt IE 7 ]>
 	<script src="js/libs/dd_belatedpng.js"></script>
 	<script> DD_belatedPNG.fix('img, .png_bg');</script>
--- a/data/interfaces/default/config.html
+++ b/data/interfaces/default/config.html
--- a/data/interfaces/default/history.html
+++ b/data/interfaces/default/history.html
@@ -15,6 +15,9 @@
 </%def>

 <%def name="body()">
+	<div id="paddingheader">
+		History
+	</div>
 	<table class="display" id="history_table">
 		<thead>
 			<tr>
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -52,12 +52,7 @@
 				<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
 				<td id="status">${artist['Status']}</td>
 				<td id="album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
-				<td id="have"><span title="${percent}"></span>
-					<div class="progress-container" title="You have ${havetracks} of ${totaltracks} total.">
-						<span class="havetracks">${havetracks}/${totaltracks}</span>
-						<div style="width:${percent}%"></div>
-					</div>
-				</td>
+				<td id="have"><span title="${percent}"></span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
 			</tr>
 		%endfor
 		</tbody>
@@ -75,16 +70,17 @@
 	{
 		$('#artist_table').dataTable(
 			{
-			
 				"aoColumns": [
 					{ "sType": "title-string"},
 					null,
 					{ "sType": "title-string"},
 					{ "sType": "title-numeric"}
 				],
-				"bPaginate": false
+				"bStateSave": true,
+				"iDisplayLength": 50,
+				"sPaginationType": "full_numbers",
+				
 			});
-			
 	});
 	</script>
 </%def>
--- a/data/interfaces/default/manage.html
+++ b/data/interfaces/default/manage.html
@@ -15,104 +15,60 @@
 </%def>

 <%def name="body()">
+	<div id="paddingheader">
+		<h1><h1>
+	</div>
 	<div class="table_wrapper">
-		<h1>Scan Music Library</h1>
-		<table class="configtable">
-			<tr>
-				<td>
-					<p>
-						Where do you keep your music?
-					</p>
-					<form action="musicScan" method="GET">
-						%if headphones.MUSIC_DIR:
-							<input type="text" value="${headphones.MUSIC_DIR}" name="path" size="60" />
-							<div class="tooltip">
-							<span>
-								You can put in any directory, and it will scan for audio files in that folder
-								(including all subdirectories)<br />
-								For example: '/Users/name/Music'
-							</span>
-						</div>
-						%else:
-						<p>
-							<input type="text" value="Enter a Music Directory to scan" onfocus="if (this.value==this.defaultValue) this.value='';" name="path" size="60" />
-							<div class="tooltip">
-								<span>
-									You can put in any directory, and it will scan for audio files in that folder
-									(including all subdirectories)<br />
-									For example: '/Users/name/Music'
-								</span>
-							</div>
-						</p>
-						%endif
-						<br />
-						<p>
-							<input class="styled" type="checkbox" name="autoadd" value="1" ${checked(headphones.ADD_ARTISTS)} /> Automatically add new artists
-						</p>
-						<input type="submit" />
-						<div class="tooltip">
-							<span>
-								This process runs in the background.
-							</span>
-						</div>
-					</form>
-				</td>
-			</tr>
-		</table>
+		<h1>Scan Music Library</h1><br />
+		Where do you keep your music?<br /><br />
+		You can put in any directory, and it will scan for audio files in that folder
+		(including all subdirectories)<br /><br />		For example: '/Users/name/Music'
+		<br /> <br />
+		It may take a while depending on how many files you have. You can navigate away from the page<br />
+		as soon as you click 'Submit'
+		<br /><br />
+		<form action="musicScan" method="GET" align="center">
+		%if headphones.MUSIC_DIR:
+			<input type="text" value="${headphones.MUSIC_DIR}" name="path" size="70" />
+		%else:
+			<input type="text" value="Enter a Music Directory to scan" onfocus="if
+			(this.value==this.defaultValue) this.value='';" name="path" size="70" />
+		%endif
+		<br>
+		<h3><input type="checkbox" name="autoadd" value="1" ${checked(headphones.ADD_ARTISTS)}>Automatically add new artists</h3>
+		<br><br>
+		<input type="submit" /></form>
 	</div>

-	<div class="table_wrapper_half">
-		<h1>Import Last.FM Artists</h1>
-		<table class="configtable">
-			<tr>
-				<td>
-					<p>
-					Enter the username whose artists you want to import:
-					</p>
-					<form action="importLastFM" method="GET" align="left">
-						<%
-							if headphones.LASTFM_USERNAME:
-								lastfmvalue = headphones.LASTFM_USERNAME
-							else:
-								lastfmvalue = 'Last.fm Username'
-						%>
-						<input type="text" value="${lastfmvalue}" onfocus="if (this.value==this.defaultValue) this.value='';" name="username" size="18" />
-						<br />
-						<br />
-						<input type="submit" />
-					</form>
-				</td>
-			</tr>
-		</table>
+	<div class="table_wrapper_left">
+		<h1>Import Last.FM Artists</h1><br />
+		Enter the username whose artists you want to import:<br /><br />
+		<form action="importLastFM" method="GET" align="center">
+			<%
+				if headphones.LASTFM_USERNAME:
+					lastfmvalue = headphones.LASTFM_USERNAME
+				else:
+					lastfmvalue = 'Last.fm Username'
+			%>
+			<input type="text" value="${lastfmvalue}" onfocus="if
+			(this.value==this.defaultValue) this.value='';" name="username" size="18" />
+			<input type="submit" /></form><br /><br />
 	</div>
 	
-	<div class="table_wrapper_half">
-		<h1>Placeholder :-)</h1>
-		<table class="configtable">
-			<tr>
-				<td>
-					<form action="" method="GET" align="left">
-						<input type="text" onfocus="if (this.value==this.defaultValue) this.value='';" name="" size="18" />
-						<br />
-						<br />
-						<input type="submit" />
-					</form>
-				</td>
-			</tr>
-		</table>
+	<div class="table_wrapper_right">
+		<h1>Placeholder :-)</h1><br />
+		<br /><br />
+		<form action="" method="GET" align="center">
+			<input type="text" value="" onfocus="if
+			(this.value==this.defaultValue) this.value='';" name="" size="18" />
+			<input type="submit" /></form><br /><br />
 	</div>
 	
 	<div class="table_wrapper">
 		<h1>Force Search</h1><br />
-		<table class="configtable">
-			<tr>
-				<td>
-					<h3><a href="forceSearch">Force Check for Wanted Albums</a></h3>
-					<h3><a href="forceUpdate">Force Update Active Artists</a></h3>
-					<h3><a href="forcePostProcess">Force Post-Process Albums in Download Folder</a></h3><br /><br />
-					<h3><a href="checkGithub">Check for Headphones Updates</a></h3>
-				</td>
-			</tr>
-		</table>
+			<h3><a href="forceSearch">Force Check for Wanted Albums</a></h3>
+			<h3><a href="forceUpdate">Force Update Active Artists</a></h3>
+			<h3><a href="forcePostProcess">Force Post-Process Albums in Download Folder</a></h3><br><br>
+			<h3><a href="checkGithub">Check for Headphones Updates</a></h3>
 	</div>
 </%def>
--- a/data/interfaces/default/searchresults.html
+++ b/data/interfaces/default/searchresults.html
@@ -3,7 +3,7 @@
 <%def name="body()">

 	<div id="paddingheader">
-		<h1>Search Results</h1>
+		<h1>Search Results<h1>
 	</div>
 	<table class="display" id="searchresults_table">
 		<thead>
@@ -30,16 +30,7 @@
 					<td id="albumname"><a href="${result['albumurl']}">${result['title']}</a></td>
 				%endif
 					<td id="artistname"><a href="${result['url']}">${result['uniquename']}</a></td>
-					<td id="score">
-						<div class="searchscore" title="The match result is: ${result['score']}%">
-										
-									
-							<div class="progress-container" title="Match result is ${result['score']}%">
-								<span class="searchmatch">${result['score']}%</span>
-								<div style="width: ${result['score']}%"></div>
-							</div>
-							</div>
-					</td>
+					<td id="score">${result['score']}</td>
 				%if type == 'album':	
 					<td id="add"><a href="addReleaseById?rid=${result['albumid']}">Add this album</a></td>
 				%else:
--- a/data/interfaces/default/upcoming.html
+++ b/data/interfaces/default/upcoming.html
@@ -16,19 +16,8 @@
 		<tbody>
 		%for album in upcoming:
 			<tr class="gradeZ">
-				<td id="albumart">
-					<div class="album-art-small">
-						<a href="albumPage?AlbumID=${album['AlbumID']}">
-							<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg">
-						</a>
-					</div>
-				</td>
-					
-				<td id="artistname">
-					<a href="artistPage?ArtistID=${artist['ArtistID']}">
-						${album['ArtistName']}
-					</a>
-				</td>
+				<td id="albumart"><img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" height="50" width="50"></td>
+				<td id="artistname">${album['ArtistName']}</td>
 				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
 				<td id="reldate">${album['ReleaseDate']}</td>
 				<td id="type">${album['Type']}</td>
@@ -40,21 +29,19 @@
 	</div>
 	
 	<form action="markAlbums" method="get">
-		<div class="dataTables_mark">
 	<p class="indented">Mark selected albums as 
-		<select class="styled" name="action">
+		<select name="action">
  			<option value="Skipped">Skipped</option>
  			<option value="Downloaded">Downloaded</option>
 		</select>
 		<input type="submit" value="Go">
 	</p>
-	</div>
 	<div class="table_wrapper">
 		<h1>Wanted Albums</h1>
 		<table class="display" id="wanted_table">
 		<thead>
 			<tr>
-				<th id="select"><input class="styled" type="checkbox" onClick="toggle(this)" /></th>
+				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
 				<th id="albumart"></th>
 				<th id="artistname">Artist</th>
 				<th id="albumname">Album Name</th>
@@ -65,18 +52,9 @@
 		<tbody>
 		%for album in wanted:
 			<tr class="gradeZ">
-				<td id="select"><input class="styled" type="checkbox" name="${album['AlbumID']}" class="checkbox" /></th>
-				<td id="albumart">
-					<div class="album-art-small">
-					<a href="albumPage?AlbumID=${album['AlbumID']}">
-						<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg">
-					</a>
-					</div>
-				</td>
-				<td id="artistname">
-					<a href="">
-						${album['ArtistName']}
-					</a></td>
+				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></th>
+				<td id="albumart"><img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" height="50" width="50"></td>
+				<td id="artistname">${album['ArtistName']}</td>
 				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
 				<td id="reldate">${album['ReleaseDate']}</td>
 				<td id="type">${album['Type']}</td>
--- a/data/interfaces/remix/album.html
+++ b/data/interfaces/remix/album.html
@@ -0,0 +1,128 @@
+<%inherit file="base.html" />
+<%! 
+	from headphones import db, helpers
+	myDB = db.DBConnection()
+%>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="deleteAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}">Delete Album</a></li>
+			%if album['Status'] == 'Skipped':
+			<li><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=False">Mark Album as Wanted</a></li>
+			%elif album['Status'] == 'Wanted':
+			<li><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True">Force Check</a></li>
+			<li><a href="unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}">Mark Album as Skipped</a></li>
+			%else:
+			<li><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=False">Retry Download</a></li>
+			<li><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True">Try New Version</a></li>
+			%endif			
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<div class="table_wrapper">
+		<h2><a href="artistPage?ArtistID=${album['ArtistID']}"><- Back to ${album['ArtistName']}</a></h2>
+		<div id="albumheader">	
+			<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.LZZZZZZZ.jpg" height="200" width="200" alt="albumart" class="albumArt">
+			<h1>${album['AlbumTitle']}</h1>
+			<h2>${album['ArtistName']}</h2>
+			<br>
+			<%
+				totalduration = myDB.action("SELECT SUM(TrackDuration) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
+				totaltracks = len(myDB.select("SELECT TrackTitle from tracks WHERE AlbumID=?", [album['AlbumID']]))
+				try:
+					albumduration = helpers.convert_milliseconds(totalduration)
+				except:
+					albumduration = 'n/a'
+			
+			%>
+			<h3>Tracks: ${totaltracks}</h3>
+			<h3>Duration: ${albumduration}</h3>
+			%if description:
+			<h3>Description: </h3>
+			${description['Summary']}
+			%endif
+		</div>
+		<div id="track_wrapper">
+			<table class="display" id="track_table">
+				<thead>
+					<tr>
+						<th id="number">#</th>
+						<th id="name">Track Title</th>
+						<th id="duration">Duration</th>
+						<th id="location">Local File</th>
+						<th id="bitrate">Bit Rate</th>
+					</tr>
+				</thead>
+				<tbody>
+				%for track in tracks:
+					<%
+						if track['Location']:
+							grade = 'A'
+							location = track['Location']
+						else:
+							grade = 'X'
+							location = ''
+							
+						if track['BitRate']:
+							bitrate = str(track['BitRate']/1000) + ' kbps'
+						else:
+							bitrate = ''
+
+						try:
+							trackduration = helpers.convert_milliseconds(track['TrackDuration'])
+						except:
+							trackduration = 'n/a'
+					%>
+					<tr class="grade${grade}">
+						<td id="number">${track['TrackNumber']}</td>
+						<td id="name">${track['TrackTitle']}</td>
+						<td id="duration">${trackduration}</td>
+						<td id="location">${location}</td>
+						<td id="bitrate">${bitrate}</td>
+					</tr>
+				%endfor
+				<%
+				unmatched = myDB.select('SELECT * from have WHERE ArtistName LIKE ? AND AlbumTitle LIKE ?', [album['ArtistName'], album['AlbumTitle']])			
+				%>
+				%if unmatched:
+					 %for track in unmatched:
+					 <%
+					 	duration = helpers.convert_seconds(float(track['TrackLength']))
+					 %>
+					<tr class="gradeC">
+						<td id="number">${track['TrackNumber']}</td>
+						<td id="name">${track['TrackTitle']}</td>
+						<td id="duration">${duration}</td>
+						<td id="location">${track['Location']}</td>
+						<td id="bitrate">${int(track['BitRate'])/1000} kbps</td>
+					</tr>
+					%endfor
+				%endif
+				</tbody>
+			</table>
+		</div>
+	</div>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#track_table').dataTable(
+			{
+				"aaSorting": [],
+				"bFilter": false,
+				"bInfo": false,
+				"bPaginate": false
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/remix/artist.html
+++ b/data/interfaces/remix/artist.html
@@ -0,0 +1,143 @@
+<%inherit file="base.html"/>
+<%!
+	from headphones import db
+%>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="refreshArtist?ArtistID=${artist['ArtistID']}">Refresh Artist</a></li>
+			<li><a href="deleteArtist?ArtistID=${artist['ArtistID']}">Delete Artist</a></li>
+			%if artist['Status'] == 'Paused':
+				<li><a href="resumeArtist?ArtistID=${artist['ArtistID']}">Resume Artist</a></li>
+			%else:
+				<li><a href="pauseArtist?ArtistID=${artist['ArtistID']}">Pause Artist</a></li>
+			%endif
+			%if artist['IncludeExtras']:
+				<li><a href="removeExtras?ArtistID=${artist['ArtistID']}">Remove Extras</a></li>
+			%else:	
+				<li><a href="getExtras?ArtistID=${artist['ArtistID']}">Get Extras</a></li>
+			%endif
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<div id="paddingheader">
+		<h1>${artist['ArtistName']}<h1>
+		%if artist['Status'] == 'Loading':
+		<h3><i>(Album information for this artist is currently being loaded)</i></h3>
+		%endif		
+	</div>
+	<form action="markAlbums" method="get"><input type="hidden" name="ArtistID" value=${artist['ArtistID']}>
+	<p class="indented">Mark selected albums as 
+		<select name="action">
+  			<option value="Wanted">Wanted</option>
+  			<option value="WantedNew">Wanted (new only)</option>
+  			<option value="Skipped">Skipped</option>
+  			<option value="Downloaded">Downloaded</option>
+		</select>
+		<input type="submit" value="Go">
+	</p>
+	<table class="display" id="album_table">
+		<thead>
+			<tr>
+				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
+				<th id="albumart"></th>
+				<th id="albumname">Name</th>
+				<th id="reldate">Date</th>
+				<th id="type">Type</th>
+				<th id="status">Status</th>
+				<th id="have">Have</th>
+				<th id="bitrate">Bitrate</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for album in albums:
+			<%
+				if album['Status'] == 'Skipped':
+					grade = 'Z'
+				elif album['Status'] == 'Wanted':
+					grade = 'X'
+				elif album['Status'] == 'Snatched':
+					grade = 'C'
+				else:
+					grade = 'A'
+
+				myDB = db.DBConnection()					
+				totaltracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=?', [album['AlbumID']]))
+				havetracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=? AND Location IS NOT NULL', [album['AlbumID']])) + len(myDB.select('SELECT TrackTitle from have WHERE ArtistName like ? AND AlbumTitle LIKE ?', [album['ArtistName'], album['AlbumTitle']]))
+				
+				try:
+					percent = (havetracks*100.0)/totaltracks
+					if percent > 100:
+						percent = 100
+				except (ZeroDivisionError, TypeError):
+					percent = 0
+					totaltracks = '?'
+					
+				avgbitrate = myDB.action("SELECT AVG(BitRate) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
+				if avgbitrate:
+					bitrate = str(int(avgbitrate)/1000) + ' kbps'
+				else:
+					bitrate = ''
+				
+			%>
+			<tr class="grade${grade}">
+				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></td>
+				<td id="albumart"><img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" height="50" width="50"></td>
+				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+				<td id="reldate">${album['ReleaseDate']}</td>
+				<td id="type">${album['Type']}</td>
+				<td id="status">${album['Status']}
+				%if album['Status'] == 'Skipped':
+					[<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}">want</a>]
+				%elif album['Status'] == 'Wanted':
+					[<a href="unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}">skip</a>]
+				%else:
+					[<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Retry the same download again">retry</a>][<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True" title="Try a new download, skipping all previously tried nzbs">new</a>]
+				%endif
+				</td>
+				<td id="have"><span title="${percent}"><span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
+				<td id="bitrate">${bitrate}</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+	</form>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#album_table').dataTable(
+			{
+				"aoColumns": [
+					null,
+					null,
+					null,
+					null,
+					null,
+					null,
+					{ "sType": "title-numeric"},
+					null
+				],
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ albums per page",
+					"sEmptyTable": "No album information available",
+					"sInfo":"Showing _TOTAL_ albums",
+					"sInfoEmpty":"Showing 0 to 0 of 0 albums",
+					"sInfoFiltered":"(filtered from _MAX_ total albums)"},
+				"bPaginate": false,
+				"aaSorting": [[4, 'asc'],[3,'desc']]
+
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/remix/base.html
+++ b/data/interfaces/remix/base.html
@@ -0,0 +1,107 @@
+<%
+	import headphones
+	from headphones import version
+%>
+<!doctype html>
+<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	
+	<title>Headphones::Remix - ${title}</title>
+	<meta name="description" content="">
+	<meta name="author" content="">
+	
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<link rel="shortcut icon" href="images/favicon.ico">
+	<link rel="apple-touch-icon" href="images/headphoneslogo.png">
+	<link rel="stylesheet" href="interfaces/remix/style.css?v=2">
+	${next.headIncludes()}
+	
+	<script src="js/libs/modernizr-1.7.min.js"></script>
+</head>
+<body>
+	<div id="container">
+		<header>
+			% if not headphones.CURRENT_VERSION:
+            <div id="updatebar">
+                You're running an unknown version of Headphones. <a class="blue" href="update">Click here to update</a>
+            </div>
+            % elif headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.INSTALL_TYPE != 'win':
+            <div id="updatebar">
+                A <a class="blue" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a class="blue" href="update">Click here to update</a>
+            </div>
+			% endif
+			<div id="logo">
+				<a href="home"><img src="images/headphoneslogo.png" alt="headphones"></a>
+			</div>
+			<ul id="nav">
+				<li><a href="home">home</a></li>
+				<li><a href="upcoming">upcoming</a></li>
+				<li><a href="extras">extras</a></li>
+				<li><a href="manage">manage</a></li>
+				<li><a href="history">history</a></li>
+				<li><a href="logs">logs</a></li>
+				<li><a href="config">settings</a></li>
+			</ul>
+			<div id="searchbar">
+                <form action="search" method="get">
+                    <input type="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" />
+                    <select name="type">
+  						<option value="artist">Artist</option>
+  						<option value="album">Album</option>
+					</select> 
+                    <input type="submit" value="Add"/>
+                </form>
+            </div>
+            <div id="subhead">
+				${next.headerIncludes()}
+			</div>
+		</header>
+
+		<div id="main" class="main">
+			${next.body()}
+		</div>
+
+		<footer>
+			<div id="version">
+				Version: ${headphones.CURRENT_VERSION}
+				%if version.HEADPHONES_VERSION != 'master':
+				(${version.HEADPHONES_VERSION})
+				%endif
+			</div>
+			<div id="donate">
+				<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
+					<input type="hidden" name="cmd" value="_s-xclick">
+					<input type="hidden" name="hosted_button_id" value="93FFC6WDV97QS">
+					<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
+					<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
+				</form>
+				<br>
+				powered by musicbrainz (<a href="http://metabrainz.org/donate/index.html">donate</a>)
+			</div>
+		</footer>
+	</div>
+
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
+	${next.javascriptIncludes()}
+	
+	<script src="js/plugins.js"></script>
+	<script src="js/script.js"></script>
+
+	<!--[if lt IE 7 ]>
+	<script src="js/libs/dd_belatedpng.js"></script>
+	<script> DD_belatedPNG.fix('img, .png_bg');</script>
+	<![endif]-->
+</body>
+</html>
+
+<%def name="javascriptIncludes()"></%def>
+<%def name="headIncludes()"></%def>
+<%def name="headerIncludes()"></%def>
--- a/data/interfaces/remix/config.html
+++ b/data/interfaces/remix/config.html
@@ -0,0 +1,537 @@
+<%inherit file="base.html"/>
+<%!
+	import headphones
+%>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="shutdown">Shut Down</a></li>
+			<li><a href="restart">Restart</a></li>
+		</ul>
+	</div>	
+</%def>
+<%def name="body()">
+	<div id="paddingheader">
+		<h1><h1>
+	</div>
+	<div class="table_wrapper">
+		<form action="configUpdate" method="post">
+        <a name="web_interface"><h1><u>Web Interface</u></h1></a>
+
+        <table class="configtable" summary="Web Interface">
+            <tr>
+                <td>
+                  <h3>HTTP Host:</h3>
+                    <input type="text" name="http_host" value="${config['http_host']}" size="30" maxlength="40"><br>
+                    <i class="smalltext">i.e. localhost or 0.0.0.0</i>
+                </td>
+                <td>
+                    <h3>HTTP Username:</h3>
+                    <input type="text" name="http_username" value="${config['http_user']}" size="30" maxlength="40">
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                      <h3>HTTP Port:</h3>
+                      <input type="text" name="http_port" value="${config['http_port']}" size="10" maxlength="40">
+                </td>
+
+                <td>
+                      <h3>HTTP Password:</h3>
+                      <input type="password" name="http_password" value="${config['http_pass']}" size="30" maxlength="40">
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <h3>Launch Browser on Startup: <input type="checkbox" name="launch_browser" value="1" ${config['launch_browser']} /></h3>
+                </td>
+            </tr>
+        </table>
+	</div>
+	<div class="table_wrapper">
+        <a name="download"><h1><u>Download Settings</u></h1></a>
+        <table class="configtable" summary="Download Settings">
+	    <tr>
+                <td>
+                    <h2>SABnzbd:</h2>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <h3>SABnzbd Host:</h3><input type="text" name="sab_host" value="${config['sab_host']}" size="30" maxlength="40"><br>
+
+                    <i class="smalltext">usually http://localhost:8080</i>
+                </td>
+
+                <td>
+                    <h3>SABnzbd Username:</h3><input type="text" name="sab_username" value="${config['sab_user']}" size="20" maxlength="40">
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <h3>SABnzbd API:</h3><input type="text" name="sab_apikey" value="${config['sab_api']}" size="36" maxlength="40">
+                </td>
+
+                <td>
+                    <h3>SABnzbd Password:</h3><input type="password" name="sab_password" value="${config['sab_pass']}" size="20" maxlength="40">
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <h3>SABnzbd Category:</h3><input type="text" name="sab_category" value="${config['sab_cat']}" size="20" maxlength="40">
+                </td>
+
+                <td>
+                    <h3>Music Download Directory:</h3><input type="text" name="download_dir" value="${config['download_dir']}" size="50"><br>
+
+                    <i class="smalltext">Full path to the directory where SAB downloads your music<br>
+                    i.e. /Users/name/Downloads/music</i>
+                </td>
+            </tr>
+            
+            <tr>
+                <td>
+                    <h3>Use Black Hole: <input type="checkbox" name="blackhole" value=1 ${config['use_blackhole']} /></h3>
+                </td>
+
+                <td>
+                    <h3>Black Hole Directory:</h3><input type="text" name="blackhole_dir" value="${config['blackhole_dir']}" size="50"><br>
+
+                    <i class="smalltext">Folder your Download program watches for NZBs</i>
+                </td>
+            </tr>
+
+
+            <tr>
+                <td>
+                    <h3>Usenet Retention:<input type="text" name="usenet_retention" value="${config['usenet_retention']}" size="20" maxlength="40"></h3>
+                </td>
+            </tr>
+            
+            
+		<tr>
+                <td>
+                    <br><br><br><br><h2>Torrent:</h2>
+                </td>
+            </tr>
+
+		<tr>
+                <td>
+                    <h3>Black Hole Directory:</h3><input type="text" name="torrentblackhole_dir" value="${config['torrentblackhole_dir']}" size="50"><br>
+
+                    <i class="smalltext">Folder your Download program watches for Torrents</i>
+                </td>
+
+                <td>
+                    <h3>Minimum seeders:</h3><input type="text" name="numberofseeders" value="${config['numberofseeders']}" size="5"><br>
+
+                    <i class="smalltext">Number of minimum seeders a torrent must have to be accepted</i>
+                </td>
+            </tr>
+
+		<tr>
+                <td>
+                    <h3>Music Download Directory:</h3><input type="text" name="download_torrent_dir" value="${config['download_torrent_dir']}" size="50"><br>
+
+                    <i class="smalltext">Full path to the directory where your torrent client downloads your music<br>
+                    i.e. /Users/name/Downloads/music</i>
+                </td>
+
+                <td></td>
+            </tr>
+        </table>
+	</div>
+	<div class="table_wrapper">
+        <a name="providers"><h1><u>Search Providers</u></h1></a>
+        <table class="configtable" summary="Search Providers">
+	    <tr>
+                <td>
+                    <h2>SABnzbd:</h2>
+                </td>
+            </tr>
+            <tr>
+                <td id="middle">
+                    <h3>NZBMatrix: <input type="checkbox" name="nzbmatrix" value="1" ${config['use_nzbmatrix']} /></h3>
+                </td>
+
+                <td>
+                    <h3>NZBMatrix Username: </h3>
+                      <input type="text" name="nzbmatrix_username" value="${config['nzbmatrix_user']}" size="30" maxlength="40">
+                </td>
+
+                <td>
+                    <h3>NZBMatrix API: </h3>
+                      <input type="text" name="nzbmatrix_apikey" value="${config['nzbmatrix_api']}" size="36" maxlength="40">
+                </td>
+            </tr>
+
+            <tr>
+                <td id="middle">
+                    <h3>Newznab: <input type="checkbox" name="newznab" value="1" ${config['use_newznab']} /></h3>
+                </td>
+
+                <td>
+                    <h3>Newznab Host: </h3>
+                      <input type="text" name="newznab_host" value="${config['newznab_host']}" size="30" maxlength="40"><br>
+                      <i class="smalltext">i.e. http://nzb.su</i>
+                </td>
+
+                <td>
+                    <h3>Newznab API: </h3>
+                      <input type="text" name="newznab_apikey" value="${config['newznab_api']}" size="36" maxlength="40">
+                </td>
+            </tr>
+
+            <tr>
+                <td id="middle">
+                    <h3>NZBs.org: <input type="checkbox" name="nzbsorg" value="1" ${config['use_nzbsorg']} /></h3>
+                </td>
+
+                <td>
+
+                    <h3>NZBs.org UID: </h3>
+                      <input type="text" name="nzbsorg_uid" value="${config['nzbsorg_uid']}" size="30" maxlength="40">
+                    
+                </td>
+
+                <td>
+
+                    <h3>NZBs.org Hash: </h3>
+                      <input type="text" name="nzbsorg_hash" value="${config['nzbsorg_hash']}" size="36" maxlength="40">
+                    
+                </td>
+            </tr>
+			
+			<tr>
+                <td id="middle">
+                    <h3>Newzbin: <input type="checkbox" name="newzbin" value="1" ${config['use_newzbin']} /></h3>
+                </td>
+
+                <td>
+                    <h3>Newzbin UID: </h3>
+                      <input type="text" name="newzbin_uid" value="${config['newzbin_uid']}" size="30" maxlength="40">
+                    
+                </td>
+
+                <td>
+                    <h3>Newzbin Password: </h3>
+                      <input type="text" name="newzbin_password" value="${config['newzbin_pass']}" size="36" maxlength="40">
+                </td>
+            </tr>
+            
+            
+		<tr>
+                <td>
+                    <h2>Torrent:</h2><br>
+                </td>
+            </tr>
+
+		<tr>
+		    <td id="middle">
+                    <h3>Isohunt: <input type="checkbox" name="use_isohunt" value="1" ${config['use_isohunt']} /></h3><br>
+                </td>
+
+		    <td id="middle">
+                    <h3>Mininova: <input type="checkbox" name="use_mininova" value="1" ${config['use_mininova']} /></h3><br>
+                </td>
+            </tr>
+
+		<tr>
+		    <td id="middle">
+                    <h3>Kick Ass Torrents: <input type="checkbox" name="use_kat" value="1" ${config['use_kat']} /></h3>
+                </td>
+            </tr>
+        </table>
+	</div>
+	<div class="table_wrapper">
+        <a name="post_processing"><h1><u>Quality &amp; Post Processing</u></h1></a>
+
+        <table class="configtable" summary="Quality & Post Processing">
+            <tr>
+                <td>
+                	<h2>Album Quality:</h2><br>
+                   	  <h4><input type="radio" name="preferred_quality" value="0" ${config['pref_qual_0']} /> Highest Quality excluding Lossless</h4>
+                      <h4><input type="radio" name="preferred_quality" value="1" ${config['pref_qual_1']} /> Highest Quality including Lossless</h4>
+                      <h4><input type="radio" name="preferred_quality" value="3" ${config['pref_qual_3']} /> Lossless Only</h4>
+                      <h4><input type="radio" name="preferred_quality" value="2" ${config['pref_qual_2']} /> Preferred Bitrate:
+    					<input type="text" name="preferred_bitrate" value="${config['pref_bitrate']}" size="3" maxlength="5" />kbps</h4>
+                      	<i class="smalltext2"><input type="checkbox" name="detect_bitrate" value="1" ${config['detect_bitrate']} />Auto-Detect Preferred Bitrate </i>
+                </td>
+                <td>
+                      <h2>Post-Processing:</h2>
+                      	<h4><input type="checkbox" name="move_files" value="1" ${config['move_files']} /> Move downloads to Destination Folder</h4>
+                      	<h4><input type="checkbox" name="rename_files" value="1" ${config['rename_files']} /> Rename files</h4>
+                        <h4><input type="checkbox" name="correct_metadata" value="1" ${config['correct_metadata']} /> Correct metadata</h4>
+                        <h4><input type="checkbox" name="cleanup_files" value="1" ${config['cleanup_files']} /> Delete leftover files (.m3u, .nfo, .sfv, .nzb, etc.)</h4>
+                      	<h4><input type="checkbox" name="add_album_art" value="1" ${config['add_album_art']}> Add album art as 'folder.jpg' to album folder</h4>
+                      	<h4><input type="checkbox" name="embed_album_art" value="1" ${config['embed_album_art']}> Embed album art in each file</h4>
+                      	<h4><input type="checkbox" name="embed_lyrics" value="1" ${config['embed_lyrics']}> Embed lyrics</h4>
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <br>
+
+                    <h3>Path to Destination folder:</h3><input type="text" name="destination_dir" value="${config['dest_dir']}" size="50">
+                      <br>
+                      <i class="smalltext">i.e. /Users/name/Music/iTunes or /Volumes/share/music</i>
+                </td>
+            </tr>
+		</table>
+	</div>
+	<div class="table_wrapper">
+        <a name="advanced_settings"><h1><u>Advanced Settings</u></h1></a>
+        
+        <table class="configtable" summary="Advanced Settings">
+            <tr>
+                <td>
+                	<h2>Renaming Options:</h2>
+					<br>
+                    <h3>Folder Format:</h3><input type="text" name="folder_format" value="${config['folder_format']}" size="43"><br>
+                      <i class="smalltext">Use: artist, album, year, releasetype and first (first letter in artist name)<br />
+                      				E.g.: first/artist/album [year] = G/Girl Talk/All Day [2010]</i>
+                    <br><br>
+                    <h3>File Format:</h3><input type="text" name="file_format" value="${config['file_format']}" size="43">
+                      <br>
+                      <i class="smalltext">Use: tracknumber, title, artist, album and year</i>
+                </td>
+                <td>
+                      <h2>Miscellaneous:</h2>
+						<br>
+                      	<h3><input type="checkbox" name="include_extras" value="1" ${config['include_extras']} />Automatically Include Extras When Adding an Artist</h3>
+                      <i class="smalltext">(EPs, Compilations, Live Albums, Remix Albums and Singles)</i>
+					<br><br>
+					<h3>Interface: <select name="interface"><h3>
+					%for interface in config['interface_list']:
+						<%
+							if interface == headphones.INTERFACE:
+								selected = 'selected="selected"'
+							else:
+								selected = ''
+						%>
+						<option value="${interface}" ${selected}>${interface}</option>
+					%endfor
+					</select>
+					<br><br>
+                    <h3>Log Directory:</h3><input type="text" name="log_dir" value="${config['log_dir']}" size="50">
+                </td>
+            </tr>
+            <tr>
+                <td>
+                      <h2>Re-Encoding Options:</h2>
+                      <i class="smalltext">Note: this option requires the lame or ffmpeg encoder</i>
+						<br><br>
+                      	<h3><input type="checkbox" name="encode" id="encode" value="1" ${config['encode']}/> Re-encode downloads during postprocessing</h3>
+                    	<br>
+                    <div id="encoderoptions">
+                      	<h4><input type="checkbox" name="encoderlossless" value="1" ${config['encoderlossless']}/> Only re-encode lossless files (.flac)</h4>                      
+					<br>
+					<%
+						if config['encoder'] == 'lame':
+							lameselect = 'selected="selected"'
+							ffmpegselect = ''
+						else:
+							lameselect = ''
+							ffmpegselect = 'selected="selected"'
+					%>
+					<h4>Encoder: <select name="encoder">
+						<option value="lame" ${lameselect}>lame</option>
+						<option value="ffmpeg" ${ffmpegselect}>ffmpeg</option>
+					</select>
+
+					Format: <select name="encoderoutputformat">
+					%for x in ['mp3', 'ogg', 'm4a']:
+						<%
+							if config['encoderoutputformat'] == x:
+								outputselect = 'selected'
+							else:
+								outputselect = ''
+						%>
+						<option value=${x} ${outputselect}>${x}</option>
+					%endfor
+					</select></h4>
+					<br>
+					
+					<h3>Audio Properties:</h3>
+					<br>
+					<h4>VBR/CBR: <select name="encodervbrcbr">
+					%for x in ['cbr', 'vbr']:
+						<%
+							if config['encodervbrcbr'] == x:
+								outputselect = 'selected'
+							else:
+								outputselect = ''
+						%>
+						<option value=${x} ${outputselect}>${x}</option>
+					%endfor
+					</select>
+
+					Quality: <select name="encoderquality">
+					%for x in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]:
+						<%
+							if config['encoderquality'] == x:
+								outputselect = 'selected'
+							else:
+								outputselect = ''
+						%>
+						<option value=${x} ${outputselect}>${x}</option>
+					%endfor
+					</select></h4>
+
+					<br>
+					<h4>Bitrate: <select name="bitrate">
+					%for x in [64, 128, 192, 256, 320]:
+						<%
+							if config["bitrate"] == x:
+								bitrateselected = "selected"
+							else:
+								bitrateselected = ''
+						%>	
+						<option value=${x} ${bitrateselected}> ${x} kbps</option>
+					%endfor
+					</select>
+					
+					<%
+						if config["samplingfrequency"] == 44100:
+							freq44100 = 'selected="selected"'
+							freq48000 = ''
+						else:
+							freq44100 = ''
+							freq48000 = 'selected="selected"'
+					%>
+					Sampling: <select name="samplingfrequency">
+						<option value=44100 ${freq44100}>44.1 kHz</option>
+						<option value=48000 ${freq48000}>48.0 kHz</option>
+					</select></h4>
+					<br>
+					<br>					
+                    <h3>Advanced Encoding Options:</h3>
+					<h4>
+					(ignores audio properties)
+					</h4>
+					<input type="text" name="advancedencoder" value="${config['advancedencoder']}" size="43">
+					<br>
+                    <h3>Path to Encoder:</h3><input type="text" name="encoderfolder" value="${config['encoderfolder']}" size="43">
+                	</div>
+                </td>
+		        <td>
+                      <h2>Prowl Notification:</h2><br>
+                      <h3><input type="checkbox" name="prowl_enabled" id="prowl" value="1" ${config['prowl_enabled']} />Enable Prowl Notifications</h3><br>
+                      <div id="prowloptions">
+		      	        <h3>API key:</h3><input type="text" name="prowl_keys" value="${config['prowl_keys']}" size="50"><br><br>
+                      	<h3><input type="checkbox" name="prowl_onsnatch" value="1" ${config['prowl_onsnatch']} />Notify on snatch?</h3><br>
+                      	<h3>Priority (-2,-1,0,1 or 2):</h3><input type="text" name="prowl_priority" value="${config['prowl_priority']}" size="2">
+                      </div>
+		        </td>
+            </tr>
+            <tr>
+				<td>
+					<h3>Muscbrainz Mirror: <select name="mirror" id="mirror"><h3>
+					%for mirror in config['mirror_list']:
+						<%
+							if mirror == headphones.MIRROR:
+								selected = 'selected="selected"'
+							else:
+								selected = ''
+						%>
+						<option value="${mirror}" ${selected}>${mirror}</option>
+					%endfor
+					</select>
+					
+					<div id="customoptions">
+					<h3>Host:<br><input type="text" name="customhost" value="${config['customhost']}" size="20"></h3>
+					<h3>Port:<br><input type="text" name="customport" value="${config['customport']}" size="8"></h3>
+					<h3>Sleep Interval:<br><input type="text" name="customsleep" value="${config['customsleep']}" size="4"></h3>
+					</div>
+					
+					<div id="hpserveroptions">
+					<h3>Username:<br><input type="text" name="hpuser" value="${config['hpuser']}" size="20"></h3>
+					<h3>Password:<br><input type="password" name="hppass" value="${config['hppass']}" size="15"></h3>
+					<i class="smalltext2"><a href="http://headphones.codeshy.com/vip">Get an Account</a></p>
+					</div>
+        </table>
+    </div>
+
+        <p class="center"><input type="submit" value="Save Changes"><br>
+        (Web Interface changes require a restart to take effect)</h3>
+      </form>
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script>
+	
+	hideServerDivs = function () {
+		$("#customoptions").hide("fast");
+		$("#hpserveroptions").hide("fast");
+	};
+	
+	handleNewSelection = function () {
+	
+		hideServerDivs();
+		
+		switch ($(this).val()) {
+			case 'custom':
+				$("#customoptions").show("fast");
+			break;
+			case 'headphones':
+				$("#hpserveroptions").show("fast");
+			break;
+		}
+	};
+	
+
+	$(document).ready(function()
+	{
+		if ($("#encode").is(":checked"))
+			{
+				$("#encoderoptions").show();
+			}
+		else
+			{
+				$("#encoderoptions").hide();
+			}
+		
+		$("#encode").click(function(){
+			if ($("#encode").is(":checked"))
+			{
+				$("#encoderoptions").show("fast");
+			}
+			else
+			{
+				$("#encoderoptions").hide("fast");
+			}
+		});
+
+		if ($("#prowl").is(":checked"))
+			{
+				$("#prowloptions").show();
+			}
+		else
+			{
+				$("#prowloptions").hide();
+			}
+		
+		$("#prowl").click(function(){
+			if ($("#prowl").is(":checked"))
+			{
+				$("#prowloptions").show("fast");
+			}
+			else
+			{
+				$("#prowloptions").hide("fast");
+			}
+		});		
+		
+		$("#mirror").change(handleNewSelection);
+		handleNewSelection.apply($("#mirror"));
+
+	});
+	
+	</script>
+</%def>
--- a/data/interfaces/remix/extras.html
+++ b/data/interfaces/remix/extras.html
@@ -0,0 +1,13 @@
+<%inherit file="base.html" />
+<%def name="body()">
+	<div class="table_wrapper">
+		<h1>Artists You Might Like</h1>
+		<div class="cloudtag">
+			<ul id="cloud">
+			%for artist in cloudlist:
+				<li><a href="addArtist?artistid=${artist['ArtistID']}" class="tag${artist['Count']}">${artist['ArtistName']}</a></li>
+			%endfor
+			</ul>
+		</div>
+	</div>
+</%def>
--- a/data/interfaces/remix/history.html
+++ b/data/interfaces/remix/history.html
@@ -0,0 +1,85 @@
+<%inherit file="base.html"/>
+<%!
+	from headphones import helpers
+%>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="clearhistory?type=all">Clear All History</a></li>
+			<li><a href="clearhistory?type=Processed">Clear Processed</a></li>
+			<li><a href="clearhistory?type=Unprocessed">Clear Unprocessed</a></li>
+			<li><a href="clearhistory?type=Snatched">Clear Snatched</a></li>
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<div id="paddingheader">
+		History
+	</div>
+	<table class="display" id="history_table">
+		<thead>
+			<tr>
+				<th id="dateadded">Date Added</th>
+				<th id="filename">File Name</th>
+				<th id="size">Size</th>
+				<th id="status">Status</th>
+				<th id="action"></th>
+			</tr>
+		</thead>
+		<tbody>
+		%for item in history:
+			<%
+				if item['Status'] == 'Processed':
+					grade = 'A'
+				elif item['Status'] == 'Snatched':
+					grade = 'C'
+				elif item['Status'] == 'Unprocessed':
+					grade = 'X'
+				else:
+					grade = 'U'
+					
+				fileid = 'unknown'
+				if item['URL'].find('nzb') != -1:
+					fileid = 'nzb'
+				if item['URL'].find('torrent') != -1:
+					fileid = 'torrent'
+			%>
+			<tr class="grade${grade}">
+				<td id="dateadded">${item['DateAdded']}</td>
+				<td id="filename">${item['Title']} [<a href="${item['URL']}">${fileid}</a>]<a href="albumPage?AlbumID=${item['AlbumID']}">[album page]</a></td>
+				<td id="size">${helpers.bytes_to_mb(item['Size'])}</td>
+				<td id="status">${item['Status']}</td>
+				<td id="action">[<a href="queueAlbum?AlbumID=${item['AlbumID']}&redirect=history">retry</a>][<a href="queueAlbum?AlbumID=${item['AlbumID']}&new=True&redirect=history">new</a>]</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#history_table').dataTable(
+			{
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ items per page",
+					"sEmptyTable": "No History to Display",
+					"sInfo":"Showing _START_ to _END_ of _TOTAL_ items",
+					"sInfoEmpty":"Showing 0 to 0 of 0 items",
+					"sInfoFiltered":"(filtered from _MAX_ total items)"},
+				"iDisplayLength": 25,
+				"sPaginationType": "full_numbers",
+				"aaSorting": []
+
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/remix/index.html
+++ b/data/interfaces/remix/index.html
@@ -0,0 +1,86 @@
+<%inherit file="base.html"/>
+<%!
+	from headphones import helpers
+%>
+
+<%def name="body()">
+	<table class="display" id="artist_table">
+		<thead>
+			<tr>
+				<th id="name">Artist Name</th>
+				<th id="status">Status</th>
+				<th id="album">Latest Album</th>
+				<th id="have">Have</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for artist in artists:
+			<%
+				totaltracks = artist['TotalTracks']
+				havetracks = artist['HaveTracks']
+				if not havetracks:
+					havetracks = 0
+				try:
+					percent = (havetracks*100.0)/totaltracks
+					if percent > 100:
+						percent = 100
+				except (ZeroDivisionError, TypeError):
+					percent = 0
+					totaltracks = '?'
+				
+				if artist['ReleaseDate'] and artist['LatestAlbum']:
+					releasedate = artist['ReleaseDate']
+					albumdisplay = '<i>%s</i> (%s)' % (artist['LatestAlbum'], artist['ReleaseDate'])
+					if releasedate > helpers.today():
+						grade = 'A'
+					else:
+						grade = 'Z'
+				elif artist['LatestAlbum']:
+					releasedate = ''
+					grade = 'Z'
+					albumdisplay = '<i>%s</i>' % artist['LatestAlbum']
+				else:
+					releasedate = ''
+					grade = 'Z'
+					albumdisplay = '<i>None</i>'
+				
+				if artist['Status'] == 'Paused':
+					grade = 'X'
+				
+			%>
+			<tr class="grade${grade}">
+				<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
+				<td id="status">${artist['Status']}</td>
+				<td id="album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
+				<td id="have"><span title="${percent}"></span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#artist_table').dataTable(
+			{
+				"aoColumns": [
+					{ "sType": "title-string"},
+					null,
+					{ "sType": "title-string"},
+					{ "sType": "title-numeric"}
+				],
+				"bStateSave": true,
+				"iDisplayLength": 50,
+				"sPaginationType": "full_numbers",
+				
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/remix/logs.html
+++ b/data/interfaces/remix/logs.html
@@ -0,0 +1,60 @@
+<%inherit file="base.html"/>
+<%!
+	from headphones import helpers
+%>
+
+<%def name="body()">
+	<table class="display" id="log_table">
+		<thead>
+			<tr>
+				<th id="timestamp">Timestamp</th>
+				<th id="level">Level</th>
+				<th id="message">Message</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for line in lineList:
+			<%
+				timestamp, message, level, threadname = line
+				
+				if level == 'WARNING' or level == 'ERROR':
+					grade = 'X'
+				else:
+					grade = 'Z'
+			%>
+				<tr class="grade${grade}">
+					<td id="timestamp">${timestamp}</td>
+					<td id="level">${level}</td>
+					<td id="message">${message}</td>
+				</tr>
+		%endfor
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#log_table').dataTable(
+			{
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ lines per page",
+					"sEmptyTable": "No log information available",
+					"sInfo":"Showing _START_ to _END_ of _TOTAL_ lines",
+					"sInfoEmpty":"Showing 0 to 0 of 0 lines",
+					"sInfoFiltered":"(filtered from _MAX_ total lines)"},
+				"bStateSave": true,
+				"iDisplayLength": 100,
+				"sPaginationType": "full_numbers",
+				"aaSorting": []
+
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/remix/manage.html
+++ b/data/interfaces/remix/manage.html
@@ -0,0 +1,74 @@
+<%inherit file="base.html" />
+<%!
+	import headphones
+	from headphones.helpers import checked
+%>
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="manageArtists">Manage Artists</a></li>
+			%if not headphones.ADD_ARTISTS:
+			<li><a href="manageNew">Manage New Artists</a></li>
+			%endif
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<div id="paddingheader">
+		<h1><h1>
+	</div>
+	<div class="table_wrapper">
+		<h1>Scan Music Library</h1><br />
+		Where do you keep your music?<br /><br />
+		You can put in any directory, and it will scan for audio files in that folder
+		(including all subdirectories)<br /><br />		For example: '/Users/name/Music'
+		<br /> <br />
+		It may take a while depending on how many files you have. You can navigate away from the page<br />
+		as soon as you click 'Submit'
+		<br /><br />
+		<form action="musicScan" method="GET" align="center">
+		%if headphones.MUSIC_DIR:
+			<input type="text" value="${headphones.MUSIC_DIR}" name="path" size="70" />
+		%else:
+			<input type="text" value="Enter a Music Directory to scan" onfocus="if
+			(this.value==this.defaultValue) this.value='';" name="path" size="70" />
+		%endif
+		<br>
+		<h3><input type="checkbox" name="autoadd" value="1" ${checked(headphones.ADD_ARTISTS)}>Automatically add new artists</h3>
+		<br><br>
+		<input type="submit" /></form>
+	</div>
+
+	<div class="table_wrapper_left">
+		<h1>Import Last.FM Artists</h1><br />
+		Enter the username whose artists you want to import:<br /><br />
+		<form action="importLastFM" method="GET" align="center">
+			<%
+				if headphones.LASTFM_USERNAME:
+					lastfmvalue = headphones.LASTFM_USERNAME
+				else:
+					lastfmvalue = 'Last.fm Username'
+			%>
+			<input type="text" value="${lastfmvalue}" onfocus="if
+			(this.value==this.defaultValue) this.value='';" name="username" size="18" />
+			<input type="submit" /></form><br /><br />
+	</div>
+	
+	<div class="table_wrapper_right">
+		<h1>Placeholder :-)</h1><br />
+		<br /><br />
+		<form action="" method="GET" align="center">
+			<input type="text" value="" onfocus="if
+			(this.value==this.defaultValue) this.value='';" name="" size="18" />
+			<input type="submit" /></form><br /><br />
+	</div>
+	
+	<div class="table_wrapper">
+		<h1>Force Search</h1><br />
+			<h3><a href="forceSearch">Force Check for Wanted Albums</a></h3>
+			<h3><a href="forceUpdate">Force Update Active Artists</a></h3>
+			<h3><a href="forcePostProcess">Force Post-Process Albums in Download Folder</a></h3><br><br>
+			<h3><a href="checkGithub">Check for Headphones Updates</a></h3>
+	</div>
+</%def>
--- a/data/interfaces/remix/manageartists.html
+++ b/data/interfaces/remix/manageartists.html
@@ -0,0 +1,82 @@
+<%inherit file="base.html" />
+
+<%def name="body()">
+	<div id="paddingheader">
+		<h1>Manage Artists<h1>
+	</div>
+	<form action="markArtists" method="get">
+	<p class="indented">
+		<select name="action">
+  			<option value="pause">Pause</option>
+  			<option value="resume">Resume</option>
+  			<option value="refresh">Refresh</option>
+  			<option value="delete">Delete</option>
+		</select>
+		selected artists
+		<input type="submit" value="Go">
+	</p>
+	<table class="display" id="artist_table">
+		<thead>
+			<tr>
+				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
+				<th id="name">Artist Name</th>
+				<th id="status">Status</th>
+				<th id="album">Latest Album</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for artist in artists:
+			<%
+				if artist['Status'] == 'Paused':
+					grade = 'X'
+				elif artist['Status'] == 'Loading':
+					grade = 'C'
+				else:
+					grade = 'Z'
+					
+				if artist['ReleaseDate'] and artist['LatestAlbum']:
+					releasedate = artist['ReleaseDate']
+					albumdisplay = '<i>%s</i> (%s)' % (artist['LatestAlbum'], artist['ReleaseDate'])	
+				elif artist['LatestAlbum']:
+					releasedate = ''
+					albumdisplay = '<i>%s</i>' % artist['LatestAlbum']
+				else:
+					releasedate = ''
+					albumdisplay = '<i>None</i>'
+			%>
+			<tr class="grade${grade}">
+				<td id="select"><input type="checkbox" name="${artist['ArtistID']}" class="checkbox" /></td>
+				<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
+				<td id="status">${artist['Status']}</td>	
+				<td id="album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+	</form>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#artist_table').dataTable(
+			{
+				"aoColumns": [
+					null,
+					{ "sType": "title-string"},
+					null,
+					{ "sType": "title-string"}
+				],
+				"bStateSave": true,
+				"bPaginate": false
+				
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/remix/managenew.html
+++ b/data/interfaces/remix/managenew.html
@@ -0,0 +1,52 @@
+<%inherit file="base.html" />
+<%!
+	import headphones
+%>
+<%def name="body()">
+	<div id="paddingheader">
+		<h1>Manage New Artists<h1>
+		<h3><a href="musicScan?path=${headphones.MUSIC_DIR}&redirect=manageNew">Scan Music Library</a></h3>
+	</div>
+	<form action="addArtists" method="get">
+	<p class="indented">
+		Add selected artists
+		<input type="submit" value="Go">
+	</p>
+	<table class="display" id="artist_table">
+		<thead>
+			<tr>
+				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
+				<th id="name">Artist Name</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for artist in headphones.NEW_ARTISTS:
+			<tr class="gradeZ">
+				<td id="select"><input type="checkbox" name="${artist}" class="checkbox" /></td>
+				<td id="name">${artist}</a></td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+	</form>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#artist_table').dataTable(
+			{
+				"aaSorting": [[1, 'asc']],
+				"bStateSave": false,
+				"bPaginate": false
+				
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/remix/searchresults.html
+++ b/data/interfaces/remix/searchresults.html
@@ -0,0 +1,70 @@
+<%inherit file="base.html" />
+
+<%def name="body()">
+
+	<div id="paddingheader">
+		<h1>Search Results<h1>
+	</div>
+	<table class="display" id="searchresults_table">
+		<thead>
+			<tr>
+			%if type == 'album':
+				<th id="albumname">Album Name</th>
+			%endif
+				<th id="artistname">Artist Name</th>
+				<th id="score">Score</th>
+				<th id="add"></th>
+			</tr>
+		</thead>
+		<tbody>
+			%if searchresults:
+				%for result in searchresults:
+				<%
+					if result['score'] == 100:
+						grade = 'A'
+					else:
+						grade = 'Z'
+				%>
+				<tr class="grade${grade}">
+				%if type == 'album':
+					<td id="albumname"><a href="${result['albumurl']}">${result['title']}</a></td>
+				%endif
+					<td id="artistname"><a href="${result['url']}">${result['uniquename']}</a></td>
+					<td id="score">${result['score']}</td>
+				%if type == 'album':	
+					<td id="add"><a href="addReleaseById?rid=${result['albumid']}">Add this album</a></td>
+				%else:
+					<td id="add"><a href="addArtist?artistid=${result['id']}">Add this artist</a></td>
+				%endif
+				</tr>
+				%endfor
+			%endif
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#searchresults_table').dataTable(
+			{
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ results per page",
+					"sEmptyTable": "No results",
+					"sInfo":"Showing _START_ to _END_ of _TOTAL_ results",
+					"sInfoEmpty":"Showing 0 to 0 of 0 results",
+					"sInfoFiltered":"(filtered from _MAX_ total results)"},
+				"iDisplayLength": 25,
+				"sPaginationType": "full_numbers",
+				"aaSorting": []
+
+			});
+	});
+	</script>
+</%def>
--- a/data/interfaces/remix/shutdown.html
+++ b/data/interfaces/remix/shutdown.html
@@ -0,0 +1,13 @@
+<%inherit file="base.html"/>
+
+<%def name="headIncludes()">
+	<meta http-equiv="refresh" content="${timer};url=index">
+</%def>
+
+<%def name="body()">
+	<div class="table_wrapper">
+		<div id="shutdown">
+		<h1>Headphones is ${message}</h1>
+		</div>
+	</div>
+</%def>
--- a/data/interfaces/remix/style.css
+++ b/data/interfaces/remix/style.css
@@ -0,0 +1,298 @@
+/*  HTML5 ✰ Boilerplate  */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after,
+q:before, q:after { content: ''; content: none; }
+ins { background-color: #ff9; color: #000; text-decoration: none; }
+mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+del { text-decoration: line-through; }
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+table { border-collapse: collapse; border-spacing: 0; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+input, select { vertical-align: middle; }
+
+body { font:13px/1.231 sans-serif; *font-size:small; } 
+select, input, textarea, button { font:99% sans-serif; }
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+html { overflow-y: scroll; }
+a:hover, a:active { outline: none; }
+ul, ol { margin-left: 2em; }
+ol { list-style-type: decimal; }
+nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
+small { font-size: 85%; }
+strong, th { font-weight: bold; }
+td { vertical-align: top; }
+
+sub, sup { font-size: 75%; line-height: 0; position: relative; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
+textarea { overflow: auto; }
+.ie6 legend, .ie7 legend { margin-left: -7px; } 
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+.ie6 input { vertical-align: text-bottom; }
+label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+button, input, select, textarea { margin: 0; }
+input:valid, textarea:valid   {  }
+input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
+.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
+
+::-moz-selection{ background: grey; color:#fff; text-shadow: none; }
+::selection { background: grey; color:#fff; text-shadow: none; }
+
+button {  width: auto; overflow: visible; }
+.ie7 img { -ms-interpolation-mode: bicubic; }
+
+body, select, input, textarea {  color: #444; }
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+
+/*
+    // ========================================== \\
+   ||                                              ||
+   ||               Custom Styles                  ||
+   ||                                              ||
+    \\ ========================================== //
+*/
+
+a:link {
+	color: orange; 
+  	text-decoration: none; 
+  	}
+a:visited {
+  	color: orange; 
+	text-decoration: none; 
+	}
+a:hover { /*this effect is not shown in NN4.xx*/
+  	color: #999999; 
+	text-decoration: underline;
+  	}
+a:active {/*colour in NN4.xx is red*/ 
+  	color: #5E2612; 
+  	text-decoration: underline; 
+	}
+a.blue {
+	color: blue;
+	}
+
+container {  }
+
+body { background-color: black; min-width: 935px; }
+
+header { min-height: 68px; width: 100%; min-width: 935px; padding-left: 0px; padding-right: 10px; background-color: #black; position: fixed; z-index: 998; }
+
+h1 { font-size: 24px; }
+h2 { font-size: 20px; }
+h3 { font-size: 16px; }
+
+p.indented { padding-top: 20px; margin-left: 20px; font-size: 14px; }
+p.center { text-align: center; font-size: 18px; }
+.smalltext2 { font-size: 11px; margin-left: 45px; }
+
+div#updatebar { text-align: center; min-width: 970px; width: 100%; background-color: light-blue; float: left; }
+div#logo { float: left; padding-left: 10px; }
+
+ul#nav { margin: 25px 0 0 0; float: left; list-style-type: none; }
+ul#nav li { margin: 40px 0px auto 10px;  display: inline; }
+ul#nav li a { padding: 5px; font-size: 16px; font-weight: bold; color: white; text-decoration: none; }
+ul#nav li a:hover { background-color: #a3e532; }
+
+div#subhead_container { height: 30px; width:100%; min-width: 1000px; background-color: blue; float: left; list-style-type: none; z-index: 998; overflow: hidden; }
+ul#subhead_menu { margin-top: 5px; }
+ul#subhead_menu li { width: 100%; height: 100%; display: inline; }
+ul#subhead_menu li a { padding: 5px 15px 10px 15px; vertical-align: middle; color: white; font-size: 16px; text-decoration: none; }
+ul#subhead_menu li a:hover { width: 100%; height: 100%; background-color: #grey; }
+
+div#searchbar { margin: 24px 30px auto auto; float: right; }
+
+div#main { margin: 0; padding: 80px 0 0 0; }
+
+.table_wrapper { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; width: 88%; margin: 20px auto 0 auto; padding: 25px; background-color: white; position: relative; min-height: 200px; clear: both; _height: 302px; zoom: 1; }
+.manage_wrapper { width: 88%; margin: 20px auto 0 auto; padding: 25px; min-height: 150px; clear: both; _height: 302px; zoom: 1; }
+.table_wrapper_left { padding: 25px; background-color: #ffffff; float: left; width: 40%; min-height: 100px; margin-top: 25px; margin-left: 30px; margin-right: auto; -moz-border-radius: 20px; border-radius: 20px; }
+.table_wrapper_right{ padding: 25px; background-color: #ffffff; width: 40%; min-height: 100px; margin-top: 25px; margin-left: auto; margin-right: 30px; -moz-border-radius: 20px; border-radius: 20px; }
+
+.configtable { font-size: 14px; line-height:18px; }
+.configtable td { width: 350px; padding: 10px; }
+.configtable td#middle { vertical-align: middle; }
+
+table#artist_table { background-color: white; width: 100%; padding: 20px; }
+
+table#artist_table th#name { text-align: left; min-width: 200px; }
+table#artist_table th#status { text-align: left; min-width: 50px; }
+table#artist_table th#album { text-align: left; min-width: 300px; }
+table#artist_table th#have { text-align: center; }
+table#artist_table td#name { vertical-align: middle; text-align: left; min-width:200px; }
+table#artist_table td#status { vertical-align: middle; text-align: left; min-width: 50px; }
+table#artist_table td#album { vertical-align: middle; text-align: left; min-width: 300px; }
+table#artist_table td#have { vertical-align: middle; }
+
+div#paddingheader { padding-top: 48px; font-size: 24px; font-weight: bold; text-align: center; }
+div#nopaddingheader { font-size: 24px; font-weight: bold; text-align: center; }
+table#album_table { background-color: white; }
+
+table#album_table th#select { vertical-align: middle; text-align: left; min-width: 25px; }
+table#album_table th#albumart { text-align: left; min-width: 50px; }
+table#album_table th#albumname { text-align: center; min-width: 150px; }
+table#album_table th#reldate { width: 175px; text-align: center; min-width: 100px; }
+table#album_table th#status { width: 175px; text-align: center; min-width: 100px; }
+table#album_table th#type { width: 175px; text-align: center; min-width: 100px; }
+table#album_table td#select { vertical-align: middle; text-align: left; }
+table#album_table td#albumart { vertical-align: middle; text-align: left; }
+table#album_table td#albumname { vertical-align: middle; text-align: center; }
+table#album_table td#reldate { vertical-align: middle; text-align: center; }
+table#album_table td#status { vertical-align: middle; text-align: center; }
+table#album_table td#type { vertical-align: middle; text-align: center; }
+table#album_table td#have { vertical-align: middle; }
+
+img.albumArt { float: left; padding-right: 5px; }
+div#albumheader { padding-top: 48px; height: 200px; }
+div#track_wrapper { padding-top: 20px; text-align: center; font-size: 16px; }
+
+table#track_table th#number { text-align: right; min-width: 20px; }
+table#track_table th#name { text-align: center; min-width: 350px; }
+table#track_table th#duration { width: 175px; text-align: center; min-width: 100px; }
+table#track_table th#have { width: 175px; text-align: center; min-width: 100px; }
+
+table#track_table td#number { vertical-align: middle; text-align: right; }
+table#track_table td#name { vertical-align: middle; text-align: center; }
+table#track_table td#duration { vertical-align: middle; text-align: center; }
+table#track_table td#have { vertical-align: middle; text-align: center; }
+
+table#history_table { background-color: white; width: 100%;  }
+
+table#log_table { background-color: white; }
+
+table#log_table th#timestamp { text-align: left; min-width: 150px; }
+table#log_table th#level { text-align: left; min-width: 60px; }
+table#log_table th#message { text-align: left; min-width: 500px; }
+
+table#upcoming_table th#albumart { text-align: center; min-width: 50px; }
+table#upcoming_table th#albumname { text-align: center; min-width: 200px; }
+table#upcoming_table th#artistname { text-align: center; min-width: 150px; }
+table#upcoming_table th#reldate { text-align: center; min-width: 100px; }
+table#upcoming_table th#type { text-align: center; min-width: 75px; }
+
+table#upcoming_table td#select { vertical-align: middle; text-align: center; }
+table#upcoming_table td#albumart { vertical-align: middle; text-align: center; min-width: 50px; }
+table#upcoming_table td#albumname { vertical-align: middle; text-align: center; min-width: 200px; }
+table#upcoming_table td#artistname { vertical-align: middle; text-align: center; min-width: 150px; }
+table#upcoming_table td#reldate { vertical-align: middle; text-align: center; min-width: 100px; }
+table#upcoming_table td#type { vertical-align: middle; text-align: center; min-width: 75px; }
+table#upcoming_table td#status { vertical-align: middle; text-align: center; }
+
+table#wanted_table th#albumart { text-align: center; min-width: 50px; }
+table#wanted_table th#albumname { text-align: center; min-width: 200px; }
+table#wanted_table th#artistname { text-align: center; min-width: 150px; }
+table#wanted_table th#reldate { text-align: center; min-width: 100px; }
+table#wanted_table th#type { text-align: center; min-width: 75px; }
+
+table#wanted_table td#select { vertical-align: middle; text-align: center; }
+table#wanted_table td#albumart { vertical-align: middle; text-align: center; min-width: 50px; }
+table#wanted_table td#albumname { vertical-align: middle; text-align: center; min-width: 200px; }
+table#wanted_table td#artistname { vertical-align: middle; text-align: center; min-width: 150px; }
+table#wanted_table td#reldate { vertical-align: middle; text-align: center; min-width: 100px; }
+table#wanted_table td#type { vertical-align: middle; text-align: center; min-width: 75px; }
+table#wanted_table td#status { vertical-align: middle; text-align: center; }
+
+table#searchresults_table th#albumname { text-align: left; min-width: 225px; }
+table#searchresults_table th#artistname { text-align: center; min-width: 325px; }
+table#searchresults_table th#score { text-align: center; min-width: 75px; }
+
+table#searchresults_table td#albumname { vertical-align: middle; text-align: left; min-width: 200px; }
+table#searchresults_table td#artistname { vertical-align: middle; text-align: left; min-width: 300px; }
+table#searchresults_table td#score { vertical-align: middle; text-align: center; min-width: 75px; }
+
+div.progress-container { border: 1px solid #ccc; width: 100px; height: 14px; margin: 2px 5px 2px 0; padding: 1px; float: left; background: white; }
+div.progress-container > div { background-color: #a3e532; height: 14px; }
+.havetracks { font-size: 13px; margin-left: 36px; padding-bottom: 3px; vertical-align: middle; }
+
+footer { margin: 20px auto 20px auto; }
+div#version { text-align: center; font-weight: bold; }
+div#donate { text-align: center; margin: 20px auto 20px auto; }
+
+div#shutdown{ text-align: center; vertical-align: middle; }
+
+.cloudtag { padding-top: 30px; font-size:16px; }
+#cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
+#cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
+#cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
+#cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
+#cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
+#cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
+#cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
+#cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
+#cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
+#cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
+
+#cloud { padding: 2px; line-height: 1.5em; text-align: center; }
+#cloud a { padding: 0px; }
+#cloud { margin: 0; }
+#cloud li { display: inline; }
+
+
+
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.hidden { display: none; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+@media all and (orientation:portrait) {
+
+}
+
+@media all and (orientation:landscape) {
+
+}
+
+@media screen and (max-device-width: 480px) {
+
+  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
+}
+
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
+  -ms-filter: none !important; } 
+  a, a:visited { color: #444 !important; text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; }
+  tr, img { page-break-inside: avoid; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3{ page-break-after: avoid; }
+}
--- a/data/interfaces/remix/upcoming.html
+++ b/data/interfaces/remix/upcoming.html
@@ -0,0 +1,86 @@
+<%inherit file="base.html" />
+<%def name="body()">
+	<div class="table_wrapper">
+		<h1>Upcoming Albums</h1>
+		<table class="display" id="upcoming_table">
+		<thead>
+			<tr>
+				<th id="albumart"></th>
+				<th id="artistname">Artist</th>
+				<th id="albumname">Album Name</th>
+				<th id="reldate">Release Date</th>
+				<th id="type">Type</th>
+				<th id="status">Status</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for album in upcoming:
+			<tr class="gradeZ">
+				<td id="albumart"><img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" height="50" width="50"></td>
+				<td id="artistname">${album['ArtistName']}</td>
+				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+				<td id="reldate">${album['ReleaseDate']}</td>
+				<td id="type">${album['Type']}</td>
+				<td id="status">${album['Status']}</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+	</div>
+	
+	<form action="markAlbums" method="get">
+	<p class="indented">Mark selected albums as 
+		<select name="action">
+  			<option value="Skipped">Skipped</option>
+  			<option value="Downloaded">Downloaded</option>
+		</select>
+		<input type="submit" value="Go">
+	</p>
+	<div class="table_wrapper">
+		<h1>Wanted Albums</h1>
+		<table class="display" id="wanted_table">
+		<thead>
+			<tr>
+				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
+				<th id="albumart"></th>
+				<th id="artistname">Artist</th>
+				<th id="albumname">Album Name</th>
+				<th id="reldate">Release Date</th>
+				<th id="type">Type</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for album in wanted:
+			<tr class="gradeZ">
+				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></th>
+				<td id="albumart"><img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" height="50" width="50"></td>
+				<td id="artistname">${album['ArtistName']}</td>
+				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+				<td id="reldate">${album['ReleaseDate']}</td>
+				<td id="type">${album['Type']}</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+		
+	</div>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#wanted_table').dataTable(
+			{
+				"bFilter": false,
+				"bInfo": false,
+				"bPaginate": false
+			});
+	});
+	</script>
+</%def>
--- a/data/js/selectFix.js
+++ b/data/js/selectFix.js
@@ -1,84 +0,0 @@
-/*/////////////////////////////////////////////////////////////////////////////////
-VERSION 1.3 - Updated January 4, 2011
-CREATED BY KEVIN MACK
-DETAILS: http://nicetransition.com/_plugins/jQuery-Cross-Browser-Select-Fix 
-//////////////////////////////////////////////////////////////////////////////////*/
-(function ($) {
-    $.fn.selectFix = function (options) {
-        $(this).each(function () {
-
-            var settings = $.extend({ 'extraStyles': true, 'responsive': false, 'arrow': true, 'arrowWidth': 20, 'arrowContent': '', 'className': 'select', 'classText': 'text', 'classArrow': 'arrow', 'classFocus': 'focused', 'classEnd': 'selected', 'display': 'inline-block' }, options);
-
-            var className = "." + settings.className;
-            var selectField = $(this);
-
-            selectField.css({ '-webkit-appearance': 'none', 'box-sizing': 'border-box', '-moz-box-sizing': 'border-box', '-webkit-box-sizing': 'border-box', 'cursor': 'pointer' }); //mac OS bug fix on webkit render
-
-            var initVal;
-            if (selectField.children("option:selected").size() > 0) {
-                initVal = selectField.children("option:selected").eq(0).text();
-            } else {
-                initVal = selectField.children("option").eq(0).text();
-            }
-
-            var height = selectField.css("height");
-            var width = selectField.css("width").replace("px", "");
-            var widthPercent;
-
-            if (settings.responsive) {
-                widthPercent = (100 * parseInt(width.replace("px", "")) / parseInt(selectField.parent().css('width').replace("px", ""))) + '%';
-            } else {
-                widthPercent = width + "px";
-            }
-
-            var arrow;
-            var arrowWidth = String(settings.arrowWidth);
-
-            if (arrowWidth.indexOf('px') < 0 && arrowWidth.indexOf('%') < 0) {
-                arrowWidth = arrowWidth + "px";
-            }
-            if (settings.arrow == true) {
-                arrow = "<span style=\"display: block; height: 100%; position: absolute; right: 0; width: " + arrowWidth + ";\" class=\"" + settings.classArrow + "\">" + settings.arrowContent + "</span>";
-            } else {
-                arrow = "";
-            }
-
-            selectField.css({ "display": "block", "left": 0, "opacity": 0, "position": "absolute", "top": 0, "z-index": 1 }).wrap("<div class=\"" + settings.className + "\"style=\"overflow: hidden; display: " + settings.display + "; position: relative;  width: " + widthPercent + ";\"></div>").closest(className).append("<span style=\"display: block; left: 0; height: " + height + "; line-height: inherit; position: absolute; top: 0; width: 100%;\" class=\"" + settings.classText + "\">" + initVal + "</span>" + arrow);
-
-            selectField.bind({
-                change: function (event) {
-                    selectField.siblings("." + settings.classText).html(selectField.children("option[value=" + selectField.val() + "]").text());
-                    if (settings.extraStyles == true) {
-                        selectField.parent(className).addClass(settings.classEnd).removeClass(settings.classFocus); //optional styling to be used once a selection has been made
-                    }
-                    if (selectField.val() == '' || selectField.val() == undefined || selectField.val() == null) {
-                        selectField.parent(className).removeClass(settings.classEnd);
-                    }
-                },
-                focus: function (event) {
-                    if (settings.extraStyles == true) {
-                        selectField.parent(className).addClass(settings.classFocus);
-                    }
-                    selectField.keyup(function () {
-                        selectField.siblings("." + settings.classText).html($(this).children("option:selected").text());                        
-                    });
-                },
-                click: function () {
-                    if (settings.extraStyles == true) {
-                        selectField.parent(className).addClass(settings.classFocus);
-                    }
-                },
-                blur: function () {
-                    if (settings.extraStyles == true) {
-                        selectField.parent(className).removeClass(settings.classFocus);
-                    }
-                }
-            });
-
-            if ($(".stlyesFor" + settings.className).size() < 1) {
-                selectField.after("<style type=\"text/css\" class=\"stlyesFor" + settings.className + "\">." + settings.className + " select {width: 100%;}</style>");
-            }
-
-        });
-    }
-})(jQuery)
--- a/data/js/selectFix.min.js
+++ b/data/js/selectFix.min.js
@@ -1,6 +0,0 @@
-(function (a) { a.fn.selectFix = function (b) { a(this).each(function () { var d = a.extend({ extraStyles: true, responsive: false, arrow: true, arrowWidth: 20, arrowContent: "", className: "select", classText: "text", classArrow: "arrow", classFocus: "focused", classEnd: "selected", display: "inline-block" }, b); var g = "." + d.className; var k = a(this); k.css({ "-webkit-appearance": "none", "box-sizing": "border-box", "-moz-box-sizing": "border-box", "-webkit-box-sizing": "border-box", cursor: "pointer" }); var f; if (k.children("option:selected").size() > 0) { f = k.children("option:selected").eq(0).text(); } else { f = k.children("option").eq(0).text(); } var j = k.css("height"); var c = k.css("width").replace("px", ""); var h; if (d.responsive) { h = (100 * parseInt(c.replace("px", "")) / parseInt(k.parent().css("width").replace("px", ""))) + "%"; } else { h = c + "px"; } var i; var e = String(d.arrowWidth); if (e.indexOf("px") < 0 && e.indexOf("%") < 0) { e = e + "px"; } if (d.arrow == true) { i = '<span style="display: block; height: 100%; position: absolute; right: 0; width: ' + e + ';" class="' + d.classArrow + '">' + d.arrowContent + "</span>"; } else { i = ""; } k.css({ display: "block", left: 0, opacity: 0, position: "absolute", top: 0, "z-index": 1 }).wrap('<div class="' + d.className + '"style="overflow: hidden; display: ' + d.display + "; position: relative;  width: " + h + ';"></div>').closest(g).append('<span style="display: block; left: 0; height: ' + j + '; line-height: inherit; position: absolute; top: 0; width: 100%;" class="' + d.classText + '">' + f + "</span>" + i); k.bind({ change: function (l) { k.siblings("." + d.classText).html(k.children("option[value=" + k.val() + "]").text()); if (d.extraStyles == true) { k.parent(g).addClass(d.classEnd).removeClass(d.classFocus); } if (k.val() == "" || k.val() == undefined || k.val() == null) { k.parent(g).removeClass(d.classEnd); } }, focus: function (l) { if (d.extraStyles == true) { k.parent(g).addClass(d.classFocus); } k.keyup(function () { k.siblings("." + d.classText).html(a(this).children("option:selected").text()); }); }, click: function () { if (d.extraStyles == true) { k.parent(g).addClass(d.classFocus); } }, blur: function () { if (d.extraStyles == true) { k.parent(g).removeClass(d.classFocus); } } }); if (a(".stlyesFor" + d.className).size() < 1) { k.after('<style type="text/css" class="stlyesFor' + d.className + '">.' + d.className + " select {width: 100%;}</style>"); } }); }; })(jQuery);
-/*/////////////////////////////////////////////////////////////////////////////////
-VERSION 1.3 - Updated January 4, 2011
-CREATED BY KEVIN MACK
-DETAILS: http://nicetransition.com/_plugins/jQuery-Cross-Browser-Select-Fix 
-//////////////////////////////////////////////////////////////////////////////////*/