/** @module SM-808 CSS */

body {
	position:absolute;
	display:inline-block;
	padding:0;
	margin:0;
	width:100%;
	height:auto;
	background-color:black;
}

* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	font-family:arial;
	font-size:15px;
}

input,textarea {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: none;
    -ms-user-select: text;
    user-select: text;
}

ul {
	list-style-type: none;
	padding:0;
	margin:0;
}

ul li {
	margin: 0;
	padding: 0;
}

button, textarea, input, *:focus {
	outline:0;
}

button {
	margin:0;
	padding:5px;
	display:inline-block;
	text-align:center;
	font-family:arial;
	font-size:10px;
	color:white;
	border-radius:5px;
	background-color:#303030;
	cursor:pointer;
	
}

h1 {
	font-family:'exo_2.0black';
	color:white;
	text-align:center;
	padding:10px;
	font-size:25px;
}

/*________________________________________________________*/

@font-face {
    font-family: 'exo_2.0black';
    src: url('Fonts/Exo2.0-Black-webfont.eot');
    src: url('Fonts/Exo2.0-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Exo2.0-Black-webfont.woff') format('woff'),
         url('Fonts/Exo2.0-Black-webfont.ttf') format('truetype'),
         url('Fonts/Exo2.0-Black-webfont.svg#exo_2.0black') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*________________________________________________________*/

#Loading {
	display:xone;
	position:fixed;
	z-index:1000;
	width:100%;
	height:100%;
}

#Loading_Content {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-100px;
	width:300px;
	height:auto;
	z-index:1000;
	text-align:center;
}

#Loading_Lightbox {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#202020;
	opacity:.5;
	z-index:0;
}

#Loading_Message {
	color:white;
	text-align:center;
	padding:20px;
	font-size:20px;
}

#Loading_Progress {
	position:relative;
	display:inline-block;
	width	: 256px;
	height	: 20px;
	background-color:#cacaca;
	border-radius:5px;
	overflow:hidden;
	border:4px solid #7a7a7a;
	
}

#Loading_Progress_Bar {
	position:absolute;
	top:0px;
	left:-256px;
	width:256px;
	height:20px;
	background-color:#00ff00;
}

/*________________________________________________________*/

.New_Instrument{
	display		: none;
	background-color: #cacaca;
	border-radius	: 5px;
	width		: 80%;
	position	: absolute;
	top		: 50px;
	height		: auto;
	left		: 10%;
	padding		: 1%;
	text-align	: center;
	margin-bottom	: 50px;
	padding-bottom	: 40px;
	z-index:1000;
}

.New_Instrument li {
	margin:10px;
	padding:10px;
	background-color:#eaeaea;
	border:1px solid #dadada;
	border-radius:5px;
	display:inline-block;
}
.New_Instrument canvas {
	margin:10px;
	border:1px solid #dadada;
	border-radius:5px;
}

.New_Instrument button {
	display:block;
	width:100%;
	text-align:center;
}

.New_Instrument .message{
	font-size:25px;
	font-weight:700;
	padding:10px;
}

.New_Instrument .close {
	width:20%;
	max-width:40%;
	display:inline-block;
	margin-top:20px;
	padding:10px;
	font-size:18px;
}


/*____________________________________________________________*/

.SequencerViewport {
	text-align:center;

}

.Sequencer {
	position:relative;
	color:white;
	background-color:#458051;
	border-radius:5px;
	display:inline-block;
	padding: 5px;
	margin:4px;
	min-width:1120px;
	text-align:left;
}

.Sequencer .viewport {
	position:relative;
	vertical-align		: middle;
	display			: inline-block;
	position		: relative;
	width			: 70px;
	height			: 70px;
	background-color	: #cacaca;
	padding			: 5px;
	margin			: 5px;
	border-radius		: 5px;
}

.Sequencer .viewport button {
	width: 100%;
	text-align:center;
	height:70px;
}

.Sequencer .container {
	display:inline-block;
	position:relative;
	vertical-align:middle;
}

.Sequencer .container .songname {
	display:inline-block;
	margin-bottom:5px;
}

.Sequencer .container .steps {
	position:relative;
	display:block;
	margin-top:12px;
}

.Sequencer .container .buttons {
	position:relative;
	display:block;
	margin-top:8px;
}

.Sequencer .container .buttons .save{
	margin-left:15px;
display:none;
}

.Sequencer .container .buttons .adjustBPM{
	margin-left:15px;
}

.Sequencer .container .buttons .clearPattern{
	margin-left:25px;
}

.Sequencer .viewport .playbutton {
	background-color: #00cc10;
	font-size:16px;
	font-weight:700;	
}

.Sequencer .viewport .playbutton.playing {
	background-color: #881100;
}

.Sequencer .steps ul li.on {
	background-Color : #aa0000;
	-webkit-box-shadow: inset -10px -17px 25px -10px rgba(0,0,0,0.91);
	-moz-box-shadow: inset -10px -17px 25px -10px rgba(0,0,0,0.91);
	box-shadow: inset -10px -17px 25px -10px rgba(0,0,0,0.91);
}

.Sequencer .steps ul li {
	font-family:'exo_2.0black';
	position:relative;
	display:inline-block;
	text-align:center;
	padding:0;
	margin:0px;
	background-color:#36573C;
	border-radius:20px;
	color:white;
	position:relative;
	cursor:default;
	vertical-align:middle;
	padding:0px;
	width:30px;
	margin-right:2px;
	height:30px;
	line-height:30px;	

	-webkit-box-shadow: inset 9px 10px 25px -10px rgba(0,0,0,0.91);
	-moz-box-shadow: inset 9px 10px 25px -10px rgba(0,0,0,0.91);
	box-shadow: inset 9px 10px 25px -10px rgba(0,0,0,0.91);	
}

/*____________________________________________________________*/


.Track {
	position:relative;
	color:white;
	border-radius:5px;
	display:inline-block;
	padding: 5px;
	margin:4px;
	text-align:left;
	min-width:1120px;
	border:3px solid #29354F;

	background-color:#475F7D;

	background: rgb(63,85,145); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(63,85,145,1) 0%, rgba(18,21,33,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,85,145,1)), color-stop(100%,rgba(18,21,33,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(63,85,145,1) 0%,rgba(18,21,33,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(63,85,145,1) 0%,rgba(18,21,33,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(63,85,145,1) 0%,rgba(18,21,33,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(63,85,145,1) 0%,rgba(18,21,33,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f5591', endColorstr='#121521',GradientType=0 ); /* IE6-9 */

}

.Track .steps {
	position:relative;
	display:	inline-block;
/*
	-webkit-perspective:1000;
	-webkit-perspective-origin-x:0;
	-webkit-perspective-origin-y:0;
*/
}

.Tracks .steps li.off {
    -webkit-transform: translate3d(0px,0px,0px) perspective(56px) rotateX(0deg);
    -webkit-transform-origin-x: 14;
    -webkit-transform-origin-y: 0;
    -webkit-transform-origin-z: 0;
	-webkit-transition: -webkit-transform .21s;
    
    -moz-transform: translate3d(0px,0px,0px) perspective(56px) rotateX(0deg);
    -moz-transform-origin-x: 14;
    -moz-transform-origin-y: 0;
    -moz-transform-origin-z: 0;
	-moz-transition: -moz-transform .21s;

    -o-transform: translate3d(0px,0px,0px) perspective(56px) rotateX(0deg);
    -o-transform-origin-x: 14;
    -o-transform-origin-y: 0;
    -o-transform-origin-z: 0;
	-o-transition: -o-transform .21s;

    -transform: translate3d(0px,0px,0px) perspective(56px) rotateX(0deg);
    -transform-origin-x: 14;
    -transform-origin-y: 0;
    -transform-origin-z: 0;
	-transition: -transform .21s;

    transform: translate3d(0px,0px,0px) perspective(56px) rotateX(0deg);
    transform-origin-x: 14;
    transform-origin-y: 0;
    transform-origin-z: 0;
	transition: transform .21s;

    position:relative;
    z-index:100;
  
	background: rgb(149,149,149); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}

.Tracks .steps li.on{
	background: rgb(54,226,60); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(54,226,60,1) 0%, rgba(21,84,26,1) 46%, rgba(10,51,10,1) 50%, rgba(12,45,10,1) 53%, rgba(30,76,24,1) 76%, rgba(17,53,18,1) 87%, rgba(11,43,16,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,226,60,1)), color-stop(46%,rgba(21,84,26,1)), color-stop(50%,rgba(10,51,10,1)), color-stop(53%,rgba(12,45,10,1)), color-stop(76%,rgba(30,76,24,1)), color-stop(87%,rgba(17,53,18,1)), color-stop(100%,rgba(11,43,16,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(54,226,60,1) 0%,rgba(21,84,26,1) 46%,rgba(10,51,10,1) 50%,rgba(12,45,10,1) 53%,rgba(30,76,24,1) 76%,rgba(17,53,18,1) 87%,rgba(11,43,16,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(54,226,60,1) 0%,rgba(21,84,26,1) 46%,rgba(10,51,10,1) 50%,rgba(12,45,10,1) 53%,rgba(30,76,24,1) 76%,rgba(17,53,18,1) 87%,rgba(11,43,16,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(54,226,60,1) 0%,rgba(21,84,26,1) 46%,rgba(10,51,10,1) 50%,rgba(12,45,10,1) 53%,rgba(30,76,24,1) 76%,rgba(17,53,18,1) 87%,rgba(11,43,16,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(54,226,60,1) 0%,rgba(21,84,26,1) 46%,rgba(10,51,10,1) 50%,rgba(12,45,10,1) 53%,rgba(30,76,24,1) 76%,rgba(17,53,18,1) 87%,rgba(11,43,16,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36e23c', endColorstr='#0b2b10',GradientType=0 ); /* IE6-9 */
 }

.Tracks .steps li.off:hover {
	background: rgb(224,157,49); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(224,157,49,1) 0%, rgba(81,65,22,1) 46%, rgba(51,41,10,1) 50%, rgba(43,38,9,1) 53%, rgba(73,56,22,1) 76%, rgba(51,37,17,1) 87%, rgba(40,32,10,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,157,49,1)), color-stop(46%,rgba(81,65,22,1)), color-stop(50%,rgba(51,41,10,1)), color-stop(53%,rgba(43,38,9,1)), color-stop(76%,rgba(73,56,22,1)), color-stop(87%,rgba(51,37,17,1)), color-stop(100%,rgba(40,32,10,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(224,157,49,1) 0%,rgba(81,65,22,1) 46%,rgba(51,41,10,1) 50%,rgba(43,38,9,1) 53%,rgba(73,56,22,1) 76%,rgba(51,37,17,1) 87%,rgba(40,32,10,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(224,157,49,1) 0%,rgba(81,65,22,1) 46%,rgba(51,41,10,1) 50%,rgba(43,38,9,1) 53%,rgba(73,56,22,1) 76%,rgba(51,37,17,1) 87%,rgba(40,32,10,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(224,157,49,1) 0%,rgba(81,65,22,1) 46%,rgba(51,41,10,1) 50%,rgba(43,38,9,1) 53%,rgba(73,56,22,1) 76%,rgba(51,37,17,1) 87%,rgba(40,32,10,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(224,157,49,1) 0%,rgba(81,65,22,1) 46%,rgba(51,41,10,1) 50%,rgba(43,38,9,1) 53%,rgba(73,56,22,1) 76%,rgba(51,37,17,1) 87%,rgba(40,32,10,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e09d31', endColorstr='#28200a',GradientType=0 ); /* IE6-9 */
	
	border:1px solid #FFB238;

	-webkit-box-shadow: 0px 10px 31px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 31px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 10px 31px 0px rgba(0,0,0,0.75);

	-webkit-transform: translate3d(0px,0px,0px) perspective(66px) rotateX(20deg);
	-moz-transform: translate3d(0px,0px,0px) perspective(66px) rotateX(20deg);
	-o-transform: translate3d(0px,0px,0px) perspective(66px) rotateX(20deg);
	-transform: translate3d(0px,0px,0px) perspective(66px) rotateX(20deg);
	transform: translate3d(0px,0px,0px) perspective(66px) rotateX(20deg);

    z-index:200;
}


.Track .steps ul li {
	font-family:'exo_2.0black';
	position:relative;
	display:inline-block;
	text-align:center;
	padding:0;
	margin:0px;
	background-color:#cacaca;
	border-radius:2px;
	color:white;
	position:relative;
	cursor:pointer;
	vertical-align:middle;
	padding:0px;
	margin-right:2px;
	width:28px;
	height:32px;
	border:1px solid transparent;
	line-height:34px;	
	border:1px solid #555555;
}

.Track .steps ul li.on {
	border:1px solid #00ff00;
}

.Track .steps ul li.disabled {
	pointer-events:none;
	cursor:default;
	background-color:#8a8a8a;
	opacity:.3;
}
.Track .steps ul li.copyon {
	pointer-events:none;
	cursor:default;
	opacity:.6;
	background: rgb(54,226,60); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(54,226,60,1) 0%, rgba(21,84,26,1) 46%, rgba(10,51,10,1) 50%, rgba(12,45,10,1) 53%, rgba(30,76,24,1) 76%, rgba(17,53,18,1) 87%, rgba(11,43,16,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,226,60,1)), color-stop(46%,rgba(21,84,26,1)), color-stop(50%,rgba(10,51,10,1)), color-stop(53%,rgba(12,45,10,1)), color-stop(76%,rgba(30,76,24,1)), color-stop(87%,rgba(17,53,18,1)), color-stop(100%,rgba(11,43,16,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(54,226,60,1) 0%,rgba(21,84,26,1) 46%,rgba(10,51,10,1) 50%,rgba(12,45,10,1) 53%,rgba(30,76,24,1) 76%,rgba(17,53,18,1) 87%,rgba(11,43,16,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(54,226,60,1) 0%,rgba(21,84,26,1) 46%,rgba(10,51,10,1) 50%,rgba(12,45,10,1) 53%,rgba(30,76,24,1) 76%,rgba(17,53,18,1) 87%,rgba(11,43,16,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(54,226,60,1) 0%,rgba(21,84,26,1) 46%,rgba(10,51,10,1) 50%,rgba(12,45,10,1) 53%,rgba(30,76,24,1) 76%,rgba(17,53,18,1) 87%,rgba(11,43,16,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(54,226,60,1) 0%,rgba(21,84,26,1) 46%,rgba(10,51,10,1) 50%,rgba(12,45,10,1) 53%,rgba(30,76,24,1) 76%,rgba(17,53,18,1) 87%,rgba(11,43,16,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36e23c', endColorstr='#0b2b10',GradientType=0 ); /* IE6-9 */
}

.Track .container {
	display:inline-block;
	position:relative;
	vertical-align:middle;
}

.Track .container .buttons {
	display:block;
	
}

.Track .container .buttons .selectsteps {
	display:inline-block;
}

.Track .container .buttons .remove {
	margin-right:10px;
	margin-top:5px;
	float:right;
}

.Track .container .buttons .mute {
	margin-left:10px;
}

button.on {
	background-color:#00c010;
	color:black;
}

.Track .viewport {
	position:relative;
	vertical-align		: middle;
	display			: inline-block;
	position		: relative;
	width			: 70px;
	height			: 70px;
	background-color	: #cacaca;
	padding			: 5px;
	margin			: 5px;
	border-radius		: 5px;
}

.Track .name {
	display			: block;
	vertical-align		: middle;
	position		: relative;
	font-size		: 16px;
}

.Track .selectsteps {
	display:block;
	margin-top:5px;
}

.Track .selectsteps button {
	display:inline-block;
}


/*____________________________________________________________*/

.KnobView {
	position: absolute;
	top:20px;
	background-color:#5A6B82;
	padding:5px;
	border-radius:5px;
	z-index:300;
	border:2px solid #cacaca;

	-webkit-box-shadow: 0px 10px 31px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 31px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 10px 31px 0px rgba(0,0,0,0.75);
}

.Knob {
	position:relative;
	width	: 50px;
	height	: 50px;
	display:inline-block;
	background-color:#5B82B5;
	border-radius:27px;
	border:2px solid black;
	cursor:ns-resize;
	z-index:300;

	background: rgb(25,107,142); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(25,107,142,1) 0%, rgba(42,176,237,1) 29%, rgba(228,245,252,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(25,107,142,1)), color-stop(29%,rgba(42,176,237,1)), color-stop(100%,rgba(228,245,252,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(25,107,142,1) 0%,rgba(42,176,237,1) 29%,rgba(228,245,252,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(25,107,142,1) 0%,rgba(42,176,237,1) 29%,rgba(228,245,252,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(25,107,142,1) 0%,rgba(42,176,237,1) 29%,rgba(228,245,252,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(25,107,142,1) 0%,rgba(42,176,237,1) 29%,rgba(228,245,252,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#196b8e', endColorstr='#e4f5fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.Knob img {
	position:absolute;
	top:0px;
	left:16px;
}

.KnobView .knobval {
	text-align:center;
}