/*========================================================
  Global Styles
===========================================================*/
* {
  padding:0;
  margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }

.hide, .access{ display:none; }
.clear{ clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden; }
a:focus{ outline:none; }
a img{ border:none; }

/*===========================================================
  Basic Layout
===========================================================*/

body{
  background:url(../images/body_back.jpg) 0 0 repeat-x #424242;
  font-family:Verdana, Arial, sans-serif;
  font-size:12px;
  color:#b5c3ca;
}

#wrap{
  position:relative;
  margin:0 auto;
  width:902px;
  background:url(../images/wrap_back.jpg) 0 0 repeat-y;
  z-index:3;
  line-height:1px;
}
#wrap p{
  line-height:1.6;
}
table, dl{
  line-height:1.6;
}
#wrap #content ul, #wrap #content ol{
  line-height:1.6;
}

img{
  vertical-align:baseline;
}

/*===========================================================
  Header
===========================================================*/

#header,#header-main{
  position:relative;
  margin-left:-20px;
  width:902px;
  padding:22px 20px 1px 20px;
  
}

#header
{
background:url(../images/header_back2.jpg) 0 0 no-repeat;
height:335px;
}

html body*#header-main,#header
{
  padding-top:18px;;
 }
#header-main
{
background:url(../images/header_back.jpg) 0 0 no-repeat;
height:435px;
}
h2#hp-logo{
  margin:0 0 0 429px;
  width:46px;
  height:13px;
  clear:both;
  
}


/* Safari */
html>body*#wrap #header .login button{
  top:0;
}

ul#gnav{
  display:inline;
  float:right;
  margin:20px 6px 0 0;
  width:274px;
}
ul#gnav li{
  margin:0;
  padding:0;
  background-image:none;
  display:inline;
}
ul#gnav li a{
  float:left;
  height:22px;
  text-indent:-9999px;
  text-decoration:none;
}
#nav_bot
{
position:relative;
top:10px;
width:250px;
height:10px;
}
#nav 
{
position:relative;
top:55px;
*top:59px; /* IE */
  _top:59px; /* IE6 */
  .top:59px; /* IE7 */

}
div#nav_bot 
{

   background:url(../images/bot_menu.gif) 0 0 no-repeat;
}
ul#nav{
  display:inline;
  clear:right;
  float:right;
  margin-right:-250px;
  
  width:614px;
}
ul#nav li{
  list-style-type:none;
  display:inline;
  margin:0;
  padding:100;
  background-image:none;
}
ul#nav li a{
  display:inline;
  float:left;
  margin:0;
  height:34px;
  text-indent:-9999px;
  text-decoration:none;
  background:url(../images/menu_x.gif) 0 0 no-repeat;
}



ul#nav li.inicio a{
  width:49px;
  background-position:-250px 0;
}
ul#nav li.inicio a:hover{
  background-position:-250px -68px;
}

ul#nav li.servicios a{
  width:100px;
  background-position:-300px 0;
}
ul#nav li.servicios a:hover{
  background-position:-300px -68px;
}

ul#nav li.serv_visit a{
  width:100px;
  background-position:-300px -68px;
}

ul#nav li.portfolio a{
  width:100px;
  background-position:-400px 0;
}
ul#nav li.portfolio a:hover{
  background-position:-400px -68px;
}

ul#nav li.contacto a{
  width:100px;
  background-position:-500px 0;
}
ul#nav li.contacto a:hover{
  background-position:-500px -68px;
}

ul#nav li.cont_visit a{
  width:100px;
  background-position:-500px -68px;
}

/*===========================================================
  Content Area
===========================================================*/

#content{
  position:relative;
  margin-top:-210px;
  padding:25px 25px 10px 25px;
  width:852px;
  min-height:615px;
  background:url(../images/wrap_bottom.jpg) 0 100% no-repeat;
}
body.short #content{
  min-height:335px;
  padding-bottom:40px;
}

.columns:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html .columns {height: 1%;}
.columns {display: inline-block;}

.columns .col{
  float:left;
}
.col2 .first{
  width:225px;
  padding-bottom:25px;
}
.col2 .last{
  float:right;
  width:570px;
}

.col2b, .col2{
  width:852px;
}
.col2b .first{
  width:550px;
}
.col2b .last{
  float:right;
  width:260px;
}

.onecol{
  width:550px;
  margin:0 auto;
}

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

h1{
  margin:15px 0 7px 0;
  font-size:22px;
  line-height:22px;
  font-weight:normal;
  color:#fff;
}

h2{
  margin:25px 0 -10px 0;
  font-size:16px;
  line-height:16px;
  font-weight:normal;
  color:#fff;
}
.col2 .first h2{
  margin-top:16px;
  font-size:14px;
  line-height:14px;
}
h2.tight{
  margin-top:24px;
}

h3{
  margin:32px 0 -5px 0;
  font-size:14px;
  line-height:1.2;
  font-weight:bold;
  color:#fff;
}

h4{
  margin:24px 0 0 0;
  font-size:12px;
  font-weight:bold;
  color:#fff;
}

p.note{
  font-size:11px;
}

p.items{
  margin:0 0 30px 0;
  padding:6px 0 0 0;
  height:12px;
  font-size:9px;
  color:#ced4d6;
}
p.items a, p.items span{
  float:left;
}
p.items {
  color:#ceb76e;
  
}
p.items span.selected{
  color:#ffdb7d;
  text-decoration:none;
}
p.items span.sep{
  margin:0 7px;
  width:3px;
  text-indent:-9999px;
  background:url(../images/items_separator.gif) 0 5px no-repeat;
}

p.viewmore{
  margin:0 0 30px 0;
  padding:6px 0 0 0;
  height:12px;
  font-size:9px;
  color:#ced4d6;
}
p.viewmore a, p.viewmore span{
  float:left;
}
p.viewmore a{
  color:#ceb76e;
}
p.viewmore a:hover{
  color:#ffdb7d;
}
p.viewmore span.sep{
  margin:0 7px 0 2px;
  width:3px;
  text-indent:-9999px;
  background:url(../images/items_separator.gif) 0 5px no-repeat;
}

ul.afterh2, ol.afterh2{
  margin-top:25px;
}

.rule{
  margin:15px 0;
  
  height:2px;
  overflow:hidden;
  background:url(../images/rule.png) 0 0 repeat-x;
}
.spacy{
  margin:30px 0;
}
.items-rule{
  margin:0px 0 0 0;
}
.vrule{
  display:inline;
  padding:0 2px;
  font-size:50px;
  background:url(../images/vrule.png) 0 0 no-repeat;
}

.figure{
  margin-top:20px;
  margin-bottom:10px;
}
#s-restore .figure{
  margin-top:1em;
}
.figure-right{
  float:right;
  margin-left:20px;
}
.figure-left{
  float:left;
  margin-right:20px;
}
.figure-pull{
  margin-top:-10px;
}

.figure-steps{
  border:3px solid #0f3045;
}
.step-num {
	width: 244px;
}
.step {
	width: 256px;
}
.promo{
  margin:12px 0;
}
/*===========================================================
Menu Area
===========================================================*/

#subnav{
  font-family:"Lucida Grande", Arial, Verdana,  sans-serif;
  background: url(../images/menu-bg.gif) no-repeat;  
  width:250px;
}
#subnav h3{
  margin:0;
  padding:10px 0 0 12px;
  height:22px;
  line-height:1px;
  background: url(../images/tab-heading.gif) 0 -1px no-repeat;
}
#subnav h3 span{
  display:block;
  font-size:15px;
  font-weight:bold;
  color:#ffdb7d;
}
#subnav h3 a{
  text-decoration:none;
}

#subnav ul{
  margin:0;
}

#subnav ul li.open{
  
  background-position:0 -35px;
  color:white;
}
#subnav span.selected{
  
  background:url(../images/subnav_itemback.gif) 0 0 no-repeat ;
  
  
}
#subnav ul li a{
  display:block;
  font-size:12px;
  color:#fff;
  text-decoration:none;
  height:25px;
  padding-top:10px;
 }
#subnav ul li a:hover, #subnav ul li.open a{
  color:#fff;

}
#subnav ul ul{
  margin-left:-12px;
  padding:5px 0 5px 12px;

}

#subnav ul li li.first{ background-image:none; 
}

#subnav ul li li.visited {
  background:url(../images/subnav_itemback.gif) 0 0 no-repeat ;
}
#subnav ul li.visited {
  background:url(../images/subnav_itemback.gif) 0 0 no-repeat ;
}

#subnav ul a:hover,#subnav ul li li a:hover{
  
   background:url(../images/subnav_itemback.gif) 0 0 no-repeat ;
}
#subnav ul li.open li a{
  color:#eedea8;
}
#subnav ul li.open li a:hover{
  color:#fff;
}

#subnav ul li
{
  padding-left:10px;
   list-style-type:none;
  background:url(../images/arrow_right.gif) 0 15px no-repeat;
}

/*===========================================================
  Footer Area
===========================================================*/

#footer{
  position:absolute;
  margin-top:-220px;
  height:203px;
  width:100%;
  padding-top:110px;  
  overflow:hidden;
background:url(../images/body_bottom2.jpg) 0 0 repeat-x;
  z-index:2;
}
#footer .inner{
  margin:0 auto 5px auto;
  padding:118px 0 1px 0;
  width:902px;
  height:175px;
  background:url(../images/footer_back.jpg) 0 0 no-repeat;
}


ul#fnav{
  width:450px;
  margin:0 auto;
}
ul#fnav li{
  list-style-type:none;
  display:inline;
  padding:0;
  background-image:none;
}





/*===========================================================
  Home Page Styles
===========================================================*/

/*===========================================================
	Common Styles
===========================================================*/

#home #content{
  position:relative;
  height:433px;
  min-height:0;
  padding-top:1px;
  padding-bottom:0;
  color:#fff;
  background:url(../images/herso.jpg);
}

#contacto .contact_form p,#home .promos p{
  margin:0;
}
#contacto #content .contact_form ul,#home #content .promos ul{
  margin-top:3px;
  line-height:1.5;
  color:#7AC968;
}
#contacto .contact_form ul li,#home .promos ul li{
  list-style-type:none;
  margin-left:0;
  padding-left:12px;
  background:url(../images/bullet.gif) 0 4px no-repeat;
}
#contacto .contact_form ul li.more,#home .promos ul li.more{
  background-image:url(../images/bullet-highlight.gif);
}
#contacto .col3 .col,#home .col3 .col{
  display:inline;
  margin-left:25px;
  width:255px;
}


#contacto .contact_form  .title img,#home .promos .title img{
  float:left;
  margin-right:10px;
}
#contacto .contact_form .title h3,#home .promos .title h3{
  margin:7px 0;
  line-height:1px;
  font-weight:normal;
}
#contacto .contact_form .title p,#home .promos .title p{
  font-size:10px;
  color:#63BB37;
}

#contacto a.compareplans:hover,#home a.compareplans:hover{
  background-position:0 -41px;
}

#contacto a.contacthp,#home a.contacthp{
  display:block;
  margin:0 0 0 90px;
  width:182px;
  height:41px;
  text-indent:-9999px;
  background:url(../images/rollbtn_needhelp.gif) 0 0 no-repeat;
}

#contacto #footer,#home #footer {
  margin-top:-120px;
}
#contacto #footer{
margin-top:-50px;
}


#contacto #footer .inner,#home #footer .inner{
  background-image:none;
  padding-top:140px;
  height:53px;
  
}
#mantenimiento .title,#rediseno .title,#diseno-web .title,#diseno-a-medida .title, #soporte .title,#diseno-grafico .title,#clases-de-pc .title	{
  position:relative;
  font-weight:bold;
  
  padding-top:25px;
  color:#fff;
  font-size:16px;
}

/*===========================================================
	Home Style
===========================================================*/

#home #content{
margin-top:-180px;
}
/*
#home #startcontent{
text-align:justify;
  margin:0px 100px 0 368px;
  padding:-50px 280 100 0 ;
  height:195px;  
}
*/
#home #startcontent{
position:relative;
  margin-top:-120px;
  margin-left:-20px;
  height:323px;  
}

#home .subpromos .rule{
  position:relative;
  width:902px;
  top:30px;
  left:-50px;
}

#home a.compareplans{
  display:block;
  margin:0 0 0 48px;
  width:304px;
  height:41px;
  text-indent:-9999px;
  background:url(../images/rollbtn_whichplan.gif) 0 0 no-repeat;
}

#home .promos{
  position:absolute;
  top:211px;
  left:0;
  width:879px;
  height:390px;
  padding-left:23px;
  font-size:11px;
  background:url(../images/callouts.jpg) 0 0 no-repeat;
}

#home .promos .title{
  position:relative;
  margin-bottom:20px;
  height:36px;
  padding-top:25px;
}

#home a.contacthp:hover{
  background-position:0 -41px;
}

/*===========================================================
	Contacto Style
===========================================================*/

#contacto #startcontent{
position:relative;
  margin-top:-40px;
  margin-left:-19px;
  height:323px;  
}

#contacto #content
{

 position:relative;
  height:433px;
  min-height:0;
  padding-top:1px;
  padding-bottom:0;
  color:#fff;
  background:url(../images/herso.jpg);
}
#contacto   .rule{
margin:15px 0;
  height:2px;
  width:800px;
  overflow:hidden;
  background:url(../images/rule.png) 0 0 repeat-x;
}


#contacto #content{
margin-top:-260px;
}

#contacto h1
{

}

#contacto .contact_form{
  position:absolute;
  top:281px;
  left:0;
  width:879px;
  height:391px;
  padding-left:43px;
  font-size:11px;
  background:url(../images/bg_contacto.jpg) 0 0 no-repeat;
}

/*===========================================================
	Diseno-web Style
===========================================================*/
/*			Diseno-web Standard Style				
-----------------------------------------------------------------------------------------*/

#diseno-web .col .first 
{
  background:url(../images/plan01.jpg) 0 40px no-repeat;
}
#diseno-web .col .first p,#diseno-web .col .first2 p,#diseno-web .col .last p,#diseno-web .col .last2 p
{

padding-left:10px;
width:200px;
background:url(../images/bullet.gif) 0px 6px no-repeat;

}
#diseno-web .col .last
{
  background:url(../images/plan02.jpg) 0 40px no-repeat; 
}

#diseno-web .col .first2
{
background:url(../images/plan03.jpg) 0 40px no-repeat;
}
#diseno-web .col .last2
{
background:url(../images/plan04.jpg) 0 40px no-repeat;
}

#diseno-web .col .precio1,#diseno-web .col .precio2,#diseno-web .col .precio3,#diseno-web .col .precio4
{
position:absolute;
float:left;
margin-left:180px;
margin-top:160px;
width:150px;
height:150px;
}

#diseno-web #newpromo span
{background:url(../images/ok.gif) 0 4px no-repeat;
padding-left:20px;
margin-left:40px;
}

#diseno-web #newpromo p {

font-weight:bold;
color:#FE4B7D;
font-size:18px;
}
#diseno-web #newpromo {

position:absolute;
float:left;

padding-left:150px;
padding-top:20px;
margin-left:300px;
margin-top:-280px;
width:550px;
height:150px;
background:url(../images/new_offer.gif) 0 0 no-repeat;
}
#diseno-web .col .precio1
{
background:url(../images/shop01.gif) 0 0 no-repeat;
}
#diseno-web .col .precio2
{
background:url(../images/shop02.gif) 0 0 no-repeat;
}

#diseno-web .col .precio4
{
background:url(../images/shop04.gif) 0 0 no-repeat;
}
#diseno-web .col .precio3
{
background:url(../images/shop03.gif) 0 0 no-repeat;
}

#diseno-web .col3 .col{
  display:inline;
  margin-left:25px;
  width:255px;
}

#diseno-web .promos ul{
padding-top:200px;
}

#diseno-web .promos ul li{

   width:240px;
  list-style-type:none;
  margin-left:0;
  padding-left:20px;
  border-bottom:solid 1px #505050	;
  background:url(../images/ok.gif) 0 4px no-repeat;
}

/*			Diseno-a-medida Style			
-------------------------------------------------------------------------------------------*/

#diseno-a-medida .promos ul {
padding-top:260px;

}
#diseno-a-medida .promos ul li{
  width:440px;
  list-style-type:none;
  margin-left:0;
  padding-left:20px;
  border-bottom:solid 1px #505050	;
  background:url(../images/ok.gif) 0 4px no-repeat;
}

#diseno-a-medida .col .first p
{

padding-left:10px;
width:200px;
background:url(../images/bullet.gif) 0px 6px no-repeat;

}

#diseno-a-medida .col .first 
{
	width:500px;
	height:400px;
	background:url(../images/medida.jpg) 100px 40px no-repeat;
  
}

/*			Rediseno Style			
-------------------------------------------------------------------------------------------*/

#rediseno .promos p
{
padding-top:280px;
text-align:justify;
}

#rediseno .col .first 
{
	width:500px;
	height:400px;
	background:url(../images/rediseno.jpg) 0 40px no-repeat;
  
}
/* Mixed*/
#rediseno  .promos a,#multimedia  .promos a
{
padding-left:10px;
background:url(../images/bullet.gif) 0px 4px no-repeat;
}

/*			Mantenimiento Style					
-------------------------------------------------------------------------------------------*/
#mantenimiento .col .first p,#mantenimiento .col .first p
{
text-align:justify;
width:400px;
padding-top:20px;
padding-left:150px;
}
#mantenimiento  .col .logo_mant
{
position:absolute;
float:left;
margin-left:0px;
margin-top:50px;
width:150px;
height:150px;

}
#mantenimiento .col .logo_mant
{
background:url(../images/mantenimiento.gif) 0 0 no-repeat;
}
/*===========================================================
	Diseno-grafico Style
===========================================================*/

#diseno-grafico .promos a
{

list-style-type:none;
padding-left:10px;
float:right;
background:url(../images/bullet.gif) 0px 7px no-repeat;
}
#diseno-grafico .col .first 
{
	width:500px;
	height:400px;
	background:url(../images/dg_bg.gif) 100px 40px no-repeat;
  
}
#diseno-grafico ul li
{
list-style:none;
}
#tpromo
{
position:relative;
float:left;
height:130px;
width:100px;
background:url(../images/tarjeta_promo.gif) 0 10px no-repeat;
}
/*===========================================================
	Multimedia Style
===========================================================*/

#multimedia .col .first p,#servidores .col .first p
{
text-align:justify;
width:400px;
padding-top:20px;
padding-left:150px;
}
#multimedia  .col .logo_win
{
position:absolute;
float:left;
margin-left:0px;
margin-top:50px;
width:150px;
height:150px;

}
/* Mixed*/
#multimedia .title,#servidores .title
{
 position:relative;
  font-weight:bold;
  width:250px;
  line-height:20px;
  padding-top:15px;
  color:#fff;
  font-size:16px;
}

#multimedia .col .logo_win
{
background:url(../images/pm01.gif) 0 0 no-repeat;
}

/*===========================================================
	Servidores Style
===========================================================*/

#servidores  .col .logo_server
{
position:absolute;
float:left;
margin-left:0px;
margin-top:50px;
width:150px;
height:150px;

}
#servidores .col .logo_server
{
background:url(../images/server.gif) 0 0 no-repeat;
}
#servidores .promos a,#mantenimiento .promos a
{
padding-left:10px;
background:url(../images/bullet.gif) 0px 4px no-repeat;
}
/*===========================================================
	Soporte Style
===========================================================*/

#soporte .col .logo_hard,#soporte .col .logo_win,#soporte .col .logo_lin
{
position:absolute;
float:left;
margin-left:0px;
margin-top:50px;
width:150px;
height:150px;


}
#soporte .col .logo_hard{
background:url(../images/soporte_hard.gif) 0 0 no-repeat;
}
#soporte .col .logo_win
{
background:url(../images/soporte_win.gif) 0 0 no-repeat;
}
#soporte .col .logo_lin
{
background:url(../images/soporte_lin.gif) 0 0 no-repeat;

}

#soporte .promos ul {
margin-top:20px;
padding-top:0px;
padding-left:140px;
}

#soporte .promos ul li{
  height:22px;
  
  width:400px;
  list-style-type:none;
  margin-left:0;
  padding-left:20px;
  border-bottom:solid 1px #505050	;
  background:url(../images/ok.gif) 0 4px no-repeat;
  
}



#soporte .col .first ul li{
width:420px;
}

#soporte .col .first p,#soporte .col .last p,#soporte .col .first2 p
{
margin-left:140px;
padding-left:10px;
width:200px;
background:url(../images/bullet.gif) 0px 6px no-repeat;
}

#soporte .col .first a:hover
{
text-decoration:underline;
}  


.detalles span
{
  background-image:url(../images/bullet-highlight.gif);	
}

//*====================================================
clases style
=======================================================*//
 #clases-de-pc .title
{
 position:relative;
  font-weight:bold;
  width:300px;
  height:20px;
  padding-top:15px;
  color:#fff;
  font-size:16px;
}
#clases-de-pc .col .logo_clases
{
position:absolute;
float:left;
margin-left:0px;
margin-top:50px;
width:150px;
height:150px;


}
#clases-de-pc .col .logo_clases{
background:url(../images/clases.gif) 0 0 no-repeat;
}

#clases-de-pc .promos ul {
margin-top:20px;
padding-top:0px;
padding-left:140px;
}

#clases-de-pc .promos ul li{
  height:22px;
  
  width:400px;
  list-style-type:none;
  margin-left:0;
  padding-left:20px;
  border-bottom:solid 1px #505050	;
  background:url(../images/ok.gif) 0 4px no-repeat;
  
}



#clases-de-pc .col .first ul li{
width:420px;
}

#clases-de-pc .col .first p,#clases-de-pc .col .last p,#clases-de-pc .col .first2 p
{
margin-left:140px;
padding-left:10px;
width:200px;
background:url(../images/bullet.gif) 0px 6px no-repeat;
}

#clases-de-pc .col .first a:hover
{
text-decoration:underline;
}  




/*=====================================================================
contact form
======================================================================*/

#contact_form fieldset {
		border: 0px;
		
	}

	#contact_form label {
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		padding-top:3px;
		line-height:12px;
		color: white;
	}

	input.contact_form_textbox {
		margin: 0px 0px 5px 0px;
		height: 15px;
			
	}
	#contact_form input.contact_form_textbox
	{
		background-color:#000000;
		border: 0;
		background: url(../images/textroundbv8.gif) top left no-repeat;
		width: 190px;
	
	padding: 3px 5px;
		color: #399;
		}
		#contact_form input.submit
		{
		
		background-color:#FFD946;
		width: 97px;
		border: 0;
		font-weight:bold;
		position: relative;
		float:left;
		margin-left:720px;
		margin-top:-50px;
		
		}
		
	#contact_form label {
		height: 10px;
		margin: 0px 0px 2px 0px;
		
	}
	
	#contact_form label, input.contact_form_textbox {
		float: left;
		clear: both;
		width: 262px;
		
	}
	#contact_form label.mensaje{
		position:relative;
		float: left;
		
		
		margin-top:-125px;
		margin-left:300px;
	
	}
	



	#contact_form textarea {
		position: relative;
		
		float: left;
		clear:both;
		margin-top:-110px;
		margin-left:300px;
		width: 262px;
		height: 103px;
		
		
	}

	input.contact_form_textbox, #contact_form textarea {
		border: solid 1px #CCC;
		color: #333;
		font-size:12px;
		font-family: Verdana, Geneva, sans-serif;
		
		
	}


#msg {
display:none; 
position:absolute; 
z-index:200; 
background:url("../images/msg_arrow.gif") left center no-repeat; 
color:black;
height:20px;
padding-top:7px;
padding-left:7px
}