@charset "UTF-8";
/* CSS Document */
#intervals_container
{
	 width:96%;
}
.root_key
{
	width:39px;
	height:177px;
	background-color:#E94B5A;
	border:solid thin;
	float:left;
	margin-top:53px;
}
.white_key
{
	width:39px;
	height:177px;
	background-color:#FFF;
	border:solid thin;
	float:left;
	margin-top:53px;

}
.white_key:hover
{
	background-color:#09F;
}
.white_key_greyed
{
	width:39px;
	height:177px;
	background-color:#FFF;
	border:solid thin;
	float:left;
	margin-top:53px;
	opacity:0.3;
}
.white_key, .root_key, .white_key_greyed
{
	font-size:25px;
	line-height:320px;
	text-align:center;
	cursor:default;
}
.black_key:hover
{
	background-color:#09F;
}
.white_key:active, .black_key:active
{
	background-color:#700017;
	color:#FFF;
	border:#000 solid thin;
}
.black_key
{
	width:19px;
	height:120px;
	background-color:#000;
	border:solid thin;
	float:left;
	margin:10px;
	pointer-events:auto;
}
.black_key_greyed
{
	width:19px;
	height:120px;
	background-color:#000;
	border:solid thin;
	float:left;
	margin:10px;
	float:left;
}
#lh_box
{
	float:left;
	width:35%;
	height:400px;
	background-color:#FFF;
}
#rh_box
{
	float:right;
	width:65%;
	height:400px;
	background-color:#FFF;
}
.black_hidden
{
	width:19px;
	height:120px;
	background-color:transparent;
	border:solid thin;
	float:left;
	margin:10px;
	pointer-events:auto;
	border:0;
}
a.button:hover
{
	cursor:default;
}
.currently_selected_key
{
	background-color:#09F;
}
#interval_name, #interval_image
{
	float:left;
}
.interval_grid_image
{
	float:left;
	width:190px;
	height:115px;
}
.interval_image_container
{
	width:190px;
	height:115px;
	background-color: #333333;
	float:left;
	padding:15px;
	opacity:1;
}

.interval_grid_image:hover
{
	opacity:0.5;
	cursor:default;
}
.overlay_interval_text
{
	position:absolute;
	font-size:26px;
	margin-top:20px;
	margin-left:10px;
	color:#FFF;
}
#toggle
{
	position:relative;
	margin-left:60%;
	width:40%;
	margin-top:0;
}
#keyboard_outer_container
{
	height:276px;
	background-color:#333333;
	padding-right:15%;
	padding-left:5%;
}
#keyboard_inner_container_white
{
	width:619px;
	height:180px;
	background-color:#333333;
	position:absolute;
	margin-left:auto;
	margin-right:auto;
}
#keyboard_inner_container_black
{
	width:700px;
	height:180px;
	margin-left:0px;
	margin-top:43px;
	margin-left:-16px;
	position:absolute;
	pointer-events:none;
}

#05_augmented_fourth
{
	margin-left:12px;
}
#play_ascending, #play_descending
{
	font-size:24px;
	width:auto;
	padding:5px;
	opacity:0.3;
}
.play_buttons_clicked
{
	opacity:1 !important;
}
#intervals_all_button
{
	font-size:24px;
	width:auto;
	padding:5px;
}
/*VIEW ALL PAGE*/
#intervals_all_container
{
	width:670px;;
}