/* General */

body {
  margin: 0px 0px 2px 0px;
  padding: 0px;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  background-color: #FFF9D4;
  color: #5C5C5C;
  text-align: center;
}
a {color: #5C5C5C;}
a:hover {text-decoration: none;}

#wrapper {
	font-size: 12px;
	width: 765px;
	border: 3px solid white;
	margin-top: 14px;
	margin-bottom: 2px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	background-image: url('images/leftbg.gif');
	background-repeat: repeat-y;
	text-align: left;
	position: relative
}
.small {font-size: 85%;}
.rightcolumn {width: 236px; float: right; font-size: 80%; text-align: center;}

/* Left Column */

#nav {width: 161px;position: absolute; top: 0px; left: 0px;}
#nav ul {margin: 30px 10px; padding: 0px; list-style: none;}
#nav ul li {margin: 0px; padding: 0px; display: inline;}
#nav ul li a {
	padding: 4px 20px 4px 10px;
	border: 1px solid #56A8FC;
	color: white;
	font-weight: bold;
	font-size: 11px;	
	background-color: #3792E3;
	text-decoration: none;
	display: block;
	margin-bottom: 3px;
}
#nav ul li a:hover {background-color: #FFF39E; color: #0073CC; border: 1px solid #FFF9D4;}

#scroller {
	border: 1px solid #FFDE00;
	position: absolute;
	left: 10px;
	top: 380px;
	background-color: #FFF9D4;
	width: 139px;
}
#scroller div {padding: 0px 6px 6px 6px; font-size: 10px;}
#scroller a {color: #0073CC;}
.red {color: red;}

/* Main Text Area */

#maintextarea {margin-left: 164px; min-height: 100%;}
.maintext {
	padding: 0px 15px 0px 11px;
}
#index .maintext {padding-right: 70px;}
h1 {
	color: #0073CC; 
	font-size: 140%; 
	padding: 0px; 
	margin: 10px 0px 0px 0px; 
	font-weight: normal;
	letter-spacing: normal;
}
h2 {
	font-size: 105%;
	margin-top: 5px;
	padding-top: 0px;
	margin-bottom: 5px;
	padding-bottom: 0px;
}
h2 a, h2 b {color: #0073CC; font-size: 130%; font-weight: normal;}
h2 a:hover {text-decoration: none;}

.yellowbox {
	background-color: #FFF9D4; 
	padding: 4px; 
	font-size: 11px;
	border-bottom: 1px dashed #5C5C5C;
	border-top: 1px dashed #5C5C5C;
}
.yellowbox ul {
	margin: 0px 10px; 
	list-style: none; 
	padding: 0px; 
	text-align: left;
	font-weight: bold; 
	font-size:11px;
}
.whitebox {padding: 4px;font-size: 11px;}
.whitebox h2 b, .yellowbox h2 b {font-weight: bold; font-size: 11px;}
.thumb {float: left; margin-right: 6px; border: 1px solid #5C5C5C;}

.box {float: right; border: 1px solid #0676CD;}

.maintext a {color: #0073CC; text-decoration: underline;}
.maintext a:hover {text-decoration: none;}
.floatright {float: right; margin-left: 10px;}
.floatleft {float: left; margin-right: 10px;}

a.button {
	border: 1px solid #F4DE43; 
	background-color: #FFDF00;
	text-decoration: none;
	font-size: 11px;
	font-weight: bold;
	color: black;
	padding: 2px 3px;
}

a.button:hover {background-color: #FFF39E; color: #0073CC; border: 1px solid #FFF9D4;}
a.enquiry {border: 1px solid #56A8FC;background-color: #3792E3;color: white;}

p {font-size:12px;}

.tariffs {width: 473px;}
.tariffs td {padding: 2px 4px;}
.tariffs th {background-color: #FFDE00; padding: 4px 4px; text-align: left;}
.yellowrow {background-color: #FFF9D4;}
table .small {border-top: 1px dashed #5C5C5C;}

#tariffspecials {border: 1px solid #FFDE00; background-color: #FFF9D4; padding: 10px; margin: 0px 53px 10px 53px;}
#bigspecials {border: 1px solid #FFDE00; background-color: #FFF9D4; padding: 10px; margin-bottom: 10px;}
#tariffspecials h2, #bigspecials h2 {
	color: #0073CC; 
	font-weight: bold; 
	font-size: 120%; 
	text-align: center; 
	margin-top: 0px;
}
.stars {
	color: #0073CC;
	font-family: verdana, sans-serif; 
	font-size: 11px; 
	letter-spacing: 0.1em; 
	font-weight: normal;
	margin-bottom: 4px;
}
#availability {position: absolute; top: 165px;}

/* Pictures */

#pictures {
	position: relative;
	height: 282px;
	font-size: 85%;
	font-weight: bold;
}
#defaultImage {position: absolute;top: 15px;right: 0px;}

.bigpicture {
	position: absolute;
	top: 15px;
	right: 0px;
	z-index: 0;
}
div#pics {position: absolute; z-index: 2;top: 15px; left: 0px;}
div#morepics {position: absolute; z-index: 0;top: 15px; left: 0px;}

#thumb2, #thumb5 {
	position: absolute;
	top: 0px;
	left: 0px;
}
#thumb3, #thumb6 {
	position: absolute;
	top: 90px;
	left: 0px;
}
#thumb4, #thumb7 {
	position: absolute;
	top: 180px;
	left: 0px;
}

/* Maps */

#maps {width: 400px; float: right; position: relative; text-align: right;}
#defaultmap {border: 1px solid #0073CC;}
#palmmap {position: absolute; z-index: -1; top: 10px; left: 10px;}
#cottagemap {position: absolute; z-index: -1; top: 201px; left: 10px;}
#truemansmap {position: absolute; z-index: -1; top: 201px; right: 35px;}
#beachmap {position: absolute; z-index: -1; top: 20px; right: 23px;}
#hanamimap {position: absolute; z-index: -1; top: 160px; right: 10px;}
#grovemap {position: absolute; z-index: -1; top: 201px; right: 52px;}
#spamap {position: absolute; z-index: -1; top: 195px; right: 65px;}
.largemap {position: absolute; z-index: -1; top: 0px; left: 0px;border: 1px solid #0073CC;display: block;}

/* Things to Do */

#things {position: relative; background-color: white;}
#things table {position: absolute; top: 0px; left: 0px; visibility: hidden; width: 585px;}
#things td {vertical-align: top;}
div#things table#family {visibility: visible;}


/* Footer */

#footer {
	background-color: #FFDE00;
	padding: 3px 10px 3px 11px;
	font-size: 0.85em;
}
#footer a {color: #5C5C5C;}
h3 {font-size: 1em; font-weight: normal;display: inline;}
h3 a {text-decoration: none;}
h3 a:hover {text-decoration: underline;}


table.locations td {vertical-align:top; padding: 6px 0px;}