/* 
    Document   : Ascension Synthesizer
    Created on : Oct 16, 2014
    Author     : Miika Luolajan-Mikkola
*/

@viewport{
    zoom: 1.0;
    width: device-width; /* | extend-to-zoom */
}
/* Necessary? */
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#grid {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
	/*zoom: 80%;*/
	touch-action: manipulation;

	background: rgb(65,74,91); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, rgba(65,74,91,1) 0%, rgba(1,1,34,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(65,74,91,1)), color-stop(100%,rgba(1,1,34,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(65,74,91,1) 0%,rgba(1,1,34,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(65,74,91,1) 0%,rgba(1,1,34,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(65,74,91,1) 0%,rgba(1,1,34,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(65,74,91,1) 0%,rgba(1,1,34,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414a5b', endColorstr='#010122',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	color: #f1f1f1;
	/*
	background-image:-moz-linear-gradient(top, #232340, #010101);
	background-image:-ms-linear-gradient(top, #f1f1f1, #010101);
	background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#010101));
	background-image:-webkit-linear-gradient(top, #f1f1f1, #010101);
	background-image:-o-linear-gradient(top, #f1f1f1, #010101);
	background-image:linear-gradient(top, #f1f1f1, #010101);
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ee00', endColorstr='#009900', GradientType=0);
	*/
}

button {
	cursor: pointer;
	touch-action: manipulation;
}

/* Table view this is, remember
.container-fluid {
	width: 100%;
	background-image:-moz-linear-gradient(left, #232340, #010101);
	background-image:-ms-linear-gradient(left, #232340, #010101);
	background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#232340), to(#010101));
	background-image:-webkit-linear-gradient(left, #232340, #010101);
	background-image:-o-linear-gradient(left, #232340, #010101);
	background-image:linear-gradient(left, #232340, #010101);
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#232340', endColorstr='#010101', GradientType=0);
}
/**/
#wrap	{ 
	width:100%; 
	text-align:center;
}
#center { 
	margin:0 auto; 
	padding:0; 
	width:100%; 
	/*position:relative; */
}
#header {
	width: 1220px;
	height:79px;
	border: none;
	background-position: 0px 0px;
	opacity: 0.7;
}

h1, h2, h3, h4 { 
	/*font-family: Georgia; */

	font-family: 'Orbitron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	/*font-family: 'Titillium Web', sans-serif;
	font-family: 'Play', sans-serif;
	font-family: 'Great Vibes', sans-serif;
	font-family: 'Exo 2', sans-serif;
	font-family: 'Dancing Script', cursive;
	font-family: 'Architects Daughter', cursive;
	font-family: 'Orbitron', sans-serif;
	font-family: 'Cinzel', serif;
	font-family: 'Pinyon Script', cursive;
	/**/
	color: #f1f1f1; 
	line-height: 1.4em; 
	vertical-align: middle; 
	margin: 10px;
	/*font-size: 18px;/**/
	
	float: left;
	display: inline;
	/**/
}

#settings {
	position: absolute;
	top: 100px;
	left: 70px;
	text-align: left;	
}

#settings .button {
	background: none;
	text-decoration: none;
	color: #c3c3c3;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 9px 15px;
	text-align: center;
	box-shadow: none;
	border: 2px solid #c1c1c1;
}

#return {
	float: right;
	display: inline;
	/*margin: 10px -110px;*/
	margin: 10px;
}

#return .button {
	background: none;
	color: #c3c3c3;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 9px 15px;
	outline: none;
	border: 2px solid #c1c1c1;
}

#donate {
	float: right;
	display: inline;
	margin: 20px 6px;
}

#donate a {
	border: 2px solid;
	padding: 7px 17px;
	background: none;
	width: 85px;
	/*margin-left: 45px;*/
	color: #d3d3d3 !important;
}

#donate a:hover {
	color: #f1f1f1 !important;
}

#fb {
	float:right;
	display: inline;
	margin-top: 20px;
	margin-right: 20px;
	/*margin: 20px -50px 0px 85px;*/
}

#fb a {
	border: 2px solid;
	padding: 7px 14px;
	color: #a1a1a1 !important;
}
#fb a:hover { color: #f1f1f1 !important; }


ul li { list-style-type: none; }


.clear { clear: both; width: 0px; height: 0px !important; }



.rotateRight {
	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
}

.rotateLeft {
	-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg); /* IE 9 */
}
/*
.skewRight {
	transform: rotate(0deg) scale(1) skew(45deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(45deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(45deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(45deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(45deg) translate(0px);
}

.skewLeft {
	transform: rotate(0deg) scale(1) skew(-45deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(-45deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(-45deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(-45deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(-45deg) translate(0px);
}
*/



#synthesisControls {
	float: left;
	display: inline;
	/*margin: -50px 0px 0px 95px*/; /* top used to be -50px */
	margin: 0px;
	width: 345px;
	/*
	position: relative;
	top: 10px;
	right: 230px;
	*/
}

.wsControls {
	height: 60px;
	margin-left: 20px;
	margin-bottom: 0px;
	float: left;
	display: inline;
	display: table;
	text-align: center;
}

/* Text input of synthesis control input */
.wsControls input {
	touch-action: manipulation;
	position: static;
}
/**/

.wsControls h3 {
	margin: 0px;
	padding: 0px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.wsControls h4 {
	width: 60px;
	text-align: left;
}

.wsBtnWrap {
	float: left;
	display: inline;
	margin: 0px 0px 13px 3px;
	width: 57px;
	height: 57px;
}

.wsBtnWrap.disabled {
	opacity: 0.4;
}

.wsBtnWrap input, span {
	touch-action: manipulation;
	color: #22cc22;
	color: #616181;
	text-align: center;
}

.wsBtnWrap.emptySlot {
	display: block;
	width: 80px;
	margin-left: 0px;
}


.wsBtnWrap .fxWrap {
	float: left;
	display: inline;
	margin-right: 6px;
	width: 50px;
	text-align: center;
}

.wsBtnWrap .ctrl_button {
	touch-action: manipulation;
	display: block;
	margin: 5px 8px 0px 0px;
	/*padding: 5px 8px !important;*/
}

.activeParam {
	width: 164px;
	height: 164px;
	display: block;
	background-color: #010133;
	border-color: #f1f1f1;
	opacity: 0.9;
	/*top: 100px;
	left: 15%;*/
}
.activeParam span {
	display: block;
	width: 30px;
	margin-top: 37px;
	margin-left: 40%;
}


#scrollBar {
	overflow-x: hidden;
	background-color: #121233;
	opacity: 0.1;
	float: left;
	display: inline;
	width: 45px;
	height: 935px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	opacity: 0.5;
	margin-left: 5px;
}


/* Keyboard modes, Tempering modes, Sequence modes etc here. */
 #controlArea {
	display: block;
	text-align: left;
	margin: 0px 0px 0px 25px;
	padding: 0px;
	opacity: 0.9;

	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	
	text-align: left;
	background-color: #010122;
	padding: 15px;

	font-size: 11px;
	line-height: 1em;
}


#controlArea label { margin-right: 2px; color: #c3c3c3; }
#controlArea input { width: 96px; text-align: right; }

#controlArea input.ctrl_button, .ctrl_button {

	text-align: left;
	width: 54%;

	background-image:-moz-linear-gradient(top, #2244cc, #112288);
	background-image:-ms-linear-gradient(top, #2244cc, #112288);
	background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#2244cc), to(#112288));
	background-image:-webkit-linear-gradient(top, #2244cc, #112288);
	background-image:-o-linear-gradient(top, #2244cc, #112288);
	background-image:linear-gradient(top, #2244cc, #112288);
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2244cc', endColorstr='#112288', GradientType=0);

	cursor: pointer;
	padding: 5px 15px;
	/*background: #2244cc;*/
	color: #888888 !important;
	/*border: 1px solid #012201;*/
	border: 1px solid #818181;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
	box-shadow: 0 0 4px rgba(0,0,0, .75);
	
	font-size:1.1em;
	
}

#controlArea select {
	width: 144px;
	text-align: left;

}

#controlArea #seq_start_stop {
	background-color: #113411;
}



#solfeggio_main {
	overflow: hidden;
	width: 1220px;
	margin: 0 auto; 
	padding: 0;
	opacity: 1;

	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;

	-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	/*box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);*/
}


#solfeggio_main #grid {

	float:left;
	display: inline;
	z-index: 9;
	/*width: 816px;  sq(64^2)x2)*9 */
	/*width: 580px; /* 64*9 */
	background-image: url('../images/curve.png');
	background-position: -40px -102px;
	/*background-image: url('../images/geokone_export.png');
	background-position: -27px -27px;*/
	opacity: 0.9;
	/*width: 522px;
	height: 522px;*/
	width: 560px;
	height: 560px;

	/*margin: -40px 0px 0px 126px;*/
	margin: 0px;
	position: relative;
	top: 50px;
	right: 110px;
	border: 9px solid #010124;
	/*border: 9px solid #828282;*/

	/* -45° as the Flower of Life should be presented */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg); /* IE 9 */

    -webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
}

#grid #gridWrapper {
	margin: 0;
	padding: 0;
	/*background-image: url('../images/ds2.png');
	background-position: 29px -29px;
	background-repeat: no-repeat;
	/**/
}

.freqButton {
	background-image: url('../images/curve.png');
	/*background-image: url('../images/geokone_export.png');*/
	opacity: 0.9;

	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	/*color: #c3c3c3;*/
	/*color: #a5a5a5;*/
	/*background-color: #010122;*/
	/*border: 1px solid transparent;*/
	/*border-bottom: 1px solid #010133; */
	float: left;
	display: inline;
	width:56px; 
	height: 56px; 
	line-height: 54px; 
	text-align: center; 
	vertical-align: middle; 
	margin:0px; 
	padding:0px;
	/*z-index: 999;*/
}

.freqButton:hover {
	/*
	border: 1px solid rgb(36%, 119%, 163%);
	cursor: pointer;
	/**/
}

.freqButton a {
	display: block;
	background-image: no-repeat url('../images/curve.png');/**/
	opacity: 1;
	color: #a5a5a5;
	display: block;
	
	/*position: relative;*/
	z-index: 888;
	
	border: 1px solid #010122;

	padding: 0;

	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

	-webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /**/
}
.freqButton a:hover {
	border: 1px solid rgb(36%, 119%, 163%);
	cursor: pointer;
	text-decoration: none;
	/*
	-webkit-border-radius:13px;
	-moz-border-radius:13px;
	border-radius:13px;
	*/
}
.freqButton a span {
	color: #ffffff;
	display: block;
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}


.cosmic_success {
	background-color: #332211;
	height: 40px !important;
}

/*#solfeggio_main #controlArea input.ctrl_button:hover, 
#solfeggio_main #controlArea input.ctrl_button:focus,
#solfeggio_main #controlArea input.ctrl_button.active*/
.ctrl_button:hover, 
.ctrl_button:focus,
.ctrl_button.active {
	text-decoration: none;
	/*border-color: #007722 !important;*/
	border-color: #ffffff !important;
	color: #f1f1f1 !important;
	background-color: #013301; /*make the background a little darker*/
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}



#bonus {
	-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */

	position: relative;
	top: -145px;
	left: -320px;
}
#bonus a, #bonus span {
	-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg); /* IE 9 */
}

#copyright {
	position: relative;
	top: 0px;
	left: -45px;
	color: #818181;
	/*float: right;
	display: inline;*/
	margin: 0px 10px;
	padding-bottom: 80px;
}

.clearfix { width: 0px; }


.modal {
	
}

.modal div {
	/*margin: 0% 50%;Ä*/
	text-align: center;
}

.modal h3 { 
	float: none; 
	display: block; 
	margin-top: 20px; 
	padding-top: 20px; 
	color: #010133; 
}

.modal p {
	padding: 0px 10px;
	color: #010133;
}


#waveshaper {
	/*display: none;*/
	height: 0px;
	overflow: hidden;
	width: 315px;
	margin-left: 28px;
	/*left: 300px;*/
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

#osc {
	height: 256px;
	background-color: #010133;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

.oscilloscope__wave {
	fill: none;
    stroke: #f1f1f1;
    stroke-width: 2px;
}

#coefficients {
	float: left;
	display: inline;
	margin-left: 25px;
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 90px;
    padding: 0 5px;
}

#fftBtn {
	float: left;
	display: inline;
	margin-left: 15px;
}

#fftBtn input {
	width: 55px;
	background-color: #010133;
	color: #f1f1f1;
}

#synthParams {
	padding-top: 8px;
}




#docWrap {
	width: 600px;
}

#docHeader {
	text-align: left;
	margin: 15px;
}

#docTopics {
	margin: 0px;
	width: 150px;
	float: left;
	display: inline;
	text-align: left;
}

#docTopics a {
	display: block;
	margin-top: 10px;
	font-size: 16px;
}

#docTopics a:hover {
	cursor: pointer;
}

#docDetails {
	margin: 0px 0px;
	width: 400px;
	float: left;
	display: inline;
	text-align: left;
}

#docDetails h1, #docDetails h2, #docDetails h3 {
	float: none;
	display: block;
}

#docDetails p {
	margin: 15px;
}

@media only screen and (max-width: 420px) {
  body {
    background-color: lightblue;
  }
}