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

	Site:			Villa
	
	Author:			Cameron Yule
					[cameron@cameronyule.com]

	Last Edit:		29.04.2005
	
	
	Listing Order:
	==============
	
	1.	Universal Definitions
	2.	Wrapper/Container
	3.	Navigation
	4.	Header & Masthead


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


/*********************************
	UNIVERSAL DEFINITIONS
**********************************/

* {
	margin: 0; padding: 0;
	}
html {
	/* IE hack */
	font-size: 100%;  
	}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	text-align: center;
	background: url(images/background-repeat.gif) #FFFFFF repeat-x;
	}
form, fieldset, img { 
	border: 0;
	}


/* Links */
a {
	color: #0A6BBB;
	text-decoration: none;
	}	
a:hover {
	color: #ffffff;
	text-decoration: underline;
	}

/* Paragraphs */
p {	
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	}
	
ul {
	font-size: 1em;
	}


/* Headers */
h1, h2, h3, h4 {
	font-family: Arial, Helvetica, serif;
	}
h1 {
	display: none;
	text-indent: -5000px;
	}
.left h2 {
	color: #666666;
	font-size: 1.4em;
	margin: 10px 0 10px 20px;
	}
.right h3 {
	color: #fff;
	font-size: 1.4em;
	}
.right h4 {
	color: #fff;
	font-size: 1.1em;
	margin: 5px 0;
	}

	

.left {
	float: left;
	width: 519px;
	display: inline;
	margin: 10px 0 10px 21px;
	}
.right {
	width: 195px;
	float: right;	
	display: inline;
	margin: 10px 23px 10px 0;
	}
	
/* Clearfix */
.clear {
	clear:both;
	}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
	display: inline-table;
	}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
	}

.clearfix {
	display: block;
	}
/* End hide from IE-mac */




/*********************************
	WRAPPER/CONTAINER
**********************************/

#wrapper {
	width: 773px;
	height: 698px;	
	margin: 0 auto;
	text-align: left;
	background: url(images/background2.jpg) no-repeat;
	}



/*********************************
	NAVIGATION 
**********************************/

ul#navigation {
	float: left;
	width: 194px;
	font-size: 0;
	line-height: 0; 
	display: inline;
	list-style-type: none;
	margin: 139px 0 0 40px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	}
ul#navigation li {
	width: 194px;
	display: inline;
	}


	
/*********************************
	HEADER & MASTHEAD
**********************************/

#masthead {
	float: left;
	width: 495px;
	height: 239px;
	margin-top: 41px
	}

	
	
/*********************************
	HOME
**********************************/


.home p {
	color: #666666;
	font-size: 1.4em;
	line-height: 1.4em;
	margin: 10px 20px 15px 20px;
	}
.home .right ul {
	margin: 5px 0 10px;
	list-style-type: none;
	}
.home .right p {
	margin: 5px 0;
	}
.home .right ul li ul {
	margin-left: 15px;
	list-style-type: disc;
	}
.home .right ul li ul li {
	color: #fff;
	font-size: 1.1em;
	}
	
	
	
/*********************************
	DETAILS
**********************************/

.details p {
	color: #666666;
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 10px 20px 15px 20px;
	}
.details .right ul {
	margin: 5px 0 10px;
	list-style-type: none;
	}
.details .right p {
	margin: 5px 0;
	}
.details .right ul li {
	color: #fff;
	}
.details .right ul li a {
	color: #fff;
	text-decoration: underline;
	}
.details .right ul li a:hover {
	color: #dadada;
	text-decoration: none;
	}
.details .right ul img {
	margin: 5px 0;
	border: solid 1px #fff;
	}
.details .right ul li ul li {
	color: #fff;
	font-size: 1.1em;
	}

	

/*********************************
	GALLERY
**********************************/

.gallery #wrapper {
	height: auto;
}
.gallery p {
	color: #666666;
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 10px 20px 15px 20px;
	}
.gallery dl {
	float: left;
	display: inline;
	width: 126px;
	margin: 5px 20px;
	}
.gallery dt a img {
	border: 1px solid #0E7BBE;
	}
.gallery dt a:hover img {
	border: 1px solid #86BDDE;
	}
.gallery dd a {
	font-size: 1.2em;
	}
.gallery .right ul {
	margin: 5px 0 10px;
	list-style-type: none;
	}
.gallery .right p {
	margin: 5px 0;
	}
.gallery .right ul li {
	color: #fff;
	margin-right: 5px;
	}
.gallery .right ul li a {
	color: #fff;
	text-decoration: underline;
	}
.gallery .right ul li a:hover {
	color: #dadada;
	text-decoration: none;
	}
.gallery .right ul img {
	margin: 5px 0;
	}
.gallery .right ul li ul li {
	color: #fff;
	font-size: 1.1em;
	}
.gallery .right ul ul ul {
	margin-left: 15px;
	list-style-type: disc;
	}	

	
/*********************************
	GALLERY POPUP
**********************************/

.popup {
	position: relative;
	width: 600px;
	height: 400px;
	text-align: auto;
	background: url(images/gallery_background.gif) #fff no-repeat;
}
.popup p.img-nav {
	position: absolute;
	top: 40px;
	right: 30px;
	margin: 0;
	font-size: 1.3em;
	color: #fff;
}
.popup p.img-nav a {
	color: #fff;
}
.popup img {
	position: absolute;
	left: 11px;
	top: 57px;
}


	
/*********************************
	RENTAL RATES
**********************************/

.rates p {
	color: #666666;
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 10px 20px 15px 20px;
	}
.rates table {	
	color: #2E86B6;
	font-size: 1.4em;
	text-align: center;
	margin: 10px 20px 15px 20px;
	}
.rates table td {
	padding: 10px;
	width: 140px;
	border: 1px solid #2E86B6;
	}
.rates table td.low {
	background-color: #FFCC9A;
	}
.rates table td.mid {
	background-color: #FFCC66;
	}
.rates table td.high {
	background-color: #FF9934;
	}
.rates table td.pool {
	background-color: #99CDFF;
	}	
.rates table td.pool-left {
	width: 350px;
	background-color: #99CDFF;
	}
.rates .right ul {
	list-style-type: none;
	}
.rates .right ul li {
	color: #fff;
	margin: 5px;
	}
.rates .right ul img {
	margin: 5px 0;
	}
.rates .right ul li ul li {
	color: #fff;
	font-size: 1.1em;
	}


	
/*********************************
	CONTACT
**********************************/

.contact p {
	color: #666666;
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 10px 20px 15px 20px;
	}
.contact .right ul {
	list-style-type: none;
	}
.contact .right ul li {
	color: #fff;
	margin: 5px 5px 5px 0;
	}
.contact .right ul img {
	margin: 5px 0;
	}
.contact .right ul li ul li {
	color: #fff;
	font-size: 1.1em;
	}
	
	

/*********************************
	FOOTER
**********************************/

#footer {
	width: 728px;
	color: #fff;
	padding: 5px 0;
	margin: 0 auto;
	font-size: 1.2em;
	text-align: center;
	background-color: #86BDDE;
	border-top: solid 1px #fff;
	}