/* ---- COLOR GUIDE ---- 
COLOR        HEX CODE
   ---- END COLOR GUIDE ---- */
   
/* ---- FONTS ---- */
body {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666263; line-height:1.6;}
p {margin:0 0 15px; padding:0;}
h1, h2, h3, h4, h5 {font-weight:normal; color:#0069b5; margin:0; padding:0;}
h1 {font-size:24px;}
h2 {font-size:18px;}
h3 {font-size:14px; font-weight:bold; color:#666263;}
h4 {font-size:14px; text-transform:uppercase; color:#666263;}
h5 {font-size:11px;}

#promo h1, #promo p { background-color: #fff; }

a {color:#6BADDF; text-decoration:none;}
a:hover {text-decoration:underline;}
a:visited {color:#005696;}
a.btn {background:#6caddf; color:#FFF; text-transform:uppercase; display:inline-block; padding:0 5px; font-size:10px; margin-top:-2px;}
a.btn:hover {background:#005696}
/* ---- REPEATED ELEMENTS ---- */
a img, a:visited img {border:none;}
.clear {clear:both; width:100%;}
/* ---- MAIN LAYOUT ---- */
body {background:#97c5d4 url(bg_body0.jpg) 50% 170px no-repeat; margin:0; padding:0;}
.header {background:#FFF; width:100%; padding:18px 0 10px;}
.header .inner {width:980px; margin:0 auto;}
.header .logo {width:420px; float:left; padding:0 0 7px;}
.util {position:relative; float:right; width:550px; height:92px; color:#666263; font-size:11px;}
.util a {color:#666263;}
.util img {margin-bottom:-3px;}
.util a strong {font-size:12px;}
.util table.utiltable {position:absolute; bottom:0; right:0; }
.util td {vertical-align:bottom;}
.util input {margin:0; padding:0;}
.util input[type=text] {border:1px solid #607097; width:110px; height:16px; padding:2px; border-right:none;}
.sm:focus, .md:focus, .lg:focus {outline:none;}
.util .sm {font-size:8px;}
.util .md {font-size:11px;}
.util .lg {font-size:14px;}
.page {width:962px; margin:0 auto; padding:0 9px; background:url(bg_page0.png) repeat-y;}
.page-btm {background:url(bg_foot0.png) no-repeat; height:22px; margin:0 auto; width:980px;}
#slideshow {height:478px; position:relative; z-index:1;}
.hero {position:relative; height:128px; width:962px;}
.hero img {position:absolute; top:0; left:0;}
.hero .caption {position:absolute; right:5px; bottom:5px; background:#065999; color:#FFF; padding:3px 10px;}
.content {padding:21px;}
.content .col-half {width:430px; padding:0 30px 0 0; float:left;}
.content .col-third {width:290px; padding-left:25px; float:left;}
.content .tri {margin-left:-25px;}
.main {padding:0 25px 0 0;}
.main-full {width:895px; float:left; padding:0 25px 0 0;}
.submenu {width:125px; float:left; padding:10px 25px 0 0; line-height:1.4;}
.submenu ul {margin:0; padding:0; list-style:none;}
.submenu ul li {padding:0 0 10px;}
.submenu ul ul {padding:0 0 0 18px;}
.submenu ul li li {padding:10px 0 0;}
.submenu a {color:#666263;}
.main-content {width:500px; float:left; padding:10px  0 0 25px;}
.sidebar {width:220px; float:left;}
.res {background:#0069b5; padding:14px 13px 29px; color:#fff;}
.res h3 {color:#fff; text-transform:uppercase; font-weight:normal; font-size:16px;}
.res table {font-size:10px; margin:6px 0;}
.res input[type=text] {width:90px; border:1px solid #929292; margin:0 0 0 10px; padding:2px; height:12px;}
.res input[type=img] {margin:0; padding:0;}
.res select {width:40px; border:1px solid #929292;}
.feature {padding:5px; width:210px; height:138px; color:#FFF; cursor:pointer; text-transform:uppercase; line-height:1; margin:20px 0 0 0;}
.bc {padding:0 0 5px;}
.bc a {color:#9b9ca0;}
.links {color:#9b9ca0; padding:5px 0; text-transform:uppercase;}
.links a {margin:0 10px; color:#9b9ca0;}
.links strong {color:#6caddf;}
.optionalA, .optionalB {padding:6px 10px; margin:6px -10px;}
.optionalA {background:#a7ceec;}
.optionalB {background:#d7ebfa;}
.optionalA a, .optionalB a {color:#005696; text-decoration:none;}
.optionalA a:visited, .optionalB a:visited {color:#001933;}
.dynamic {border-bottom: 1px solid #333; color:#142029; margin:0 0 20px; padding:1px 0;}
a.expand, a.expand:visited, a.collapse, a.collapse:visited {color: #0069b5; display: block; font-size: 18px; padding: 10px 0 5px;}
a.expand, a.expand:visited {background: url(http://www.heronisland.com/images/expand.gif) no-repeat scroll right center transparent;}
a.collapse, a.collapse:visited {background: url(http://www.heronisland.com/images/collapse.gif) no-repeat scroll right center transparent;}
a.expand:focus, a.collapse:focus {outline: none;}
.share {margin:20px 0; font-size:10px; text-align:right;}
.share a {padding:0 20px; color:#666263; background-position:0 2px; background-repeat:no-repeat}
.email {background-image:url(email000.gif);}
.print {background-image:url(print000.gif);}
/* ---- NAVIGATION ---- */
.menu {font-size:16px; text-align:center; margin:0 auto; padding:0; width:auto;}
.menu li {display:inline-block; zoom:1; border-left:1px solid #666263; margin:0; padding:0; position:relative; z-index:100; *display:inline;}
.menu li:first-child {border-left:none;}
.menu a {color:#666263; text-decoration:none; display:inline-block; padding:2px 20px 0; max-width:150px;}
.menu a:hover {color:#6BADDF;}
.menu ul {display:none; background:#FFF; margin:0; padding:10px 5px 2px 5px; width:175px; text-align:left; font-size:15px;}
.menu li:hover ul {display:block; position:absolute; left:0; *top:28px;}
.menu li li {display:block; border-left:none; border-top:1px solid #666263;}
.menu li li:first-child {border-top:none;}
.menu li li a {display:block; padding:2px; max-width:none;}
/* ---- FOOTER ---- */
.footer {width:942px; background:#FFF; margin:0 auto; padding:15px 10px; font-size:10px; color:#333;}
.footer a {color:#333; font-size:11px;}
.footer h3 {font-weight:normal; color:#333; margin:0 0 10px;}
.footer h3 img {margin-bottom:-5px;}
.footer td {vertical-align:top; padding:0 10px;}
.footer td.edge {border-left:1px solid #333; width:114px;}
.footer td.icons {padding:0; width:57px;}
.footer td.icons img {display:block; margin:0 0 4px;}
.subfooter {width:920px; margin:0 auto; text-align:center; color:#333; padding:15px 0; font-size:11px;}
.subfooter strong {font-size:12px;}
/* ---- GALLERY ----  */
.box {position:relative;  z-index:2; float: left; margin:10px 6px 5px 12px; height:auto; width:177px; color:#292728;}
.box img {margin: 11px 7px;}
.box p {padding:0 12px 0 2px;}
.boxContent {background:url(bg_galle.png) no-repeat; width:177px; height:128px; position:absolute; top:0; left:-4px;}
.boxContentReddot {background:url(http://www.heronisland.com/images/bg_side_box.png) no-repeat; position:absolute; top:0; left:-4px; width:233px; height:auto;}
.galleryReddot .box {float: left; margin:-10px 6px 5px 12px; height:auto; width:177px; color:#292728; border:1px;}

/* New Calendar Code */
/* For the details, see: http://flowplayer.org/tools/dateinput/index.html#skinning */
.date input {border:1px solid #bcbcbc; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:0 0 0 2px; width:110px; margin:4px 4px 4px 0; float:left; height:19px; line-height:14px;}
.todate input {border:1px solid #bcbcbc; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:0 0 0 2px; width:110px; margin:4px 4px 4px 0; float:left; height:19px; line-height:14px;}
.caltrigger {margin:0 2px -2px 2px; background:url(cal00000.gif) no-repeat; display:inline-block; width:17px; height:20px;}}
#calroot {z-index:10000; margin-top:-1px; width:198px; padding:2px; background-color:#fff; font-size:11px; border:1px solid #ccc;
       -moz-border-radius:5px;
    -webkit-border-radius:5px;
       -moz-box-shadow: 0 0 15px #666;
    -webkit-box-shadow: 0 0 15px #666; /* calendar root element */
}
#calbody {background:#FFF}
#calhead {padding:2px 0; height:22px; background:#0069b5;} /* head. contains title, prev/next month controls and possible month/year selectors */
#caltitle {font-size:14px; color:#FFF; float:left; text-align:center; width:155px; line-height:20px; text-shadow:0 1px 0 #ddd;}
#calnext, #calprev {display:block; width:20px; height:20px;    background:transparent url(http://www.heronisland.com/images/cal_prev.jpg) no-repeat scroll center center; float:left; cursor:pointer;}
#calnext {background-image:url(http://www.heronisland.com/images/cal_next.jpg); float:right;}
#calprev.caldisabled, #calnext.caldisabled {visibility:hidden;}
#caltitle select {font-size:10px;} /* year/month selector */
#caldays {height:14px;border-bottom:1px solid #ddd;} /* names of the days */
#caldays span {display:block; float:left; width:28px; text-align:center;}
#calweeks {background-color:#fff; margin-top:4px;} /* container for weeks */
.calweek {clear:left; height:22px;} /* single week */
.calweek a {display:block; float:left; width:27px; height:20px; text-decoration:none; font-size:11px; margin-left:1px; text-align:center; line-height:20px; color:#666;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;         
} /* single day */
.calweek a:hover, .calfocus {background-color:#ddd;}/* different states */
#calhead, #caldays, .calweek {width:198px;}
a.calsun {color:red;} /* sunday */
a.caloff {color:#ccc;} /* offmonth day */
a.caloff:hover {background-color:rgb(245, 245, 250);}
a.caldisabled {background-color:#efefef !important;    color:#ccc    !important;    cursor:default;} /* unselecteble day */
#calcurrent {background-color:#0069b5; color:#fff;} /* current day */
#caltoday {background-color:#000; color:#fff;} /* today */

/* Reddot Only */
.reddot {color:#FF0000; text-transform:lowercase;}