/* _________________________________________________ VERB Interactive CSS Responsive Framework (Royal Caribbean - Quantum of the Seas) Author: VERB Interactive URL: http://www.verbinteractive.com v3 _____________________________________________________ */ /* CSS Reset */ .clearfix{ zoom:1; }.clearfix:before,.clearfix:after{ content:"\0020";display:block;height:0;overflow:hidden; } .clearfix:after{ clear:both; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { font-family: "proxima-nova-n4","proxima-nova",sans-serif; line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* CSS Animations */ header, #icon, a, #email-button, #icon, #button, #nav, #book-drop, #video-button img {-webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} #footer-contact, #email-form, #email-button, #button {border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px;} #email-button, .button {-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.2); box-shadow: 0px 1px 1px rgba(0,0,0,0.2); -o-box-shadow: 0px 1px 1px rgba(0,0,0,0.2);} #email-form {-moz-box-shadow: inset 0 0 10px rgba(0,0,0, 0.10); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0, 0.10); box-shadow: inset 0 0 10px rgba(0,0,0, 0.10); -o-box-shadow: inset 0 0 10px rgba(0,0,0, 0.10);} .slide {top: 0px;} .grow {box-shadow: 0 0 21px rgba(255,255,255,0.1); -webkit-box-shadow: 0 0 21px rgba(255,255,255,0.1); -moz-box-shadow: 0 0 21px rgba(255,255,255,0.1); -o-box-shadow: 0 0 21px rgba(255,255,255,0.1);} .no-grow {box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none;} #top-nav a, nav ul li a {transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none;} /* Structure */ html {background: #fafafa; height: 100%; margin-left: -1px; overflow: scroll;} body {max-width: 1600px; margin: 0 auto !important; height: 100%; background: #fff; min-width: 768px;} header, section, footer {background: none;} p, #footer-bottom ul li, h1, h2, h3, h4, h5 ,h6, #email-button, .button, #book-drop, #book-now, #video-button h1, #video-button h2, input {font-family: "proxima-nova-n4","proxima-nova",sans-serif;} nav ul li, #social-footer p {font-family: "proxima-nova-extra-condensed", arial narrow, arial;} header {height: 66px; position: fixed; top: 0; z-index: 1000; min-width: 768px;} header > div {max-width: 1600px; width: 100%; background: url(img/menu-bg.png) center bottom repeat-x; z-index: 100;} #main-nav, #top-nav {margin: 0 auto;} #main-nav {position: relative; height: 66px; background: #1f244e;} #top-nav {display: none;} a.logo {height: 38px; width: 162px; float: left;} a.logo img {max-width: 100%;} #top-nav p {color: #0073bb; font-size: 0.875em; padding: 13px 0 0 20px; margin: 0; line-height: 1em; height: 25px; float: left; font-weight: 600;} #social-heading {float: right; height: 29px; padding-top: 9px;} .facebook {width: 90px; height: 20px; display: inline-block; vertical-align: top;} #social-heading a {display: none; height: 20px; width: 20px; margin-left: 10px;} #social-heading a img {max-width: 100%;} #main-nav #icon, #main-nav #icon-inside {position: absolute; left: 5%; height: 66px; width: 66px; z-index: 100; box-shadow: 0 0 24px rgba(255,255,255,0.3); -webkit-box-shadow: 0 0 24px rgba(255,255,255,0.3); -moz-box-shadow: 0 0 24px rgba(255,255,255,0.3); -o-box-shadow: 0 0 24px rgba(255,255,255,0.3);} nav {text-transform: uppercase;} nav ul {margin: 0; padding: 0;} nav ul li, #book-drop li {display: inline-block; font-size: 1.25em; font-weight: 600; width: 100%; border-bottom: solid 1px #e5e5e5;} nav ul li a {color: #333; text-decoration: none; text-transform: uppercase; width: 90%; padding: 12px 5%; display: block;} nav ul li a:hover {color: #fff; background-color: #326db1;} #nav-wrap {position: absolute; top: 18px; right: 5%; width: 100%;} #nav {display: block; position:absolute; top: 48px; right: 0; background: #f5f5f5; width: 90%;} #nav.active, #book-drop.active {display: block; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); z-index: -1;} #menu-icon {cursor: pointer; display: block; height: 30px; width: 30px; float: right; background: url(img/menu.svg) center center no-repeat;} .alreadyBooked {margin-left: 100px;} #nav, #book-drop { -webkit-transform: translate3d(0,-140%,0); -moz-transform: translate3d(0,-140%,0); transform: translate3d(0,-140%,0); -o-transform: translate3d(0,-140%,0); z-index: -1;} #mobile-wrap {width: 80%; position: absolute; top: 23px; z-index: 250;} #book-drop {position:absolute; top: 66px; right: 0; background: #f5f5f5; width: 100%; text-align: center;} #book-drop li a {padding: 25px 0; list-style-type: none; display: block; text-decoration: none; color: #1f244e; font-weight: 900; text-transform: uppercase;} #book-drop li a:hover, #book-drop li a.active {color: #febd11; background: #fff;} #book-now {cursor: pointer; display: block; line-height: 1.25em; text-transform: uppercase; color: #febd11; font-weight: 700; padding-left: 110px;} #main {height: 100%;} section {width: 100%; margin: 0 auto; position: relative;} section > div, footer > div {max-width: 1600px; display: block;} footer {position: relative;} #footer-top, #social-footer, #footer-bottom {margin: 0 auto; padding: 0;} #footer-top > div, #footer-bottom > div {max-width: 980px; margin: 0 auto;} #footer-bottom > div {height: 20px;} #footer-top {background: #f0f0f0; padding: 50px 0;} #footer-contact {border: solid 3px #e7e7e7; padding: 25px 2.5%; background: #fff; overflow: auto; text-align: center;} #footer-contact p, .staterooms #footer-contact p {font-size: 0.875em; display: inline-block; margin: 0; padding: 8px 0 0 0; color: #c4c4c4; text-transform: none; text-align: left;} #footer-contact p a {color: #0073bb; text-decoration: none;} #footer-contact p a:hover {color: #061556;} #footer-contact h2 {display: inline-block; color: #febd11; font-size: 0.875em; font-size: 1.75em; font-weight: 700; margin: 0; padding: 10px 20px 0 0;} #footer-contact h2 a {color: #febd11; text-decoration: none;} #footer-contact h4 {color: #061556; font-size: 0.875em; margin: 0; padding: 0; text-transform: uppercase;} #footer-contact #phone {display: block; width: 100%;} #footer-contact #email {display: block; width: 100%; margin-top: 30px;} #footer-contact form {padding: 10px 0 0 0; margin: 0;} #email-form {float: left; height: 32px; border: solid 1px #e8e8e8; font-size: 13px; width: 60%; padding: 0 10px; color: #999; font-weight: 500;} #email-button {float: right; height: 31px; border: solid 1px #fedb7e; background: url(img/button-bg.png) center center repeat-x; font-weight: 600; font-size: 0.875em; padding: 3px 0 0; width: 30%; text-align: center; text-transform: uppercase;} #email-button:hover {color: #0073bb;} #button { border: solid 1px #fedb7e; background: url(img/button-bg.png) center center repeat-x; font-weight: 600; font-size: 0.75em; padding: 7px 20px; text-align: center; text-transform: uppercase; display: inline-block; text-decoration: none; margin-top: 10px;} #button:hover {color: #0073bb;} #social-footer {height: 60px; padding: 0 0 40px 0; text-align: center; background: #f0f0f0;} #social-footer .facebook {display: none;} #social-footer a {display: inline-block; height: 22px; width: 22px; margin: 0 3px;} #social-footer a img, .staterooms #social-footer a img {max-width: 100%; position: static;} #social-footer p, .staterooms #social-footer p {font-size: 1.25em; color: #061556; display: block; padding: 0 0 10px 0; margin: 0; vertical-align: top; width: 100%; text-transform: uppercase;} #footer-bottom {padding: 10px 2.5% 50px 2.5%; vertical-align: top; border-top: solid 3px #e8e8e8;} #footer-bottom p, .staterooms #footer-bottom p,#content-container #footer-bottom p {color: #0073bb; font-size: 0.75em; margin: 0; padding: 5px 0 0 15px; height: 26px; display: inline-block;} #footer-bottom .icon {width: 20px; display: block; float: left;} #footer-bottom .icon img, .staterooms #footer-bottom .icon img {max-width: 100%; position: static;} #footer-bottom ul {width: 100%; display: block; margin: 0; padding: 2px 0 0 0; height: 12px; float: left; } #footer-bottom ul li {display: inline-block; font-size: 0.75em; border-left: 1px solid #0073bb; padding-left: 8px; margin-left: 4px;} #footer-bottom ul li:first-child {border-left: none; padding-left: 0; margin-left: 0;} #footer-bottom ul li a {color: #0073bb; text-decoration: none; text-transform: capitalize; font-weight: normal;} .button, .large-button {display:inline-block; padding:8px 10px 7px; margin:15px auto 0; width:100px; background:#fec617; /* Old browsers */ /* IE9 SVG,needs conditional override of 'filter' to 'none' */ background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYzYxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZlYzYxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2ZkYWQxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGFkMTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#fec617 0%,#fec617 50%,#fdad10 51%,#fdad10 100%);/* FF3.6+ */ background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fec617),color-stop(50%,#fec617),color-stop(51%,#fdad10),color-stop(100%,#fdad10));/* Chrome,Safari4+ */ background:-webkit-linear-gradient(top,#fec617 0%,#fec617 50%,#fdad10 51%,#fdad10 100%);/* Chrome10+,Safari5.1+ */ background:-o-linear-gradient(top,#fec617 0%,#fec617 50%,#fdad10 51%,#fdad10 100%);/* Opera 11.10+ */ background:-ms-linear-gradient(top,#fec617 0%,#fec617 50%,#fdad10 51%,#fdad10 100%);/* IE10+ */ background:linear-gradient(to bottom,#fec617 0%,#fec617 50%,#fdad10 51%,#fdad10 100%);/* W3C */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec617',endColorstr='#fdad10',GradientType=0 );/* IE6-8 */ border:1px solid #FCE07F; border-radius:3px; text-transform:uppercase; font-size:13px; font-weight:700; text-decoration:none; color:#1D2145; text-align:center;} .button:hover {color: #0073bb;} .large-button {width: auto;} .whiteText {color: #fff;} /* @media screen and (min-width: 480px) { */ #book-drop {display: none;} #social-footer a {margin-left: 10px;} nav {padding: 9px 0 0 0; margin: 0;} nav ul li {font-size: 1.05em; padding: 6px 0 5px 20px; width: auto!important; border: 0;} nav ul li a {color: #fff; padding: 0; width: auto; display: inline-block;} nav ul li a:hover {color: #326db1; background: none;} ul.data-row {float: right; text-align: right; width: 80%;} #mobile-wrap {display: none;} nav {background: none;} #nav-wrap {width: auto; float: right; padding: 0; right: 5%; top: 6px;} #nav {display: block!important; background: none; position: inherit; padding: 0; position: static; width: 100%; z-index: 100;} #menu-icon {display: none;} #footer-bottom ul {float: left; text-align: left;} /* } @media screen and (min-width: 481px) {#book-drop {display: none;} } @media screen and (min-width: 640px) {} @media screen and (min-width: 760px) { */ header {height: 132px; position: fixed; top: -142px; z-index: 1000; width: 100.1%; } a.logo {height: 38px; width: 162px; float: left;} a.logo img {max-width: 100%;} #top-nav {padding: 14px 12px; height: 38px; display: block;} #top-nav p {color: #0073bb; font-size: 1em; padding: 11px 0 0 15px; margin: 0; line-height: 1em; height: 25px; float: left; font-weight: 600;} #top-nav p a {color: #0073bb; text-decoration: none;} #social-heading a {display: inline-block;} #main-nav #icon {position: absolute; left: 50%; top: -8px; margin-right: -50%; margin-left: -41px; height: 82px; width: 82px; z-index: 100;} #main-nav #icon-inside {position: absolute; left: 50%; top: -8px; margin-left: -41px; height: 82px; width: 82px; z-index: 100; box-shadow: 0 0 24px rgba(255,255,255,0.3); -webkit-box-shadow: 0 0 24px rgba(255,255,255,0.3); -moz-box-shadow: 0 0 24px rgba(255,255,255,0.3); -o-box-shadow: 0 0 24px rgba(255,255,255,0.3);} nav {padding: 23px 0 0 ;} nav ul li {font-size: 1.0625em; padding: 0 0 0 0px; display: block; float: left;} nav ul li a {padding: 25px 10px 24px 10px; color: #fff;} ul.menu.data-row li a {padding: 25px 8px 24px 8px;} nav ul li a:hover, nav ul li.current-menu-item, nav ul li.current-page-ancestor {color: #fff; background: url(img/main-menu-over.png) center bottom no-repeat #143875;} nav ul li.current-menu-item {opacity: 1;} nav ul li:first-child {padding-left: 0px; } #nav-wrap {width: 100%; float: right; padding: 0; right: 0; top: 0px;} ul.menu.data-row {float: left;} ul.data-row {float: right; width: auto;} #footer-contact {text-align: left;} #footer-contact #phone {display: block; float: left; width: 55%;} #footer-contact #email {display: block; float: right; width: 40%; margin-top: 0;} #footer-contact p, .staterooms #footer-contact p {padding: 0 0 0 0;} #footer-bottom ul {width:auto; float: right;} #footer-bottom p, .staterooms #footer-bottom p {width:auto; float: left;} #footer-bottom ul li {padding-left: 12px; margin-left: 8px;} #footer-disclaimer {font-size: 0.75em; max-width: 980px; margin: 0 auto; padding: 20px 2.5% 0 2.5%; color: #404040;} /* } */ #top-nav p.already-booked {display: none;} /* Break at 1024 */ @media screen and (min-width: 1024px) { .harmony-banner {min-height: 1100px !important;} #top-nav p.already-booked {margin-left: 150px;} #top-nav {padding: 14px 18px; max-width: 944px;} #main-nav {max-width: 980px;} nav {padding: 22px 0 0 0;} #nav-wrap {width: 100%; float: right; padding: 0; right: 0;} nav ul li {font-size: 1.125em; /* padding-left: 30px; */} nav ul li a:hover {color: #fff; background: url(img/main-menu-over.png) center bottom no-repeat #143875;} #footer-contact {padding: 20px 25px;} #footer-bottom {padding: 10px 0 50px 0; vertical-align: top;} #social-footer a {margin-left: 25px;} nav ul li a {padding: 24px 20px 23px 20px;} ul.menu.data-row li a {padding: 25px 18px 23px 18px;} ul.data-row li a {padding: 25px 19px 23px 19px;} #footer-contact {padding: 25px 5%;} #footer-disclaimer {padding: 20px 5% 0 5%;} #footer-bottom {padding: 10px 5% 50px 5%;} .fancybox-wrap #myExperience {width: 800px; height: 450px;} } /* IE7 and IE8 Fixes */ .ie7 .facebook, .ie7 nav ul li, .ie7 #footer-contact p, .ie7 #footer-contact h2, .ie7 #social-footer a, .ie7 #footer-bottom p, .ie7 #footer-bottom p, .ie7 #footer-bottom ul li, .ie7 #social-heading a {display: inline; zoom: 1; } .ie7 #email-form, .ie8 #email-form {padding: 7px 10px 0 10px; height: 25px;} .ie7 header, .ie8 header, .ie9 header {top: 0;} .ie7 #main-nav #icon, .ie8 #main-nav #icon, .ie9 #main-nav #icon {height: 82px; width: 82px; top: -8px; left: 50%;} .ie7 nav ul li {height: 66px;} /* AGENT ONLY */ .agent-header {font-family:Arial, Helvetica, sans-serif;} .agent-header #top-nav .info {font-size:0.825em; line-height:1.45em; padding-top:0; color:#575757;} .agent-header #top-nav .info strong {font-weight:bold; color:#061556;} .agent-header #top-nav .info a {color:#0073bb;} .agent-header #top-nav .phone {color:#febd11; font-family:"proxima-nova-n4","proxima-nova", sans-serif; font-size:1.55em; font-weight:bold; float:right;} .agent-footer #top-nav .phone a {color:#febd11;} .agent-footer #footer-contact .listing {position:relative; width:470px; padding-right:20px; float:left;} .agent-footer #footer-contact .listing img {position:absolute; left:0; top:0;} .agent-footer #footer-contact .listing h3 {color:#061556; font-weight:bold; padding:3px 0 3px 127px; text-transform:uppercase;} .agent-footer #footer-contact .listing p {padding-left:127px; font-size:0.75em; color:#575757; font-family:Arial, Helvetica, sans-serif; line-height:1.4em} .agent-footer #footer-contact .listing a {text-transform:none; color:#0066a6; font-weight:bold;} .agent-footer #footer-contact .listing .sep {padding:0 5px} .agent-footer #footer-contact .connect {position:relative; width:199px; height:55px; float:left;} .agent-footer #footer-contact .connect p {display:block; overflow:hidden; width:103px; height:16px; background:url(img/connect-with-us.png); text-indent:-9999px; position:absolute; top:20px; left:0; padding-top:0;} .agent-footer #footer-contact .connect .twitter {display:block; overflow:hidden; width:22px; height:19px; background:url(img/twitter-sml.png); text-indent:-9999px; position:absolute; top:18px; left:159px;} .agent-footer #footer-contact .connect .facebook {display:block; overflow:hidden; width:13px; height:27px; background:url(img/facebook-sml.png); text-indent:-9999px; position:absolute; top:13px; left:122px;} .agent-footer #footer-contact .phone {color:#febd11; font-family:"proxima-nova-n4","proxima-nova", sans-serif; font-size:1.55em; font-weight:bold; float:left; width:187px; padding-top:17px; text-align:right;} .agent-footer #footer-contact .phone a {color:#febd11;} /* Ken Burns */ .harmony-hero { animation:move 7s ease infinite; /* Change this to alternate to stop the loop. */ -ms-animation:move 7s ease infinite; -webkit-animation:move 7s ease infinite; -0-animation:move 7s ease infinite; -moz-animation:move 7s ease infinite; position: absolute; left:0px; top:0px; -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */ animation-iteration-count: 1; } @-webkit-keyframes move { from { transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ -webkit-transform: scale(1.5); /* Safari and Chrome */ -o-transform: scale(1.5); /* Opera */ -moz-transform: scale(1.5); /* Firefox */ } to { transform: scale(1.0); -ms-transform: scale(1.0); /* IE 9 */ -webkit-transform: scale(1.0); /* Safari and Chrome */ -o-transform: scale(1.0); /* Opera */ -moz-transform: scale(1.0); /* Firefox */ } } .harmony-banner {width: 100% !important; left:0!important;} hr{ border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } #top-nav p.already-booked-mobile {display: none;} .home-intro-content-mobile {top: 10%;} .showcase-mobile { height: 500px !important;} /* Ref: #19511 */ #hm-map-tracker { border-top: 6px solid #fff; border-bottom: 0px solid #fff; } #hm-map-tracker > img { width: 100%; height: auto; display: block; }