/*
Theme Name: JMOCANA 
Theme URI: http://wordpress.org/
Description: Tema original del blog de Jose María Ocaña, vamos ¡Mi tema!.
Version: 1
Author: Jose Maria Ocaña
Author URI: http://jmocana.eu
Tags: Programación cliente, XHTML, CSS, Javascript, Jquery.

	JMOcana v1

*/

/* Indice
/**************************************************************************
	
	-Estilos Generales 
	-Estructura
	-Cabecera
	[
	     -Nube de tags 
	     -Buscador
	]         
		
	-Contenidos
	[
	      -Sidebar
	      -Posts	
	]
	
	-Pie	
	
	-Plantillas
	[
	    Pagina Interior
	    [
	         -Navegacion
	         -Comentarios	         
	    ]	    
	       
	    Paginas estaticas
	    [
	          -Blog y autor
	          -Proyectos
	    ]
	    
	    Error 404
	]
	
	
	
	-posts
/**************************************************************************/	


/************************** Estilos Generales *****************************/

* {
	margin: 0;
	padding: 0;	
}

html {
	color: #fff;
}

body {
        background: #333 url(images/f_body.gif) repeat-x 0 0 ;
	font-family: Verdana, Tahoma, Arial, sans-serif;
}

fieldset, a img {
	border: 0;	
}

ul {
	list-style: none;	
}

select, input, textarea {
	background-color: #fff;
	font-family: Verdana, Tahoma, Arial, sans-serif;	
}

abbr, acronym {
	cursor: help;	
}

p{color: #333;}
a {
        color: #839713;
	outline: none;	
	text-decoration: underline;
}
a:hover{text-decoration: none;}
ol{list-style: none;}

dl{margin-bottom: 15px;}
dt{float: left; display: inline; margin-right: 5px; font-weight: bold;}


pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
background-color: #EAEAEA;
padding: 20px;
font-size: 1.1em;
margin-bottom: 10px;
}


#marco #contenedor .ultimo{border: none; background: none; }

/* Medidas relativas y estiramiento de capas */
html { font-size: 62.5%;}
body { font-size: 100%;} /* Estandar */
*:first-child+html body { font-size: 101%; } /* IE 7 */
* html body { font-size: 101%; } /* IE 6 */

.estirar:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.estirar {display: inline-block;}
/* oculto IE-mac \*/
* html .estirar {height: 1%;}
.estirar {display: block;}
/*fin oculto IE-mac */

/* titulares (p) */

p.titular1{text-transform: uppercase; font-weight: bold; font-size: 12px; text-decoration: underline; margin-bottom: 15px;}
h2.pagetitle{color: #666; text-align: center; text-transform: uppercase; font-size: 13px;}

/* botones */
.btn{background-color: #819813; padding: 5px 0; color: #FFF; font-weight: bold; margin-bottom: 10px; width: 125px; text-align: center; display: block}

/* ecuaciones */
.ecuacion{background-color: #FFFFCC; padding: 10px; color: #333; font-size: 11px; width: 152px;}

/****************************** ESTRUCTURA **********************************/

#marco{background: url(images/f_marco.gif) repeat-x 0 bottom ; }
#contenedor{ width: 80.9em; margin: 0 auto; padding: 26px 112px 25px 0;}
#cabecera{background:  url(images/f_cabecera.png) repeat-x 0 0 ; height: 271px; position: relative;}
#contenidos{background-color: #F3F3F3; position: relative;height: auto !important; min-height: 300px; height: 300px;z-index: 0; padding-top: 18px;}
#pie{background:  url(images/f_pie.png) repeat-x 0 0; height: 3em; position: relative;}

/****************************** CABECERA **********************************/

#cabecera h1{position: absolute; top: 88px; left: 50px;}
#cabecera h1 a{display: block;}
#cabecera ul{padding: 3px 0 0 0; width: 64em; margin: 0 auto; font-size: 1.1em}
#cabecera li{float: left; display: inline;margin-right: 2.3em; padding:4px 2.3em 0 0;background: url(images/separador.gif) no-repeat right center; height: 2em;}
#cabecera li a{background:  url(images/estrella.gif) no-repeat 0 0 ; padding:0.1em 0 0 1.8em}
#cabecera li a:hover{text-decoration: underline;}
#cabecera li.ultimo{padding: 0.4em 0 0 0; margin: 0;}
#cabecera a{color: #fff; text-decoration: none; }
#cabecera #cabecera-contenidos{background:  url(images/f_cabecera_contenidos.png) no-repeat 0 29px ; height: 223px;position: relative;}

/* Nube de tags */

#cabecera .contiene-nube{ float: right; display: inline; background: url(images/parentesis_izq.jpg) no-repeat 0 center; padding:0 0 0 50px; width: 41em; text-align: center;height: 192px; position: relative; } 
#cabecera>.contiene-nube{ display:table; position: static;}	
#cabecera .nube-tags{relative; padding:0 50px; position: absolute; top: 50%; height: 77px; left: 0; width: 41em}
#cabecera>.nube-tags{display:table-cell; vertical-align:middle; position:static;}
#cabecera .nube-tags div{position:relative; top:-50%; background: url(images/parentesis_der.jpg) no-repeat right center;height: 76px; padding-right: 50px;}
#cabecera .nube-tags a{margin-right: 8px; padding: 5px; line-height: 30px; color: #E8E8E8;}
#cabecera .nube-tags a:hover{text-decoration: underline;}
/*...*/
.nube-tag-1{font-size: 1pt;}
.nube-tag-2{font-size: 2pt;}
.nube-tag-3{font-size: 3pt;}
.nube-tag-4{font-size: 4pt;}
.nube-tag-5{font-size: 5pt;}
.nube-tag-6{font-size: 6pt;}
.nube-tag-7{font-size: 7pt;}
.nube-tag-8{font-size: 15pt;}
.nube-tag-9{font-size: 9pt;}
.nube-tag-10{font-size: 10pt;}
.nube-tag-11{font-size: 11pt;}
.nube-tag-12{font-size: 12pt;}
.nube-tag-13{font-size: 13pt;}
.nube-tag-14{font-size: 14pt;}
.nube-tag-15{font-size: 15pt;}
.nube-tag-16{font-size: 16pt;}
.nube-tag-17{font-size: 17pt;}
.nube-tag-18{font-size: 18pt;}
.nube-tag-19{font-size: 19pt;}
.nube-tag-20{font-size: 20pt;}
.nube-tag-21{font-size: 21pt;}
.nube-tag-22{font-size: 22pt;}
.nube-tag-23{font-size: 23pt;}
.nube-tag-24{font-size: 24pt;}
.nube-tag-25{font-size: 25pt;}
.nube-tag-26{font-size: 26pt;}
.nube-tag-27{font-size: 27pt;}
.nube-tag-28{font-size: 28pt;}
.nube-tag-29{font-size: 29pt;}
.nube-tag-30{font-size: 30pt;}


/* Buscador */

#cabecera #buscar{clear: right; float: right; display: inline; width: 20.5em;position: absolute; bottom: -24px; right: 0;font-size: 1.1em;}
#cabecera #buscar label{background: url(images/pestana_buscar.gif) no-repeat 0 0; width: 75px; height: 16px; display: block; text-align: center;float: right; display: inline;padding-top: 3px;}
#cabecera #buscar input{background-color: #333; padding: 2px; color: #EEE; border: none; position: static; margin: 3px 5px 0 0;height: 16px;font-size: 1em; padding-left: 5px;width: 16em;float: left; display: inline;}
#cabecera #buscar input#searchsubmit{width: 25px; height: auto; padding: 2px}

/****************************** CONTENIDOS **********************************/

/* sidebar */

#contenidos #listado-sidebar{position: absolute; top: 0; right: -151px;}
#contenidos #listado-sidebar li{margin-bottom: 6px; font-size: 1.3em; font-weight: bold; }
#contenidos #listado-sidebar a{background: url(images/pestana.jpg) no-repeat 0 0;display: block; width: 131px; height: 25px; padding: 7px 0 0 20px; color: #3C4609; text-decoration: none;}
#contenidos #listado-sidebar a:hover{background-position: 0 -32px}

#contenidos #sidebar{}
#contenidos .mod-sidebar{background: #fff url(images/f_sidebar.png) repeat-x 0 bottom; border-top: 1px #EBE6EB solid;margin-bottom: 20px; padding: 10px 29px 30px 30px;position: relative; }
#contenidos .mod-sidebar h2{font-size: 17px; color: #999; font-style: italic;}
#contenidos .mod-sidebar ul{margin-top: 20px;}
#contenidos .mod-sidebar li{float: left; display: inline; margin:0 40px 20px 0; background: url(images/bullet.gif) no-repeat 0 6px; padding-left: 10px; width: 137px; font-size: 11px;}
#contenidos .mod-sidebar .btn-cerrar{background: url(images/btn-cerrar.jpg) no-repeat 0 0; width: 44px; height: 39px; display: block; overflow: hiden; text-indent: -9999px; position: absolute; top: 0; right: 41px;}
#contenidos .mod-sidebar .btn-cerrar:hover{background-position: 0 -39px;}
#contenidos .mod-sidebar .btn-cerrar:active{background-position: 0 0;}


#contenidos .mod-sidebar.mod-ult-coment{padding-bottom: 0;}
#contenidos .mod-sidebar.mod-ult-coment .fecha{color: #666}
#contenidos .mod-sidebar.mod-ult-coment .autor{color: #000}
#contenidos .mod-sidebar.mod-ult-coment a{display: block;}
#contenidos .mod-sidebar.mod-ult-coment h2{margin-bottom: 20px;clear: left;}
#contenidos .mod-sidebar.mod-ult-coment ul{margin: 20px 0;}

/* posts */

#contenidos .post{background: url(images/f_titulares.png) repeat-x 0 0; background-color: #fff; border-bottom: 2px #EBE6EB solid; padding-top: 10px; margin-bottom: 3em;color: #333; font-size: 1.2em; line; line-height: 1.4em}
#contenidos .post .cont{ padding: 0 2.4em; z-index: 2;}
#contenidos .post h2{float: left; display: inline; font-size: 18px}
#contenidos .post p.postmetadata{float: left; display: inline; margin-right: 5px;}
#contenidos .post p.fecha{float: left; display: inline; width: auto; padding-left: 95px;}
#contenidos .post p.nuevo{background: url(images/flec_positiva.gif) no-repeat 0 0;}
#contenidos .post p.semi-nuevo{background: url(images/flec_intermedia.gif) no-repeat 0 0;}
#contenidos .post p.antiguo{background: url(images/flec_negativa.gif) no-repeat 0 0;}
#contenidos .post p.comentarios{float: right; display: inline; width: auto; padding-left: 95px;}
#contenidos .post p.comentarios a{color: #333; text-decoration: none;}
#contenidos .post .categorias{float: right; display: inline;}
#contenidos .post .categorias li{float: left; display: inline; padding:0 8px; border-right: 1px #ccc solid;}
#contenidos .post .categorias a{text-decoration: none;color: #333;}
#contenidos .post .txt-post{clear: both; margin-top: 16px;}
#contenidos .post .txt-post h2 a{color: #333; text-decoration: none;}
#contenidos .post .txt-post .entry{margin-top: 20px; padding: 25px 48px 30px 0; height: auto !important; height: 50px; min-height: 50px; clear: both;}
#contenidos .post .txt-post .entry.nuevo{background: url(images/tema_caliente.gif) no-repeat right 5px;}
#contenidos .post .txt-post .entry.semi-nuevo{background: url(images/cara_interes.gif) no-repeat right 5px;}
#contenidos .post .txt-post .entry.antiguo{background: url(images/cara_rollo.gif) no-repeat right 5px;}
#contenidos .post .txt-post .entry h3{font-size: 14px; margin-bottom: 8px;font-weight: bold;}
#contenidos .post .txt-post .entry h4{font-size: 13px; margin-bottom: 8px;font-weight: bold;margin-top: 10px;}
#contenidos .post .txt-post .entry h5{font-size: 12px; margin-bottom: 8px;font-weight: bold;}
#contenidos .post .txt-post .entry h6{font-size: 11px; margin-bottom: 8px; font-weight: bold;}
#contenidos .post .txt-post .entry h7{font-size: 10px; margin-bottom: 8px; font-weight: bold;}
#contenidos .post .txt-post .entry .tema{margin-bottom: 17px;}
#contenidos .post .txt-post .entry p, #contenidos .post .txt-post .entry ul{margin-bottom: 15px;}
#contenidos .post .txt-post .entry li{background: url(images/bullet.gif) no-repeat 0 6px; padding-left: 10px; padding-bottom: 5px; }
#contenidos .post .txt-post .entry .zip{background: url(images/image_zip.png) no-repeat 0 0; display: block; height: 31px; margin-top: 12px;padding: 15px 0 0 34px;}
#contenidos .post .txt-post .entry .codigo{background:#333 url(images/pie-codigo.png) no-repeat 0 bottom; padding-bottom: 38px; width: 704px; margin: 35px 0; position: relative;  }
#contenidos .post .txt-post .entry .codigo_big{position: relative; margin: 10px 0;}
#contenidos .post .txt-post .entry .codigo pre{background: url(images/cab-codigo.png) no-repeat 0 0; color: #B9E3FF; overflow-x: auto; width: 704px; padding: 50px 0 10px 0; line-height: 19px; }
#contenidos .post .txt-post .entry .codigo pre code{display: block; padding: 0 15px 8px 28px; font-family: Verdana, Arial, Tahoma; font-size: 11px; font-weight: bold; float: left; display: inline;}
#contenidos .post .txt-post .entry .codigo .lenguaje, #contenidos .post .txt-post .entry .codigo_big .lenguaje{position: absolute; top: 4px;color: #fff; font-size: 11px; color: #fff;}
#contenidos .post .txt-post .entry .codigo .lenguaje{right: 90px;}
#contenidos .post .txt-post .entry .codigo_big .lenguaje{right: 309px;}
#contenidos .post .txt-post .entry .codigo .larga{line-height: 16px; display: block;}

#contenidos .post .txt-post .entry .codigo .lenguaje.css{}
#contenidos .post .txt-post .entry .codigo_big .lenguaje.css{}
#contenidos .post .txt-post .entry .codigo .lenguaje.html{color: #000;}
#contenidos .post .txt-post .entry .codigo_big .lenguaje.html{color: #000066;}
#contenidos .post .txt-post .entry .codigo .lenguaje.js{color: #FFF;}
#contenidos .post .txt-post .entry .codigo_big .lenguaje.js{color: #6C0000;}
#contenidos .post .txt-post .entry .codigo .lenguaje.php{}
#contenidos .post .txt-post .entry .codigo_big .lenguaje.php{color: #004F00}


/****************************** PIE **********************************/

#pie ul{width: 20.5em; margin: 0 auto;padding-top: 8px;}
#pie li{float: left; display: inline; background: url(images/separador.gif) no-repeat right center;margin-right: 12px; padding-right: 12px;}
#pie li#wordpress{position: absolute; top: 35px; right: -20px;}
#pie li#wordpress a{color: #DFDFDF; text-decoration: none;}
#pie li#wordpress a:hover{text-decoration: underline;}


/**************************************************************************************
 PAGINA INTERIOR
 **************************************************************************************/

#pagina #contenidos{padding: 0 0 40px 0;}

/* Navegacion */

.navigation {background: url(images/f_navegacion.jpg) repeat-x 0 0; padding: 13px 0 26px 0; margin-bottom: 15px}
.navigation.portada{background: none; padding: 0;}
.alignleft {background: url(images/flecha_anterior.gif) no-repeat 0 2px; margin-left: 28px; padding-left: 15px;float: left; display: inline;}
.alignright{background: url(images/flecha_siguiente.gif) no-repeat right 2px ;margin-right: 28px; padding-right: 17px; text-align: right;}
.navigation a{color: #666; text-decoration: none; font-size: 11px;}
.navigation a:hover{text-decoration: underline;}
#contenidos .post.interior{margin: 0; border-bottom: 0;}


/* Comentarios */

#cab-comentarios{padding: 0 0 28px 28px; font-weight: bold;}
#cab-comentarios p{ font-size: 11px; float: left; display: inline; margin-right: 6px;}
#cab-comentarios li{float: left; display: inline; margin-right: 10px; padding-right: 10px; font-size: 12px; border-right: 1px #819813 solid}

li.comentario{clear: both; background: url(images/f_cab_comentarios2.jpg) repeat-x 0 0; padding: 32px 28px; margin-bottom: 20px;}

.mod-img{ background: url(images/pensamiento.jpg) no-repeat right 0; padding: 34px 34px 0 0; width: 50px; margin-top: 15px;float: left; display: inline;}
.mod-img img{border: 5px #D6D6D6 solid;}
.mod-img a, .mod-txt a{color: #333; text-decoration: none;}
.mod-img a:hover, .mod-txt a:hover{text-decoration: underline;}
.mod-txt{font-size: 11px; background: #fff url(images/f_comentario_inf.jpg) no-repeat -3px bottom; padding: 0 0 25px 0; width: 624px; margin: 0 0 0 7px ;position: relative; top: -1px; display: table; height: 1%;}
.mod-txt-container{background: #fff url(images/f_comentarios.gif) repeat-y 0 bottom; position: relative; padding: 0 25px}
.fecha-post{margin-bottom: 10px;}

#formu-comentarios{clear: both; background: url(images/f_formu_sup.jpg) no-repeat -2px 0; width: 625px; margin: 0 63px 40px 0; padding: 29px 0 0 0; float: right; display: inline;}
#formu-comentarios .cont{background: url(images/f_comentario_inf.jpg) no-repeat -4px bottom; padding: 0 0 25px 0;}
#commentform{ background: url(images/f_comentarios.gif) repeat-y -1px 0; padding: 0 0 10px 28px; position: relative; }
#commentform fieldset{background: url(images/comentario.jpg) no-repeat 415px 0;}
#commentform label{color: #333; font-size: 11px; margin-bottom: 12px; display: block;}
#commentform input, #commentform textarea{background-color: #F7F7F7; border: 1px #EBEBEB solid; display: block; margin-top: 3px; width: 307px; padding: 2px; color: #999; font-size: 11px;} 
#commentform textarea{height: 100px;}
#commentform input#submit{background-color: #A3A3A3; color: #fff; text-transform: uppercase; padding: 2px 0; font-weight: bold; width: auto; margin-top: 10px; width: 200px; text-align: center; border: none;}
#commentform input[type="hidden"]{display: none;}
#commentform .user-coment{margin-bottom: 6px; }

/**************************************************************************************
 PAGINAS ESTATICAS
 **************************************************************************************/

/* Blog y autor */
 
#contenidos .post.pagina {padding: 45px 0; font-size: 11px;}
#contenidos .post.pagina h2{margin:0 0 28px 28px; color: #666;}
.gris, .verde{clear: both; padding: 35px 0 0 0;}
#contenidos .gris h3{font-size: 11px; font-weight: bold; background: url(images/f_tit-gris.gif) no-repeat 0 0; width: 125px; text-align: center; height: 21px; padding-top: 2px;float: none; display: block;margin-left: 28px;}
#contenidos .verde h3{color: #fff;font-size: 11px; font-weight: bold; background: url(images/f_tit-verde.gif) no-repeat 0 0; width: 125px; text-align: center; height: 21px; padding-top: 2px;float: none; display: block;margin-left: 28px;}
.gris .color-cont{background: url(images/f_gris.gif) 0 0; padding: 15px 28px}
.verde .color-cont{background: url(images/f_verde.gif) 0 0; padding: 15px 28px}

#contenidos .post.pagina ul{list-style: disc; margin: 10px 0; margin-left: 25px;}

/* proyectos */
#contenedor-proyectos{clear: left;  background-color: #fff; padding: 20px;}
#contenidos #contenedor-proyectos ul{margin-left: 10px;}
#contenedor-proyectos li{float: left; display: inline; margin: 10px 0px 50px 0;}
#contenedor-proyectos li.limpiar{margin-right: 22px;}
#contenedor-proyectos img{border: 1px solid #999; width: 324px; height: 214px;}
#contenedor-proyectos .enlace-externo{display: block; margin-bottom: 5px;}
#contenedor-proyectos .portada{background: url(images/f_proyecto.png) no-repeat 0 0; display: block; padding: 17px 19px 22px 16px;}
.limpiar{clear: left;}

/**************************************************************************************
 ERROR 404
 **************************************************************************************/

#contenidos .post.error .cont{top:0;}
#contenidos .post.error p{clear: left; margin: 0 0 20px 18px; padding: 20px 0;float: left; display: inline;}
#contenidos .post.error h2{margin: 34px 0 20px 18px; padding: 0;}

