/* CSS Document */
/* Body */
* html a:hover {visibility:visible}
html, body, #container {width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0;}
html>body #container {height: auto;}
html a:hover {visibility: visible;}
html {}
body {
background: #FFFFFF url(/images/bg.jpg) no-repeat center top;
color: #666666;
font-family: arial, MS Gothic;
font-size: 12px;
}
#container {position: relative;}
/* Swatches */
.swatch-black {color: #2B2931}
.swatch-darkgrey {color: #70797B}
.swatch-lime {color: #BED73B}
.swatch-green {color: #74B74A}
/* Backgrounds */
#tattoo-left, #tattoo-right { position: absolute; top: 0; }
#tattoo-left { left: 0; background: none; width: 663px; height: 796px; }
#tattoo-right { right: 0; background: none; width: 212px; height: 471px; }
#wrap {position: relative; margin: 0 auto 0 auto; width: 956px; }
#white {float:left; width: 888px; padding: 8px 34px 8px 34px; background:#FFFFFF url(/images/wrap.jpg) no-repeat;}
/* Header Extras */
#header {position: relative; margin: 0 auto 0 auto; width: 956px; height: 121px; }
#header-left {float: left; margin: 47px 0 0 60px;}
#header-right {float: right; margin: 10px 60px 10px 0;}
/* Sidebar */
#sidebar {position: absolute; width: 244px; left: 701px; z-index: 3; background: none; }
#logo {width: 244px; height: 40px; background: none; }
#menu-wrap {float: left; width: 244px; }
#menu {float: left; width: 244px; color: #FFFFFF; }
#menu a {height: 112px; width: 244px; display: block;}
#menu a:hover img {visibility:hidden;}
.menu1 {margin: 0 0 6px 0; height: 112px; width: 244px; background: url(/images/menu1-hover.jpg); }
.menu2 {margin: 0 0 6px 0; height: 112px; width: 244px; background: url(/images/menu2-hover.jpg); }
.menu3 {margin: 0 0 0 0; height: 112px; width: 244px; background: url(/images/menu3-hover.jpg); }
#submenu {float: left; width: 244px; height: 348px; margin: 0; font-family: arial, MS Gothic;}
.submenu1 {margin: 0; width: 204px; background: #74B74A url(/images/menu-gradient.jpg); padding: 20px; }
#submenu a {color: #333333;}
#submenu h1 {font-family: arial, MS Gothic;margin: 10px 0 6px 0px; font-size: 20px; color: #FFFFFF; font-weight: normal; }
#submenu h2 {font-family: arial, MS Gothic;margin: 0 0 10px 0px; font-family: arial, MS Gothic; font-size: 15px; font-weight: bold; color: #FFFFFF; }
#submenu ul {font-family: arial, MS Gothic;margin: 20px 0 0 20px; padding: 0; width: 204px; }
#submenu li {font-family: arial, MS Gothic;padding: 0 0 0 19px; margin: 0 0 15px 0; list-style:none; background: url(/images/icon-arrow.gif) no-repeat 0px 5px; border-bottom: 1px dotted #CCCCCC; }
/* Modules */
.module {float: left; width: 244px; margin: 6px 0 0 0; background: url(/images/module-bg.jpg) no-repeat ;}
.module p { line-height: 20px; margin-bottom: 15px;}
.module-inside {float: left; padding: 20px; width: 204px;}
.field-newsletter {width: 196px; margin: 0 0 6px 0;}
/* Basics */
h1 {margin: 0; padding: 0; color: #333333; font-family: georgia, MS Gothic; font-weight: bold;}
h2 {margin: 0; padding: 0; color: #666666; font-family: georgia, MS Gothic; font-weight: bold;}
h3 {margin: 0; padding: 0; color: #666666; font-family: georgia, MS Gothic; font-weight: bold;}
p {margin: 0; padding: 0; color: #666666; font-family: arial, MS Gothic; font-weight: normal;}
img {float: left; margin: 0; border: none;}
a {color: #74B74A; text-decoration: none;}
a:hover {color: #74B74A; text-decoration: underline;}
/*Content */
#hero {float: left; width: 661px; height: 348px; z-index: 1;}
#map {position: absolute; width: 661px; height: 348px; z-index: 2;}
#flash {position: absolute; width: 661px; height: 348px; z-index: 3;}
#map iframe {position: absolute; width: 661px; height: 348px; z-index: 2; border:0;}
#breadcrumb {float: left; padding: 8px; background: #FBFBFB; border: 1px dashed #CCCCCC; width: 618px; margin: 0 0 10px 0;}
#content-header {float: left; width: 636px; margin: 0 0 10px 0;}
#content #content-header h1 {margin: 6px 0 16px 0; padding: 0 0 10px 0; font-family: arial, MS Gothic; font-size: 22px; color: #333333; font-weight: normal; border-bottom: 1px solid #CCCCCC;}
#content #content-header h2 {margin: 0 0 10px 0; padding: 0; font-family: arial, MS Gothic; font-size: 14px; font-weight: normal; line-height: 24px;}
#content {float: left; width: 900px; background: #FFFFFF; padding: 18px 10px 10px 10px; z-index: 1; }
#content h1 {font-family: arial, MS Gothic; margin: 0 0 6px 0; font-size: 18px; font-weight: normal; border-bottom: none;}
#content h2 {font-family: arial, MS Gothic; margin: 0 0 10px 0; font-size: 14px;}
#content h3 {font-family: arial, MS Gothic; margin: 0 0 10px 0; font-size: 12px;}
#content p {font-family: arial, MS Gothic; margin: 0 0 15px 0; font-size: 12px; line-height: 20px;}
#content ul {margin: 0 0 15px 0; padding: 0;}
#content li {list-style: none; background: url(/images/icon-plus.gif) no-repeat 0px 5px; margin: 0; padding: 0 0 0 19px; font-size: 12px; line-height: 18px;}
.content-300 {
float: left;
width: 308px;
margin: 0 20px 0 0;
text-align: justify;
}
.content-600 {float: left; width: 636px; margin: 0 0 15px 0;}
.content-900 {float: left; width: 868px; margin: 0 0 15px 0;}
.content-930 {float: left; width: 900px; margin: 0 0 15px 0;}
.post-300 {float: left; width: 308px; background-color: #FBFBFB; border-bottom: 1px #CCCCCC dashed; padding: 5px 0 0 0; margin: 0 0 5px 0;}
.post-300 ul {float: left; margin: 0; padding: 0;}
.post-600 {float: left; width: 636px; background: none; border-bottom: none; padding: 5px 0 0 0; margin: 0 0 25px 0; }
.special {float: left; width: 308px; background-color: #FBFBFB; border-bottom: 1px #CCCCCC dashed; margin: 0 0 20px 0;}
.special-600 {float: left; width: 636px; background-color: #FBFBFB; border-bottom: 1px #CCCCCC dashed; margin: 0 0 10px 0;}
.special-600 ul {float: left; width: 370px; margin: 0; padding: 0;}
.special-more { font-size: 11px; float: left; margin: 0 5px 0 5px;}
ul.inline {float: left; margin: 0 0 15px 0; padding: 0;}
#content ul.inline li {float: left; list-style:none; background: url(/images/icon-arrow.gif) no-repeat 0px 5px; margin: 0 20px 0 0; padding: 0 0 0 14px; font-size: 12px; line-height: 18px;}
.gallery {
margin: 0 0 12px 0;
float: left;
}
.gallery img {
float: left;
border: #EBEBEB solid 1px;
}
a.overflow166x125 {
width: 150px;
height: 110px;
overflow: hidden;
float: left;
}
a.overflow80x60 {
width: 84px;
height: 63px;
float: left;
margin: 0 18px 18px 0;
}
a.overflow50x50 {width: 50px; height: 50px; overflow: hidden; float: left; margin: 0 11px 10px 0; border: #999999 double 4px; }
.gallery-video {}
.gallery-video img {float: left; margin: 0 11px 10px 0; width: 272px; height: 210px;}
/* Footer */
#footer {clear: both; float: left; background: #FFFFFF url(/images/footer-bg.jpg) no-repeat top; padding: 40px 30px 10px 30px; height: 140px; width: 896px; margin: 0 0 40px 0;}
.footer-left {float: left;}
.footer-right {float: right; text-align: right;}
#footer h1 {margin: 0 0 6px 0; font-size: 20px; font-weight: normal; border-bottom: #CCCCCC 3px solid;}
#footer ul {margin: 0 0 10px 0; padding: 0;}
#footer li {display: inline; margin: 0 5px 0 5px; padding: 0; font-size: 12px;}
#footer h2 {margin: 10px 0 6px 0; font-size: 14px;}
#footer p {margin: 0 0 10px 0;}
/* Extras */
.border {float: left; margin: 0 16px 6px 0; border: #EBEBEB solid 1px; background:#FBFBFB; padding: 9px;}
.line-600 {float: left; width: 636px; clear: both; border-bottom: #CCCCCC solid 1px; margin: 20px 0 20px 0; }
.line {clear: both; border-bottom: #CCCCCC solid 1px; }
.nextpage {float: left; margin: 0 0 0 137px;}
#switch {position: absolute; height: 48px; width: 210px; left: 6px; top: 346px; z-index: 6;}
.callustoday { font-size: 14px; font-weight: bold;}
.minimap {float: right;}
.minimap-small {float: right; width: 30px; margin: 0 5px 0 0;}
.flag {float: right; width: 30px; height: 21px;}
.small {clear: left; font-size: 10px;}
.caption {float: left; width: 230px; margin: 0 10px 10px 0;font-size: 11px;}
.viewmore {float: right; margin: 6px 0 0 0;}
.clear {clear: left; margin: 0 0 20px 0;}
.left {float: left;}
.right {float: right;}
.price {color: #FF6600;}
.quote { font-family: Georgia, MS Gothic, Times New Roman, Times, serif; font-size: 18px; color:#666666; line-height: 24px; margin: 10px 0 10px 0;}
.blog-date { font-size: 10px; color:#333333; margin: -10px 0 10px 0;}
.filter {float: right; 180px; padding: 4px; margin: 10px 0 0 0;}
.filter input {color: #FF0000;}
.commenticon {margin: 3px 5px 0 0; }
.comment {background-color: #FBFBFB; border-bottom: 1px #CCCCCC dashed; margin: 0 0 10px 0;}
/* Booking Engine */
#content-booking.content-300 {float: left; width: 308px; margin: 0 20px 0 0;}
#content-booking .content-600 {float: left; width: 620px; margin: 0 0 15px 0;}
#content-booking #content-header {float: left; width: 620px; margin: 0 0 10px 0;}
#content-booking {float: left; width: 621px; background: #FFFFFF; padding: 18px 20px 20px 20px; z-index: 1; border: 1px #333333 dotted; }
#content-booking h1 {font-family: arial, MS Gothic; margin: 0 0 6px 0; font-size: 18px; font-weight: normal; border-bottom: none;}
#content-booking h2 {font-family: arial, MS Gothic; margin: 0 0 10px 0; font-size: 14px;}
#content-booking h3 {font-family: arial, MS Gothic; margin: 0 0 10px 0; font-size: 12px;}
#content-booking p {font-family: arial, MS Gothic; margin: 0 0 15px 0; font-size: 12px; line-height: 20px;}
#content-booking ul {margin: 0 0 15px 0; padding: 0;}
#content-booking li {list-style: none; background: url(/images/icon-plus.gif) no-repeat 0px 5px; margin: 0; padding: 0 0 0 19px; font-size: 12px; line-height: 18px;}
#content-booking #content-header h1 {margin: 6px 0 16px 0; padding: 0 0 10px 0; font-family: arial, MS Gothic; font-size: 22px; color: #333333; font-weight: normal; border-bottom: 1px solid #CCCCCC;}
#content-booking #content-header h2 {margin: 0 0 10px 0; padding: 0; font-family: arial, MS Gothic; font-size: 14px; font-weight: normal; line-height: 24px;}
#sidebar-booking {position: absolute; width: 244px; left: 701px; z-index: 3; background: none; }
#sidebar-booking a {color: #333333;}
#sidebar-booking h1 {font-family: arial, MS Gothic;margin: 10px 0 6px 0px; font-size: 20px; color: #FFFFFF; font-weight: normal; }
#sidebar-booking h2 {font-family: arial, MS Gothic;margin: 0 0 10px 0px; font-family: arial, MS Gothic; font-size: 15px; font-weight: bold; color: #FFFFFF; }
#sidebar-booking ul {font-family: arial, MS Gothic;margin: 20px 0 0 20px; padding: 0; width: 204px; }
#sidebar-booking li {font-family: arial, MS Gothic;padding: 0 0 0 19px; margin: 0 0 15px 0; list-style:none; background: url(/images/icon-arrow.gif) no-repeat 0px 5px; border-bottom: 1px dotted #CCCCCC; }
/* Booking Form */
.bookingform {float: left; width: 620px;}
.bookingform .required { color: #FF9900;}
.bookingsteps {float: left; width: 199px; padding: 10px 22px 10px 22px; color:#333333;}
.groupEnquiryTextBox {
float: left;
width: 350px;
color:#333333;
font-size: 14px;
height: 22px;
}
.groupEnquirySmallTextBox {
float: left;
width: 175px;
color:#333333;
font-size: 14px;
height: 22px;
}
.groupEnquiryLargeTextBox {
float: left;
width: 350px;
color:#333333;
font-size: 18px;
height: 111px;
}
#menu-wrap .bookingsteps h1 { color:#333333; margin-bottom: 20px;}
#menu-wrap .bookingsteps h2 { color:#666666; margin-bottom: 16px;}
td.header { background: #74B74A; color: #FFFFFF; padding: 5px; text-align: center;}
td.totals {font-size: 16px; color:#666666;}
td.totals-bold {font-size: 16px; color: #FF9900; font-weight: bold;}
.stepbox { width: 140px; height: 85px; background: url(../images/stepbox.jpg); margin: 0 0 20px 0; padding: 20px;}
.stepbox1 {width: 159px; height: 100px; background: url(../images/stepbox1.png); margin: 0 0 20px 0; padding: 40px 20px 0 20px; color:#333333; }
.stepbox2 {width: 159px; height: 100px; background: url(../images/stepbox2.png); margin: 0 0 20px 0; padding: 40px 20px 0 20px;}
.stepbox3 {width: 159px; height: 100px; background: url(../images/stepbox3.png); margin: 0 0 20px 0; padding: 40px 20px 0 20px;}
.stepbox4 {width: 159px; height: 100px; background: url(../images/stepbox4.png); margin: 0 0 20px 0; padding: 40px 20px 0 20px;}
.stepbox1-active {width: 159px; height: 100px; background: url(../images/stepbox1-active.png); margin: 0 0 20px 0; padding: 40px 20px 0 20px; color:#333333; }
.stepbox2-active {width: 159px; height: 100px; background: url(../images/stepbox2-active.png); margin: 0 0 20px 0; padding: 40px 20px 0 20px;}
.stepbox3-active {
width: 159px;
height: 100px;
background: url(../images/stepbox3-active.png);
margin: 0 0 20px 0;
padding: 40px 20px 0 20px;
}
.stepbox4-active {width: 159px; height: 100px; background: url(../images/stepbox4-active.png); margin: 0 0 20px 0; padding: 40px 20px 0 20px;}
.stepbox-finished {
width: 159px;
height: 100px;
background: url(../images/stepbox-finished.png);
margin: 0 0 20px 0;
padding: 40px 20px 0 20px;
}
.form-error { float: left; width: 580px; margin: 0 0 10px 0; background-color: #FF9900; border: 1px #333333 dotted; padding: 20px;}
.form-error h2 { color: #FFFFFF;}
.form-error p { color:#FFFFFF;}
.form-error a { color: #FFFFFF; text-decoration: underline; font-weight: bold;}
.label-error { background-color: #FF9900; color: #FFFFFF;}
.bookingform .label-error .required { color: #FFFFFF;}
/* Map Toggle */
#maptoggle {position: absolute; top: 365px; z-index: 5; font-size: 14px; width:112px; font-weight: bold; }
#maptoggle img {display: block;}
#maptoggle a {color: #3F710E; height: 20px;}
#mapview a {float: left; display: block; }
#mapview a:hover img {visibility:hidden;}
#mapview {position: absolute; z-index: 5; background: #333333 url(/images/mapbutton.jpg) no-repeat; width: 89px; padding: 7px 0px 4px 23px; }
#flashtoggle {position: absolute; top: 365px; z-index: 5; font-size: 14px; width:112px; font-weight: bold;}
#flashtoggle img { display: block;}
#flashtoggle a {color: #3F710E; height: 20px;}
#flashview a {float: left; display: block;}
#flashview a:hover img {visibility:hidden;}
#flashview {position: absolute; z-index: 5;background: #333333 url(/images/mapbutton.jpg) no-repeat; width: 97px; padding: 7px 0px 4px 15px; }
/* Google Map */
#map a {text-decoration: none; color: #0066CC; background-color: transparent;}
#map a:hover {color: #F60; background-color: transparent;}
#map h1 {font-weight: bold; font-size: 16pt; color: #369; border-bottom: 2px solid #369;}
.IW { width: 350px;}
.IWContent {height: 120px; overflow:auto;}
.IWCaption {font-weight: bold; font-size: 12pt; color: #369; border-bottom: 2px solid #369;}
.IWFooter {margin-top: 5px; font-size: 8pt; }
.IWFooterZoom {}
.IWDirections{background-color:#FFF;}
div.markerTooltip {color: black;background-color: white;white-space: nowrap;margin: 0;padding: 2px 4px;border: 1px solid black;}
/* Form Style */
.filter select { padding: 3px; font: 12px arial, MS Gothic; border: 1px solid #DDDDDD; color: #333333;}
.filter select:hover { border: 1px solid #AFB9C4; color: #333333;}
.filter form {float: left;}
.filter-text {float: left; padding: 3px; font-weight: bold;}
#form h3 { border-bottom: 1px dashed #CCCCCC; background: url(../images/arrow-intrinsic.gif) top left no-repeat; margin-bottom: 10px; }
.colour { color: #5F7389; font-weight: bold; }
.formtext {padding: 3px 10px 3px 10px; width: 220px;}
.formsubmitie7fix {overflow: visible; padding: 5px; .padding: 5px; margin: 20px 0 0 0;}
/* Check Prices Table */
table#checkprices { background: #FFFFFF; float: left;}
table#checkprices tr { border-bottom: #CCCCCC dashed 1px;}
table#checkprices td { border-bottom: #CCCCCC dashed 1px; padding: 0 0 0 8px; height: 36px; }
table#checkprices td.header {background: #FBFBFB; border: 1px solid #CCCCCC; font-weight: bold;}
/*iBox*/
table#ibox h1 {margin: 0 0 6px 0; font-size: 20px; font-weight: normal; border-bottom: 2px solid #CCCCCC;}
table#ibox h2 {margin: 0 0 10px 0; font-size: 14px; color: #666666; font-family: arial, MS Gothic, Helvetica, sans-serif;}
/* Resort Calender For Booking Form */
#resort-form {float: left; padding: 8px; background: #FBFBFB; border: 1px dashed #CCCCCC; margin-bottom: 30px; }
.resort-form {float: left; padding: 8px; background: #FBFBFB; border: 1px dashed #CCCCCC; margin-bottom: 30px; }
#resort-calender {clear: left; width: 636px;}
#resort-calender td { border: #CCCCCC 1px solid; text-align: center;}
.resort-header { background: #2368d2; color:#FFFFFF; font-weight: bold;}
.resort-subheader { background: #CCCCCC; color: #000000; font-size: 9px;}
#resort-calender td a {background: #FFFFFF; display: block; height: 40px; padding: 5px;}
#resort-calender td a span .black{color: #000000;}
#resort-calender td a:hover {background: #2368d2; display: block; height: 40px; padding: 5px; color: #FFFFFF; text-decoration: none;}
td.surfcondition-excellent {background-color: #FF0000;}
td.surfcondition-good {background-color: #ff9900;}
td.surfcondition-fair {background-color: #ffcc00;}
td.surfcondition-poor {background-color: #ffff99;}
.surf-level {float: right; }
.table-surf-conditions {padding: 8px; background: #FBFBFB; border: 1px dashed #CCCCCC; margin-bottom: 20px; }
.table-surf-conditions td {width: 40px; height:24px;}
.table-legend {float: left; padding: 8px; background: #FBFBFB; border: 1px dashed #CCCCCC; margin-bottom: 30px; }
td-surflevel {width: 142px;}
td.surflevel-1 {width: 24px; background: url(/images/wave-icon.gif) no-repeat;}
td.surflevel-2 {width: 48px; background: url(/images/wave-icon.gif) repeat-x;}
td.surflevel-3 {width: 72px; background: url(/images/wave-icon.gif) repeat-x;}
td.surflevel-4 {width: 96px; background: url(/images/wave-icon.gif) repeat-x;}
td.surflevel-5 {width: 120px; background: url(/images/wave-icon.gif) repeat-x;}
td.surflevel-6 {width: 144px; background: url(/images/wave-icon.gif) repeat-x;}
td.gap {width: 20px;}
#content ul li h3 {margin: 0px; }
.table-bigsurf-conditions {padding: 8px; background: #FBFBFB; border: 1px dashed #CCCCCC; margin-bottom: 20px; }
.table-bigsurf-conditions td {}
#publisher {float: right;}