body {
margin: 0px;
height: 100%;
color: #fff;
background-color: #000;
}
img {
border-width: 0px; 
}
@font-face {
        font-family: "digitaldisplay";
        src: url('../img/digitaldisplaytfb.eot');
        src: url('../img/digitaldisplaytfb.eot?#iefix') format('embedded-opentype'),
        url('../img/digitaldisplaytfb.svg#digitaldisplay') format('svg'),
        url('../img/digitaldisplaytfb.woff') format('woff'),
        url('../img/digitaldisplaytfb.ttf') format('truetype');
}
@font-face {
        font-family: "helveticainserat";
        src: url('../img/helveticainseratltstd-roman_0.eot');
        src: url('../img/helveticainseratltstd-roman_0.eot?#iefix') format('embedded-opentype'),
        url('../img/helveticainseratltstd-roman_0.svg#helveticainserat') format('svg'),
        url('../img/helveticainseratltstd-roman_0.woff') format('woff'),
        url('../img/helveticainseratltstd-roman_0.ttf') format('truetype');
}
@font-face {
        font-family: "helveticaneuel";
        src: url('../img/helveticaneueltstd-bd_0.eot');
        src: url('../img/helveticaneueltstd-bd_0.eot?#iefix') format('embedded-opentype'),
        url('../img/helveticaneueltstd-bd_0.svg#helveticaneuel') format('svg'),
        url('../img/helveticaneueltstd-bd_0.woff') format('woff'),
        url('../img/helveticaneueltstd-bd_0.ttf') format('truetype');
}
.stage {
background-repeat:no-repeat;
width: 1024px; 
height: 768px;
}
.content {
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
text-align: center;
}
#control {
position: absolute;
background-image: url('../img/control.png');
background-repeat: no-repeat;
width: 623px;
height: 282px;
z-index: 2;
}
.hand_right {
position: absolute;
width: 241px;
height: 387px;
z-index: 3;
}
.hand_left {
background-repeat: no-repeat;
position: absolute;
width: 257px;
height: 387px;
z-index: 3;
}
.hand_rightb {
position: absolute;
width: 211px;
height: 410px;
z-index: 3;
}
.hand_leftb {
background-repeat: no-repeat;
position: absolute;
width: 187px;
height: 410px;
z-index: 3;
}
.button_blue {
position: absolute;
width: 42px;
height: 16px;
z-index: 3; 
}
.button {
position: absolute;
width: 40px;
height: 43px;
z-index: 3;
cursor: pointer;
background-image:url('../img/empty_button.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
.click_blue_up {
background-image:url('../img/button_blue_up.png');
background-repeat: no-repeat;
width: 42px;
height: 20px;
cursor:pointer;
background-color: transparent;
background-position: 0px 0px;
border: none;
-webkit-transition:-webkit-transform 0.1s ease-out;
-moz-transition:-moz-transform 0.1s ease-out;
-o-transition:-o-transform 0.1s ease-out;
-ms-transition:-ms-transform 0.1s ease-out;
transition:transform 0.1s ease-out;
}
.click_blue_up:active {
-moz-transform: scale(0.9,0.9);
-webkit-transform: scale(0.9,0.9);
-o-transform: scale(0.9,0.9);
-ms-transform: scale(0.9,0.9);
transform: scale(0.9,0.9);
}
.click_blue_down {
background-image:url('../img/button_blue_down.png');
background-repeat: no-repeat;
width: 42px;
height: 20px;
cursor:pointer;
background-color: transparent;
background-position: 0px 0px;
border: none;
-webkit-transition:-webkit-transform 0.1s ease-out;
-moz-transition:-moz-transform 0.1s ease-out;
-o-transition:-o-transform 0.1s ease-out;
-ms-transition:-ms-transform 0.1s ease-out;
transition:transform 0.1s ease-out;
}
.click_blue_down:active {
-moz-transform: scale(0.9,0.9);
-webkit-transform: scale(0.9,0.9);
-o-transform: scale(0.9,0.9);
-ms-transform: scale(0.9,0.9);
transform: scale(0.9,0.9);
}
.number {
position: absolute;
font-family: "digitaldisplay", Arial, Helvetica, sans-serif;
color: #00BCD5;
font-size: 70px;
z-index: 3;
text-align:center;
width: 155px;
height: 106px;
letter-spacing: 3px;
}
.operator {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 95px;
z-index: 3;
text-align:center; 
width: 55px;
}
.score {
position: absolute;
font-family: "helveticainserat", Arial, Helvetica, sans-serif;
color: #666666;
font-size: 17px;
z-index: 3;
}
#mm6 {
position: absolute;
z-index: 2;
height: 179px;
width: 120px;
}
.dialogo {
position: absolute;
z-index: 3;
top: -21px;
left: 0px;
}
#mensajesJuego {
font-family: "helveticaneuel", Arial, Helvetica, sans-serif;
color: #191919;
font-size: 23px;
background-image: url('../img/dialogo.png');
background-repeat: no-repeat;
height: 548px;
width: 384px;
display: none;
padding-top: 220px;
padding-left: 320px;
padding-right: 320px;
line-height: 23px;
text-align: center;
z-index: 30;
top: 0;
bottom: 0;
}
.part_two {
font-family: "helveticaneuel", Arial, Helvetica, sans-serif;
color: #191919;
font-size: 23px;
background-image: url('../img/dialogo.png');
background-repeat: no-repeat;
height: 548px;
width: 384px;
display: none;
padding-top: 220px;
padding-left: 320px;
padding-right: 320px;
line-height: 23px;
text-align: center;
z-index: 30;
}
.mensajeduda {
font-family: "helveticaneuel", Arial, Helvetica, sans-serif;
color: #fff;
font-size: 23px;
background-image: url('../img/dialogo_b.png');
background-repeat: no-repeat;
height: 548px;
width: 384px;
display: none;
padding-top: 220px;
padding-left: 320px;
padding-right: 320px;
line-height: 23px;
text-align: center;
z-index: 100;
}
.fraction, .top, .bottom {
padding: 0px;   
font-size: 30px;
float: left;
margin-left: 25px;
}
.fraction {
display: inline-block;
}
.bottom{
border-top: 3px solid #00BCD5;
display: block;
position: absolute;
width: 100px;
text-align: center;
}
.top{
text-align: center;
width: 100px;
}
#matenroll_logo{
position: absolute;
width: 265px;
height: 118px;
z-index: 500;
left: 380px;
top: -1px
}
.mute_a{
position: absolute;
width: 67px;
height: 34px;
z-index: 520;
background-image: url('../img/mute_a01.png');
background-repeat:no-repeat;
cursor: pointer;
left: 411px;
top: 82px;
}
.mute_b{
position: absolute;
width: 51px;
height: 33px;
z-index: 525;
background-image: url('../img/mute_b01.png');
background-repeat:no-repeat;
cursor: pointer;
left: 411px;
top: 83px;
}
.howto{
position: absolute;
width: 58px;
height: 39px;
z-index: 520;
background-image: url('../img/howto01.png');
background-repeat:no-repeat;
cursor: pointer;
left: 462px;
top: 79px;
}
.skip_intro{
position: absolute;
width: 160px;
height: 29px;
z-index: 520;
background-image: url('../img/skip_intro01.png');
background-repeat:no-repeat;
cursor: pointer;
left: 462px;
top: 79px;
display: none;
}
.skip{
position: absolute;
width: 133px;
height: 38px;
z-index: 600;
background-image: url('../img/skip01.png');
background-repeat:no-repeat;
cursor: pointer;
left: 411px;
top: 75px;
}
.skip2{
position: absolute;
width: 133px;
height: 38px;
z-index: 3000;
background-image: url('../img/skip01.png');
background-repeat:no-repeat;
cursor: pointer;
left: 411px;
top: 75px;
}
#tutorial{
position: absolute;
width: 1024px;
height: 768px;
z-index: 490;
left: 0px;
top: 0px;
display: none;
}
#guitar{
position: absolute; 
width: 369px;
height: 404px;
z-index: 3;
left: 659px;
top: 143px
}
#menu{
background-image:url('../img/menu01.png');
background-repeat:no-repeat;
position: absolute;
width: 205px;
height: 83px;
z-index: 3;
left: 565px;
top: 252px
}
#menu_practica{
background-image:url('../img/menu_practice00.png');
background-repeat:no-repeat;
position: absolute;
width: 480px;
height: 233px;
z-index: 3;
left: 565px;
top: 252px
}
#credits{
background-image:url('../img/credits_a.png');
background-repeat:no-repeat;
position: absolute;
width: 83px;
height: 35px;
z-index: 3;
cursor: pointer;
left: 893px;
top: 503px
}
#credits_displayed{
position: absolute;
width: 376px;
height: 396px;
z-index: 3;
left: 893px;
top: 503px;
display: none;
}
#black{
position: absolute;
width: 1024px;
height: 150px;
z-index: 520;
background-color: #000;
left: 0px;
top: 633px
}