div#scaleGenLayout{
	position:relative;
    max-width:1060px;
	width:100%;
	background: linear-gradient(#000,#1e242a 40%,#000);
	border-radius: 10px;
	border:1px solid #111;
	border-top:none;
	margin:auto;
    padding-bottom:20px;
	text-align:center;
    transition: all ease-in-out 1s;
	/*box-shadow: 0px 0px 6px #000;*/
}
div#scaleGenLayout h2{
	font-size:1em;
	margin:0px;
	padding:10px;
	background:linear-gradient(#333,#333);
	border-radius:10px 10px 0px 0px;
	/*box-shadow:0px 2px 2px #000;*/
}


/*===============
Input
===============*/


div#scaleGenLayout select, div#scaleGenLayout button{
    position:relative;
	height:35px;
    color:#333;
	border-radius:4px;
	box-shadow:0px 2px 8px #000000;
    transition: all ease-in-out .2s;
}
div.modal-footer button{
	position:relative;
	height:35px;
    color:#333;
	box-shadow:0px 2px 4px #000000;
    transition: all ease-in-out .2s;
}

div#scaleGenLayout select option{
	font-weight:500;
}
div#scaleGenLayout button, div.modal-footer button{
	height:35px;
	background:linear-gradient(#999,#444);
	border:none;
	border-radius:4px;
	padding:0px 10px;
	color:#aee5ff;
}
div#scaleGenLayout button:hover, div.modal-footer button:hover{
	color:#d0f0ff;
}
div#scaleGenLayout select:active{
	box-shadow:0px 2px 8px #000000;
}
div#scaleGenLayout select:focus{
	outline: none;
}
div#scaleGenLayout button:active, div.modal-footer button:active{
	color:#ffffff;
	box-shadow:0px 2px 2px #000000;
}

div#scaleGenLayout #patternShow{
	position:relative;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
div#scaleGenLayout #patternSelect{
	position:relative;
	background:#000;
	width:95%;
	margin:auto;
	margin-bottom:60px;
}
div#scaleGenLayout #patternSelect h2#scaleCaption{
	font-size:14px;
	line-height:14px;
	font-weight:bold;
	color:#152f52;
	text-decoration: none;
}

#refresh:hover{
	transform: rotate(360deg);
	transition: all ease-in-out .8s;
}

.modal-title, .modal-body p{
	color:#666;
}

div#scaleGenLayout pre{
	background: transparent;
	border:none;
	margin:0 0 0 0;
	padding:1%;
}

ul.nav-tabs{
	background:transparent;
	margin-top:0;
	padding-bottom:0;
	border:none;
	float:right;
}
ul.nav-tabs li{
	background:linear-gradient(#333,#333);
	margin-bottom:-3px;
	padding-bottom:0;
	padding-top:0;
	border: 1px solid #181818;
	border-top:none;
	border-right:none;
	border-radius:0px 0px 10px 10px;
	opacity:60%;
}
ul.nav-tabs li.active{
	background:linear-gradient(#333,#333);
	opacity:100%;
}
ul.nav-tabs li:hover, ul.nav-tabs li:focus{
	border-radius:0px 0px 10px 10px;
	background: #333;
	opacity:100%;
}
ul.nav-tabs li.active:hover{
	background:linear-gradient(#333,#333);
	margin-bottom:-3px;
}
ul.nav-tabs li a{
	text-decoration: none;
	margin-bottom:0;
	border-radius:0px 0px 10px 10px;
	color:#d0f0ff;
}
ul.nav-tabs li a:hover, ul.nav-tabs li a:focus{
	background:linear-gradient(#333,#333);
	color:#fff;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover, ul.nav-tabs li.active a:focus, ul.nav-tabs li.active a:active{
	color:#ebebeb;
}
ul.nav-tabs li a:hover{
	background-color:transparent;
	border-color: transparent;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover, ul.nav-tabs li.active a:focus{
	background-color:transparent;
	text-decoration: none;
	border-color:transparent;
}
div.tab-content{
	width:100%;
	max-height:272px;
	min-height:130px;
	height:auto;
}

/*AUDIO CONTROL*/
#play, #loop {
	font-size:3.5em;
	color:#fff;
	opacity:50%;
	cursor:pointer;
	transition: all ease-in-out .4s;
}
#play:hover, #loop:hover, #loud:hover{
	color:#aee5ff;
	opacity:100%;
}

#play.nowPlay{
	color:#aee5ff;
	opacity:100%;
	transition: all ease-in-out .8s;
	text-shadow: 0px 0px 15px #e2f6ff;
	transform: rotate(-360deg);
}

#loop.loop-on{
	color:#aee5ff;
	opacity:100%;
	transition: all ease-in-out .8s;
	transform: rotate(-360deg);
}
#loud{
	position: relative;
	font-size:2.5em;
	color:#fff;
	opacity:50%;
	cursor:pointer;
	transition: all ease-in-out .4s;
	top:10px;
}
#loud.loudest{
	opacity:100%;
	color:#aee5ff;
	text-shadow: 0px 0px 15px #e2f6ff;
}
#loud.loud{
	opacity:80%;
	color:#aee5ff;
	text-shadow: 0px 0px 9px #e2f6ff;
}

#volume {
	position:relative;
	width:100%;
	color: #aee5ff;
	top:20px;
}


/* MOBILE */
@media only screen and (max-width:440px){
	select#rootNote, select#scaleSelect{
		width:100%;
		margin-top:5px;
		text-align: center;
	}
	div#scaleGenLayout button{
		width:100%;
	}
	
}