@charset "utf-8";

/*    BODY     */

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background:#CCC url(Imagenes/fondo2.png) repeat-x;
	margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
	padding: 0;
	text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
	color: #000;
   behavior: url("csshover.htc");
}

/*Cuerpo*/ 

#container {
	width: 780px;  /* el uso de 20px menos que un ancho completo de 800px da cabida a los bordes del navegador y evita la aparición de una barra de desplazamiento horizontal */
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	text-align: left; /* esto anula text-align: center en el elemento body. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*    HEADER     */

#header {
	padding: 0 10px 0 20px;  /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen bajo él. Si se utiliza una imagen en el #header en lugar de texto, es posible que le interese quitar el relleno. */
	margin:0;
	height:110px;
	position:relative;
	text-align:right;
	background: #FFF;
	text-align:left;
	-moz-border-radius-bottomleft:1.5ex;
	-webkit-border-bottom-left-radius:1.5ex;
	-moz-border-radius-bottomright:1.5ex;
    -webkit-border-bottom-right-radius:1.5ex;
}


.clientes ul {float:right; text-align:right;list-style:none; line-height:0; margin-top:10px;}
.clientes ul li a {display:block; padding-right:50px; line-height:2em;}
.clientes li#tel a { 	background:url(Imagenes/botontel.png) no-repeat right center;}
.clientes li#gestion a { 	background:url(Imagenes/botongestion.png) no-repeat right center; }
.clientes li#gestion a:active { 	background:url(Imagenes/botongestionactive.png) no-repeat right center;}
.clientes li#webmail a { 	background:url(Imagenes/botonemail.png) no-repeat right center;}
.clientes li#webmail a:active { 	background:url(Imagenes/botonemailactive.png) no-repeat right center;}

.clientes a {
	font-size:11pt;
	color:#333;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
}

.clientes p {
	padding:5px;
	margin-top:3px;}
	
.clientes p strong {
	font-size:12px;
}

#logo { position:absolute; 	left:20px; 	top:30px; }

/*    MENU     */

#menu {
	margin:10px 0 0 0;
	background-image:url(Imagenes/fondomenu2.png);
	background-repeat: repeat-x;
	position:relative;
	padding:3px 0 2px 0;
	text-align:center;
	height:25px;
	-moz-border-radius-topleft:1.5ex;
	-webkit-border-top-left-radius:1.5ex;
	-moz-border-radius-topright:1.5ex;
    -webkit-border-top-right-radius:1.5ex;
}

/*    CONTENIDO     */

#contenido { 	min-height:500px; *height:auto !important; padding-bottom:20px;	background: #FFF !important; }

#contenido p { 	padding-left:30px; 	font-size:12px; 	padding-right:30px; }

#contenido ul li {
	font-size:12px; 	
	color:#333; 	
	list-style:none; 
	background:url(Imagenes/list.png) no-repeat center left;	
	line-height:20px; 
	padding-left:20px;
}

#titulo {
	background:url(Imagenes/fondotitulo5.png);
	background-repeat:no-repeat;
	height:80px;
	text-align:left;
	padding-top:20px;

}

#titulo h1 {
	font-size:30px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	color: #666;
	padding-left:40px;
}

#lateral {
	float:right;
	margin-top:110px;
	font-size:11pt;
	line-height:30px;
	background: url(imagenes/lineasimple2.png) no-repeat left #FFF;
	width:150px;
	padding-right:30px;
}

#lateral a { color: #06F; }
#lateral a:visited { color: #06F; }
#lateral a:hover { color:#090; } 
#lateral a#current { font-weight:bold; }

#cuatros {
	background:url(Imagenes/4042.png) no-repeat bottom right;
	text-align:center;
	width:400px;
	height:400px;
	margin: 0 0 50px 200px;
}

#cuatrostexto { padding:65px 0 0 80px;	text-align:left; }

#login {
	text-align:center;
	margin:20px 0 0 190px;
	width:300px;
	height:200px;
	background:url(imagenes/fondologin.png);
	color: #FFF;
	-moz-border-radius:1.5ex;
	-webkit-border-radius:1.5ex;
	-moz-border-radius-topright:1.5ex;
    -webkit-border-top-right-radius:1.5ex;
	position:relative;
	
}

#login form {
	width:300px;
	text-align:center;
	margin:auto;
	position:absolute;
	top:100px;
	left:0px;
}

label { float:left; display:block; width:90px; text-align:right; padding-top:6px; padding-right:5px;}
input {float:left; width:130px;}
input.button {clear:both; text-align:center; float:none; width:100px;}

#menugestion {
	float:right;
	margin-right:50px;
	background:url(imagenes/fondologin.png);
	-moz-border-radius:1.5ex;
	-webkit-border-radius:1.5ex;
	-moz-border-radius-topright:1.5ex;
    -webkit-border-top-right-radius:1.5ex;
	text-align:center;
	padding-top:10px;
	display:inline;
}
#menugestion ul {text-align:left;}
#menugestion ul li {
	color: #FFF;
	padding-right:20px;
	padding-left:0px;
	background:none;
}

/*    CAJAS DENTRO DEL CONTENIDO     */

#cajas {
	height:300px;
	position:relative;
	background-image:url(Imagenes/fondocajas2.png);
	text-align:center;
	margin-top:20px;
}

#cajas h1 { font-size:16px;	color: #333; font-weight: bold;}

#cajas a { 	color:#333; }

.caja1 {
	float:left;
	width:220px;
	height:300px;
	margin-left:30px;
	display:inline;
}


/*    TEXTO DEL CONTENIDO     */

#informacion { 	margin: 0 20px 0 50px;}

/*    FOOTER     */

#footer {
	padding: 0 10px; /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen por encima de él. */
	margin-bottom:30px;
	background:#333;
	text-align:center;
	-moz-border-radius-bottomleft:1.5ex;
	-webkit-border-bottom-left-radius:1.5ex;
	-moz-border-radius-bottomright:1.5ex;
    -webkit-border-bottom-right-radius:1.5ex;
}


#footer p {
	margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
	padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
	font-size:10px;
	color: #FFF;
	
}

#footer h1 { 	color:#FFF;	font-size:14px; 	text-align:center; }

#footer a { 	color: #FFF; }

/*    IMAGENES GRAL    */

img {
	border: none;
	text-decoration: none;
	clear: both;
}


/*    LINKS GRAL    */

a { 	text-decoration:none; }


/*    TEXTO GRAL    */

h4 {
	/*text-shadow:0px -1px 0px #003;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-style: normal;
	color: #06C;
	font-weight: normal;
	text-align:center;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-style: normal;
	color: #009;
	font-weight: bold;
	clear:both;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-style: normal;
	color: #093;
	font-weight: bold;
	clear:both;
}


/*    LISTAS PARA MENU    */

#menu ul { 	margin:0px; 	font-weight: bold; }

#menu ul li { 	list-style:none; 	display:inline; }

#menu ul li a {
	margin-right:20px;
	color:#FFF;
	font-size:12px;
	display:inline;
}

#menu ul li a:hover { border-bottom: 1px solid #6C9;}
#menu ul li a#current { border-bottom: 1px solid #6CF;}


#contenido a:hover {text-decoration:underline;}


/*    SLIDESHOW    */

#slideshow-container	{ width:780px; height:207px; position:relative; }
#slideshow-container img { width:780px; height:207px; display:block; position:absolute; top:0; left:0; z-index:1; }
.toc					{ position:absolute; left:0px;; bottom:10px; z-index:2; display:block; width:20px; background: #000; color:#fff; text-align:center; padding:3px; text-decoration:none; font-size:8pt; filter:alpha(opacity=50); opacity: 0.5 }
.toc-active				{ background: #FFF; color:#000;}
#next					{ position:absolute; bottom:90px; right:20px; z-index:2; display:block; width:20px; color:#fff; text-align:center; padding:3px; text-decoration:none; font-size:8pt; background:url(Imagenes/despues2.png) no-repeat; height:22px;}
#previous				{ position:absolute; bottom:90px; left:20px; z-index:2; display:block; width:20px; color:#fff; text-align:center; padding:3px; text-decoration:none; font-size:8pt; background:url(Imagenes/antes2.png) no-repeat; height:22px;}

/* DATOS DE TABLA */

table {
	width:650px;
	border-top:1px solid #CEEFC0;
	border-right:1px solid #CEEFC0;
	margin:1em auto;
		border-collapse:collapse;
	}
tr.odd td,
tr.odd .column1 {
	background:#F4FFEA url(imagenes/fondotabla.png) repeat;
}	
.column1	{
	background:#FFF;
	text-align: left;
	}
td {
	color:#333;
	border-bottom: 1px solid #CEEFC0;
	border-left:1px solid #CEEFC0;
	padding:.3em 1em;
	text-align:center;
	}				
th {
	font-weight:normal;
	color: #333;
	font-size:12px;
	text-align:left;
	border-bottom: 1px solid #D3FFA8;
	border-left:1px solid #D3FFA8;
	padding:.3em 1em;
	}	
thead th {
	background:#E4FFCA url(imagenes/fondotabla2.png);
	text-align:center;
	font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	color:#090
	}				
tfoot th {
	background:#E4FFCA url(imagenes/fondotabla2.png);
	text-align:center;
	}	
	
tfoot th em {
	color:#f03b58;
	font-weight: bold;
	font-size: 1.1em;
	font-style: normal;
	}	

.centrar {
	text-align:center;
}




/*-------------FORMS---------------*/

#formulario {margin-left:30px; margin-right:30px;}
form {font-size:12px;}
form p {
	text-align : left;
	margin : 0.5em 0;
}

fieldset, #sub {
	margin : 1em 0;
	padding : 0 1em .5em;
	border : 0 none;
	
}

#sub {
	border : 0 none;
}

legend {
	color : #093;
	background : transparent;
	font-size : 1.3em;
	font-weight : bold;
}

legend.p {
	text-align : left;
	padding : 0;
	color : #333333;
	font-size : 1.2em;
	font-weight : normal;
}

label {
	float : left;
	width : 230px;
	text-align : left;
	clear:;
}

fieldset input, textarea, select {
	width : 220px;
	border-top : #555555 1px solid;
	border-left : #555555 1px solid;
	border-bottom : #cccccc 1px solid;
	border-right : #cccccc 1px solid;
	padding : 1px;
	color : #333333;
	margin-bottom : 0.5em;
	clear:right;
}

#sub { overflow:hidden;}
#fm-submit {
	clear : both;
	text-align : center;
	border : #333333 1px solid;
	padding-top: 5px !important;
	padding-bottom:5px !important;
	background : #555555;
	color : #ffffff;
	padding-right:5px !important;
	padding-left:5px !important;
	float:right;
	width:80px !important;
	cursor:pointer;
	margin-right:167px;
}

input#fm-submit:hover {background:#333333;}
input:focus, textarea:focus {
	background : #efefef;
	color : #000000;
}

fieldset label.fm-req:after {
	content:"*";
}
#acepto { width:15px;  text-align:left; margin:0; padding:0; padding-left:5px;}

#condiciones {margin-left:10px;}
#condiciones p {width:450px; height:100px; font-size:10px; overflow-y:scroll; overflow-x:hidden; border:1px solid #CCC; padding:10px; margin:0; margin-top:10px; }
.obligatorios { font-size:10px; margin-left:10px; margin-top:20px;}

#servicio1 { background: url(imagenes/iconohogar.png) no-repeat top left; margin-left:10px;}
#servicio2 { background: url(imagenes/iconoprofesional.png) no-repeat top left; margin-left:10px;}
#servicio3 { background: url(imagenes/iconoempresa.png) no-repeat top left; margin-left:10px;}

/* HOSTING */
#caracteristicas-hosting { width:480px; margin-right:15px; float:left;}
#planes-hosting {width:25%; float:left; clear:right; border:1px solid #CEEFC0; height:200px; border-radius:1.5ex; margin-top:40px;}
#planes-hosting p {padding:10px; padding-top:0px; margin-top:2px;}
#planes-hosting h2 {text-align: center;
font: normal normal bold 1.2em/2em 'Century Gothic', 'Trebuchet MS', Arial, Helvetica, sans-serif;
color: #090; background: #E4FFCA url(imagenes/fondotabla2.png); border-bottom:1px solid #CEEFC0; text-shadow:0px 0px 0px; margin:0px;}
#planes-hosting a { font-size:140%; margin-bottom:10px !important;margin-top:2px;}
#planes-hosting small { font-size:80%; color:gray;}
a.comprar img{margin-left:7px;}

ul.hosting-pasos { list-style:none; background:none;}
ul.hosting-pasos li { list-style:none; background:none; padding-left:40px !important; padding-top:5px; padding-bottom:10px; margin-bottom:10px;}
ul.hosting-pasos li.paso1 { background:url(Imagenes/paso1.png) top left no-repeat !important;}
ul.hosting-pasos li.paso2 { background:url(Imagenes/paso2.png) top left no-repeat !important;}
ul.hosting-pasos li.paso3 { background:url(Imagenes/paso3.png) top left no-repeat !important;}
ul.hosting-pasos li.tilde { background:url(Imagenes/tilde.png) top left no-repeat !important;}

.hosting-apps { width:300px !important; float:left; overflow:hidden; height:80px !important;}
.hosting-apps p { float:left; width:230px  !important;margin-top:0px !important; padding-left:10px !important; padding-right:0px !important;}
.hosting-apps img {float:left;margin-left:10px !important;width:32px !important;}

 /*CAMARAS*/
#caja-cam {margin:0 auto; width:350px; overflow:hidden; height:128px; background:url(Imagenes/bg-cuadro.png) repeat-x bottom left #F2F2F2; border:1px solid 
#999999; border-radius:1.5ex;}
#caja-cam img { border-right:1px solid #999999;}
.camaras { float:left; text-align:left; width:221px; height:128px; }
.camaras a {background:url(Imagenes/bg-btn.png) repeat-x bottom left #F2F2F2; width:211px; height:37px; display:block; margin:0; padding:0; padding-top:25px; padding-left:10px; }
.camaras a:first-child {border-bottom:1px solid #999;}
.camaras a:hover {background:url(Imagenes/bg-btnh.png) repeat-x bottom left #999999;}

.advertencia {border:1px solid orange; text-align:left;  width: 320px; margin:40px auto; background:url(Imagenes/vlc.png) no-repeat center left; padding-left:30px;}