﻿
	html{
		margin: 0px;
	}
	
@media screen{
	body{
		color: #DFDFDF;
		margin: 0px;
		background-color: #2A2A2A;
		font-family: sans-serif;
	}
}
	
	a{
		text-decoration: none;
	}

	#todo{
		margin: auto;
		position: relative;
		width: 95%;
	}
	
	.correo.oculto{
		cursor: pointer;
	}
	.correo.visible{
		color: #F5F;
		text-align: center;
	}
	
/*	REGLAS COMPARTIDAS	*/


	#cabecera
,	#cuerpo
,	#lateral
,	#pagina
,	#pie{
		box-sizing: border-box;
		width: 100%;
		display: block;
		position: relative;
	}

	
	
	#cabecera
,	#cuerpo
,	#pie{
		border-color: #1D3D5D;
		border-style: solid;
	}
	

	#cabecera
,	#pie{
	/*		88 del gif + 4 de borde = box-sizing	*/
		min-height: 92px;		
	}
	
	
/*	CABECERA: CONTENEDOR TITULO	*/

	#cabecera{
		border-width: 0 4px 4px 4px;
		border-radius: 0 0 15px 15px;
		background-image: url('../multimedia/bg_header.gif');
		background-image: linear-gradient(#204063, #162F4A);
	}
	#cabecera  *{
		font-family: Arial;
		color: inherit;
		display: inline-block;
		border: 0px;
	}
	
@media screen{
	#cabecera > *:not(#titulo){
		max-width: 250px;
	}
}

	#cabecera a{
	}
	
/*	TITULO: CONTENEDOR HEADING 1, SUBTITULO Y LOGO ::BEFORE	*/
@media screen{
	#titulo{
		position: relative;
		margin-left: 90px;

	}

	#titulo::before{
		content:"";
		width: 60px;
		height: 60px;
		position: absolute;
		background-image: url('../multimedia/logo.png');
		left: -75px;
		top: calc(50% - 30px);
	}
}
	#titulo h1{
		font-size: 1.66rem;
		font-size: calc(20 /12 * 1rem);
		
	/*	margin-bottom: 0px;*/
	}
/*		SUBTITULOS ES EN	*/
	#titulo h1 ~ span.subtitulo{
		top: -15px;
		font-size: 0.66rem;
		font-size: calc(8 /12 * 1rem);
		position: relative;
		display: block;
	}

/* INPUT IDIOMA	*/

	input[id^="idioma"]{
		display: none;
	}
	
	#idioma_inglés:checked ~ #todo *[data-ui]:lang(es){
	/*	background-color: white;*/
		display: none;
	}
	#idioma_español:checked ~ #todo label[for="idioma_español"]{
		background-color: #555;
	}
	#idioma_español:checked ~ #todo *[data-ui]:lang(en){
		display: none;
	}
	#idioma_inglés:checked ~ #todo label[for="idioma_inglés"]{
		background-color: #555;
	}
	
	
	#idioma{
		font-size: 0.7em;
		position: absolute;
		right: 20px;
		bottom: 10px;
	}
	
	#idioma label[for^="idioma_"]{
		cursor: pointer;
		margin: 0 5px;
		border: 1px solid transparent;
		box-sizing: border-box;
		border-radius: 3px;
		padding: 1px 1px 1px 3px;
	}
	#idioma label:hover{
		border-bottom: 1px solid orange;
	}
	
	
	#idioma img[id^="idioma_icono_"]{
		position: absolute;
		top: -30px;
		right: 0px;
		left: 0px;
		margin: auto;
		height: 30px;
		width: auto;
		direction: ltr;
		text-align: center;
	}




/*	CUERPO: CONTENEDOR SIDEBAR Y PAGINA	*/


	#cuerpo{
		margin-top: 4px;
		margin-bottom: 4px;
		border-width: 4px;
		border-radius: 15px;
		border-color: #484848;
		background-color: #343434;
		overflow: hidden;
		display: table;
	}

/*		LATERAL		*/

	#lateral
,	#pagina{
		display: table-cell;
		padding: 0.1px;
		font-size: 0.83rem;
		font-size: calc(10 /12 * 1rem);
		vertical-align: top;
	}
	
	#contenido_lateral
,	#contenido_pagina{
	}

	#lateral{
		width: 175px;
		min-width: 175px;
		border-right: 4px solid #484848;
		background-color: #1A1A1A;
	}
	
	.inputlateral{
		display: none;
	}
	
	#contenido_lateral{
		position: relative;
		padding: 10px;
		min-height: calc(100vh - (92px * 2 + 4px * 4 + 10px * 2));
	}
	
	.seccion_lateral{
		position: relative;
	/*	text-align: justify;*/
		margin-bottom: 30px;
	/*	border: 1px solid pink;*/
	}
	.seccion_lateral a{
		color: inherit;
	}
	.seccion_lateral > *:not(.titulo_seccion_lateral){
		line-height: 1.4em;
	}

	
	.seccion_lateral .titulo_seccion_lateral span::before{
		content: "";
		display: inline-block;
		position: absolute;
		left: 0px;
		width: 20px;
		background-repeat: no-repeat;
	}
	
	.titulo_seccion_lateral{
		color: #CBCE55;
		margin-left: 25px;
	}
	
	.seccion_lateral.licencia ul
,	#plegadoLicencia
,	#pliegoContacto
,	#plegadoContactoDonaciones
	{
		display: none;
	}

	
/*	LICENCIA */

	.seccion_lateral.licencia .titulo_seccion_lateral span::before{
		height: 16px;
		background-image: url('../multimedia/licencia.png');
	}
	

	label[for="plegadoLicencia"]
,	label[for="plegadoContactoDonaciones"]{
		cursor: pointer;
	}
	
	
	.seccion_lateral.licencia ul > li{
		margin-left: -30px;
		list-style-type: none;
	}
	.seccion_lateral.licencia ul > li::before{
		content: "-";
		margin-left: -8px;
		position: absolute;
	}
	
	
	#plegadoLicencia:checked ~ div > ul{
		display: block;
	}
	
	
/*	CONTACTO Y DONACIONES */

	.contactoydonaciones{
		display: block;
	}
	.contactoydonaciones:lang(es){
		margin-left: 25px;
	}
	.contactoydonaciones:lang(en){
		margin-left: 8px;
	}
	.seccion_lateral#contactoydonaciones .titulo_seccion_lateral span::before{
		height: 16px;
	}
	#contactoydonaciones .contacto::before{
		content: "@"!important;
	}
	#contactoydonaciones .donaciones::before{
		background-image: url('../multimedia/moneda.png');
	}
	
	#plegadoContactoDonaciones:checked + #pliegoContacto{
		display: block;
	}
	

/*	PRIVACIDAD */

	.seccion_lateral.privacidad .titulo_seccion_lateral span::before{
		height: 18px;
		background-image: url('../multimedia/lupa3.png');
	}

	
/*
									##########################

											PAGINA		
										
									##########################
*/

	#pagina{
		width: auto;
	/*	width: calc(100% - 175px - 4px);*/
	}
/*	PARA PODER TENER CONTROLADO EL ALTO MINIMO	*/
	
	#contenido_pagina{
		padding: 35px;
		position: relative;
		text-align: justify;

		
	/*		viewport height - ( cabecera y pie	+ bordes internos + padding top-bottom contenido pagina)		*/

		min-height: calc(100vh - (92px * 2 + 4px * 4 + 35px * 2));
	}
	
	#contenido_pagina h2.titulo_de_pagina
,	ol.lista_todos_los_años .numeroAño{
		color: #5A9BE2;
		margin-bottom: 40px;
		line-height: initial;
	}
	
	#contenido_pagina > article{
		line-height: 1.4em;
		margin-bottom: -20px; 		/*	collapsing margin */
	}
	
/*	#textoDelContenido	*:last-child{
		margin-bottom: 50px;			collapsing margin 
	}
*/
	

	#contenido_pagina a{
		color: #74C85B;
	}
	#contenido_pagina a:hover{
		color: #94E87B;
	/*	color: #5A9BE2;*/
	}
/*		ENLACES EXTERNOS DENTRO DEL CONTENIDO	*/


@media screen{
	/*[href*="/pueblerino117/"]*/
	#contenido_pagina a[target="_blank"]::after{
		content: "";
		margin-left: 3px;
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../multimedia/enlace_externo_sprite.png');
		background-repeat: no-repeat;
		vertical-align: top;
		background-position: -10px 0;
	}
	/*:not([href*="geocities.ws/pueblerino117/"]) [target="_blank"]*/
	#contenido_pagina a[target="_blank"]:hover::after{
		background-image: url('../multimedia/enlace_externo_sprite.png');
		background-position: 0 0;
	}
}

	#contenido_pagina.temporal{
		/*text-align: center;
		word-wrap: break-word;*/
	}
	
/*		MAQUETADO DE CONTENIDO		*/


	div.textoDelContenido p{
		text-indent: 2em;
	}
	
	div.textoDelContenido  ul:not(.indexbox){
		list-style-type: none;
	}
	
	div.textoDelContenido ul:not(.indexbox) > li/*:not(:first-child)*/{
		margin-top: 1em;
		margin-left: 1.2em;
	}
	
	div.textoDelContenido ul:not(.indexbox) > li::before{
		content: "-";
	/*	margin-right: 5px;*/
		margin-left: -1em;
		position: absolute;
	}

/*		HEREDADO DE CUANDO USABA Y MODIFIQUE LA PLANTILLA DE BLOGGER	*/
	
	div.pre{ /* pre mimic intento */
		font-family: monospace;
		/*	white-space: pre;*/ /* ni pre ni div.pre la puta anchura la coge en función del contenido, así que, monospace a secas y que le den al pre*/
	}
	div.pre,pre{
		color:#FFF984;
		background-color:#484848;
		overflow:auto;
		margin: auto;
		max-width: 85%;
		padding: 30px;
	}

	.nombres_propios{
		font-style: italic;
		color: #eeBB55;
	}

	blockquote {
		/*margin-left:100px;
		margin-right:100px;*/
		margin: 2em auto;
		width:65%;
		padding: 0 10px 0 10px;
		border-left: 6px solid #d8e7f7;
		border-right: 6px solid #d8e7f7;
		color: #5A9be2;
	}
	.sangrado{
		margin-left: 1.2em;
	}
	.indexbox{
		border: 1px solid #AAA;
		padding: 0.5em 1em 0.5em 1em;
		display:inline-block;
		list-style-type: none;
		margin-top: 40px;
	}
	ul.indexbox, ul.indexbox ul{
		padding-left: 0.5em;
		list-style-type: none;
	}
	.indexbox li{
		margin-left: 1em;
	}
	.indexbox ul > li{
		margin-top: 0px!important;
	}
	.indexbox a{
		text-decoration: none;
	}
	.actualicita {
		margin: 2em 10%;
	/*	margin-bottom: 2em;
		margin-left:100px;
		margin-right:100px;*/
		padding: 10px 20px;
		color: #5A9be2;
		background-color: #484848;
		font-size: 0.66rem;
		font-size: calc(8 /12 * 1rem);
		font-style: italic;
	}
	.imagenflotantediv{
		position:relative;
		float:left;
		width:25%;
		padding:20px;
		font-size: 0.58rem;
		font-size: calc(7 /12 * 1rem);
	}
	.imagennoflotantediv{
		position:relative;
		/*	display: table-cell;*/
		display: inline-block;
		padding:20px;
		font-size: 0.58rem;
		font-size: calc(7 /12 * 1rem);
		text-align: center;
		margin: auto;
	}
	.imagennoflotantediv.unaimagensola{
		max-width: 480px;
		display:block;
		margin:auto;
	}
	.imagenflotantediv img,
	.unaimagensola img{
		width:100%;
	}
	.seccionEntrada{
		margin-top: 40px;
		margin-bottom: 20px;
	}

	
/*		MENSAJE DE BIENVENIDA		*/	
	
	#contenido_pagina .bienvenida{
		font-size: 1.2em;
		font-weight: bold;
	/*	border: 1px solid white;*/
		padding: 0 60px;
		margin-bottom: 60px;
	}
	.bienvenida > p:first-child{
	/*	margin-top: 0px;*/
	}
	
/*		FECHA DE PUBLICACION		*/	

	h5 > time{
		color: #8FACC8;
		font-weight: normal!important;
		margin-top: 0; /*collapsing margin */
	}
	
	h5 > time::before{
		content: "";
		width: 12px;
		height: 8px;
		display: inline-block;
		margin-left: -5px;
		margin-right: 5px;
		background-image: url('../multimedia/escrito.png');
		background-repeat: no-repeat;
	}

/*		PARA LA PAGINA DE PRIVACIDAD		*/	
	
	#contenido_pagina dl.privacidad{
		margin: 0 30px;
	}
	dl.privacidad > dt{
		font-weight: bold;
		font-style: italic;
	}
	
/*		PARA LA LISTA DE PUBLICACIONES		*/

	ol.lista_todos_los_años
,	ol.lista_un_año {
		list-style-type: none;
	}
	
	ol.lista_un_año{
		margin-top: -20px;
	}
	
	ol.lista_todos_los_años > li.añoLista:nth-child(n+2)
,	ol.lista_un_año > li.entradaAñoLista:nth-child(n+2){
		padding-top: 10px;
		/*border: 1px solid;*/
	}
	
	ol.lista_todos_los_años{
		padding-left: 0px;
	}

	ol.lista_todos_los_años > li.añoLista > ol.lista_un_año{
		padding-left: 35px;
	}
	
	ol.lista_un_año > li.entradaAñoLista{
		margin-bottom: 30px;
	}
	
	ol.lista_un_año > li.entradaAñoLista::before{
		content: "";
		width: 15px;
		height: 15px;
		display: inline-block;
		background-image: url('../multimedia/entrada.png');
		margin-left: -15px;
		position: absolute;
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: 0 5px;
	}
	
	ol.lista_un_año > li.entradaAñoLista > h4{
	/*	outline-style: none;*/
		display: inline;
	}

	div.resumenEntrada{
		color: #DFDFDF;
		padding-left: 30px;
		position: relative;
	/*	border: 1px solid transparent;*/
	}
	
	div.resumenEntrada > div{
		display: inline-block;
	}
	
	div.resumenEntrada > div > p:last-child::after{
		content: "...";
		display: inline-block;
	}

	#contenido_pagina ol.lista_todos_los_años > li > .numeroAño{
		font-family: monospace;
		color: #EA9B52;
	}
	
	ol.lista_todos_los_años > li:nth-child(n+1){
		margin-top: 35px;
	}





/*	PIE DE PAGINA	*/

	#pie{
		padding: 15px;
		border-width: 4px 4px 0 4px;
		border-radius: 15px 15px 0 0;
		background-image: url('../multimedia/bg_footer.gif');
		background-repeat: repeat-x;
		background-position: left top;
		background-color: #162F4A;
	}
	
	#contenedor_statcounter{
		position: relative;
		margin: auto;
		width: 200px;
		text-align: center;
	}
	#contenedor_statcounter a{
		color: #5A9BE2;
		font-weight: bold;
		font-size: 0.8em;
	}