/* 
Título:		Waakun, hoja maestra de estilos
Última modificación: 1o de Agosto, 2008
*/

/* Reset, no tocar
---------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
	vertical-align:baseline;
	font-size:inherit;
}
table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	text-align:left;
	font-weight:normal;
}
table, td, th { vertical-align:middle; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }
a img { border:none; }


/* TIPOGRAFIA
-------------------------------------------------------------------------------- */
body {
	font-size:small;
	line-height:1.45em;
	color:#333;
	font-family: "Trebuchet MS", Trebuchet, sans-serif;
	margin:15px 0;
	background: #eee url(../visual/bg_general_top.png) no-repeat center top;
	text-align:center;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:bold;
	color:#111;
	font-family: "Trebuchet MS", Trebuchet, GillSans, Calibri, sans-serif;
	margin-bottom:.55em;
}
h1 { font-size:225%;}
h2 { font-size:247%;  color:#666; }
h3 { font-size:144%;  color:#666;}
h4 { font-size:120%;  color:#888;}
h5 { font-size:100%;}
h6 { font-size:100%;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0; }
p {
	margin:0 0 10px;
	font-size:100%;
	text-align: left;
}
#contenido p img.flotada {
	float:right;
	margin: 0 0 25px 25px;
	padding:0;
}
#contenido p img.con-borde {
	padding: 1px;
	border: 1px solid #999999;
}
p img.right {
	float:right;
	margin:15px 0 15px 15px;
}
a:link { color:#6d9049; text-decoration:underline;}
a:visited { color:#6d9049; text-decoration:underline;}
a:hover, a:active { color:#8FB26B; text-decoration:underline;}
blockquote {
	margin:1.1em;
	color:#666;
	font-style:italic;
	background-color: #FFFFCC;
	float: right;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	width: 40%;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CC6600;
	border-bottom-color: #CC6600;
}
strong { font-weight:bold; }
em, dfn { font-style:italic; font-size:90%;}
dfn { font-weight:bold; }
sup, sub { line-height:0; }
abbr, acronym { border-bottom:1px dotted #666; }
address { margin:0 0 15px 15px; font-style:normal; font-size: 120%; font-family: "Courier New", Courier, monospace}
del { color:#666; text-decoration: line-through;}
pre, code { margin:15px 0; white-space:pre;}
pre, code, tt { font:100% 'andale mono', 'lucida console', monospace; line-height:1.5;}
li ul, li ol { margin:0 10px; }
ul, ol { margin:0 10px 10px 10px; }
ul { list-style-type:disc; }
ol { list-style-type:decimal; }
dl { margin:0 0 10px 0; font-size:90% }
dl dt { font-weight:bold; }
dd { margin-left:5px; }
table { margin-bottom:5px; width:99%; }
th { font-weight:bold; background:#C3D9FF;}
th, td { padding:4px 10px 4px 5px; }
tr.even td { background:#E5ECF9; }
tfoot { font-style:italic; }
caption { background:#eee; }

/* Estilos varios, efectitos y complementos, muletitas y sonseras ___________________ */
.top {margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0;}
.gutter { padding:15px; }
.box {
	padding: 10px;
	margin-bottom: 10px;
	background: #E5ECF9;
}
hr {
	background: #ddd;
	color: #ddd;
	clear: both;
	float: none;
	width: 100%;
	height: 1px;
	margin: 25px 0 25px;
	border: none;
}
hr.space {
	background: #fff;
	color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
#clearfix:after, #container:after, #contenedor:after, #pie:after, #navegacion:after, #encabezado:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.gutter, .relleno, .clearfix, .container, .contenedor, .autor, .about{ display: inline-block; }
* html .clearfix, * html .container { height: 1%; }
.clearfix, .container { display: block; }
/* Regular clearing apply to column that should drop below previous ones. */
.clear { clear:both; }

/* Columnas y reticula
------------------------------------------------------------------------------------------------------- */
.container {
	width:100%;
	margin:0 auto;
	background: url(../visual/bg_general.png) repeat-y center top;
	text-align:center;
}
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12 {float:left;margin-right: 25px;}
div.last {margin-right:0;}
.span-1  { width: 40px;}
.span-2  { width: 105px;}
.span-3  { width: 170px;}
.span-4  { width: 235px;}
.span-5  { width: 300px;}
.span-6  { width: 365px;}
.span-7  { width: 430px;}
.span-8  { width: 495px;}
.span-9  { width: 560px;}
.span-10 { width: 625px;}
.span-11 { width: 690px;}
.span-12, div.span-12 { width: 755px; margin: 0; }
.append-1  { padding-right: 65px;}
.append-2  { padding-right: 130px;}
.append-3  { padding-right: 195px;}
.append-4  { padding-right: 260px;}
.append-5  { padding-right: 325px;}
.append-6  { padding-right: 390px;}
.append-7  { padding-right: 455px;}
.append-8  { padding-right: 520px;}
.append-9  { padding-right: 585px;}
.append-10 { padding-right: 650px;}
.append-11 { padding-right: 715px;}
.prepend-1  { padding-left: 65px;}
.prepend-2  { padding-left: 130px;}
.prepend-3  { padding-left: 195px;}
.prepend-4  { padding-left: 260px;}
.prepend-5  { padding-left: 325px;}
.prepend-6  { padding-left: 390px;}
.prepend-7  { padding-left: 455px;}
.prepend-8  { padding-left: 520px;}
.prepend-9  { padding-left: 585px;}
.prepend-10 { padding-left: 650px;}
.prepend-11 { padding-left: 715px;}
div.border{padding-right:11.5px;margin-right:12.5px;border-right:1px solid #eee;}
div.colborder { padding-right:28.5px;margin-right:27.5px;border-right:1px solid #eee;}
.pull-1 { margin-left: -65px;}
.pull-2 { margin-left: -130px;}
.pull-3 { margin-left: -195px;}
.pull-4 { margin-left: -260px;}
.pull-5 { margin-left: -325px;}
.pull-6 { margin-left: -390px;}
.pull-7 { margin-left: -455px;}
.pull-8 { margin-left: -520px;}
.pull-9 { margin-left: -585px;}
.pull-10 { margin-left: -650px;}
.pull-11 { margin-left: -715px;}
.pull-12 { margin-left: -780px;}
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 {float:left;position:relative;}
.push-1 { margin: 0 -65px 1.5em 65px;}
.push-2 { margin: 0 -130px 1.5em 130px;}
.push-3 { margin: 0 -195px 1.5em 195px;}
.push-4 { margin: 0 -260px 1.5em 260px;}
.push-5 { margin: 0 -325px 1.5em 325px;}
.push-6 { margin: 0 -390px 1.5em 390px;}
.push-7 { margin: 0 -455px 1.5em 455px;}
.push-8 { margin: 0 -520px 1.5em 520px;}
.push-9 { margin: 0 -585px 1.5em 585px;}
.push-10 { margin: 0 -650px 1.5em 650px;}
.push-11 { margin: 0 -715px 1.5em 715px;}
.push-12 { margin: 0 -780px 1.5em 780px;}
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 {float:right;position:relative;}

/* Estructura 
--------------------------------------------------------------------------------*/
#encabezado {
	width:755px;
	margin:0 auto;
	
	text-align:left;
}

#navegacion {
	width:755px;
	margin:0 auto;
	text-align:left;
}
#contenedor {
	width:755px;
	margin:0 auto;
	text-align:left;
	background: url(../visual/bg_general.png) repeat-y center top;
	padding-top: 25px;
}
#contenido { }
#barra-lateral {

padding-top: 30px}
#pie {
	width:100%;
	margin:0 auto;
	text-align: left;
	padding-top: 50px;
	padding-bottom: 50px;
	background: url(../visual/bg_general_bottom.png) no-repeat center top;
}

/* Encabezado
-------------------------------------------------------- */
.logotipo {
	margin:0;
	padding:0;
	position:relative;
	width:300px;
	height:45px;
	overflow:hidden;
	cursor:pointer;
	float:left;
}
.logotipo a span{ text-decoration:none; text-indent:-999em; }
.logotipo span {
	cursor:pointer;
	display:block;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	width:300px;
	height:45px;
	margin:0;
	padding:0;
	background:url(../visual/logo_cuatromedios.png) no-repeat left top;
}

/* Navegación 
----------------------------------------------------------- */
.navcontainer { margin-top:0px;}
.navlist { margin: 0; padding: 8px 0 0 10px;  float: right}

.navlist ul, .navlist li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
	font-size: 107%;
}

.navlist a:link, .navlist a:visited {
float: left;
line-height: 16px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #666;
border-bottom: 4px solid #6A8C48 ;
padding-bottom: 4px; font-size: 118%;
}

.navlist a:link.current, .navlist a:visited.current, .navlist a:hover {
	border-bottom: 4px solid #fff;
	padding-bottom: 4px;
	background: transparent;
	color: #D08C00;
}

.navlist a:hover { color: #000; }

/* Contenido
-------------------------------------------------------------- */
#encabezado h2 {
	color:#ffffff;
	padding-top: 50px;
	line-height: 250%;
	margin-left: -25px;
	margin-right: -25px;
	padding-left: 25px;
	background-repeat:no-repeat;
	background-position: right bottom;
	margin-bottom: 0;
}
#encabezado h2.contacto {background-image:url(../visual/pleca_contacto.png);}
#encabezado h2.nosotros {background-image:url(../visual/pleca_nosotros.png);}
#encabezado h2.productosyservicios {background-image:url(../visual/pleca_productosyservicios.png);}
#encabezado h2.portafolio {background-image:url(../visual/pleca_portafolio.png);}
#encabezado h2.home {
	background-image:url(../visual/pleca_home.png);
	line-height: 150%;
	padding-top: 130px;
	padding-bottom: 30px;
	font-size: 200%;
	}
#encabezado h2 a {
	font-size: 100%;
	text-decoration: none;
	border-bottom: 2px dotted #cccccc;
}
#encabezado h2 a:link,  #encabezado h2 a:visited {
	color: #f8fff8;
}
#encabezado h2 a:active,  #encabezado h2 a:hover {
	color: #d8f8d8;
}

#contenido h1 {
	font-size:218%;
	margin-bottom:15px;
	margin-top:0;
	padding-bottom:5px;
	color:#CC3300;
}
#contenido h1.raya {
	margin-bottom:0;
	margin-top:15px;
	border-bottom: 1px solid #ccc;}
#contenido h2 {
	margin-bottom:5px;
	margin-top:5px;
	padding-bottom:0pt;
	color:#C91D1D;
}
#contenido a {
	font-weight: bold;
}
#contenido .foto {
	border: 1px solid #CCCCCC;
	padding: 1px;
}

/* Migas de pan */
.migas {
	list-style: none;
	padding: 0;
	margin: 10px 0 0 0;
	display:block;
}
.migas li {
	display: inline;
	padding: 0;
	margin: 0;
}
.migas li a { color: #666; }
.migas li:before { content: "> "; }
.migas li:first-child:before { content: ""; }
/* Byline */
p.byline {
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	font-size: 85%;
	font-style: italic;
}
p.byline a {
	color: #555;
	text-decoration:underline;
}
p.byline a:hover {
	color: #999;
	text-decoration:none;
}
p.byline span.fechapub {
	margin-left: 9px;
	padding-left: 9px;
	font-style: normal;
	border-left: 1px solid #999;
}
h3.estructura-articulo {
	font-size:85%;
	margin:0;
	padding:5px 0;
}
#catlist{
	border:1px dashed #ccc;
	border-bottom:none;
	width:auto;
	margin:10px auto;
}
#catlist dl{
	width:auto;
	margin:0 auto;
	border-bottom:1px dashed #ccc;
	padding:10px;
	overflow:hidden;
	background:#f2f2f2;
}
#catlist dd.metalist {
	font-family:Verdana,sans-serif;
	font-size:90%;
	line-height:1.5em;
	margin:3px 0;
	padding:0;
	border-top: 1px dashed #999;
}
#catlist dd.metalist a.cont-comentarios {
	background:transparent url(icon-comment.gif) no-repeat scroll 9px 50%;
	border-left:1px solid #999999;
	margin-left:9px;
	padding-left:24px;
}
#catlist dd.nowrap-def{ margin:0; overflow:auto;}
#catlist dd{ margin:0;}
#catlist dt strong{
	float:right;
	padding:0 0 0 20px;
}
#catlist dd p{ margin:0; padding:0;}
#catlist dt img{
	float:left;
	margin:0 10px 0 0;
	border:2px solid #000;
}
#catlist dt a:hover img{ border:2px solid #FFCC00; }
* html dd.nowrap-def{height:1%;}/* 3px jog*/
* html dd{height:auto;}/* 3px jog*/


/* Port, tecnica para flotar cualquier número de fotos o ilustraciones con un ancho definido dentro de un contenedor, incluye estilos para agregar textos */
.port {
	display:inline;
	float:left;
	line-height:1em;
	width:135px;
	margin:5px;
	height:160px;
	border-bottom:solid 3px #ccc;
}
.port:hover {
	border-bottom:3px solid #FFCC33;
	background-color:#FFFFCC;
}
.port p {
	margin:5px 0pt 0pt !important;
	padding:0;
	font-size:95%;
	border:none;
}
.port p em { display:block;}

/* Figuras, un tratamiento especiual para cuando se quiera utilizar una foto, tabla o gráfica como una figura  */
.figure, .figura {
	margin: 0 10px 15px 0;
	float: left;
	display: block;
}
.figure p, .figura p { margin: 0; }
.figure .credit, .figura .credit {
	font-size: 80%;
	text-align: left;
}
.figura .credit { text-align: center; }
.figure .credit cite, .figura .credit cite { font-style: inherit; }
.figure .caption, .figura .caption {
	font-style: italic;
	font-size: 110%;
}
.figure .title, .figura .title {
	font-style: normal;
	font-weight: bold;
}
.figure .title:after, .figura .title:after { content: ":"; }
.centrar { text-align:center; }

/* Info del Autor del artículo  */
#contenido .autor {
	background:#F2F2F2;
	border-bottom:1px solid #ccc;
	border-top:1px solid #ccc;
	margin:15px 0;
	padding:10px;
}
#contenido .autor h2 {
	color:#000;
	font-size:120%;
	margin:0 0 5px 0;
	border:none;
}
#contenido .autor img {
	margin:0 10px 0 0;
	padding:0; 
}

/* Comentarios */
#contenido .comments { padding: 10px; }
#contenido ol.comments {
	margin: 0;
	padding: 0;
	list-style: none;
}
#contenido ol.comments li {
	margin: 0 0 15px 0;
	padding: 0;
	border-bottom: 4px solid #D8D8D8;
}
#contenido ol.comments h4 {
	float: left;
	position: relative;
	width: 130px;
	margin: 0;
	padding: 0;
	font-size: 90%;
	font-weight: normal;
}
#contenido ol.comments h4 a.com-link {
	position: absolute;
	top: 2px;
	left: 0;
}
#contenido ol.comments h4 span.meta {
	display: block;
	margin: 0 0 0 17px;
}
#contenido ol.comments h4 em {
	display: block;
	margin: 4px 0 0 0;
	font-size: 95%;
	font-style: normal;
}
#contenido ol.comments p {
	margin: 0 0 15px 156px;
	padding: 0;
	font-family: Verdana, sans-serif;
	font-size: 75%;
	border:none;
}
/* Proyectos */
#contenido ul.portafolio, #contenido ul.portafolio * {
	margin: 0; padding: 0;
	list-style: none;
}
#contenido ul.portafolio {
	margin-top: 15px; padding-top: 15px;
	/*border-top: 1px solid #CCCCCC;*/
}
#contenido ul.portafolio li {
 	width: 235px;
	height: 120px;
	display: block;
	float: left;
	margin-right: 25px;
}
#contenido ul.portafolio li.findecolumna {
	margin-right: 0px;
}
#contenido ul.portafolio li img {
	border-width: 1px;
	border-style: solid;
	padding: 1px;
	float: left;
	margin-right: 10px;
}
#contenido ul.portafolio li.grandote {
	height: auto;
}
#contenido ul.portafolio li.grandote img {
	padding: 1px;
	float: none;
}
#contenido ul.portafolio li p {
	color: #888;
	font-size: 90%;
	line-height: 125%;
	margin-top: 5px;
}
#contenido ul.portafolio li h5 {
	line-height: 125%;
}



/* Forma para poner comentarios */
#contenido form p.form-note {
	margin: 0 0 15px 156px;
	padding: 10px 0 0 0;
	font-size: 90%;
	line-height: 1.5em;
}
#contenido form ul.form-note {
	margin: 10px 0 15px 166px;
	padding: 0;
	font-size: 90%;
	line-height: 1.5em;
	color:#FF0000;
}
#contenido form#comment-form {
	margin: 0;
	padding: 0;
}
#contenido form#comment-form div.field { margin: 0 0 20px 0; }
#contenido form#comment-form label {
	float: left;
	width: 140px;
	margin: 0 16px 0 0;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 90%;
	text-align: right;
	color: #666;
}
#contenido .legacyfieldname {
	padding: 3px 16px 3px 0;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 90%;
	text-align: right;
	color: #666;
	width: 140px;
}
#contenido form#comment-form label em {
	display: block;
	margin-top: 2px;
	font-weight: normal;
}
#contenido form#comment-form div.field input { width: 420px; }
#contenido form#comment-form div.field textarea {
	width: 420px;
	height: 100px;
}
#contenido form#comment-form p.controls {
	margin: 0 25px 0 0;
	padding: 0;
	text-align: right;
	border:none;
}
	
/* Barra de paginación de resultados  */
#contenido .paginacion-resultados {
	margin: 15px 0 20px 0;
	padding: 0 0 3px 0;
	border-bottom: 1px solid #ccc;
	height:2em;
}
#contenido .resultados-abajo {
	clear: both;
	margin: 15px 0 0 0;
	padding: 5px 0 0 0;
	border-top: 1px solid #ccc !important;
	border-bottom: none !important;
	height:18px;
}
#contenido .paginacion-resultados ul {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
}
#contenido .paginacion-resultados ul li {
	display: inline;
	margin: 0 5px 0 0;
	padding: 0;
	font-family: Verdana, sans-serif;
	font-size: 70%;
	line-height: 1em;
	color: #7f7f7f;
}
#contenido .paginacion-resultados ul li.last {
	margin: 0;
	padding: 0;
	border: none;
}
#contenido .paginacion-resultados ul li a {
	padding: 3px 5px;
	text-decoration: none;
	border: 1px solid #ccc;
	color: #333;
	line-height: 1.9em;
	background: #f0f0f0;
}
#contenido .paginacion-resultados ul li a:hover {
	color: #555;
	border-color: #ddd;
	background: #fff;
}
#contenido .paginacion-resultados h4 {
	display:inline;
	float:left;
	margin:0;
	width:50%;
}
#contenido .recuadro {
	width: 233px;
	margin: 0 0 25px 25px;
	border: 1px solid #CCddCC;
	float:right;
}
#contenido .recuadro p {
	padding: 0 10px;
	margin: 0;
}
#contenido .recuadro h4 {
	padding: 10px 10px 0 10px;
	margin: 0;
}
#contenido h4 {
	margin-bottom: 0px;
}


/* Lista de resultados  */
.resultados-busqueda dd + dd { margin-bottom: 15px; }
.resultados-busqueda a {
	font-size: 100%;
	font-weight: bold;
	text-decoration:none;
	color: #CC3300;
}
.resultados-busqueda a:hover {
	color: #842100;
	text-decoration:underline;
}

/* Barra lateral y widgets
------------------------------------------------------------- */
#barra-lateral h3 {
	font-weight: bold;
	margin-top:10px;
	margin-bottom:0;
}
#barra-lateral h3 span {
	font-size: 75%;
}
#barra-lateral .copete {
	background: url(../visual/bg_lateral_top.png) no-repeat left top;
	padding: 15px 15px 5px 15px;
	margin:0 0 0 -15px;
}
#barra-lateral .finlateral {
	background: url(../visual/bg_lateral_bottom.png) no-repeat left top;
	padding: 0px;
	margin:0 0 0 -15px;
	height: 100px;
}

#barra-lateral a:link { color:#E59900; text-decoration:underline;}
#barra-lateral a:visited { color:#D08C00;}
#barra-lateral a:hover, a:active {
	color:#FBA900;
	text-decoration:underline;
}

#barra-lateral .widget {
	color:#454545;
	margin:0;
	padding:0 15px;
	background: url(../visual/bg_lateral.png) repeat-y left top;
}

#barra-lateral .contacto {
	margin:5px 0 15px 0;
	padding:0 10px 10px 10px;
	background: #F2DF80 url(../visual/bg_contacto.png) repeat-x bottom;
	border: 1px solid #E5BF00;
}
#barra-lateral .contacto ul { list-style: none outside; padding:0px; text-align:right;}
#barra-lateral .contacto li img { margin-bottom:-3px; text-decoration:none;  }
#barra-lateral .contacto li strong {font-weight: normal; font-size: 80%; color:#999999}

/* Noticias */
#barra-lateral dl.noticias, dl.noticias  {
	margin: 3px 0 0 0;
	padding: 5px;
}
#barra-lateral dl.noticias dt, dl.noticias dt {
	font-family: Georgia, serif;
	font-weight: bold;
}
#barra-lateral dl.noticias dt a, dl.noticias dt a { text-decoration: none; }
#barra-lateral dl.noticias dt a:hover, dl.noticias dt a:hover { text-decoration: underline; }
#barra-lateral dl.noticias dd, dl.noticias dd {margin: 0 0 10px 0; padding: 0;}
/* Listas */
#barra-lateral ul { margin:5px 0 0 20px;}

/* Pie 
----------------------------------------------------------- */
#pie a { color:#333; text-decoration:underline;}
#pie p { color:#333; text-decoration:none;}
#pie h4 {
	color:#333;
	font-weight: bold;
	margin: 10px 0 5px 15px;
}
#pie h5 {
	margin: 10px 0 5px 0;
	color:#333;
}
#pie p { color:#666; font-size:90%; text-align:center}
#pie li {
	padding: 5px 8px;
	background: url(dot.gif) repeat-x bottom;
	list-style: none;
}
#pie li a {
	color: #333;
	text-decoration:none;display:block;
}
#pie li a:hover { color: #333; }


/* Formas */
label {
	display: block;
	font-size:12px;
}
.textinput {
	width: 420px;
	font-size:small;
	color:#66c;
	font-family: "Trebuchet MS", Trebuchet, sans-serif; 
}