@import compass/reset
@mixin rounded($width)
	-moz-border-radius: $width
	-webkit-border-radius: $width
	-o-border-radius: $width
	border-radius: $width

body
	background: #888
	// overflow-y: scroll
	overflow-y: hidden
	overflow-x: hidden
	font-family: trebuchet ms, sans-serif
#logo
	position: absolute
	z-index: 20
	top: 15px
	left: 20px
	a
		display: inline-block
		img
			padding-top: 5px
			display: inline-block
	h1
		position: relative
		top: -10px
		left: 10px
		font-size: 34px
		font-weight: normal
		font-style: italic
		font-family: georgia, garamond, serif
		color: #f8b
		display: inline-block
	h2
		position: relative
		display: inline-block
		font-size: 12px
		color: #fff
		max-width: 250px
		left: 10px
		top: -6px
		padding-right: 20px
#logobg
	position: absolute
	top: 10px
	left: 0
	width: 100%
	height: 64px
	background-color: #000
	opacity: 0.8
	z-index: 19
#likebutton
	display: inline-block
	display: none
	z-index: -1
	min-width: 90px
	a
		color: #33f
#flower
	position: absolute
	top: 0
	right: 10%
	z-index: 20
	pointer-events: none
	display: none
#contact
	position: absolute
	left: 0
	display: none
	#avatar, .avatar
		display: none
		width: 100%
		// max-height: 300px
	.avatar
		display: block
	#bio
		p
			color: #ddd
			background-color: #000
			padding: 10px 5px
			text-align: center
			opacity: 0.7
		a
			color: #ebf
			display: block
		img
			width: 100%
			// max-height: 300px
#sitez
	position: absolute
	top: 30px
	right: 20px
	text-align: right
	z-index: 20
	div
		color: #ddd
		cursor: pointer
		display: inline-block
		padding: 4px 8px 4px 8px
		float: left
		a
			color: #bbc
	div#settings-hook
		&:hover 
			@include rounded(10px 10px 3px 3px)
			background-color: #333
			color: #fff
		&.opened
			@include rounded(10px 10px 3px 3px)
			background-color: #333
			color: #fff
		display: none
		z-index: 82
#fullscreen-warning
	position: fixed
	top: 50%
	left: 50%
	width: 600px
	margin-left: -300px
	margin-top: -20px
	text-align: center
	font-size: 24px
	padding: 10px
	background-color: rgba(0,0,0,0.5)
	color: white
	z-index: 100
	display: none
#settings-container
	position: fixed
	top: 53px
	@include rounded (10px)
	right: 20px
	z-index: 80
	width: 500px
	background-color: #222
	color: #657b83
	display: none
	box-shadow: 0 5px 10px #000
	.close
		margin: 10px 10px 0 0
		float: right
		color: #ded8c5
		width: 20px
		height: 14px
		font-size: 14px
		padding: 3px 0
		text-align: center
		vertical-align: middle
		@include rounded(10px)
		background-color: #000b16
		&:hover
			color: #fff
			cursor: pointer
	#rooms-loading
		margin: 10px
	h5
		font-size: 16px
		color: #93a1a1
		display: block
		padding: 10px
		background-color: #333
		@include rounded(10px 10px 0 0)
	p
		padding: 10px 10px 10px 10px
		font-size: 14px
		line-height: 18px
		color: #b3c1c1
		background-color: #1b1b1f
	label
		margin: 2px 0 0 10px
		font-size: 14px
		color: #657b83
		width: 150px
		text-align: right
		padding-right: 5px
		display: inline-block
	span
		margin: 2px 10px 0 0
		color: #839496
		font-size: 14px
	input
		margin: 2px 10px 0 0
		width: 100px
	#profile-avatar, #profile-bg
		width: 300px
	#profile-settings-save
		font-size: 14px
	textarea
		width: 300px
		height: 150px
	.shim
		width: 1px
		height: 10px
	ul
		text-decoration: none
		cursor: pointer
		li
			list-style-type: none
			padding: 10px
			cursor: pointer
			border-top: 1px solid #000
			background-color: transparent
			text-decoration: none
			font-size: 14px
			color: #83a1a1
			&:hover
				color: #fdf6e3
		a li
			color: #83a1a1
			text-decoration: none
		a
			color: #83a1a1
			text-decoration: none
#msg
	z-index: 100
	position: fixed
	top: 10px
	right: 10px
	padding: 5px
	width: 250px
	max-height: 80%
	font-size: 12px
	background-color: #eeeeee
	overflow-y: scroll
	overflow-x: hidden
	color: #333
	strong  
		color: #859900
	em
		color: #dc322f
	b
		color: #002b36
#player 
	padding: 10px
	position: absolute
	background: #000
	#projector
		display: block
		position: fixed
		background-color: #000
		#screen
			position: absolute
			top: 0
			left: 0
			width: 100%
			height: 100%
			z-index: 19
			#soundcloud, #audio
				position: absolute
				top: 0
				right: 0
				background-color: #000
				z-index: 21
			#soundcloud-dl, #audio-dl
				position: absolute
				top: 81px
				right: 0
				width: 81px
				padding: 5px 0 5px 0
				font-size: 13px
				text-align: center
				background-color: #000
				*
					color: #839496
				z-index: 20
			#soundcloud-img, #audio-img
				position: absolute
				top: 0
				left: 0
				width: 100%
				height: 100%
				z-index: 20
				img
					max-width: 100%
					min-height: 100%
					max-height: 100%
		#ytscreen
			z-index: 19
			position: absolute
			top: 0
			left: 0
		#video-title
			position: absolute
			bottom: 0
			left: 10px
			color: #fff
			z-index: 20
			&.fullscreen
				position: fixed
				bottom: 90px
				left: auto
				right: 30px
				font-size: 24px
		#projimg
			width: 100%
			height: 100%
	nav#controls
		z-index: 40
		position: absolute
		display: none
		#video-link
			color: #839496
		#scan.blinkOn
			background-color: #fff
			color: #000
		#scan.blinkOff
			background-color: #000
			color: #fff
		#like
			color: #e4b
		#like.liked
			color: #44f
#playlistbg
	position: absolute
	background-color: #000
	opacity: 0.5
#playlist
	position: absolute
	z-index: 90
	width: 100%
	ul#queue
		width: 100%
		border-top: 1px solid #888
		border-left: 1px solid #888
		border-bottom: 1px solid #888
		-webkit-padding-start: 0
		-webkit-margin-before: 0
		overflow-y: scroll
		overflow-x: hidden
		z-index: 90
		li
			padding: 5px
			display: block
			cursor: pointer
			border-bottom: 1px solid #333
			span.title
				color: #ddd
				display: block
				padding: 5px
				font-size: 15px
				z-index: 1
				&:hover
					color: #fff
			a.user  
				float: right
				font-size: 14px
				padding: 0 5px
				color: #d33682
				padding: 5px
				z-index: 2
				text-decoration: none
			span.like
				float: right
				font-size: 14px
				color: #657b83
				padding: 5px
				z-index: 3
			span.like.liked
				color: #c357a3
			span.score
				float: right
				font-size: 14px
				color: #bbb
				padding: 5px 10px 5px 5px
		li.playing
			background-color: #222
			span.title
				color: #fff
		li#queueLess
			color: #fff
			text-align: center
			&:hover
				background-color: #666
				color: #fff
			border: 0
			border-bottom: 1px solid #333
			font-size: 18px
			padding: 10px 0
			cursor: pointer
		li#queueMore
			color: #fff
			text-align: center
			&:hover
				background-color: #666
				color: #fff
			border: 0
			font-size: 33px
			padding: 20px 20px 20px 20px
			cursor: pointer
		li#queueDone
			color: #ddd
			text-align: center
			border: 0
			font-size: 33px
			padding: 80px 20px 200px 20px
		li#queueLoading
			text-align: center
			color: #fff
			font-size: 24px
			padding: 80px
	ol
		-webkit-padding-start: 0
		-webkit-margin-before: 0
		-webkit-margin-after: 0
		display: block
		position: relative
		top: 1px
		li
			padding: 5px 8px 8px 8px
			margin: 0 0 0 10px
			list-style-type: none
			border-top: 1px solid #000
			border-right: 1px solid #000
			border-left: 1px solid #000
			border-bottom: 1px solid #888
			display: inline-block
			background-color: #333
			color: #bbb
			cursor: pointer
			opacity: 0.7
			z-index: 89
		li.mode
			position: relative
			padding: 8px 8px 8px 8px
			border-color: #888
			border-bottom: 1px solid #111
			background-color: #111
			color: #fff
			z-index: 91
nav
	z-index: 10
	margin: 0 auto
	button, #video-link
		background-color: #333
		color: #ddd
		&:hover
			background-color: #666
			color: #fff
		border: 0
		font-size: 14px
		min-width: 40px
		min-height: 20px
		padding: 5px 5px
		position: relative
		top: -1px
	#video-link
		padding: 6px 5px 5px 5px
#msg
	display: none
#gif-container
	position: absolute
	left: 0
	width: 100%
	padding-left: 10%
	display: block
	padding-bottom: 200px
	#gifs
		clear: both
		display: block
		text-align: center
		top: 0
		max-width: 80%
		margin: 0 0 200px 0
		box-shadow: 0 5px 10px #000
		background-color: #fff
		div
			padding: 10px
			display: inline-block
			img
				max-width: 350px
				max-height: 400px
#bg
	position: fixed
	top: 0
	left: 0
	opacity: 1
	z-index: -3
	width: 100%
	height: 100%
	display: none
	img 
		width: 100%
		height: 100%

.arrow-play
	width: 0
	height: 0
	border-top: 4.5px solid transparent
	border-left: 9.5px solid white
	border-bottom: 4.5px solid transparent
	display: inline-block
.arrow-pause
	width: 0
	height: 0
	border-top: 5px solid white
	border-right: 2.5px solid white
	border-bottom: 4px solid white
	border-left: 0
	display: inline-block
.arrow-prev
	width: 0
	height: 0
	border-top: 4px solid transparent
	border-right: 4px solid white
	border-bottom: 4px solid transparent
	display: inline-block
.arrow-next
	width: 0
	height: 0
	border-top: 4px solid transparent
	border-left: 4px solid white
	border-bottom: 4px solid transparent
	display: inline-block