/*  
   --------------------------------------------------------------
	Sitio: www.xmundo.net
	Archivo: plans.css (screen)
	Version: 2008-09-01
	Autor: Maira Vykus
	
	Copyright 2008 XMundo Networks (www.xmundo.net)
    --------------------------------------------------------------
*/

/* *** PLANES HOME Y HOSTING ***************************************************************** */

/* ---- banner y dominios --- */
#container_home { height: 127px; margin: 0 1px; padding: 0; background: #F7F7F7; border-bottom: 1px solid #CED3D9; }
#banner { float: left;  width: 380px; overflow: hidden; height: 100%; position: relative; margin: 0; padding: 0; }
#banner span { width: 100%; height: 100%; background: url(../images/home/presentacion.jpg) no-repeat; position: absolute; }
#banner h1 { font-size: 1.4em; color: #B30000; }
.domain { width: 180px; margin: 0 0 0 380px !important; padding: 5px 0 0 5px; }
select#extension { width: 97px !important; width: 81px; margin:0 2px 0 0; padding: 1px; font-weight: 400; font-size: 11px; color: #484B4D; background: #FFF; border: 1px solid #7B8286; }
.domain button { width: 58px; }
#consejos { width: 100px; margin: 8px 0 0 0; padding: 0 0 0 45px; background: url(../images/home/lateral_domain_consejos.gif) no-repeat left center; }

/* ---- ubicación de columnas triples y colores --- */
#content .planes { clear: both; overflow: hidden; height: 100%; margin: 15px 0 0 0; padding: 0; }
#content .planes .uno, #content .planes .dos, #content .planes .tres { clear: right; float: left; width: 184px; margin: 0 2px 0 0; padding: 0 0 2px 0; background: #EBEDEE url(../images/home/planes/planes_fondo.gif) repeat-x 100% 100%;}
#content .planes .tres { margin: 0; }
#content #simples div { border-bottom: 6px solid #DF0000; }
#content #revendedores div { border-bottom: 6px solid #829A25; }

/* ---- reemplazo títulos tipos de planes (simples / revendedores) --- */
#content .planes h2 { position: relative; float: left; width: 177px; height: 33px; margin: 0 0 5px 0; padding: 0; font: 700 12px "Tahoma", Geneva, Arial, Helvetica, sans-serif; color: #2E485E; background: #fff; border: 0; }
.planes h2 span { position: absolute; width: 100%; height: 100%; background: url(../images/home/planes/planes_title.gif) no-repeat 0 0; }
.planes#simples h2 span { background-position: 0 0; }
.planes#revendedores h2 span { background-position: 0 -33px; }

a.masplanes, a.masplanes:visited, a.masplanes:active { display: block; width: 379px; margin: 20px 0 5px 177px; text-align: right; font-weight: 400; text-decoration: none; color: #2E485E; background: transparent; }
a.masplanes:hover { font-weight: 400; text-decoration: underline; color: #000; background: transparent; }

/* ---- reemplazo títulos planes individuales (pro150, plus10) --- */
#content .planes h3 { position: relative; width: 184px; height: 52px; margin: 0 0 15px 0; padding: 0; font: 700 12px "Tahoma", Geneva, Arial, Helvetica, sans-serif; color: #FFF; background: #DF0000; border: 0; }
.planes#simples h3 span { position: absolute; width: 100%; height: 100%; background: #DF0000 url(../images/home/planes/planes_title_simples.gif) no-repeat 0 0; }
.planes#revendedores h3 span { position: absolute; width: 100%; height: 100%; background: #829A25 url(../images/home/planes/planes_title_revendedores.gif) no-repeat 0 0; }
#simples h3.titulo_1 span, #revendedores h3.titulo_1 span, #simples h1.titulo_1 span, #revendedores h1.titulo_1 span { background-position: 0 0; }
#simples h3.titulo_2 span, #revendedores h3.titulo_2 span, #simples h1.titulo_2 span, #revendedores h1.titulo_2 span { background-position: 0 -52px; }
#simples h3.titulo_3 span, #revendedores h3.titulo_3 span, #simples h1.titulo_3 span, #revendedores h1.titulo_3 span { background-position: 0 -104px; }
#simples h3.titulo_4 span, #revendedores h3.titulo_4 span, #simples h1.titulo_4 span, #revendedores h1.titulo_4 span { background-position: 0 -156px; }
#simples h3.titulo_5 span, #revendedores h3.titulo_5 span, #simples h1.titulo_5 span, #revendedores h1.titulo_5 span { background-position: 0 -208px; }

/* ---- estilo de listas de colores --- */
#content .planes ul { overflow: hidden; height: 100%; padding: 0; margin: 0; }
#content .planes li { position: relative; float: none; width: 168px; margin: 0 18px; padding: 2px 0 2px 10px; line-height: normal; }
#content #simples li { background: url(../images/vinieta_flecha_roja.gif) no-repeat 0 50%; }
#content #revendedores li { background: url(../images/vinieta_flecha_verde.gif) no-repeat 0 50%; }

/* ---- reemplazo precios --- */
#content .planes li.precio { position: relative; float: left; width: 91px; height: 50px; margin: 13px 0 5px 0; padding: 0; border: 0; }
#simples li.precio span { position: absolute; width: 100%; height: 100%; background: url(../images/home/planes/precios_simples.gif) no-repeat 0 0; }
#revendedores li.precio span { position: absolute; width: 100%; height: 100%; background: url(../images/home/planes/precios_revendedores.gif) no-repeat 0 0; }
#simples li span.precio1a, #revendedores li span.precio1a { background-position: 0 0; }
#simples li span.precio1b, #revendedores li span.precio1b { background-position: 0 -50px; }
#simples li span.precio2a, #revendedores li span.precio2a { background-position: -91px 0; }
#simples li span.precio2b, #revendedores li span.precio2b { background-position: -91px -50px; }
#simples li span.precio3a, #revendedores li span.precio3a { background-position: -182px 0; }
#simples li span.precio3b, #revendedores li span.precio3b { background-position: -182px -50px; }
#simples li span.precio4a, #revendedores li span.precio4a { background-position: -273px 0; }
#simples li span.precio4b, #revendedores li span.precio4b { background-position: -273px -50px; }
#simples li span.precio5a, #revendedores li span.precio5a { background-position: -364px 0; }
#simples li span.precio5b, #revendedores li span.precio5b { background-position: -364px -50px; }

/* ---- botón más información y contratar --- */
#content .planes ul li.info, #content .planes ul li.contratar {  display: inline;/*para que ff e ie tengan la misma distancia desde el bottom*/ margin: 0; padding: 0; background: none; }
.planes li.info a, .planes li.contratar a { float: left; overflow: hidden; height: 0 !important; height /**/:25px; /* for IE5/Win */  padding: 25px 0 0 0; }
li.info, .info a, li.contratar, .contratar a  { width: 183px; background: url(../images/home/planes/planes_botones_largos.gif) top left no-repeat; }
li.contratar, .contratar a  { background-position: 0 -50px;}
.planes a:active, .planes a.selected { background-position: 0 0; }
.planes li.info a:hover { background-position: 0 -25px;	}
.planes li.contratar a:hover { background-position: 0 -76px;	}

/* ---- promoción --- */
#content #promocion h2 { display: none; }
#content #promocion { overflow: hidden; height: 100%; padding: 0 0 1px 0; background: #EBEDEE url(../images/home/planes/planes_fondo.gif) repeat-x 100% 100%; border-top: 6px solid #DB6201; border-bottom: 6px solid #DB6201; }
#content #promocion div.promo_col1 { border-top: 2px solid #FFF; width: 440px; float: left; }
#content #promocion div.promo_col2 { border-top: 2px solid #FFF; border-left: 2px solid #FFF; background: #EBEDEE; width: 114px; float: right; }
#content #promocion div.promo_col1 li { float: left; padding: 2px 0 2px 15px; font-weight: 700; background: url(../images/vinieta_tilde.gif) no-repeat 0 50%; }

#promocion li.info, #promocion .info a  { width: 114px; background-position: 50% 0; }
#promocion li.contratar, #promocion .contratar a  { width: 114px; background-position: 50% -50px;}
#promocion a:hover { background-position: 50% -25px;	}
#promocion li.contratar a:hover { background-position: 50% -76px;	}

#content #promocion h3 { position: relative; width: 440px; height: 46px; margin: 15px 0; color: #DB6201; background: #EBEDEE; }
#promocion h3 span { position: absolute; width: 100%; height: 100%; background: url(../images/home/planes/planes_promo_title.gif) no-repeat 0 0; }
#content #promocion li.precio { position: relative; width: 103px; height: 63px;  margin: 7px 0; padding: 0; background: none; border: 0; }
#content.inside #promocion li.precio { margin: 15px 0 }
#promocion li.precio span { position: absolute; width: 100%; height: 100%; background: url(../images/home/planes/planes_promo_precio.gif) no-repeat 0 0; }


/* *** PLANES - HOSTING SIMPLE, REVENDEDOR, etc. ***************************************************************** */

/* ---- COMÚN - columnas --- */
#content .planes .hosting_tipo_1, #content .planes .hosting_tipo_2, #content .planes .hosting_tipo_3, #content .planes .hosting_tipo_4, #content .planes .hosting_tipo_5 { clear: right; float: left; width: 136px /* para 5 columnas 109px*//*91px*/; margin: 0 2px 0 0; padding: 0 0 2px 0; background: #EBEDEE url(../images/home/planes/planes_fondo.gif) repeat-x 100% 100%;}

/* ---- ESPECIAL - SIMPLES - ancho lista, titulos y precios --- */
#content h1.simples { border-left:7px solid #DF0000; }
#content .hosting_tipos .planes#simples ul, #content .hosting_tipos .planes#simples h3, .hosting_tipos .planes#simples ul li.info, .hosting_tipos .planes#simples ul .info a, .hosting_tipos .planes#simples ul li.contratar, .hosting_tipos .planes#simples ul .contratar a  { width: 136px /* para 5 columnas 109px*/ }
#content .planes#simples .hosting_tipo_1 { margin-left: 3px; }
#content .planes#simples .hosting_tipo_5 { margin: 0; }
#content .hosting_tipos #simples li.precio { margin: 10px 0 0px 25px; /*para 5 columnas margin: 10px 0 0px 7px;*/ }

/* ---- ESPECIAL - REVENDEDORES - ancho columnas, lista, titulos y precios --- */
#content h1.revendedores { border-left:7px solid #829A25; }
#content .planes#revendedores .hosting_tipo_1, #content .planes#revendedores .hosting_tipo_2, #content .planes#revendedores .hosting_tipo_3, #content .planes#revendedores .hosting_tipo_4, #content .hosting_tipos .planes#revendedores ul, #content .hosting_tipos .planes#revendedores h3, .hosting_tipos .planes#revendedores ul li.info, .hosting_tipos .planes#revendedores ul .info a, .hosting_tipos .planes#revendedores ul li.contratar, .hosting_tipos .planes#revendedores ul .contratar a  { width: 137px }
#content .hosting_tipos #revendedores li.precio { margin: 10px 0 0px 25px; }

/* ---- COMÚN -- definición de características --- */
#content .hosting_tipos dl { margin: 0 }
#content .hosting_tipos dt { padding: 1px 0 0 12px; line-height: normal; color: #7B8286; }
#content .hosting_tipos dd { padding: 0 0 1px 12px; border-bottom: 1px dotted #B7BCC2; }
#content .hosting_tipos dd.pagos { text-transform: uppercase; }
#content .hosting_tipos .pagos { background: #F7F7F7 }

/* ---- COMÚN -- más información y contratar --- */
.hosting_tipos ul li.info, .hosting_tipos ul .info a  { margin-top: 10px; background-position: 50% -101px; }
.hosting_tipos ul li.contratar, .hosting_tipos ul .contratar a  { background-position: 50% -50px;}
.hosting_tipos li.info a:hover { background-position: 50% -126px;	}
.hosting_tipos li.contratar a:hover { background-position: 50% -76px;	}

/* *** PLANES - HOSTING PRO150, PLUS10, etc. ***************************************************************** */

/* ---- informacion principal --- */
#content #detail #simples { padding: 0 0 2px 0; background: #EBEDEE url(../images/home/planes/planes_fondo.gif) repeat-x 100% 100%; border-bottom: 6px solid #DF0000; }
#content #detail #revendedores { padding: 0 0 2px 0; background: #EBEDEE url(../images/home/planes/planes_fondo.gif) repeat-x 100% 100%; border-bottom: 6px solid #829A25; }

#content #detail .planes .uno { width: 367px; padding: 10px 0; border: none; background: none; }
#content #detail .planes .dos { width: 185px; margin: 0; padding: 10px 0 0 0; border-left: 2px solid #FFF; border-bottom: 0; background: none; }

#content #detail .planes#simples h1 { position: relative; width: 556px; height: 52px; margin: 0; padding: 0; font: 700 11px "Tahoma", Geneva, Arial, Helvetica, sans-serif; color: #FFF; background: #DF0000 url(../images/home/planes/planes_title_fondo.gif) repeat-x 0 0; border: 0; }
#content #detail .planes#simples h1 span { position: absolute; width: 100%; height: 100%; background-image: url(../images/home/planes/planes_title_simples.gif); background-repeat: no-repeat; }

#content #detail .planes#revendedores h1 { position: relative; width: 556px; height: 52px; margin: 0; padding: 0; font: 700 11px "Tahoma", Geneva, Arial, Helvetica, sans-serif; color: #FFF; background: #829A25 url(../images/home/planes/planes_title_fondo.gif) repeat-x 0 -52px; border: 0; }
#content #detail .planes#revendedores h1 span { position: absolute; width: 100%; height: 100%; background-image: url(../images/home/planes/planes_title_revendedores.gif); background-repeat: no-repeat; }

#content #detail ul.detail_list { float: left; width: 190px; }
#content #detail ul.pago { margin-top: 0px; }
#content #detail .dos ul { display:inline; }

#content #detail .planes li.precio { margin: 5px 0 15px 0; }
#content #detail .planes#revendedores li.precio { margin: 17px 0 20px 0; }
#content #detail li.contratar, #content #detail .contratar a  { background-position: 0 -49px;}
#content #detail li.contratar a:hover { background-position: 0 -75px;	}

/* ---- otros servicios disponibles --- */
#content #detail #detalles { overflow: hidden; height: 100%; padding: 5px 0 0 0; }
#content .plan_detail_simple #detalles { border-bottom: 6px solid #DF0000; }
#content .plan_detail_revendedor #detalles { border-bottom: 6px solid #829A25; }

.detalles_col1 { width: 277px; float: left; }
.detalles_col2 { width: 278px; float: right; }

#content #detalles h2 { padding: 0 0 4px 0; font-size: 13px; color: #DF0000; background: none; }
#content .plan_detail_simple #detalles h2 { color: #DF0000; border-bottom: 4px solid #B7BCC2; }
#content .plan_detail_revendedor #detalles h2 { color: #829A25; border-bottom: 4px solid #B7BCC2; }
#content #detalles h3 { margin: 0 0 5px 5px; padding: 0; color: #000; font-size: 11px; }

#content #detalles ul { margin: 2px 0 15px 0; padding: 0; }
#content #detalles li { position: relative; margin: 0 18px; padding: 3px 0 3px 10px; line-height: normal; }
#content .plan_detail_simple #detalles li { background: url(../images/vinieta_flecha_roja.gif) no-repeat 0 50%; }
#content .plan_detail_revendedor #detalles li { background: url(../images/vinieta_flecha_verde.gif) no-repeat 0 50%; }

#content #detalles ul li a:link,
#content #detalles ul li a:visited,
#content #detalles ul li a:active,
#content #detail .uno ul li a:link,
#content #detail .uno ul li a:visited,
#content #detail .uno ul li a:active { text-decoration: none; color: #484B4D; background: transparent; border-bottom: 1px dotted #B7BCC2; cursor: help; }
#content #detalles ul li a:hover, #content #detail .uno ul li a:hover { text-decoration: none; color: #000; background: transparent; border-bottom: 1px dotted #7B8286; cursor: help; }