/* -----------------------------------------
     ETIQUETAS GENERALES
	 ---------------------------------------- */
html,body { height:100%; }
body { margin:0;padding:0;color:black;background:url(../img/background/background.png) 0 0 #f7c126;font-family:Calibri, Arial, Helvetica, sans-serif; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
form,h1,h2,h3,h4,h5,p { margin:0;padding:0; }
label { display:block; }
ol,ul,li { margin:0;padding:0; }

/* -----------------------------------------
     ELEMENTOS ESTRUCTURALES
	 ---------------------------------------- */
/* BACKGROUNDS */
#backgroundTop { /* <div> Background superior (position:fixed) */
	background:url(../img/background/backgroundTop.png) repeat-x 0 0;
	height:165px;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
}

#backgroundBottom { /* <div> Background inferior (position:fixed) */
	background:url(../img/background/backgroundBottom.png) repeat-x 0 100%;
	height:165px;
	width:100%;
	position:fixed;
	bottom:0;
	left:0;
}
	 
   
/* HEADER */
#header { /* <div> Sostiene el encabezado */
	background:url(../img/header/background.png) repeat-x 0 0;
	height:23px;
	font:15px Calibri, Arial, Helvetica, sans-serif;
	color:white;
	padding:0 5px 0 5px;
	position:relative;
}

   #header p.right { float:right; }
   #header a { color:white; }
   #header #twitter { position:absolute; right:5px; top:28px; }
   #header a img { border:none; }
   
   
/* LOGO */
#logo { /* <div> Sostiene el logotipo */
	text-align:center;
	padding:55px 0 20px 0;
}

/* MENSAJE */
#mensaje { /* <div> Mensajes diversos para los visitantes */
   	background:#900;
	padding:8px 0 8px 0;
	text-align:center;
	margin-bottom:20px;
}

   #mensaje_inner { border-top:1px dashed #c9765e; border-bottom:1px dashed #c9765e; font:14px Calibri, Arial, Geneva, sans-serif; color:#faf0c0; padding:8px; }
   #mensaje_inner a { color:#faf0c0; font-weight:bold; text-decoration:underline; }
   #mensaje_inner strong { font-size:18px; }


/* BUQUEDA */
#busqueda { /* <div> Sostiene toda la parte de búsqueda */
	background:url(../img/buscar/background.png) repeat-x 0 0;
	height:266px;
}

   #busqueda #buscar_wrapper { /* <div> Un wrapper (limitar el ancho a 990px) */
	   width:990px;
	   margin:0 auto 0 auto;
	   position:relative;
	   height:100%;
   }

   #busqueda #slogan { /* <div> El Slogan (imagen centrada) */
	   text-align:center; 
	   padding-top:20px;
	}
   
   #busqueda form { /* <div> El formulario (margin-left) */
	  margin-left:250px; 
	  position:relative;
   }
   
   #busqueda form input.text {  /* <div> El input principal */
      background:#f3fddd;
	  border:1px solid #3b3b3b;
	  width:362px; /* <-- 372px */
	  font:26px Calibri, Arial, Helvetica, sans-serif;
	  float:left; 
	  height:37px;
	  padding:0 5px 0 5px;
	}
	
	#busqueda form input.text_loading {  /* <div> El inputo (laoding...) */
	  background:url(../img/buscar/processing.gif) no-repeat 98% 50% #f3fddd;
	  border:1px solid #3b3b3b;
	  width:362px; /* <-- 372px */
	  font:26px Calibri, Arial, Helvetica, sans-serif;
	  float:left; 
	  height:37px;
	  padding:0 5px 0 5px;
	}
   
   #busqueda form input.submit { background:none;border:none; float:left; margin-left:-1px; }
   
   #busqueda #sugerencias { /* <div> BUSCATAN SUGGEST: Ofrece las sugerencias (position:absolute) */
     width:372px; /* <-- 372px */
     position:absolute;
     display:none; /* <-- ocultamos */
     border:1px solid black;
     background:url(../img/buscar/sugerencias_background.png) repeat 0% 0%;
     font:bold 11px "Tahoma",Arial, Helvetica, sans-serif;
     z-index:1000;
     color:white;
	 left:0;
	 top:38px;
    }
	  
	  #busqueda .suggest_link {background-color:none;padding: 2px 6px 2px 6px;} /* <div> Emula un link */
      #busqueda .suggest_link_over {background-color:#036AE4;padding: 2px 6px 2px 6px;cursor:pointer;} /* <div> Emula un link */
   
   #busqueda form p { font:14px Calibri, Arial, Helvetica, sans-serif; clear:both; }
   #busqueda form p span { color:#024cd3; font-weight:bold; }
   
   #busqueda #division { /* <div> Sostiene una imagen devisora */
	   text-align:center;
	   margin:15px 0 15px 0;
   }
   
   #botones {  /* <div> Sotiene a los botones ("Explorar Directorio" y "Búsqueda Rápida") */
      margin-left:303px;
   }
   
    #botones a { width:100%; height:100%; display:block; }
	#botones #btn_explorar2 { background:url(../img/buscar/explorar-directorio_btn.png) no-repeat 0 0;width:205px; height:39px; float:left; }
	#botones #btn_busqueda2 { background:url(../img/buscar/busqueda-rapida_btn.png) no-repeat 0 0; width:179px; height:39px; float:left }
	#botones #btn_explorar2.over { background:url(../img/buscar/explorar-directorio_btnOver.png) no-repeat 0 0; }
	#botones #btn_busqueda2.over { background:url(../img/buscar/busqueda-rapida_btnOver.png) no-repeat 0 0; }
   
   #indice { /* <div> Sostiene el Indice (position absolute) */
	   clear:both;
	   position:absolute;
	   right:72px;
	   bottom:6px;
   }
   
   #indice .letra { /* <div> Cada una de las letras (float right) */
   background:url(../img/buscar/letra_btn.png) no-repeat 0 0; 
   width:42px;
   height:40px; 
   font:bold 28px Tahoma, Geneva, sans-serif;
   color:#0360df;
   text-align:center;
   float:right;
   margin-left:-10px;
   }
   
      #indice .letra a { color:#0360df;text-decoration:none; width:100%; height:100%; }
	  #indice .over { background: url(../img/buscar/letra_btnOver.png) no-repeat 0 0; }
	  #indice .over a { color:#4d5d28; }
	  
	  
/* COLUMNAS */
#columnas { /* <div> Sostiene las 3 columnas */
	width:815px;
	margin:30px auto 0 auto;
}

   /* CLIENTES */
   #clientes { /* <div> La columna "clientes" (float:left) */
	 width:264px;
	 position:relative;
	 float:left;
	}
	
	#clientes #clientes_titulo { /* <div><img /> El título "Clientes" (position:absolute) */
	position:absolute;
	left:32px;
	top:-21px;
	}
	
	  /* estructura*/
      #clientes #clientes_mainTop { background:url(../img/columnas/clientes_backgroundTop.png) no-repeat 0 0; height:18px; }
	  #clientes #clientes_main { background:url(../img/columnas/clientes_background.png) repeat-y 0 0; min-height:322px; }
	  
	  #clientes_formulario { /* <div> El formulario */
		   width:220px;
		   margin:0 auto 0 auto;
		   padding:5px 0 0 0;
	  }
	  
	  /* estructura (interior) */
	  #clientes_formulario .mainTop { background:url(../img/columnas/formulario_backgroundTop.png); height:13px;  }
	  #clientes_formulario .main { background:url(../img/columnas/formulario_background.png); }
	  #clientes_formulario .mainBottom { background:url(../img/columnas/formulario_backgroundBottom.png); height:13px; }
	  
	  #clientes_formulario form { margin-left:18px; }
	  #clientes_formulario form label { font:14px Calibri, Arial, Helvetica, sans-serif; }
	  #clientes_formulario form input.text { width:180px; background:#f3fddd; border:1px solid #6f6f6f;font:15px Calibri, Arial, Helvetica, sans-serif;margin-bottom:9px; }
	  #clientes_formulario form input.submit { border:none;background:none; margin-top:8px; margin-bottom:8px; }
	  #clientes_formulario p { font-size:14px; }
	  #clientes_formulario p a { color:#024cd3; }
	  
	  #clientes #registrate { /* <div> Sostien el botón de "Regístrate" */
		  width:222px;
		  margin:0 auto 0 auto;
	  }
	  
	     #registrate #btn_registrate { background:url(../img/columnas/registrate_btn.png) no-repeat 50% 50%; width:222px; height:83px; }
		 #registrate #btn_registrate.over { background:url(../img/columnas/registrate_btnOver.png) no-repeat 50% 50%; }
		 #registrate #btn_registrate a { width:100%; height:100%; display:block; }
		 #registrate p { color:#024cd3;font-size:12px; margin:-2px 0 0 4px }
		 
		 
   /* ANÚNCIATE */
   #anunciate { /* <div> La columna "anúnciate" (float left) */
	 width:264px;
	 position:relative;
	 float:left;
	 margin-left:10px;
	}
	
	#anunciate #anunciate_titulo { /* <div> El título "Anúnciate" (img, position absolute) */
	position:absolute;
	left:32px;
	top:-21px;
	}
	
	  /* backgrounds*/
      #anunciate #anunciate_mainTop { background:url(../img/columnas/anunciate_backgroundTop.png) no-repeat 0 0; height:18px; }
	  #anunciate #anunciate_main { background:url(../img/columnas/anunciate_background.png) repeat-y 0 0; min-height:322px;  }
	  
	  #anunciate_flash { /* <div> Sostien el flash  */
		  width:240px;
		  margin:0 auto 0 auto;
	  }
	  
	  #anunciate #quieroestar { /* <div> Sostien el botón de "Anúnciate" */
		  width:222px;
		  margin:0 auto 0 auto;
	  }
	  
	     #anunciate #btn_quiero { background:url(../img/columnas/quiero-estar-en_btn.png) no-repeat 50% 50%; width:222px; height:83px; }
		 #anunciate #btn_quiero.over { background:url(../img/columnas/quiero-estar-en_btnOver.png) no-repeat 50% 50%; }
		 #anunciate #btn_quiero a { width:100%; height:100%; display:block; }
		 #anunciate p { color:#024cd3;font-size:12px; margin:-2px 0 0 4px; }
		 
		 
   /* ASISTENCIA */
   #asistencia { /* <div> La columna "asistencia" (float left) */
	 width:264px;
	 position:relative;
	 float:left;
	 margin-left:10px;
	}
	
	#asistencia #asistencia_titulo { /* <div> El título "Anúnciate" (img, position absolute) */
	position:absolute;
	left:32px;
	top:-21px;
	}
	
	  /* backgrounds*/
      #asistencia #asistencia_mainTop { background:url(../img/columnas/asistencia_backgroundTop.png) no-repeat 0 0;height:18px; }
	  #asistencia #asistencia_main { background:url(../img/columnas/asistencia_background.png) repeat-y 0 0; min-height:322px;  }
	  
	  #asistencia p { color:#024cd3;font-size:12px; margin:-2px 0 0 4px; text-align:center; padding-top:12px; }
	  
	 #asistencia #chat_icon { /* <div> Sostiene el ícono del chat */
		 text-align:center;
		 margin:10px 0 18px 0;
	 }
	  
	  #asistencia #chatear { /* <div> Sostien el botón de "Anúnciate" */
		  width:222px;
		  margin:0 auto 0 auto;
	  }
	  
	     #asistencia .btn { margin-bottom:-5px; }
		 #asistencia #comm100_track { display:none; }
		 #asistencia #chatear p { color:#024cd3;font-size:12px; margin:-2px 0 0 4px; text-align:left; padding:0; }
		  
		  
      /* estilos */
	  #columnas .division { /* <div> División (una imagen con márgenes) */
		  text-align:center;
		  margin:14px 0 14px 0;
	  }
	  
	  #columnas .division2 { /* <div> División (una imagen con márgenes), la última */
		  text-align:center;
		  margin:14px 0 0 0;
	  }
   
   
/* LOAD */   
#load { 
   position:absolute; 
   top:0;
   left:-1000000px;
}