@charset "utf-8";
/* CSS Document */
body {
	background-color:#fff;
	font-family:"Trebuchet MS", Arial, sans-serif;
	font-size:10pt;
}

body:before {
	content:".";
	text-indent:-3em;
	overflow:hidden;
	width:100%;
	height:750px;
	margin-bottom:-750px;
	display:block;
	background-position:0;
}

h1,
h2,
h3,
h4,
#mainNav {	
	font-family:"Myriad Pro", "Century Gothic", Helvetica, sans-serif;
	text-transform:uppercase;
	text-decoration:none;
	font-weight:normal;
	margin-top:0;
}

h2 {
	font-style:oblique;
	font-size:1.3em;
	letter-spacing:.5em;
}

h3 {
	font-size:1.1em;
	font-weight:bold;
	letter-spacing:.1em;
}

h4, 
h4 a,
h4 a:visited {
	font-weight:bold;
	color:#000;
	text-decoration:none;
	font-style:normal;
	border-bottom:0;
	font-size:1em;
}

h4 a:hover,
h4 a:active {
	color:#666;
}

a {
	font-weight:bold;
	font-style:italic;
	color:#4aa5ff;
	border-bottom:1px dashed #4aa5ff;
	text-decoration:none;
}

a:visited {
	color:#6d8eae;
}

a:hover,
a:active {
	color:#9cf;
}

address span {
	display:block;
}

img {
	border:0;
}

dt {
	display:list-item;
	list-style:disc inside;
}

label {
	width:50%;
	float:left;
	margin:10px 40% 0 0;
}

label input,
label select,
label textarea {
	width:99%;
	border:1px solid #ccc;
}

.footnote {
	font-size:.8em;
}

/**********************************
 *  Header                       *
 **********************************/
#header {
	height:373px;
	margin-bottom:-373px;
	background:url(../images/watermark.png) center top no-repeat;
	text-align:center;
	z-index:0;
}

#header h1,
#header p {
	display:none;
}

#header a {
	outline:none;
	width:999px;
	position:relative;
	display:block;
	margin:20px auto;	
	z-index:1;
	border:0;
	height:108px;
	overflow:hidden;
}

#header  img.logo {
	background:url(../images/logo.png) top right no-repeat;
	width:150px;
	height:0;
	padding:108px 0 0 0;
	float:right;
}


/**********************************
 *  Language nav                  *
 **********************************/
#languageNav {
	width:120px;
	font-style:italic;
}

#languageNav ul {
}

#languageNav li {
	list-style:none;
	float:left;
	width:19px;
	height:15px;
}

#languageNav a {
	width:19px;
	height:0;
	padding-top:15px;
	background-position:top left;
	background-repeat:no-repeat;
	position:absolute;
	overflow:hidden;
	border:0;
}

#langEs {
	background-image:url(../images/langSpanish.png);
}

#langEn {
	background-image:url(../images/langEnglish.png);
}

#languageNav a:hover {
	overflow:visible;
	color:#fff;
	background-color:transparent;
}


/**********************************
 *  Main menu                     *
 **********************************/
#mainNav {
	padding-top:18em;
	text-align:right;
	text-transform:uppercase;
	font-size:1em;
	/*text-shadow: 1px 1px 1px #000;*/
}

#mainNav ul,
#mainNav li {
	margin:0;
	list-style:none;
	margin-bottom:1em;
	padding:0;
}

#mainNav li a {
	display:block;
	padding:1em 40px 1em 20px;
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
	border:0;
}

#mainNav li a:visited {
	color:#454545;
}

#mainNav li a:hover {
	color:#fff;
}

#mainNav li.active a,
#mainNav li a:active {
	background-position:left 13em;
	background-repeat:repeat-y;
}

#mainNav li + li.active a,
#mainNav li + li a:active {
	background-position:left 9.2em;
}

#mainNav li + li + li.active a,
#mainNav li + li + li a:active {
	background-position:left 4em;
}

#mainNav li + li + li + li.active a,
#mainNav li + li + li + li a:active {
	background-position:left 0em;
}

#mainNav li + li + li + li + li.active a,
#mainNav li + li + li + li + li a:active {
	background-position:left -5.5em;
}


/**********************************
 *  Secondary menu             *
 **********************************/
#secondNav {
	position:relative;
	/*text-shadow: 2px 2px 3px #999;*/
	/*font-stretch:condensed;*/
	font-size:1.1em;
}

#secondNav ul {
	margin:0;
	position:absolute;
	bottom:0;
	right:0;
}

#secondNav li {
	list-style:none;
	margin-left:1em;
}

#secondNav li a {
	display:block;
	min-width:147px;
	min-height:21px;
	text-align:center;
	font-family:"Myriad Pro", "Century Gothic", Helvetica, sans-serif;
	font-style:oblique;
	color:#000;
	text-decoration:none;
	background-repeat:no-repeat;
	border:0;
}

#secondNav li.active a {	
	background-image:url(../images/submenuHighlight.png);
	background-position:center;	
}

#secondNav li a:visited {	
	color:#666;
}


/**********************************
 *  Wrap                         *
 **********************************/
#wrap {
	font-size:.9em;
}

#wrap p {
	line-height:1.8em;
}

#main div {
	margin-top:20px;
}

#main h2 {
	text-align:right;
	width:280px;
}

#generalInfo {
	text-align:right;
	font-size:1.1em;
}

#generalInfo h3 {
	font-size:1.8em;
	font-weight:500;
}

.gallery {
	margin-top:2.5em;
}

.gallery h3 {
	display:none;
}

.gallery ul,
.gallery li {
	list-style:none;
	margin:0;
	margin-bottom:10px;
	padding:0;
}

.gallery li {
	display:block;
	width:100px;
	padding:0;
}

.gallery li a {
	padding-top:6px;
	background:url(../images/smallShadowTop.png) top center no-repeat;
	display:block;
	border:0;
}

.gallery li a img {
	width:88px;
	padding:6px;
	padding-top:0;
	display:block;
	margin:0;
	border:0;
	background:url(../images/smallShadowAround.png) bottom center no-repeat;
}

.gallery li a:hover img {
	border-color:#f00;
}

.imageCaption {
	width:100%;
	margin-top:3em;
	font-size:.8em;
	padding-top:6px;	
	background:url(../images/mediumShadowTop.png) top center no-repeat;
	color:#888;
}

.imageCaption img {
	width:365px;
	padding:0 7px 6px 7px;
	background:url(../images/mediumShadowAround.png) bottom center no-repeat;
	margin-bottom:-6px;
	display:block;
}

#main .imageCaption div.map {
	padding:0;
	width:365px;
	height:353px;
	margin:-16px auto auto auto;
	border:1px solid #fff;
}

#main .imageCaption div {
	margin:0;
}

.imageCaption .map img {
	background:none;
}

.imageCaption strong {
	font-weight:normal;
	color:#000;
}

.imageCaption p {
	margin:.5em 7px;
}

.offer h3 {
	color:#f00;
}

.back,
.moreInfo {
	float:right;
	font-size:.8em;
} .map {
	width:300px;
	height:300px;
}

/* Home page */
.home #languageNav {
	position:relative;
	padding:0;
}

.home #languageNav {
	width:500px;
	padding-top:20px;
}

.home #languageNav ul {
	margin:0;
	padding:0;
}

.home #languageNav a {
	color:#000;
}

#quickLinks {
	float:right;
}

#quickLinks h3 {
	display:none;
}

#quickLinks li {
	padding-left:408px;
	width:179px;
	min-height:139px;
	margin-bottom:20px;
	margin-left:0;
	list-style:none;
	position:relative;
}

li#quickLinksApartments {
	background:url(../images/apartmentsQuicklinksBackground.png) top left no-repeat;
}

li#quickLinksEnvironment {
	background:url(../images/environmentQuicklinksBackground.png) top left no-repeat;
	
}

li#quickLinksRestaurant {
	background:url(../images/restaurantQuicklinksBackground.png) top left no-repeat;
	
}

#quickLinks li p.offer {
	position:absolute;
	top:-40px;
	left:300px;
	height:83px;
	width:93px;
	padding:20px 5px 0 5px;
	background:url(../images/offerHighlight.png) top left no-repeat;
	font-size:1em;
	font-weight:bold;
	color:#fff;
	background-color:transparent;
	text-align:center;
	line-height:1.1em;
}

#quickLinks li p.offer a {
	color:#fff;
	background-color:transparent;
	font-size:.8em;
	display:block;
	font-weight:normal;
	width:60px;
	margin:.5em auto;
	line-height:normal;
	font-style:normal;
	border:0;
}

#quickLinks h4 {
	margin-bottom:.5em;
}

#quickLinks ul ul {
	margin:0;
	padding:0;
}

#quickLinks li li {
	padding-left:0;
	min-height:0;
	margin-bottom:auto;
	margin-left:0;
	margin-bottom:.5em;
}

#apartmentsLayout,
#apartmentsEquipment {
	position:relative;		/* All these three rules hack the float + margin bug: they just apply a margin-top:300px; */
	top:260px;
	margin-bottom:260px;	
}

#apartmentsLayout .imageCaption {
	position:absolute;
	top:-280px;
	left:0;
	padding:0;
	width:498px;
	height:216px;
	background:url(../images/apartmentsLayoutBackground.png) top left no-repeat;
}

#apartmentsLayout .imageCaption img {
	visibility:hidden;
	height:216px;
}

#apartmentsLayout,
#apartmentsShort,
#apartmentsLong,
#apartmentsSuplements,
#barSchedule,
#barMenuDescription {
	width:219px;
	padding:10px;
	background:url(../images/stripes.png) bottom center repeat;
}

.otherSeasons p.footnote {
	margin:0;
}

.apartments.fees #main ul {
	padding-left:10px;
}

#apartmentsSuplements {
	width:auto;	
	position:relative;		/* All these three rules hack the float + margin bug: they just apply a margin-top:300px; */
	top:20px;
	margin-bottom:20px;	
}

#barSchedule,
#barMenuInfo {
	position:relative;		/* All these three rules hack the float + margin bug: they just apply a margin-top:300px; */
	top:230px;
	margin-bottom:230px;	
}

#barSchedule span.mail {
	font-size:.8em;
}

#barSchedule span.mail strong {
	font-size:1.4em;
}

/* Environment page */
.environment.general .imageCaption {
	background:url(../images/bigShadowTop.png) top center no-repeat;
}

.environment.general .imageCaption img {
	width:486px;
	background:url(../images/bigShadowAround.png) bottom center no-repeat;
}

.environment.surroundings #main  ul {
	margin:0;
	padding:0;
}

.environment.maps h4 {
	margin-bottom:0;
}

#environmentPicture ul {
	padding:0;
	margin:0;
	margin-left:-10px;
}

#environmentPicture li {
	width:235px;
	height:138px;
	padding:0;
	margin:0 0 5px 10px;
	list-style:none;
	float:left;
	background:url(../images/listShadows.png) left top no-repeat;
	overflow:hidden;
}

#environmentPicture li img {
	width:222px;
	padding:6px;
	margin:0;
}

/* Environment section: Layout and rollover effect */
#environmentDescriptionMenu {
	position:relative;
}

#environmentDescriptionMenu h3 {
	display:none;
}

#environmentDescriptionMenu h4 {
	font-weight:bold;
}

#environmentDescriptionMenu ul {
	width:239px;
	float:left;
	margin:0;
	margin-left:-10px;
	padding:0;
	overflow:visible;
}

#environmentDescriptionMenu li {
	float:left;
	list-style:none;
	padding:10px;
	width:100%;
	margin-left:-10px;
	margin:0;
	overflow:visible;
}

#environmentDescriptionMenu h4,
#environmentDescriptionMenu p {
	margin:0;
}

#environmentDescriptionMenu li .moreInfo {
	visibility:hidden;
}

#environmentDescriptionMenu .imageCaption {
	padding-top:6px;
	background:url(../images/notsosmallShadowTop.png) top right no-repeat;
	display:none;
	width:235px;
	margin-top:-2.5em;
	position:absolute;
	right:0;
}

#environmentDescriptionMenu .imageCaption img {
	width:223px;
	background:url(../images/notsosmallShadowAround.png) bottom center no-repeat;
}

#environmentDescriptionMenu .imageCaption p {
	margin:.5em auto auto 10px;
}

#environmentDescriptionMenu li:first-child .imageCaption {
	display:block;
}

#environmentDescriptionMenu ul:hover li .imageCaption {
	display:none;
}

#environmentDescriptionMenu ul li:hover .imageCaption {
	display:block;
}

#environmentDescriptionMenu li:first-child .moreInfo {
	visibility:visible;
}

#environmentDescriptionMenu ul:hover li .moreInfo {
	visibility:hidden;
}

#environmentDescriptionMenu ul li:hover .moreInfo {
	visibility:visible;
}

#environmentDescriptionMenu ul li:hover {
	background:url(../images/stripes.png) bottom center repeat;
}

/* Environment description town pages */
#environmentDescriptionAlmanzora h3,
#environmentDescriptionVillaricos h3,
#environmentDescriptionVera h3,
#environmentDescriptionGarrucha h3,
#environmentDescriptionMojacar h3 {	
	background:url(../images/stripes.png) bottom center repeat;
	width:219px;
	padding:10px;
	margin:0;
}

#environmentDescription h3 span.distance,
#environmentDescriptionVillaricos h3 span.distance,
#environmentDescriptionVera h3 span.distance,
#environmentDescriptionGarrucha h3 span.distance,
#environmentDescriptionMojacar h3 span.distance {
	display:block;
	font-weight:normal;
	font-size:0.8em;
	text-transform:none;
}

#environmentDescriptionAlmanzora .imageCaption,
#environmentDescriptionVillaricos .imageCaption,
#environmentDescriptionVera .imageCaption,
#environmentDescriptionGarrucha .imageCaption,
#environmentDescriptionMojacar .imageCaption {	
	padding-top:6px;
	background:url(../images/notsosmallShadowTop.png) top right no-repeat;
	width:235px;
	float:right;
	margin-right:10px;
	margin-top:-5em;
}

#environmentDescriptionAlmanzora .imageCaption img,
#environmentDescriptionVillaricos .imageCaption img,
#environmentDescriptionVera .imageCaption img,
#environmentDescriptionGarrucha .imageCaption img,
#environmentDescriptionMojacar .imageCaption img {	
	width:223px;
	background:url(../images/notsosmallShadowAround.png) bottom center no-repeat;
}

.history {
	display:block;	
	width:219px;
	padding:10px;
	margin:0 -10px auto auto !important;
	background:url(../images/stripes.png) bottom center repeat;
	float:left;
}

.history h4 {
	display:none !important;
}

.environment.surroundings .history p.back {
	float:none;
	text-align:right;
}

.monuments,
.leisure, 
.infoLinks {
	float:right;
	width:239px;
	margin-left:30px;
}

.monuments li,
.leisure li,
.infoLinks li {
	list-style:none;
	margin-bottom:.5em;
}

/* Contact page */
#contactForm  {
	width:479px;
	padding:10px;
	background:url(../images/stripes.png) bottom center repeat;
	text-align:center; 			/* This line centers the form buttons */
}

#contactForm h3,
#contactForm p,
#contactForm label,
#contactForm ul {
	text-align:left;
}

#messageLabel {
	margin-right:10px;
}

#messageLabel textarea {
	height:170px;
}

#captcha {
	float:left;
	width:224px;
	margin-bottom:20px;
	margin-top:-5px;
}

#captcha label {
	width:211px;
	margin-left:6px;
}

#captcha img {
	width:211px;
	padding:6px;
	background:url(../images/captchaBackground.png) center center;
	margin-bottom:2px;
}

.error {
	background:url(../images/stripes.png) center center repeat #900;
	color:#fff;
	padding:10px;
}

/**********************************
 *  Footer                       *
 **********************************/
#footer {
	color:#999;
	font-size:.8em;
	float:right;
	margin-top:100px;
	width:100%;
	margin-bottom:20px;
}

#footer a {
	color:#999;
}

#contact {
	display:none;
} 

#copyright,
#developer,
#imageDisclaimer {
	float:right;
	clear:both;
	margin:.2em;
}

#developer {
	display:none;  /* Delete this line when the developer info has been written */
}

.validationIcon {
	position:absolute;
	left:20px;
}

.validationIcon a {
	border:0;
}

.validationIcon a img {
	height:15px;
	padding-left:80px;
	display:block;
	width:0;
	overflow:hidden;
}

#validXhtml10 a img {
	background:url(../images/htmlValid.png);
}

#validCss {
	margin-top:30px;
}

#validCss a img {
	background:url(../images/cssValid.png);
}

/**********************************
 *  Section-depending features *
 **********************************/
/* Section: Home */
body.home:before {
	background:url(../images/homeBackground.jpg);
}

.home #mainNav {
	display:none;
}

.home h2 {
	color:#6d53dc;
}

.home .validationIcon {
	position:relative;
}

.home #validCss {
	margin-top:0;
}

/* Section: Apartments */
body.apartments:before {
	background:url(../images/apartmentsBackground.jpg);
}

body.apartments {	
	background:url(../images/apartmentsNavigationBackground.png) top left repeat-y;
}

body.apartments.menu #wrap {
	background:url(../images/apartmentsMenuBackground.png) 480px 235px no-repeat;
}

.apartments h2,
.apartments #secondNav li a:hover,
.apartments #secondNav li.active a {
	color:#c80101;
}

.apartments #mainNav a {
	color:#e9bcbc;
}

.apartments #mainNav li.active a,
.apartments #mainNav li a:active {
	background-image:url(../images/apartmentsNavigationBackground.png);
	color:#fff;
	background-color:transparent;
}

/* Section: Environment */
body.environment:before {
	background:url(../images/environmentBackground.jpg);
}

body.environment {	
	background:url(../images/environmentNavigationBackground.png) top left repeat-y;
}

.environment h2,
.environment #secondNav li a:hover,
.environment #secondNav li.active a {
	color:#006ddc;
}

.environment #mainNav a {
	color:#bbcbe9;
}

.environment #mainNav li.active a,
.environment #mainNav li a:active {
	background-image:url(../images/environmentNavigationBackground.png);
	color:#fff;
	background-color:transparent;
}

/* Section: Restaurant */
body.restaurant:before {
	background:url(../images/restaurantBackground.jpg);
}

body.restaurant {	
	background:url(../images/restaurantNavigationBackground.png) top left repeat-y;
}

body.restaurant.schedule #wrap {
	background:url(../images/restaurantScheduleBackground.png) 480px 195px no-repeat;
}

body.restaurant.menu #wrap {
	background:url(../images/restaurantMenuBackground.png) 480px 195px no-repeat;
}

.restaurant h2,
.restaurant #secondNav li a:hover,
.restaurant #secondNav li.active a {
	color:#009200;
}

.restaurant #mainNav a {
	color:#bcdec4;
}

.restaurant #mainNav li.active a,
.restaurant #mainNav li a:active {
	background-image:url(../images/restaurantNavigationBackground.png);
	color:#fff;
	background-color:transparent;
}

/* Section: Contact */
body.contact:before {
	background:url(../images/contactBackground.jpg);
}

body.contact {	
	background:url(../images/contactNavigationBackground.png) top left repeat-y;
}

.contact h2 {
	color:#90725c;
}

.contact #mainNav a {
	color:#d8cec7;
}

.contact #mainNav li.active a,
.contact #mainNav li a:active {
	background-image:url(../images/contactNavigationBackground.png);
	color:#fff;
	background-color:transparent;
}