/* KETTAL css / Entorno Digital
--------------------------------------------------------------------------- */

/* Showrooms
--------------------------------------------------------------------------- */
@import 'layout.css';

/* Showrooms Layer
--------------------------------------------------------------------------- */	
#capa1a {position: absolute; margin-top: 253px; margin-left: 243px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa2a {position: absolute; margin-top: 195px; margin-left: 410px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000;}
#capa3a {position: absolute; margin-top: 204px; margin-left: 412px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa4a {position: absolute; margin-top: 194px; margin-left: 424px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa5a {position: absolute; margin-top: 191px; margin-left: 428px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa6a {position: absolute; margin-top: 185px; margin-left: 434px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa7a {position: absolute; margin-top: 172px; margin-left: 428px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa8a {position: absolute; margin-top: 164px; margin-left: 434px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa9a {position: absolute; margin-top: 173px; margin-left: 442px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa10a {position: absolute; margin-top: 242px; margin-left: 600px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa11a {position: absolute; margin-top: 223px; margin-left: 600px; width: 270px; height: 160px; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }

/* Showrooms Info Desarrollada
--------------------------------------------------------------------------- */
#capa1b {position: absolute; margin-top: 50px; margin-left: 243px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa2b {position: absolute; margin-top: 50px; margin-left: 410px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa3b {position: absolute; margin-top: 50px; margin-left: 412px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa4b {position: absolute; margin-top: 50px; margin-left: 424px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa5b {position: absolute; margin-top: 50px; margin-left: 428px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa6b {position: absolute; margin-top: 50px; margin-left: 434px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa7b {position: absolute; margin-top: 50px; margin-left: 428px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa8b {position: absolute; margin-top: 50px; margin-left: 434px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa9b {position: absolute; margin-top: 50px; margin-left: 442px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa10b {position: absolute; margin-top: 50px; margin-left: 400px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }
#capa11b {position: absolute; margin-top: 50px; margin-left: 400px; width: 403px; height: auto; background: #fff; border: 1px solid #b0b1b3; padding: 10px; z-index: 1000; }

/* Contenidos Layers
--------------------------------------------------------------------------- */
.bg_cont_tit {height: 15px;}
	.bg_tit {float: left; font-size: 15px; color: #000;}
	.bg_cerrar {float: right; width: 15px; height: 15px;}
.bg_dir_mini {margin: 0;}
.bg_dir {margin: 15px 0 0 0;}
.bg_dir_2 {padding: 10px 10px 0 0; margin: 0px auto; width: 340px;}
.bg_dir_espai {height: 10px;}

img {border: 0}

a.showentrar:link, a.showentrar:visited {display: block; font-size: 12px; color: #368cc7; background: #fff; border: 1px solid #fff; text-decoration: none; cursor: hand; width: 100px; text-transform:capitalize; width: 200px;}
a.showentrar:hover {display: block; background: #000; color: #fff; border: 1px solid #000; width: 200px;}

.showimg {width: 345px; height: 307px; margin: 20px 0 20px 27px;}  

/* ---------------------------- TOOLTIP MAPA ----------------------------- */
	dl.map.on {
		position:relative;
		width: 898px;
		height: 516px;
		background: url(../images/showroom_bg_CAS.jpg) no-repeat;
		text-align:left;
		margin:0;
		padding:0;
	}
	dl.map.on dt {
		list-style:none;
		display:inline;
	}
	dl.map.on dd {
		position: absolute;
		left: -9999px;
		width: auto;
		padding:7px;
		border: 1px solid #0099ff;
		background: url(../images/mapa_punto_bg.gif) no-repeat top left;
		color: #fff;
		z-index: 11;
		font-size: 1.1em;
		text-align: center;
	}
	dl.map.on dd img {
		position:relative;
		float:right;
		border:#000 1px solid;
		margin:2px;
	}
	dl.map.on a.location {
		display:block;
		position:absolute;
		text-indent:-833.25em;
		background: url(../images/punto_mapa.png) no-repeat;
		width:0.83em;
		height:0.83em;
		outline:none;
		z-index:10;
		text-decoration:none;
	}
	dl.map.on a.location:hover {
		background:url(../images/punto_mapa_hover.png) no-repeat;
	}
	dl.map.on dd a {
		text-decoration:none;
		color:#000;
	}
	
/* Posicionado de Layers
--------------------------------------------------------------------------- */
	dl.map.on a#location1 {
		top:253px;
		left:243px;
	}
	dl.map.on a#location2 {
		top:195px;
		left:410px;
	}
	dl.map.on a#location3 {
		top:204px;
		left:412px;
	}
	dl.map.on a#location4 {
		top:194px;
		left:424px;
	}
	dl.map.on a#location5 {
		top:191px;
		left:428px;
	}
	dl.map.on a#location6 {
		top:185px;
		left:434px;
	}
	dl.map.on a#location7 {
		top:172px;
		left:428px;
	}
	dl.map.on a#location8 {
		top:164px;
		left:434px;
	}
	dl.map.on a#location9 {
		top:173px;
		left:442px;
	}
	dl.map.on a#location10 {
		top:242px;
		left:708px;
	}
	dl.map.on a#location11 {
		top:223px;
		left:726px;
	}
	
/* Galería de Imágenes
--------------------------------------------------------------------------- */
/* style the outer cntaining div to fit the landscape, portrait and buttons */
#album { 
width: 345px; height: 307px;
background:#eee;
border:1px solid #b0b1b3;
margin:0 auto;
background:url(../images/show_mia_01.jpg) no-repeat;
}
/* Primera imagen que mostramos en la galeria */
#capa1c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_mia_01.jpg) no-repeat;}
#capa2c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_mad_01.jpg) no-repeat;}
#capa3c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_mar_01.jpg) no-repeat;}
#capa4c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_tarr_01.jpg) no-repeat;}
#capa5c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_bcn_01.jpg) no-repeat;}
#capa6c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_cann_01.jpg) no-repeat;}
#capa7c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_par_01.jpg) no-repeat;}
#capa8c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; /*background:url(../images/)*/ no-repeat;}
#capa9c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; /*background:url(../images/)*/ no-repeat;}
#capa10c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_hnk_01.jpg) no-repeat;}
#capa11c {width: 345px; height: 307px; background:#eee; border:1px solid #b0b1b3; margin:0 auto; background:url(../images/show_shn_01.jpg) no-repeat;}

/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
padding:0; 
margin:315px 0 0 0; 
list-style-type:none; 
position:relative; 
}
/* remove the default image border */
.gallery img {
border:0;
}
/* make the list horizontal */
.gallery li {
float:left;
}
/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
float:left; 
text-decoration:none; 
text-align:center; 
width:15px; 
height:15px; 
margin: 0 5px 0 0;
border: 1px solid #b0b1b3;
color: #6f7175;
}
/* position the images using an absolute position and hide them from view */
.gallery li a img {
position:absolute; 
top:-320px; 
left:0; 
visibility: hidden;
border:0;
}
/* fix the top position for the landscape images */
.gallery li a img.landscape {
top:-280px;
}
/* fix the left position for the portrait images */
.gallery li a img.portrait {
margin: 5px 0 0 0;
}
/* style the hover background color for the text boxes */
.gallery li a:hover {
background:#ddd;
}
/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
background:#444; 
color:#fff;
}
/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
visibility: visible;
}