$color: #444
$color2: #888
$color3: #EF9F6E
$color4: #2d313b

$progressHeight: 5px

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600)

*
	color: #000
	font-size: 10px
	font-family: 'Open Sans', sans-serif
	padding: 0
	margin: 0
	border: 0
	outline: none
	box-sizing: border-box

html, body
	width: 100%
	height: 100%

body
	display: block
	position: absolute
	top: 0
	left: 0
	background-repeat: no-repeat
	background-position: center center
	background-size: cover
	transition: background 1s ease 0s
	-o-transition: background 1s ease 0s
	-moz-transition: background 1s ease 0s
	-webkit-transition: background 1s ease 0s

.control
	width: 25%
	height: 50px
	float: left
	display: list-item
	list-style: none
	background-repeat: no-repeat
	background-color: transparent
	background-size: 20px
	background-position: center center
	transition: background 0.1s ease 0s
	-o-transition: background 0.1s ease 0s
	-moz-transition: background 0.1s ease 0s
	-webkit-transition: background 0.1s ease 0s

	&:hover
		cursor: pointer

#player
	width: 300px
	position: absolute
	left: 50%
	top: 50%
	box-shadow: 0px 5px 10px #000
	background-color: $color4
	transform: translate(-50%, -50%)
	-o-transform: translate(-50%, -50%)
	-moz-transform: translate(-50%, -50%)
	-webkit-transform: translate(-50%, -50%)

#ui
	width: 100%
	display: table
	float: left
	background-color: #2d313b

	#controls
		display: table
		float: left
		width: 100%

	#next
		background-image: url("http://www.michaelmammoliti.com/projects/audioJS/icons/darkblue/next.png")

	#prev
		background-image: url("http://www.michaelmammoliti.com/projects/audioJS/icons/darkblue/prev.png")

	#play
		background-image: url("http://www.michaelmammoliti.com/projects/audioJS/icons/darkblue/play.png")

	#stop
		background-image: url("http://www.michaelmammoliti.com/projects/audioJS/icons/darkblue/stop.png")

	#progressbar
		width: 100%
		display: block
		overflow: hidden
		height: $progressHeight
		background-color: $color4 - 10
		cursor: pointer

		div
			width: 0%
			height: $progressHeight
			display: block
			float: left
			background-color: $color3 - 40
			transition: width 0.1s ease 0s
			-o-transition: width 0.1s ease 0s
			-moz-transition: width 0.1s ease 0s
			-webkit-transition: width 0.1s ease 0s

		#pointer
			width: 4px
			height: $progressHeight
			display: block
			float: right
			background-color: $color3
			transform: translate(100%,0)

#time
	width: 100%
	display: block
	overflow: hidden

	span
		color: $color3
		font-size: 1.2em
		width: 50%
		float: left
		display: list-item
		list-style: none
		padding: 15px 10px 10px 10px

		&:first-of-type
			text-align: left

		&:last-of-type
			text-align: right

#tracks
	width: 100%
	display: block
	overflow: hidden
	background-color: #fff

	div
		width: 100%
		display: table
		background-color: #fff
		transition: all 0.5s ease 0s
		-o-transition: all 0.5s ease 0s
		-moz-transition: all 0.5s ease 0s
		-webkit-transition: all 0.5s ease 0s
		cursor: pointer

		span
			margin-right: 10px
			display: table-cell
			padding: 0px 10px
			height: 50px
			line-height: 50px
			font-size: 1.2em
			color: #aaa

		artwork
			text-align: center
			display: table-cell
			width: 50px
			background-repeat: no-repeat
			background-size: cover
			background-position: center center

		&:hover *
			color: #888

		&.active
			background-color: $color3
			transition: all 0.5s ease 0s
			-o-transition: all 0.5s ease 0s
			-moz-transition: all 0.5s ease 0s
			-webkit-transition: all 0.5s ease 0s

		&.active :hover, 
		&.active *
			color: #fff

#artwork
	width: 100%
	height: 0
	padding-bottom: 100%
	display: block
	position: relative
	overflow: hidden
	background-image: url("../artworks/01.jpg")
	background-repeat: no-repeat
	background-size: cover
	background-position: center center
	transition: background 1s ease 0s
	-o-transition: background 1s ease 0s
	-moz-transition: background 1s ease 0s
	-webkit-transition: background 1s ease 0s

.background
	position: absolute
	height: 100%
	width: 100%
	top: 0
	left: 0
	background-color: $color4 - 10
	opacity: 0.7

.shadow
	background-color: $color4 - 10