/*AQU� VAMOS A DEFINIR LAS PROPIEDADES DE LA P�GINA EN GENERAL, M�S ADELANTE DEFINIREMOS LAS DE LAS CAJAS PRINCIPALES*/
/*formatos de p�rrafo, linea de separacion, encabezados 1 al 6, tablas, v�nculos (en sus 4 estados) y body respectivamente*/
/* newstyle.css elaborada por Ing. Ricardo Daniel Gutierrez Carlock*/ 
/* 	background-image: url(001.jpg); */
	.label{
		font-family:helvetica;
	    font-weight:bold;
	    font-size:9pt;
	    color:#0000A2; // 0000A2
	}
	.label_inverted{
		font:11px Verdana, Arial, Helvetica, sans-serif;
		/*font-weight:bold;*/
	    color:#FFFFFF;
	}
	.labelsmallfont{
		font-family:helvetica;
	    font-size:6pt;
	    color:#a54686;
	}
	.textbox{
		font-family:helvetica;
	    font-size:10pt;
	    color:#000000;
	    background-color:#E6E6FA;
	}
	.header2{
		font-family:helvetica;
	    font-size:14pt;
	    color:#000000;
	}
	.header3{
		font-family:helvetica;
	    font-size:10pt;
	    color:#000000;
	    text-align:center;
	}
	.SectionTitle{
		font:10px Verdana, Arial, Helvetica, sans-serif;
		font-weight:bold;
		color:#FFFFFF;
		
	    background-color:#000000;
	    text-align: left;
	    vertical-align:middle;
	    min-height: 13px; 
		height:auto; 
		padding:4px 4px 4px 5px; 
	}
	.boton{
		display: inline-block;
        background: url(btn.jpg) repeat-x;
        padding:3px 5px 3px 5px;
        font-weight:bold;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
        border:1px solid rgba(0,0,0,0.4);
        -moz-border-radius: 6px;
        -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        -webkit-border-radius: 6px;
        -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        position: relative;
	}
	.error{
		font-family:helvetica;
	    font-weight:bold;
	    font-size:12pt;
	    color:#FF0000;
	    text-align:center;
	}       
	.line{
		color:#000000;
	}
	#popup {
	  position: relative;
	  padding: 5px;
	  border: 1px solid black;
	  background: #eee;
	  left: 0px;
	  top: 0px;
	  width: 350px;
	  visibility: hidden;
	}			        






	p  {
		font:12px Verdana, Arial, Helvetica, sans-serif;
		color: #586885;
		line-height: 120%;
		padding: 3px;
	}
/*	hr	{
		display:none;
	}*/
	h1  {
		font:25px Verdana, Arial, Helvetica, sans-serif;
		text-align : left;
		color : #666666;
		margin:0px;
	}
	h2  {
		font:bold 20px Verdana, Arial, Helvetica, sans-serif;
		text-align : CENTER;
		/* color:#486895; */
		color:#FF0000;
		text-transform: capitalize;
	}
	h3  {
		font:18px Verdana, Arial, Helvetica, sans-serif;
		text-align : center;
		color : #666666;
	}
	h4  {
		font:bold 15px Verdana, Arial, Helvetica, sans-serif;
		text-align : left;
		color : #666666;
	}
	h5  {
		font: 13px Verdana, Arial, Helvetica, sans-serif;
		text-align : left;
		color : #666666;
	}
	h6  {
		font:bold  12px Verdana, Arial, Helvetica, sans-serif;
		text-align : left;
		color : #666666;
	}
	td  {
		font: 12px Verdana, Arial, Helvetica, sans-serif;
		/*color : #586885;*/
		color: #0000A2;
	}
	a	{
		font-size:12px;
		color:#325FA0;
	}
	
	
	a:link {
		text-decoration: none;
	}
	a:visited {
		text-decoration: none;
		color:#325FA0;
	}
	a:hover {
		text-decoration: none;
		color:#000066;
	}
	a:active {
		text-decoration: none;
		color:#0099CC;
	}

	#boton_solicitademo{
		display: block;
		width: 450px;
		height: 23px;
		border: none;
		/* padding-left: 40px;  /* 40 píxeles a la izquierda para que no se amontone con la flecha */
		/* background: url(images/blue11sc2.jpg) no-repeat top; /* Imagen sin repetir y en la parte superior */
		background-color: #0000FF;
		font-size: 18px; /*Aumentamos el tamaño de la fuente */
		font-weight: bold; /* Y la ponemos en negrita */
		color: #FFF;
	}
	#boton_solicitademo:hover{
		text-decoration:underline;
		background-color: #FFFFFF;
                color: #0000FF;
		/* background-position: bottom; /* Al pasar el ratón se ubica en la parte inferior */
	}

	BODY  {
		/* background-image:url('http://aguillon.com.mx/images/fondo.jpg');	*/	
		background-color: #FFFFFF;
		/*background-repeat: repeat-y;
		background-position:center;
		*/
		margin: 0px;
		
		text-align : justify;
		line-height: 10px; 

		height: 80%;
		min-height: 80%;
		
		
		
		font-family:helvetica;
        font-weight:bold;
        font-size:10pt;
        color:#010101;
        /*padding:3,2,3,2;*/     
        float:top;
        text-align:center;
	}
	/*AHORA VAMOS A PASAR A DEFINIR LOS VALORES
	PARA ORDENAR LAS CAJAS QUE HEMOS CREADO EN XHTML,
	 RECORDAD QUE SI NO EST�N BIEN ESTRUCTURADAS DENTRO
	 DEL DOCUMENTO TENDR�IS COMPLICACIONES AL QUERER SITUARLAS EN CSS*/
	 
	 /*PRIMERO HACEMOS UN CONTENEDOR PARA QUE ALBERGUE A 
	 LOS DEM�S ELEMENTOS, ADEM�S QUEREMOS QUE QUEDE CENTRADO,
	  POR LO QUE PONDREMOS ATENCI�N A LOS VALORES DE MARGIN*/
	#CONTAINER	{
		
		/*background-color:#DDE6AC;
		border-style:solid;
		border-width:0px;
		border-color:#000000;
		*/
		
		margin: 0 auto; /*con este valor quedar� centrado,
						 no hace falta repetir otra vez 0 
						 auto porque ahora mismo el 0 se refire
						 a arriba y abajo, y el auto a los lados*/
		width:1030px;
		/*height:auto;*/
	}
	
	/*en header le damos el mismo ancho que el contenedor
	(si queremos podemos darle menos),
	 la altura que queramos, colores etc...
	 Lo que m�s nos interesa es que debe estar centrado con 
	 el contenedor, por eso mirad las propiedades de margin,
	 tiene cero arriba, a la derecha tambi�n, abajo tiene 10 px,
	 y a la izquierda de nuevo cero p�xeles, por el mismo orden 
	 que los he mencionado.
	 S�lo he definido el borde de abajo porque los dem�s tocan a
	 los del contenedor y resulta feo.*/
	.header{
		/*height:auto;*/
		/*Altura a 153px pq el archivo .jpg tiene esa altura*/
		height:		95px;
		min-height: 95px;
		
		width:1030px;
		background-image: url('images/header.jpg');
		
		background-color:#FFFFFF;
		/* border-bottom-style:solid;
		border-bottom-color:#000000;
		*/
		margin:0 0 0px 0;
		horizontal-align: center;
	}
	/*En la div "izquierda" vamos a ajustar los valores para
	que tenga una anchura de 100p�xeles, una altura que 
	dependa del contenido que tenga dentro, y le vamos a dar 
	un margen de 5px a la izquierda, adem�s de hacer que se sit�e a la izquierda
	mediante "float"*/
	.izquierda{
		width:160px;
		height:auto;
		background-color:#E6E6FA;
		
		border-style:solid;
		border-width:1px;
		border-color:#000000;
		
		margin:0 0 0 0;
		float:left;
		padding:5px;
	}
	.izquierda ul	{
		font:bold 11px Verdana, Arial, Helvetica, sans-serif;
		line-height: 140%;
		text-transform:capitalize;
	}
	/*El la div "derecha" vamos a ajustar los valores para
	que tenga una anchura de 150p�xeles, una altura que tambi�n
	dependa del contenido que tenga dentro, y le vamos a dar 
	un margen de 5px, adem�s de hacer que se sit�e a la derecha*/
	 .derecha{
         width:135px;
         height:auto;
         background-image: -webkit-gradient(
             linear,
             left bottom,
             left top,
             color-stop(0.19, #aaecff),
             color-stop(1, #4097b0)
         );
         background-image: -moz-linear-gradient(
             center bottom,
             #aaecff 19%,
             #4097b0 100%
         );

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaecff', endColorstr='#4097b0'); /* for IE */

         border-radius: 6px;
         border-color:#000000;

         margin:0 0 0 0;
         float:right;
         padding:5px;
	}
	
	
	
	/*Ahora le toca a la caja que contendr� la informaci�n 
	principal de nuestra p�gina (la div "principal")
	en este caso queremos que se ajuste al espacio
	que sobra a lo ancho del contenedor, por que calculamos, 700px(anchura del mismo)-100px(anchura de la div "izquierda")-150px(anchura de la div "derecha")-20px(total de los margins)-34px(total de los paddings)-6px (total de los borders)=390px.
	Adem�s de esto, tambi�n queremos que quede situado entre las cajas que la rodean,
	por lo que calcularemos el espacio que deber�a quedar a su izquierda y despu�s poner el mismo valor en su "margin-left"
	(Hay que prestar especial atenci�n a contar TODOS los valores que se utilizar�n, incluidos, m�rgenes, padding, bordes...)*/
	
	/** OJO --- ESTE LO TOMA FIREFOX Y NO INTERNET EXPLORER
	 ---- */
	.principal{
		width:725px; /* 755 */
		background-color: #FFFFFF;    /* #990066; */
		
		text-align: center;
		margin:0 0px 0 168px;  /* 117 */
		
		/* margin:auto;*/
		
		
		/* padding:10px; */
		/* ALTURA MINIMA
			Esto es para que el footer se despliege debajo de las columnas izq y der cuando no se tenga mucho contenido en principal
			es decir... si no tenemos esta linea... y en -principal- tenemos poco contenido, el footer se empalma con las columnas izq y der
		*/
		/*min-height: 480px; */
		/* height:auto; */
		border-style:solid;
		border-width:0px;
		border-color:#000000;
	} /** FIN DE PRINCIPAL DE FIREFOX */
	
	/** OJO --- ESTE LO TOMA INTERNET EXPLORER Y NO FIREFOX ---- */
	* html .principal{
		width:696px; 
		background-color: #FFFFFF;   
		margin:auto;  
		text-align: center;
		border-style:solid;
		border-width:0px;
		border-color:#000000;
	} /** FIN DE PRINCIPAL DE INTERNET EXPLORER */
	
	
	
	
	
	
	.footer{
		text-aling: center;
		height:20px;
		width:auto;
		margin-left: 20%;
		margin-right: 20%;
		/*
		background-color:#FFF;
		border-:solid;
		border-width:0px;
		border-color:#000000;
		*/
	}
	.footer h6{
		text-align:center;
		text-transform:uppercase;
		margin:5px auto;
		color:#666666;
		font:bold 10px Verdana, Arial, Helvetica, sans-serif;
	}