** Audio Scrub Cursor *******************************************************/
#audio-player.audio-player .scrub .current { background-color: rgb(4, 100, 140); }

/*** Button Syles *************************************************************/
.button {
	background-color: rgb(4, 100, 140);
	padding: 10px 20px;
	color: #FFF;
	text-decoration: none;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(15, 38, 29, 0.99), 2px 2px 5px -2px#FFE inset, -2px -2px 5px -2px #000 inset;
	transition: 0.1s linear 0s box-shadow;
	cursor: pointer;
}
.button:hover, .button.active {
	box-shadow: 0px 0px 10px #FFF, -2px -2px 5px #FFF inset, 2px 2px 5px #000 inset;
}
/*** Button Syles *************************************************************/

/*** Standard Styles **********************************************************/
a { color: #FFF; }
p { text-align: justify; }

h1, h2, h3, h4, h5, h6 { color: #FFF; text-shadow: 0 0 2px #000; }
h1 { font-size: xx-large; margin}
h2 { font-size: x-large; }

ul { padding: 0; margin: 0; }
ul li { list-style: none; }
ul li a.button { display: block; }

html {
	/*background-size: 100% 100%;*/
	background-repeat: repeat;
	background-image: url(../../../custom/images/background.jpg);
	background-attachment: fixed;
	color: #fff;
}
#container {
	width:100%;
	text-align:center;
	vertical-align:middle;
	border-color:#000000;
	border-width:0px;
	border-style:solid;
	margin: auto;
}
#header {
	width: 99%;
	max-width: 980px;
	margin: auto;
	background-color: rgba(12, 14, 29, 0.99);
	border-radius: 10px 9px 0 0;
	box-shadow: 0 0 6px #000, 0 0 15px #FFF inset;
	overflow: hidden;
	position: relative; 
}
#header h1, #header h2 { margin-bottom: 10px; margin-top: 0; }
#header .title-overlay {  width: 100%;  }
#header .buttons { position: absolute; top: 0; right: 0; }
#header .buttons a { vertical-align: top; }
#header .buttons button { background-color: transparent; border: 0; }
.icon { width: 24px; height: 24px; margin: auto; background-size: 400% 400%; background-image: url(../../../assets/images/icons.png); vertical-align: middle; }
.icon.super { background-position: 66% 0; }
.icon.user { background-position: 33% 0; }
.icon.menu-lines { background-position: 100% 0; }
.icon.visualizer { background-position: 0% 33%; }

.icon.play { background-position: 0% 100%; }
.icon.rewind { background-position: 33% 100%; }
.icon.loop { background-position: 66% 100%; }
.icon.stop { background-position: 100% 100%; }

.icon.download { background-position: 33% 33%; }
.icon.stream { background-position: 66% 33%; }
.icon.reset { background-position: 100% 33%; }


#body {
	background-color: rgba(0, 3, 21, 0.79);
	border-radius: 5px;
	border: 2px solid rgb(70, 70, 71);
	box-shadow: 0 0 5px rgba(14, 16, 30, 0.99), 2px 2px 10px #FFF inset, -2px -2px 8px #1B1B1B inset;
	width: 99%;
	max-width: 980px;
	margin: auto;
	overflow: hidden;
}
#body #left { overflow: hidden; float: left; clear: left; padding: 5px; margin-left: 10px; width:25%; margin-bottom: 10px; }
#body.reverse #left { float: right; clear: right; }
#body.reverse #right,
#body.reverse #current-song { float: left; }
#body .swap.button { float: left; }
#body.reverse .swap.button { float: right; }

#footer {
	margin: auto;
	background-color: rgba(19, 49, 37, 0.79);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 0 6px #000, 0 0 15px #000 inset;
	width: auto;
	display: inline-block;
	padding: 5px 10px 10px;
	transition: 1s ease 0s background-color;
}
#footer:hover {
	background-color: blue;
}
#footer a {
	padding: 10px 20px;
	color: #FFF;
}
#footer .title-logo { width: 80%; padding: 10px 0 0; }
/*** Standard Styles **********************************************************/




/*Temp styles *******************************************************/
img#frownface { width: 30px; vertical-align: middle; }

img.logo { width: 70%; margin: 20px 0 0 0; }
/*img.super.logo, a.super.logo { position: absolute; top: 0; right: 0; width: auto; margin: 0; max-height: 50px; }*/

.overlay { width: 100%; height: 100%; background: rgba(0,0,0,.75); }

.overlay.warning { position: fixed; bottom: 0; left: 0; max-height: 30%; width: 52%; border-radius: 0 10px 0 0; border-top: 1px solid #FFF; border-right: 1px solid #696969; color: rgb(173, 164, 80); padding-top: 10px; }
.close { position: absolute; top: -15px; right: -15px; background-color: red !important; min-width: 0 !important; padding: 5px 10px !important; border-radius: 15px !important; width: 30px; height: 30px; }

/*Temp styles *******************************************************/


/*** Facebook Login ***********************************************************/
/*** Facebook Login ***********************************************************/



/*** Clean Up Styles **********************************************************/
#body #left .song.links,
#body #left .album.links { float: left; clear: left; width: 100%; }
#body audio { margin: 10px 0; }
/*** Clean Up Styles **********************************************************/


/*** Forum ********************************************************************/
#forum { width: 40%; margin: auto; }
#forum .wrap { background-color: #373123; margin-bottom: 5px; border-radius: 5px; text-align: left; padding: 10px; box-shadow: 0px 0px 10px #FFF, -2px -2px 5px #FFF inset, 2px 2px 5px #000 inset; }
#forum .name { border-bottom: 1px solid #000; margin-bottom: 5px; padding: 5px; background-color: rgba(126, 37, 17, 0.79); border-radius: 5px; box-shadow: 0 0 5px #000; }
#forum .date { float: right; margin-left: 5px; }
#forum .comment { margin-bottom: 5px; padding: 0px 5px; overflow: hidden; }
#forum .rating { color: rgb(194, 194, 194); margin-top: 5px; }
#forum .markers { float: right; cursor: pointer; background-color: green; margin-top: 5px; }
a.comment-add { margin-bottom: 20px; margin-top: 10px; display: inline-block; *zoom: 1; *display: inline; }

#comment_add { margin: 10px; text-align: center; } 
#comment_add .label { text-align: left; }
#comment_add .rating .label { text-align: center; }
#comment_add .input.last { margin-bottom: 0; }
#comment_add .input { margin-bottom: 10px; text-align: center; }
#comment_add .full-width { width: 100%; }
#comment_add .submit { text-align: center; margin-top: 10px; }
#comment_add textarea { min-height: 80px; }
/*** Forum ********************************************************************/

#time_set { text-align: center; }
#time-set-container { margin: 0; }
#time-set-container .prepend { text-align: center; font-size: x-large; margin-top: 10px; /* background-color: #000; */ padding: 5px 0; text-shadow: 0 0 2px #000; margin-bottom: 0; }
#time_set .input.inline-block { width: 40%; margin-bottom: 15px; }
#time_set input { width: 100%; } 
#time_set .inline-block button.button { float: left; clear: left; }
#time_set button.button.active { background-color: red; }
#time_set button.button.submit { display: block; }

/*** Song Link Styles *********************************************************/
#body #left a, #body .album.links a {}
#body #left a:hover, #body #left a.active, #body .album.links a:hover {}
/*** Song Link Styles *********************************************************/


/*** Album Link Styles ********************************************************/
#body #right, #body #current-song { float: right; width: 70%; }
#body #right #information { width: 100%; }
#body .album.links ul { padding: 0; }
#body .album.links ul li {
	list-style: none;
}
#body #left .album.links ul li a {
	color: #FFF;
	float: none;
	display: block;
	background-color: rgba(126, 37, 17, 0.79);	
}
/*** Album Link Styles ********************************************************/


/*** Song Information *********************************************************/
#body #right #information { color: #FFF; }
#body a.forward { min-width: 150px; margin-bottom: 10px; margin-top: 10px; display: block; }
#song-info { margin: auto; width: 40%; margin-bottom: 10px; color: #FFF; }
#song-info .wrap { text-align: left; }
#song-info .next_song { margin-top: 10px; display: block;}
#song-info .next_song.active { background-color: green; }
/*** Song Information *********************************************************/


.file-list { text-align: center; margin-bottom: 100px; }

#filter_form { margin-right: 1em; }

/********* Shared Styles *********************************************/
#screen-overlay {
    background-color: #000000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: none;
    cursor: pointer;
}
.box-on-top {
    background-color: #008000;
	background-image: url(../../../custom/images/background.jpg);
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 6px 1px #000000;
    margin: 10px;
    position: absolute;
    z-index: 5000;
}
.box-on-top .load { padding: 10px 20px; }

.warning { background-color: rgb(197, 0, 0) !important; border-radius: 10px; text-shadow: 0 0 5px #000; border: 1px solid #FFF !important; box-shadow: 0 0 15px #FFF inset, 0 0 25px -5px #000; }
.pad { padding: 10px; }

.hide { display: none !important; }
.inline-block { display: inline-block; }
.float-r { float: right; }
.float-l { float: left; }
.clear-b { clear: both; }
.width-f { width: 100% !important; }

.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-b, .pos-br, .pos-bl { bottom: 0; }
.pos-t, .pos-tr, .pos-tl { top: 0; }
.pos-l, .pos-bl, .pos-tl { left: 0; }
.pos-r, .pos-br, .pos-tr { right: 0; }

.menu .toggle { z-index: 1; }
.menu .toggle.text .icon { display: inline-block; vertical-align: middle; margin-right: 10px; }
.menu .buttons { z-index: 0; }

/********* Shared Styles *********************************************/

@media (max-width: 768px) {
	#header h1 { font-size: large; margin-top: 10px; }
	#body #left { width: 100%; padding: 0; margin: 0; }
	#body #left .buttons { width: 100%; padding: 0; margin: 0px 0; }
	#body #left .song.links { border-top: 0px; }
	#body #left .song.links,
	#body #left .album.links { float: none; clear: none; margin-bottom: 20px; }
	#body #left a, #body .album.links a { width: 90%; padding: 10px 0; float: none; display: block; margin: auto; }
	#body #right { margin-top: 10px; }
	#body #right, 
	#body #right .menu .toggle,
	#body #current-song { width: 100%; }
	#song-info { width: 75%; }
	.overlay.warning { width: 100% }
	#forum { width: 90%; }
	
	#body .menu .toggle { width: 100%; text-align: left; }

	#body .swap.button { display: none; }
	/*#time-set-container.box-on-top { left: 0 !important; }*/
}


/********* Mobile Styles *********************************************/
/*#container.mobile #mobile_menu { position: fixed; top: 0; right: 0; z-index: 11; padding: 7px; }
#container.mobile #left { position: fixed; top: 0; left: 0; width: 100%; height: 0%; z-index: 10; transition: 0.25s ease 0s height; border: 0; box-shadow: 0 0 5px rgba(14, 16, 30, 0.99), 2px 2px 10px #FFF inset, -2px -2px 8px #FFF inset; overflow-y: scroll; }
#container.mobile #left.open { height: 85%; }