/* RubikSynth Styles */


/* BASE */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	color: #FFF;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	margin: 0px;
	background-image: url(../img/noise.png);
	background-color: #000;
	overflow: hidden;
}

#no-audio-msg{
	display:none;
	font-size: 30px;
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	bottom:0;
	margin: auto;
	width: 700px;
	height: 100px;
	text-align: center;
}

#no-audio-msg a {
	color: #CCC;
}

#cubeHolder {
	position: absolute;
	width: 100%;
	height:100%;
}

#main-cubelab-logo{
	width:140px;
	height:32px;
	position: absolute;
	bottom:6px;
	right:25px;
}


/* CUBE */

.cube {
	width:  100%;
	height: 100%;
}


.cube .cubelet {
	width:  140px;
	height: 140px;
	position: absolute;
}

.faceLabel {
	display: none;
}

/*
	Direction-facing planes of limited size
	that act as containers for content.
*/

.cube .cubelet > .face {
	position: absolute;
	width:  100%;
	height: 100%;
	background-color: #000;
	text-align: center;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-o-backface-visibility:      hidden;
	backface-visibility:         hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	padding: 7%;
}

.cube .cubelet > .face.faceTransparent {
	background-color: transparent;
}

/*
	STICKERS
*/

.cube .sticker {

	position: absolute;
	top: 20%;
	left:20%;
	width:  60%;
	height: 60%;
	background-color: #F0F;
	border-radius: 60%;
	text-align: center;
	cursor: pointer;
	z-index: 3;
	-webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity:1;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-o-backface-visibility:      hidden;
	backface-visibility:         hidden;
}

.cube .sticker.red 		{ background-color: #DF4850; box-shadow: 0 0 20px 5px  #DF4850;}
.cube .sticker.white 	{ background-color: #F3F3F3; box-shadow: 0 0 20px 5px  #F3F3F3;}
.cube .sticker.blue 	{ background-color: #268EBF; box-shadow: 0 0 20px 5px  #268EBF;}
.cube .sticker.green 	{ background-color: #25938A; box-shadow: 0 0 20px 5px  #25938A;}
.cube .sticker.orange 	{ background-color: #E95734; box-shadow: 0 0 20px 5px  #E95734;	}
.cube .sticker.yellow 	{ background-color: #F6B63D; box-shadow: 0 0 20px 5px  #F6B63D;}

.disabled .sticker{
	-webkit-transform: scale(.4);
	transform: scale(.4);
	opacity:0.5;
}

.disabled .sticker:hover{
	opacity:1;
}

.sticker.pop{
	-webkit-animation: pop-out 500ms 1;
	-moz-animation: pop-out 500ms 1;
	animation: pop-out 500ms 1;
}

@keyframes pop-out {
  0% {
    -webkit-transform: scale(0.2);
	transform: scale(0.2);
  }
  30% {
    -webkit-transform: scale(.8);
	transform: scale(.8);
  }
  100% {
   -webkit-transform: scale(1);
	transform: scale(1);
  }
}

/* PLAYHEAD white rings */

.playhead {
	position: absolute;
	top: 5px;
	left:5px;
	border-radius: 65px;
	border:solid 3px #FFF;
	width:130px;
	height:130px;
	opacity: .8;
	-webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
	-webkit-transform: scale(.5);
	transform: scale(.5);
	opacity: 0;
	pointer-events:none;
}

.playhead.on{
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/** GLOW circles that animate out-**/

.glow{
	position: absolute;
	top: 20%;
	left:20%;
	width:  60%;
	height: 60%;
	background-color: #F0F;
	border-radius: 60%;
	z-index: 2;
	pointer-events:none;
}

.disabled .glow{
	display:none;
}

.glow.on{
	display:block;
	-webkit-transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
	-webkit-transform: scale(3);
	transform: scale(3);
	opacity: 0;
}

.cube .glow.red 	{ background-color: #DF4850;}
.cube .glow.white 	{ background-color: #F3F3F3;}
.cube .glow.blue 	{ background-color: #268EBF;}
.cube .glow.green 	{ background-color: #25938A;}
.cube .glow.orange 	{ background-color: #E95734;}
.cube .glow.yellow 	{ background-color: #F6B63D;}


/* CONTROLS */


/* BIG PLAY BUTTON */

#big-play-btn {
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 122px;
	height:50px;
	bottom:50px;
	border-radius: 2px;
	cursor: pointer;
	color: #FFF;
	border: 1px solid  #888;
	background-color: rgba(0,0,0,.5);
	cursor: pointer;
}

#big-play-btn:hover{
	text-shadow: 0 0 10px #FFF;
}

.play-icon{
	position: absolute;
	width: 50px;
	height:40px;
	background-image: url(../img/top-menu.png);
	background-position: -50px 0;
	left: 6px;
	top:4px;
}

#big-play-btn:hover .play-icon{
	background-position: -50px -40px;
}

.play-label{
	position: absolute;
	left: 56px;
	top:18px;
	letter-spacing: 2px;
	font-size: 11px;
}

/*TOP MENU*/

.top-menu{
	position:absolute;
	width:100%;
}

.top-btn{
	position: absolute;
	top:10px;
	width: 50px;
	height:40px;
	background-image: url(../img/top-menu.png);
	cursor: pointer;
}

#menu-btn{
	left: 10px;
	width: 50px;
	height:40px;
	background-position: 0 0;
}

#menu-btn:hover{
	background-position: 0 -40px;
}

#play-btn{
	right: 10px;
	width: 50px;
	height:40px;
	background-position: -50px 0;
}

#play-btn:hover{
	background-position: -50px -40px;
}

#play-btn.paused{
	background-position: -100px 0;
}

#play-btn.paused:hover{
	background-position: -100px -40px;
}

#shuffle-btn{
	right: 70px;
	width: 50px;
	height:40px;
	background-position: -150px 0;
}

#shuffle-btn:hover{
	background-position: -150px -40px;
}

/* CONTROL PANEL */

#control-panel-holder{
	position:absolute;
	height: 100%;
	width:392px;
	background-color: #241F25;
	overflow-y:scroll;
	overflow-x: hidden;
	left: 0;
	-webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
	transition:         all 300ms cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

#control-panel-holder.hidden{
	left: -392px;
}

#controls{
	position:absolute;
	width:380px;
}

/* CONTROL PANEL TOP BAR */

#top-bar{
	position: relative;
	height:50px;
	width:380px;
	text-align:center;
}

#title{
	float:left;
	width: 130px;
	height:50px;
	line-height: 50px;
	border-right: 1px solid #555 ;
	font-size: 16px;
	letter-spacing: 1px;
}

.top-bar-btn{
	float:left;
	width:100px;
	height: 50px;
	font-size: 11px;
	letter-spacing: 1px;
	line-height: 50px;
	border-right: 1px solid #555 ;
	cursor: pointer;
	color:#AAA;
}

.top-bar-btn.selected{
	border-bottom: 1px solid #FFF;
	color:#FFF;
	cursor: default;
}

.top-bar-btn:hover{
	background-color: #312c32;
}

#close-btn{
	float:left;
	height: 50px;
	width: 50px;
	background-repeat: no-repeat;
	padding: 16px;
	background-image: url(../img/controls.png);
	background-position: -120px -68px;
	cursor: pointer;
}

#close-btn:hover{
	background-color: #312c32;
}


/* VOICE SECTIONS */

.voice-section{
	position: relative;
	height:190px;
	width:380px;
	font-size: 9px;
}

.section-header{
	height:42px;
	width:380px;
	background-color: rgba(0,0,0,.25);
	font-size: 11px;
	line-height: 42px;
	vertical-align: middle;
}

.section-title{
	position: absolute;
	left: 25px;
	top: 12px;
	height: 16px;
	width: 100px;
	line-height: 16px;
	background-repeat: no-repeat;
	padding-left: 40px;
	background-image: url(../img/controls.png);
	letter-spacing: 1px;
}

#high-title{
	background-position: -170px -68px;
}
#mid-title{
	background-position: -170px -88px;
}
#bass-title{
	background-position: -170px -108px;
}
#global-title{
	background-position: -170px -128px;
}

.voice-toggle{
	position: absolute;
	left: 260px;
	top: 8px;
	height: 30px;
	width: 110px;
	background-repeat: no-repeat;
	background-image: url(../img/controls.png);
	background-position: -124px -0px;
	cursor: pointer;
}

.voice-toggle.off{
	background-position: -124px -34px;
}

.cp-label{
	letter-spacing: 1px;
	color: #C5C5C5;
}

.shape-label{
	position: absolute;
	left: 20px;
	top: 80px;
}

.length-label{
	position: absolute;
	left: 160px;
	top: 80px;
	letter-spacing: 1px;
	color: #C5C5C5;
}

.shape-toggle{
	position: absolute;
	left: 20px;
	top: 114px;
	height: 34px;
	width: 122px;
	background-repeat: no-repeat;
	background-image: url(../img/controls.png);
	background-position: 0 0;
	cursor: pointer;
}

.shape-toggle.tri{
	background-position: 0 -34px;
}

/* GLOBAL FX */

#fx-holder{
	position: relative;
	border-bottom: 1px solid #000;
	top: 13px;
	left:20px;
	height: 125px;
	width: 340px;
}

.fx-item{
	position: absolute;
	top: 0px;
	height: 110px;
	width: 50px;
	text-align: center;
}

.fx-normal{
	left: 50px;
}

.fx-space{
	left: 240px;
}

.fx-toggle{
	position: absolute;
	left: 7px;
	top: 25px;
	height: 76px;
	width: 35px;
	background-repeat: no-repeat;
	background-image: url(../img/controls.png);
	background-position: 0 -68px;
	cursor: default;
}

.fx-toggle.off{
	background-position: -40px -68px;
	cursor: pointer;
}

/* TEMPO */

.tempo-holder{
	position: relative;
	top: 25px;
	left:20px;
	height: 144px;
	width: 340px;

}

.tempo-label{
	position: absolute;
	top: 10px;
}

.slow-label{
	position: absolute;
	top: 95px;
}

.fast-label{
	position: absolute;
	top: 95px;
	left: 320px;
}


/* SLIDERS */

.slider{
	position: absolute;
	cursor:pointer;
	outline: none;
	background-color: rgba(0,0,0,0.8);
	-webkit-appearance: none;
}

.slider::-webkit-slider-thumb{
	background-image: url(../img/controls.png);
	-webkit-appearance: none;
}

.length-slider{
	left: 170px;
	top: 128px;
	width: 170px;
	height: 2px;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

.length-slider::-webkit-slider-thumb{
	background-position: -80px -68px;
	width:17px;
	height:28px;
}

.tempo-slider{
	left: 0px;
	top: 68px;
	width: 340px;
	height: 3px;
	box-shadow: 0 0 0 5px rgba(0,0,0,0.2);
}

.tempo-slider::-webkit-slider-thumb{
	background-position: -80px -108px;
	width:21px;
	height:32px;
	margin-top:-8px;
	background-color: rgba(0,0,0,0);
	border:none;
}

/* ABOUT TAB */

#about{
	display:none;
}

#about-content{
	position:relative;
	width:100%;
	height: 650px;
	background-color: #191C1E;
	padding:30px 20px;
}

p{
	color:#AAA;
	line-height: 180%;
	font-size: 17px;
}

a {
	color:#CCC;
}

#about-footer{
	position:relative;
	height:80px;
	width:100%;
	padding-top:30px;
}

#friends-logo{
	width:130px;
	height:32px;
	padding-left:30px;
}

#cubelab-logo{
	width:140px;
	height:32px;
	padding-left:30px;
}

/* CUSTOM SCROLL BAR */

::-webkit-scrollbar {
	width: 13px;
}

::-webkit-scrollbar-track {
	background-color: #1b171c;
}

::-webkit-scrollbar-thumb {
	background: #383339;
	border: 1px solid #1b171c;
}