/* CSS Document */
body {
	text-align:center;  /* rodo el contenido estará alienado en el centro*/
	background-color:#000000; /* el fondo sera negro*/
}
a{
	text-decoration:none;
	color:#333;
	}
a:hover{
	color:#ff6600;
	}

/*----------------------------------------------------------------------------CONTENEDOR PRINCIPAL----------------------------------------------------------------*/

#principal{
	border:1px solid #000; /* borde orientativo*/
	width:800px; /* ancho del diseño de la pàgina */

	margin:10px auto 10px auto; /* con esto alieneamos a 10 px por ariba y abajo y automatico a ambos lados */
	}

/*-----------------------------------------------------------------------------INTRO------------------------------------------------------------------------------*/

#logointro{
	width: 400px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:-200px;
    margin-left: -200px; 
	}

	
/*-------------------------------------------------------------------------------LOGO--------------------------------------------------------------------------------*/	
#logo{
	float:left; /* el logo a la izda*/
	margin:20px 0 0 10px; /*separamos el logo de la parte alta por ajuste de de diseño*/
	}
#logo a{
	border:0;
	}
	
#logo img{
	/*border:1px solid #fff; /* borde blanco orientativo*/
	}	
	
#cabecera{
	float:right; /* pegamos la cabecera a la parte dcha por ajustes de de diseño */
	

	}
	
/*---------------------------------------------------------------------BANNER FLASH------------------------------------------------------------------------------*/


/*-----------------------------------------------BARRA DE NAVEGACION--------------------------------------------------------------------------------------------*/
	
#nav{
	width:800px;/*ancho de la barra de navegacion*/
	/*border:1px solid #00c;/* borde blanco orientativo*/
	margin:100px 0 0 0;/* doy un margen superior de 100px para separar la barra de navegación del logo y de la cabecera. Entre medias me sobran 6px creo :P.*/
	}
	
#nav ul{
	list-style-type:none; /* quito las viñetas de la lista */
	margin:0; /*le quitamos el margen a la lista*/ 
	padding:0; /*y el relleno. Con estas dos medidas haremos que la lista se */
	}

#nav ul li {
		float:left; /*coloco todo alineado a la izda*/
		
	}
	
#nav ul li a {
 	background: url("../img/boton.gif") 0 0 no-repeat;
	display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/ 
	color:#FFFFFF;/* Indico el color de las letras del vinculo */
	width:160px;/* Ancho del area rectangular del vinculo*/
	height:28px; /*defino el alto del rectangulo del vinculo*/
	text-decoration:none;/*elimino el subrayado del vínculo*/
	text-align:center;/*centro el texto de los vinculos*/
	font-family:Verdana, Arial, Helvetica, sans-serif;/*formateo la fuente*/
	font-size:16px;;/*mas formateo*/
	padding:10px 0 0 0;/* separación de los links de la parte de arriba de los li*/

	}
	
#nav ul li a:hover{
	 background-position: -160px 0;/*imagen de susutitución al pasar el botón por encima*/
	}
	
#nav ul li a:active{
	     background-position: -320px 0;/*imagen de sustitución al pulsar el botón*/
	}
	

	

/*----------------------------------------------------------------------------COLUMNAS DE CONTENIDO-----------------------------------------------------------------*/

#contenedor{
	height:100%;
	margin-top:10px;/*separo de la barra de navegación la columna por ajustes del diseño*/
	
	}	
	

.portafolio{
	width:35px;
	height:180px;
	float:left;
	margin-left:60px;
	margin-top:10px;
	}

.portafolio ul{
 	list-style-type:none;
	}
	
.portafolio a{
	
	display:block;
	background-image:url(../img/portafolio.jpg);
	background-repeat:no-repeat;
	}
	
.portafolio a:hover{
background-image:url(../img/portafolio_on.jpg);
}
	
	

	

	

	
#centercolumn{
	float:left;/*ajusto la columna a la izda de la columna*/
	background-color:#555;/*coloreo de blanco el fondo*/
	margin-top:10px;/*separo de la barra de navegación la columna por ajustes del diseño*/
	width:796px;
	}
	
#lista{
	text-align:left;
	width:350px;
	position:relative;
	margin-left:-20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;

	}
#lista ul{
	list-style-type:square;
	}

#imagen{
	margin-left:370px;
	}

#linkrabolog{
	width:165px; /* ancho*/
	float:right; /* la floto a laderecha*/
	margin-top:35px; /* separo el margen*/
	padding-left:15px; /* separo el contenido del borde izdo. */
	}
/*-----------------------------------------------------------------------------TEXTOS---------------------------------------------------------------------------------*/

h1{
	margin-top:-30px;/* cambio el margen para acercarlo arriba*/
	font-family: Arial, Verdana;/* fuentes*/     
	color:#FF6600;
	font-size:20px; 
	}

#textos{
	background-color:#FFFFFF;
	margin-left:156px;
	border-left:3px solid #000;
	padding:10px;
	text-align:left;
	height:100%;
}

#textosinicio{
	border-right:2px solid #666;
	margin-top:10px;
	width:400px;
	text-align:left;
	color:#FFF;
	float:left;
	
}	
 
#textos p{
	text-align:justify;
	font-family: Tahoma;
	font-size: 12px;
	font-style:normal;
	line-height:normal;
	font-weight: normal;
	font-variant:normal;
	font-weight:400;
	color:#CCCCCC;
	text-decoration: none;


	}
	
#textos2{
	width:200px;
	height:180px;
	margin-top:20px;
	margin-left:10px;
	text-align:left;
	float:left;
	color:#ffffff;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:16px;
	border-right:2px solid #666;
	}
	
blockquote {
width:160px;
text-align:left;
font:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-style:italic;
font-size:14px;
background: url(/img/comillas1.gif) no-repeat 0 3px;
float:left;
padding-left:20px;
border:1px solid #666;
}

#direccion{
	margin-left:10px;
	text-align:left;
	
	}
	
#direccion p a{
	font-size:12px;
	color:#FF6600;
	}
		
#direccion p a:hover{
	color:#FF0000;
	}
/*------------------------------------------------------------------------PORTAFOLIO------------------------------------------------------------------------------*/

#listaclientes{
	width:150px;
	float:left;

	}
#fotodetalle{

	width:350px;
	margin-left:200px;
	}
	

.numeros{
	color:#0000FF;
	}
#pasaimagenes{
	color:#0000FF;
	}
	
#textoclientes{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:15px;
	width:320px;
	text-align:justify;
	color:#000;
	margin-left:217px;
	height:100%;
	}
#textoclientes a{
	color:#06f;
	}
/*------------------------------------------------------------------------FORMULARIO---------------------------------------------------------------------------------*/

#contactoarriba{
height:320px;
}
#formulario {
	text-align:left;
	width:320px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	float:left;
	}

.texto  {
  	background-color: #FFF;
  	border: 1px solid #CCC;
  	width: 250px;
  	font-size:9px;
}
.textarea{
	background-color: #FFF;
	border: 1px solid #CCC;
	width: 250px;
	font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
  }

.boton {
  color: #666;
  background-color: #FFF;
  border: 1px solid #CCC;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  padding: 3px;
}

form p {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}

form p label {
  float: left;
  width:20%;
  font: 11px Arial, Helvetica, sans-serif;
  color:#990000;
}

fieldset {
  border: 1px dotted #999;
  margin-top: 16px;
  padding: 10px;
}

fieldset p{
	
	}


legend {
  font: 0.8em Arial, Helvetica, sans-serif;
  color: #339933;
  background-color: #FFFFFF;
}

/*------------------------------------------------------------------------PIE DE PAGINA------------------------------------------------------------------------------*/
	
#footer{
	float:left; /* ajustamos la columna a la izda del contenedor #principal*/
	width:inherit;
	}
	
#footer ul{
	list-style-type:none; /* quito las viñetas de la lista */
	margin:0; /*le quitamos el margen a la lista*/ 
	padding:10px; /*y el relleno. Con estas dos medidas haremos que la lista se */
	}
	
#footer ul li {
		float:left;/* lo ajusto a la izda y logro que se pongan en linea los links*/ 
		padding:0 0 0 10px;/*doy un espacio entro los links*/
		color:#CCCCCC;/* coloreo los separadores*/
	}
	
#footer ul li a{
	text-decoration:none;/* le quito las viñetas a la lista*/
	color:#666666;/* color de texto*/
	font:12px  Arial, Helvetica, sans-serif;/* formateo la fuente*/
	}
 
#footer ul li a:hover{
	color:#FFF;
	}

	
/*---------------------------------------------------------------------VARIOS------------------------------------------------------------------------------------------*/


.naranja{
 color:#FF6600;
 }
 
 .active{
 	color:#FFF;
	font:12px  Arial, Helvetica, sans-serif;
	margin-top:3px;
	}
	

	
#w3{
	float:left;
}

#map{
	border:1px solid #FF0000;
	width:600px;
	height:600px;
	margin-top:70px;
	margin-left:10px;
	}