body {
    background-color: black;
    color: white;
    text-align: center;
    font-family: "Futura", fantasy;
}

#pantprinc {
	position: relative; 
	z-index: 0; 
	/*border: 1px solid white;*/
	width: 1200px; 
	height:600px; 
	margin: auto; 
	margin-top: 20px; 
}

#fondoEntrada {
	position: absolute;
	left: 0px; 
	top: 0px;
	width: 1000px; 
	height:600px; 
}

#portada1 {
	position: absolute;
	left: 400px; 
	top: 180px;
}

#portada2 {
	position: absolute;
	left: 370px; 
	top: 270px;
}

#portada3 {
	position: absolute;
	left: 750px; 
	top: 15px;
}

#creditos1 {
	position: absolute;
	left: 100px; 
	top: 180px;
}

#creditos2 {
	position: absolute;
	left: 100px; 
	top: 205px;
}

#creditos3 {
	position: absolute;
	left: 100px; 
	top: 265px;
}

#creditos4 {
	position: absolute;
	left: 100px; 
	top: 290px;
}

#dcreditos4 {
	position: absolute;
	left: 100px; 
	top: 300px;
	color: black;
}

#creditos5 {
	position: absolute;
	left: 100px; 
	top: 330px;
}

#creditos6 {
	position: absolute;
	left: 100px; 
	top: 355px;
}

.portada {
	opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

#boton1 {
	position: absolute;
	width: 122px;
	height: 23px;
	left: 550px; 
	top: 440px;
	border-radius: 4px;
	border: 2px solid rgb(10,10,10);
	color: rgb(10,10,10);
	font-size: 14px;
}

#entrar {
	position: absolute;
	width: 122px;
	height: 23px;
	left: 750px; 
	top: 470px;
	border-radius: 4px;
	border: 2px solid rgb(10,10,10);
	color: rgb(10,10,10);
	font-size: 14px;
}

#nombre {
	background-color: rgb(197,238,250);
	position: absolute;
	width: 300px;
	height: 23px;
	left: 450px; 
	top: 320px;
	border-radius: 4px;
	border: 2px solid rgb(10,10,10);
	color: rgb(10,10,10);
	font-size: 14px;
	text-align: center;
}

#codigo {
	background-color: rgb(197,238,250);
	position: absolute;
	width: 135px;
	height: 23px;
	left: 550px; 
	top: 380px;
	border-radius: 4px;
	border: 2px solid rgb(10,10,10);
	color: rgb(10,10,10);
	font-size: 14px;
	text-align: center;
}

#fondosupA {
	left: 291px; 
	top: 40px;
	position: absolute;
}

#fondosupB {
	left: 463px; 
	top: 130px;
	position: absolute;
}

#fondoinfA {
	left: 291px; 
	top: 456px;
	position: absolute;
}

#fondoinfB {
	left: 463px; 
	top: 363px;
	position: absolute;
}

#baseGrados {
	left: 370px; 
	top: 188px;
	height: 254px;
	position: absolute;
	opacity: 0.65;
    filter: alpha(opacity=65); /* For IE8 and earlier */
}

.grado {
	left: 340px; 
	position: absolute;
	opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

#grado1 {
	top: 415px;
}

#grado2 {
	top: 383px;
}

#grado3 {
	top: 351px;
}

#grado4 {
	top: 319px;
}

#grado5 {
	top: 287px;
}

#grado6 {
	top: 255px;
}

#grado7 {
	top: 223px;
}

#grado8 {
	top: 191px;
}

.g1 {
	position: absolute;
	left: 489px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-1 {
	top: 414px;
}

#grado2-1 {
	top: 382px;
}

#grado3-1 {
	top: 350px;
}

#grado4-1 {
	top: 318px;
}

#grado5-1 {
	top: 286px;
}

#grado6-1 {
	top: 254px;
}

#grado7-1 {
	top: 222px;
}

#grado8-1 {
	top: 190px;
}

.g2 {
	position: absolute;
	left: 528px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-2 {
	top: 414px;
}

#grado2-2 {
	top: 382px;
}

#grado3-2 {
	top: 350px;
}

#grado4-2 {
	top: 318px;
}

#grado5-2 {
	top: 286px;
}

#grado6-2 {
	top: 254px;
}

#grado7-2 {
	top: 222px;
}

#grado8-2 {
	top: 190px;
}

.g3 {
	position: absolute;
	left: 567px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-3 {
	top: 414px;
}

#grado2-3 {
	top: 382px;
}

#grado3-3 {
	top: 350px;
}

#grado4-3 {
	top: 318px;
}

#grado5-3 {
	top: 286px;
}

#grado6-3 {
	top: 254px;
}

#grado7-3 {
	top: 222px;
}

#grado8-3 {
	top: 190px;
}

.g4 {
	position: absolute;
	left: 606px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-4 {
	top: 414px;
}

#grado2-4 {
	top: 382px;
}

#grado3-4 {
	top: 350px;
}

#grado4-4 {
	top: 318px;
}

#grado5-4 {
	top: 286px;
}

#grado6-4 {
	top: 254px;
}

#grado7-4 {
	top: 222px;
}

#grado8-4 {
	top: 190px;
}

.g5 {
	position: absolute;
	left: 645px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-5 {
	top: 414px;
}

#grado2-5 {
	top: 382px;
}

#grado3-5 {
	top: 350px;
}

#grado4-5 {
	top: 318px;
}

#grado5-5 {
	top: 286px;
}

#grado6-5 {
	top: 254px;
}

#grado7-5 {
	top: 222px;
}

#grado8-5 {
	top: 190px;
}

.g6 {
	position: absolute;
	left: 684px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-6 {
	top: 414px;
}

#grado2-6 {
	top: 382px;
}

#grado3-6 {
	top: 350px;
}

#grado4-6 {
	top: 318px;
}

#grado5-6 {
	top: 286px;
}

#grado6-6 {
	top: 254px;
}

#grado7-6 {
	top: 222px;
}

#grado8-6 {
	top: 190px;
}

.g7 {
	position: absolute;
	left: 723px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-7 {
	top: 414px;
}

#grado2-7 {
	top: 382px;
}

#grado3-7 {
	top: 350px;
}

#grado4-7 {
	top: 318px;
}

#grado5-7 {
	top: 286px;
}

#grado6-7 {
	top: 254px;
}

#grado7-7 {
	top: 222px;
}

#grado8-7 {
	top: 190px;
}

.g8 {
	position: absolute;
	left: 762px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-8 {
	top: 414px;
}

#grado2-8 {
	top: 382px;
}

#grado3-8 {
	top: 350px;
}

#grado4-8 {
	top: 318px;
}

#grado5-8 {
	top: 286px;
}

#grado6-8 {
	top: 254px;
}

#grado7-8 {
	top: 222px;
}

#grado8-8 {
	top: 190px;
}

.g9 {
	position: absolute;
	left: 801px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-9 {
	top: 414px;
}

#grado2-9 {
	top: 382px;
}

#grado3-9 {
	top: 350px;
}

#grado4-9 {
	top: 318px;
}

#grado5-9 {
	top: 286px;
}

#grado6-9 {
	top: 254px;
}

#grado7-9 {
	top: 222px;
}

#grado8-9 {
	top: 190px;
}

.g10 {
	position: absolute;
	left: 840px; 
	border-radius: 100%;
	width: 29px;
	height: 29px;
}

#grado1-10 {
	top: 414px;
}

#grado2-10 {
	top: 382px;
}

#grado3-10 {
	top: 350px;
}

#grado4-10 {
	top: 318px;
}

#grado5-10 {
	top: 286px;
}

#grado6-10 {
	top: 254px;
}

#grado7-10 {
	top: 222px;
}

#grado8-10 {
	top: 190px;
}


#teclado {
	left: 300px; 
	top: 190px;
	width: 76px;
	height: 360px;
	position: absolute;
	opacity: 0.55;
    filter: alpha(opacity=55); /* For IE8 and earlier */
}

#fondoTeclado {
	left: 290px; 
	top: 170px;
	position: absolute;
}

#maskTeclado {
	left: 256px; 
	top: -10px;
	position: absolute;
}

#sombraGradop {
	position: absolute;
	left: 490px;
	top: 145px;
	width: 29px;
	height: 300px;
	display: none;
}

.gp {
	left: 955px; 
	top: 145px;
	position: absolute;
	display: none;
}

#maskPanelTons {
	left: 70px; 
	top: 160px;
	position: absolute;
}

#nuevosonido {
	left: 520px;
	top: 520px;
	position: absolute;
	width: 65px;
	height: 44px;
	color: rgb(0,220,255);
	border-radius: 5px;
}

#repetirsonido {
	left: 625px;
	top: 520px;
	position: absolute;
	width: 72px;
	height: 43px;
	color: rgb(255,208,0);
	border-radius: 5px;
}

#oirtonalidad {
	left: 296px;
	top: 520px;
	position: absolute;
	width: 90px;
	height: 43px;
	color: rgb(0,130,255);
	border-radius: 5px;
}

.tonal {
	position: absolute;
	width: 80px;
	height: 18px;
	border-radius: 8px;
	border: 2px solid rgb(60,60,60);
	color: rgb(60,60,60);
	font-size: 14px;
}

#FA {
	left: 5px;
	top: 475px;
}

#FAs {
	left: 91px;
	top: 475px;
}

#SOL {
	left: 177px;
	top: 475px;
}

#LAb {
	left: 5px;
	top: 450px;
}

#LA {
	left: 91px;
	top: 450px;
}

#SIb {
	left: 177px;
	top: 450px;
}

#SI {
	left: 5px;
	top: 425px;
}

#DO {
	left: 91px;
	top: 425px;
}

#DOs {
	left: 177px;
	top: 425px;
}

#RE {
	left: 5px;
	top: 400px;
}

#MIb {
	left: 91px;
	top: 400px;
}

#MI {
	left: 177px;
	top: 400px;
}

#titulo {
	left: 95px;
	top: 365px;
	position: absolute;
	color: rgb(60,60,60);
	width: 96px;
	height: 20px;
}

#marcoTonalidades {
	left: 0px;
	top: 393px;
	position: absolute;
	width: 264px;
	height: 108px;
	border-radius: 8px;
	border: 1px solid rgb(60,60,60);
}

#tituloModos {
	left: 74px;
	top: 250px;
	position: absolute;
	color: rgb(60,60,60);
	width: 136px;
	height: 18px;
	
}

#marcoModos {
	left: 0px;
	top: 275px;
	position: absolute;
	width: 264px;
	height: 57px;
	border-radius: 8px;
	border: 1px solid rgb(60,60,60);
}

.modo {
	position: absolute;
	width: 122px;
	height: 20px;
	border-radius: 8px;
	border: 2px solid rgb(60,60,60);
	color: rgb(60,60,60);
	font-size: 14px;
}

#modo1 {
	left: 5px;
	top: 280px;
}

#modo2 {
	left: 137px;
	top: 280px;
}

#modo3 {
	left: 5px;
	top: 305px;
}

#modo4 {
	left: 137px;
	top: 305px;
}

.meta {
	position: absolute;
	width: 36px;
	height: 17px;
	border-radius: 8px;
	border: 2px solid rgb(60,60,60);
	color: rgb(60,60,60);
	font-size: 13px;
}

#meta {
	left: 100px;
	top: 110px;
	position: absolute;
	width: 58px;
	height: 17px;
	color: rgb(60,60,60);
	font-size: 16px;
}

#marcoMeta {
	left: 0px;
	top: 135px;
	position: absolute;
	width: 264px;
	height: 74px;
	border-radius: 8px;
	border: 2px solid rgb(60,60,60);
}

#meta1 {
	left: 6px;
	top: 140px;
}

#meta2 {
	left: 49px;
	top: 140px;
}

#meta3 {
	left: 92px;
	top: 140px;
}

#meta4 {
	left: 135px;
	top: 140px;
}

#meta5 {
	left: 178px;
	top: 140px;
}

#meta6 {
	left: 222px;
	top: 140px;
}

#meta7 {
	left: 6px;
	top: 163px;
}

#meta8 {
	left: 49px;
	top: 163px;
}

#meta9 {
	left: 92px;
	top: 163px;
}

#meta10 {
	left: 135px;
	top: 163px;
}

#meta11 {
	left: 178px;
	top: 163px;
}

#meta12 {
	left: 222px;
	top: 163px;
}

#meta13 {
	left: 6px;
	top: 186px;
}

#meta14 {
	left: 49px;
	top: 186px;
}

#meta15 {
	left: 92px;
	top: 186px;
}

#meta16 {
	left: 135px;
	top: 186px;
}

#meta17 {
	left: 178px;
	top: 186px;
}

#meta18 {
	left: 222px;
	top: 186px;
}

#encabezado {
	left: 10px;
  	top: 42px;
  	position: absolute;
  	font-size: 20px;
  	color: rgb(120, 130, 130);
  	width: 450px;
  	text-align: left;
}
#nomUser {
	left: 620px;
  	top: 42px;
  	position: absolute;
  	font-size: 16px;
  	color: rgb(98, 186, 249);
  	width: 450px;
  	text-align: left;
}

#fecha {
	left: 892px;
  	top: 43px;
  	position: absolute;
  	font-size: 14px;
  	color: rgb(100,100,100);
  	text-align: left;
}
#reloj {
	left: 1000px;
  	top: 140px;
  	position: absolute;
  	font-size: 16px;
  	color: rgb(0,0,0);
  	text-align: left;
}

#titdat {
	left: 900px;
  	top: 189px;
  	position: absolute;
  	opacity: 0.0;
}
#llaveGrados {
	position: absolute;
	left: 380px;
  	top: 475px;
  	opacity: 0.0;
}
.des{
    position: absolute;
    overflow: auto; 
    top: 230px;
    width: 30px;
    height: 198px;
    color: rgb(90,146,230);
    font-family: futura;
    font-size: 12px;
    
}
#des1{
    left: 900px;
    overflow-y: hidden;
    color: rgb(170,170,170);
}
.resaltar{
   color:red;
}
#des2{
    left: 925px;
    overflow-y: hidden;
    color: rgb(0,100,255);
}
#des3{
    left: 952px;
    overflow-y: hidden;
    width: 85px;
}
#des4{
    left: 1035px;
    overflow-y: hidden;
    color: rgb(120,120,120);
}
#des5{
    left: 1057px;
    overflow-y: hidden;
    color: rgb(0,170,0);
}
#des6{
    left: 1078px;
    overflow-y: hidden;
    width: 50px;
}
#des7{
    left: 1122px;
    width: 55px;
    color: rgb(218,109,3);
}
#marcador1 {
	left: 400px;
  	top: 130px;
  	position: absolute;
  	font-size: 34px;
  	color: rgb(60,60,60);
  	width: 40px;
  	text-align: center;
}

#marcador2 {
	left: 358px;
  	top: 136px;
  	position: absolute;
  	font-size: 24px;
  	color: rgb(60,60,60);
  	width: 40px;
  	text-align: center;
}

.marca {
	position: absolute;
	top: 106px;
	height: 16px;
	width: 8px;
}

#marcaColumna1 {
	left:500px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna2 {
	left:539px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna3 {
	left:578px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna4 {
	left:617px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna5 {
	left:656px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna6 {
	left:695px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna7 {
	left:734px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna8 {
	left:773px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna9 {
	left:812px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#marcaColumna10 {
	left:851px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

.numserie {
	position: absolute;
	top: 78px;
	font-size: 22px;
  	color: rgb(60, 60, 60 );
  	width: 39px;
  	text-align: left;
  	padding-left: 7px;
}

#tituloSerie {
	position: absolute;
	top: 80px;
	left: 325px;
	width: 160px;
	height: 20px;
	background-color: rgb(20,20,20);
	color: rgb(40,40,40);
}

#uno {
	left:491px;
}

#dos {
	left:530px;
}

#tres {
	left:569px;
}

#cuatro {
	left:608px;
}

#cinco {
	left:647px;
}

#seis {
	left:686px;
}

#siete {
	left:725px;
}

#ocho {
	left:764px;
}

#nueve {
	left:803px;
}

#diez {
	left:842px;
	padding-left: 0px;
}

.sgp {
	position: absolute;
	display: none;
	left:411px;
	top: 252px;
	height: 29px;
	width: 94px;
	opacity: 0.5;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#sombraGrado2 {
	width: 133px;
}
#sombraGrado3 {
	width: 172px;
}
#sombraGrado4 {
	width: 211px;
}
#sombraGrado5 {
	width: 250px;
}
#sombraGrado6 {
	width: 299px;
}
#sombraGrado7 {
	width: 338px;
}
#sombraGrado8 {
	width: 377px;
}
#sombraGrado9 {
	width: 416px;
}
#sombraGrado10 {
	width: 455px;
}

#sombraGradop {opacity: 0.2;}