@charset "UTF-8";
/* CSS Document */

/* El centrat vertical funciona per a una mida fixa. No s'adapta al contingut. */
/* Hi ha una altra solució per que s'adapti però aquest lloc no ho necessita. */
/* I necessita molts divs i hacks per aconseguir que funcioni amb el maligne (IE) i el codi no queda tant net ni s'ajusta als estàndars de la W3C */
/* Els colors estan expressats en RGB hexadecimal simplificat rgb(100,50,0)=#ff8800=#f80  */
/* Tots els elements estan ordenats alfabèticament. Primer selector, identificadors i classes. */

/*SELECTORS
///////////////////////////////////////////////////////////////////*/

a img 
{
/* Selector dependent (qualsevol imatge amb enllaç). Sobretot serveix per què no s'en vegi un marge al Firefox */
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

body
{
	padding: 0;
	background-color: #999; /* Gris fosc */
	text-align: justify;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFF; /* blanc */
}

body a
{
/* Definició per a tot el lloc menys a #contingut_dreta */
color: #fff; /* Blanc */
}

/*IDENTIFICADORS
///////////////////////////////////////////////////////////////////*/

#contingut_dreta a
/* Aquesta redefinicó només afectarà els enllaços dins de #contingut_dreta */
{
color: #999; /* Gris clar */
text-decoration: none; /* No canvia de color si ja l'hem visitat, ni hi ha cap linia que ho subratlli. */
}

#contingut_dreta
/* El quadre principal de totes les pàgines */
{
	position:absolute;
	left: 50%;
	top: 50%;
	width: 570px;
	height: 530px;
	margin-top: -265px;
	margin-left: -205px;
	color: #900; /* vermell B&B */
	font-size: 12px;
}

#flash_inici
{
margin-top:20px;
}

#formulari_pagament
{

}

#inici
{
margin-top: 30px; /* Si no ho separava la torre de st.feliu tocava el marge */
}

#instant_world
{
position:absolute;
left: 50%;
top: 50%;
margin-top: 228px;
margin-left: 115px;
}

#logo
/* la lleona i l'anagrama B&B */
{
margin-top: 25px; /* Un per si de cas que no es solapi amb el requadre*/
margin-left: 1px; /* 3/4 del mateix */
}

#logo2
/* la fulla de platan*/
{
margin-top: 5px;
}

#mapa_google
/* tota la resta d'atributs ja es defineixen per l'adreça o per javascript. Si es vol actualitzar aquest camp, la forma més senzilla és consultar google maps i crear un iframe de mida personalitzada 570x379 per a copiar/enganxar el codi a la pàgina */
{
width: 570px;
height: 379px;
}

#navegacio_esquerra
/* El menu lateral, que a nivell de php és sempre igual, però que canvia dinàmicament */
{
position:absolute;
left: 50%;
top: 50%;
width: 160px;
height: 530px;
margin-top: -265px;
margin-left: -365px;
}

#requadre_exterior
{
/* Centrat horitzontal i vertical definit a base de distancies percentuals i marges negatius */
position:absolute;
left: 50%;
top: 50%;
width: 750px;
height: 550px;
margin-top: -275px; /* la meitat de l'alçada */
margin-left: -375px; /* la meitat de l'amplada */
border: 1px solid #333; /* Gris molt negre */
background-color: #eee; /* Gris molt clar */
}

#requadre_interior
{
/* Centrat respecte a la pàgina i no respecte a l'altre marge */
position:absolute;
left: 50%;
top: 50%;
width: 730px;
height: 530px;
margin-top: -266px; /* Hi poso un pixel de més per compensar el gruix del contorn */
margin-left: -366px; /* Hi poso un pixel de més per compensar el gruix del contorn */
border: 1px solid #333; /* Gris molt negre */
background-color: #fff; /* Blanc */
}

#text_cap
/* El text fora de les caixes, al cap, amb els idiomes */
{
position:absolute;
top: 50%;
margin-top: -295px; /* la meitat de l'alçada de la caixa gran més una mica més*/
right: 0;
display: inline;
}

#text_inici
/* El text de presentació a la pàgina d'inici */
{
margin-right: 15px;
}

#text_peu
/* El text fora de les caixes, al peu, amb copyright etc. */
{
position:absolute;
top: 50%;
margin-top: 280px; /* la meitat de l'alçada de la caixa gran més una mica més*/
right: 0;
display: inline;
}

/*CLASSES
///////////////////////////////////////////////////////////////////*/

.casa_gran
/* La imatge gran al passi de diapos, tant de la_casa com de l'entorn 1 i 2 */
{
position:absolute;
left: 50%;
top: 50%;
margin-top: -170px;
margin-left: -285px;
}

.casa_petita
/* La imatge petita al passi de diapos, tant de la_casa com de l'entorn 1 i 2 */
/* El marge el poso per la dreta amb la qual cosa, l'última imatge no ha de pertanyer a aquesta classe, per tal d'anar arran de marge */
{
margin-top: 11px;
margin-right: 9px;
}

.contingut_text
/* Aquesta classe és per tots aquells casos en que al requadre de contingut hi ha text i no flashos ni imatges. Per tant en comptes d'apurar cap al marge, hi ha una mica de separació, sobretot per la part dreta */
{
	padding-right: 50px;
	padding-left: 50px;
}

.dreta_peu
/* Alineat de la imatge inferior dreta a on som. Es podria aprofitar la classe per a altres imatges però crec tan sols si tenen la mateixa alçada */
{
position: absolute;
left: 50%;
top: 50%;
margin-top: 123px;
margin-left: 5px;
}

.esquerra_peu
/* Alineat de la imatge inferior esquerra a on som. Es podria aprofitar la classe per a altres imatges però crec tan sols si tenen la mateixa alçada */
{
position: absolute;
left: 50%;
top: 50%;
margin-top: 123px;
margin-left: -285px;
}

.taula_per_formulari
/* Classe aplicada a la primera columna de la taula de reserves, per que tingui un disseny més elegant/ordenat */
{
margin-top: 60px;
text-align: left;
width: 550px;
}

.taula_preus
/* Es complementa amb la classe seguent */
{
margin-left: 30px;
border: thick solid #999;
padding: 10px;
}

.taula_preus td
/* Afecta tots els td de la taula_preus */
{
padding: 5px;
}

.text_formulari_reserves
{
text-align: right;
}