diff --git a/index.html b/index.html
index 4e188df..43e5d52 100644
--- a/index.html
+++ b/index.html
@@ -1,617 +1,719 @@
-<html>
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
-<title>Vidya Intarweb Playlist - HTML5 Player</title>
-<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
-<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
-<script>
-	var g_playlist = null;
-	var g_previous = [];
-	var g_previous_idx = 0;
-	var g_looping = false;
-	var MAX_HISTORY = 10;
-
-	var scrubp = 0;
-	var is_dragging_scrubber = false;
-
-	var PLAYLISTS = {
-		'VIP': 'http://vip.aersia.net/roster.xml',
-		'Mellow': 'http://vip.aersia.net/roster-mellow.xml',
-		'Source': 'http://vip.aersia.net/roster-source.xml',
-		'Exiled': 'http://vip.aersia.net/roster-exiled.xml',
-		'WAP': 'http://wap.aersia.net/roster.xml',
-		'CPP': 'http://cpp.aersia.net/roster.xml',
-	};
-
-	var DEFAULT_PLAYLIST = 'VIP';
-
-	function formatTimecode (seconds) {
-		seconds = Math.floor (seconds);
-		minutes = Math.floor (seconds / 60);
-		seconds = seconds - (minutes * 60);
-		minutes = "" + minutes;
-		seconds = "" + seconds;
-
-		if (minutes.length == 1)
-			minutes = "0" + minutes;
-		if (seconds.length == 1)
-			seconds = "0" + seconds;
-
-		return minutes + ":" + seconds;
-	}
-
-	// Creates an id for a track used in the location hash
-	function createTrackId (track) {
-		var playlist = $('#select-playlist').val ();
-		var track = track.creator + ' - ' + track.title;
-		track = track.replace(/[^a-zA-Z0-9-]/g, '_');
-
-		return encodeURIComponent (playlist) + ':' + track;
-	}
-
-	function parseTrackId (trackId) {
-		var pieces = trackId.split (':');
-		var playlist = '';
-		var track = '';
-
-		if (pieces.length < 2) {
-			playlist = decodeURIComponent (trackId);
-			track = '';
-		} else {
-			pieces.pop ();
-			playlist = decodeURIComponent (pieces.join (':'));
-			track = trackId;
-		}
-
-		if (!(playlist in PLAYLISTS))
-			return null;
-
-		return {
-			playlist: playlist,
-			track: track
-		};
-	}
-
-	function parsePlaylist (playlistXML) {
-		result = [];
-
-		$(playlistXML).find ('playlist trackList > track').each (function () {
-			track = {
-				creator: $(this).find ('creator').text (),
-				title: $(this).find ('title').text (),
-				location: $(this).find ('location').text ()
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>&gt; metagala VIP</title>
+		<meta charset="UTF-8">
+		<meta name=viewport content="width=device-width, initial-scale=1">
+		<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+		<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
+		<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
+		<script>
+			var g_playlist = null;
+			var g_previous = [];
+			var g_previous_idx = 0;
+			var g_looping = false;
+			var MAX_HISTORY = 10;
+
+			var scrubp = 0;
+			var is_dragging_scrubber = false;
+
+			var PLAYLISTS = {
+				'VIP': 'http://vip.aersia.net/roster.xml',
+				'Mellow': 'http://vip.aersia.net/roster-mellow.xml',
+				'Source': 'http://vip.aersia.net/roster-source.xml',
+				'Exiled': 'http://vip.aersia.net/roster-exiled.xml',
+				'WAP': 'http://wap.aersia.net/roster.xml',
+				'CPP': 'http://cpp.aersia.net/roster.xml',
 			};
 
-			result.push (track);
-		});
+			var DEFAULT_PLAYLIST = 'VIP';
 
-		return result;
-	}
+			function formatTimecode (seconds) {
+				seconds = Math.floor (seconds);
+				minutes = Math.floor (seconds / 60);
+				seconds = seconds - (minutes * 60);
+				minutes = "" + minutes;
+				seconds = "" + seconds;
 
-	function playPreviousTrack () {
-		if (g_playlist === null)
-			return;
+				if (minutes.length == 1)
+					minutes = "0" + minutes;
+				if (seconds.length == 1)
+					seconds = "0" + seconds;
 
-		if (g_previous_idx <= 0)
-			g_previous_idx = 0;
-		else
-			g_previous_idx -= 1;
+				return minutes + ":" + seconds;
+			}
+
+			// Creates an id for a track used in the location hash
+			function createTrackId (track) {
+				var playlist = $('#splaylist').val ();
+				var track = track.creator + ' - ' + track.title;
+				track = track.replace(/[^a-zA-Z0-9-]/g, '_');
+
+				return encodeURIComponent (playlist) + ':' + track;
+			}
+
+			function parseTrackId (trackId) {
+				var pieces = trackId.split (':');
+				var playlist = '';
+				var track = '';
+
+				if (pieces.length < 2) {
+					playlist = decodeURIComponent (trackId);
+					track = '';
+				} else {
+					pieces.pop ();
+					playlist = decodeURIComponent (pieces.join (':'));
+					track = trackId;
+				}
+
+				if (!(playlist in PLAYLISTS))
+					return null;
+
+				return {
+					playlist: playlist,
+					track: track
+				};
+			}
 
-		playTrack (g_previous[g_previous_idx]);
-	}
+			function parsePlaylist (playlistXML) {
+				result = [];
 
-	function playNextTrack () {
-		if (g_playlist === null)
-			return;
+				$(playlistXML).find ('playlist trackList > track').each (function () {
+					track = {
+						creator: $(this).find ('creator').text (),
+						title: $(this).find ('title').text (),
+						location: $(this).find ('location').text ()
+					};
 
-		if (g_previous_idx >= (g_previous.length - 1)) {
-			g_previous.push (Math.floor (Math.random () * g_playlist.length));
-			g_previous_idx = g_previous.length - 1;
-		}
-		else {
-			g_previous_idx += 1;
-		}
+					result.push (track);
+				});
 
-		while (g_previous.length > MAX_HISTORY) {
-			g_previous.shift ();
-			g_previous_idx -= 1;
-		}
+				return result;
+			}
 
-		playTrack (g_previous[g_previous_idx]);
-	}
+			function playPreviousTrack () {
+				if (g_playlist === null)
+					return;
 
+				if (g_previous_idx <= 0)
+					g_previous_idx = 0;
+				else
+					g_previous_idx -= 1;
 
-	function playTrack (trackid) {
-		var track = g_playlist[trackid];
+				playTrack (g_previous[g_previous_idx]);
+			}
 
-		$('#tracks-table .selected').removeClass ('selected');
-		var trackelem = $('#tracks-table div').eq (trackid);
-		trackelem.addClass ('selected');
+			function playNextTrack () {
+				if (g_playlist === null)
+					return;
 
-		window.location.hash = createTrackId (track);
-		$('audio').attr ('src', track.location);
-		$('audio').trigger ('play');
+				if (g_previous_idx >= (g_previous.length - 1)) {
+					g_previous.push (Math.floor (Math.random () * g_playlist.length));
+					g_previous_idx = g_previous.length - 1;
+				}
+				else {
+					g_previous_idx += 1;
+				}
 
-		$('html, body').stop ().animate ({
-			scrollTop: trackelem.offset ().top - $('.control-bar').height ()
-		}, 1000);
-	}
+				while (g_previous.length > MAX_HISTORY) {
+					g_previous.shift ();
+					g_previous_idx -= 1;
+				}
 
-	function loadNewPlaylist (playlist, track) {
-		var playlistURL = PLAYLISTS[playlist];
-		var selected_track = track;
+				playTrack (g_previous[g_previous_idx]);
+			}
 
-		localStorage['playlist'] = playlist;
-		$('#select-playlist').val (playlist);
 
-		// Clear
-		$('#tracks-table div').remove ();
-		g_previous = [];
-		g_previous_idx = 0;
-		g_playlist = null;
+			function playTrack (trackid) {
+				var track = g_playlist[trackid];
 
-		$.ajax({
-			url: playlistURL,
-			success: function (data) {
-				// Parse track list
-				g_playlist = parsePlaylist (data);
+				$('.playlist .selected').removeClass ('selected');
+				var trackelem = $('.playlist div').eq (trackid);
+				trackelem.addClass ('selected');
 
-				// Build HTML table for track listing
-				for (var i = 0; i < g_playlist.length; ++i) {
-					var track = g_playlist[i];
+				window.location.hash = createTrackId (track);
+				$('audio').attr ('src', track.location);
+				$('audio').trigger ('play');
 
-					var row = $('<div>');
-					row.text (track.creator + ' - ' + track.title);
-					row.attr ('id', createTrackId (track));
+				$('html, body').stop ().animate ({
+					scrollTop: trackelem.offset ().top - $('.control-container').height ()
+				}, 1000);
+			}
 
-					row.appendTo ('#tracks-table');
-					(function (i) {
-						row.click (function () {
-							playTrack (i);
+			function loadNewPlaylist (playlist, track) {
+				var playlistURL = PLAYLISTS[playlist];
+				var selected_track = track;
+
+				localStorage['playlist'] = playlist;
+				$('#splaylist').val (playlist);
+
+				// Clear
+				$('.playlist div').remove ();
+				g_previous = [];
+				g_previous_idx = 0;
+				g_playlist = null;
+
+				$.ajax({
+					url: playlistURL,
+					success: function (data) {
+						// Parse track list
+						g_playlist = parsePlaylist (data);
+
+						// Build HTML table for track listing
+						for (var i = 0; i < g_playlist.length; ++i) {
+							var track = g_playlist[i];
+
+							var row = $('<div>');
+							row.text (track.creator + ' - ' + track.title);
+							row.attr ('id', createTrackId (track));
+
+							row.appendTo ('.playlist');
+							(function (i) {
+								row.click (function () {
+									playTrack (i);
+								});
+							}) (i);
+						}
+
+						// Select specified track if possible, or play random track if not.
+						var elements = $('.playlist div').filter (function (idx, elem) {
+							return elem.id == selected_track;
 						});
-					}) (i);
+
+						if (elements.length > 0) {
+							elements[0].click ();
+						} else {
+							playNextTrack ();
+						}
+					}
+				});
+			};
+
+			function playpause () {
+				if ($('audio').get (0).paused)
+					$('audio').trigger ('play');
+				else
+					$('audio').trigger ('pause');
+			}
+
+			function toggleLooping () {
+				g_looping = !g_looping;
+				$('audio').attr ('loop', g_looping);
+				$('.loop i').toggleClass('fa-times', g_looping);
+				$('.loop i').toggleClass('fa-repeat', !g_looping);
+			}
+
+			function populatePlaylistOptions () {
+				for (var name in PLAYLISTS) {
+					var option = $("<option>");
+					option.val (name);
+					option.text (name);
+
+					$('#splaylist').append (option);
 				}
+			}
 
-				// Select specified track if possible, or play random track if not.
-				var elements = $('#tracks-table div').filter (function (idx, elem) {
-					return elem.id == selected_track;
+			$(function () {
+				// Register Events
+				$('audio').on ('pause', function () {
+					$('.play i').removeClass ('fa-pause');
+					$('.play i').addClass ('fa-play');
 				});
 
-				if (elements.length > 0) {
-					elements[0].click ();
-				} else {
+				$('audio').on ('play', function () {
+					$('.play i').removeClass ('fa-play');
+					$('.play i').addClass ('fa-pause');
+				});
+
+				$('audio').on ('error', function () {
 					playNextTrack ();
+				});
+
+				$('audio').on ('timeupdate', function () {
+					if (isNaN (this.duration))
+						return;
+					if (!is_dragging_scrubber)
+						$('#scrubber-progress').css('width', (this.currentTime / this.duration) * 100+'%');
+					$('.ctime').text (formatTimecode (this.currentTime));
+					$('.rtime').text (formatTimecode (this.duration - this.currentTime));
+				});
+
+				$('.progress').on('mousedown mouseup', function(e) {
+					if (e.which == 1) {
+						is_dragging_scrubber = true;
+						var sc_w = $('#scrubber-track').outerWidth();
+						var p = ((e.pageX - $('#scrubber-track').offset().left) / sc_w) * 100;
+						$('#scrubber-progress').css('width', p+'%');
+						scrubp = p;
+						$(document).on('mousemove.scrubber-track', function(e) {
+							sc_w = $('#scrubber-track').outerWidth();
+							p = ((e.pageX - $('#scrubber-track').offset().left) / sc_w) * 100;
+							$('#scrubber-progress').css('width', p+'%');
+							scrubp = p;
+						});
+					}
+				});
+
+				$(document).on('mouseup.scrubber-track', function(e) {
+					if (is_dragging_scrubber) {
+						$('audio').get(0).currentTime = (scrubp / 100) * $('audio').get(0).duration;
+						$(this).off('mousemove.scrubber-track');
+						is_dragging_scrubber = false;
+					}
+				});
+
+				$('audio').on ('ended', function () {
+					if (!g_looping)
+						playNextTrack ();
+				});
+
+				$('.play').click (playpause);
+
+				$(document).keypress (function (e) {
+					if (e.which == 32) {
+						e.preventDefault ();
+						playpause ();
+					}
+				});
+
+				$('.next').click (function () {
+					playNextTrack (true);
+				});
+
+				$('.previous').click (function () {
+					playPreviousTrack ();
+				});
+
+				$('.loop').click (function () {
+					toggleLooping ();
+				});
+
+				$('#splaylist').on ('change', function () {
+					var playlist = $('#splaylist').val ();
+					loadNewPlaylist (playlist, '');
+				});
+
+				$('#volume-slider').slider({
+					orientation: "vertical",
+					range: "min",
+					min: 0,
+					max: 100,
+					value: $('audio').get (0).volume * 100,
+					slide: function(event, ui) {
+						//change volume here
+						$('audio').get(0).volume = (ui.value / 100);
+						if (ui.value > 50) {
+							$('.volume i').removeClass($('.volume i').attr('class').split(' ')[1]).addClass('fa-volume-up');
+						}
+						else if (ui.value > 0) {
+							$('.volume i').removeClass($('.volume i').attr('class').split(' ')[1]).addClass('fa-volume-down');
+						}
+						else {
+							$('.volume i').removeClass($('.volume i').attr('class').split(' ')[1]).addClass('fa-volume-off');
+						}
+
+						localStorage['volume'] = $('audio').get (0).volume;
+					}
+				});
+
+				$('.volumes').on('click', function() {
+					$('#volume-slider').slideToggle(200);
+				});
+
+				populatePlaylistOptions ();
+
+				// Default playlist, random track
+				var playlist = DEFAULT_PLAYLIST;
+				var track = '';
+
+				/* Load settings */
+				if (localStorage.getItem ('volume') !== null)
+					$('audio').get (0).volume = localStorage.getItem('volume');
+
+				if (localStorage.getItem ('playlist') !== null) {
+					if (localStorage.getItem ('playlist') in PLAYLISTS)
+						playlist = localStorage.getItem ('playlist');
+				}
+
+				// If hash is set, override playlist and track
+				var url_track = parseTrackId (window.location.hash.substr (1));
+
+				if (url_track !== null) {
+					playlist = url_track.playlist;
+					track = url_track.track;
 				}
+
+				// Load playlist and track
+				loadNewPlaylist (playlist, track);
+			});
+		</script>
+		<style>
+			@font-face {
+				font-family: 'Hack';
+				src: url('../fonts/eot/latin/hack-regular-latin-webfont.eot?v=2.019');
+				src: url('../fonts/eot/latin/hack-regular-latin-webfont.eot?#iefix&v=2.019') format('embedded-opentype'), url('../fonts/woff2/latin/hack-regular-latin-webfont.woff2?v=2.019') format('woff2'), url('../fonts/woff/latin/hack-regular-latin-webfont.woff?v=2.019') format('woff'), url('../fonts/web-ttf/latin/hack-regular-latin-webfont.ttf?v=2.019') format('truetype');
+				font-weight: 400;
+				font-style: normal
 			}
-		});
-	};
-
-	function playpause () {
-		if ($('audio').get (0).paused)
-			$('audio').trigger ('play');
-		else
-			$('audio').trigger ('pause');
-	}
-
-	function toggleLooping () {
-		g_looping = !g_looping;
-		$('audio').attr ('loop', g_looping);
-		$('#btn-loop i').toggleClass('fa-times', g_looping);
-		$('#btn-loop i').toggleClass('fa-repeat', !g_looping);
-	}
-
-	function populatePlaylistOptions () {
-		for (var name in PLAYLISTS) {
-			var option = $("<option>");
-			option.val (name);
-			option.text (name);
-
-			$('#select-playlist').append (option);
-		}
-	}
-
-	$(function () {
-		// Register Events
-		$('audio').on ('pause', function () {
-			$('#btn-play i').removeClass ('fa-pause');
-			$('#btn-play i').addClass ('fa-play');
-		});
-
-		$('audio').on ('play', function () {
-			$('#btn-play i').removeClass ('fa-play');
-			$('#btn-play i').addClass ('fa-pause');
-		});
-
-		$('audio').on ('error', function () {
-			playNextTrack ();
-		});
-
-		$('audio').on ('timeupdate', function () {
-			if (isNaN (this.duration))
-				return;
-			if (!is_dragging_scrubber)
-				$('#scrubber-progress').css('width', (this.currentTime / this.duration) * 100+'%');
-			$('#time-current').text (formatTimecode (this.currentTime));
-			$('#time-remaining').text (formatTimecode (this.duration - this.currentTime));
-		});
-
-		$('#time-bar').on('mousedown mouseup', function(e) {
-			if (e.which == 1) {
-				is_dragging_scrubber = true;
-				var sc_w = $('#scrubber-track').outerWidth();
-				var p = ((e.pageX - $('#scrubber-track').offset().left) / sc_w) * 100;
-				$('#scrubber-progress').css('width', p+'%');
-				scrubp = p;
-				$(document).on('mousemove.scrubber-track', function(e) {
-					sc_w = $('#scrubber-track').outerWidth();
-					p = ((e.pageX - $('#scrubber-track').offset().left) / sc_w) * 100;
-					$('#scrubber-progress').css('width', p+'%');
-					scrubp = p;
-				});
+
+			@font-face {
+				font-family: 'Hack';
+				src: url('../fonts/eot/latin/hack-bold-latin-webfont.eot?v=2.019');
+				src: url('../fonts/eot/latin/hack-bold-latin-webfont.eot?#iefix&v=2.019') format('embedded-opentype'), url('../fonts/woff2/latin/hack-bold-latin-webfont.woff2?v=2.019') format('woff2'), url('../fonts/woff/latin/hack-bold-latin-webfont.woff?v=2.019') format('woff'), url('../fonts/web-ttf/latin/hack-bold-latin-webfont.ttf?v=2.019') format('truetype');
+				font-weight: 700;
+				font-style: normal
+			}
+
+			@font-face {
+				font-family: 'Hack';
+				src: url('../fonts/eot/latin/hack-italic-latin-webfont.eot?v=2.019');
+				src: url('../fonts/eot/latin/hack-italic-latin-webfont.eot?#iefix&v=2.019') format('embedded-opentype'), url('../fonts/woff2/latin/hack-italic-latin-webfont.woff2?v=2.019') format('woff2'), url('../fonts/woff/latin/hack-italic-latin-webfont.woff?v=2.019') format('woff'), url('../fonts/web-ttf/latin/hack-italic-latin-webfont.ttf?v=2.019') format('truetype');
+				font-weight: 400;
+				font-style: italic
+			}
+
+			@font-face {
+				font-family: 'Hack';
+				src: url('../fonts/eot/latin/hack-bolditalic-latin-webfont.eot?v=2.019');
+				src: url('../fonts/eot/latin/hack-bolditalic-latin-webfont.eot?#iefix&v=2.019') format('embedded-opentype'), url('../fonts/woff2/latin/hack-bolditalic-latin-webfont.woff2?v=2.019') format('woff2'), url('../fonts/woff/latin/hack-bolditalic-latin-webfont.woff?v=2.019') format('woff'), url('../fonts/web-ttf/latin/hack-bolditalic-latin-webfont.ttf?v=2.019') format('truetype');
+				font-weight: 700;
+				font-style: italic
+			}
+
+			body {
+				background-color: #111;
+				font-family: "Hack", monospace;
+				color: #090;
+				font-size: 14px;
+				font-weight: bold;
+				line-height: 20px;
+				-webkit-font-smoothing: antialiased
+			}
+
+			.gal {
+				color: #49A355;
+			}
+
+			.copy {
+				background-color: #111;
+				border-top: 2px solid #090;
+				text-align: center;
+				padding-top: 15px;
+				padding-bottom: 15px;
+				position: fixed;
+				bottom: 0;
+				left: 0;
+				height: 25px;
+				width: 100%
+			}
+
+			hr {
+				display: block;
+				-webkit-margin-before: 0.5em;
+				-webkit-margin-after: 0.5em;
+				-webkit-margin-start: auto;
+				-webkit-margin-end: auto;
+				border-style: inset;
+				border-width: 1px;
+				border-color: #090
 			}
-		});
-
-		$(document).on('mouseup.scrubber-track', function(e) {
-			if (is_dragging_scrubber) {
-				$('audio').get(0).currentTime = (scrubp / 100) * $('audio').get(0).duration;
-				$(this).off('mousemove.scrubber-track');
-				is_dragging_scrubber = false;
-			}
-		});
-
-		$('audio').on ('ended', function () {
-			if (!g_looping)
-				playNextTrack ();
-		});
-
-		$('#btn-play').click (playpause);
-
-		$(document).keypress (function (e) {
-			if (e.which == 32) {
-				e.preventDefault ();
-				playpause ();
-			}
-		});
-
-		$('#btn-next').click (function () {
-			playNextTrack (true);
-		});
-
-		$('#btn-previous').click (function () {
-			playPreviousTrack ();
-		});
-
-		$('#btn-loop').click (function () {
-			toggleLooping ();
-		});
-
-		$('#select-playlist').on ('change', function () {
-			var playlist = $('#select-playlist').val ();
-			loadNewPlaylist (playlist, '');
-		});
-
-		$('#volume-slider').slider({
-			orientation: "vertical",
-			range: "min",
-			min: 0,
-			max: 100,
-			value: $('audio').get (0).volume * 100,
-			slide: function(event, ui) {
-				//change volume here
-				$('audio').get(0).volume = (ui.value / 100);
-				if (ui.value > 50) {
-					$('#btn-volume i').removeClass($('#btn-volume i').attr('class').split(' ')[1]).addClass('fa-volume-up');
+
+			.btn {
+				display: inline-block;
+				padding: 3px 6px;
+				margin-bottom: 0;
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 1;
+				text-align: center;
+				white-space: nowrap;
+				vertical-align: middle;
+				-ms-touch-action: manipulation;
+				touch-action: manipulation;
+				cursor: pointer;
+				-webkit-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+				background-image: none;
+				border: 1px solid #090;
+				background-color: transparent;
+				color: #090
+			}
+
+			pre {
+				margin: 10px
+			}
+
+			a {
+				color: #7C10C4
+			}
+
+			.show {
+				display: block
+			}
+
+			.hide {
+				display: none
+			}
+
+			.form-input {
+				margin: 0 0 4px 0;
+				border: 2px solid #090
+			}
+
+			.playlist {
+				display: table;
+				width: auto;
+				height: 25%;
+				border: 1px solid #090;
+				box-sizing: border-box;
+				-moz-box-sizing: border-box;
+				margin: 50px auto
+			}
+
+			.playlist p.text {
+				margin: 10px
+			}
+
+			.logo {
+				width: 425px;
+				margin: 10px auto
+			}
+
+			.logo img {
+				margin: 0 20%
+			}
+
+			.why {
+				position: absolute;
+				display: block;
+				padding-top: 600px;
+				width: 500px
+			}
+
+			.why h4 {
+				text-decoration: underline
+			}
+
+			.controls {
+				width: 425px;
+				margin: 25px auto
+			}
+
+			.controls input[type="button"] {
+				background-color: transparent;
+				border-color: #fff;
+				color: #090;
+				font-family: "Hack", monospace;
+				margin-top: 5px
+			}
+
+			.terminal .com {
+				color: #12C4FF;
+				display: inline-block;
+			}
+
+			@media only screen and (max-width:992px) {
+				.galaxy {
+					display: none;
 				}
-				else if (ui.value > 0) {
-					$('#btn-volume i').removeClass($('#btn-volume i').attr('class').split(' ')[1]).addClass('fa-volume-down');
+				.why {
+					display: none;
 				}
-				else {
-					$('#btn-volume i').removeClass($('#btn-volume i').attr('class').split(' ')[1]).addClass('fa-volume-off');
+				.logo {
+					width: 200px;
+					margin: 0 auto
+				}
+				.logo img {
+					z-index: 5;
+					width: 200px;
+					margin: 0 0%
 				}
+				.terminal {
+					width: 350px
+				}
+			}
+
+
+
+			.control-container {
+				background-color: #111;
+				position: fixed;
+				top: 0;
+				width: 100%;
+				margin-bottom: 25px
+			}
+
+			.controls {
+				border: 1px solid #fff;
+				width: 58.1%;
+				height: 54px;
+			}
+
+			.button {
+				height: 100%;
+				border-right: 1px solid #fff;
+				position: relative;
+				padding: 0 30px;
+				float: left;
+			}
+
+			.button i {
+				text-align: center;
+				line-height: 53px;
+			}
+
+			.progress {
+				height: 53px;
+				border-right: 1px solid #fff;
+				position: relative;
+				width: 500px;
+				padding: 0 30px;
+				float: left;
+			}
+
+			.bar {
+				margin-top: 16px;
+				width: 100%;
+			}
+
+			.ctime {
+				margin-top: 5px;
+				float: left;
+			}
+
+			.rtime {
+				margin-top: 5px;
+				float: right;
+			}
+
+			#scrubber-track {
+				width: 100%;
+				height: 5px;
+				background: #345438;
+			}
+
+			#scrubber-progress {
+				background: #49A355;
+				height: 100%;
+				position: relative;
+			}
+
+			#scrubber {
+				position: absolute;
+				right: 0;
+				height: 8px;
+				width: 3px;
+				display: inline-block;
+				border: 1px solid #244528;
+				background: #4FD661;
+				-ms-transform: translateY(-25%);
+				-webkit-transform: translateY(-25%);
+				transform: translateY(-25%);
+			}
+
+			.vslider {
+				height: 100%;
+				border-right: 1px solid #fff;
+				position: relative;
+				padding: 0 30px;
+				float: left;
+			}
+
+			.volume {
+				height: 100%;
+				position: relative;
+				padding: 0 0 0 30px;
+				float: left;
+			}
+
+			.volume i {
+				text-align: center;
+				line-height: 53px;
+			}
+
+			#volume-slider {
+				height: 53px;
+				width: 14px;
+				position: relative;
+				background-color: #000;
+				color: #fff;
+				border: 1px solid #fff;
+				top: 0;
+				margin-left: 0;
+				padding: 0;
+			}
+
+			.ui-slider-range-min {
+				background-color: #49A355;
+				position: absolute;
+				width: 8px;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				margin: auto;
+			}
+
+			#splaylist {
+				border: 1px solid #090;
+				background-color: transparent;
+				height: 100%;
+				font-size: 12pt;
+				padding: 0;
+				color: #49A355;
+				border: 0;
+			}
+
+			.playlist {
+				width: 65%;
+				margin-top: 450px;
+			}
+
+			.playlist div {
+				border: 1px solid #fff;
+				color: #49A355;
+				padding: 5px;
+				font-size: 11pt;
+				cursor: pointer;
+			}
+
+			.playlist div.selected {
+				background-color: #49A355;
+				color: #fff;
+			}
+
+			.playlist div:hover {
+				background-color: #090;
+				color: #fff;
+			}
 
-				localStorage['volume'] = $('audio').get (0).volume;
-			}
-		});
-
-		$('#btn-volume').on('click', function() {
-			$('#volume-slider').slideToggle(200);
-		});
-
-		populatePlaylistOptions ();
-
-		// Default playlist, random track
-		var playlist = DEFAULT_PLAYLIST;
-		var track = '';
-
-		/* Load settings */
-		if (localStorage.getItem ('volume') !== null)
-			$('audio').get (0).volume = localStorage.getItem('volume');
-
-		if (localStorage.getItem ('playlist') !== null) {
-			if (localStorage.getItem ('playlist') in PLAYLISTS)
-				playlist = localStorage.getItem ('playlist');
-		}
-
-		// If hash is set, override playlist and track
-		var url_track = parseTrackId (window.location.hash.substr (1));
-
-		if (url_track !== null) {
-			playlist = url_track.playlist;
-			track = url_track.track;
-		}
-
-		// Load playlist and track
-		loadNewPlaylist (playlist, track);
-	});
-</script>
-
-<style>
-	html, body, div, span, applet, object, iframe,
-	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-	a, abbr, acronym, address, big, cite, code,
-	del, dfn, em, img, ins, kbd, q, s, samp,
-	small, strike, strong, sub, sup, tt, var,
-	b, u, i, center,
-	dl, dt, dd, ol, ul, li,
-	fieldset, form, label, legend,
-	table, caption, tbody, tfoot, thead, tr, th, td,
-	article, aside, canvas, details, embed, 
-	figure, figcaption, footer, header, hgroup, 
-	menu, nav, output, ruby, section, summary,
-	time, mark, audio, video {
-		margin: 0;
-		padding: 0;
-		border: 0;
-		font-size: 100%;
-		font: inherit;
-		vertical-align: baseline;
-	}
-	/* HTML5 display-role reset for older browsers */
-	article, aside, details, figcaption, figure, 
-	footer, header, hgroup, menu, nav, section {
-		display: block;
-	}
-	body {
-		line-height: 1;
-	}
-	ol, ul {
-		list-style: none;
-	}
-	blockquote, q {
-		quotes: none;
-	}
-	blockquote:before, blockquote:after,
-	q:before, q:after {
-		content: '';
-		content: none;
-	}
-
-	body {
-		background-color: #183c63;
-	}
-
-	#tracks-table {
-		width: 100%;
-		margin-top: 18px;
-	}
-
-	#tracks-table div {
-		background-color: #183c63;
-		border: 1px solid #003366;
-		color: #FF9148;
-		padding: 5px;
-		font-family: Helvetica, Arial, sans-serif;
-		font-size: 8pt;
-		cursor: pointer;
-	}
-
-	#tracks-table div.selected {
-		background-color: #e5874a;
-		color: #183c63;
-	}
-
-	#tracks-table div:hover {
-		background-color: #4e91ff;
-		color: #183c63;
-	}
-
-	.control-bar {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 18px;
-		background: linear-gradient(to bottom, rgba(192,204,217,1) 0%, rgba(0,12,25,1) 100%);
-	}
-
-	.control-buttons {
-		width: 100%;
-		height: 100%;
-		border-spacing: 1px;
-		border-collapse: separate;
-	}
-
-	.control-buttons td {
-		font-family: Helvetica, Arial, sans-serif;
-		font-size: 7pt;
-		color: #FF9148;
-		border-width: 0px;
-		background: linear-gradient(to bottom, rgba(61,99,137,1) 0%, rgba(3,41,79,1) 100%);
-		text-align: center;
-		cursor: pointer;
-		vertical-align: middle;
-	}
-
-	.control-buttons td:hover {
-		color: #4e91ff;
-	}
-
-	.control-button {
-		width: 20px;
-	}
-
-	.control-volume {
-		width: 60px;
-		font-size: 9pt;
-	}
-
-	.control-playlist {
-		width: 80px;
-	}
-
-	.control-playlist select {
-		height: 16px;
-		font-family: Helvetica, Arial, sans-serif;
-		font-size: 7pt;
-		padding: 0;
-		color: #FF9148;
-		border: 0;
-		background: transparent;
-	}
-
-	.credits {
-		position: fixed;
-		bottom: 0;
-		right: 0;
-		width: 100px;
-		background-color: #000;
-		background-color: rgba(0,0,0,0.5);
-		color: #FF9148;
-		padding: 5px;
-		font-family: Helvetica, Arial, sans-serif;
-		font-size: 8pt;
-		text-align: center;
-	}
-
-	.credits a {
-		color: #a96030;
-		font-family: Helvetica, Arial, sans-serif;
-		font-size: 8pt;
-		text-decoration: none;
-	}
-
-	#time-current, #time-remaining {
-		width: 60px;
-	}
-
-	#time-bar:hover #scrubber {
-		background: rgb(78,145,255);
-	}
-
-	#scrubber-track {
-		width: 100%;
-		height: 5px;
-		background: #7f6157;
-	}
-
-	#scrubber-progress {
-		background: #FF9148;
-		height: 100%;
-		position: relative;
-	}
-
-	#scrubber {
-		position: absolute;
-		right: 0;
-		height: 8px;
-		width: 3px;
-		display: inline-block;
-		border: 1px solid #7f6157;
-		background: #FF9148;
-		-ms-transform: translateY(-25%);
-		-webkit-transform: translateY(-25%);
-		transform: translateY(-25%);
-	}
-
-	::-webkit-scrollbar {
-		width: 8px;
-	}
- 
-	::-webkit-scrollbar-track {
-		background-color: #7f6157;
-	}
- 
-	::-webkit-scrollbar-thumb {
-		background-color: #FF9148;
-		border-radius: 2px;
-	}
-
-	::-webkit-scrollbar-thumb:hover {
-		background-color: rgb(78,145,255);
-	}
-
-	#volume-slider {
-		width: 10px;
-		height: 65px;
-		position: absolute;
-		background: linear-gradient(to bottom, rgba(61,99,137,1) 0%, rgba(3,41,79,1) 100%);
-		border: 1px solid gray;
-		top: 19px;
-		margin-left: -1px;
-		display: none;
-		padding: 0 5px;
-	}
-	.ui-slider-range-min {
-		background-color: #FF9148;
-		position: absolute;
-		width: 8px;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		margin: auto;
-	}
-	@media(max-device-width: 700px) {    
-		.control-bar {
-			height: 70px;	
-		}
-		.control-buttons {
-			height: 50px;
-		}
-		.control-button {
-			width: 30px;
-		}
-		#time-bar {
-			position: absolute;
-			bottom: 10px;
-			left: 0;
-			width: 100%;
-		}	
-		#tracks-table {
-			margin-top: 70px;
-		}
-		#tracks-table div {
-			font-size: 11pt;
-		}
-	}
-</style>
-</head>
-<body>
-	<div class='control-bar'>
-		<table class='control-buttons' cellpadding="0" cellspacing="0">
-			<tr>
-				<td id='btn-play' class='control-button'><i class="fa fa-play"></i></td>
-				<td id='btn-previous' class='control-button'><i class="fa fa-step-backward"></i></td>
-				<td id='btn-next' class='control-button'><i class="fa fa-step-forward"></i></td>
-				<td id='btn-loop' class='control-button'><i class="fa fa-repeat"></i></td>
-				<td id='time-current'></td>
-				<td id='time-bar'><div id="scrubber-track"><div id="scrubber-progress"><div id="scrubber"></div></div></div></td>
-				<td id='time-remaining'></td>
-				<td id='btn-volume' class='control-button'><i class="fa fa-volume-up"></i><div id="volume-slider"></div></td>
-				<td class='control-playlist'>
-					<select id='select-playlist'></select>
-				</td>
-			</tr>
-		</table>
-	</div>
-	
-	<audio></audio>
-
-	<div id='tracks-table'></div>
-
-	<div class='credits'>
-		<a href="http://aersia.net" target="_blank">playlist by Cats777</a>
-	</div>
-</body>
+		</style>
+	</head>
+	<body>
+		<section class="control-container">
+			<div class="logo"><img src="https://pbs.twimg.com/profile_images/1064763158110195712/0N6mYvvb.jpg" /></div>
+			<div class="controls">
+				<div class="button play"><i class="fa fa-play"></i></div>
+				<div class="button previous"><i class="fa fa-step-backward"></i></div>
+				<div class="button next"><i class="fa fa-step-forward"></i></div>
+				<div class="button loop"><i class="fa fa-repeat"></i></div>
+				<div class="progress">
+					<div class="bar"><div id="scrubber-track"><div id="scrubber-progress"><div id="scrubber"></div></div></div></div>
+					<div class="ctime"></div>
+					<div class="rtime"></div>
+				</div>
+				<div class="vslider"><div class="volume"><i class="fa fa-volume-up"></i></div><div id="volume-slider"></div></div>
+				<div class="button"><select id="splaylist"></select></div>
+			</div>
+		</section>
+		<audio></audio>
+		<section class="playlist"></section>
+
+		<section class="copy">
+			Playlist by <a href="http://aersia.net">Cats777</a>&nbsp;|&nbsp;
+			JS by <a href="https://github.com/fpgaminer">fpgaminer</a>&nbsp;|&nbsp;
+			Styling by <a href="http://steamcommunity.com/id/LordNature">LordNature</a>
+		</section>
+	</body>
 </html>
