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

body
	font-family: trebuchet ms
#msg
	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
	z-index: 100
	strong
		color: #859900
	em
		color: #dc322f
	b
		color: #002b36
#player
	#projector
		display: block
		position: absolute
		background-color: #000
		width: 320px
		height: 240px
		#screen
			position: absolute
			top: 0
			left: 0
			width: 100%
			height: 100%
			z-index: 20 
			#soundcloud
				position: absolute
				top: 0
				right: 0
				z-index: 21
			#soundcloud-dl
				position: absolute
				top: 81px
				right: 10px
				padding: 5px
				background-color: #000
				*
					color: #839496
				z-index: 20
			#soundcloud-img
				position: absolute
				top: 0
				left: 0
				width: 100%
				height: 100%
				z-index: 20
				img
					max-width: 100%
					max-height: 100%
		#ytscreen
			z-index: 19
			position: absolute
			top: 0
			left: 0
		#video-title
			position: absolute
			bottom: 0
			left: 0
			color: #988
			z-index: 20
		#projimg
			width: 100%
			height: 100%
	nav
		position: absolute
		top: 260px
		button
			color: #000
		#scan.blinkOn
			background-color: #fff
			color: #000
		#scan.blinkOff
			background-color: #000
			color: #fff
		#like
			color: #e4b
		#like.liked
			color: #44f
	#playlist
		position: absolute
		left: 330px
		z-index: 20
		width: 300px
		ul#queue
			width: 100%
			li
				display: block
				cursor: pointer
				border-bottom: 1px solid #ddd
				span.title
					display: block
					padding: 5px
					z-index: 1
				a.user
					float: right
					padding: 0 5px
					color: #d33682
					padding: 5px
					z-index: 2
				span.like
					float: right
					color: #657b83
					padding: 5px
					z-index: 3
				span.like.liked
					color: #a35783
			li.playing
				background-color: #073642
				color: #fff
#room, #user
	padding: 10px
	label
		color: #657b83
		width: 200px
		text-align: right
		padding-right: 5px
		display: inline-block
	span
		color: #93a1a1
a
	color: #268bd2
	&:visited
		color: #6c71c4
body
	font-size: 16px
#bg
	position: fixed
	top: 0
	left: 0
	z-index: -1
	opacity: 0.3
#pnp
	position: fixed
	right: 20px
	bottom: 20px
	width: 400px
	height: 285px
	background: #fff
#stats
	position: fixed
	right: 20px
	top: 20px
	width: 390px
	font-size: 14px
	background-color: #fff
	padding: 5px
	display: none
	overflow-y: scroll
#videos
	width: 800px
	padding-right: 5px
	li
		width: 100%
		list-style-type: none
		display: block
		margin-top: 3px
		a,span
			display: inline-block
			margin-left: 5px
		.date
			opacity: 0.8
			width: 60px
			text-align: right
			font-size: 14px
		.time
			opacity: 0.8
			width: 40px
			text-align: right
			font-size: 14px
		.user
			font-size: 14px
			width: 100px
			overflow: hidden
		.type
			width: 20px
			text-align: center
			font-variant: small-caps
		.title
			// color: #93a1a1
			text-decoration: none
			width: 300px
			overflow: hidden
			white-space: nowrap
		.remove
			color: #dc322f
			width: 200px
			cursor: pointer
			text-decoration: underline
			text-transform: uppercase
			opacity: 0.5
	li:hover
		.remove
			opacity: 1
		.title
			text-decoration: underline
a#return-link
	position: absolute
	top: 10px
	left: 10px
	font-size: 14px
h1
	color: #bbb
	font-size: 48px
	text-align: center
	width: 80%
	padding-bottom: 10px
h2
	color: #bbb
	font-size: 24px
	padding-left: 20px
	text-transform: uppercase
	#room-name
		color: #fff
#search-terms
	font-size: 14px
	padding: 2px 2px
	width: 200px
	background-image: url('/img/magnify.png')
	background-position: right center
	background-repeat: no-repeat
	border: 0
	outline: 0
	background-color: #ddd
	&:hover
		background-color: #fff
	&:focus
		background-color: #fff
#search-results-container
	width: 350px
	border: 2px solid black
	background: #333
	display: none
	#search-loading
		margin: 10px
	#search-results
		height: 400px
		width: 100%
		overflow-x: hidden
		overflow-y: scroll
		li
			clear: both
			height: 54px
			overflow: hidden
			// padding-right: 5px
			div.thumb
				width: 80px
				height: 54px
				float: left
				background-position: center center
				margin: 0 5px 0 0
				border-right: 2px solid black
			h4
				white-space: nowrap
				overflow: hidden
				font-size: 14px
				color: #fff
				margin: 3px 0 3px 0
			border-bottom: 2px solid black
			font-size: 12px
			line-height: 15px
			color: #bbb
			opacity: 0.9
			cursor: pointer
			&:hover
				background: black
				cursor: pointer
				opacity: 1.0