body
{
	margin				: 20px;
	margin-top			: 50px;
	overflow-x			: hidden;
	font-family			: Calibri, Candara, "Open Sans", Arial, sans-serif;
	-webkit-font-smoothing		: subpixel-antialiased;
}



#user-greeting.temp-user, #logout.temp-user, #login-greeting:not(.temp-user)
{
	display				: none;
}
.navbar a
{
	color				: whiteSmoke;
}

[hash-location='#login'].active
{
	position			: fixed;
	z-index				: 999;
	top					: 10%;
	left				: 20%;
	height				: 60%;
	width				: 60%;
	border-radius		: 5px;
	opacity				: 0.95;
	margin				: 0px;

	text-align			: center;
	padding-top			: 2.5%;
}

[hash-location='#login'].active a[href='#home']
{
	position			: absolute;
	top					: 10px;
	right				: 10px;
	font-size			: 16px;
	font-weight			: normal;
	text-decoration		: none !important;
	opacity				: 0.8;
	color				: #272727;
}
[hash-location='#login'].active a[href='#home']:hover
{
	opacity				: 1.0;
}
[hash-location='#login'].active a[href='#home']:active
{
	opacity				: 0.6;
}
[hash-location='#login'].active .btn
{
	color				: #333;
}


[hash-location='#home']:not(.ready):not(.notready-about),
[hash-location='#home']:not(.ready).notready-about ~ [hash-location='#about']
{
	z-index				: 1500;
	position			: fixed;
	display				: block;
	top					: 0px;
	left				: 0px;
	margin				: 0px;
	padding				: 110px 30px;
	height				: 100%;
	width				: 100%;
	opacity				: 0.9;
}
[hash-location='#home']:not(.ready) ~ #page-loading-spinner
{
	z-index				: 2000;
	top					: 50px;
	right				: 150px;
	left				: auto;
}


/*
footer a
{
	color				: inherit;
	text-decoration		: none;
}
*/



#page-loading-overlay:not(.ready), [hash-location='#login'].active ~ #page-loading-overlay
{
	background-color	: rgba(145, 180, 235, 0.80);
	position			: fixed;
	height				: 100%;
	width				: 100%;
	top					: 0px;
	left				: 0px;
	z-index				: 100;
}

#page-loading-slow
{
	display				: none;
}
#page-loading-spinner:not(.ready) ~ #page-loading-slow.active
{
	display				: block;
	position			: fixed;
	z-index				: 9999;
	top					: 40px;
	left				: 20px;
	font-size			: 20px;
	font-weight			: bold;
}

#page-loading-spinner:not(.ready)
{
	background			: url('/img/apple-touch-icon.png') no-repeat;
	opacity				: 0.80;
	position			: fixed;
	top					: 47.5%;
	left				: 47.5%;
	width				: 57px;
	height				: 57px;
	content				: ' ';
	z-index				: 200;

	-webkit-animation-name				: rotate;
	-webkit-animation-duration			: 2s;
	-webkit-animation-iteration-count	: infinite;
	-webkit-animation-timing-function	: linear;
	-moz-animation-name					: rotate;
	-moz-animation-duration				: 2s;
	-moz-animation-iteration-count		: infinite;
	-moz-animation-timing-function		: linear;
	-ms-animation-name					: rotate;
	-ms-animation-duration				: 2s;
	-ms-animation-iteration-count		: infinite;
	-ms-animation-timing-function		: linear;
	-o-animation-name					: rotate;
	-o-animation-duration				: 2s;
	-o-animation-iteration-count		: infinite;
	-o-animation-timing-function		: linear;
	animation-name						: rotate;
	animation-duration					: 2s;
	animation-iteration-count			: infinite;
	animation-timing-function			: linear;
}

@-webkit-keyframes rotate
{
	from
	{
		-webkit-transform	: rotate(0deg);
		transform			: rotate(0deg);
	}
	to
	{
		-webkit-transform	: rotate(360deg);
		transform			: rotate(360deg);
	}
}
@-moz-keyframes rotate
{
	from
	{
		-moz-transform		: rotate(0deg);
		transform			: rotate(0deg);
	}
	to
	{
		-moz-transform		: rotate(360deg);
		transform			: rotate(360deg);
	}
}
@-ms-keyframes rotate
{
	from
	{
		-ms-transform		: rotate(0deg);
		transform			: rotate(0deg);
	}
	to
	{
		-ms-transform		: rotate(360deg);
		transform			: rotate(360deg);
	}
}
@-o-keyframes rotate
{
	from
	{
		-o-transform		: rotate(0deg);
		transform			: rotate(0deg);
	}
	to
	{
		-o-transform		: rotate(360deg);
		transform			: rotate(360deg);
	}
}
@keyframes rotate
{
	from
	{
		transform			: rotate(0deg);
	}
	to
	{
		transform			: rotate(360deg);
	}
}



#footer
{
	padding-left			: 30px;
	padding-right			: 30px;
}
#footer.flash
{
	-webkit-animation-name				: flash;
	-webkit-animation-duration			: 2s;
	-webkit-animation-iteration-count	: 1;
	-webkit-animation-timing-function	: ease-out;
	-moz-animation-name					: flash;
	-moz-animation-duration				: 2s;
	-moz-animation-iteration-count		: 1;
	-moz-animation-timing-function		: ease-out;
	-ms-animation-name					: flash;
	-ms-animation-duration				: 2s;
	-ms-animation-iteration-count		: 1;
	-ms-animation-timing-function		: ease-out;
	-o-animation-name					: flash;
	-o-animation-duration				: 2s;
	-o-animation-iteration-count		: 1;
	-o-animation-timing-function		: ease-out;
	animation-name						: flash;
	animation-duration					: 2s;
	animation-iteration-count			: 1;
	animation-timing-function			: ease-out;
}

@-webkit-keyframes flash
{
	50%
	{
		background-color				: rgba(75, 0, 120, 0.40);
	}
}
@-moz-keyframes flash
{
	50%
	{
		background-color				: rgba(75, 0, 120, 0.40);
	}
}
@-ms-keyframes flash
{
	50%
	{
		background-color				: rgba(75, 0, 120, 0.40);
	}
}
@-o-keyframes flash
{
	50%
	{
		background-color				: rgba(75, 0, 120, 0.40);
	}
}
@keyframes flash
{
	50%
	{
		background-color				: rgba(75, 0, 120, 0.40);
	}
}



[hash-location]
{
	background-color	: #eee;
	padding				: 10px;
	margin-top			: 100px;
	display				: none;
}
[hash-location].active
{
	display				: block;
}



[hash-location="#about"]
{
	padding				: 30px;
}
[hash-location="#about"] h4
{
	font-weight			: bold;
	margin-top			: 30px;
}



#stream, #streamPlayer, #videoCover
{
	position			: absolute;
	margin-top			: 30px;
	margin-left			: 20%;
	padding-bottom		: 10px;
}
#videoCover
{
	width				: 300px;
	height				: 200px;
	z-index				: 900;
}



#player
{
	position			: fixed;
	width				: 97.3%;
	height				: 50px;
	top					: 50px;
	z-index				: 100;
}
#player:after {
	top					: 0px;
	height				: 75px;
	width				: 200%;
	margin-top			: -50px;
	margin-left			: -50%;
	background-color	: rgba(250, 250, 250, 0.80);
	content				: ' ';
	display				: block;
}

#player .play-button, #player .repeat-button, #player .shuffle-button
{
	background			: none;
	border				: 0px;
}
#player .repeat-button, #player .shuffle-button
{
	margin-top			: -2px;
	font-size			: 120%;
	padding				: 3px 5px;
	border-radius		: 7.5px;
}
#player .repeat-button.active, #player .shuffle-button.active
{
	background-color	: rgba(80, 120, 195, 0.80);
	color				: rgba(255, 255, 255, 0.80);
}

#player .slider, #player .slider *
{
	position			: absolute;
	border-radius		: 20px;
	outline-width		: 0px;
}
#player .goog-slider-horizontal
{
	background-color	: #a3c6ff;
	display				: inline-block;
	height				: 15px;
	width				: 32%;
	margin-top			: 4px;
	cursor 				: pointer;
}
#player .goog-slider-thumb
{
	background-color	: whiteSmoke;
	height				: 10px;
	width				: 10px;
	top					: 3px;
	z-index				: 99;
}

#player .time
{
	margin-left			: 1%;
	pointer-events		: none;
}
#player .track
{
	margin-left			: 41%;
}
#player .repeat-button
{
	margin-left			: 33.5%;
}
#player .shuffle-button
{
	margin-left			: 36.5%;
}
#player .time, #player .track, #player .repeat-button, #player .shuffle-button
{
	position			: absolute;
}

label[for="following"]
{
	margin-right		: 10px;
}


table
{
	width				: 100%;
	text-align			: left;
	position			: relative;
}
table th
{
	cursor 				: pointer;
}
table [ng-repeat] [ng-click], table [ng-repeat] [ng-href]
{
	height				: 22px;
	width				: 100%;
	position			: absolute;
	cursor 				: pointer;
	background			: none !important;
}

table th.remove
{
	width				: 20px;
}
table td.icon-remove
{
	display				: none;
}
table tr:hover td.icon-remove
{
	display				: block;
}

.now-playing, .hotlistactive
{
	background-color	: rgba(0, 50, 255, 0.30);
}


#search-title, #search-artist
{
	width				: 80%;
}

.empty-track-table
{
	font-weight			: bold;
	font-size			: 90%;
	margin-top			: 30px;
	margin-left			: 20px;
}
.empty-track-table:not(.active)
{
	display				: none;
}


.tabbar > .navbar-inner
{
	background			: rgba(65, 65, 65, 0.80);
	border-radius		: 5px;
}

.tabbar .nav > .active > a
{
	background			: rgba(0, 0, 0, 0.25);
}

.tabbar .nav a
{
	padding-top			: 2px !important;
	padding-bottom		: 2px !important;
}

.tabbar .navbar-inner > .icon-remove
{
	margin				: 5px 20px;
	margin-left			: 0px;
	padding				: 0px;
	color				: inherit;
	background			: none;
	border 				: none;
}

.tabbar label
{
	margin-bottom		: 0px;
}

.chatwindow, .chatwindow + div
{
	max-height			: 500px;
}

.chatwindow
{
	overflow-y			: auto;
	padding-right		: 10px;
}

.chatmembersheader
{
	display				: block;
	width				: 95%;
	margin-bottom		: 10px;
	border-bottom		: 1px solid #333;
}

.chatmembers
{
	width				: 100%;
	margin-top			: 25px;
}

#chatinvite, #hotlistinvite
{
	width				: 50%;
	margin-left			: 20px;
}

.chatmessage
{
	width				: 99%;
	margin-top			: 20px;
}

#groupcreate
{
	height				: 18px;
	margin				: 2px;
	padding				: 0px
}

.icon-plus
{
	margin-right		: 7px;
}


/***** Bootstrap navbar adjustments *****/

.navbar .container
{
	width				: 95%;
}

@media (min-width: 980px)
{
	.navbar-inner
	{
		min-height		: 0px;
		max-height		: 30px;
	}
}

.navbar a,
#user-greeting
{
	padding-top			: 5px !important;
	padding-bottom		: 5px !important;
	display				: block;
}

.navbar form *
{
	padding-top			: 0px !important;
	padding-bottom		: 0px !important;
	margin-top			: 5px !important;
}

/***** Bootstrap table-hover adjustments + applying the property to every table *****/

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th, table tbody tr:hover td, table tbody tr:hover th
{
	background-color	: rgba(0, 50, 255, 0.15);
	cursor				: pointer;
}

/***** Bootstrap Hero Unit adjustments *****/

.hero-unit
{
	padding				: 30px;
	padding-top			: 15px;
}

.hero-unit h3
{
	font-size			: 20px;
}

.hero-unit h4
{
	font-size			: 18px;
}

.hero-unit p, .hero-unit .btn
{
	font-size			: 16px;
}

.hero-unit .btn
{
	padding				: 10px 30px;
	margin-right		: 10px;
}


/***** Minor patch for bug in Bootstrap alerts *****/

.alert .pull-right
{
	margin-top			: -5px;
}


/***** Humane.js notification adjustments *****/

.humane
{
	pointer-events		: none;
	font-size			: 18px;
	padding				: 10px 50px;
	top					: 15px;
	right				: 15px;
	left				: auto;
	width				: auto;
}

/***** Override Bootstrap label alignment on Search page *****/

label[for="search-title"], label[for="search-artist"]
{
	line-height			: 30px;
}




/***** Workaround for SpaceX network blocking Google Drive over http *****/

@font-face
{
	font-family			: 'Open Sans';
	font-style			: normal;
	font-weight			: 400;
	src					:
		local('Open Sans'),
		local('OpenSans'),
		url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
	;
}
@font-face
{
	font-family			: 'Open Sans';
	font-style			: normal;
	font-weight			: 700;
	src					:
		local('Open Sans Bold'),
		local('OpenSans-Bold'),
		url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')
	;
}
@font-face
{
	font-family			: 'Open Sans';
	font-style			: italic;
	font-weight			: 400;
	src					:
		local('Open Sans Italic'),
		local('OpenSans-Italic'),
		url(https://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff')
	;
}
@font-face
{
	font-family			: 'Open Sans';
	font-style			: italic;
	font-weight			: 700;
	src					:
		local('Open Sans Bold Italic'),
		local('OpenSans-BoldItalic'),
		url(https://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff')
	;
}
