* { margin: 0; padding: 0; border: none; text-decoration: none; } body { background: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #414141; } ul { list-style-type: none; } :focus { outline: 0; } /* gen. ui */ .window { width: 100%; } .frame { width: 980px; margin: 0 auto; } /* background */ #background { } /* the sky */ #sky { background: #2475a9 url('../img/skyBg.png') top left repeat-x; height: 292px;} #cloudsForeground { background: url('../img/skyCloudsForeground.png') 20% repeat-x; height: 164px; position: absolute; top: 0; left: 0; } #cloudsBackground { background: url('../img/skyCloudsBackground.png') 80% repeat-x; height: 164px; position: absolute; top: 0; right: 0; } /* the sky contents */ #raftTheRogueLogo { background: url('../img/raftTheRogueLogo03.png') center center no-repeat; opacity: 0.99; filter: alpha(opacity='99'); /*border: 2px dotted #cacaca; */ height: 172px; width: 260px; text-align: center; float: left; margin-top: 25px; text-indent: -99999px;} #heading { background: #294d6b; opacity: 0.9; filter: alpha(opacity='90'); height: 115px; width: 615px; float: right; margin: 25px 0 0 0; padding: 25px; color: #FFF; } #heading h1 { font-size: 430%; font-weight: bold; color: #FFF; display: block;} #heading p { font-size: 130%; line-height: 130%; margin-top: 15px;} #headingArrow { width: 26px; height: 27px; background: url('../img/skyHeadingArrow.png') no-repeat; float: right; margin-right: 50px; margin-bottom: 50px;} /* the hills */ #hills { background: url('../img/hillsBg.png') 80% repeat-x; position: absolute; margin-top: -40px; height: 282px;} /* the rapids */ #rapidsForeground { background: url('../img/rapidsForeground.png') 20% repeat; height:130px; position: absolute; top: 410px; } #rapidsBackground { background: url('../img/rapidsBackground.png') 50% repeat; height: 87px; position: absolute; top: 450px; } /* the mid water */ #waterMid { background: #0b3753 url('../img/waterBg.png') repeat-x; /* this height will have to change depending on content - this is just a placeholder */ position: relative; top: 248px; } #bubblesForeground { background: url('../img/bubblesForeground.png') 40% repeat; position: absolute; height: 500px; margin-top: 150px; left: 0; } #bubblesBackground { background: url('../img/bubblesBackground.png') 90% repeat; position: absolute; height: 500px; margin-top: 200px; left: 0; } /* main content */ #mainContent { background: #FFF; padding: 25px; display: block; position: relative; top: -280px; -webkit-border-radius: 20px; -moz-border-radius: 20px;} /* main navigation */ #mainNav { float: right; width: 500px; margin-top: -63px;} #mainNav li { float: left; margin-right: 20px;} #mainNav li a { padding: 10px 15px; color: #FFF; font-weight: bold; font-size:130%; float: left; } #mainNav li a:hover { color: #000; } #mainNav li a.active { background: #ec972a; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;} #mainNav li a.active:hover { color: #FFF; } #mainNav li .activationArrow { background: url('../img/mainNavActivationArrow.png') center no-repeat; display: block; height: 9px; width: 100%; float: left; } /* sides */ #contentLeftSide { width: 610px; float: left; margin-bottom: 25px; } #contentRightSide { width: 300px; float: right; } /* content specifics */ /* details list */ #details { float: left; display: block; margin-bottom: 25px;} #details li { float: left; padding: 20px; background: #ececec; width: 160px; height: 100px; border-right: 1px solid #dadada; } #details li:first-child { -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px;} #details li:last-child { -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border: none; } #details li h3 { color: #393939; font-size: 130%; font-weight: bold; } #details li p { color: #636363; font-size: 86%; line-height: 130%; margin-top: 5px;} #details li .moreLink { color: #FFF; font-size: 80%; font-weight: bold; text-transform: uppercase; background: #2576a9 url('../img/moreLinkArrow.png') right no-repeat; padding: 6px 30px 6px 9px; float: left; margin-top: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #details li .moreLink:hover { background-color: #1b4a67; } /* nivo slider */ #nivoslider { width: 610px; height: 200px; /* margin-top: 25px; */ margin-bottom: 40px;float: left; } .nivo-controlNav {position: relative; top: 210px; width: 610px; text-align: center;} .nivo-controlNav a.nivo-control { background: url('../img/nivoSliderDots.jpg') no-repeat; height:8px; width: 7px; text-indent: -99999px; display: block; float: left; margin-right: 5px; } .nivo-controlNav a.active { background: url('../img/nivoSliderDots.jpg') 0px -8px no-repeat;} /* the textual div is where all the inner page contents go */ #textual { clear: left; float: left; margin-top: 10px;} #textual h2 { color: #414141; font-size:260%; } #textual p { color: #8b8b8b; font-size:130%; line-height: 130%; margin-top: 18px;} #textual p strong { color: #000; } #textual p a { color: #2576a9;} #textual p a:hover { background: #2576a9; color: #FFF;} #subNav { margin-bottom: 25px; } #subNav li { float: left; } #subNav li a { float: left; color: #8b8b8b; padding: 5px 8px; margin-right: 15px; margin-bottom: 25px;} #subNav li a:hover { color: #000; } #subNav li a.active { background: #93bb42; color: #FFF; -webkit-border-radius: 8px; -moz-border-radius: 8px;} #subNav li a.active:hover { background: #5c7725; } #textual h3 { background: #000; color: #FFF; font-size: 130%; font-weight: bold; padding: 10px 15px; display:inline; float: left; margin: 35px 0 15px 0;} #textual table.commonTable { border: 1px solid #dbdbdb; border-spacing: 0px; margin: 15px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; } #textual table.commonTable tr td.heading { background: #93bb42; color: #FFF; font-weight: bold; text-align: center; padding: 15px 0; } #textual table.commonTable tr td.heading:first-child { -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; } #textual table.commonTable tr td.heading:last-child { -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; } #textual table.commonTable tr:hover { background-color: #f9ffd6; cursor:pointer; } #raftsSize { width: 150px; } #raftsPassengers { width: 250px; } #raftsPrice { width:150px; } #tahitiType { width: 100px; } #tahitiPassengers { width: 150px; } #tahitiBrand { width: 150px; } #tahitiPrice { width: 150px; } #textual table.commonTable tr td { text-align: center; padding: 8px 0; font-weight: bold; border-width: 0px 1px 1px 0; border-style: solid; border-color: #dbdbdb; } #textual table.commonTable tr td span { display: block; font-size: 85%; color: #9c9c9c; display: block; font-weight: normal; } #textual table.commonTable tr:last-child td { border-width: 0 1px 0 0; } #textual table.commonTable tr td:last-child { border-right: none; } #textual p.notice { font-size: 85%; color: #1a1a1a; } .regularForm { margin-top: 25px; } .regularForm ul li { float: left; clear: left; } .regularForm ul li span.name { font-size: 130%; font-weight: bold; color: #000; margin-top: 15px; float: left; } .regularForm ul li input, .regularForm ul li textarea { float: left; padding: 8px 10px; border: 1px solid #dedede; margin-top: 5px; font-size: 130%; line-height: 130%; color: #93bb42; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .regularForm ul li input.text, .regularForm ul li .textArea { clear: left; -webkit-border-radius: 5px; -moz-border-radius: 5px;} .regularForm ul li input.text:focus { border: 1px solid #898989; } .regularForm ul li span.desc { float: left; clear: left; color: #adadad; font-size: 85%;} .regularForm ul li select.regularSelect { float: left; clear: left; margin-top: 10px; background: #FFF; border: 1px solid #dedede; padding: 8px 10px; color: #000; } .regularForm ul li #ampm { margin: 15px 0 0 5px; } .regularForm ul li div.seperator { width: 300px; float: left; } .regularForm .defaultSubmitBtn { background: #93bb42; color: #FFF; font-weight: bold; margin-top: 15px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } .regularForm .defaultSubmitBtn:hover { background: #5c7725; cursor:pointer;} .regularForm .ajaxLoader { background: url('../img/ajax-loader.gif') right no-repeat; width: 40px; height: 32px; float: right; margin-top: 18px; display: none;} #contactInquiry, #additionalQuestions { width: 500px; height: 100px; resize: none; } .formResponse { margin-top: 25px; color: #93bb42; font-weight: bold; } .craftSelector { float: left; clear: left; } .phoneInput { clear: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .phoneSep { margin: 15px 5px 0 5px; float: left; } #chooseYourCrafts { margin-top: 35px; } #addACraft { background: url('../img/addIcon.png') left no-repeat; padding: 8px 8px 8px 30px; color: #2576a9; margin-top: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #addACraft:hover { background-color: #d3d3d3;} .removeThisCraft { background: url('../img/removeIcon.png') left no-repeat; padding: 8px 8px 8px 30px; color: #2576a9; margin: 2px 0 0 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px;} .removeThisCraft:hover { background-color: #d3d3d3; } .addressHolder { float: left; margin: 25px 35px 25px 0; font-size: 85%; } .addressHolder p { font-size: 85%; } .addressHolder strong { font-size: 100%; color: #414141; } hr { clear: both; width: 100%; height: 1px; background: #6e6e6e; border: none; margin: 25px 0; } /* calendar */ #popupCalendarHolder { position: absolute; margin-left: 150px; display: none; } #calendarHolder { background: #414141; padding: 15px; color: #FFF; width: auto; float: right; margin-left: -1px; -webkit-box-shadow: 5px 0px 5px #cacaca; -moz-box-shadow: 5px 0px 5px #cacaca; -webkit-border-radius: 5px; -webkit-border-radius: 5px; } #calendarHolder table { border-spacing: 0; } #calendarHolder .calendar_hdr { width: 100%; background: #efefef; padding: 10px; } #calendarHolder .calendar_hdr a { font-size: 85%; color: #898989; } #calendarHolder .calendar_hdr h5 { font-size: 130%; color: #1a1a1a; font-weight: bold;} #calendarHolder #calendar_days { width: 100%; background: #efefef; color: #525252; } #calendarHolder #calendar_days tr td { text-align: center; border-width: 0 1px 1px 0; border-style: solid; border-color: #dadada; } #calendarHolder #calendar_days tr td:last-child { border-right: none; } #calendarHolder #calendar_days tr td a { padding: 8px; display: block; color: #1a1a1a; } #calendarHolder #calendar_days tr td a:hover { background: #93bb42; color: #FFF; } #calendarHolder #calendar_days tr:first-child td { background: #5c5c5c; color: #FFF; padding: 8px; } #closeCalendar { color: #FFF; margin-top: 10px; float: left; } #closeCalendar:hover { text-decoration: underline; } #calendarArrow { width: 29px; height: 57px; background: url('../img/calendarArrow.png') no-repeat; float: left; margin-top: 30px;} /* right side */ #makeReservations { display: block; background: #93bb42 url('../img/makeReservationsArrow.png') right no-repeat; color: #FFF; padding: 20px; font-size: 170%; font-weight: bold; -webkit-border-radius: 8px; -moz-border-radius: 8px;} #makeReservations:hover { background-color: #5c7725; } #weather { height: 120px; margin-top: 15px; } #weather img { float: left; margin-right: 10px; } #weather #temperature { font-size:400%; color: #414141; font-weight: bold; margin-top: 15px; float: left; } #weather #highAndLowTemperature { color: #414141; font-size: 85%; font-weight: bold; display: block; float: left; margin-top: 15px;} #weather #yahooLink { float: left; display: block; } #weather #yahooLink a { color: #2576a9; font-weight: normal; font-size: 85%; } #weather #yahooLink a:hover { background: #2576a9; color: #FFF; } #weatherLoader { height: 120px; background: url('../img/ajax-loader.gif') center center no-repeat; display: block; margin: 0 auto;} /* details boxes */ .detailsBox { display: block; background: #ececec; margin-top: 25px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;} .detailsBox h3 { display: block; padding: 5px 10px; font-size: 100%; } .detailsBoxContents { padding: 0 20px 20px 20px;} .detailsBox p { color: #707070; margin-top: 10px; } .detailsBox strong { color: #2f2f2f; font-weight: bold; } .detailsBox a { padding: 5px 8px; margin: 5px 0; text-transform: uppercase; font-size: 70%; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px;} #findUs h3 { background: #414141; color: #FFF; } #findUs .arrow { background: url('../img/findUsArrow.png') no-repeat; height:9px; width: 18px; margin-left: 20px; } #findUs a { color: #FFF; background: #ec972a; } #findUs a:hover { background: #9c6b2d; } #sitesToSee h3 { background: #8dc6d7; color: #FFF; } #sitesToSee .arrow { background: url('../img/sitesToSeeArrow.png') no-repeat; height:9px; width: 18px; margin-left: 20px; } #sitesToSee a { color: #FFF; background: #414141; } #sitesToSee a:hover { background: #000; } /* the bottom water */ #waterBottom { background: #051e2e url('../img/waterBottomBg.png') repeat-x; position: relative; top: 100px;} #footerContent { height: 100px; } #copyright { font-size: 85%; color: #FFF; } #copyright a { color: #FFF; font-weight: bold; } #copyright a:hover { background: #FFF; color: #051e2e; } #footerNav { float: right; } #footerNav li { float:left; } #footerNav li a { font-weight: bold; padding: 5px 10px; color: #FFF; margin-left: 10px; background: #000; -webkit-border-radius: 5px; -moz-border-radius: 5px;} #footerNav li a:hover { background: #8dc6d7; } #footerNav li a.active, #footerNav li a.active:hover { background: #ec972a; } #fishForeground { background: url('../img/fishForeground.png') 10% repeat-x; position: relative; height: 70px; top: 100px;} #fishBackground { background: url('../img/fishBackground.png') 20% repeat-x; position: relative; height: 70px; top: -70px;} #bottomBackground { background: url('../img/bottomBackground.png') 30% repeat-x; height: 57px; position: relative; margin-top: 80px;} /* final bottom */ #finalBottom { height: 100px; background: #000; position: relative; margin-top: 80px;} /* gen */ .clearLeft { clear: left; } .clearRight { clear: right; } .clearBoth { clear: both; } .floatLeft { float: left; } .floatRight { float: right; } .displayBlock { display: block; } .displayInline { display: inline; } .displayNone { display: none; } /* intervention plugin - yes, it's bolt action */ #interveneOverlay { background: #000; position: absolute; top: 0px; left: 0px; width: 100%; height: 1px; z-index: 9997; border: 0px none; opacity: 0; filter:alpha(opacity='0'); } #intervene { background: #dfdfdf; padding: 10px; width: 30px; height: 30px; position: absolute; top: 0; left: 0; z-index:9998; border: 0px none; -webkit-border-radius: 10px; -moz-border-radius: 10px; opacity: 0; filter:alpha(opacity='0'); -webkit-box-shadow: 3px 3px 10px #303030; -moz-box-shadow: #303030 3px 3px 10px;} #interveneContent { overflow: hidden; border: 0px none; padding: 0; opacity: 0; filter:alpha(opacity='0'); margin-top: -28px; } #interveneContent h4 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 257%; color: #000; font-weight: 200; width: 700px;} #interveneContent p { color:#424242;} #interveneTitle { position: relative; float: right; margin-right: 5px; top: -58px; background: #42a1ef; color: #FFF; padding: 5px 8px; opacity: 0; filter:alpha(opacity='0'); font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; text-shadow: 1px 1px 1px #525252; } #interveneLoader { margin: -28px auto; height: 100%; width: 100%; background: url('../img/ajax-loader-01.gif') center center no-repeat; float: left; display: block; } #interveneClose { background: url('../img/interimClose.png') no-repeat; height: 28px; width: 27px; z-index: 99999; position: relative; text-indent: -9999px; opacity: 0; filter:alpha(opacity='0'); display: block; top: -20px; left: -20px; } #interveneArrows { position: absolute; top: -100px; left: -100px; opacity: 0; filter:alpha(opacity='0'); z-index: 9998; margin-top: 50px; padding: 10px;} #interveneLeftArrow { background: url('../img/interimArrows.png') no-repeat; width: 100px; height: 64px; text-indent: -99999px; display: block; float: left; } #interveneRightArrow { background: url('../img/interimArrows.png') 0 -64px no-repeat; width: 100px; height: 70px; text-indent: -99999px; display: block; float: right; } #interveneOffscreen { position: absolute; top: -99999px; left: -99999px; }