/*** POINT COTTAGES -   B E W A R E   the   Z - I N D E X ing... it's a killer ***/

body, html, table, tr, th, td, p, br, div, span, h1, h2, h3, h4, h5, h6, form, img  { border: none; margin: 0; padding: 0; }

body {
	font-family:  arial, verdana, "Bitstream Vera Sans", geneva, helvetica, helve, sans-serif;
	font-size: 16px;
	background: #d7e5f0 url(/images/bg-top.gif) repeat-x left top;
	color: #000;
	z-index: 101;
}

	* html body { font-size: medium; }

#skiptomain { display: none; }

a:hover, a:active { color: #c00; }
.inline, form { display:inline; }
.breaker { clear: both; }
.lbreaker { clear: left; }
.rbreaker { clear: right; }

p { margin: 10px 0 0 0; }
p.fivespace { margin: 5px 0 0 0; }
p.tenspace { margin: 10px 0 0 0; }
p.fifteenspace { margin: 15px 0 0 0; }
p.twentyspace { margin: 20px 0 0 0; }

#wrapper {
	background: #fff;
	margin: 30px auto 0 auto;
	text-align: left;
	width: 880px;
	position: relative;
	z-index: 102;
}

	#header-logo {
		position: absolute;
		top: 0;
		left: -12px;
		width: 310px;
		height: 110px;

		background: url(/images/logo-trans.png) no-repeat left top;

		* background: none;
		* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/logo-trans.png', sizingMethod='scale');

		cursor: pointer;
		z-index: 104;
	}

#header {
	width: 880px;
	height: 78px;
	font-size: 0.7em;
	z-index: 103;

		text-align: right;
		padding-top: 30px;
		height: 48px;
}

	#header ul {
		width: 510px;
		height: 30px;
		list-style: none;
		margin: 35px 0 13px 370px;
		padding: 0;
	}

		#header ul li {
			background: #ffffff url(/images/header-ul-li.gif) no-repeat left top;
			display: inline;
			float: left;
			height: 30px;
			line-height: 30px;
			padding: 0 10px;
			text-transform: uppercase;
		}

			#header ul li.hna { background: none; }

			#header ul li a:link, #header ul li a:visited { color: #404519; text-decoration: none; }
			#header ul li a:hover, #header ul li a:active { color: #59819f; }

			#header ul li.active a:link, #header ul li.active a:visited { font-weight: bold; color: #404519; text-decoration: underline; }
			#header ul li.active a:hover, #header ul li.active a:active { color: #c00; }

/* home page */
#maincontent-hp {
	width: 880px;
	min-height: 485px;
	padding-bottom: 97px;
	/* position: relative; */ /* breaks the page, fixes nothing */
	z-index: 102;
}

	#booking-absolute {
		width: 241px;
		position: absolute;
		top: 0; right: 0;
		z-index: 105;
	}

	#booking-hp-top {
		width: 241px;
		height: 20px;
		position: absolute;
		top: 78px;
		right: 0;
		background: transparent url(/images/bg-booking-hp-top.png) no-repeat left top;
	}

		* html #booking-hp-top {
			background: none;
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/bg-booking-hp-top.png', sizingMethod='crop');
		}

	#booking-hp {
		width: 200px;
		height: 550px;
		background: transparent url(/images/bg-booking-hp.gif) no-repeat left top;
		color: #5e4f42;
		font-size: 0.7em;
		line-height: 1.6em;
		padding: 5px 21px 7px 20px;
		position: absolute;
		top: 98px;
		right: 0;
		z-index: 121;
	}

		#booking-hp-inner {
			position: relative;
			z-index: 122;
		}

			.booking-underlined {
				padding-bottom: 9px;
				border-bottom: 1px solid #fff;
				margin-bottom: 10px;
				z-index: 123;
			}

				.booking-underlined form {
					z-index: 124;
				}

			#booking-hp h2 {
				color: #395366;
				font-size: 1.3em;
			}

				#booking-hp h2.margined {
					margin-bottom: 25px;
				}

			#booking-hp p {
				clear: both;
			}

			#booking-hp label, #booking-hp span.false-label {
				margin: 5px auto;
			}

				#booking-hp label.floater {
					margin: 5px 7px 5px auto;
					float: left;
					height: 22px;
					line-height: 22px;
				}

			#booking-hp select {
				margin: 5px 10px 15px 0;
				float: left;
			}

				#book-adults, #book-children {
					width: 40px;
				}

			#icon-calendar {
				float: left;
				margin-top: 8px;
			}

			#book-search-btn {
				margin: 0 0 0 125px;
				z-index: 125;
			}

		#booking-hp a:link, #booking-hp a:visited { color: #5e4f42; text-decoration: underline; }
		#booking-hp a:hover, #booking-hp a:active { color: #59819f; }

/* other pages */
#maincontent {
	width: 880px;
}

	#booking-hp-short {
		width: 200px;
		height: 267px;
		background: transparent url(/images/bg-booking-hp-short.gif) no-repeat left bottom;
		color: #5e4f42;
		font-size: 0.7em;
		line-height: 1.6em;
		padding: 5px 21px 7px 20px;
		position: absolute;
		top: 98px;
		right: 0;
		z-index: 121;
	}

		#booking-hp-short-inner {
			position: relative;
			z-index: 122;
		}

			#booking-hp-short-inner h2 {
				color: #395366;
				font-size: 1.3em;
			}

				#booking-hp-short-inner h2.margined {
					margin-bottom: 20px;
				}

			#booking-hp-short-inner p {
				clear: both;
				margin: 5px 0 0 0;
			}

			#booking-hp-short label, #booking-hp-short span.false-label {
				margin: 5px auto;
			}

				#booking-hp-short label.floater {
					margin: 5px 7px 5px auto;
					float: left;
					height: 22px;
					line-height: 22px;
				}

			#booking-hp-short select {
				margin: 5px 10px 15px 0;
				float: left;
			}

	#pics {
		width: 670px;
		height: 299px;
		overflow: hidden;
	}

		#pic-select-bg {
			width: 110px;
			height: 16px;
			background-color: #fff;
				opacity: .35;
				filter: alpha(opacity=35);
			margin: 0;
			padding: 5px 0;
			position: absolute;
			top: 346px; left: 524px;
			z-index: 111;
		}

			#pic-select {
				width: 105px;
				height: 16px;
				list-style-type: none;
				margin: 5px 0 5px 5px;
				padding: 0;
				position: absolute;
				top: 346px; left: 524px;
				z-index: 112;
			}

				#pic-select a:link, #pic-select a:visited {
					width: 16px;
					height: 16px;
					background-color: #fff;
					color: #000;
					display: block;
					float: left;
					font-size: 0.8em;
					font-weight: bold;
					line-height: 16px;
					margin-right: 5px;
					text-align: center;
					text-decoration: none;
					z-index: 113;
				}

				#pic-select a:hover, #pic-select a:active { color: #59819f; }

	#hp-cont {
		width: 600px;
		font-size: 0.75em;
		line-height: 1.8em;
		padding: 20px 15px;
	}

		#hp-cont h1 {
			font-size: 1.4em;
			color: #395366;
		}

	#cont {
		width: 850px;
		font-size: 0.75em;
		line-height: 1.8em;
		padding: 20px 15px;
	}
	
		#cont p { margin: 0 0 10px 0; }

		#cont h1 {
			font-size: 1.4em;
			color: #395366;
		}

		#cont h2 {
			font-size: 1.2em;
			color: #395366;
		}

		#cont h3 {
			border-bottom: 1px solid #CCCCCC;
			color: #395366;
			font-size: 1.4em;
			margin-top: 20px;
		}

			#cont a:link, #cont a:visited { color: #395366; }
			#cont a:hover, #cont a:active { color: #000; }

		.cottage {
			clear: both;
			width: 850px;
			padding-bottom: 20px;
		}

			.cottage-lft {
				width: 220px;
				float: left;
				margin-right: 10px;
			}

			.cottage-rgt {
				width: 620px;
				float: right;
				line-height: 1.2em;
			}
			
			.cottage-rgt h2 { margin-bottom: 10px; }

			.cottage h2 a:link, .cottage h2 a:visited {
				color: #395366;
				text-decoration: none;
			}

			.cottage h2 a:hover {
				color: #395366;
				text-decoration: underline;
			}

	#cont-cott {
		float: left;
		width: 600px;
		font-size: 0.75em;
		line-height: 1.8em;
		padding: 20px 15px;
	}

		#cont-cott h1 {
			font-size: 1.4em;
			color: #395366;
		}

		#cont-cott h3 {
			border-bottom:1px solid #CCCCCC;
			color:#395366;
			font-size:1.4em;
			margin-top:20px;
		}

		#quotes {
			background: #EEF0EB url(/images/comments.gif) no-repeat 0 40px;
			min-height: 65px;
			padding: 10px;
		}

			#quotes h3 {
				margin-top: 0px;
				border-bottom: 0px;
			}

			#quotes p {
				padding: 0 60px;
			}

	#pics-cont {
		float: right;
		width: 221px;
		padding: 5px 10px;
		background: #dcd3bc;
	}

		#pics-cont img {
			padding: 5px 0;
		}

#footer {
	clear: both;
	width: 840px;
	height: 32px;
	background: transparent url(/images/bg-footer.gif) no-repeat left top;
	color: #fff;
	font-size: 0.6em;
	line-height: 16px;
	padding: 4px 20px;
	position: relative;
	text-align: right;
}

	#footer a:link, #footer a:visited { color: #fff; text-decoration: underline; }
	#footer a:hover, #footer a:active { color: #000; }

	#footer-features {
		width: 621px;
		height: 113px;
		position: absolute;
		top: -97px;
		left: 8px;
	}

		#footer-feat1 {
			width: 201px;
			height: 113px;
			float: left;
			margin: 0 9px 0 0;
		}

		#footer-feat2 {
			width: 201px;
			height: 113px;
			float: left;
			margin: 0 9px 0 0;
		}

		#footer-feat3 {
			width: 201px;
			height: 113px;
			float: left;
		}

/****************
 ATTRACTION LIST
****************/

div.attraction {
	float: left;
	width: 425px;
	margin: 10px 0;
}

	div.attraction img {
		float: left;
		width: 150px;
		height: 100px;
		margin-right: 15px;
	}

	div.attractiontext {
		float: left;
		width: 245px;
		padding: 5px 15px 0 0;
	}

		div.attractiontext p {
			font-size: 11px;
			margin: 0;
		}

			div.attractiontext a:link, div.attractiontext a:visited { font-size: 12px; }

/**************************
 AVAILABILITY CALENDAR
**************************/

div.nightselector {
	position: absolute;
	top: 56px;
	left: 21px;
	width: 370px;
	height: 86px;
	background: #C5CBCE;
	border: 1px solid #3E341E;
	filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;
	text-align: center;
	padding: 30px 5px;
	font-family: verdana, arial;
	font-size: 11px;
}

	div.nightselector select { font-size: 11px; width: 235px;}

	div.nightselector input { width: 80px;border: 1px solid #194F81; background: #f4f4f4; margin: 0 5px; }

div.calendarcontainer {
	width: 390px;
	margin: 5px 0px 5px 0px;
	font-family: verdana, arial;
	position: relative;
	font-size: 0.85em;
}

table.availabilitycalendar {
	border-collapse: collapse;
}

	table.availabilitycalendar tr { }

		table.availabilitycalendar tr th {
			border: 1px solid #3E341E;
			background: #3E341E;
			color: #fff;
			text-align: center;
		}

			table.availabilitycalendar tr th.shortbreaks {
				background: #D6CAAF;
				color: #60512F;
			}

			table.availabilitycalendar tr th.minnights {
				background: #BFE37F;
				color: #215A3E;
				padding: 0px 3px;
			}

		table.availabilitycalendar tr td {
			border: 1px solid #3E341E;
			text-align: center;
			height: 30px;
			width: 40px;
			line-height: 30px;
		}

			table.availabilitycalendar tr td.shortbreaks {
				width: 90px;
				background: #D6CAAF;
				color: #60512F;
			}

			table.availabilitycalendar tr td.minnights {
				width: 60px;
				background: #DDEEBB;
				color: #215A3E;
			}

			table.availabilitycalendar tr td a:link, table.availabilitycalendar tr td a:visited { color: #455E70; font-weight: bold; }
			table.availabilitycalendar tr td a:hover {}

		table.availabilitycalendar span { display: block; height: 30px; }

		span.dateunavail { color: #bbb; }

		span.booked { background: #455E70; color: #fff; }

		span.highlighted { background: #FF0; }

		span.bookme { background: #8FAEF1; }
		span.bookme2 { background: #C1D3FA; }
			span.bookme a:link, span.bookme a:visited { color: #fff; }

		span.available { background: #fff; }

/*****************
 AVAILABILITY CONFIRMATION
*****************/

table.additional {
	border-collapse: collapse;
}

	table.additional th {
		background: #A58C51;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		padding: 2px 5px;
	}

	table.additional td {
		background: #EFEBE0;
		border-bottom: 1px solid #D1C4A6;
		padding: 5px;
		font-size: 13px;
	}

	input.update {
		border: 0px;
		background: none;
		font-family: arial;
		font-size: 11px;
	}

#bookform p { margin: 7px 0; }
#bookform label { float: left; width: 150px; padding-top: 2px; font-weight: bold; font-size: 12px; }
	#bookform label span { color: #c00; font-weight: bold; float: right; width: 10px; font-size: 13px; }
#bookform input, #bookform select { border: 1px solid #999; }
#bookform input.submit { border: 1px solid #314450; background: #9CA6AD; color: #fff; font-weight: bold; font-size: 12px; font-family: arial; }

/*************
 BOOKING STEP
*************/

#bookingstatus {
	clear: both;
	float: left;
	width: 850px;
	height: 20px;
	border-bottom: 2px solid #ccc;
	margin-bottom: 30px;
	position: relative;
	margin-top: 10px;
}

	#step1, #step2, #step3, #step4 {
		position: absolute;
		top: 0px;
		width: 38px;
		height: 38px;
		border: 2px solid #395366;
		background: #fff;
		text-align: center;
		line-height: 38px;
		font-size: 26px;
		color: #395366;
	}

	#step1 { left: 20px; }
	#step2 { left: 120px; }
	#step3 { left: 220px; }
	#step4 { left: 320px; }

	#step1.grey, #step2.grey, #step3.grey, #step4.grey {
		border: 2px solid #ccc;
		color: #ccc;
	}
	
/*****************
 MAPS
*****************/

#gmap {
    width: 450px;
	height: 350px;
	border: 1px solid #999;
}

#gdirections {
    width: 440px;
    padding: 5px;
    border: 1px solid #AAA;
    border-top: 0px;
}

#gdirections #gmap-from {
    margin: 5px 5px 7px 0px;
    height: 18px;
    font-size: 14px;
}

#gdirections #gmap-go {
    margin: 0px 5px 2px 0px;
    height: 26px;
}

#gdirections #gmap-panel td {
    font-size: 0.9em;
}