/* CSS Document */
	.paginas, .portada {
		border: outset 1px grey;
		border-radius: 5px;
		box-shadow: 8px 5px 15px black;
		position: absolute;
		top: 3%;
	}
		.portada {
			width: 30%;
			text-align: center;
			vertical-align: top;
			height: auto;
			left: 2%;
			transition: 1s;
			cursor: ew-resize;
		}
			.contra.portada {
				box-shadow: -8px 5px 15px black;
				-webkit-transform: rotateY(180deg); /* Safari */
				transform: rotateY(180deg);
				opacity: 0;
			}

		.paginas {
			background-color: #f2f2e8;
			vertical-align: top;
			padding: 2% 3%;
			color: black;
			width: 58%;
			right: 2%;
			height: 90%;
			position: fixed;
			overflow: auto;
		}
			.paginas h1 , .paginas h2 {
				width: 100%;
				text-align: center;
				margin: 5px;
			}
			.paginas #puntuacionLibro {
				width: 100%;
				text-align: center;
			}
			.paginas h3, .paginas select {
				font-size: 1.17em;
				border: none;
				background-color: transparent;
				font-weight: bold;
				margin: 0px 0px 10px;
			}
				.paginas select {
					cursor: pointer;
				}


			.paginas .pagina {
				display: none;
				position: absolute;
				width: 94%;
			}
				.paginas .pagina.mostrada {
					display: inherit;
				}
				.paginas .pagina table td.textos {
					vertical-align: top;
					width: 65%;
					padding-left: 5%;
				}

			.paginas span {
				display: inline-block;
				border-bottom: 1px solid silver;
				margin-bottom: 8px;
				padding: 2px 5px 0px;
			}
				.paginas span.etiqueta {
					width: 120px;
					border-bottom-left-radius: 5px;
				}
					.paginas span.etiqueta img {
						height: 40px;
					}
				.paginas span.dato {
					border-top-right-radius: 5px;
					border-bottom-right-radius: 5px;
					font-weight: bold;
				}
				.paginas span.postDato {
					font-size: 78%;
					margin-left: -1px;
					padding-left: 10px;
					border: none;
					line-height: 10px;
				}
				.paginas div.media {
					display: inline-block;
					width: 35px;
					padding-left: 5px;
					vertical-align: sub;
				}
				.paginas span.titulo {
					max-width: 300px;
					text-overflow: ellipsis;
					overflow: hidden;
					position: absolute;
					white-space: nowrap;
					margin: 2px 0px 0px -2px;
				}
					.paginas span.titulo:hover {
						white-space: normal;
						background-color: white;
						z-index: 10;
					}

			.paginas .album,
			.paginas .cancion {
				cursor: pointer;
			}
				.paginas .cancion {
					opacity: 0.7;
				}
			.paginas .album.cerrado .cancion,
			.paginas .cancion .info {
				display: none;
			}
				.paginas .album > span.dato:after {
					font-size: 60%;
					opacity: .5;
					content: "▲";
				}
					.paginas .album.cerrado > span.dato:after {
						content: "▼";
					}
				.paginas .cancion span.dato .spotify {
					background-image: url(/_img/spotify.png);
					height: 15px;
					width: 50px;
					display: inline-block;
					background-size: cover;
				}
				.paginas .cancion span.dato .icono:after {
					content: "►";
				}
					.paginas .cancion.sonando .info {
						display: inherit;
						font-size: 75%;
						padding-left: 30px;
					}
					.paginas .cancion.sonando span.dato .icono:after {
						content: "■";
					}

				.paginas .cancion.enAlbum {
					margin-left: 50px;
				}
					.paginas .cancion.enAlbum .dato{
						background: none;
					}
					.paginas .album > span.etiqueta, 
					.paginas .cancion > span.etiqueta {
						width: 30px;
					}

			.paginas a {
				text-decoration: none;
				color: black;
			}
				.paginas .cancion a:after {
					font-size: 60%;
					opacity: .5;
					content: " ►";
				}
			.paginas audio {
				margin: 5px 0px 20px;
				display: block;
				width: 90%;
				opacity: 0.3;
			}
				.paginas audio + span.cargando {
					border: none;
					margin: -54px 0px 0px 50px;
					position: absolute;
					font-size: 20px;
					font-weight: bold;
					color: red;
					text-shadow: white 0px 0px 3px;
				}
				.paginas audio.cargado {
					opacity: 1;
				}
					.paginas audio.cargado + span.cargando {
						display: none;
					}
			
			.paginas .imagenes img.mini {
				position: relative;
				width: 30%;
				height: auto;
				vertical-align: top;
				margin: 0% 2% 2% 0%;
				border-radius: 20px;
				box-shadow: 0px 0px 10px black;
				transition: 0.3s;
				z-index: 0;
				cursor: cell;
			}
				.paginas .imagenes img.mini:hover {
					width: 34%;
					margin: -3% 0% -1% -2%;
					box-shadow: 0px 0px 20px black;
					z-index: 2;
				}
	
	.flota.imagen {
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		margin: 4%;
		text-align: center;
	}
		.flota .flecha {
			width: 10%;
			position: absolute;
			top: 0px;
			bottom: 0px;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			padding: 0px 10px;
			
			background-color: white;
			opacity: 0.08;
			transition: 0.5s;
			cursor: pointer;
		}
			.flota .flecha:hover {
				opacity: 0.5;
			}
			.flota .flecha.dcha {
				right: 0px;
				background-image: url("/_img/flecha.dcha.png");
			}
			.flota .flecha.izda {
				left: 0px;
				background-image: url("/_img/flecha.izda.png");
			}
		.flota.imagen .desc {
			background-color: white;
			color: black;
			display: inline-block;
			padding: 3px 10px;
			border-radius: 5px;
			opacity: 1;
			box-shadow: 0px 4px 5px;
			background-image: url("/_img/fondo.metal.jpg");
			border: groove grey 3px;
			margin-top: -1%;
			font-weight: bold;
		}

	.overRadio {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		position: relative;
		box-shadow: 1px 2px 5px grey;
		display: inline-block;
		opacity: 0.7;
		transition: 0.5s;
		margin-bottom: 4px;
		box-sizing: border-box;
	}
		.overRadio:hover {
			opacity: 1;
		}
		.overRadio[media^="0"] {
			background-color: #f00;
		}
		.overRadio[media^="1"],
		.overRadio[media^="2"],
		.overRadio[media^="3"] {
			background-color: #fa0;
		}
		.overRadio[media^="4"],
		.overRadio[media^="5"],
		.overRadio[media^="6"] {
			background-color: #f0ce2d;
		}
		.overRadio[media^="7"],
		.overRadio[media^="8"],
		.overRadio[media^="9"] {
			background-color: #9ee63f;
		}
		.overRadio[media="10"] {
			background-color: #0f0;
		}
	.overRadio input {
		visibility: hidden;
	}
	.overRadio label {
		width: 17px;
		height: 17px;
		border-radius: 50%;
		background: #dadada;
		display: block;
		cursor: pointer;
		position: absolute;
		top: 0px;
		left: 0px;
		margin: 5px 6px;
		z-index: 1;
		box-sizing: border-box;
	}
	.overRadio input[type=Radio]:checked + label {
		background-color: #ff0;
	}