@import url("reset.css");

/* body{background-image: url('/images/oceanfront.jpg'); background-position: top center; background-repeat: no-repeat;}
#mainDiv {position: relative; border: 1px #000000 solid; border-top: 0; width: 1000px; height: 1000px; margin: 0px auto; padding: 0px; background-image: url('/images/transparentwhite.png'); background-repeat: repeat;}
#mainBody {position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; background-color: transparent;}
#mainFooter {position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; background-color: transparent;}
#logo{position: relative; top: 15px; left: 0px;}
*/
body{font-family: Arial, Helvetica, sans-serif; color: #555555;}
#mainHead {position: relative; top: 0px; left: 0px; width: 100%; margin: 0px; padding: 0px;  border-top: 1px #000000 solid;}

#navWrapper{position: relative; top: 0px; left: 0px; width: 100%; height: 50px; margin: 0px; padding: 0px; background-color: #555555; background-image: url('/images/bgnav.gif'); border: 0; border-top: 3px #555555 solid; border-bottom: 1px #555555 solid;}
#navHead{position: relative; top: 0px; left: 0px; width: 900px; height: 50px; margin: 0px auto;}
#mainNavBar{position: relative; top: 0px; left: 0px;}
#mainNavBar li{display: block; float: left; height: 50px; margin: 0px 10px auto 0px; padding: 0px 16px; border: 0px #f3f3f3 dotted; border-width: 0px 2px; color: #555555;}
#mainNavBar li:hover{background-color: #ffffff; border: 2px #114188 dotted; border-width: 0px 2px; border-bottom: 1px #ffffff solid;}
.wordWrapper{margin: 12px 0px;}
#mainNavBar a{margin: 16px auto; padding: 0px; font-size: 14pt; text-decoration: none; color: #555555;}
#logoWrapper{position: relative; top: 5px; left: 0px; width: 100%; height: 120px; background-color: #ffffff;}
#logoSplash{position: relative; top: 0px; left: 0px; width: 900px; height: 120px; margin: 0px auto; background-color: #ffffff;}
#logo{position: relative; top: 0px; left: 0px; margin: 0px; width: 280px;}
#headerBottom{position: relative; top: 0px; left: 0px; width: 100%; height: 30px; background-color: #eff6ff; border: 0; border-top: 1px #dee5ee dotted;}
#headerSubBottom{position: relative; top: 0px; left: 0px; width: 100%; height: 10px; background-image: url(/images/bgnav.gif); border: 0; border-top: 1px #114188 dotted; border-bottom: 1px #114188 solid;}
#headerBottomAlt{position: relative; top: 0px; left: 0px; width: 100%; height: 3px; margin: 0px 0px 10px 0px; background-color: #AAC4E4; border: 0; border-bottom: 1px #114188 solid; border-top: 1px #114188 solid;}
#picWrapper{position: relative; top: 0px; left: 0px; width: 100%; height: 280px; background-color: #eff6ff; border: 0; border-top: 1px #114188 dotted;}
#picSplash{position: relative; top: 0px; left: 0px; width: 900px; height: 280px; margin: 0px auto; background-color: #ffffff; background-image: url('/images/boardwalk.jpg'); background-position: bottom; background-repeat: no-repeat;}
#picGallery{position: relative; top: 0px; left: 0px; width: 900px; height: 280px; margin: 0px auto; background-color: #ffffff;}
#pageDividerWrapper{position: relative; top: 0px; left: 0px; width: 100%; height: 40px; margin: 0px; padding: 0px; background-color: #555555; background-image: url('/images/bgnav.gif'); border: 0px #c0c0c0 solid; border-width: 1px 0px;}
#pageDivider{position: relative; top: 0px; left: 0px; width: 900px; height: 40px; margin: 0px auto;}
#pageDivider h1{position: absolute; top: 0px; right: 0px; margin: 10px 0px 0px 0px; font-style: italic; font-size: 14pt; color: #555555;}

#mainContentWrapper{position: relative; top: 0px; left: 0px; width: 100%; margin: 0px; padding: 0px; }
#mainContent{position: relative; top: 0px; left: 0px; width: 900px; margin: 0px auto;}
#mainContent p {font-size: 11pt; margin-bottom: 10px;}
#btnReserve{position: absolute; top: 46px; right: 8px; cursor: pointer;}

#rightColumn{position: relative; top: 0px; left: 0px; width: 550px; height: 800px; margin: 0px;}
#leftColumn{position: absolute; top: 0px; right: 0px; width: 350px; margin: 0px;}

#textContentWrapper{position: relative; top: 0px; left: 0px; width: 100%; margin: 10px 10px 0px 0px;}
#textContentWrapper p{margin: 10px 0px 0px 0px; font-size: 11pt;}
#textContentWrapper h3 {color:#114188; font-size:12pt; font-weight: normal;}

.headerBlue{position: relative; top: 0px; left: 0px; width: 338px; border: 1px #114188 dotted; background-color:#eff6ff; text-align: center;}
.headerBlue h3{margin: 5px 0px;}
#miniCalWrapper{position: relative; top: 0px; left: 0px; height: 280px; margin: 0px 0px 20px 10px;}
#miniCal{position: relative; top: 0px; left: 0px; width: 340px; height: 340px; margin: 5px 0px 0px 0px;}
#miniMapWrapper{position: relative; top: 0px; left: 0px; margin: 0px 0px 20px 10px;}
#miniMap{position: relative; top: 0px; left: 0px; width: 328px; height: 328px; border: 1px #f3f3f3 dotted; margin: 5px;}

.activeSection{background-color: #ffffff; border: 2px #114188 dotted !important; height: 52px; border-width: 0px 2px !important; border-bottom: 1px #ffffff solid !important;}

#rentalRates{}
#rentalRates th{width: 170px; padding: 0px 5px; text-align: left;}
#rentalRates td{width: 170px; padding: 0px 5px; text-align: right;}

/* Description */
#descriptionWrapper{position: relative; top: 0px; left: 0px; width: 900px; height: 800px;}
#mainLeftDesc{position: relative; top: 0px; left: 0px; width: 270px; height: 800px;}
#mainLeftDesc h2{position: relative; margin-top: 15px; left: 0px; text-align: left; font-size: 12pt; font-weight: bold; color: #114188;}
#mainLeftDesc h3{position: relative; margin-top: 15px; left: 0px; text-align: left; font-size: 12pt; font-weight: normal; color: #114188;}

#mainRightDesc{position: absolute; top: 0px; right: 0px; width: 600px; height: 800px;}
#mainRightDesc h2{position: relative; left: 0px; text-align: right; font-size: 12pt; font-weight: bold; color: #114188;}
#mainRightDesc h4{position: relative; margin-top: 15px; left: 0px; font-size: 11pt; font-weight: bold; color: #bbbbbb;}
.dottedList{}
.dottedList li{margin-left: 20px; margin-bottom: 5px; list-style-type: dotted;}
.subList{margin-top: 5px;}
.subList li{margin-left: 20px;}

/** Image Gallery */
#imageGalleryWrapper{position: relative; top: 0px; left: 0px; width: 900px; height: 700px;}
#imageGallery{position: relative; top: 0px; left: 0px; width: 900px; height: 610px;}
#imageGallery h2{text-align: right; text-align: right; font-size: 12pt; font-weight: bold; color: #114188;}
#igWindowWrapper{position: relative; top: 0px; left: 0px;}
#igMainWindow{position: relative; top: 10px; left: 0px; width: 600px; height: 600px;}
#igMainPicWrapper{position:}
#igMainCaption{}
#igMainCaption p{font-style: italic; font-weight: bold;}
#igSideWindow{position: absolute; top: 5px; left: 605px; width: 300px; height: 600px;}
.igThumb{width: 120px; height: 90px; margin: 5px 5px 5px 5px; cursor: pointer; border: 1px #555555 dotted;}
.igThbCol1{}
.igThCol2{}

/* Contact Forms */
#reserveFormWrapper{position: relative; top: 0px; left: 0px; width: 900px; margin: 0px 0px 50px 0px;}
#reserveFormInstructions{position: relative; top: 0px; left: 0px; width: 270px; height: 700px;}
#reserveFormInstructions h3{position: relative; margin-top: 15px; left: 0px; font-size: 11pt; font-weight: bold; color: #114188;}
#reserveFormInstructions p{font-size: 11pt;}
#reserveFormContainer{position: absolute; top: 0px; right: 0px; width: 580px;}
#reserveForm{position: relative; top: 0px; left: 0px; width: 580px; margin: 10px auto;}
#reserveFormContainer h3 {color:#114188; font-size:12pt; font-weight:bold; left:0; position: relative; text-align: right;}
.formGrouping{position: relative; top: 0px; left: 0px; margin: 0px 0px 10px 0px;}
#rfContactInfo label {text-align: left;}
#rfContactInfo input{display: block; text-align: left; font-size: 14pt; color: #555555;}
#rfDetails textarea{display: block; text-align: left; width: 100%; height: 200px; font-size: 12pt; color: #555555;}
.rightAbsolute{position: absolute; top: 0px; right: 0px;}
.inputTextMedium{width: 250px; height: 25px;}
#reserveForm button{position: relative; top: 20px; left: 430px; width: 125px; height: 30px; border: 2px #114188 solid; background-color: #ffffff; font-color: #114188; font-size: 11pt; cursor: pointer;}
#reserveForm button:hover{background-color: #aac4e4;}

/* Calendar */
#mainRatesLeft{position: relative; top: 0px; left: 0px; width: 255px; height: 2080px;}
#mainRatesLeft h2{position: relative; margin-top: 10px; left: 0px; text-align: left; font-size: 12pt; font-weight: bold; color: #114188;}
#mainRatesLeft p{margin-top: 10px;}
#mainRatesRight{position: absolute; top: 0px; right: 0px; width: 640px;}
.rateUnit{margin: 10px 0px 0px 0px;}
.rateUnit h4{width: 220px; border: 0; border-bottom: 1px #aac4e4 dotted; font-weight: bold; color: #555555;}
.rateUnit h5, .rateUnit h6{margin-left: 5px; font-size: 11pt;}
/*.rateUnit h6{margin-left: 5px; font-size: 11pt;} */


/* Guest Reviews */
#reviewLeftCol{position: relative; top: 0px; left: 0px; width: 300px; min-height: 700px; height: auto !important; height: 700px;}
#reviewWrapper{position: absolute; top: 0px; right: 0px; width: 600px;}
.guestReview{margin-bottom: 25px;}
.guestReview blockquote{margin: 10px 0px 20px 0px;}
.guestReview h5{}
.cqBegin{color:#aac4e4; font-size: 64pt; float: left; height: 24px; margin-top: -20px;}
.cqEnd{color:#aac4e4; font-size: 64pt; float: right; height: 24px;}

#availCalMain h2{position: relative; top: 0px; left: 0px; text-align: right; font-size: 12pt; font-weight: bold; color: #114188;}
#availCalMainMonthWrappers{position: relative; top: 0px; left: 0px; width: 640px;}
.availCalMonth{width: 306px; height: 320px; padding: 0; margin: 10px 10px 0px 10px;}
.availCalMonthLabelWrapper{position: relative; top: 0px; left: 0px; width: 304px; height: 20px; border: 1px #bbbbbb solid;}
.availCalMonthLabelWrapper h4{text-align: center;}
.availCalDayNamesWrapper{position: relative; top: 0px; left: 0px; width: 100%;}
.availCalDayNames{width: 40px; height: 20px; margin: 1px; border: 1px #bbbbbb solid; background-color: #aac4e4; text-align: center;}
.availCalWeek{position: relative; top: 0px; left: 0px; width: 100%; height: 44px;}
.availCalEmptyWeek{position: relative; top: 0px; left: 0px; width: 100%; height: 44px;}
.availCalDay{width: 40px; height: 40px; margin: 1px; border: 1px #bbbbbb solid; border-collapse: separate;}

.inlineLink {color: #114188; text-decoration: underline;}
.inlineLink:hover{color: #afc7ee;}
.previewCalMonth{width: 327px; padding: 0; margin: 5px;}
.previewCalMonthLabelWrapper{position: relative; top: 0px; left: 0px; width: 325px; height: 20px; border: 1px #bbbbbb solid;}
.previewCalMonthLabelWrapper h4{text-align: center;}
.previewCalDayNamesWrapper{position: relative; top: 0px; left: 0px; width: 100%;}
.previewCalDayNames{width: 43px; height: 14px; margin: 1px; border: 1px #bbbbbb solid; background-color: #aac4e4; text-align: center; font-size: 10pt;}
.previewCalWeek{position: relative; top: 0px; left: 0px; width: 100%; height: 34px;}
.previewCalEmptyWeek{position: relative; top: 0px; left: 0px; width: 100%; height: 34px;}
.previewCalDay{width: 43px; height: 30px; margin: 1px; border: 1px #bbbbbb solid; border-collapse: separate;}

.floatLeft{float: left; }
.floatRight{float: right; }
.inActiveDay{ background-color: #f5f5f5;}
.noLeftMargin{margin-left: 0;}
.noRightMargin{margin-right: 0;}
.bookedDay{background-color: #FFCFD5;}
.reservedDay{background-color: #FFF8AF;}
.availableDay{background-color: #ffffff;}
#availCalLegend{height: 28px; margin: 0px auto; border: 0;}
.colorGuide{float: left; width: 170px; margin: 10px 0px 5px 0px;}
.colorGuide div{float: left; width: 40px; height: 16px; border: 1px #bbbbbb solid;}
.colorGuide h6{float: left; margin-left: 5px; font-color: #888888; font-size: 10pt; font-weight: bold;}





/* Footer Styles*/
#mainFooter {position: relative; top: 0px; left: 0px; width: 100%; height: 140px; margin: 0px auto; padding: 0px;}
#footerBorder{position: relative; top: 0px; left: 0px; width: 100%; height: 40px; background-image: url(/images/bgnav.gif); border: 0; border-top: 1px #555555 solid; border-bottom: 1px #555555 solid;}
#footerContentWrapper{position: relative; top: 0px; left: 0px; width: 100%; height: 100px; background-color: #eff6ff; border: 0; border-bottom: 3px #555555 solid;}
#footerContent{position: relative; top: 0px; left: 0px; width: 900px; height: 100px;}