/* SymBox Hosting CSS / Global
	 * Creado por Rolohazard, godlike (at) live.com
	 * Los release notes vealos en www.******.cl/portafolio/?trabajo=symbox 
	 */

/* 
 Agradecimientos especiales a IE6 por extender el desarrollo al doble de tiempo
 para este diseņo.
*/

body {
	background: #004386 url(siteimg/BKG.png) repeat-x;
	margin: 20px 0 0 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #F7FBFF;
}

/* SIFR */
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Default links */
a {
	outline: 0; /* Esos puntos tan sexys del FF...*/
}

a:link, a:visited, a:active {
	color: #8CA8C4;
	text-decoration: none;
}

a:hover {
	color: #FFF;
	text-decoration: underline;
}

/* p */
p {
	text-align: justify;
}

/* Headings */
h1 {
	width: 100%;
}

h1, h2, h3 {
	font-family: "Lucida Sans", Arial, Helvetica, sans-serif;
}

h1 span {	
	display: none;
}

/* H1 principales */
h1#inicio, h1#hosting,
h1#reseller, h1#housing, h1#housing-c,
h1#nclientes, h1#datacenter,
h1#soporte, h1#contacto,
h1#formcont {
	margin: 0;
	padding: 0;
	height: 50px;
}

h1#inicio {
	background: url(siteimg/h1/index.gif) no-repeat;
}

h1#hosting {
	background: url(siteimg/h1/planes.gif) no-repeat;
}

h1#reseller {
	background: url(siteimg/h1/reseller.gif) no-repeat;
}

h1#housing {
	background: url(siteimg/h1/housing.gif) no-repeat;
}

h1#housing-c {
	background: url(siteimg/h1/housing-c.gif) no-repeat;
}

h1#nclientes {
	background: url(siteimg/h1/clientes.gif) no-repeat;
}

h1#datacenter {
	background: url(siteimg/h1/data.gif) no-repeat;
}

h1#soporte {
	background: url(siteimg/h1/soporte.gif) no-repeat;
}

h1#contacto {
	background: url(siteimg/h1/contactanos.gif) no-repeat;
}

h1#formcont {
	background: url(siteimg/h1/contrato.gif) no-repeat;
}


/* MAIN */
.main {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	height: 700px;
}

.main #header {
	background: url(siteimg/top_fix.png) no-repeat;
	height: 100px;
}

#header a {
	width: 360px;
	height: 85px;
	display: block;
}


/* TABS */
.main #tabs {
	margin: 0 auto 0 auto;
	height: 20px;
}

.main #tabs ul {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 10px;
	line-height: 20px;
	color: #003467;
}

.main #tabs ul li {
	width: 80px;
	float: right;
	list-style: none;
	background: url(siteimg/tab_.gif) no-repeat;
	margin: 0 4px 0 0; 
}
	
.main #tabs ul a {
	width: 80px;
	float: left;
	list-style: none;
	font-size: 9px;
	background: url(siteimg/tab_a.gif) no-repeat;
	color: #002244;
	text-decoration: none;
}
	
.main #tabs ul li a:hover {
	background: url(siteimg/tab_ah.gif) no-repeat;
	color: #003467;
	text-decoration: none;
}

.hint {
	height: 22px;
	line-height: 22px;
	text-align: right;
	font-size: 11px;
	color: #7B96B0;
	margin-bottom: 3px;
}

.main #contenido {
	height: 530px;
	padding: 8px 19px 0 20px;
	background-repeat: no-repeat;
	background: url(siteimg/cuerpo80.png) no-repeat;
}

.main #contenido p {
	padding: 0;
	margin: 5px 0 15px 0;
}

/* LARGO Y TORTUOSO FOOTER */
.footer, .footer_hs {
	width: 100%;
	height: 112px;
	margin-top: 10px;
	padding: 0;
/* Como hago un div bottom que funcione como tablas? */
}

.footer {
	background: url(siteimg/BKG_foot_60.png) repeat-x;
}

.footer_hs {
	background: url(siteimg/BKG_foot.png) repeat-x;
}


#shiny {
	width: 100%;
	margin: 0 auto 0 auto;
	background: url(siteimg/ftop.png) no-repeat center;
	height: 3px;
	padding: 0;
}

.footw {
	width: 900px;
	margin: 35px auto 0 auto;
}

/* Logos Foot */
.symbox {
	float: left;
	margin: 5px 15px 5px 5px;
}

.symbox img {
	border: 0;
}

.madsym {
	float: right;
	margin-left: 8px;
}

.madsym img {
	border: 0;
}

/* COPYRIGHT */
.copy {
	float: left;
	height: 27px;
	padding-top: 8px;
	width: 415px;
	color: #FFF;
}

.footer .copy {
	color: #4C79A6;
}

.footer_hs .copy {
	color: #FFF;
}

.footer .copy a {
	color: #2A6095;
}

.footer_hs .copy a {
	color: #8CA8C4;
}

.footer_hs .copy a:hover {
	color: #FFF;
}

/* POR QUE SYMBO? */
div#pros {
	float: left;
	width: 695px;
}

div#pros div {
	height: 96px;
	width: 590px;
	padding-left: 95px;
	text-align: justify;
}

div#pros h2 {
	font-size: 1.3em;
	padding: 0;
	margin: 0;
}

/* Servidor Nacional */
div#pros div.servidor {
	background: url(siteimg/index/fondos/servidor85.gif) no-repeat;
}

div#pros div.servidor_hs {
	background: url(siteimg/index/fondos/servidor.gif) no-repeat;
}

/* Variedad de Planes */
div#pros div.planes {
	background: url(siteimg/index/fondos/planes85.gif) no-repeat;
}

div#pros div.planes_hs {
	background: url(siteimg/index/fondos/planes.gif) no-repeat;
}

/* Economia */
div#pros div.economia {
	background: url(siteimg/index/fondos/economia85.gif) no-repeat;
}

div#pros div.economia_hs {
	background: url(siteimg/index/fondos/economia.gif) no-repeat;
}

/* Multiproposito */
div#pros div.multi {
	background: url(siteimg/index/fondos/multi85.gif) no-repeat;
}

div#pros div.multi_hs {
	background: url(siteimg/index/fondos/multi.gif) no-repeat;
}

/* Juntemos todos los h2 y p */
div.servidor h2, div.servidor p,
div.planes h2, div.planes p,
div.economia h2, div.economia p,
div.multi h2, div.multi p {
	color: #DBE3EA;
	padding: 0;
	margin: 0;
}

div.servidor h2,
div.planes h2,
div.economia h2,
div.multi h2 {
	border-bottom: 1px solid #5F83A7;
}

/* Juntemos todos los h2 y p en _hs */
div.servidor_hs h2, div.servidor_hs p,
div.planes_hs h2, div.planes_hs p,
div.economia_h2 h2, div.economia_hs p,
div.multi_hs h2, div.multi_hs p, {
	color: #FFF;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #7B99B7;
}

div.servidor_hs h2,
div.planes_hs h2,
div.economia_hs h2,
div.multi_hs h2 {
	border-bottom: 1px solid #7B99B7;
}

/* Varios */
#varios {
	padding: 0; margin: 50px auto 0 auto;
	text-align: center;
}

#varios p {
	text-align: center;
}

#varios h1{
	padding: 0; margin: 0;
	font-weight: normal;
	font-size: 2.7em;
}

#varios img {
	margin: 20px 0 0 0;
}

/* Margin inicio */
.marginicio {
	margin: 20px 15px 0 15px;
}

/* LAS GRANDES MARCAS DE 2006 */
div#marcas {
	width: 97px;
	height: 369px;
	float: right;
	background: url(siteimg/index/bkgcuadrologos.jpg) no-repeat;
	padding: 15px 15px 0 15px;
}

/*
 * ESPECIFICOS
*/

#clientes {
	width:760px;
	margin: 20px auto 0 auto;
}

#clientes img {
margin-bottom: 15px;
}

/* Planes */
#planestab {
	width: 100px;
	height: 168px;
	border-right: 1px solid #00356A;
	line-height: 20px;
	float: left;
	padding: 0;
	margin: 0;
}

#planestab li {
	list-style: none; padding-left: 10px;
}

#planestab li a {
	text-decoration: none;
}

#planestab li a:hover {
	text-decoration: none;
}

#plan {
	width: 740px;
	float: left; 
	padding: 10px 0 10px 10px;
	margin: 0;
}

#plan h1 {
	padding: 0; margin: 0;
	font-weight: normal;
	font-size: 2.8em;
	border-bottom: 1px solid #7B99B7;
}

#plan h2, #def h2{
	padding: 0; margin: 0;
	font-weight: normal;
	font-size: 2em;
}

div.cart {
	float: left;
	width: 370px;
	margin-top: 10px;
}

div.cart ul {
	margin: 0; padding: 10px;
	line-height: 15px;
}

div.cart li {
	padding-left: 10px;
	list-style: inside;
}

div.valores {
	width: 250px;
	float: left;
	clear: both;
	margin-top: 10px;
}

div.btncontrato {
	height: 23px;
	width: 470px;
	float: right;
	margin-top: 53px;
	text-align: center;
}

div.c2r {
	float: right;
	width: 350px;
	margin-top: 10px;
}

div.formc {
	height: 330px;
	width: 365px;
	margin: 0; padding: 0;
	float: left;
}

div.fcontacto {
	height: 330px;
	width: 860px;
	margin: 0;
	float: left;
}

div.fcontacto h3 {
	clear: both;
	padding-top: 10px;
	text-align: center;
}

/* ESTILOS PARA LOS FORMULARIOS */
form {
	border: 0; margin: 0; padding: 0;
}

input {
	height: 17px;
	padding: 2px; margin: 0 5px 0 0;
	width: 170px;
	font-size: 12px;
	font-family: "Lucida Sans Unicode", verdana;
	border-bottom: 2px dotted #7F9DB9;
	border-right: 0; border-left: 0; border-top: 0;
	background: transparent;
	color: #7F9DB9;
	text-transform: uppercase;
}

input[type=radio] {
	border: 0;
	margin: 0; padding: 2px;
}

input[type=radio]:hover {
	border: 0;
}


input:focus {
	border-bottom: 2px dotted #FFF;
	border-right: 0; border-left: 0; border-top: 0;
	color: #FFF;
}

input:hover {
	border-bottom: 2px dotted #C2D1DE;
	border-right: 0; border-left: 0; border-top: 0;
	color: #C2D1DE;
}


div.fclh, div.fcrh {
	height: 25px;
	line-height: 25px;
	margin-bottom: 10px;
	float: left;
}

div.fclh {
	width: 150px;
	text-align: right;
	padding-right: 10px;
	clear:both;
}

/* CT */
div.fClh, div.fCrh {
	height: 25px;
	line-height: 25px;
	margin-bottom: 10px;
	float: left;
}

div.fClh {
	width: 300px;
	text-align: right;
	padding-right: 10px;
	clear:both;
}

div.fcrh {
	width: 200px;
}

/* CT */
div.fCrh {
	width: 410px;
}

/* CT x2 */
div.fcontacto input {
	width: 250px;
	text-transform: none;
}

/* Ciclo */
.cpago { 
	padding: 10px 20px 0 45px;
}

div.fcontacto textarea {
	width: 700px;
	height: 80px;
	background: transparent;
	border: 2px dotted #7F9DB9;
	color: #7F9DB9;
	padding: 10px;
	font-family: "Lucida Sans Unicode", verdana;
	font-size: 12px;
}

div.fcontacto textarea:focus {
	border: 2px dotted #FFF;
	color: #FFF;
}

div.fcontacto textarea:hover {
	border: 2px dotted #C2D1DE;
	color: #C2D1DE;
}

.ppplan {
	float:left;
	clear: both;
	border-bottom: 2px dotted #7F9DB9;
	width: 174px;
	height: 28px;
	line-height: 28px;
	font-size: 12px;
	font-family: "Lucida Sans Unicode", verdana;
	color: #7F9DB9;
	text-transform: uppercase;
}

/* Checkboxes */
label.radio_checked, label.radio_unchecked {
	background: #FF0000 url(js/tick.gif) no-repeat;	
	padding-left: 25px;
	display: block;
	margin-bottom: 10px;
}

label.radio_checked {
	background: url(js/tick.gif) no-repeat;	
}

label.radio_unchecked  {
	background: url(js/cross.gif) no-repeat;	
}

.crirHidden {
	position: absolute;
	left: -1000px;
}

div#plan h3 {
	font-size: 14px;
	padding: 0; margin: 0 0 5px 0;
	border-bottom: 1px solid #00356A;
	text-indent: 10px;
	width: 98%;
	font-weight: bold;
}

/* Enviar */
.sendar {
	height: 23px;
	width: 740px;
	clear: both;
	padding: 10px 0 10px 0;
	text-align: center;
}

.sendor {
	height: 23px;
	width: 860px;
	clear: both;
	padding: 10px 0 10px 0;
	text-align: center;
}

/* def */
#def {
	width: 750px;
	margin: 0 auto 0 auto;
}