/* this is a custom CSS stylesheet */ /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the appearance of general elements * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ /*a[href^="tel:"]:before { content: "\260E"; /*display: block;*/ margin-right: 0.2em; }*/ * { margin: 0; } html, body { min-height: 100%; height:100%; } .body{ background-color:#e9ece5; color: #666; /*provides a fade to the whole page */ scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #ffffff; scrollbar-darkshadow-color: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-track-color: #000000; } .wrapper { min-height: 100%; margin: 0 auto -129px; /* the bottom margin is the negative value of the footer's height */ } footer, .push { min-height: 129px; /* '.push' must be the same height as '.footer' */ } .page-header { margin:20px 0 20px 0; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the appearance of navbar and section elements * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ nav.navbar{ // Animation -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .navbar-brand { position: absolute; width: 80%; left: 10%; top: 0px; text-align: center; margin: auto; } .navbar-brand>a>img { display: inline-block; } #topnav1{ height:275px; } .navbuttons{ border-top:2px solid #F27126; /*border-bottom:2px solid #F27126;*/ } section#top{ margin: 280px 0 0 0; } section#bottom{ margin: 800px 0 0 0; } #destinationsNav>nav.navbar { margin-bottom:0; min-height:0; border-top:2px #F27126 solid; border-bottom:2px #F27126 solid; background-color:#f8f8f8; font-size:1.1em; border-radius:0px; padding:0 10px 0 10px; } #destinationsNav>nav.navbar>div>div>a{ color:#333 !important; } #destinationsNav>nav.navbar>div>div>a>img{ max-height:50px; } #destinationsNav>nav.navbar>div>div:hover, #topnavbar1>ul>li:hover{ background-color: rgba(102,102,102,.1); color:#555 !important; } #destinationsNav>nav.navbar>div>div.col-xs-2 { border-right: 1px rgba(252, 199, 10, .3) solid; } #navphone{ background-color:rgba(242, 113, 38, .8);/**/ height:60px; } .navtopcontainer{padding-right:0px;padding-left:15px;margin-right:auto;margin-left:auto;}/*background-color:whitesmoke; background-color:#f8f8f8;<-768*/ .navtopcontainer>div.collapse.in{border-bottom:2px solid #999;} .navtopcontainer>div.collapse{border-bottom:0px;} @media (min-width:768px){.navtopcontainer{width:98%;border-bottom:0px;}#topnav1>div>a>img.img-logo1 {max-width:270px;height:auto;margin-top:-14px;}#topnav1{height:144px !important;}section#top{margin: 142px 0 0 0;}#topnav1.home{height:100px !important;}section#top.home{margin: 100px 0 0 0;}#topnav1>div.spacer.mdhide{display:none;}.navbuttons.home{border-bottom:2px solid #F27126;}} @media (min-width:992px){.navtopcontainer{width:970px;border-bottom:0px;}.navbar-right{margin-right:10px;}#topnav1>div>a>img.img-logo1 {max-width:450px;height:auto;margin-top:17px;}#topnav1{height:249px !important;}section#top{margin: 247px 0 0 0;}#topnav1.home{height:202px !important;}section#top.home{margin: 200px 0 0 0;}#navphone>a{font-size:20px;color:white !important;}#destinationsNav>nav.navbar{border-top:0px none;}.navbuttons.home{border-bottom:0px solid #F27126;}} .btn-warning{background-image: none ;border-color: rgba(242, 113, 38, .8);background-color: rgba(242, 113, 38, .8);} /*@media (min-width:1200px){.navtopcontainer{width:1170px;border-bottom:0px;}#topnav1>div>a>img.img-logo1 {max-width:900px;height:auto;margin-top:0px;}#topnav1{height:255px !important;}section#top{margin: 245px 0 0 0;}#destinationsNav.navlarge {margin:80px 0 0 0 ;}}*/ #topnav1.shrink{ height:80px !important; } #topnav1.shrink>div.navbar-brand>a>img{ height:49px; width:auto; } #topnav1.shrink>#destinationsNav>nav.navbar { border-top:2px #F27126 solid; } #topnav1.shrink>div.navbar-brand>a>img.img-logo1 { margin-top:0px !important; } @media (min-width:992px){ #topnav1.shrink>div.navbar-brand>a>img.img-logo1 { margin-top:-14px !important; } } #topnav1.shrink>img.img-advp,#topnav1.shrink>div.spacer-largest,#topnav1.shrink>.socialTopNav{ display:none; } .navbuttons.shrink, .navbuttons.home.shrink{ border-top:0px solid #F27126; border-bottom:0px solid #F27126; } @media only screen and (max-width : 767px) { #topnav1, #topnav1.home{ height:140px; } section#top,section#top.home{ margin: 140px 0 0 0; } #topnav1.shrink>div.navbar-brand>a>img{ height:35px; width:auto; } #destinationsNav>nav.navbar { margin-top:20px; } #destinationsNav.show>nav.navbar { margin-top:0px; } .navbuttons{ border-top:0px solid #F27126; border-bottom:0px solid #F27126; background-color:#f8f8f8; } .navbar-collapse.collapse.in { margin-bottom: -30px; } } /*New Column Class for showing 7 columns*/ .col-xs-7cols{ position: relative; min-height: 1px; width: 14.285714%; float: left; } .navLogo { padding:7px; } .navbar-toggle { float: Left; padding: 12px 12px; border: 0px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-radius: 0; margin-left: 10px; margin-top: 10px; } .panel.quicklinks{ border: 0px; } .panel-default.quicklinks > .panel-heading { background-color: #f0ad4e; /*margin-top: 5px;*/ padding: 15px 15px 30px 15px; color: white !important; background-image: none; } img.panel-title { max-height:50px; } #mobileHeaderContainer { position:relative; width:100% max-width:1000px; } #mobileHeaderContainer .img-responsive { width: 100%; height: auto; } #mobileHeaderContainer .heroBtn { position: absolute; width:100%; top: 50%; left:50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); background-color: rgba(240, 173, 78, 0.75); color: white !important; font-size: 16px; padding: 12px 24px; border: none; cursor: pointer; text-align: center; text-transform: uppercase; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the styles of the Footer * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .footer { background-color:#725540; } .copy { text-align:center; font-size:1em; padding-top: 25px; padding-bottom: 10px; color:#EAC58C; } .copycontainer { border-top: 1px white solid; } certcontainer { background-color:white !important; border-top: 1px white solid; } img.footerlogo{ position:relative; width:250px; height:auto; bottom:-63px; z-index:10; } .img-social.socialFoot{width:30px;} .phoneFoot{ color:white; font-size:30px; } .afoot{ color:white; } .phoneFoot:hover, .afoot:hover { color:#EAC58C; } @media (max-width:569px){.phoneFoot{font-size:20px;}.img-social.socialFoot{width:25px;}} @media (min-width:992px){.phoneFoot{font-size:30px;}} /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the styles of the sidebar * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .quotefloat.affix-top { display:none; } .quotefloat.affix { visibility:visible; bottom:350px; position:fixed; width: 25%; } /*.quotefloat.affix-bottom { display:none; }*/ .panel-default.sbquicklinks > .panel-heading { background-color: #e38d13; margin-top: 5px; padding: 15px 15px 15px 15px; color: white !important; background-image: none; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the images * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .img-advp { height:35%; width:auto; } #topnav1>div>a>img.img-logo { max-width:300px; height:auto; } .img-dest.img-thumbnail { background-color: rgba(234, 197, 140, 1); border-bottom-right-radius:0px; border-bottom-left-radius:0px; border-bottom:1px solid #eac58c; border: 0px; } .img-social { width:30px; } div.footer>div>div>div>div>img.img-advp {/*a>*/ width:100%; } .grow {transition: all .2s ease-in-out;} .grow:hover { /*position:relative; top:-25px; left:-35px; width:500px; height:auto; display:block; z-index:999;*/ transform: scale(1.1); } @media only screen and (max-width : 767px) { #topnav1>div>a>img.img-logo { max-width:200px; height:auto; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the header styles such as h1, h2, h3 * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ div.tab-content > div > h3 { /*text-align:center; background: -webkit-gradient(linear, 0 0, 100% 0, from(white), color-stop(0.5, rgb(242, 113, 38)), to(white)); color:white; */ padding:5px 0 5px 0; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the font sizes Regular body is 14 pt. Small already exists at 85% of the body text size * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .smallest { /* 8px*/ font-size:8px; } .smaller { /* 10px*/ font-size:8px; } /*Small = 85% of Body text, regularly 12*/ /*Regular is 14px*/ .medium { /* 18px*/ font-size:18px; } .large { /* 20px*/ font-size:20px; } .larger { /* 25px*/ font-size:25px; } .largest { /* 30px*/ font-size:30px; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the spacers * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .spacer-smallest { /* 1px*/ padding: 1px 0 0 0; } .spacer-smaller { /* 5px*/ padding: 5px 0 0 0; } .spacer-small{ /* 10px*/ padding: 10px 0 0 0; } .spacer { /* 15px*/ padding: 15px 0 0 0; } .spacer-large { /* 20px*/ padding: 20px 0 0 0; } .spacer-larger { /* 25px*/ padding: 25px 0 0 0; } .spacer-largest { /* 30px*/ padding: 30px 0 0 0; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the colors of the site * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .white { color:white !important; } .black { color:black !important; } .footercolor { color:#725540; } .bg-brown { background-color:#725540; } .creme { color:#EAC58C; } .bg-creme { background-color:#EAC58C; } .orange { color:#F27126; } .bg-orange { background-color:#F27126; } .yellow { color:#fcc70A; } .bg-yellow { background-color:#fcc70A; } a.thumbnail { background-color:#f8f8f8; } a.thumbnail:hover { background-color:rgba(102,102,102,.1); text-decoration:none; border-color:#725540; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the default carousel styles * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ /*Styles for the home carousels images*/ .carousel-inner { max-height:300px; overflow:hidden; } .carousel-linked-nav>li>a>img{ max-height:100px; } @media only screen and (max-width : 767px) { .carousel-inner { max-height:100px; } .carousel-indicators { display:none; } .carousel-control { font-size:10px; } .carousel-linked-nav { display:none; } } @media only screen and (max-width : 991px) { .carousel-inner { max-height:200px; } } .carousel-inner .item img.carousel1 { position:relative; top:50%; transform: translateY(-12%); } .carousel-inner .item img.carousel2 { position:relative; top:50%; transform: translateY(-30%); } .carousel-inner .item img.carousel3 { position:relative; top:50%; transform: translateY(-45%); } .carousel-inner .item img.carousel4 { position:relative; top:50%; transform: translateY(-38%); } .carousel-inner .item img.carousel5 { position:relative; top:50%; transform: translateY(-20%); } .carousel-inner .item img.carousel6 { position:relative; top:50%; transform: translateY(-42%); } .carousel-inner .item img.carousel7 { position:relative; top:50%; transform: translateY(-55%); } /*Styles for the destination header "carousels" images*/ #destinationCarousel .carousel-inner { max-height:300px; } #destinationCarousel .carousel-inner .item img.carousel1 { position:relative; top:50%; transform: translateY(-12%); } #destinationCarousel .carousel-inner .item img.carousel2 { position:relative; top:50%; transform: translateY(-30%); } #destinationCarousel .carousel-inner .item img.carousel3 { position:relative; top:50%; transform: translateY(-45%); } #destinationCarousel .carousel-inner .item img.carousel4 { position:relative; top:50%; transform: translateY(-38%); } #destinationCarousel .carousel-inner .item img.carousel5 { position:relative; top:50%; transform: translateY(-20%); } #destinationCarousel .carousel-inner .item img.carousel6 { position:relative; top:50%; transform: translateY(-42%); } #destinationCarousel .carousel-inner .item img.carousel7 { position:relative; top:50%; transform: translateY(-55%); } #destinationCarousel .carousel-inner .item img.carouselmk { position:relative; top:50%; transform: translateY(-25%); } #destinationCarousel .carousel-inner .item img.carouselak { position:relative; top:50%; transform: translateY(-25%); } #destinationCarousel .carousel-inner .item img.carouselhs { position:relative; top:50%; transform: translateY(-25%); } #destinationCarousel .carousel-inner .item img.carouselep { position:relative; top:50%; transform: translateY(-22%); } #destinationCarousel .carousel-inner .item img.carouseltl { position:relative; top:50%; transform: translateY(-15%); } #destinationCarousel .carousel-inner .item img.carouselbb { position:relative; top:50%; transform: translateY(-45%); } #destinationCarousel .carousel-inner .item img.carouselds { position:relative; top:50%; transform: translateY(-35%); } #destinationCarousel .carousel-inner .item img.carouseldbw { position:relative; top:50%; transform: translateY(-32%); } #destinationCarousel .carousel-inner .item img.carouseldd { position:relative; top:50%; transform: translateY(-20%); } #destinationCarousel .carousel-inner .item img.carouseldlp { position:relative; top:50%; transform: translateY(-39%); } #destinationCarousel .carousel-inner .item img.carouselca { position:relative; top:50%; transform: translateY(-48%); } #destinationCarousel .carousel-inner .item img.carouselsw { position:relative; top:50%; transform: translateY(-5%); } .carousel-caption { color: white; background-color: rgb(59, 58, 54); font-size: 1.5em; line-height: 250%; bottom: 5%; right: 0; left: 0; background: linear-gradient(to right, rgba(59, 58, 54, 0.1), rgba(59, 58, 54, 0.5), rgba(59, 58, 54, 0.5) , rgba(59, 58, 54, 0.5) , rgba(59, 58, 54, 0.1)); } .carousel-caption p{ font-size:3em; margin-right:15%; margin-left:15%; } .carousel-indicators { bottom:0px; left:10%; } .carousel-control>.glyphicon { font-size:2.5em !important; } .nav-justified>div>li>a { text-align: center; } .nav-pills>li>a { color:black; } .nav-pills>li>a>p { margin:0; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { background-color:transparent; } .nav-pills>li.active>a>img, .nav-pills>li.active>a:focus>img, .nav-pills>li.active>a:hover>img { color: #fff; border:6px #F27126 solid; border-radius:20px; background-color:transparent; } .follow { border-bottom:1px black solid; text-align:center; margin:15px 0 5px 0; padding:10px; color:white !important; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the hr tags * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .bloghr { margin:30px 0 30px 0; height: 1px; background: #F27126; background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, #F27126)); } div.tab-content > div > .bloghr { margin:10px 0 40px 0; } .headinghr { margin:2px 0 13px 0; height: 1px; background: #F27126; background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, #F27126)); } .brownhr { margin:2px 0 20px 0; height: 1px; background: #725540; background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, #725540)); } .wftyellow { color: #fcc70A; background-color: rgba(252, 199, 10, .5)} .equal { display: flex; display: -webkit-flex; flex-wrap: wrap; } @media (min-width: 768px) { .row.equal { display: flex; flex-wrap: wrap; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the Destination Pages * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .destheader { position: relative; bottom:-580px; color:white; font-size:3.5em; text-align:center; background-color: rgb(59, 58, 54); background: linear-gradient(to right, rgba(59, 58, 54, 0.1), rgba(59, 58, 54, 0.5), rgba(59, 58, 54, 0.5) , rgba(59, 58, 54, 0.5) , rgba(59, 58, 54, 0.1)); } #wdwheader { background: url(../img/wdw/wdwheader.png) fixed; background-repeat:repeat; background-size: cover; overflow:hidden; min-height:300px; } #disneylandheader { background: url(../img/disneyland/disneylandheader.png) fixed ; background-repeat:repeat; background-size: cover; overflow:hidden; min-height:300px; } #disneycruiseheader { background: url(../img/cruise/disneycruiseheader.png) fixed; background-position: center bottom; background-repeat:repeat; background-size: cover; overflow:hidden; min-height:300px; } #adventuresheader { background: url(../img/adventures/adventuresheader.png); background-position: center center; background-repeat:no-repeat; background-size: cover; overflow:hidden; min-height:300px; } #aulaniheader { background: url(../img/hawaii/aulaniheader.png) fixed; background-position: center bottom; background-repeat:no-repeat; background-size: cover; overflow:hidden; min-height:300px; } #otherheader { background: url(../img/other/otherheader.png) fixed; background-position: center bottom; background-repeat:repeat; background-size: cover; overflow:hidden; min-height:300px; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the styles on a form * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .form-group > .col-sm-2 { padding-left:0px; } .form-group > .col-sm-10, .form-group > .col-sm-4 { padding-right:0px; } /* Styles for the Agent Card footer*/ .panel-footer.agentPanel { background-color: #ffffff; border-top: 0px;} h2.noSpace {margin-top:0px;} /*Styles for the image checkboxes*/ .nopad { padding-left: 0 !important; padding-right: 0 !important; } /*image gallery*/ .image-checkbox { cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 4px solid transparent; margin-bottom: 0; outline: 0; } .image-checkbox input[type="checkbox"] { display: none; } .image-checkbox-checked { border-color: #4783B0; } .image-checkbox .fa { position: absolute; color: #4A79A3; background-color: #fff; padding: 10px; top: 0; right: 0; } .image-checkbox-checked .fa { display: block !important; } /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the styles for the Google Custom Search * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ---------------------------------------------------------------------------------------------------------------------------------------------- * * Define the styles for the Iframes from Disney * * ----------------------------------------------------------------------------------------------------------------------------------------------*/ .responsive-iframe { position: relative; overflow: hidden; width: 100%; } .responsive-iframe-item{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }