@charset "utf-8";
/* CSS Document */

/*h2.cancion-titulo {*/
h4 {
	font-size: 1.8rem;
	font-weight: bold;
	padding: 10px;
/*	border-bottom: #05B 2px solid;*/
	text-align: left;
	margin-bottom: 15px;
}

.bottom {
	margin-bottom: 1.5em !important;
}

.jandi-calendario-liturgico {
	width: -moz-calc(100% - 200px);
	width: -webkit-calc(100% - 200px);
	width: -o-calc(100% - 200px);
	width: calc(100% - 200px);
	float: left;
	margin: 10px 0px;
	text-align: center;
}

.jandi-calendario-liturgico h1{
	font-family: 'Fray Gabriel';
	font-size: 3.2rem;
	font-style: italic;
	font-weight: bolder;
	color: #05B;
	text-align: center;
	margin: 0px;
}

.jandi-calendario-liturgico h2{
	font-size: 1.4rem;
	color: #000;
	text-align: center;
	margin: 0px;
	margin-top: 10px;
}

.secciones-link {
	position: relative;
	width: -moz-calc(20% - 40px);
	width: -webkit-calc(20% - 40px);
	width: -o-calc(20% - 40px);
	width: calc(20% - 40px);
	max-width: 120px;
	margin: 20px;
	margin-bottom: 30px;
	display: inline-block;
}

.secciones-ico {
	width: 100%;
	height: auto;
	max-height: 250px;
	float: left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.secciones-txt {
	position: absolute;
	display: block;
/*	background-color: rgba(255, 255, 255, 0.3);*/
	width: 100%;
	color: #999;
	left: 0px;
	bottom: -25px;
	font-weight: bold;
	z-index: 50;
}

.secciones-link:hover, .secciones-link:hover > .secciones-txt {
/*	background-color: rgba(0, 85, 187, 0.75);*/
	color: #05B;
}

.circulo-verde {background-color: #060;}
.circulo-azul {background-color: #03C;}
.circulo-rojo {background-color: #F00;}
.circulo-morado {background-color: #60C;}
.circulo-blanco {border: #000 1px solid;}

.jandi-tabla {
	font-size: 1rem;
}

.tabla-seccion {
	max-width: 120px;
}

.tabla-tiempo-liturgico {
	width: 130px;
}

.btn-acordes {
	font-size: 1rem;
}

.no-cancion {
	background-color: #666;
	width: 55px;
	height: 50px;
	line-height: 50px;
	margin: 5px 0px;
	margin-right: 20px;
	text-align: center;
	padding: 5px 0px;
	float: left;
	color: #FFF;
	font-size: 1.6rem;
}

.titulo {
	width: 100%;
	float: left;
	color: #05B;
	font-size: 1.2rem;
	margin-top: 2px;
}

.tono-natural {
	width: 100%;
	float: left;
	font-size: 0.8rem;
/*	margin-bottom: 15px;*/
	margin-bottom: 0px;
}

.audio-main {
	width: auto;
	float: right;
}

.audio {
	height: 50px;
}

.audio-img {
	display: none;
}

.esquema-letra {
	width: 100%;
	float: left;
}

.fila-cancion:hover {
	background-color: #E8E8E8;
}

.ver-letra {
	position: relative;
	background-image: url(imagenes/bg-degradado.png);
	background-size: 100% 100%;
	background-color: #05B;
	width: 120px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin: 5px 0px;
	margin-top: -10px;
	display: inline-block;
	color: #FFF !important;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.ver-letra:hover {
	background-color: #000;
	text-decoration: none;
}

.ver-letra-txt {
	display: block;
}

.ver-letra-tipo {
	border: #666 1px solid;
	width: 25px;
	height: 15px;
	display: inline-block;
	line-height: 15px;
	text-align: center;
	font-size: 12px;
	color: #333;
	margin-left: 10px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

.ver-letra-tipo-esquema {
	border: #094 1px solid;
	background-color: #094;
	color: #FFF;
}

.ver-letra-tipo-acordes {
	border: #F08 1px solid;
	background-color: #F08;
	color: #FFF;
}

.ver-letra-tipo-letra {
	border: #666 1px solid;
	background-color: #666;
	color: #FFF;
}

.ver-letra-img {
	display: none;
}

.tiempo-liturgico-texto {
	width: 100%;
	float: left;
	font-size: 0.8rem;
}

.tiempo-liturgico-color {
	width: 10px;
	height: 10px;
	float: left;
	margin-right: 5px;
	margin-top: 2px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

.cancion-letra {
	position: relative;
	width: 100%;
	float: left;
	margin-top: 50px;
	font-size: 1.8rem;
/*	line-height: 1.8rem;*/
}

.cancion-letra-acordes {
	width: 100%;
	float: left;
	margin-top: 25px;
	font-size: 1.8rem;
	line-height: 4rem;
}

.cancion-letra p,
.cancion-letra-acordes p {
	float: left;
	margin-bottom: 2rem;
}

.cancion-detalles {
	width: 100%;
	float: left;
	margin: 15px 0px;
	margin-bottom: 30px;
}

.cancion-ico {
	width: 30px;
	height: 30px;
}

.cancion-tiempo-liturgico {
	display: block;
	width: 20px;
	height: 20px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

.cancion-espaciado {
	width: 100%;
	float: left;
}

.cancion-instrumental {
	position: relative;
	width: 100%;
	font-size: inherit;
	float: left;
	margin-bottom: 15px;
}

.cancion-nota-instrumental {
	position: absolute;
	width: 100%;
	top: -25px;
	left: 0px;
	color: #F00;
	text-align: left;
	font-size: 1.3rem;
	line-height: 1.8rem;
}

.cancion-tonica {
	position: relative;
	width: auto;
	font-size: inherit;
	margin-bottom: 15px;
}

.cancion-nota {
	position: absolute;
	width: 50px;
	top: -18px;
	left: -20px;
	color: #F00;
	text-align: center;
	font-size: 1.3rem;
	line-height: 1.8rem;
}

.coro {
	width: 100%;
	color: #06F;
}

.estrofa {
	width: -moz-calc(100% - 20px);
	width: -webkit-calc(100% - 20px);
	width: -o-calc(100% - 20px);
	width: calc(100% - 20px);
	float: left;
	margin-left: 20px;
}

.segunda-voz {
	color: #930 !important;
}

.numero-estrofa {
	width: 100%;
	float: left;
	color: #999;
}

#jandicancionero .input-text {
	border: #333 1px solid;
	width: -moz-calc(100% - 30px);
	width: -webkit-calc(100% - 30px);
	width: -o-calc(100% - 30px);
	width: calc(100% - 30px);
	height: 30px;
	float: left;
	padding: 0px 10px;
	box-sizing: border-box;
}

.jandi-resultados {
	width: 100%;
	float: left;
	margin-top: 25px;
}

.cantos-esquema {
	width: -moz-calc(100% - 50px);
	width: -webkit-calc(100% - 50px);
	width: -o-calc(100% - 50px);
	width: calc(100% - 50px);
	float: left;
	margin-top: -20px;
}

.cantos-columna {
	width: 40px;
	float: right;
	right: 10px;
	z-index: 50;
}

#salmo .responso {
	float: left;
	color: #06F;
	text-align: left;
	margin-right: 10px;
}

#salmo .responso-fijo {
	border: #333 2px solid;
	background-color: #FF9;
	position: fixed;
	width: auto;
	max-width: -moz-calc(100% - 40px);
	max-width: -webkit-calc(100% - 40px);
	max-width: -o-calc(100% - 40px);
	max-width: calc(100% - 40px);
	top: 20px;
	left: 20px;
	padding: 0px 25px;
	padding-top: 35px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	box-sizing: border-box;
	z-index: 100;
}

#salmo .label {
	border: #CCC 1px solid;
	float: left;
	text-align: left;
	margin-right: 20px;
	color: #666;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 5px 20px;
	font-size: 1rem;
	cursor: pointer;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#salmo .label-aktivo {
	background-color: #096;
	color: #FFF;
}

#salmo .audio-mp3 {
	width: 280px;
	height: 40px;
	float: left;
	margin-bottom: 45px;
}

#salmo .partitura {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 15px;
}

#salmo .video {
	width: 100%;
	height: 550px;
	float: left;
	margin-top: 15px;
}

#salmo .partitura-txt {
	font-size: 1.1rem;
	font-weight: bolder;
	color: #F60;
}

#salmo audio.responso::-webkit-media-controls-panel {
	background-color: #999;
}

#salmo audio.responso::-webkit-media-controls-play-button {
	background-color: #FFF;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

#salmo audio.salmo::-webkit-media-controls-panel {
	background-color: #DDD;
}

#salmo audio.salmo::-webkit-media-controls-play-button {
	background-color: #AAA;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

#salmo .lector {
	width: 100%;
	color: #000;
	text-align: left;
	margin-bottom: 0.2em;
}

#salmo .pueblo {
	width: 100%;
	color: #06F;
	text-align: left;
	margin-bottom: 2em;
}

.version-esquema {
	display: none;
}

.ico-link {
	position: relative;
	background-color: #05B;
	width: 40px;
	height: 40px;
	line-height: 40px;
	float: left;
	text-align: center;
	color: #FFF !important;
	margin-bottom: 20px;
	cursor: pointer;
}

.ico-link:hover {
	background-color: #333;
	text-decoration: none;
}

.ico-link-aktivo {
	background-color: #094 !important;
}

.ico-link-vacio {
	border: #FFF 1px solid;
/*	background-color: #F60;*/
	background-color: #F00;
	position: absolute;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #FFF;
	font-size: 14px;
	font-weight: bolder;
	top: -10px;
	right: -10px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	z-index: 50;
}

/*		Tomados de catequesis.css		*/
.inscripciones-titulo {
	width: 100%;
	height: 50px;
	line-height: 50px;
	float: left;
	margin-bottom: 50px;
	padding: 0px 15px;
	color: #FFF;
	text-align: left;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-sizing: border-box;
}

.ico-titulo {
	width: 40px;
	height: 40px;
	float: left;
	margin: 5px 0px;
	margin-right: 15px;
}

.bg-titulo-registro {
	background-color: #05B;
}

.version-letra {
	background-color: #EEE;
	position: relative;
	width: 100px;
	height: 35px;
	line-height: 35px;
	float: left;
	text-align: left;
	color: #900;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	margin-top: -40px;
	margin-right: 20px;
	margin-bottom: 35px;
	text-decoration: none !important;
	box-sizing: border-box;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.version-letra-cancion {
	background-color: #EEE;
	position: relative;
	width: 100px;
	height: 35px;
	line-height: 35px;
	float: left;
	text-align: left;
	color: #900;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	margin-right: 20px;
	text-decoration: none !important;
	box-sizing: border-box;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.sin-version-letra {
	background-color: #F00;
	position: absolute;
	width: 15px;
	height: 15px;
	right: -7px;
	top: -7px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	z-index: 50;
}

.mnu-esquema {
/*	color: #094 !important;*/
	color: #666 !important;
}

.mnu-acordes {
/*	color: #F60 !important;*/
	color: #666 !important;
}

.mnu-letra {
	color: #666 !important;
}

.mnu-esquema-aktivo {
	background-color: #094;
	color: #FFF !important;
}

.mnu-acordes-aktivo {
	background-color: #F08;
	color: #FFF !important;
}

.mnu-letra-aktivo {
	background-color: #666;
	color: #FFF !important;
}

.txt-menu {
	display: block;
}

.ico-menu {
	display: none;
}

.color-playera-main {
	position: absolute;
	width: 55px;
	height: 75px;
	right: 0px;
	top: 45px;
	z-index: 50;
}

.color-playera {
	width: 35px;
	height: 50px;
	float: left;
	margin-left: 20px
}

.color-playera-txt {
	width: 100%;
	height: 20px;
	float: left;
	margin-top: 5px;
	text-align: center;
	font-size: 13px;
}

.playeras-tabla {
	width: 100%;
	float: left;
	display: table;
}

.playeras-tabla-tr-titulo {
	width: 100%;
/*	height: 140px;*/
	float: left;
	display: table-cell;
}

.playeras-tabla-tr {
	width: 100%;
	height: 40px;
	line-height: 40px;
	float: left;
	display: table-cell;
}

.playeras-tabla-td-playera {
	border: #E5E5E5 1px solid;
	border-collapse: collapse;
	width: 60px;
/*	height: 140px;*/
	float: left;
	padding-top: 10px;
	text-align: center;
	box-sizing: border-box;
	display: table-row;
	overflow: hidden;
}

.playeras-tabla-td-nombre {
	width: 220px;
	height: 40px;
	line-height: 40px;
	float: left;
	padding: 0px 5px;
	text-align: left;
	color: #000;
	box-sizing: border-box;
	display: table-row;
}

.playeras-tabla-td-concepto {
	width: 90px;
	height: 40px;
	line-height: 40px;
	float: left;
	padding: 0px 5px;
	text-align: left;
	color: #000;
	box-sizing: border-box;
	display: table-row;
}

.playeras-tabla-td {
	border: #E5E5E5 1px solid;
	border-collapse: collapse;
	width: 60px;
	height: 40px;
	line-height: 40px;
	float: left;
	text-align: center;
	padding: 0px 5px;
	box-sizing: border-box;
	display: table-row;
}

.playeras-nombre-color {
	width: 100%;
	float: left;
	text-align: center;
}

.playeras-img  {
	width: 50px;
	height: 70px;
	margin: 5px;
	display: inline-block;
}

.playeras-ico  {
	width: 20px;
	height: 20px;
	margin: 10px auto;
	display: inline-block;
	text-align: center;
}

.playeras-editar {
	width: 100%;
	float: left;
	display: table;
}

.playeras-editar-main {
	border: #B5B5B5 1px solid;
	background-color: #F2F2F2;
	border-collapse: collapse;
	width: 100%;
	float: left;
	padding-top: 10px;
	margin-bottom: 35px;
	text-align: center;
	box-sizing: border-box;
	display: table-row;
	overflow: hidden;
}

.playeras-editar-playera {
	border: #E5E5E5 1px solid;
	border-collapse: collapse;
	width: 100px;
	float: left;
	padding-top: 10px;
	text-align: center;
	box-sizing: border-box;
	display: table-row;
	overflow: hidden;
}

.playeras-editar-img {
	width: 50px;
	height: 70px;
	margin: 5px;
	display: inline-block;
}

.playeras-editar-nombre-color {
	width: 100%;
	float: left;
	text-align: center;
}

.playeras-editar-titulo {
	width: 100%;
	float: left;
	margin: 10px 0px;
	text-align: center;
}

.playeras-editar-form {
	width: -moz-calc(100% - 100px);
	width: -webkit-calc(100% - 100px);
	width: -o-calc(100% - 100px);
	width: calc(100% - 100px);
	float: left;
	padding: 5px;
	box-sizing: border-box;
	text-align: left;
}

.playeras-editar-label {
	width: 100px;
	height: 30px;
	line-height: 30px;
	float: left;
	font-weight: bold;
	margin-bottom: 5px;
}

.playeras-editar-data {
	width: -moz-calc(100% - 100px);
	width: -webkit-calc(100% - 100px);
	width: -o-calc(100% - 100px);
	width: calc(100% - 100px);
	height: 30px;
	line-height: 30px;
	float: left;
	margin-bottom: 5px;
}

.playeras-editar-input {
	border: none;
	background-color: transparent;
	width: -moz-calc(100% - 10px);
	width: -webkit-calc(100% - 10px);
	width: -o-calc(100% - 10px);
	width: calc(100% - 10px);
	height: 30px;
	line-height: 30px;
	padding: 0px 5px;
	float: left;
	margin-bottom: 10px;
	box-sizing: border-box;
}

.playeras-editar-select {
	border: #333 1px solid;
	background-color: transparent;
	width: -moz-calc(100% - 10px);
	width: -webkit-calc(100% - 10px);
	width: -o-calc(100% - 10px);
	width: calc(100% - 10px);
	height: 30px;
	line-height: 30px;
	padding: 0px 5px;
	float: left;
	margin-bottom: 10px;
	box-sizing: border-box;
}

.bg-playeras-amarillo {
	background-color: #FFC;
}

.btn-playeras {
	width: auto;
	height: auto;
	line-height: normal;
	border: #FFF double 4px;
	background-image: url(imagenes/bg-azul.jpg);
	padding: 10px 20px;
	float: right;
	color: #FFF;
	margin: 10px;
	margin-top: -25px;
	box-sizing: border-box;
	font-weight: bolder;
}

.bg-color-playera {
	border: #666 1px solid;
	width: 20px;
	height: 20px;
	display: inline-block;
	margin: 5px 3px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

.color-rojo {
	background-color: #F00;
}

.color-verde-aqua {
	background-color: #BEE;
}

.color-verde-lima {
	background-color: #9D7;
}

.color-verde-bandera {
	background-color: #074;
}

.color-azul {
	background-color: #24b;
}

.color-blanca {
	background-color: #EDEDED;
}

.color-morado {
	background-color: #437;
}

.color-negro {
	background-color: #222;
}

.btn-fuente{
	/*/position: absolute;*/
	border: #000 1px solid;
	background-color: #05B;
	width: 25px;
	height: 25px;
	margin-left: 10px;
	text-align: center;
	line-height: 25px;
	color: #FFF !important;
	font-size: 2.4em;
	bottom: 40px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	z-index: 250;
}

.btn-ver-fijo {
	position: fixed;
	width: 30px;
	height: 30px;
	bottom: 65px;
	left: 15px;
	z-index: 250;
}

.btn-editar-fijo {
	position: fixed;
	width: 30px;
	height: 30px;
	bottom: 15px;
	left: 15px;
	z-index: 250;
}