/* CSS Document */

body{
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
color:#333333;
}

img{
border:0px;
}

h1{
font-size:20px;
margin-top:0px;
padding-bottom:15px;
}

.h1linea{
font-size:20px;
margin-top:0px;
padding-bottom:25px;
border-bottom:1px solid #7F7F7F;
}

h2{
font-size:16px;
margin-top:0px;
}

a:link{
text-decoration:none;
}

#container {
display:table;
margin-left:auto;
margin-right:auto;
width:981px;
background-image:url(../images/back-h.jpg);
background-repeat:repeat-y;
background-position:left;
padding-top:0px;
padding-bottom:0px;
}

#top, #bottom{
width:981px;
height:31px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#header {
display:table;
margin-left:auto;
margin-right:auto;
padding:0px;
width:930px;
height:90px;
}

#logo {
float:left;
width:195px;
height:88px;
margin-left:12px;
margin-top:auto;
margin-bottom:auto;
}

#logo img{
padding-top:21px;
}

#sucursales {
float:right;
width:600px;
height:46px;
margin-top:21px; /*lo tuve que poner para que me coloque el div en la parte inferior del contenedor (header)*/
text-align:right;
}

#sucursales .sucursal {
border-left:#B5B6BA solid 1px;
height:46px;
/*font-family:Arial, Helvetica, sans-serif;*/
color:#B5B6BA;
font-size:9px;
float:right;
padding-left:10px;
padding-right:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#datos, #footer{
display:table;
width:930px;
height:25px;
margin:auto;
background-image:url(../images/back-datos.jpg);
background-repeat:repeat-x;
}

#botonera_left{
width:180px;
padding-left:20px;
}

#direccion {
float:left;
width:190px;
padding-left:20px;
}

#botonera_top {
float:left;
width:450px;
text-align:right;
padding-right:5px;
padding-left:0px; 
margin:0px
}

#direccion, #botonera_top, #footer{
/*font-family:Arial, Helvetica, sans-serif;*/
font-size:12px;
color:#FFFFFF;
height:25px;
line-height:25px;
margin-top:auto;
margin-bottom:auto;
} 

#botonera_top ul{
list-style-type:none;
float:left;
margin:0; 
padding:0;
}

#botonera_top li{
display:inline;
font-size:12px;
color:#EB529D;
float:left;
}

#botonera_top li a{
display:block;
padding-left:10px;
padding-right:10px; 
}

#botonera_top li .active{
color:#f2f2f2;
text-decoration:none;
background-color:#282121;
}

#botonera_top li a:link{
font-size:12px;
color:#f2f2f2;
text-decoration:none;
}

#botonera_top li a:visited{
color:#f2f2f2;
text-decoration:none;
}

#botonera_top li a:hover{
color:#f2f2f2;
text-decoration:none;
background-color:#282121;
}

#botonera_top li a:active{
color:#f2f2f2;
text-decoration:underline;
}

#centro{
display:table;
width:930px;
margin-left:auto;
margin-right:auto;
padding:0px;
background-color:#dddddd;
padding-top:0px;
padding-bottom:0px;
}

#botonera_left{
background-color:#333333;
float:left;
padding-left:5px;
margin-left:0px;
margin-right:0px;
font-size:12px;
color:#FFFFFF;
min-height:472px;
}

#logos_x{
padding-bottom:5px;
margin-top:auto;
margin-bottom:0px;
padding-left:20px;
height:100px;
vertical-align:bottom;
}

#entrega{
width:180px;
margin-top:20px;
margin-bottom:30px;
margin-left:15px;
font-weight:lighter;
}

#botonera_left ul{
list-style-type:none;
/*margin-top:100px;  estos dos margenes los pongo para que permita mostrar el espacio antes y despues pero el top es provisorio, ya que si agregamos algo arriba, tenemos que sacarlo. el problema que surgia al poner la direccion arriba de la lista de links como estaba en el .ai, es que si la direccion es medio larga ya no entra en una linea y puede verse mal, asi que esto lo tenemos que ver bien. */
padding-bottom:100px;
margin-left:0px;
padding-left:0px;
padding-top:0px;
}

#botonera_left li{
font-size:12px;
color:#EB529D;
line-height:20px;
}

#botonera_left li a{
display:block;
padding-left:5px;
border-left:#333333 10px solid;
}

#botonera_left li .active{
color:#f2f2f2;
text-decoration:none;
border-left:#b60000 10px solid;
}

#botonera_left li a:link{
font-size:12px;
color:#f2f2f2;
text-decoration:none;
}

#botonera_left li a:visited{
color:#f2f2f2;
text-decoration:none;
}

#botonera_left li a:hover{
color:#f2f2f2;
text-decoration:none;
border-left:#b60000 10px solid;
}

#botonera_left li a:active{
color:#f2f2f2;
text-decoration:none;
}

#content, #content_int{
margin-left:auto;
margin-right:auto;
display:table;
background-color:#dddddd;
}

#content{
width:745px; 
}

#content_int{
width:625px; /*ant 745 y sin padding left y right*/
min-height:472px;
padding-left:60px;
padding-right:60px;
display:table;
}

.aire{
width:620px;
height:50px;
margin-left:auto;
margin-right:auto;
}

/*.airebottom{
width:625px;
height:50px;
margin-left:auto;
margin-right:auto;
border-top:1px solid #7F7F7F;
clear:both;
}*/


#footer{
width:930px;
height:25px;
margin-left:auto;
margin-right:auto;
text-align:center;
display:table;
}

#footer div{
float:left;
margin:auto;
width:850px;
height:25px;
line-height:25px;
}

#footer p{
text-align:center;
margin-top:0px;
}

/*CARACTERISTICAS*/
.slogan{
font-size:16px;
font-style:italic;
padding-bottom:35px;
}

.caracteristicas1{
width:300px;
font-size:11px;
float:left;
}

.caracteristicas2{
width:290px;
font-size:11px;
float:left;
clear:right;
}

.caracteristicas1 ul{
list-style-type:none;
margin-left:0px;
padding-left:0px;
position:relative;
}

.caracteristicas2 ul{
list-style-type:none;
margin-left:0px;
padding-left:0px;
position:relative;
}

.caracteristicas1 li{
padding-bottom:5px;
padding-top:5px;
}

.caracteristicas2 li{
padding-bottom:5px;
padding-top:5px;
}

/*UBICACION*/

#ubicacion{
width:255px;
float:left;
}

#ubicacion p{
font-size:11px;
}

#mapa{
width:355px;
float:right;
clear:right;
text-align:right;
margin-right:0px;
margin-left:auto;
}


/*VIDEOS*/
#videosthumbs{
width:210px;
float:left;
display:table;
}

#videosthumbs ul{
list-style:none;
float:left;
margin-left:0px;
padding-left:0px;
margin-top:0px;
width:205px;
}

#videosthumbs li{
display:inline;
float:left;
padding-bottom:19px;
}

#video{
clear:right;
width:410px;
margin:0 auto;
float:left;
text-align:center;
}

#video img{
border:0px;
vertical-align:top;
}

/*PLANOS*/

#slideright ul{
margin:0px;
padding:0px;
float:right;
}

#slideright li{
display:inline;
float:left;
padding-right:10px;
vertical-align:bottom;
line-height:30px;
font-size:12px;
color:#333333;
}

#slideright li a{
display:block;
padding-left:5px;
}

#slideright li a:link{
font-size:11px;
color:#333333;
text-decoration:none;
}

#slideright li a:visited{
font-size:11px;
color:#333333;
text-decoration:none;
}

#slideright li a:hover{
font-size:11px;
color:#999999;
text-decoration:none;
}

#slideright li a:active{
font-size:11px;
color:#333333;
text-decoration:none;
}

/* PROYECTO Y DIRECCION*/
#proyecto{
width:255px;
float:left;
vertical-align:middle;
}

#proyecto h2{
font-size:18px;
color:#c1272d;
padding-bottom:5px;
margin-bottom:0px;
}

#proyecto h3{
padding-top:0px;
text-transform:uppercase;
}

#logo_proyecto{
width:365px;
float:right;
clear:right;
text-align:right;
margin:auto;
}


/*FOTOS DE OBRA*/
.piedefoto{
padding:0px;
margin:0px;
text-align:right;
font-size:11px;
vertical-align:top;
}

/*CONTACTO*/
.form01{
width:625px;
font-size:11px;
}

.form01 td{
vertical-align:top;
margin:0px;
padding:0px;
}

.contact input{
border: #605F5F solid 1px;
width:300px;
height:18px;
font-size:11px;
color:#605F5F;
margin-bottom:8px;
}

.contact textarea{
border: #605F5F solid 1px;
width:300px;
height:167px;
font-size:11px;
overflow:auto;
}

.input1 input{
width:140px;
padding-top:0px;
margin-top:0px
}

.form01 a{
display:block;
text-align:center;
padding-top:3px;
padding-bottom:3px;
margin-left:4px;
}

.form01 a:link{
font-size:12px;
color:#f2f2f2;
font-weight:bold;
text-decoration:none;
background-color:#c1272d;
}

.form01 a:visited{
color:#f2f2f2;
text-decoration:none;
background-color:#c1272d;
}

.form01 a:hover{
color:#f2f2f2;
text-decoration:none;
background-color:#282121;
}

.form01 a:active{
color:#f2f2f2;
text-decoration:underline;
background-color:#c1272d;
}

/*DISCLAIMER*/
.caracteristicas1 p{
padding-right:10px;
padding-top:0px;
padding-bottom:10px;
}

.caracteristicas2 p{
padding-left:10px;
padding-top:0px;
padding-bottom:10px;
}

/*PRECIOS Y DISPONIBILIDAD - GUARDIAS */
#disponibilidad {
width:620px;
height:300px;
overflow:auto;
padding:0px;
margin:0px;
border-bottom: #666666 1px solid;
border-top: #666666 1px solid;
}

.table_disponibilidad{
width:601px;
padding:0px;
margin:0px;
text-align:center;
}

.table_disponibilidad th{
font-size: 11px;
font-weight:bold;
color:#333333;
vertical-align:text-bottom;
padding-top:10px;
padding-bottom:5px;
}

.table_disponibilidad td{
border-top: #666666 1px solid;
padding-bottom:5px;
padding-top:5px;
font-size:11px;
color:#666666;
}

.table_guardias{
width:601px;
padding:0px;
margin:0px;
text-align:center;
}

.table_guardias th{
font-size: 11px;
font-weight:bold;
color:#333333;
vertical-align:text-bottom;
padding-top:10px;
padding-bottom:5px;
}

.table_guardias td{
border-top: #666666 1px solid;
padding-bottom:10px;
padding-top:10px;
font-size:11px;
color:#666666;
}

.nota{
font-size:11px;
}

/*GALERIA DE IMAGENES*/
.galeria{
padding-bottom:15px;
}

#slide{
width:625px;
clear:both;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#slideright{
width:350px;
height:31px;
float:right;
text-align:right;
clear:right;
}

#h1{
width:250px;
height:45px;
float:left;
text-align:left;
}

a.swapopacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
padding:2px;
border:#333333 1px solid;
}
 
a.swapopacity:hover img {
filter:alpha(opacity=50);  
-moz-opacity: 0.5;  
opacity: 0.5;
-khtml[-opacity: 0.5; 
padding:2px;
border:#333333 1px solid;
}

/*ATENCION: ESTE DEBERA SER EL ULTIMO ESTILO SIEMPRE  PORQUE LOS HACKS PARA FIREFOX ME TIRAN ERROR CUANDO QUIERO VALIDAR Y CUANDO SIGO PONIENDO ESTILOS DEBAJO DE ESTOS POR EJ LISTAS, FIREFOX NO ME LOS TOMA. SI PODEMOS CON JQUERY CAMBIAR ESTO SERIA LO IDEAL.LO QUE HACEN ESTOS ESTILOS SWAPOPACITY (SON 2) ES EL OVER GENERA UNA TRANSPARENCIA, ES UN EFECTO ROLLOVER*/