/*
    CSS de Posada la Llosa

*/

/* Propiedades de los enlaces */
a { 
  margin : 0 auto; /* No queremos márgenes */
  display: block;  /* Permite que se indique el tamaño de el enlace */
}

/* Propiedades de las imagenes */
img {
  border: 0px;  /* sin borde */
}

/* Div de contenidos */
#contenido { 
  position    : absolute;  /* Posición absoluta en la página */
  left        : 50%;       /* La parte izquierda a la mitad de la pantalla */
  margin-left : -390px;    /* Ahora quitamos el margen (esto y lo de arriba hace que se centre independientemente del tamaño de la pantalla) */
  margin-top  : 30px;      /* Margen superior */
}

/* Div del menu */
#menu{ 
    width: 790px; /* Ancho */
}

/* Div del cuerpo (donde estan las fotos) */
#cuerpo {
  width       : 790px;           /* Ancho */
}

/* Div del pie */
#pie { 
  width : 790px; /* Ancho */ 
  height: 30px;  /* Alto */
}

/* Menu Inicio */
#principio  {
    background: url(imagenes/inicio.gif) no-repeat; /* Asigno la imagen */
    float  : left; /* Que se ajuste a la izquierda */
    width  : 65px; /* Ancho */
    height : 30px; /* Alto */
}
a#principio:hover, /* Que tiene que hacer el enlace cuando se pase el ratón por encima */
body.pgprincipio #principio a { /* Que tiene que hacer el enlace cuando el body tiene este class */
    background-position: 0 -40px; /* Le restamos margen superior (esto hace que la imagen suba) */
}

/* Idem que menu Inicio para menu La Posada */
#posada  {
    background: url(imagenes/laposada.gif) no-repeat;
    float  : left;
    width  : 90px;
    height : 30px;
}
a#posada:hover,
body.pgposada #posada a {
    background-position: 0 -40px;
}

/* Idem que menu Inicio para menu Habitaciones */
#habitaciones {
    background: url(imagenes/habitaciones.gif) no-repeat;
    float  : left;
    width  : 102px;
    height : 30px;
}
a#habitaciones:hover,
body.pghabitaciones #habitaciones a  {
    background-position: 0 -40px;
}

/* Idem que menu Inicio para menu Apartamentos */
#apartamentos {
    background: url(imagenes/apartamentos.gif) no-repeat;
    float  : left;
    width  : 114px;
    height : 30px;
}
a#apartamentos:hover, 
body.pgapartamentos #apartamentos a  {
    background-position: 0 -40px;
}

/* Idem que menu Inicio para menu Entorno */
#entorno {
    background: url(imagenes/entorno.gif) no-repeat;
    float  : left;
    width  : 68px;
    height : 30px;
}
a#entorno:hover,
body.pgentorno #entorno a  {
    background-position: 0 -40px;
}

/* Idem que menu Inicio para menu Actividades */
#actividades {
    background: url(imagenes/actividades.gif) no-repeat;
    float  : left;
    width  : 94px;
    height : 30px;
}
a#actividades:hover,
body.pgactividades #actividades a   {
    background-position: 0 -40px;
}


/* Idem que menu Inicio para menu Como llegar */
#llegar {
    background: url(imagenes/comollegar.gif) no-repeat;
    float  : left;
    width  : 99px;
    height : 30px;
}
a#llegar:hover,
body.pgllegar #llegar a   {
    background-position: 0 -40px;
}

/* Idem que menu Inicio para menu Precios */
#precios {
    background: url(imagenes/precios.gif) no-repeat;
    float  : left;
    width  : 69px;
    height : 30px;
}
a#precios:hover,
body.pgprecios #precios a   {
    background-position: 0 -40px;
}

/* Idem que menu Inicio para menu Reservas */
#reservas {
    background: url(imagenes/reservas.gif) no-repeat;
    float  : left;
    width  : 80px;
    height : 30px;
}
a#reservas:hover,
body.pgreservas #reservas a   {
    background-position: 0 -40px;
}