/* Americanvilla.com CSS Document */

/* reset formats */
* {margin: 0;
	padding: 0;}
	
ul {list-style: none inside;}
p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; text-align: justify;}
a {outline: none; text-decoration: none; color: #660000;}
a img {border: none;}
h1, h2 {color: #660000;}
h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
h2 {font-size: 1.2em;}
h3 {font-size: 1.1em;}


/*general styling */

.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.imgcenter {margin-top: 20px; text-align: center;}

body {position: relative;
font: 62.5% Verdana, Arial, Helvetica, sans-serif;
	background: url(images/background_yello.jpg);
	color: #333333;}

#page-wrap {width: 976px;
	margin: 0 auto;}

#main_content {background: url(images/mainbackground.png) repeat-y;
min-height: 800px;}

.photoborder {
padding: 2px 2px 7px 2px;
	border-left: 1px solid #CCCCCC;
	border-top: 1px solid #cccccc;
	border-right: 2px solid #999999;
	border-bottom: 2px solid #999999;
		background: #fff;} /*adds photo border around images */


/*heading and navigation */
	/*heading */

#header {position:relative;
margin: 20px auto 0 auto;
width: 976px;
height:223px;
background: url(images/header.png) no-repeat;
z-index: 100;}

#header h1 {text-indent: -9999px;
	position:absolute;
	margin: -23px 0 0 -25px;
	width:363px;
	height:258px;
	background: transparent url(images/brandingSL.png) no-repeat;
	border: none;
}

#header h2, #header ul {position: absolute;}

	#header h2 {
		top: 35px; left: 710px;
		width:200px; height: 25px;
		text-indent: -9999px;
		background: url(images/americanvilla.png) no-repeat;}
		
		#header ul {position: absolute;
			top: 65px; left: 750px;
		}
		#header ul li {display: inline;
		color: #fff;
		font-weight: bold;
		margin: 0 10px 0 0px;
		}
		#header ul a {	
		color: #ffffff;
		text-decoration: none;
		}
		#header ul a:hover, #header ul a:active {text-decoration: underline;}
		
/*navigation */
		
ul#nav {height: 57px;}
		
		ul#nav li {display: inline;	
			}
			ul#nav li a {
			display: block;
			text-indent: -9999px;
			height: 57px;
			float: left;
			}
			#nav li.villa a {
			background: url(images/nav_villa.png) no-repeat; width: 228px;
			background-position: bottom center;}
			#nav li.local a {
			background: url(images/nav_local.png) no-repeat; width: 172px;
			background-position: bottom center;}
			#nav li.rates a {background: url(images/nav_rates.png) no-repeat; width: 174px;
			background-position: bottom center;}
			#nav li.about a {
		background: url(images/nav_about.png) no-repeat; width: 172px;
			background-position: bottom center;}
			#nav li.blog a {
			background: url(images/nav_blog.png) no-repeat; width: 229px;
			background-position: bottom center;}
			
			
			#nav li.blog a:hover, #nav li.blog a:active,
			#nav li.about a:hover, #nav li.about a:active,
			#nav li.villa a:hover, #nav li.villa a:active,
			#nav li.rates a:hover, #nav li.rates a:active,
			#nav li.local a:hover, #nav li.local a:active
			{background-position: center center; }
			
			body#villa #nav li a.villa
			{background-position: top center;}
			
		
/* Sidebar */

#sidebar 	{width: 220px;
			float: left;
			padding-left: 20px;}
	
			#sidebar img {margin: 20px 0 40px -10px;}
			
			ul#links, ul.sidebar_extra {margin: 20px 0 20px 0;
			display: block;
			width: 220px;
			font-size: .8em;}
			
				#sidebar h1, ul#links h1  {color: #660000;
				font-size: 1.2em;
				margin-bottom: 10px;
				padding-left: 20px;
				}
					ul#links h1 a:hover, ul#links h1 a:active,
					ul.sidebar_extra h1 a:hover, ul.sidebar_extra a:active  {text-decoration:underline;}
					ul#links li a, ul.sidebar_extra li a {display: block;
				padding: 5px 0 5px 20px;
				border-bottom: #FF3300 solid 1px;
				color: #660000;
				font-size: 1.5em; }
				ul#links li a:hover, ul#links li a:active, ul.sidebar_extra li a:hover, ul.sidebar_extra li a:active {
					font-weight: bold;}
			
				ul#links .active {font-weight:bold;}


/* general page styling */

.top {text-align:right;
	padding: 20px 0;}

#page_content {margin-left: 250px;
		width: 620px;
		padding: 21px 40px 10px 10px;
		border-left: 1px solid #f1f1f1;}

#page_content a {color: #660000; font-weight:bold;}
#page_content a:hover, #page_content a:active {text-decoration:underline;}

#page_content img {margin: 10px;}

/* index page styling */


/* slideshow positioning */

#slideshow {height: 460px; width: 610px; margin-right: -30px;}

#bulletlist {width: 700px; overflow: auto; margin: 500px -30px 30px 10px;}

#bulletlist li {display: block;
		float: left;
		width: 320px;
		background: url(images/bullet.png) no-repeat;
		background-position: center left;
		padding: 9px 2px 10px 20px;
		font-size: 12px;
		color:#660000;
		font-weight: bold;}

#index #page_content p {
		line-height: 1.8em;
		text-align: justify;
		margin-bottom: 1.8em;}

		#index #page_content h2 {text-align: right;}
		#index #page_content #slideshow {float: right; margin: 0 0 10px 20px;}
		#index #page_content img {margin-left: 80px;}

/* footer */

#footer {position: absolute;
		height: 131px;
		width: 976px;
		margin: 0 auto;
		background: url(images/footer.png) no-repeat;}


ul#footer_links			{position: absolute; top: 40px; left: 60px; color: #fff; width: 400px; }
ul#footer_links li		{float: left; line-height: 2em;  }
ul#footer_links li a		{color: #fff; margin: 0 5px 0 5px;}
		
		ul#footer_links li a:hover, ul#footer_links li a:active {text-decoration: underline;}
		
	#footer p {position: absolute; top: 40px; right: 80px;
	text-align:right;
		color: #fff;
		font-size: 1em;
		line-height: 2em;}
		
		#footer p a {color: #CCCCCC;}
		#footer p a:hover, #footer p a:active {text-decoration:underline;}
	
	
/*about */
#about #nav li.about a	{background-position: top center; }
#about #page_content h2 {margin-top: 100px; color: #660000;}
#about #page_content h3 {margin-top: 10px; color: #660000; text-indent: 50px;}
#about #page_content h1 {font-size: 1.8em; 
	border-bottom: 1px solid #660000; 
	color: #660000;
	margin-bottom: 20px;}

/*attractions */

#attractions #nav li.local a {background-position: top center; }

#attractions #page_content h1 {font-size: 1.8em; 
	border-bottom: 1px solid #660000; 
	color: #660000;
	margin-bottom: 20px;}

#attractions #page_content h2.spacer {margin-top: 30px;} 

#attractionsinfo {margin-top: 30px;}
		#attractionsinfo li {position: relative; min-height: 25em; margin-bottom: 2px;} 
		#attractionsinfo li h2,  #attractionsinfo li h3, #attractionsinfo li p {position: absolute;}
		#attractionsinfo li h2 {top: 0; left: 270px; 
				color: #660000; font-size: 1.5em; 
				display:block; 
				width: 325px; 
				padding-top: 20px;}
		#attractionsinfo li h3 {top: 50px; left: 270px; width: 360px;}
		#attractionsinfo li p {top: 80px; left: 270px; 
				padding: 0 20px 5px 0px; 
				line-height: 1.5em;
				width: 360px;;
			}
		#attractionsinfo li img {float: left;}
		#attractionsinfo li h4 {position: absolute; top: 0px; 
				left: 270px; 
				font-weight: normal;}
		#attractionsinfo h5 {font-size: 103%; 
				margin-bottom: 10px;}


.first	{background: #ffffdf;} /* sets background colour as yellow */
.second {background: #fef8ed;} /* sets background color as orange */

/*booking page */

#booking #nav li.rates a {background-position: top center; }
#booking #page_content h1 {font-size: 1.8em; 
	border-bottom: 1px solid #660000; 
	color: #660000;
	margin-bottom: 20px;}

#booking #page_content h3, #booking #page_content #contact p  {margin: 20px;}
#booking #page_content #contact {margin: 20px 0 0 50px;}

/* rates page */

#rates #nav li.rates a {background-position: top center; }

#rates #page_content h1 {font-size: 1.8em; 
	border-bottom: 1px solid #660000; 
	color: #660000;
	margin-bottom: 20px;}

#rates #page_content #linkstable {margin: 20px 0 20px 50px; }
#rates #page_content #linkstable th, #rates #page_content #linkstable td {
		padding: 5px 20px 5px 20px;
		text-align: right;} 
#rates #page_content h2  {font-size: 1.2em; font-weight: normal;}
#rates #page_content h3 {font-size: 1.2em}
#rates #page_content p, #rates #page_content h3 {margin-left: 180px; margin-bottom: 10px;}	
#calendar {margin-top: 30px;}	

/*faq page */

#faq #nav li.villa a {background-position: top center; }

#faq #page_content h1 {font-size: 1.8em; 
	border-bottom: 1px solid #660000; 
	color: #660000;
	margin-bottom: 20px;}
	
#faqlist {display: block; margin: 20px 0 20px 0;  }
#faqlist li {padding: 5px 5px 5px 30px; background:url(images/bullet.gif) left center no-repeat;}
#faqlist li a {font-size: 1.2em;}

#faqanswers p {margin-right: 60px;}
#faqanswers h2 {padding-left: 0px;}

/* villa page */

#villa #nav li.villa a {background-position: top center; }
		#villa #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
		
		#villa #villainfo li {margin-bottom: 2px; min-height: 20em; padding: 10px;}
		#villa #villainfo li img {float: left;}
		#villa #main_content h2 {font-size: 1.1em; margin: 30px 0 5px 285px;}
		#villainfo p {margin-left: 285px;}

/* photos & video */

#photo #nav li.villa a {background-position: top center; }
		#photo #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
			
			#video, #slideshow {margin: 20px auto 40px auto;}
			#slideshow ul {display: block; width: 40%; margin: 30px auto 10px auto;}
			#slideshow ul li {display: inline;}
			#slideshow ul li a {display: block;
			float: left; 
			padding: 5px 10px 5px 10px; 
			background: #f1f1f1; 
			margin-left: 5px;
			border: 1px outset #f2f2f2;}
			#slideshow ul li a:hover, #slideshow ul li a:active {border: 1px inset #f2f2f2;
			text-decoration: none;}
			
			
/* gallery */


	#gallery li {display: block; float: left; height: 100px; width: 120px;}
	
	/* jQuery lightBox plugin - Gallery style */
	
	#gallery {
		background-color: #fff;
		margin: 30px 0 0 45px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; }
	
	#gallery li a:hover img.photoborder {
		border-left: 1px solid #FF3300;
		border-right: 1px solid #FF3300;
		border-top:	1px solid #FF3300;
		border-bottom: 2px solid #FF3300;
		}
		
	#gallery ul a:hover img {color: #444;}
	
			
/* location page */

#location #nav li.villa a {background-position: top center; }
		#location #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
			
			#location h2 {margin-bottom: 15px;}
			
			#distance {margin: 40px 0 90px 0px;} 
			#distance img {float: left;}
			#distance h3, #distance h4 {margin: 8px 5px 5px 100px;}

/* guest comments page */

#guest #nav li.villa a {background-position: top center;}
		#guest #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
			
			#letter {margin-left: 30px;}
			#letter li {margin-top: 10px;
			position: relative;
			background: url(images/letter.png) no-repeat;
			width: 500px;
			padding: 20px;
			height: 265px;}
			
			#letter li:first-child {margin-top: 30px;}
			
			#letter li h2, #letter li p, #letter li h3 {position: absolute;
			padding-right: 20px;} 
						
			#letter li h2 {top: 132px;
			left: 30px;
			font-size: 1.4em;
			font-weight: normal;
			line-height: 1.2em;}
			
			#letter li p {top: 179px; left: 30px;
			line-height: 1.2em;
			font-size: 1.2em;}
			
			#letter li h3 {top: 274px; left: 200px;
			font-size: 1.4em;
			color: #660000;
			font-style:italic;}

/* floorplan */


#floorplan #nav li.villa a {background-position: top center;}
#floorplan #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
			
/*links page */

#links #nav li.local a {background-position: top center;}
#links #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
			
			#linkslist h2 {margin: 20px 0 5px 0;}
			#linkslist li {position: relative; 
				padding: 5px; 
				margin-bottom: 2px; 
				text-indent: 70px;}
			#linkslist h3 {}
			#linkslist li a {position: absolute; top: 5px; left: 330px;}


/*other page */

#other #nav li.local a {background-position: top center;}
#other #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
			
			#other #attractionsinfo h3 {margin-bottom: 5px;}
			#other #attractionsinfo img {margin-top: 20px;}
			
/* disney pages */
#disney #nav li.local a {background-position: top center;}
#disney #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
			
			#disney #attractionsinfo li {min-height: 500px;}
			#disney #attractionsinfo li img {margin-top: 50px;}

/* weather */

#weather #nav li.local a {background-position: top center;}
#weather #page_content h1 {font-size: 1.8em; 
			border-bottom: 1px solid #660000; 
			margin-bottom: 20px;}
			
/*youtube page */

#youtube #nav li.local a {background-position: top center;}

	#youtube #videoslist {width: 400px; margin: 0 auto;}
	#youtube #videoslist li {padding: 20px 0 10px 0;}
			#youtube #videoslist li p {width: 400px; text-align: center;}

/*sitemap*/

#sitemap {
    background:transparent url(images/pixel_image.gif) repeat-y 15px 0;
	margin-left: 50px;
    }

#sitemap li {font-size: 12px;
    margin:15px 0 20px;
    padding:0 0 0 10px;
}

#sitemap li a {
    background:white;
    color:#660000;
    display:block;
    padding:3px;
}

#sitemap a.title {margin-top: 20px; font-size: 14px;}

#sitemap li a:hover {text-decoration: none; color: #FF0000; }

#sitemap li ul li {
    background:transparent url(images/pixel_image.gif) repeat-x 0 8px;
    font-size:13px;
    margin:4px 0 4px 5px;
    padding:0 0 0 50px;
}

#sitemap li ul li a {
    padding:0 0 0 3px;
}

#sitemap li ul li ul {
    background:transparent url(images/pixel_image.gif) repeat-y 15px 0;
    margin-bottom:10px;
}

#sitemap li ul li ul li {
    margin-left:16px;
    padding-left:10px;
}


/* weather */

#temptable {width: 70%;
	margin: 20px auto 30px auto;
	padding-left: 35px;
}
	
	
	#temptable td, #temptable th {height: 20px; margin: 1px;
		padding: 5px;
	}
	#temptable th {color: #660000; font-weight: bold; font-size: 105%;}
	#temptable th.title {background: #ff0000; color:#fff; }
	#temptable td {text-align: center;}
#forecast {width: 70%;
	margin: 20px auto 20px auto;}