/*
	Alex Lillo
	www.nordic-design.net
	Feel free to copy and reuse this code!
	upgraded with new CSS media queries steroids!
*/

body {
	background: #fff url("../images/fondo.gif") 0 0 repeat-x;
	height: 100%;
	margin: 0;
	font-size: 80%;
	font-family: "Arial", "Lucida Grande", arial, sans-serif;
	line-height: 145%;
}

#contenedor {position: absolute;left: 50%;top: 0;margin-left: -384px;width: 770px;}
html>body #contenedor {margin-left: -385px;}

/* elementos HTML */
p, td, li {font: 1.1em/145% Arial, "Lucida Grande", sans-serif;color: #323232;}
a {color: #43BC27;}	
a:visited, a:hover {	color: #2B8317;}

blockquote { border-left: 3px solid #ccc;margin: 1em;padding: 0 1em;}

/* genéricos */
.oculto { position: absolute; top: -9000px; left: -9000px;}

/* estructura página */
#cabecera {
	position: relative;
	top: 0;
	width: 770px;
	height: 139px;
	background: #fff url("../images/cabecera.jpg") 0 0 no-repeat;
}

#cabecera h1 {
	text-indent: -4000px;
	margin: 0;
}

/* menú de navegación *******************************************/

#navegacion {position: absolute;	top: 0;	left: 11px;}	
#navegacion ul {	display: inline;margin-left: 0;	padding-left: 0;}
#navegacion ul li {	display: inline;list-style: none;margin: 0;	padding: 0;}

#navegacion ul li a {
	float:left;
	display: block;
	width: 81px;
	height: 20px;
	background: url("../images/menu_fondo.gif") 0 0 no-repeat;
	text-decoration: none;
	font: bold 0.9em "Trebuchet MS",arial,helvetica,sans-serif;
	padding: 6px 0 0 10px;
	margin: 0;
	color: #fff;
}


#navegacion a:hover {background-position: 0 -26px;color: #43BC27;}
#navegacion a.activo { background-position: 0 -52px; color:#fff; cursor:default;}

/* contenido *******************************************/

#contenido {	float: left;margin: 0 0 0 4px;width: 540px;}
#contenido h2 {color: #43BC27;font: bold 2em "Trebuchet MS", arial,sans-serif; margin-bottom:0;}
#contenido h3 { margin-bottom:0;}
#contenido h3 a {	color: #43BC27;	font: bold 1.5em "Trebuchet MS", arial,sans-serif;	text-decoration: none;}

#contenido .fecha {font: bold 1.5em "Trebuchet MS", arial,sans-serif;color: #777; margin-top: 0;}
#contenido .archivado { border-top:1px dotted #ccc;}
.errorCom { color:#c00; font-weight:bold; list-style:none; padding: 1em; border:2px solid #c00; margin:2em 0;}
#contenido .even { background:#f2f3f4; padding: .5em .5em .5em 3em;; border-bottom:1px solid #ccc;}
#contenido .odd { padding: .5em .5em .5em 3em;; border-bottom:1px solid #ccc;}
.comment-num { float:left; color:#43BC27; font: bold 2em "trebuchet ms",arial,helvetica,sans-serif; margin: .5em 0 0 -1em;}
html>body #contenido .owner { background-image: url("../images/owner.png"); background-position:top right; background-repeat:no-repeat;}
#contenido .commentDijo { color: #888;}

#contenido .float {
	padding: 3px;
	border: 1px solid #E3E3E3;
	margin: 4px;
}	

#contenido .right {
	float: right;
}	

#contenido .left {
	float: left;
}

html>body #contenido {
	margin: 0 0 0 8px;
}

.relacionados { background: #f2f3f4; padding: 0.5em; border-left: 3px solid #363;}

/* menús laterales *******************************************/


#lateral {
	position: relative;
	float: left;
	width: 213px;	
	margin: 0 0 0 15px;
}

html>body #lateral {
	width: 200px;
}

#lateral .caja {
	background: #F2F6F3 url("../images/lateral_fondo.gif") 0 0 no-repeat;
	padding: 2px 5px;
	border: thin solid #E5EBE5;
	margin-bottom: 10px;
}

#lateral .google {
	padding: 10px 40px;
}	

#lateral .caja h2 {
	font: bold 1.5em/150% "Trebuchet MS", arial,sans-serif;
	color: #363;
	margin: 0 0 0.5em;
	border-bottom: thin dotted #3c3;
}

#lateral .disco img {
	padding: 3px;
	border: 1px solid #ccc;
	float:left;
	margin: 0 3px 8px 0;
}	

#lateral .disco p {
	margin: 0 0 0.3em;
	font: 0.8em verdana,sans-serif;
}

#lateral .disco h3 {
	font: bold 1em "Trebuchet MS", "Lucida Grande", arial,sans-serif;
	margin: 0 0 0.3em;
}

/***************** contacto ***********************/

#contacto {
	padding: 2em 0 0 0;
	border-top: 1px solid #ccc;
 margin: 1em 0 0;
}	

#contacto dt {
	clear: left;
	float: left;
	width: 6em;
    line-height: 1.5em;
	text-align: right;
	padding: 0 .3em 0 0;
}

#contacto dd { height: 2.8em; }
html>body #contacto dd { min-height:2.8em; height:auto;}

#contacto input { width: 15em; }
#contacto input.inputCorto { width: 3em;}
#contacto input.enviar { width: auto; clear: left; }


/* pie *******************************************/

#pie {
	clear: both;
	text-align: center;
	height: 29px;
	border-top: 1px solid #ccc;
}
	
#pie p {
	color: #3C3F3C;
	font: 1em/200% "Trebuchet MS", arial,sans-serif;	
}

#pie img { border:none;}


/* now if media queries steroids */
@media only screen and (max-device-width: 480px) {
body {
	background: #fff;
	background-image: none;
	font-size: 100%;
	font-family: helvetica, arial, sans-serif;
	line-height: 135%;
}

#contenedor {position: relative;left: 0;top: 0;margin: 0 5px 5px 5px;width: 460px;}
html>body #contenedor {margin-left: 0;}
#cabecera {	width: 100%;height: auto;background: #fff;} 

#cabecera h1 {	text-indent: 0;	margin: 0; padding:15px 0 0;}
#navegacion {position: relative; top: 0;left: 11px; margin: 0 0 10px;}	
#lateral { display: none;}
#contenido {float: none;margin: 0;width: 100%;}

}



/* fixes */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */