@charset "UTF-8";
@import "reset.css";

html, body {
	height: 100%;
}

body {
	background: #dfebfc url(../imagenes/fondo.png) center top repeat-x;
	padding: 0;
	font-size: 100%;
	font-family:"Trebuchet MS","Lucida Grande",Helvetica,Arial;
	color:#444;
}

#contenedor {
	width: 950px;
	margin: 0 auto;
}

p {
	line-height:180%;
}

a {
	color:#7a90ae;
	font-weight:bold;
	text-decoration:none;
}

a:hover {
	color:#f7ac28;	
	text-decoration:underline;
}

#header {
	background: url("../imagenes/blobo.png") no-repeat left top;
	height:96px;
	margin:20px 0 40px 100px;
}

#header h1 a {
	text-indent:-9999px;
	display:block;
	float:left;
	height:76px;
}

.clear {
	clear:both;
}

#intro {
	padding-bottom: 10px;
}

#sombra {
	background: #A2C5F5 url(../imagenes/fondo_abajo.png) no-repeat 0 0;
	height: 74px;
}

.scroll_botones {
	position: absolute;

	cursor: pointer;
}

a.botonizquierdo  {
	height:24px;
	width:24px;
	background:url('../imagenes/atras.png') no-repeat top center;
	position: absolute;
	top: 250px;
	left: -28px;
}

a.botonderecho  {
	height:24px;
	width:24px;
	background:url('../imagenes/adelante.png') no-repeat top center;
	position: absolute;
	top: 250px;
	right: -28px;
}

.scrollButtons.left {
	left: -28px;
}

.scrollButtons.right {
 right: -28px;
}

.hide {
	display: none;
}

#slider {
	width: 875px;
	margin: 0 auto;
	position: relative;
	z-index:1;
	/*margin-top:20px;*/
}

.scroll {
	/*height: 135px;*/
	overflow: auto;
	overflow-x: hidden;
	width: 873px!important/*875px*/;
	position: relative; /* fix for IE to respect overflow */
	clear: left;
	background: #c5ddff /*url(../imagenes/fondo_arriba.png) no-repeat scroll left top*/;
	border-left: 1px solid #9cc1ef;
	border-right: 1px solid #9cc1ef;
}

* html .scrollContainer {
	width:3205px!important;
}

.scrollContainer div.panel {
	padding: 20px;
	padding-bottom:0;
	/*height: 435px;*/
	width: 835px; /* change to 560px if not using JS to remove rh.scroll */
}
/*********************** Trabajos **********************/

div#trabajos.panel {
	padding-top:0;
	position:relative;
}
div#trabajos.panel #minicontainer {
	/*height:320px;*/
	position:relative;
	width:725px;
}

#secciones {
	overflow:hidden;
	height:321px;
	width:870px!important;
	clear:left;
}

#minicontainer ul {
	height:870px;
}

#trabajos .mini {
	display:inline;
	margin-left: 10px;
}
	#trabajos .mini.impar {
		margin-right: 10px;
	}
	
	#trabajos .mini .descripcion {
		background: url('../imagenes/trans_celeste.png') repeat;
		border: 1px solid black;
		position: absolute;
		/*bottom: 130px;*/
		top:150px;
		display: none;
		width: 385px;
		padding: 5px;
		font-size: 0.9em;
	}
	#trabajos .mini .descripcion h2 ,  .descripcion h2 a{
		font-size: 1.1em;
		color: white;
	}
	
	.descripcion h2 a {
		padding-right:25px;
		background:url('../imagenes/out.png') 100% 40% no-repeat;
	}
	
	#trabajos .mini:hover .descripcion {
		display:block;
	}
			#trabajos .mini.par .descripcion {
				left: 435px;
			}
			
			
			#trabajos .mini.impar .descripcion {
				left:10px;
			}

p#bajar {
	background: #d9e9ff url('../imagenes/fondo_mas_trabajos.png') repeat-x top;
	margin-top: 20px;
	border-top: 1px solid #e9b75c;
}
	p#bajar:hover {
		background: url('../imagenes/fondo_mas_trabajos.png') repeat-x bottom;
	}

	p#bajar a {
		display: block;
		padding: 10px 30px 10px 25px;
		background: url('../imagenes/abajo.png') no-repeat  21% 45%;
	}
		p#bajar a:hover {
			color:#3364A8;
	}

/***** ***************/
h1#pie {
	margin-top:40px;
	text-indent:-1000px;
	height:25px;
	background: url(../imagenes/pie.png) no-repeat center bottom;
}

#footer {
	/*margin:40px 0;*/
	font-size:0.75em;
	text-align:center;
	color:white;
	background: #3da000 url(../imagenes/footer.png) repeat-x 50% 0;
	padding:20px;
	font-family:Verdana;
	position:relative;
	padding-top:30px;
}

	#footer a {
		color:white;
	}

	#footer #cols {
		margin:0 auto;
		width:875px;
	}

	#footer .col {
		margin-right:30px;
		float:left;
		text-align:left;
		width:270px;
	}

	#footer .col2 span {
		width:90px;
		display:inline-block;
		padding-left:23px;
	}

		#footer .correo {
			background: url(../imagenes/email.png) no-repeat 0 50%;
		}

		#footer .telefono {
			background: url(../imagenes/phone.png) no-repeat 0 50%;
		}

		#footer .skype {
			background: url('http://mystatus.skype.com/smallicon/jorge.araya.maggiolo') no-repeat 0 50%;
		}

	#footer p {
		margin-bottom:5px;
		line-height:20px;
	}

	#footer hr {
		clear:both;
		visibility:hidden;
	}


ul.navegacion {
	padding-left:20px;
	height:100px;
	background:blue;
	background:url(../imagenes/fondo_arriba.png) center bottom no-repeat;
}

ul.navegacion li {
	display: inline;
}

.navegacion a , 
.navegacion a .hover {
	width:108px;
	height:44px;
	background: url(../imagenes/menu.png) 0 0 no-repeat;
	float:left;
	margin-right:15px;
	outline:none;
}

.navegacion a * {
  display: none;
}

.navegacion a.inicio {	background-position: 0 -44px;}
.navegacion a.trabajos { 	background-position: -123px -44px;}
.navegacion a.contacto { 	background-position: -246px -44px;}

.navegacion a:hover.inicio 	, .navegacion a.inicio .hover		{background-position: 0 -44px;}
.navegacion a:hover.trabajos 	, .navegacion a.trabajos .hover 	{background-position: -123px -44px;}
.navegacion a:hover.contacto 	, .navegacion a.contacto .hover	{background-position: -246px -44px;}

.navegacion a.inicio {	background-position: 0 -88px;}
.navegacion a.trabajos {	background-position: -123px -88px;}
.navegacion a.contacto {	background-position: -246px -88px;}

/*.navegacion a.inicio.selected 	{background-position: 0 0;}
.navegacion a.trabajos.selected 	{background-position: -123px 0;}
.navegacion a.contacto.selected 	{background-position: -246px 0; }*/

.navegacion a#in.selected { 	background-position: 0 0; }
.navegacion a#tr.selected { 	background-position: -123px 0; }
.navegacion a#co.selected { 	background-position: -246px 0; }


/***************** Inicio ****************/

#inicio h2 {
	font-size:2em;
	color:#c5ddff;
	padding:0 20px 20px;
	width: 664px;
   height: 130px;
   position: relative;
}

#inicio h2 em {
	color:#c5ddff;
	font-style:normal;
}

#inicio h2 span {
	background: url(../imagenes/bajada.png) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	margin:-20px 0 0 -30px;
}	


#inicio p {
	padding:15px;
	width:690px;
}

#inicio .col {
	float:left;
	width:26%;
	text-align:justify;
	font-size:0.75em;
	color:#333333;
	padding-left:125px;
	margin-left:-10px;
}

#inicio #www {
	margin-right:45px;
	background: url('../imagenes/icono_www.png') no-repeat 0 14px;
}

#inicio #cms {
	background: url('../imagenes/icono_cms.png') no-repeat 0 14px;
}

#inicio #contactenos {
	margin-top:10px;
	clear:both;
}

/* Hacks que validan*/
/**********/

#globo {
	width: 211px;
	height: 481px;
	position: absolute;
	z-index: 10;
	margin-left: 550px;
	top: -190px;
}


#contenedor_form {
	padding: 11px;
	padding-bottom:0;
	margin-top:-30px;
	font-size:13px;
	float:left;
}

#contenedor_form ul {
	list-style-type: none;
	width:560px;
}
	#contenedor_form ul li{
		padding: 0 0 10px 15px;
		border-bottom: 1px solid #ACC0DF;
		margin-bottom: 25px;
		background: url('../imagenes/fondo_contacto.png') bottom repeat-x;
	}
		#contenedor_form ul li.botones {
			margin-bottom: 0;
		}
	#contenedor_form label {
		display: inline-block;
		width: 170px;
	}
	
	#contenedor_form input , #contenedor_form textarea {
		width: 333px;
		border: 1px solid #ACC0DF;
		padding: 5px;
	}
	
	#contenedor_form input.boton
		#contenedor_form input:hover {
				border: 1px solid #E98D28;
		}

#datos_contacto {
	float: left;
	padding: 15px 30px 30px 25px;
	margin-left: 20px;
	margin-top: -20px;
	font-size: 0.7em;
	width: 145px;
	background: #a9cbff;
	color: #444;
	border: 1px solid #ACC0DF;
}

	#datos_contacto a:link , #datos_contacto a:visited {
		font-weight: normal;
		color: #444;
	}
	
	#datos_contacto p {
		padding-bottom: 15px;
		border-bottom: 1px solid #999;
		margin-bottom: 20px;
	}
