/*
	On The Beach CSS 
	Developed by Alliance Software
	
	22nd February 2010
	
	
	==========================================================
	
	TABLE OF CONTENTS
	
		1. Reset and colours
		2. General Setup
		3. Tiny MCE Default Styles
		4. Layout
		5. Nav
		6. Header
		7. Content
		8. Footer
		9. Forms
	
	=========================================================

*/
/* 	*********************************

		1. RESET AND COLOURS
		
	*********************************
*/
	@import url(reset.css);
	
	/*
		page colours go here for easy reference
	*/


/* 	*********************************

		2. GENERAL SETUP
		
	*********************************
*/
	body{
		font-family:"Helvetica Neue", Arial, Helvetica, Sans-serif;	
		font-size:75%;
		line-height:1.5;
		color:#333;
	}
	
	h3,h4,h5,h6 {
		margin:1em 0 0 0;
	}
	h1,h2,h3,h4{font-weight:bold;}
	h1{font-size: 1.75em;}
	h2{font-size:2em; font-weight:normal; line-height:1.2; margin-bottom:0.75em;}
	h3{font-size:1.3em; margin:0 0 1em 0; font-weight:normal;}
	h4{font-size:1em;}
	
	p{margin:0em 0 1.5em;}
	em{font-style:italic;}
	strong{font-weight:bold;}
	.text-left{text-align:left;}
	.text-right{text-align:right;}
	.text-center{text-align:center;}
	
	ul, ol, dl{margin:1.2857em 0;}																																											
	ol{list-style-type:decimal;}
	li{margin:0 0 0.75em;}													
	ul{list-style-type:none;}
	small {font-size:10px;}
	#page .no-bullet ul{	list-style-type:none;}
	#page ul.no-bullet{list-style-type:none; margin-left:0;}
	
	#main-content ul{list-style-type:disc; margin-left:1em;}
	
	/* keep in LoVe HAte */
	a:link{color:#79abd9;}
	a:visited{color:#7094c2;}
	a:hover{color:#E67700; text-decoration:none;}
	a:active{color:#7094c2;}
	
	/* To force the blockquote to clear itself */
	blockquote:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
	blockquote {display:inline-block;}/* Hide from IE Mac \*/
	blockquote {display:block;}/* End hide from IE Mac */
	
	/* generic float and clear classes */
	.left{float:left;}
	.right{float:right;}
	.clear{clear:both;}
	.clear-left{clear:left;}
	.clear-right{clear:right;}
	
	img.left{padding:0 1.5em 1em 0;}
	img.right{padding:0 0 1em 1.5em;}
	
	/* clearfix enables self clearing floats, add class="clearfix" to any floated element to clear itself */
	.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
	.clearfix {display:inline-block;}/* Hide from IE Mac \*/
	.clearfix {display:block;}/* End hide from IE Mac */

	hr{
		clear:both;	
		border:1px solid #efefef;
		border-width:1px 0 0 0;	
		padding:1.5em 0 0em;
	}



/* 	*********************************

		3. TINY MCE STYLES
		
	*********************************
*/
	.mceContentBody{
		background:#fff;															/* sets background to white when editing in CMS */
		color:#222;																	/* sets text colour at a good contrast on white background */
		text-align:left;															/* to make sure it does not take centre styles from body */
	}
	.mceContentBody ul, .mceContentBody ol, .mceContentBody dl{margin:1em 0;}									
	.mceContentBody ol li{list-style-type:decimal; margin-left:30px;}
	.mceContentBody li{margin:0 0 0.5em;}															
	.mceContentBody ul li{list-style-type:square; margin:0 0 0 30px;}





/*	*********************************

		4. LAYOUT 
		
	*********************************
*/

	html{
		background:url(../images/bg-beach.jpg) no-repeat center -70px fixed;
	}
	#page{
		width:960px;
		font-size:1.166em;
		line-height:1.5em;
		margin-bottom:1.5em;
		margin:1em auto;
	}
	#header{
		background:#676666 url(../images/header-bg.png) repeat-x 0 top;
		color:#f9f9f9;
		-moz-border-radius-topright:10px;
		-moz-border-radius-topleft:10px;
		-webkit-border-top-left-radius:10px;
		-webkit-border-top-right-radius:10px;
		border-radius:10px 10px 0 0;
	}
	
	#content{
		background:#fff url(../images/secondary-content-bg.png) repeat-y right 0;
	}
	
	#footer{
		background:#010101 url(../images/footer-bg.png) repeat-x 0 0;
		padding:14px 14px 0;
		-moz-border-radius-bottomright:10px;
		-moz-border-radius-bottomleft:10px;
		-webkit-border-bottom-left-radius:10px;
		-webkit-border-bottom-right-radius:10px;
		border-radius:0 0 10px 10px;
	} 
	#copyright{
	
	}
	
	
	
	
/*	*********************************

		5. NAVIGATION
		
	*********************************
*/

	/*
	=================================
	Important for accessibility, skip
	navigation link initially hidden
	but shown on focus using keyboard
	=================================
	*/
	#skip a, #skip a:hover, #skip a:visited {
		position:absolute;
		left:-9999em;		
		overflow:hidden;
	}
	#skip a:active, #skip a:focus{
		position:static;
	}
	
	/* Main navigation bar */
	
	#nav{
		background:url(../images/nav-left-wrap.png) no-repeat -3px -1px;
		margin:0 -1em;
		position:relative;
	}
	#nav .necessary-evil{
		background:url(../images/nav-right-wrap.png) no-repeat -1px -1px  ;
		position:absolute;
		right:0;
		top:0;
		width:1.1em;
		height:3.6em;
		margin:0;
	}
	#nav ul{
		background:#b6a778 url(../images/nav-bg.png) repeat-x;
		text-align:center;
		height:2.8em;
		padding-left:100px;
		font-size:1.1428em;
		font-family:"Century Gothic", "Apple Gothic", Sans-serif;
		text-shadow:1px 1px 1px #000;
	}
	#nav li{
		float:left;
		background:url(../images/nav-li-bg.png) repeat-x;
		position:relative;
		top:6px;
		margin:0;
		padding:0;
		text-align:center;
	}
	#nav li a{
		display:block;
		text-decoration:none;
		color:#DFDFDF;
		height:31px;
		line-height:31px;
		text-indent:-9999em;
		background:url(../images/nav-sprite.png) no-repeat 0 1px;
		overflow:hidden;
	}
	#nav li a:hover{
		text-shadow:0px 0px 5px #fff;
		color:#fff;
	}
	#nav li.first{
		background:url(../images/nav-li-left-bg.png) left;
		padding-left:30px;
	}
	#nav li.last{
		background:url(../images/nav-li-right-bg.png) right;
		padding-right:30px;
	}
	
	#nav ul ul{
		position:absolute;
		visibility:hidden;
		margin:0;
		z-index:10000;
		padding:6px 2px 6px 8px;
		height:auto;
		background-image:none;
		background-color:#B8A979;
		border:1px solid #414141;
		border-width:0 1px 1px;
		left:-20px;
		top:31px;
	}
	#nav ul ul li{
		float:none;
		padding:0;
		background-image:none;
		font-size:0.7em;
		margin:0 0 0.3em 0;
		position:static;

	}
	#nav ul ul li a{
		background:url(../images/nav-sub-sprite-new.png) no-repeat;
		padding:0;
		height:29px;
		line-height:1.9;
		text-align:center;
		margin:0;
		min-width:130px;
	}
	#nav ul li:hover ul, #nav ul li.over ul{visibility:visible;}
	
	#nav li a.nav-home{
		width:85px;
		display:block;
	}
	#nav li a.nav-home:hover{ background-position:0px -30px;	}
	#nav li a.nav-properties{
		width:120px;
		background-position:-90px 1px;
		display:block;
	}
	#nav li a.nav-properties:hover{ background-position:-90px -30px; }
	
	#nav li a.nav-bookings{
		width:180px;
		background-position:-215px 1px;
		display:block;
	}
	#nav li a.nav-bookings:hover{ background-position:-215px -30px; }
	
	#nav li a.nav-gallery{
		width:110px;
		background-position:-400px 1px;
		display:block;
	}
	#nav li a.nav-gallery:hover{ background-position:-400px -30px; }
	
	#nav li a.nav-location{
		width:110px;
		background-position:-505px 1px;
		display:block;
	}
	#nav li a.nav-location:hover{ background-position:-505px -30px; }
	
	#nav li a.nav-contact{
		width:140px;
		background-position:-615px 1px;
		display:block;
	}
	#nav li a.nav-contact:hover{ background-position:-615px -30px; }
	
	#nav ul li a.nav-ultimate{ background-position:0 0px; display:block; }
	#nav ul li a.nav-ultimate:hover{background-position:0 -87px;}

	#nav ul li a.nav-unbelievable{ background-position:0 -58px; display:block; }
	#nav ul li a.nav-unbelievable:hover{ background-position:0 -145px; }

	#nav ul li a.nav-dreamview { background-position:0 -29px; display:block; }
	#nav ul li a.nav-dreamview:hover{ background-position:0 -116px;}



/* 	********************************* 

		6. HEADER 
		
	*********************************
*/
	
	#header h1{
		padding-top:0.5em;
		margin-bottom:0.75em;
	}
	#header h1 a{
		background:url(../images/logo.png) no-repeat;
		display:block;
		width:600px;
		height:0px;
		padding-top:80px;
		overflow:hidden;
		margin:0 auto;
	}
	.header-top{
		display:block;
		background:url(../images/header-top.png) no-repeat -1px 0;
		height:10px;		
	}
	
	
	
	
/*	********************************* 
		
		7. CONTENT 
		
	*********************************
*/
	
	#main-content{
		width:580px;
		float:left;
		padding:1.5em 2em;							
	}
	
	#main-content h2.mc-head {text-indent:-9999px;display:block;height:60px;position:relative;margin-left:-42px;margin-bottom:0.5em;}
	#main-content h2.mc-head#head-book {background:url(../images/title-bookings.png) no-repeat;}
	#main-content h2.mc-head#head-cont {background:url(../images/title-contact.png) no-repeat;}
	#main-content h2.mc-head#head-dv {background:url(../images/title-dreamview.png) no-repeat;}
	#main-content h2.mc-head#head-gal {background:url(../images/title-gallery.png) no-repeat;}
	#main-content h2.mc-head#head-loc {background:url(../images/title-location.png) no-repeat;}
	#main-content h2.mc-head#head-pam {background:url(../images/title-pambula.png) no-repeat;width:630px;}
	#main-content h2.mc-head#head-ult {background:url(../images/title-ultimate.png) no-repeat;}
	#main-content h2.mc-head#head-unb {background:url(../images/title-unbelievable.png) no-repeat;}
	#main-content h2.mc-head#head-thank {background:url(../images/title-thanks.png) no-repeat;}

	#main-content h3.mc-head {text-indent:-9999px;display:block;height:40px;position:relative;margin-left:-37px;margin-bottom:0.5em;}
	#main-content h3.mc-head#head-wild {background:url(../images/title-wildlife.png) no-repeat;}
	#main-content h3.mc-head#head-beach {background:url(../images/title-beaches.png) no-repeat;}
	#main-content h3.mc-head#head-fish {background:url(../images/title-fishing.png) no-repeat;}
	#main-content h3.mc-head#head-bowl {background:url(../images/title-bowling.png) no-repeat;}
	#main-content h3.mc-head#head-golf {background:url(../images/title-golf.png) no-repeat;}
	#main-content h3.mc-head#head-horse {background:url(../images/title-horse.png) no-repeat;}
	#main-content h3.mc-head#head-whale {background:url(../images/title-whale.png) no-repeat;}
	#main-content h3.mc-head#head-eat {background:url(../images/title-cuisine.png) no-repeat;}
	#main-content h3.mc-head#head-snow {background:url(../images/title-snow.png) no-repeat;}
	#main-content h3.mc-head#head-music {background:url(../images/title-music.png) no-repeat;}
	#main-content h3.mc-head#head-living {background:url(../images/title-living.png) no-repeat;}
	#main-content h3.mc-head#head-howto {background:url(../images/title-howtoget.png) no-repeat;}
	#main-content h3.mc-head#head-phone {background:url(../images/title-phone.png) no-repeat;}
	#main-content h3.mc-head#head-post {background:url(../images/title-postal.png) no-repeat;}
	#main-content h3.mc-head#head-email {background:url(../images/title-email.png) no-repeat;}
	#main-content h3.mc-head#head-best {background:url(../images/title-best.png) no-repeat;}
	#main-content h3.mc-head#head-judge {background:url(../images/title-judge.png) no-repeat;}
	#main-content h3.mc-head#head-visit {background:url(../images/title-visitors.png) no-repeat;width:625px;}
	#main-content h3.mc-head#head-feat {background:url(../images/title-features.png) no-repeat;}
	#main-content h3.mc-head#head-cond {background:url(../images/title-conditions.png) no-repeat;}
	#main-content h3.mc-head#head-region {background:url(../images/title-region.png) no-repeat;}
	#main-content h3.mc-head#head-cal {background:url(../images/title-calendar.png) no-repeat;}

	#main-content p.highlight, #main-content ul.highlight {font-size:18px; font-style:oblique;margin-left:0.5em;}

	#main-content span#booking-title {text-indent:-9999px;display:block;height:40px;width:220px;position:relative;left:-36px;margin-bottom:0.5em;background:url(../images/title-booking.png) no-repeat;}

	#main-content .pullout {width:550px;padding:0px 20px;border:1px maroon double;position:relative;left:-10px;background:#FDD;}

	.full #content{
		background-image:none;
	}
	.full #main-content{
		float:none;
		width:890px;
	}
	#secondary-content{
		width:275px;
		float:left;
		margin-left:1.4em;
		padding-top:1em;
	}
	#secondary-content blockquote{
		font-size:0.857em;
		line-height:1.5;
		margin-bottom:1.5em;
	}
	#secondary-content blockquote span{font-size:1.3em; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold;line-height:1; }
	#secondary-content blockquote p cite{float:right;text-align:right;}
	
	#locations-nav{
		
		padding: 0 0.79em 1em;
	}
	#locations-nav img{
		border:4px solid #fff;
		-moz-box-shadow:0px 0px 5px #000;
		-webkit-box-shadow:0px 0px 5px #000;
		box-shadow:0px 0px 5px #000;
		display:block;
		
		z-index:10;
	}
	#locations-nav ul{
		margin:0.5em 0 0em 0;
		overflow:hidden;
	}
	#locations-nav ul li{
		float:left;
		width:305px;
		display:block;
	}
	#locations-nav ul li.ultimate{
		margin:0;
	}
	#locations-nav ul li.dreamview{margin:0 0.75em 0 0.75em;}
	#locations-nav ul li.ultimate p{
		background:url(../images/the-ultimate-bg.png) no-repeat;
	}
	#locations-nav ul li.dreamview p{
		background:url(../images/dreamview.png) no-repeat;
	}
	#locations-nav ul li.unbelievable p{
		background:url(../images/unbelievable.png) no-repeat;
	}
	#locations-nav ul li p{	
		width:306px;
		height:0px;
		position:relative;
		top:0px;
		left:0;
		padding-top:41px;
		margin:0;
		overflow:hidden;
	}
	#locations-nav ul li a.more{
		position:absolute;
		right:15px;
		display:block;
		background:url(../images/button-find-out-more.png) no-repeat;
		width:94px;
		height:24px;
		top:7px;
		z-index:1000;
		text-indent:-9999em;
	}
	#locations-nav ul li a:hover{background:url(../images/button-find-out-more-hover.png) no-repeat;}
	.more{
		display:block;
		background:url(../images/button-find-out-more.png) no-repeat;
		width:94px;
		height:24px;
		text-indent:-9999em;
	}
	.more:hover{
		background:url(../images/button-find-out-more-hover.png) no-repeat;
	}
	p.intro{
		font-size:1.2857em;
		line-height:1.3333;
		margin-bottom:1em;
	}
	.ribbon{
		background:url(../images/call-banner.png) no-repeat 0 0;
		margin:-19px 0 1em 1em;
		width:254px;
		height:0px;
		position:relative;
		padding-top:167px;
		overflow:hidden;
	}
	.ribbon-blank{
		background:url(../images/ribbon-blank-long.png) no-repeat 0 0px;
		margin:-16px 0 1em 0.75em;
		width:254px;
		position:relative;
		padding:47px 0 0.5em;
		top:-2px;
		height: 207px;
	}
	.ribbon-blank .book{
		margin-bottom:1em;
	}
	.ribbon a.ribbon-email{
		position:absolute;
		bottom:30px;
		left:40px;
		display:block;
		background:url(../images/button-ribbon-email-ro.png) no-repeat;
		width:178px;
		height:29px;
		text-indent:-9999em;
		overflow:hidden;
	}
	.ribbon a.ribbon-email:hover{
		background-position:0px -29px;
	}

	/* ===== Gallery ======= */

	#page .gallery-list{
		margin:0;
		padding:0;
		overflow:hidden;
	}
	#page .gallery-list li{
		list-style-type:none;
		margin:0 0.5em 1.5em;
		padding:0;
		float:left;
		border:1px solid #aaa;
		min-height:175px;
		-moz-box-shadow:1px 1px 5px #777;
		-webkit-box-shadow:1px 1px 5px #777;
		box-shadow:1px 1px 5px #777;
	}
	#page .gallery-list li a{display:block;}
	#page .gallery-list li img{
		border:7px solid #fff;
	}
	
	/* ==== Bookings ==== */
	
	#booking-table{
		width:100%;
		border:1px solid #5C5B5B;
		margin-bottom:1em;
	}
	#booking-table th{
		background-color:#5C5B5B;
		padding:2px 10px;
		font-weight:normal;
		color:#fff;
		text-align:left;
	}
	#booking-table td{
		padding:2px 10px;
	}
	
	/* ==== Getting There ==== */
	
	#page .getting-there{
		list-style-type:none;
		margin:0 0 2em;
	}

	#page .getting-there li{
		padding-left:110px;
		height:115px;
	}
	#page .getting-there li img{
		margin-left:-100px;
		float:left;
		margin-top:5px;
	}
	#page .getting-there li h3 {text-indent:-9999px;display:block;height:40px;position:relative;left:-146px;margin-bottom:0em;}
	#page .getting-there li h3#head-drive {background:url(../images/title-drive.png) no-repeat;}
	#page .getting-there li h3#head-fly {background:url(../images/title-fly.png) no-repeat;}
	#page .getting-there li h3#head-bus {background:url(../images/title-bus.png) no-repeat;}

	#property-intro{
		background:#EDEDED;
		padding:1.5em 2em;
		border-bottom:1px solid #ddd;
		overflow:hidden;
	}
	#property-intro .text{
		float:left;
		width:580px;
		margin-right:1em;
	}
	.gallery-book{
		float:right;
		width:290px;
	
	}
	.gallery-book img{
		border:1px solid #333;
		padding:5px;
		background-color:#fff;
	}
	.gallery-book a{
		display:block;
	}
	a.book{
		display:block;
		background:url(../images/book-now-button-ro.png) no-repeat;
		width:108px;
		height:29px;
		margin:0em auto 0;
		text-indent:-9999em;
		overflow:hidden;
	}
	a.book:hover{
		background-position:0 -29px;
	}
	.gallery-list-sm{
		overflow:hidden;
		margin:1em 0;		
	}
	.gallery-list-sm li{
		float:left;
		margin:0;
	}
	#gmap{
		margin:0px;
	}
	#property-gallery{
		margin:0 auto;
	}
	#property-gallery li img{
		border:1px solid #333;
		padding:3px;
		background-color:#fff;
	}
	
	div#calendars h2 {margin-bottom:0;}
	.calendar {width:280px; height:240px; float:right; border:none;}
	.calender body {padding:0; margin:0;}
	#cal-legend {width:300px;float:left;}
	.legend {border:1px solid #555;padding:20px;margin:20px 20px 0 0; height:100px;}
	.legend li {height:25px;padding-left:45px; list-style-position:outside; list-style-type:none;}
	.legend li.av {background:url(../images/icon-available.gif) no-repeat;}
	.legend li.unav {background:url(../images/icon-unavailable.gif) no-repeat;margin-top:20px;;}
	
	
	


/* 
	*********************************

		8. FOOTER
		
	*********************************	
*/

	
	#footer ul{
		margin:0;
		overflow:hidden;
		color:#fff;
	}
	#footer ul li{
		float:left;
		width:250px;
		position:relative;
		margin-right:3em;
	}
	#footer ul ul{
		list-style-type:disc;
		padding-left:1em;
	}
	#footer ul ul li{
		float:none;
		margin:0;
	}
	#footer .more{
		margin:12px 0;
	}
	.footer-contact h3{
		background:url(../images/on-the-beach-text.png) no-repeat 0 1px;
		text-indent:-9999em;	
	}
	#footer p{
		margin-bottom:1em;
	}
	#footer .copyright {position:relative;top:40px;left:175px;font-size:11px;}
	#footer ul li.footer-contact{
		width:280px;
		margin-right:1em;
	}
	div.vcard span.email a{
		color:#7EA8E9;
	}
	div.vcard span.email a:hover{
		color:#fff;
	}



/* 	*********************************
	
		9. FORMS

	*********************************
*/

	#bookings,
	#contact{ margin:1em 0; }
	
	#bookings ul,
	#contact ul{ margin:1em 0; }
	
	#bookings li,
	#contact li{ list-style-type:none; margin-bottom:0.5em; }
	#bookings legend,
	#contact legend{ font-size:1.5em; }
	
	#bookings label,
	#contact label{
		display:block;
		float:left;
		width:180px;
		margin-right:1em;
		text-align:right;
	}
	#contact label{
	width:100px;
	}
	#bookings input[type="text"],
	#contact input[type="text"]{
		padding:3px;
		width:220px;
	}
	
	#bookings input[type="submit"],
	#contact input[type="submit"]{ margin-left:190px; }
	
	textarea{font-family:"Helvetica Neue", Arial, Helvetica, Sans-serif; font-size:1em; padding:3px; width:250px;}
	
	abbr[title="required"]{
		font-size:1.4em;
		vertical-align:bottom;
		line-height:0.75;
	}
	#bookings label.error, #contact label.error{
		display:inline;
		float:none;
		width:auto;
		text-align:left;
		color:red;
		margin-left:1em;
		font-size:0.9em;
	}
	.errorbox{
		border:3px double red;
		padding:6px;
		color:red;
	}