/*
	interface.css
	
	Q-alizer V-2
	
	Copyright © PiterJ (piterj.nl)
*/



/*
	GLOBAL
*/

@font-face {
    font-family: regular;
    src: url(fonts/lacuna_regular.woff);
}

@font-face {
    font-family: italic;
    src: url(fonts/lacuna_italic.woff);
}

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	background: #000000 url("images/logoBackground.jpg") center no-repeat;
	font-family: regular;
	font-size: 14px;
	color: #858585;
	overflow: hidden;
}

h1 {
	font-size: 120%;
	font-weight: normal;
	text-align: center;
}

h1 a {
	display: block;
	font-size: 140%;
}

h1 a:hover {
	color: #5296d5;
	cursor: pointer;
}

a {
	color: #858585;
	text-decoration: none;
}

/* END global */



/*
	HEADER
*/

header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 24px;
	background: #101010;
	border-bottom: 1px solid #5296d5;
	z-index: 99;
}

#logo {
	display: block;
	position: fixed;
	top: 12px;
	left: -moz-calc(50% - 12px);
    left: -webkit-calc(50% - 12px);
    left: calc(50% - 12px);
	width: 24px;
	height: 25px;
	background: url("images/logoHeader.png") center no-repeat;
	z-index: 99;
}

#menu {
	float: left;
	line-height: 24px;
	vertical-align: middle;
}

#menu a {
	padding-left: 5px;
	padding-right: 5px;
}

#menu a:hover {
	color: #f5f5f5;
	cursor: pointer;
}

#copyright {
	float: right;
	padding-right: 5px;
	font-size: 80%;
	line-height: 24px;
	vertical-align: middle;
}

/* END header */



/*
	PLAYER
*/

.player {
	position: relative;
	top: 25px;
	width: 100%;
	height: -moz-calc(100% - 70px);
    height: -webkit-calc(100% - 70px);
    height: calc(100% - 70px);
	z-index: 96;
}

.player iframe, .player object, .player embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* END player */



/*
	BROWSE
*/

#browseButton {
	display: none;
	position: fixed;
	top: -moz-calc(50% - 36px);
    top: -webkit-calc(50% - 36px);
    top: calc(50% - 36px);
	left: 0;
	height: 72px;
	width: 36px;
	background: url("images/browse.png") center no-repeat;
	z-index: 97;
}

#browseButton:hover {
	background: url("images/browseHover.png") center no-repeat;
	cursor: pointer;
}

#browse {
	position: fixed;
	top: 25px;
	left: 0;
	width: 25%;
	height: -moz-calc(100% - 70px);
    height: -webkit-calc(100% - 70px);
    height: calc(100% - 70px);
	background: rgba(16, 16, 16, 0.9);
	border-right: 1px solid #5296d5;
	z-index: 98;
}

#browseContent {
	height: -moz-calc(100% - 185px);
    height: -webkit-calc(100% - 185px);
    height: calc(100% - 185px);
	overflow-y: auto;
}

input {
	line-height: 20px;
	padding: 5px;
	margin: 5px;
	font-family: regular;
	font-size: 100%;
	border: 0;
}

.formField {
	margin-right: 0;
	width: -moz-calc(100% - 76px);
    width: -webkit-calc(100% - 76px);
    width: calc(100% - 76px);
	background: #101010;
	border-top: 1px solid #202020;
	border-left: 1px solid #202020;
	border-bottom: 1px solid #202020;
	color: #757575;
}

.formField:hover {
	border-bottom: 1px solid #5296d5;
}

.formField:focus {
	border-bottom: 1px solid #5296d5;
	color: #f5f5f5;
}

.formButton {
	margin-left: -3px;
	width: 55px;
	background: #101010;
	border-top: 1px solid #202020;
	border-bottom: 1px solid #5296d5;
	border-right: 1px solid #5296d5;
	color: #757575;
}

.formButton:hover {
	color: #f5f5f5;
	cursor: pointer;
}

#searchResults {
	padding: 5px;
}

.searchResult {
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #202020;
	margin-bottom: 5px;
}

.resultThumbnail {
	float: left;
}

.resultTitle {
	width: -moz-calc(100% - 130px);
    width: -webkit-calc(100% - 130px);
    width: calc(100% - 130px);
	height: 34px;
	float: right;
	vertical-align: middle;
	overflow: hidden;
}

.resultInfo {
	margin-top: 16px;
	width: -moz-calc(100% - 130px);
    width: -webkit-calc(100% - 130px);
    width: calc(100% - 130px);
	float: right;
	vertical-align: middle;
	overflow: hidden;
}

.searchResult:hover {
	border-bottom: 1px solid #5296d5;
	color: #f5f5f5;
	cursor: pointer;
}

/* END browse */



/*
	QUEUE
*/

#queueButton {
	display: none;
	position: fixed;
	top: -moz-calc(50% - 36px);
    top: -webkit-calc(50% - 36px);
    top: calc(50% - 36px);
	right: 0;
	height: 72px;
	width: 36px;
	background: url("images/queue.png") center no-repeat;
	z-index: 97;
}

#queueButton:hover {
	background: url("images/queueHover.png") center no-repeat;
	cursor: pointer;
}

#queue {
	position: fixed;
	top: 25px;
	right: 0;
	width: 25%;
	height: -moz-calc(100% - 70px);
    height: -webkit-calc(100% - 70px);
    height: calc(100% - 70px);
	background: rgba(16, 16, 16, 0.9);
	border-left: 1px solid #5296d5;
	z-index: 98;
}

#queueContent {
	height: -moz-calc(100% - 100px);
    height: -webkit-calc(100% - 100px);
    height: calc(100% - 100px);
	overflow-y: auto;
}

#queueLoadscreen {
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	background: url("images/load.png") top no-repeat;
}

#queueList {
	padding: 5px;
	margin: 0;
	margin-top: -5px;
	list-style: none;
}

#queueList li {
	padding-top: 5px;
	border-bottom: 1px solid #202020;
	line-height: 20px;
	overflow: hidden;
	word-break: break-word;
}

#queueList li:hover {
	border-bottom: 1px solid #5296d5;
	color: #f5f5f5;
	cursor: pointer;
}

#queueList a {
	display: none;
	float: right;
	width: 16px;
	height: 16px;
	background: url("images/removeHover.png") center no-repeat;
	cursor: pointer;
}

#queueList li:hover a {
	display: inline-block;
}

/* END queue */



/*
	SETTINGS
*/

#settings {
	position: fixed;
	display: none;
	top: 50px;
	left: 10%;
	width: 80%;
	border: 1px solid #5296d5;
	background: #202020;
	z-index: 99;
}

#settings p {
	padding: 5px;
	text-align: center;
}

#settings form {
	margin: 0;
	padding: 0;
}

#settings label {
	display: inline-block;
	width: 120px;
	padding-right: 5px;
	text-align: right;
}

#settingsVolume {
	width: 50px;
}

#settings span {
	font-size: 80%;
	color: #ffad00;
}

#settingsButton {
	margin-left: 75%;
}

/* END settings */



/*
	REMOTE
*/

#remote {
	position: fixed;
	display: none;
	bottom: 100px;
	left: 10%;
	width: 80%;
	border: 1px solid #5296d5;
	background: #202020;
	z-index: 99;
}

#remote p {
	padding: 5px;
	text-align: center;
}

#remote span {
	margin: 5px;
	padding: 5px;
	background: #f5f5f5;
	color: #202020;
}

#remote a:hover {
	color: #f5f5f5;
	cursor: pointer;
}

/* END remote */




/*
	FOOTER
*/

footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 44px;
	background: #101010;
	border-top: 1px solid #5296d5;
	z-index: 99;
}

.notifier {
	display: none;
	position: absolute;
	bottom: 67px;
	left: -moz-calc(50% - 215px);
    left: -webkit-calc(50% - 215px);
    left: calc(50% - 215px);
	padding-left: 5px;
	padding-right: 5px;
	width: 420px;
	line-height: 24px;
	verticale-align: middle;
	text-align: center;
	font-size: 80%;
	color: #e5e5e5;
	word-break: break-word;
}

#alert {
	border-top: 1px solid #ffad00;
	background: rgba(100, 68, 0, 0.7);
}

#error {
	border-top: 1px solid #b82020;
	background: rgba(72, 12, 12, 0.7);
}

#marquee {
	position: fixed;
	bottom: 44px;
	left: -moz-calc(50% - 250px);
    left: -webkit-calc(50% - 250px);
    left: calc(50% - 250px);
	padding-left: 40px;
	padding-right: 40px;
	width: 420px;
	height: 24px;
	background: url("images/title.png") center no-repeat;
}

#playerTitle {
	display: inline-block;
	margin: 0;
	height: 100%;
	width: 100%;
	line-height: 24px;
	vertical-align: middle;
	font-size: 90%;
	color: #f5f5f5;
	overflow: hidden;
}

#controls {
	width: 100%;
	text-align: center;
}

.playerControl {
	width: 32px;
	height: 44px;
	border: 0;
	cursor: pointer;
}

#playerStart {
	display: none;
	background: url("images/play.png") center no-repeat;
}

#playerPause {
	display: none;
	background: url("images/pause.png") center no-repeat;
}

#playerResume {
	display: none;
	background: url("images/play.png") center no-repeat;
}

#playerNext {
	display: none;
	background: url("images/next.png") center no-repeat;
}

#playerSpacer {
	width: 32px;
	background: #101010;
	cursor: default;
}

#playerDonatePaypal {
	margin-left: 8px;
	width: 250px;
	background: url("images/paypal.png") center no-repeat;
}

#playerFullscreen {
	margin-left: 8px;
	display: none;
	background: url("images/fullscreen.png") center no-repeat;
}

#playerFullscreenExit {
	margin-left: 8px;
	display: none;
	background: url("images/fullscreenExit.png") center no-repeat;
}

#playerRemote {
	background: url("images/remote.png") center no-repeat;
}

/* END footer */



/*
	LOWRES
*/

@media only screen and (max-width: 1000px) {
	#browse {
		width: 50%;
	}
	
	#queue {
		width: 50%;
	}
}

@media only screen and (max-width: 500px) {
	html, body {
		overflow: auto;
	}
	
	.player {
		display: inline;
		width: 100%;
		height: -moz-calc((100vw) * 0.5625);
		height: -webkit-calc((100vw) * 0.5625);
		height: calc((100vw) * 0.5625);
	}
	
	.player iframe, .player object, .player embed {
		position: relative;
		height: -moz-calc((100vw) * 0.5625);
		height: -webkit-calc((100vw) * 0.5625);
		height: calc((100vw) * 0.5625);
	}
	
	#browse {
		margin-top: 15px;
		position: relative;
		width: 100%;
		height: auto;
		border: 0;
		border-top: 1px solid #5296d5;
	}
	
	#browse h1 a {
		display: none;
	}
	
	#queue {
		margin-top: 15px;
		position: relative;
		width: 100%;
		height: auto;
		border: 0;
		border-top: 1px solid #5296d5;
		margin-bottom: 105px;
	}
	
	#queue h1 a {
		display: none;
	}
	
	#playerDonateLabel {
		display: none;
	}
}

/* END lowres */