/**************************************************
	CSS Document
	Oscar Jaime Loaiza Echeverri
	http://www.ojotal.com
	Estilos desarrollados para ojotal ideas gráficas ©
	Creado: 		Octubre/1/2008
	Actualizado: 	Enero/17/2010
**************************************************/

/* GENERAL
------------------------------------------------------------------*/

	body, #contenedor { background:#FFF; font: 1em Lucida Grande, 'Trebuchet MS', verdana, sans-serif;	
	min-height: 100%; /* alto minimom FF y Safari */
    width: 100%;
    height: 100%; /* alto minimo para IE Windows */
    margin: 0;
    padding: 0;}
	a, a:link, a:visited{color:#990000; font-weight:bold; text-decoration:none; padding:0;}
	a:hover{color:#666666; border-bottom:#666666 1px solid !important; padding:0;}

/* CABEZOTE
------------------------------------------------------------------*/
	#branding{ height:210px; position:relative; background: transparent url(head.png) no-repeat;}
		#branding h1{ margin:0; padding:0; top: 0; text-indent: -9999em; font-size:0;}
		
/* CONTENIDO
------------------------------------------------------------------*/

	h2,h3, h4, h5, h6{text-align:left;}
	h2{color: #666666; background:url(h2_bg.png) bottom left no-repeat; padding: 13px 50px 0.01em 10px; text-align: left; margin:0 -23px 0 20px; font-size: bold 1.2em;  letter-spacing:0.02em; text-shadow: 0 0 2px #333333;}
	h3{color:#339900; font: bold 1.05em ; margin-left: 30px;}
	h4{color:#41678B; font: bold 1em; margin-left: 40px; line-height:115%; letter-spacing: 0.015em;}
	h5{color:#41678B; font: 1em; margin-left: 50px;}
	h6{color:#660099; font: 0.56em; /*margin-left: 50px;*/ text-align:center;}

	p{font: 0.8em Lucida Grande, 'Trebuchet MS', verdana, sans-serif; text-align: justify; padding: 0 1.5em 0 1.5em;}
	#contenedor{width:700px; height:auto; margin: 0 auto; background:#FFF url(conte_bg.jpg) repeat-y;}
	#contenido{ width:100%; padding:30px;}
	
	#contenido ul{text-align:justify; padding:5px; list-style-type:none;}
	#contenido ul li{ padding:5px 10px 5px 25px; margin:5px; background:transparent url(../img/li_bg.gif) 0 9px no-repeat; list-style-type:none;}

/* DIV DESTACADO
------------------------------------------------------------------*/
	#destacado{ width: auto; height: 240px; margin:15px 0 0 0; padding: 35px 50px 10px 50px; background: transparent url(destaca_bg.png) no-repeat 30px 10px;}
	
	.destacado{list-style: none; margin: 0; padding: 0}
	.destacado li { padding:0; margin:10px; background:none; padding: 0; float: left; position: relative; width: 180px; height: 80px; ;}
	.destacado img {background: #fff; border: solid 1px #ccc; padding: 4px;}
	.destacado a {text-decoration: none; overflow:hidden; padding:0;}
	.destacado a:hover img {border-color: #666;}
	.destacado a:visited{ color:#FFFFFF; text-decoration:none;}
	
	.descripcion{list-style: none; margin: 0; padding: 0; text-align:left; font-size:0.8em;line-height:14px}
	.descripcion li{ padding:0; margin:10px; background:none; padding: 0; float: left; position: relative; width: 180px; height: 80px;}
	
/* DIV PORTAFOLIO HOJA DE VIDA
------------------------------------------------------------------*/
	#hv{ width: auto; height: auto; margin:5px 0 0 0; padding: 5px 50px 0px 50px;}
	
/* IMG PORTAFOLIO HOJA DE VIDA
-----------------------------------------------------------------*/
	.hvpor {width: 600px; height: 50px; margin:-10px 0 20px 0;}
	.hvpor img {background: #fff; border: solid 1px #ccc; padding:3px;}
	.hvpor a {text-decoration: none; overflow:hidden; padding:0;}
	.hvpor a:hover img {border-color: #666;}
	.hvpor a:visited { color:#FFFFFF; text-decoration:none;}

	
/* FOOTER
------------------------------------------------------------------*/
	
	#footer {position:relative; height: 24px; width:100%; margin: auto; background: url(footer_bg.jpg) bottom repeat-x;}
	#footer p{position:absolute; bottom: 12px; margin:0 0 0 200px; padding: 0 0 0 0; text-align:center; color: #333; font-size:0.7em; line-height:120%;}

/* FORMULARIO
------------------------------------------------------------------*/		

	div#datos{ width:160px; padding: 0 10px 20px 50px; margin:auto; float:left;}
	
	div#area{width:300px; float:right;}
	
	#form {background: url(form_bg.png) no-repeat;
		  padding: 10px;
		  width: 530px; 
		  height: 382px;
		  margin: auto;}

	#form h2{
		font-size: 1.5em;
			margin: 0 0 0 0;
			padding: 0.3em 0 0 1.5em; color:#990000; background:none; text-shadow:1px 1px 2px #990000;}


		#form .campo {
			border: 1px solid #AEAA5E;
			background:#E9E8D1;
			padding: 0.3em;
			font-size: 0.9em;
			width:20em;}

		#form .error {
			border: 1px solid #F00;
			padding: 0.3em;
			background:#E9E8D1;
			font-size: 0.9em;
			width:20em;}

		#form .com {
			border: 1px solid #AEAA5E;
			background-color:#E9E8D1;
			padding: 0.3em;
			font-size: 0.9em;
			width:20em;
			height: 8em;
			font: 0.9em Lucida Grande, 'Trebuchet MS', verdana, sans-serif;}

		#form .com-error {
			border: 1px solid #F00;
			background:#E9E8D1;
			padding: 0.3em;
			font-size: 0.9em;
			width:20em;
			height: 8em;
			font: 0.9em Lucida Grande, 'Trebuchet MS', verdana, sans-serif;}

  	#form .boton {
			border: 2px solid #AEAA5E;
			padding:0;
			margin: 0.8em 4em 0 0 ;
			float: right;
			font-size: 0.9em;
			width: 4em;}

	  #error {
		  border: 1px dashed #F00;
		  background-color: #E9E8D1;
		  padding: 5px;
		  margin: 15px 15px;
		  font: 0.8em Lucida Grande, 'Trebuchet MS', verdana, sans-serif;
		  text-align:center;}

	  #ok {
	    border: 1px dashed #AEAA5E;
	    background-color:#F5F5EB;
	    padding: 15px 0 5px 0;
		margin: 15px 15px;
		font: 0.8em Lucida Grande, 'Trebuchet MS', verdana, sans-serif;
		text-align:center;
		height: 4em;}
		
		span{font-style: italic; color: #FF0000; }