/*Tema negro y blanco.css*/
body {
  font-family: arial;
  font-weight: bold;
  font-size: 5rem;
  margin: 0;
  text-align: center;
  background-color: black;
  color: white;
  height:100%; 
}
p,
.letra {
  font-family: arial;
  font-weight: bold;
  font-size: 5rem;
  padding-left: 5px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}
h5,
.coro {
  font-family: arial;
  font-weight: bold;
  font-style: italic;
  font-size: 5rem;
  padding-left: 5px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

pre,
.msica {
  display: none;
  padding-left: 5px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}
.titulo1 {
  font-family: arial;
  font-weight: bold;
  font-size: 1rem;
  color: white;
  background-color: gray;
  padding-left: 5px;
  margin: 0;
  width: 98%;
}
.nota {
  font-family: arial;
  font-weight: bold;
  font-size: 1rem;
  margin: 0;
  color: lavender;
  text-align: center;
}

/* Estilos de la barra de tareas */

#panel {
  background-color: rgba(0, 0, 0, 0.6);
  right: 0;
  padding: 5px 15px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

#panel2 {
  margin: 0 18px;
  position: fixed;
  right: 0px;
  bottom: 40px;
  border-radius: 15px;
  padding: 10px;
  background-color: darkslategray;
  display: none;
  text-align:left;
}


iframe {
  overflow: auto;
  min-height: 100%;
  height: 100%;
}


input {
  font-weight: bold;
  color: whitesmoke;
  background-color: gray;
  font-size: 8pt;
  height: 28px;
  border: solid 1px darkslategray;
  border-radius: 12px;
  padding-left: 4px;
  *padding-top: 7px; /*solo IE*/
}

img {
  border: 0;
}
.icono {
  display: block;
  font-size: 8pt;
  font-weight: bold;
  color: whitesmoke;
  text-decoration: none;
  background-color: darkslategray;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: 8px;
  padding: 6px 15px 6px 15px;
  margin: 0 3px 0 3px;
  float: left;
}
.icono:hover {
  background-color: gray;
  cursor: pointer;
}

.iconomenu {
  color: whitesmoke;
  text-decoration: none;
  background-color: darkslategray;
  background-repeat: no-repeat;
  background-position: left center;
  padding: 6px 15px 6px 40px;
  width: 230px;
  font-family: arial;
  font-size: 11pt;
  font-weight: bold;
  border-radius: 8px;
  margin: 0 3px 4px 3px;
  float: left;
}
a.iconomenu:hover, .boton:hover{ 
  cursor: pointer;
  background-color: #28a8e0;
  color: white;
}

.boton {

  font-weight: bold;
  text-align: center;
  color: whitesmoke;
  text-decoration: none;
  background-color: rgb(60, 60, 60);
  background-repeat: no-repeat;
  background-position: center;
  /*border:solid 1px white;*/
  border-radius: 8px;
  padding: 5px 10px 5px 10px;
  margin: 0 2px 0 2px;
}


.BotonOk {
  background-color: #28a8e0;
  color: white;
  padding: 8px;
}
.BotonOk:hover {
  color: white;
  background-color: #4eceff;
}
.BotonMenu {
  background-image: url("Imagenes/menu_w.png");
}
.BotonNoMenu {
  background-image: url("Imagenes/nomenu_w.png");
}

.BotonAyuda {
  background-image: url("Imagenes/help_w.png");
}
.BotonBiblia {
  background-image: url("Imagenes/biblia_w.png");
}
.BotonBuscar {
  background-image: url("Imagenes/indice_w.png");
}
.BotonFullScreen {
  background-image: url("Imagenes/fullscreen_w.png");
}
.BotonConfig {
  background-image: url("Imagenes/config_w.png");
}
.BotonPrint {
  background-image: url("Imagenes/print_w.png");
}
.BotonProyectar {
  background-image: url("Imagenes/proyectar_w.png");
}
.BotonCambio {
  background-image: url("Imagenes/cambio_w.png");
  background-size: 27px;
}
.BotonGuardar {
  background-image: url("Imagenes/guardar_w.png");
  background-size: 27px;
}
.BotonFontSize {
  background-image: url("Imagenes/fontsize_w.png");
  background-size: 27px;
}
a.links_barra {
  display: block;
  font-size: 8pt;
  font-weight: bold;
  color: whitesmoke;
  text-decoration: none;
  border: 0;
  border-radius: 4px;
  padding: 6px;

  float: left;
}

a:hover.links_barra {
  color: black;
  background-color: white;
  cursor: pointer;
}

iframe,
.contenido {
  margin: 0px;
  padding: 0px;
}

#contenido {
  padding-top: 10px;
  padding-bottom: 30px;
}

/* Estilos Biblia */
.biblia_p {
  font-family: Serif;
  font-weight: normal;
  font-size: 3.3rem;
  padding: 18;
  padding-left: 40px;
  text-transform: none;
}
.biblia_v {
  vertical-align: top;
}
.biblia_v a {
  text-decoration: none;
}
.biblia_vb {
  font-family: Verdana;
  font-weight: bold;
  font-size: 20pt;
  padding: 10;
  color: silver;
  text-align: center;
  border-radius: 30px;
  display: block;
  background-color: #383838;
}
.biblia_vb:hover {
  color: black;
  background-color: white;
}
.biblia_nav {
  font-family: Arial;
  font-size: 10pt;
  font-weight: bold;
  color: black;
}
.biblia_navc {
  font-family: Arial;
  font-size: 10pt;
  font-weight: bold;
  color: steelblue;
  padding: 5px;
}
.biblia_navc:hover {
  color: white;
  background-color: black;
}

.biblia_navt0 {
  font-family: Arial;
  background-color: #383838;
}
.biblia_navt1 {
  font-size: 14pt;
  font-weight: bold;
  color: white;
  padding: 8px 20px 8px 20px;
  background-color: #383838;
}
.biblia_navt {
  font-size: 14pt;
  font-weight: bold;
  padding: 8px 20px 8px 20px;
  color: white;
  background-color: gray;
}
.biblia_navt:hover {
  color: black;
  background-color: white;
}
.biblia_navt a {
  text-decoration: none;
}

h4 {
  font-family: Arial;
  font-size: 24pt;
  font-weight: normal;
  text-align: left;
  color: white;
  background-color: navy;
  padding: 14px;
  padding-left: 24px;
  margin: 0;
}

br {
  font-size: 40pt;
}

@media print {
  #panel {
    display: none;
  }
}

/*** COMIENZA Estilos generales ***/
.center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.btn-main-color {
  background: darkslategray;
  border: darkslategray;
}

.icono-flecha-arriba {
  color: white;
  width: 0px;
  height: 0px;
  border: 13px solid black;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: white;
  border-left-color: transparent;
}

.icono-flecha-abajo {
  color: white;
  width: 0px;
  height: 0px;
  border: 13px solid black;
  border-top-color: white;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
/*** FIN Estilos generales ***/

/*** COMIENZA Estilos para transposicion ***/
#componente-transposicion {
  background-color: darkslategray;
  border-radius: 8px;
  position: fixed;
  right: 30px;
  top: 30px;
  width: 40px;
}

/* Modo espectador */
#contenido pre,
#contenido .msica {
  display: none;
} /* ocultando */
#componente-transposicion {
  display: none;
} /* ocultando */

/* Modo musico */
body.modo-musico.mostrando-cancion #componente-transposicion {
  display: block;
}
body.modo-musico #componente-transposicion .btn {
  height: 50px;
}
body.modo-musico #componente-transposicion .semitono {
  color: white;
  font-size: 27px;
  height: 37px;
}
body.modo-musico #contenido {
  padding-bottom: 170%;
}
body.modo-musico #contenido p,
body.modo-musico #contenido h5 {
  font-family: monospace;
  font-weight: normal;
  font-style: normal;
  text-align: left;
  margin-left: 10%;
}
body.modo-musico #contenido pre,
body.modo-musico #contenido .msica {
  color: lawngreen;
  display: block;
  font-family: monospace;
  font-weight: normal;
  text-align: left;
  margin-left: 10%;
}

/* Estilos para celular */
@media (max-width: 800px) {
  #componente-transposicion {
    position: fixed;
    right: 10px;
    top: 10px;
  }

  /* Modo espectador */
  body #contenido {
    width: 95%;
  }

  body #contenido p,
  body #contenido h5 {
    font-size: 1.3rem;
    margin-left: 5%;
  }

  body #contenido pre,
  body #contenido .msica {
    font-size: 1.3rem;
    margin-left: 5%;
  }

  /* Modo musico */
  body.modo-musico #contenido {
    width: 85%;
  }

  body.modo-musico #contenido pre,
  body.modo-musico #contenido .msica {
    font-size: 1.3rem;
    margin-left: 5%;
  }

  body.modo-musico #contenido p,
  body.modo-musico #contenido h5 {
    margin-left: 5%;
  }
}
/*** FIN Estilos para transposicion ***/

/*** COMIENZA Estilos para cambio de pagina ***/
#componente-mover-pagina {
  background-color: darkslategray;
  border-radius: 8px;
  display: none; /* ocultando */
  font-size: 19px;
  position: fixed;
  right: 30px;
  top: 220px;
  width: 40px;
}

#componente-mover-pagina .btn {
  height: 36px;
}

#componente-mover-pagina .pagina-texto {
  padding-bottom: 20px;
  padding-top: 20px;
}

/* Mostrando en modo musico*/
body.modo-musico.mostrando-cancion #componente-mover-pagina {
  display: block;
}

@media (max-width: 800px) {
  #componente-mover-pagina {
    right: 10px;
  }
}
/*** FIN Estilos para cambio de pagina ***/