* {
  outline: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
html {
  -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
p {
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}
::-moz-selection {
    background: transparent;
}
::selection {
   background: transparent;
}

/*///////////////////////////////////////////////////////////////////////////////////////*/

/*/// estilos de la carcasa base, con preLoader animado con CSS /////////////////////////*/
body {
  background: #ccc;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
h4 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  font-weight: 200;
  opacity: 1;
  font-family: sans-serif;
  color: #fff;
}
#loader {
  -webkit-animation: animate 1.5s linear infinite;
  animation: animate 1.5s linear infinite;
  clip: rect(0, 80px, 80px, 40px); 
  height: 80px;
  width: 80px;
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
}
@-webkit-keyframes animate {
  0% { 
    transform: rotate(0deg)
  }
  100% { 
    transform: rotate(220deg)
  }
}
@keyframes animate {
  0% { 
    transform: rotate(0deg)
  }
  100% { 
    transform: rotate(220deg)
  }
}
#loader:after {
  -webkit-animation: animate2 1.5s linear infinite;
  animation: animate2 1.5s ease-in-out infinite;
  clip: rect(0, 80px, 80px, 40px);
  content:'';
  border-radius: 50%; 
  height: 80px;
  width: 80px;
  position: absolute; 
} 
@-webkit-keyframes animate2 {
  0% {
    box-shadow: inset #fff 0 0 0 17px;
    transform: rotate(-140deg);
  }
  50% {
    box-shadow: inset #fff 0 0 0 2px;
  }
  100% {
    box-shadow: inset #fff 0 0 0 17px;
    transform: rotate(140deg);
  }
}
@keyframes animate2 {
  0% {
    box-shadow: inset #fff 0 0 0 17px;
    transform: rotate(-140deg);
  }
  50% {
    box-shadow: inset #fff 0 0 0 2px;
  }
  100% {
    box-shadow: inset #fff 0 0 0 17px;
    transform: rotate(140deg);
  }
}
/*///////////////////////////////////////////////////////////////////////////////////////*//*///////////////////////////////////////////////////////////////////////////////////////*/
#limit {
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border-radius: 15px 15px 0 0;
  border: 1px solid darkgrey;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  width: 1024px;
  height: 636px;
  /*left: 50%;
  top: 50%;*/
  /*transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);*/
  background-color: white;
  margin: auto;
  /*left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);*/
}

#carcasa {
  width: 1024px;
  height: 636px;
}
#overall {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 1024px;
  height: 636px;
  pointer-events: none;
}
#content {
  position: absolute;
  width: 1024px;
  height: 636px;
}
#header {
  z-index: 10;
  position: relative;
  width: 1024px;
  height: 81px;
  background-color: white;
  border-bottom: 1px solid lightgrey;
}
#headerText {
  position: absolute;
  width: 836px;
  left: 30px;
  top: 50%;
  transform: translateY( -50%);
  -webkit-transform: translateY(-50%);
  /*    font-size: 28px;*/
  line-height: 1;
  overflow: hidden;
  max-height: 2em;
  color: #333333;
}
#headerLogo {
  position: absolute;
  right: 15px;
  top: 50%;
    transform: translateY( -50%);
    -webkit-transform: translateY(-50%);
  width: 135px !important;
  height: 35px !important;
  background-position: 0px 0px !important;
}
#fondo {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: 517px;
  overflow: hidden;
  background-color: white;
  background-repeat: no-repeat;
}
#visor {
  z-index: 10;
  position: relative;
  /*width: 1024px;*/
  width: 1019px;
  margin-right: 5px;
  height: 517px;
  border: none;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
    overflow-y: auto;/* por comprobar */
}
#bottombar {
  z-index: 10;
  position: relative;
  border-top: 1px solid lightgrey;
  width: 1024px;
  height: 38px;
  background-color: white;
  /*AleD todo sustituir por imagen de fondo con el gradiente metido...*/
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100%);
    background-image: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100%);
    background-image: -ms-linear-gradient(top, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100%);
    background-image: linear-gradient(top, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100%);
  /* background: -ms-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d7d7',GradientType=0 ); /* IE6-9 */
}
#introTitle {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}
#introText {
  margin: 10px 0;
  line-height: 25px;
}
#left {
  float: left;
  width: 45%;
  height: inherit;
}
#center {
  float: left;
  width: 8%;
  height: inherit;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
}
#right {
  float: left;
  width: 45%;
  height: inherit;
}
#center p {
  height: 30px;
  padding-top: 8px;
  color: white;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0 12px 0 darkgrey inset;
}
.boton {
  width: 67px;
  height: 38px;
  cursor: pointer;
}
.boton.right {
  float: left;
  border-right: 1px solid lightgrey;
}
.boton.left {
  float: right;
  border-left: 1px solid lightgrey;
}
.boton.disabled {
  opacity: 0.5;
}
.boton:not(.disabled):active,
.boton:not(.disabled).active {
  box-shadow: 0 0 18px 0 darkgrey inset;
}
/*///////////////////////////////////////////////// noHeader //////////////////////////////////////////////////////////////*/
.noHeader #limit {
  border: 0;
  border-radius: 0;
  height: 555px;
  left: 0;
  top: 0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

.editorSgo #limit{
  top: 0;
  left: 0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); 
}


.noHeader #carcasa{
  height: 555px;
}
.noHeader #overall {
  height: 555px;
}
.noHeader #content{
  height: 555px;
}
/*///////////////////////////////////////////////// android /////////////////////////////////////////////////////////////*/
.isAndroid #limit {
  border: 0;
  border-radius: 0;
}
.isiOS #limit {
  border: 0;
  border-radius: 0;
}
.isAndroid:not(.noHeader) #limit {
  width: 1091px;
  height: 600px;  
}
.isAndroid:not(.noHeader) #overall {
  width: 1091px;
  height: 600px;  ;
}
.isAndroid:not(.noHeader) #carcasa{
  width: 1091px;
  height: 600px;  
}
.isAndroid:not(.noHeader) #content{
  width: 1091px;
  height: 600px;  
}
.isAndroid:not(.noHeader) #header {
  width: 1091px;
}
.isAndroid:not(.noHeader) #visor{
  position: relative;
  float: left;
  height: 518px;  
  width: 1014px;
  margin-right: 5px;
}
.isAndroid:not(.noHeader) #bottombar {
  position: relative;
  float: right;
  width: 68px;
  height: 518px;
  /* ancho total= 68+1 = 69 */
  border-top: 0;
  border-left: 1px solid lightgrey;
    background-image: -webkit-linear-gradient( left, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100% );
    background-image: -moz-linear-gradient( left, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100% );
    background-image: -ms-linear-gradient( left, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100% );
    background-image: -o-linear-gradient( left, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100% );
    background-image: linear-gradient( left, #ffffff 0%, #e0e0e0 50%, #d8d7d7 75%, #d8d7d7 100% );
    background-image: -webkit-gradient( linear, 0% 0%, 50% 0%, from( rgb(255, 255, 255) ), to( rgb(216, 215, 215) ) );
  /* background: -ms-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d7d7', GradientType=0 ); /* IE6-9 */
}
.isAndroid:not(.noHeader) #bottombar .boton.left {
  /*border-top: 1px solid white;*/
  border-bottom: 1px solid lightgrey;
  border-left: none;
  border-right: none;
}
.isAndroid:not(.noHeader) #left {
  width: 100%;
  height: 480px;
}
.isAndroid:not(.noHeader) #center {
  bottom: 0;
  width: 100%;
  height: 38px;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* stars */
.stars {
  position: absolute;
  background: url( "../../../common/images/estrellas.png" ) no-repeat center;
  width: 24px;
  z-index: 100;
  height: 24px;
}
/* TOOLTIP */
.tooltip {
  position: absolute;
  font-size: 13px;
  padding: 5px;
  z-index: 5000;
  background-color: darkgrey;
  color: white;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.img_feedback{
  background-position: -88px -968px !important;
  /*background-position: 0px -962px !important;*/
  width: 24px !important;
  height: 24px !important;
  cursor: pointer;
  float: right;
  margin-right: 8px;
  pointer-events: none;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* POP UP =====================================================================================================*/
.pop_up {
  display: none;
    position: absolute;
  z-index: 100;
    width: 510px;
    height: 328px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  background-color: white;
  /*border: 1px solid darkgrey;*/
  box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, .5);
  pointer-events: auto;
}
.pop_up_top {
  background-color: darkgrey;
  height: 28px;
  padding: 10px;
}
.pop_up_title {
  float: left;
  color: black;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  line-height: 25px;
}
.pop_up_close {
  float: right;
  cursor: pointer;
  background-position: -91px -786px !important;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  line-height: 25px;
}
.pop_up_content {
  width: 475px;
  height: 243px;
  margin-right: 5px;
  overflow: hidden;
  overflow-y: auto;/* por comprobar */
  background-color: white;
  padding: 15px;
  line-height: 25px;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////*/
::-webkit-scrollbar {
  width: 15px;
}
/*::-webkit-scrollbar-track {
}*/
::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: lightgrey;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-track-piece:vertical:start {
  margin-top: 10px;
}
::-webkit-scrollbar-track-piece:vertical:end {
  margin-bottom: 10px;
}
body {
  font-size: 16px;
  font-family: arial, helvetica, sans-serif;
}
#header {
  font-size: 25px;
/*  font-weight: bold;
  font-family: verdana, geneva, sans-serif;*/
}
/*.sprite {
  background-image: url( "../../../common/images/sprite.png" );
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .sprite {
    background-image: url( "../../../common/images/sprite@2x.png" );
    background-repeat: no-repeat;
  }
}*/

.siguiente {
  background-position: 0px -741px !important;
}
.anterior {
  background-position: 0px -704px !important;
}
.anterior2 {
  background-position: 0px -187px !important;
}
.siguiente2{
  background-position: 0px -149px !important;
}
.rewind {
  background-position: 0px -261px !important;
}
.forward {
  background-position: 0px -224px !important;
}
.comprobar {
  background-position: 0px -557px !important;
}
.ayuda {
  background-position: 0px -593px !important;
}
.reiniciar {
  background-position: 0px -667px !important;
}
.versolucion {
  background-position: 0px -518px !important;
}
.clave {
  background-position: 0px -814px !important;
}
.karaoke {
  background-position: 0px -852px !important;
}
.transcripcion {
  background-position: 0px -888px !important;
}
.silenciar {
  background-position: 0px -297px !important;
}
.silenciar_on {
  background-position: 0px -334px !important;
}
.zoomin {
  background-position: 0px -408px !important;
}
.zoomout {
  background-position: 0px -371px !important;
}
.imprimir {
  background-position: 0px -630px !important;
}
.aleatorio {
  background-position: 0px -1112px !important;
}
.pause {
  background-position: 0px -113px !important;
}
.play {
  background-position: 0px -38px !important;
}
.cronometro {
  background-position: 0px -926px !important;
}
.copyright {
  background-position: 0px -1000px !important;
}
.resetZoom {
  background-position: 0px -1037px !important;
}
.capas {
  background-position: 0px -1074px !important;
}
.aleatorio {
  background-position: 0px -1111px !important;
}
.grid {
  background-position: 0px -1148px !important;
}
.reiniciar_sonido {
  background-position: 0px -1185px !important;
}
.save {
  background-position: 0px -1222px !important;
}
.cancion {
  background-position: 0px -1259px !important;
}
.tab-c {
  background-position: 0px -1296px !important;
}
.tab-o {
  background-position: 0px -1333px !important;
}
.info {
  background-position: 0px -1370px !important;
}
.categoria {
  background-position: 0px -1407px !important;
}
.creditos {
  background-position: 0px -1444px !important;
}
.subtitulos {
  background-position: 0px -1481px !important;
}
.reducir {
  background-position: 0px -1518px !important;
}
.ampliar {
  background-position: 0px -1555px !important;
}
.inicio {
  background-position: 0px -1592px !important;
}
.diccionario {
  background-position: 0px -1629px !important;
}
.audio {
  background-position: 0px -1666px !important;
}
.glosario {
  background-position: 0px -1703px !important;
}
.compartir {
  background-position: 0px -1740px !important;
}
.recursos {
  background-position: 0px -1777px !important;
}
.enlace {
  background-position: 0px -1814px !important;
}
.calculadora {
  background-position: 0px -1851px !important;
}
.consulta {
  background-position: 0px -1888px !important;
}
.descarga {
  background-position: 0px -1925px !important;
}
.partitura {
  background-position: 0px -1962px !important;
}
.retorno {
  background-position: 0px -2517px !important;
}
.deshacer {
  background-position: 0px -2554px !important;
}
.rehacer {
  background-position: 0px -2591px !important;
}
.visualizar {
  background-position: 0px -2628px !important;
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.firstclick {
  background-color: lightblue;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  border-radius: 15px;
  z-index: 30;
}
.letra {
  position: absolute;
  overflow: hidden;
  text-align: center;
  cursor:pointer;
  width: 30px;
  height: 30px;
  line-height: 30px;
  /*z-index: 10;*/
  /*background-color: transparent;*/
  /*font-size: 16px;*/
  pointer-events: auto;
}
.noCheck{
  background-color: #FF0000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
#visor {
  padding-bottom: 0;
  padding-top: 0;
}

#matriz {
 /* border: 3px solid darkgrey;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;*/
  margin-bottom: 15px;
  
}
.secundaria .letra{
  font-weight:bold;
}

#pregunta{
  margin-top: 12px;
  margin-bottom: 15px;
  /*font-size: 15px;*/
}

.secundaria #pregunta {
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  /*padding-left: -30px;*/
  padding-top: 0;
  padding-bottom: 0;
  font-size: 15px;
  margin-top: 12px;
  margin-bottom: 15px;
}

.verde {
  background-color: green;
  border: 3px solid darkgreen;
}
.rojo {
  background-color: red;
  border: 3px solid darkred;
}
.siendoMarcado{
  background-color: lightblue;
}
.marcadoSeleccion{
  background-color: blue;
}
#seleccionActual{
}
