/*
CSS Para PicLab
áéúíó
*/

html, body {
	margin:0;
	padding:0;
	height:100%;
}

body {
	background-color:#262626;
	color:#a1a1a1;
	font-family: Consolas,monospace;
	font-size:12px;
}


a {
	color:#c0c0c0;
	outline:none;
	text-decoration: none;
}


a:hover {
	color:#ffffff;
}

a img {
	outline: none;
	border: 0;
}


.trans, div.menu a, div.piclablist ul li a {
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
}

.notrans {
	transition: all 0.0s ease-in-out;
	-moz-transition: all 0.0s ease-in-out;
	-webkit-transition: all 0.0s ease-in-out;
	-o-transition: all 0.0s ease-in-out;
	-ms-transition: all 0.0s ease-in-out;
}

/* ------------ Genéricos para menús -------------- */
div.menu ul {
	padding:0;
	margin:0;
	list-style: none;
}
	div.menu ul li {
		padding:0;
		margin:0;
	}
		div.menu ul li a {
			display:block;
		}





/* Elementos concretos */
div#debug {
	display:none;
	position:fixed;
	top:16px;
	left:16px;
	white-space: pre;
	font-family: Consolas, monospace;
	font-size:11px;
	background-color:rgba(0,0,0,0.7);
	color:#20ff40;
	border-radius: 8px;
	padding:10px;
	z-index:10000;
}

div#container {
	position:relative;
	min-height:100%;
}

div#content {
	position:relative;
	padding:0 0 0 0;
}

/* http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page */
div#footer {
	position:fixed;
	bottom:0px;
	right:0px;
	width:64px;
	height:32px;
	background-color: #151515;
	opacity:0.4;
	cursor:default;
}
	div#footer div.info {
		margin:2px 4px 0 0;
		text-align: right;
		font-size:11px;
		letter-spacing: -1px;
	}



div#imagemenumain {
	position:absolute;
	top:0px;
	right:0px;
	width:64px;
	min-height:100%;
	background-color:#535353;
	text-align: center;
	opacity: 0.5;
}

div#imagemenumain:hover {
	opacity: 0.6;
}
	
	div#imagemenumain li.separator {
		height:16px;
	}
	

	div#imagemenumain li a {
		width:56px;
		height:56px;
		margin:4px;
		text-align:center;
		font-family: 'Yanone Kaffeesatz', sans-serif;
		font-weight:400;
		font-size:22px;
		line-height:53px;
		text-transform: uppercase;
	}

	div#imagemenumain li a.type {
		width:52px;
		height:52px;
		color:#909090;
		border:2px dashed #909090;
		border-radius: 6px;
	}
	div#imagemenumain li a.small {
		font-size:15px;
		line-height:18px;
	}

	div#imagemenumain li a.type:hover {
		color:#c0c0c0;
		background-color:#909090;
		border:2px dashed #707070;
	}

	div#imagemenumain li a.selected {
		border:2px solid transparent;
		color:#ffffff;
		background-color:#a0a0a0;
	}
	div#imagemenumain li a.selected:hover {
		border:2px solid transparent;
		color:#ffffff;
		background-color:#a0a0a0;
	}

	div#imagemenumain li.final a {
		border:2px dashed #a0e0a0;
	}

	div#imagemenumain li.final a.selected {
		color:#000000;
		background-color:#a0e0a0;
	}
	div#imagemenumain li.final a.selected:hover {
		background-color:#a0e0a0;
	}

	div#imagemenumain li a.func {
		border-radius: 48px;
	}
	div#imagemenumain li a.func:hover {
		background-color:#707070;
	}

	div#imagemenumain li a.on {
		color:#ffffff;
		background-color:#a0a0a0;
	}
	div#imagemenumain li a.on:hover {
		background-color:#e0e0e0;
	}

	div#imagemenumain li span {
		cursor:default;
		color:#303030;
		letter-spacing: -1px;
	}





/* Los títulos de la pantalla principal */
div.maintitles {
}
	div.maintitles h1 {
		margin:0px 0 0 8px;
		padding:0;
		font-family: 'Yanone Kaffeesatz', sans-serif;
		font-weight:400;
		font-size:40px;
		color:#606060;
	}
	div.maintitles blockquote {
		margin:0 0 0 32px;
		font-family: 'Segoe UI', 'Helvetica', sans-serif;
	}










div.verticalmenuarea {
	position:absolute;
	top:0px;
	right:66px;
	width:48px;
	min-height:100%;
	overflow:hidden;
}



/* La lista de imagenes en la pantalla principal y en la de detalle*/
div#imagelist {
	display:block;
	overflow:auto;
}

div.piclablist {
	overflow:auto;
}
div#imagelist div.piclablist {
}
div#imagelab div.piclablist {
	position:absolute;
	top:0px;
	left:0px;
	width:48px;
	overflow:hidden;
	/*
	transition: top 0.8s ease-in-out;
	-moz-transition: top 0.8s ease-in-out;
	-webkit-transition: top 0.8s ease-in-out;
	-o-transition: top 0.8s ease-in-out;
	-ms-transition: top 0.8s ease-in-out;
	*/
}

	div.piclablist div.data {
		display:none;
	}


	div.piclablist ul {
		padding:0;
		margin:0;
		overflow:auto;
		list-style: none;
	}
	div#imagelist div.piclablist ul {
		padding:32px 32px 32px 32px;
	}
	div#imagelab div.piclablist ul {
	}


		div.piclablist ul li {
			float:left;
			padding:0;
			margin:0;
		}
		div#imagelist div.piclablist ul li {
			margin:0px 4px 4px 0;
		}
		div#imagelab div.piclablist ul li {
			width:48px;
			height:48px;
			margin:0;
		}

			div.piclablist ul li a {
				display:block;
			}
			div#imagelist div.piclablist ul li a {
				display:block;
			}
			div#imagelab div.piclablist ul li a {
				opacity:0.5;
			}

			div.piclablist ul li a:hover {
			}
			div#imagelist div.piclablist ul li a:hover {
				transform: scale(1.2,1.2);
				-ms-transform: scale(1.2,1.2); /* IE 9 */
				-webkit-transform: scale(1.2,1.2); /* Safari and Chrome */
				-o-transform: scale(1.2,1.2); /* Opera */
				-moz-transform: scale(1.2,1.2); /* Firefox */

				/* http://www.css3.info/preview/box-shadow/ */
				-ms-box-shadow: 0 0 7px 7px rgba(0,0,0,0.7);
				-o-box-shadow: 0 0 7px 7px rgba(0,0,0,0.7);
				-moz-box-shadow: 0 0 7px 7px rgba(0,0,0,0.7);
				-webkit-box-shadow: 0 0 7px 7px rgba(0,0,0,0.7);
				box-shadow: 0 0 7px 7px rgba(0,0,0,0.7);
			}
			div#imagelab div.piclablist ul li a:hover {
				opacity:1;
			}

				div.piclablist ul li a img {
					display:block;
				}
				div#imagelist div.piclablist ul li a img {
					border:1px solid black;
				}
				div#imagelab div.piclablist ul li a img {
					width:44px;
					height:44px;
					border:2px solid transparent;
				}

				div#imagelist div.piclablist ul li.selected a img {
					border:1px solid #a0ff00;
				}
				div#imagelab div.piclablist ul li.selected a img {
					border:2px solid #a0ff00;
				}











/* El visor de imagen grande */
div#imagelab {
	position:relative;
	display:none;
}

div#imagelab div.final{
	position:relative;
	display:block;
}
div#imagelab div.original{
	position:relative;
	display:none;
}

div#imagelab div.autoresize img{
	cursor:pointer;
}





/* La imagen que se auto resize
   http://blog.kurtschindler.net/post/flexible-dynamically-resizing-images-with-css
*/

div.autoresize {
	max-width:1600px; /* Sobrecargado en el código */
}
	div.autoresizeXXX img {
		max-width: 100%;
		width:auto;
		height: auto;
		width: auto\9; /* ie8 */
		max-height: 100%;  /* Esto escalaba bien el alto en Chrome y Safari, pero no en el resto, por lo que se cambió por definir directamente el alto en jQuery */
	}



/* Los cuadros OVERLAY */
div#imagelab div.overlayinfo {
	position:absolute;
	overflow:auto;
	/*pointer-events:none;*/
	padding:5px;
	background:rgba(0,0,0,0.6);
	color:rgba(200,200,200,1);
	font-family: 'Segoe-UI', Helvetica, sans-serif;
	font-size:12px;
	opacity:0.5;
}
div#imagelab div.overlayinfo:hover {
	opacity:1;
}


/* El cuadro de INFO */

div#imagelab div.info {
	top:0px;
	right:116px;
	width:200px;
}
	div#imagelab div.info div.n {
		font-family: 'Yanone Kaffeesatz', sans-serif;
		font-weight:700;
		font-size:20px;
	}

	div#imagelab div.info div.tc {
	}
	div#imagelab div.info div.sw {
		font-weight: bold;
		color:rgba(150,150,150,1);
	}



/* El cuadro de EXIF */

div#imagelab div.exif {
	display:none;
	bottom:0px;
	right:116px;
	width:200px;
}

	div#imagelab div.exif table td {
		font-size:11px;
		color:rgba(120,120,120,1);
	}
	div#imagelab div.exif table td.val {
		font-family: 'Consolas', monospace;
		color:rgba(200,200,200,1);
	}