/*
VAIRESS | Master Style | Copyright 2004 |
Max Bidart | mbidart@qkstudio.com.ar
Updated: OCT 21 2004

Funciona en:
Mozilla 1.5b / Firefox 0.9.1 / Netscape 7.1 / Internet Explorer 6
*/

/* ///////////////////////////// CUERPO ///////////////////////////// */
/* Aca se declaran las cosas bsicas como la tipografa (si no se selecciona ninguna, la declarada seria el default)
   Se declara el fondo (si lleva imagen se le pone la ruta), etc  */

body {
 margin:20px;
 background-color:#E1C074;
 color: #333333;
 text-align:center;
 padding:0;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 }
	
html>body { /* be nice to Opera */
	font-size: small;
	}

/* ///////////////////////////// FORMATO QUE INCLUYE TODOS LOS DIVS (CAPAS) ///////////////////////////// */
/* Tamao del formato generalmente 760px (ya que es lo que se deja ver en 800x600, mas un chang) */
/* Tener en cuenta para el diseo de las cabeceras que en el alto de la web solo se ven alrededor de unos 400px o 450px 
   (varia segun las paletas habilitadas en el navegador) en un navegador a 800x600 */

#formato_general {
 text-align:center;
 background-image:url(Images/fondo.jpg);
 background-repeat:repeat-y;
 width:780px;
 margin:auto;
 border-width:10px 0 0 0;
 }

/* ///////////////////////////// CABECERA (o Header)///////////////////////////// */
/* Primera parte visible, generalmente no sobrepasa los 150 px de alto */

#cabecera {
 height:141px;
 background-image:url(Images/cabecera1780.jpg);
 border-width:0px 0 0 0;
 
 }

/* ///////////////////////////// CABECERA2 (o Header)///////////////////////////// */
/* Segunda parte visible, generalmente no sobrepasa los 150 px de alto */

#cabecera2 {
 background-image:url(Images/cabecera2780.jpg);
 float:left;
 height:56px;
 width:785px;
 color: #333333;
 border-width:0px 0 0 0;
 
 
 }

/* ///////////////////////////// CUERPO //////////////////////////// */
/* Esta es la parte que va a contener las dos o tres columnas planteadas mas abajo, funciona al igual que el formato general
   como un contenedor, y como pueden apreciar tiene el mismo tamao que el mencionado FG. */

#bloque_cuerpo {
 width:780px;
 border-width:0px 0 0 0;
 }

/* ///////////////////////////// COLUMNAS (divisiones) ///////////////////////////// */
/* Pueden haber varias, en este caso son dos, columna y contenido */

#columna {
 float:left;
 width:175px;
 height:480;
 height:500px;
 border-width:0px 0 0 0;
 padding-bottom:20px;
 background-image:url(Images/3ventanas.gif);
 background-repeat:no-repeat;
  }
 
 #columna3 {
 float:right;
 width:204px;
 color: #333333;
 border-width:0px 0 0 0;
 text-align:center;
  }
 
#contenido {
 float:right;
 width:370px;
 color: #333333;
 border-width:0px 0 0 0;
 padding-top: 0px;
 text-align:left;
 }
 #contenido2 {
 float:right;
 width:356px;
 height:43px;
 color: #333333;
 border-width:0px 0 0 0;
 padding-top: 0px;
 text-align:left;
 }
 #contenidob2 {
 float:right;
 width:370px;
 color: #333333;
 height:40px;
 border-width:0px 0 0 0;
 padding-top: 0px;
 text-align:left;
 }
 #contenidoa {
 float:left;
 color: #ffffff;
 width:92px;
 border-width:0px 0 0 0;

 }
 
 
 /* ///////////////////////////// ventanas de imagenes //////////////////////////// */
/* como hago para definir un ancho y alto fijos para que no se modifiquen los valores al cambiar la imagen */

#ventana1 {
	cursor:pointer;
	position:relative;
	border-width:0px 0 0 0;
	text-align:center;
	z-index:1;
	left: -21px;
	top: 25px;
	vertical-align:middle;
	width: 109px;
	height: 86px;
	 }
 #ventana2 {
	
	cursor:pointer;
	position:relative;
	border-width:0px 0 0 0;
	text-align:center;
	z-index:1;
	left: -21px;
	top: 96px;
	vertical-align:middle;
	width: 109px;
	height: 86px;
 }
 #ventana3 {
	cursor:pointer;
	position:relative;
	border-width:0px 0 0 0;
	text-align:center;
	z-index:1;
	left: -21px;
	top: 171px;
	vertical-align:middle;
	width: 109px;
	height: 86px;

 }
/* ///////////////////////////// Thumbnails //////////////////////////// */
/* */

.thumbnail
{
float: left;
width: 100px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

.clearboth { clear: both; }

#imagen {
background-image:url(Images/imagen.gif);
background-repeat:no-repeat;
padding: 10px 10px 10px 10px;
float: left;
text-align:center;
}

#sinfondo {
 background-color:transparent;
}
/* ///////////////////////////// PIE (o Footer) ///////////////////////////// */
/* Contiene generalmente los legales del sitio y las marcas de los diseadores/desarrolladores, constituye el cierre del sitio.
   habitualmente no supera los 30px, ya que no tiene mucha funcionalidad. TIP, cerrar con colores oscuros queda bien, je!*/

#piedepagina {
	height:31px;
	clear: both;
	color: #333333;
	background-image:url(Images/pie780.jpg);
	border-width:0px 0 0 0;
	margin:0;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	}
 
 /* ///////////////////////////// columnas internas ///////////////////////////// */
/* Contiene generalmente los legales del sitio y las marcas de los diseadores/desarrolladores, constituye el cierre del sitio.
   habitualmente no supera los 30px, ya que no tiene mucha funcionalidad. TIP, cerrar con colores oscuros queda bien, je!*/