/* PÁGINA  DE  ESTILOS  PARA  CASABRUES.COM */

/* normalizar todos los margin y padding */
* { 
	margin:0; 
	padding:0;
}
/* dar unos estilos básicos al body */
body { 
	font:100%/1.2 normal Verdana, Arial;
	color:#333;
	text-align:center; /* centrar para IE5.x */
	background-color:#fff;
	padding-bottom:4px;
	padding-top:4px;
}
/* estilos básicos */
h2 {
	font: 120%;
	color: red;
	margin: 0 40px;
	padding: 2px;
}
h3 {
	font-size: 150%;
	color: red;
	margin-right: 40px;
	border-bottom: 1px dotted gray;
}
/* dar unos estilos  al div CONTENEDOR, como ancho y fondo */
#contenedor {
	width:960px;
	text-align:left; /* alinear textos */
	margin:0 auto; /* centra el contenedor */
	background: #f5f7f4 url(contenedor.gif) repeat-y; /*imagen para que el alto de la pagina nos quede bien*/
}

/* dar unos estilos  al div CABECERA, a sus P, H1 */
#cabecera {
	background:#7AA329 url(../imagenes/imagenCabecera1.jpg) no-repeat top left;
	height:160px;
}
#cabecera a, #cabecera h1 {
	font-family: Verdana, Georgia, "Time new Roman";
	text-decoration:none;
	color:#f6ffd5;
	font-size:300%;
	padding-left: 100px;
}

/* dar unos estilos  al div NAVEGACIÓN a sus P, H1 */
#navegacion {
	width:200px;
	float:left;
	background-color:#f5f7f4;
}
#navegacion a {
	color:#000;
}
#navegacion  p{
	padding: 5px;	margin: 0;
	text-align:center;
	background-color: #b1d665;
	}
#navegacion  img{
	padding: 5px 2px;
	width: 195px;
	}
	
/* dar unos estilos  al div PRINCIPAL  */
#principal {
	position:relative;
	width:760px;
	margin-left:200px;
	background-color:#f5f7f4;
	font-size:80%;
}
* html #principal {
	width:757px; /* para IE5.x/W */
	w\idth: 757px; /* para otros IE */
}

/* Aquí colocamos los estilos para la lista horizontal que está debajo de la cabecera con INICIO - CONTACTO - GALEGO */
#barcab {
	height:30px;
	background-color:#7AA329;
}
#barcab ul {
	padding: 5px 0 10px 700px;
	margin:0;
}
#barcab ul li {
	margin: 0; 
	padding: 0;
	display: inline;
	list-style-type: none;
}
#barcab ul li a:link, #barcab ul li a:visited {
	float: left;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	margin: 1px 7px 4px 7px;
	padding: 2px 7px 0 7px;
	text-decoration: none;
	color: #000;
}
#barcab ul li a.actual:link, #barcab ul li a.actual:visited, #barcab ul li a:hover {
	border-top: 8px solid #f6ffd5;
	color: #f6ffd5;
	margin-top:-8px;
}

/* Aquí colocamos los estilos para la lista Vertical  que representa el MENÚ DE NAVEGACIÓN  */
#navegacion ul {
	margin: 0;
	padding: 0px;
	font: bold 12px Verdana, sans-serif;
}
#navegacion ul li {
	margin: 0; 
	border-top: 1px solid gray;
	border-bottom: 1px solid #dcdcdc;
	padding: 0;
	list-style-type: none;
	background-color:#dcdcdc;
}
#navegacion ul li a:link, #navegacion ul li a:visited {
	display: block;
	margin: 0;
	padding: 7px 0 7px 20px;
	text-decoration: none;
	color: #000;
}
#navegacion ul li a.actual:link, #navegacion ul li a.actual:visited, #navegacion ul li a:hover {
	border-left: 15px solid #018ccc;
	background-color: #f6ffd5;
	color: red;
	padding-left: 5px;
}


/* estilos para la página de inicio SECCIÓN PRINCIPAL */
#prin-texto {
	position:relative;
	margin: 15px 350px 0 15px;
	padding: 20px;
	z-index:20;
	background-color: #f4d7d7;
	}
#prin-texto h1,  #prin-precios h1, #entorno h1, #apto h1, #loca h1{
	margin:0 0 15px 0;
	padding:0 0 5px 0;
	border-bottom: 1px dotted gray;
	color: red;
	font-size:150%;
	}
.prin-parrafo {
	text-indent: 2em;
	margin: 5px 5px 0 0; 
	padding: 5px;
	}
#prin-imagen1 {
	position: absolute;
	z-index: 10;
	right: 10px;
	top: 10px;
	border: 0px solid #5FACF3;
	}
	
/* estilos para la tabla de precios SECCION PRECIOS  */
#prin-precios {
	position:relative;
	margin: 15px 200px 15px 15px;
	padding: 20px;
	z-index:20;
	background-color: #f4d7d7;
	}
#prin-precios table{
	margin: 20px auto;
	border-collapse: collapse;
	}
#prin-precios table tbody tr td{
	border: 1px solid #5FACF3;
	margin: 5px;
	padding: 3px 10px;
	text-align: center;
	background: white;
	}
#prin-precios table tfoot tr td{
	margin: 5px;
	padding: 3px 3px;
	text-align: left;
	}
#prin-precios table thead tr th{
	border: 1px solid #5FACF3;
	background: #5FACF3;
	color: #fff;
	margin: 5px;
	padding: 3px 3px;
	text-align: center;
	}
	
/* estilos para la tabla de precios SECCION ACTIVIDADES */
#actividades{
	position:relative;
	margin: 15px 200px 15px 15px;
	padding: 10px;
	z-index:20;
	background-color: #f4d7d7;
	}
#actividades p{
	margin: 5px;
	padding: 5px;
	background-color: #f2d2d2;
	}
#imgActividades{
	position: absolute;
	right: 40px;
	top: 60px;
	width: 200px;
	z-index: 25;
}
/* estilos para la tabla de precios SECCION ENTORNO */
#entorno{
	position:relative;
	margin: 15px 320px 15px 15px;
	padding: 10px;
	z-index:20;
	background-color: #f4d7d7;
	}
#entorno p{
	margin: 5px;
	padding: 5px;
	text-indent:2em;
	background-color: #f2d2d2;
	}
#imgEntorno {
	position: absolute;
	right: 15px;
	top: 35px;
	z-index: 1;
}
/* estilos para la tabla de precios SECCION CONTACTO  */
#contacto {
	position:relative;
	margin: 15px 300px 15px 15px;
	padding: 20px;
	z-index:20;
	background-color: #f4d7d7;
	}
.parrafo {
	margin: 5px;
	margin-right: 40px;
	padding: 7px;
	background-color: #f2d2d2;
	text-indent:2em;
	}
#carta{
	position: absolute;
	left: 300px;
	top: 40px;
	z-index: 25;
}

/* Aquí colocamos los estilos para la lista de servicios y la sección ALOJAMIENTO  */
#alojamiento {
	position:relative;
	margin: 15px 250px 15px 15px;
	padding: 20px;
	z-index:20;
	background-color: #f4d7d7;
	}
.tabula {
	margin-left: 20px;
	margin-top: 5px;
}
#imgAlojamiento {
	position: absolute;
	border: 5px solid #018ccc;
	right: 25px;
	top: 50px;
	z-index: 25;
}
/* Aquí colocamos los estilos para  la sección VIVIENDA VACACIONAL  */
#apto {
	position:relative;
	margin: 15px 300px 125px 15px;
	padding: 15px;
	z-index:20;
	background-color: #f4d7d7;
	}
#imgApt1, #imgApt2, #imgApt3 {
	position: absolute;
	border: 0px solid #018ccc;
	right: 40px;
	z-index:25;
}
#imgApt1 {
	top: 15px;
}
#imgApt2 {
	top: 230px;
}
/* Aquí colocamos los estilos para  la sección LOCALIZACIÓN  */
#loca {
	position:relative;
	margin: 8px 150px 8px 10px;
	padding: 8px;
	background-color: #f4d7d7;
	}
#loca div{
	margin: 0 10px 10px 10px;
	padding: 10px;
	background-color: #f2d2d2;
	}
/* i m a g e n e s      p a  r a     l a      LOCALIZACIÓN */
.gallerycontainer{
position: absolute;
margin: 1px;
top: 10px;
right: 5px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0px;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid red;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
/*left: -1000px;*/
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 1px;
/*left: -250px; /*position where enlarged image should offset horizontally */
right: 100px;
z-index: 50;
}
	
/* Estilos a aplicar al pie de página */	
#pie {
	clear:left;
	background-color:#666;
	color:#f4f4f4;
	font-size:90%;
	padding:0;
	margin:0;
	text-align:center;
}		
		
/* i m a g e n e s  .   G A L E R Í A     D E      F O T O S */
#showcase {
background: #f4d7d7;
margin:10px; 
padding:0 0 10px 0; 
}
#holder {
position:relative; 
background:transparent url(../imagenes/op1.jpg) 150px 45px no-repeat;
margin-bottom:10px; 
z-index:1;
}
#holder h2 {
	margin:7px 140px 4px 30px;
	padding:7px 7px 3px 0;
	border-bottom: 1px dotted gray;
	color: red;
	font-size:150%;
}
#scrollbox {
width:450px; height:80px; 
background:#f4f4f4; 
overflow:auto; 
border:1px solid #aaa; 
margin-left:150px;
}
a.gallery, a.gallery:visited {
display:block; 
color:#000; 
text-decoration:none; 
border:1px solid #000; 
width:75px; height:50px; 
margin:3px; 
float:left; 
font-size:11px;
}
a.slidea {background:url(../imagenes/mini1.jpg);}
a.slideb {background:url(../imagenes/mini2.jpg);}
a.slided {background:url(../imagenes/mini4.jpg);}
a.slidee {background:url(../imagenes/mini5.jpg);}
a.slidef {background:url(../imagenes/mini6.jpg);}
a.slideg {background:url(../imagenes/mini7.jpg);}
a.slideh {background:url(../imagenes/mini8.jpg);}
a.slidei {background:url(../imagenes/mini9.jpg);}
a.slidej {background:url(../imagenes/mini10.jpg);}
a.slidek {background:url(../imagenes/mini12.jpg);}
a.slidel {background:url(../imagenes/mini13.jpg);}
a.slidem {background:url(../imagenes/mini14.jpg);}
a.sliden {background:url(../imagenes/mini15.jpg);}

a.gallery span {
display:block; 
position:absolute; 
left:150px; top:-1px; 
width:1px; height:1px; 
overflow:hidden; 
background:#efedec; z-index:100; font-size:11px;
}
a.gallery:hover {
white-space:normal; 
border:1px solid #fff;
}
a.gallery:hover img {
border:1px solid #000; 
z-index:100;
}
a.gallery:active img, a.gallery:focus img {
border:1px solid #000; 
z-index:50;
}

a.gallery:hover span {
display:block; 
position:absolute; 
width:452px; height:330px; 
top:39px; left:144px; 
padding:5px; 
font-style:normal; 
color:#000; 
background:lightyellow; 
z-index:100; 
font-size:11px;
}
* html a.gallery:hover span {left:114px;}
a.gallery:active {
border:1px solid #eee;
}
a.gallery:active span, a.gallery:focus span {
display:block; 
position:absolute; 
width:452px; height:330px; 
top:39px; left:144px; 
padding:5px; 
font-style:normal; 
color:#000; 
background:lightyellow; 
z-index:50;
}
* html a.gallery:active span {left:114px;}
#thumbs {width:1090px; height:60px;}
#pad {height:350px; width:100px;}