body {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	color: #fff;
	background: #2c3e50 url('img/bg.jpg');
	background-size: cover;
	margin: 0;
	padding: 0;
}

h1 {

}

h2 {
	font-size: 32px;
	letter-spacing: 1px;
	margin: 0 auto 10px;
}

h2.now_playing, h2.recently_played {
	opacity: 0.8;
}

#rd_loader {
	display: none;
}

#container {
	width: 100%;
	height: 100%;
}

#container #bottom-bar {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100px;
	background: rgba(255,255,255,0.4);
	border-top: 1px solid #444;
}

#current_track {
	position: fixed;
	bottom: 130px;
	margin-left: 60px;
}

#current_track img {
	height: 200px;
	max-height: 200px;
	width: auto;
	max-width: 200px;
	background: rgba(0,0,0,0.4);
	padding: 25px;
}

#current_track .track_details {
	position: fixed; 
	bottom: 130;
	left: 350px;
	margin-bottom: 20px;
	width: 65%;
}

#current_track .track_details .track_name {
	max-width: 100%;
}

#current_track .track_details .track_name b {
	font-size: 48px;
}

#current_track .track_details .track_time {
	margin-top: 6px;
}

#recent_tracks {
	position: absolute;
	right: 110px;
	top: 170px;
	width: 500px;
}

#recent_tracks ul {
	list-style-type: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

#recent_tracks li {
	background: rgba(18,53,99,0.6);
	padding: 5px;
	overflow: hidden;
	margin-left: 0;
	margin-bottom: 1px;
	font-size: 12px;
}

#recent_tracks li div {
	float: left;
}

#recent_tracks li div:last-child {
	padding-left: 10px;
	max-width: 70%;
}

#recent_tracks li div b {
	font-size: 13px;
	display: block;
	font-weight: bold;
}

#recent_tracks li div span {
	opacity: 0.7;
	display: block;
}

#recent_tracks li img {
	max-width: 50px;
	max-height: 50px;
	padding: 3px;
}

#controls {
    position: absolute;
    bottom: 150px;
    right: 100px;
}

#controls #play_toggle {
	font-size: 64px;
	opacity: 0.5;
	cursor: pointer;
}

#controls #play_toggle:hover {
	opacity: 0.8;
}

#controls #play_toggle {
    font-size: 196px;
}

#volume_panel {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 350px;
	height: 50px;
}

#volume_panel .ui-widget-content {
	background: rgba(255,255,255,0.6);
	border: 0;
}

#volume_panel .ui-state-default, #volume_panel .ui-widget-content .ui-state-default, #volume_panel .ui-widget-header .ui-state-default {
	border: 1px solid #ccc;
	background: #f6f6f6 !important;
	outline: none;
}

#volume_panel .ui-slider-horizontal {
    height: 10px;
}

#volume_panel .ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 21px;
    height: 21px;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}

#volume_btn {
    font-size: 34px;
    display: block;
    position: absolute;
    top: 15px;
    left: 15px;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: all .15s;
    transition: all .15s;
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
}

#volume_btn:hover {
	opacity: 0.8;
}

#volume_slider {
    width: 200px;
    position: absolute;
    left: 70px;
    top: 26px;

    opacity: 0;
    -webkit-transition: all .15s;
    transition: all .15s;
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
}

#volume_panel:hover #volume_slider {
	opacity: 1;
}

#sound_bars {
	position: absolute;
	top: 60px;
	right: 150px;
}

#sound_bars img {
	width: 150px;
	height: auto;
	opacity: 0.9;
}

#sound_bars .volume.on {
	display: none;
}