* { margin: 0; padding: 0; border: 0; 

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
         box-sizing: border-box;

		-webkit-appearance: none;
		
		-webkit-text-size-adjust: none;
		
			
}

a:active, a:focus { outline-style: none; -moz-outline-style:none; }
/*

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}
*/

:focus {
    outline: 0;
}

::selection {
	background: #42d4f7; 
	}
::-moz-selection {
	background: #42d4f7; 
}


html {		
					margin:				0;
					padding:			0;
					width:				100%;
					height: 			100%;
					overflow-y: 		scroll;
					font-family: 		Arial,Helvetica,Georgia,Courier;
					font-weight: 		normal;
}
 
body {
					margin:				0;
					padding:			0;
					width:				100%;
					height: 			100%;
					font-size:			14px;
					line-height:		16px;
					font-weight: 		normal;
					
					text-align:			left;
					
					color:				#3c3c3c; 
					
					background: 		#ffffff;
					
					
					overflow: auto;
					
				
}


	


a{
	text-decoration:	none;
	color: #22b4f7;
}

a:hover{
	color: #000000;
	
}




.c1{
	color: #0079c2;
	font-size: 50px;
	line-height: 50px;
	font-weight: 100;
}


.c2{
	color: #7900c2;
	font-size: 50px;
	line-height: 50px;
	font-weight: 100;
}

#wrap {
	position:			relative;
    
	min-height: 550px;
    height: 550px;
    
    margin: 0 auto 0px; 
	
	
	min-width: 		940px;
	width:			940px;
	
	border: 0px dotted #999999;
	border-top: 0px dotted #999999;
	border-bottom: 0px dotted #999999;
	
	
	background:		 	#ffffff;
	
	overflow:			hidden;
    }

	

#footer {
	position:			absolute;
	height:				32px;
	left:				0px;
	right:				0px;
	bottom:				0px;
	padding: 			0px;
	
	font-size:			12px;
	font-weight:		normal;
	line-height:		32px;
	color:				#000000;
	text-align: 		center;
	background: 		#ffffff;
	}



#footer a{
	color: 				#ffffff;
	text-decoration:	none;
}
#footer a:hover{
	color: 				#22b4f7;
}

.padin{
	padding: 0px 10px;
}

#top{
	position: relative;
	
	height: 	60px;
	
	margin: 0px auto;
	
	
	color:				#000000;
	text-align: 		center;
	background: 		#ffffff;
}



.rem{
	float: 				right;
	margin: 			2px 12px 0px 0px;
	font-weight: 		normal;
	width: 				70px;
	height: 			54px;
	font-size: 			14px;
	line-height: 		15px;
	border-left: 		1px dotted #000000;
	text-align:			left;
	font-family:		'Times new roman';
}





.title{
	position: absolute; 
	left: 0px; 
	right: 0px; 
	line-height: 60px; 
	font-size: 20px; 
	color: #000000;
	font-weight: normal;
	font-family: Arial,Georgia;
}

.about_back{
	position:	absolute;
	left:		0px;
	top:		0px;
	width:		100%;
	height:		100%;
	opacity: 0.8;
    filter: alpha(opacity = 80);
    background: #000000;
    z-index:	5000;
    visibility: visible;
}
.about{
	position:	absolute;
	background:	 #ffffff;
	left:	80px;
	top:	20px;
	width:	780px;
	height:	510px;
	z-index:	5000;
	color: 	#3c3c3c;
	font-size:	12px;
	line-height:	14px;
	font-weight: 100;
	overflow: auto;
}
#about_container{
	position:	absolute;
	left:	0px;
	top:	0px;
	width:	100%;
	height:	100%;
	display:	none;
	z-index:	5000;
}




.scene{
	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: #ffffff;
	
	
	-webkit-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	-moz-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	
	overflow: hidden;
}

.overback{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0.8;
    filter: alpha(opacity = 80);
    background: #ffffff;
}

#arrow-left{
	position: absolute;
	left: 0px;
	top: 270px;
	cursor: pointer;
	opacity: 0.8;
	filter: alpha(opacity = 80);
	visibility: visible;
}

#arrow-right{
	position: absolute;
	right: 0px;
	top: 270px;
	cursor: pointer;
	opacity: 0.8;
	filter: alpha(opacity = 80);
	visibility: visible;
}

.minuet_circle{
	position: absolute; 
	opacity: 0.8;
	filter: alpha(opacity = 80);
	
}

.minuet_circlein{
	position: absolute; 
	text-align: center;
	padding: 0px 20px 0px 20px;
}

#gohome{
	position: absolute;
	left: 20px;
	top: 70px;
	cursor: pointer;
	opacity: 1.0;
	filter: alpha(opacity = 100);
}

#gohome:hover{
	opacity: 0.5;
	filter: alpha(opacity = 50);
}



.minuet_scene{
	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: url(../jpg/back.jpg);
	
	
	-webkit-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	-moz-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	
	overflow: hidden;
}


.minuet_scene2{
	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: url(../jpg/back2.jpg);
	
	
	-webkit-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	-moz-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	
	overflow: hidden;
}

.minuet_scene3{
	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: url(../jpg/back3.jpg);
	
	
	-webkit-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	-moz-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	
	overflow: hidden;
}

.minuet_parttitle{
	font-size: 48px;
	line-height: 54px;
	color: #287dbd;
	text-align: center;
	margin: 50px 0px 10px 0px;
	font-weight: bold;
}

.minuet_slot{
	position: absolute;
	width: 92px;
	height: 73px;
}
.minuet_slot_mask{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 92px;
	height: 73px;
	overflow: hidden;
}
.minuet_slot_in{
	position: absolute;
	left: 0px; 
	top: 0px;
	width: 92px;
	height: auto;
}
.minuet_slot img{
	display: block;
}

.minuet_slot_arrow_up{
	position: absolute; 
	left: 31px; 
	cursor: pointer;
	opacity: 1.0;
	filter: alpha(opacity = 100);
}

.minuet_slot_arrow_up:hover{
	opacity: 0.5;
	filter: alpha(opacity = 50);
}

.minuet_slot_arrow_dw{
	position: absolute; 
	left: 31px; 
	cursor: pointer;
	opacity: 1.0;
	filter: alpha(opacity = 100);
}

.minuet_slot_arrow_dw:hover{
	opacity: 0.5;
	filter: alpha(opacity = 50);
}

.minuet_slot_list{
	position:	absolute;
	left: 		0px;
	top:		0px;
	width:		92px;
	height:		auto;
}

.minuet_speaker_h{
	position: absolute; 
	left: 18px; 
	bottom: -90px; 
	cursor: pointer; 
	display: none;
	}

.minuet_speaker_n{
	position: absolute; 
	left: 18px; 
	bottom: -90px; 
	cursor: pointer; 
	display: block;
	}
	
.minuet_partitura{
	position: relative;
	display: block;
	width: 700px;
	height: 220px;
	background: #ffffff;
	border: 5px solid #57c1da;
	margin:	30px auto 40px auto;
}

.minuet_bigpart{
	position: absolute; 
	width: 78px;
	height: 72px;
	overflow: hidden;
}

.minuet_speaker_h2{
	position: absolute; 
	left: 50%; 
	margin-left: -28px;
	bottom: -36px; 
	cursor: pointer; 
	display: none;
}

.minuet_speaker_n2{
	position: absolute; 
	left: 50%;
	margin-left: -28px;
	bottom: -36px; 
	cursor: pointer; 
	display: block;
}
	
.minuet_home{
	font-size:	48px;
	line-height: 54px;
	color: #287dbd;
	
}

.minuet_btdw{
	position: absolute;
	height: 40px;
	width: 280px;
	top: -40px;
	margin: 0px 4px;
	padding: 0px 0px 0px 50px;
	background: #57c1da;
	color: #ffffff;
	font-size: 14px;
	line-height: 40px;
	cursor: pointer;
	opacity: 1.0;
	filter: alpha(opacity = 100);
}

.minuet_btdw:hover{
	opacity: 0.8;
	filter: alpha(opacity = 80);
}

.minuet_btdw img{
	position: absolute;
	left: 10px;
	top: 12px;
}

.minuet_btdw_content{
	margin: 0px 0px 0px 0px; 
	padding: 20px 20px; 
	background: #57c1da; 
	display: block;
	opacity: 0.0;
	filter: alpha(opacity = 0);
}

#minuet_dbalc{
	position: absolute;
	left: 0px;
	right: 0px;
	height: auto;
	bottom: 0px;
	display: none;
	
}

#minuet_csum{
	position: absolute;
	left: 0px;
	right: 0px;
	height: auto;
	bottom: 0px;
	display: none;
}

#minuet_partituraoffset{
	display: none;
	position: absolute;
	left: 200px;
	top: 30px;
	width: 10px;
	height: 70px;
	background: #57c1da;
	opacity: 0.8;
	filter: alpha(opacity = 80);
}


.instruments_scene{
	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: url(../jpg/back-2.jpg);
	
	
	-webkit-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	-moz-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	
	text-align: center;
	overflow: hidden;
}

.instruments_scene2{
	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: url(../jpg/backlight.jpg);
	
	
	-webkit-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	-moz-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	
	text-align: center;
	overflow: hidden;

}


.instruments_scene3{

	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: #eeeeee;
	
	text-align: left;
	overflow: hidden;	
	z-index: 1000;
}

.instruments_floating{
	position: absolute;
	
}

.instruments_scrtitle{
	font-size: 48px;
	font-weight: bold;
	line-height: 52px;
	color: #287dbd;
	margin: 20px 0px 10px 0px;
}

.instruments_scrsubtitle{
	font-size: 20px;
	font-weight: bold;
	line-height: 24px;
	color: #287dbd;
	margin: 40px 0px 10px 0px;
}

.instruments_frasco{
	position: absolute;
	cursor: pointer;
	z-index: 100;
}

.instruments_audio{
	position: absolute;
	z-index: 300;
}

.instruments_audio div{
	position: absolute;
	left: 0px; 
	top: 0px;
	height: 100%;
	width: 0px;
	overflow: hidden;
}

.instruments_instru{
	position: absolute;
	cursor: pointer;
	z-index: 200;
}

.instruments_iname{
	position: absolute;
	z-index: 400;
}

.instruments_iname2{
	position: absolute;
	cursor: pointer;
}

.instruments_select{
	position: absolute;
	font-size: 10px;
}

.instruments_select img{
	position: absolute; 
	left: -20px; 
	top: 0px;
	cursor: pointer;
}

.instruments_msgbox{
	position: absolute;
	left: 0px; 
	top: 451px;
	right: 0px;
	height: auto;
	padding: 20px;
	background: #f2b810;
	text-align: left;
	z-index: 500;
}

.instruments_msgbox p{
	position: absolute; 
	top: -40px; 
	width: 300px; 
	height: 40px; 
	line-height: 40px; 
	color: #ffffff; 
	padding: 0px 0px 0px 30px; 
	background: #f2b810; 
	cursor: pointer;
	opacity: 1.0;
	filter: alpha(opacity = 100);
}

.instruments_msgbox p:hover{
	opacity: 0.8;
	filter: alpha(opacity = 80);
}

.instruments_msgbox p img{
	position: absolute; 
	/*left: 14px; */
	top: 10px;
}
	
.instruments_tabletitle{
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	line-height: 30px;
	height: 30px;
}

.instruments_namebox{
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	line-height: 30px;
	height: 152px;
	width: 208px;
	
}

.circularprogression{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: transparent;
}



.clarinets_scene{
	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	background: #f7f7f7;
	
	-webkit-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	-moz-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	
	text-align: center;
	overflow: hidden;
}


.clarinets_scene2{
	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: url(../jpg/back-3.jpg);
	
	
	-webkit-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	-moz-box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	box-shadow: 3px 3px 2px 0px rgba(200,200,200,1);
	
	text-align: center;
	overflow: hidden;
}

.clarinets_scene3{

	display: none; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	height: 452px; 
	width: 916px; 
	margin: 0px 12px;
	
	background: #eeeeee;
	
	text-align: left;
	overflow: hidden;	
	z-index: 1000;
}

.clarinets_popup{
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	font-size: 18px;
	line-height: 22px;
	text-align: center;
	padding: 60px 30px 0px 30px;
	display: none;
}

.clarinets_close{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 28px;
	height: 27px;
	background: url(../png/scr02-01.png);
	cursor: pointer;
	opacity: 1.0;
	filter: alpha(opacity = 100);
}

.clarinets_close:hover{
	opacity: 0.7;
	filter: alpha(opacity = 70);
	
}

.clarinets_popup h1{
	font-size: 32px;
	line-height: 40px;
	font-weight: bold;
	color: #333333;
}

.clarinets_popup h2{
	font-size: 24px;
	line-height: 30px;
	font-weight: normal;
	color: #333333;
}

.clarinets_button{
	display: inline-block;
	vertical-align: top;
	width: 250px;
	height: 70px;
	text-align: center;
	line-height: 70px;
	font-size: 24px;
	font-weight: normal;
	background: #fde7a1;
	color: #333333;
	cursor: pointer;
	margin: 0px 10px;
	-webkit-box-shadow: 8px 8px 5px 0px rgba(175,144,47,0.75);
	-moz-box-shadow: 8px 8px 5px 0px rgba(175,144,47,0.75);
	box-shadow: 8px 8px 5px 0px rgba(175,144,47,0.75);
}

.clarinets_button:hover{
	background: #fcd869;
	-webkit-box-shadow: 2px 2px 1px 0px rgba(175,144,47,0.75);
	-moz-box-shadow: 2px 2px 1px 0px rgba(175,144,47,0.75);
	box-shadow: 2px 2px 1px 0px rgba(175,144,47,0.75);
}


.clarinets_button_fake{
	background: #fcd869;
	-webkit-box-shadow: 2px 2px 1px 0px rgba(175,144,47,0.75);
	-moz-box-shadow: 2px 2px 1px 0px rgba(175,144,47,0.75);
	box-shadow: 2px 2px 1px 0px rgba(175,144,47,0.75);
}

.clarinets_just_hover {
	opacity: 1.0;
	filter: alpha(opacity = 100);
}

.clarinets_just_hover:hover{
	opacity: 0.7;
	filter: alpha(opacity = 70);
}