/* TEMPLATE */
body { text-align: center; background: #ECEAE4 url(images/tpl_body_bg.gif) top repeat-x; margin: 0; }
#top {
	margin: auto;
	width: 880px;
	height: 60px;
	padding: 20px 0px 0px 44px;
	background: url(images/tpl_top_bg.jpg) bottom repeat-x;
	text-align: left;
}
#top img, #botonera { float: left; }
#botonera { margin: 9px 0px 0px 30px; }
#container {
	margin: auto;
	width: 908px;
	background: url(images/tpl_contenedor_bg.gif) center repeat-y;
	padding: 0px 8px;
	position: relative;
}
#content {
	width: 896px;
	border: 6px solid #FFF;
	border-right: 5px solid #FFF;
	background: #FFF url(images/tpl_contenido_bg.jpg) top left no-repeat;
	text-align: left;
}
#barra_pie {
	width: 880px;
	height: 120px;
	background: #faf8f7;
	padding: 0px 8px;
	margin: 6px;
	border-top: 1px dotted #999999;
	overflow: hidden;
}
#clientes {
	background: #edeae5;
	height: 38px;
	margin: 6px 6px 0px 6px;
	border-bottom: 6px solid #FFF;
	text-align: left;
	padding: 0 80px;
}
#sombra_pie {
	width: 924px;
	background: url(images/tpl_pie_sombra.gif) top no-repeat;
	position: absolute;
	left: 0px;
}
#flash { height: 240px; margin-bottom: 15px; text-align: center; color: #999; }
#pie { font-size: 10px; color: #999; margin: 20px 0px 20px 0px; }

.contenido { margin: 0px 16px; position: relative; }
.informacion {
	width: 564px;
	float: left;
	position: relative;
	padding-right: 12px;
}

/* REGLAS GENERICAS */
* { font-family: Arial, Helvetica, sans-serif; }
p, a, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
.informacion p { padding: 0 12px; font-size: 12px; color: #999; margin-left: 8px; }
h1 { color: #f33; font-size: 14px; }
h2 { color: #f33; font-size: 13px; }
h3 { color: #f33; font-size: 12px; }
h4 { color: #f33; font-size: 11px; }
h5 { color: #f33; font-size: 10px; }
a img { border: 0; }
a { color: #f33; text-decoration: underline; }
a:hover { color: #f33; text-decoration: none; }
.copete { font-size: 13px!important; color: #666!important; }
#spacer { clear: both; }
/* REGLAS GENERICAS */

/* REPOSICIONADOS GENERALES */
#mask_i { position: absolute; left: -8px; top: -6px; }
#mask_d { position: absolute; right: -7px; top: -6px; }
#extra { position: absolute; right: -6px; top: 101px; }
#postit { position: absolute; bottom: -27px; right: 43px; z-index: 10; }
/* REPOSICIONADOS GENERALES */

/* LOGIN */
#login {
	width: 40px;
	height: 120px;
	position: absolute;
	bottom: 50px;
	right: -31px;
	background: url(images/tpl_login_btn_over.gif) right no-repeat;
}
#login_form {
	visibility: hidden;
	background: url(images/contenido_login_bg.gif) no-repeat;
	width: 292px;
	height: 120px;
	position: absolute;
	right: -11px;
	bottom: 50px;
	z-index: 20;
	font-size: 10px;
	color: #999;
	text-transform: uppercase;
	font-weight: bold;
}

#form_login { position: relative; }
	#input_username { position: absolute; left: 25px; top: 25px; }
	#input_password { position: absolute; left: 25px; top: 70px; }
	#input_cms4 { position: absolute; left: 150px; top: 26px; }
	#input_cms5 { position: absolute; left: 210px; top: 26px; }
	#label_username { position: absolute; left: 25px; top: 44px; }
	#label_password { position: absolute; left: 25px; top: 89px; }
	#label_cms4 { position: absolute; left: 168px; top: 26px; }
	#label_cms5 { position: absolute; left: 228px; top: 26px; }
	#login_submit { position: absolute; left: 152px; top: 66px; }
	#login_password { position: absolute; left: 152px; top: 86px; }

* html #login_form { bottom: 50px; }
* html #form_login { position: relative; left: -145px; bottom: 0px; }
	* html #input_cms4 { position: absolute; left: 105px; top: 26px; }
	* html #input_cms5 { position: absolute; left: 165px; top: 26px; }

#login_form input { margin: 0; padding: 0; width: 106px; height: 14px; border: 0; font-size: 11px; }
#login_form .radios { padding: 0; margin: 0; width: 20px; }
#login_form a { text-decoration: none; color: #999; }
#login_form a:hover { color: #666; }
#login_submit { font-size: 18px; }
#login_password { font-size: 8px; }
/* LOGIN */

/* REPOSICIONADOS BARRA LATERAL */
.item-barra-top { position: absolute; top: 0px; left: 0px; }
.item-barra-bottom { position: absolute; bottom: 0px; left: 0px; }
* html .item-barra-bottom { position: absolute; bottom: -1px; left: 0px; }
.ver_detalle { position: absolute; right: -8px; bottom: -7px; }
* html .ver_detalle { position: absolute; right: -8px; bottom: -8px; }
.contratar { position: absolute; right: -9px; bottom: -8px; }
* html .contratar { position: absolute; right: -9px; bottom: -10px; }
/* REPOSICIONADOS BARRA LATERAL */

/* BOTONERA */
#botonera a { text-decoration: none; border-top: 2px solid #ea562c; outline: 0; }
#botonera a:hover { background: #e63b22; border-top: 0; border-bottom: 2px solid #e63b22; }
#botonera .btn {
	display: inline-block;
	text-align: center;
	width: 100px;
	height: 20px;
	padding: 6px 3px 13px 3px;
	cursor: pointer;
	float: left;
	margin: 0px 2px;
}
#botonera .btn h1 { font-size: 12px; color: #FFF; text-transform: uppercase; text-shadow: #999; }
#botonera .btn h2 { font-size: 9px; color: #FFF; }
* html .btn h1, * html .btn h2 { padding: 0; margin: 0; }
/* BOTONERA */

#barra_pie { cursor: default; }
#barra_pie .logo { float: left; padding: 2px 4px 0 0; }
#barra_pie h2 { color: #666; text-align: left; margin-bottom: 1px; }
#barra_pie h3 { color: #666; text-align: left; font-size: 11px; margin-bottom: 3px; }
#barra_pie a { text-decoration: none; }
.plan { width: 222px; height: 192px; margin: 12px; padding: 0 0 0 42px; float: left; position: relative; }
.plan p { font-size: 10px; color: #999; text-align: left; }
.plan .flecha { position: absolute; top: -13px; left: 34px; }
* html .plan { padding: 0; margin: 10px 0 0 40px; width: 230px; }
* html .plan .flecha { position: absolute; top: -11px; left: 0px; }

#portada { width: 864px; }
#portada .bloque { width: 264px; padding-bottom: 40px; margin: 12px; float: left; position: relative; }
* html #portada .bloque { width: 264px; height: 226px; margin: 6px; }
#portada .bloque p { padding: 0 12px 8px 12px; font-size: 11px; color: #999; }

#clientes #left, #clientes #right, #clientes .titulo { float: left; }
#clientes .titulo { margin-right: 20px; }
#scroll { width: 400px; height: 38px; overflow: hidden; float: left; }
#scroller { width: 1240px; height: 38px; }
#scroller img { padding: 0 12px; }

#portfolio { padding-bottom: 40px; height: 480px; }
* html #portfolio { margin: 12px 0; width: 864px; }
* html .informacion { padding:0; margin:0; }
#portfolio .bloque { width: 264px; margin: 0 12px 12px 12px; float: left; position: relative; }
#portfolio .informacion h2 { margin: 12px 0px 0px 20px; clear: both; }
#portfolio .informacion h3 { margin-left: 20px; }
#portfolio .informacion h4 { margin: 0px 0px 4px 20px; }
#portfolio .informacion p { width: 500px; padding-bottom: 12px; }
.texto_proyecto { position: absolute; width: 154px; height: 70px; top: 15px; right: 9px; }
.texto_proyecto h4 { }
.texto_proyecto h5 { font-weight: normal; color: #333; }
.texto_proyecto h5 a { color: #333; text-decoration: none; }
.texto_proyecto h5 a:hover { text-decoration: underline; }
#hicimos, #planes { width: 264px; float: left; list-style-type: none; margin: 0; padding: 0; }
#hicimos li, #planes li {
	margin: 0 0 12px 0;
	width: 238px;
	color: #333;
	font-size: 11px;
	background: #CCC url(images/contenido_item-barra_center.gif) repeat-y center;
	padding: 17px 12px 13px 14px;
	position: relative;
}

/*
.vinculo_mas { position: absolute; right: 10px; bottom: 10px; }
#portfolio .vinculo_mas { position: absolute; right: 10px; bottom: -30px; }
*/
.vinculo_mas { position: relative; clear: left; float: right; right: 10px; }

#show_container {
	width: 500px;
	height: 275px;
	background: url(images/contenido_portfolio_bkg.gif) no-repeat;
	padding: 9px 9px 8px 9px;
	margin-left: 12px;
}

#item-portfolio { width: 98px; height: 94px; background: url(images/contenido_item-portfolio.gif) no-repeat; font-size: 11px; float: left; margin: 0 0 20px 8px; cursor: pointer; }
#item-portfolio img { margin: 9px 0 0 9px; }
#item-portfolio a { text-decoration: none; margin: 3px 9px 0 9px; display: block; }

#portfolio_completo h2 { clear: both; margin: 0 0 0 20px; }
#portfolio_completo h3 { clear: both; margin: 0 0 0 20px; }
#portfolio_completo h4 { clear: both; margin: 0 0 0 20px; }

	/* These next four rules are set by the Slideshow script. You can override any of them with the !important keyword but the slideshow probably will not work as intended. */
	.slideshow { display: block; position: relative; z-index: 0; }
	.slideshow-images { display: block; overflow: hidden; position: relative; }		
	.slideshow-images img { display: block; position: absolute; z-index: 1; }		
	.slideshow-thumbnails { overflow: hidden; }
	
	/** The images div is where the slides are shown. Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc. */
	.slideshow-images { height: 300px; width: 400px; }		
	.slideshow-images-visible { opacity: 1; }	
	.slideshow-images-prev { opacity: 0; }
	.slideshow-images-next { opacity: 0; }
	.slideshow-images img { float: left;left: 0; top: 0; }
	
	.slideshow { height: 275px; margin: 0 auto; width: 500px; }
	.slideshow a img { border: 0; }
	
	/* CONTROLS */
	.slideshow-controller { height: 60px; left: 0; overflow: hidden; position: absolute; top: 40%; width: 500px; z-index: 10000; }
	.slideshow-controller * { margin: 0; padding: 0; }
	.slideshow-controller-hidden { opacity: 0; }
	.slideshow-controller-visible { opacity: 1; }
	.slideshow-controller a { cursor: pointer; display: block; height: 46px; overflow: hidden; position: absolute; top: 0px; }
	.slideshow-controller li { list-style: none; }
	
	.slideshow-controller li.pause a { background: url(images/contenido_portfolio_paus.png) no-repeat; left: 231px; width: 39px; }
	.slideshow-controller li.play a { background: url(images/contenido_portfolio_play.png) no-repeat; left: 230px; width: 39px; }
	.slideshow-controller li.next a { background: url(images/contenido_portfolio_next.png) no-repeat; right: 0px; width: 39px; }
	.slideshow-controller li.prev a { background: url(images/contenido_portfolio_prev.png) no-repeat; left: 0px; width: 39px; }
	
	.slideshow-controller li.pause a:hover { background: url(images/contenido_portfolio_paus_over.png) no-repeat; left: 230px; width: 39px; }
	.slideshow-controller li.play a:hover { background: url(images/contenido_portfolio_play_over.png) no-repeat; left: 230px; width: 39px; }
	.slideshow-controller li.next a:hover { background: url(images/contenido_portfolio_next_over.png) no-repeat; right: 0px; width: 39px; }
	.slideshow-controller li.prev a:hover { background: url(images/contenido_portfolio_prev_over.png) no-repeat; left: 0px; width: 39px; }
	
	/* LOADER */
	.slideshow-loader { height: 28px; right: 0; position: absolute; top: 0; width: 28px; z-index: 10001; }
	.slideshow-loader-hidden { opacity: 0; }
	.slideshow-loader-visible { opacity: 1; }

/* con esto se veia mal en IE6 */
/*
#quienes { padding-bottom: 40px; }
#quienes .bloque { width: 264px; height: 420px; margin: 0 12px 12px 12px; float: left; position: relative; }
#quienes h2 { color: #ff3333; font-size: 12px; margin: 12px 0px 4px 20px; }
#gallery { margin-left: 24px; }*/
/* FIX */
#quienes, #que_hacemos, #portfolio_completo { padding-bottom: 40px; height: 480px; }
* html #quienes, * html #que_hacemos, * html #portfolio_completo { margin: 12px 0; width: 864px; }
#quienes .bloque, #que_hacemos .bloque, #portfolio_completo .bloque { width: 264px; margin: 0 12px 12px 12px; float: left; position: relative; }
/* FIX */

* html #hosting { margin: 12px; width: 864px; }
#hosting .informacion li { list-style-type: circle; color: #999; padding-bottom: 4px; font-size: 11px; }
#hosting p { padding-bottom: 12px; }
#hosting .informacion h1, #hosting .informacion h3, #hosting .informacion h4 { padding-left: 20px; }
#hosting .informacion h2 { padding: 20px 0 4px 20px; }
#planes li { line-height: 15px; }
#planes h3 { border-bottom: 1px dashed #f33; margin-bottom: 4px; text-transform: uppercase; text-align: center; padding: 2px; }
#form_contratar { margin-left: 24px; font-size: 12px; text-align: left; }
#hosting .informacion #form_contratar td h3, #hosting .informacion #form_contratar td h2 { margin: 0; padding: 0; }
#hosting .informacion #form_contratar td h2 { padding: 10px 0 0 0; }
#hosting .informacion #form_contratar td h3 { padding: 10px 0 0 4px; color: #999; font-weight: normal; text-transform: uppercase; font-size: 10px; }
#form_contratar input { width: 206px; height: 14px; padding: 8px 6px; border: 0; background: url(images/contenido_hosting_input_bg.gif) no-repeat; }
*html #form_contratar input { background: url(images/contenido_hosting_input_bg.gif) fixed no-repeat; }

/* FORMULARIO DE CONTACTO */
#form_contacto {
	width: 500px;
	height: 250px;
	position: relative;
	background: url(images/contenido_contacto_bg.gif) no-repeat;
	font-size: 10px;
	text-transform: uppercase;
	color: #666;
	margin: 30px 0 0 30px;
}
#form_contacto input { border: 0; width: 205px; height: 16px; padding: 4px 2px 0px 2px; color: #666; }
#form_contacto textarea { width: 435px; height: 100px; border: 0; color: #666; padding: 3px; font-size: 12px; }
* html #form_contacto textarea { width: 435px; height: 103px; border: 0; color: #666; padding: 3px; font-size: 12px; }
#form_contacto a { font-size: 16px; font-weight: bold; text-decoration: none; }
#form_contacto a:hover { color: #666; }

#hosting h2, #contacto h2 { padding: 0 0 0 10px; }
#form_box { margin: 0 0 0 12px; position: relative; }
#btn_volver { position: absolute; right: 60px; bottom: -20px; }

#label_nombre { position: absolute; left: 38px; top: -5px; }
#label_telefono { position: absolute; left: 268px; top: -5px; }
#label_email { position: absolute; left: 38px; top: 44px; }
#label_consulta { position: absolute; left: 268px; top: 44px; }
#label_comentario { position: absolute; left: 38px; top: 92px; }
#label_enviar { position: absolute; right: 110px; bottom: 0px; }
#campo_nombre { position: absolute; left: 38px; top: 11px; }
#campo_telefono { position: absolute; left: 268px; top: 11px; }
#campo_email { position: absolute; left: 38px; top: 60px; }
#campo_consulta { position: absolute; left: 268px; top: 60px; }
#campo_comentario { position: absolute; left: 38px; top: 106px; }
/* FORMULARIO DE CONTACTO */

#instructivos .informacion h1 { font-size: 14px; padding: 12px 0 0 20px; cursor: default; }
#instructivos p { padding: 0 0 12px 12px; }
#instructivos ul { width: 224px; float: left; padding: 0; margin: 0; padding: 10px 0 0 20px; }
#instructivos li { list-style-type: none; font-size: 12px; margin-bottom: 3px; }
#instructivos li h1 { margin-top: 14px; border-bottom: 1px dashed #f33; }
#instructivos li a { text-decoration: none; }
#instructivos li a:hover { color: #666; }


#contacto .bloque, #vias { width: 224px; height: 420px; margin: 0 0 0 20px; padding: 0; float: left; position: relative; }
#contacto .informacion { margin: 0; }
#contacto p { padding: 0 0 12px 12px; }
#contacto h1 { font-size: 14px; padding: 12px 0 0 20px; cursor: default; }
#contacto ul, #hosting ul { width: 224px; float: left; }
#contacto li, #hosting li { padding-bottom: 12px; list-style-type: none; font-size: 12px; }
#contacto li a, #hosting li a { text-decoration: none; }
#contacto li a:hover, #hosting li a:hover { color: #666; }

/* IMAGE OVERLAY */
div img { behavior: url(/templates/revisionalpha/templates/iepngfix.htc); }