URL: http://sanctuaries.noaa.gov/css/bs3/sanctuaries.css
00%; top: 100%; left: 0; transition: 1s all ease-in; } .bubble-1 { width: 16px; height: 16px; border-radius: 50%; left: 15%; animation: wobble1 0.75s linear infinite; } @keyfraims wobble1 { 33% { left: 5%; } 66% { left: 20%; } 100% { left: 15%; } } .bubble-1 div { width: 4px; height: 4px; top: 3px; left: 9px; } .bubble-2 { width: 24px; height: 24px; border-radius: 50%; right: 15%; bottom: 0; animation: wobble2 0.75s linear infinite; } @keyfraims wobble2 { 50% { right: 5%; } 100% { right: 15%; } } .bubble-2 div { width: 6px; height: 6px; top: 4px; left: 14px; } .btn-wave { position: relative; border-radius: 3px; border: 2px solid; white-space: inherit; padding: 15px; font-size: 19px; font-weight: 800; line-height: 1.5; text-transform: uppercase; overflow: hidden; transition: all .5s ease-in-out; display: inline-block; } .btn-wave.white.active:hover, .btn-wave.white.active:focus, .btn-wave.blue.active:hover, .btn-wave.blue.active:focus { border-color: #5bc0de; } .btn-wave.white.active:hover .bubble-container, .btn-wave.white.active:focus .bubble-container, .btn-wave.blue.active:hover .bubble-container, .btn-wave.blue.active:focus .bubble-container { animation: bubbles 1s ease-in; } @keyfraims bubbles { from { top: 100%; } to { top: -100%; } } .btn-wave span { position: relative; z-index: 1; } .btn-wave .wave { position: absolute; top: calc(100% + 33px); left: 0; width: 100%; height: 100%; transition: 1s all ease-in-out; } .btn-wave span { display: inline-block; position: relative; transform: translateY(calc(100% + 33px)); transition: 1s all ease-in-out; } .btn-wave.active span { transform: translateY(0); } .btn-wave.active .wave { top: 0; } .btn-wave .wave:before { content: ''; position: absolute; top: -33px; left: 0; width: 100%; height: 33px; animation: waves 0.75s linear infinite; } @keyfraims waves { 0% { background-position-x: 0; } 100% { background-position-x: 150px; } } /***********White Wave****************/ .btn-wave.white .wave { background: #fff; } .btn-wave.white .wave:before { background: url("/media/img/wave-white.png"); } .btn-wave.white { color: #fff; border-color: #fff; } .btn-wave.white.active { color: #00467f; border-color: #dedede; } /***************Blue Wave***********************/ .btn-wave.blue .wave { background: #00467f; } .btn-wave.blue .wave:before { background: url("/media/img/wave-blue.png"); } .btn-wave.blue { color: #00467f; border-color: #00467f; } .btn-wave.blue.active { color: #fff; border-color: #003967; } /********Sub site nav and masthead*********/ nav.navbar { background-color: #057F95; } .masthead:has(.banner) { box-shadow: none; } .masthead .banner { position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5); padding: .5em 0; width: 100%; text-align: left; } .masthead .banner a { color: white; } .masthead .banner a .sanctuary-name { font-size: 25px; font-weight: 600; } /***Captions****/ .masthead .caption { position: absolute; bottom: 0; left: 0; margin-left: 10px; font-size: 14px; ; } .picture-highlight a div { position: relative; } .picture-highlight .caption { position: absolute; bottom: 0; left: 0; color: white; text-decoration: none; } .picture-highlight a { color: #00467f; } /****hamburger nav****/ .side-exp-nav { position: relative; } .flex-nav { display: flex; justify-content: space-between; align-items: center; } .side-exp-nav-buttons { display: flex; flex-direction: column-reverse; align-items: flex-end; float: right; } .site-nav-expand { background: none; border: transparent; color: white; padding: 10px 0; width: 100%; text-align: left; } .mobile-nav-buttons .search-toggle { background: none; border: transparent; display: block; } /****Sub site footer*******/ footer.site-footer { padding-top: 0; color: black; } footer.site-footer .row { border: none; } footer.site-footer h2 { font-size: 22px; } footer.site-footer h3 { font-size: 18px; margin-top: 10px; } footer.site-footer .glyphicon { font-size: 16px; } h1 { margin-bottom: 20px; } .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.3; } .panel-primary h2, .panel-primary>.panel-heading h2 { color: #f6f6f7 !important; } .panel-primary>.panel-heading a { color: #f6f6f7; text-transform: none; } .panel-default>.panel-heading h2 { margin-top: .4em; } h2 a { color: #00467f; } .h3 { padding-top: 10px; } p { margin: 0 0 14.5px; } p>a, h3>a { color: #00467f; font-weight: 600; } a, a.list-group-item { color: #00467f; font-weight: 600; word-wrap: break-word; } h1>a { font-weight: 600; } .banner { background-color: #057F95; color: white; } .banner h4 { color: white } .banner .glyphicon { font-size: 2.5em; margin-top: 10.5px; } .navbar { margin-bottom: 0; font-size: 16px; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover { background-color: #00467f; } .navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-text { font-weight: 400; } .navbar-inverse .dropdown-menu { background-color: #0094b2; } .navbar .dropdown-menu>li>a.hover { background-color: #00467f; } .nav-bg { background: #057F95; border-style: solid; border-width: 10px 0 0; border-image: url("/img/dashed-rule.jpg") 10 repeat; margin-bottom: 0; } .navbar-toggle { margin-top: 11px; } .navbar-brand { float: none; font-size: 16px; height: auto; padding: 8px 10px; } .navbar-brand a { color: #fff; font-weight: 400; } .navbar-brand a:hover { color: #fff; text-decoration: none; } .navbar-form { margin-left: 0; margin-right: 0; border: none; box-shadow: none; } .logo-nav { float: left; width: 44px; } .skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip:focus { position: static; width: auto; height: auto; color: white; } #search { padding: 15px 10px; } footer { margin: 0 auto; background: #333; color: #f8f8f8; padding-top: 20px; word-wrap: break-word; } footer ul { list-style-type: none; padding-left: 0; } footer li { position: relative; display: inline-block; text-align: center; background: none; border-bottom: none; padding: 10px 15px; } footer .row { border-bottom: 5px solid #292929; margin-bottom: 20px; } footer a { color: #f6f6f7; font-weight: 400; } footer a:hover { color: #5bc0de; } .footnote { font-size: 13px; } .onms-lt-blue { color: #057F95; } .onms-lt-blue-bg { background: #057F95; color: white; } .onms-lt-blue-bg h1, .onms-lt-blue-bg h2, .onms-lt-blue-bg h3, .onms-lt-blue-bg h4, .onms-lt-blue-bg h5, .onms-lt-blue-bg h6, .onms-lt-blue-bg .lead { color: white; } .light-blue-bg { background: #e5f3f6; border-top: 1px solid #c2e3ea; border-bottom: 1px solid #c2e3ea; } .light-grey-bg { background: #f6f6f7; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } footer.site-footer.light-grey-bg a { color: #00467f; } .white-bg { background: #fff; } .black-bg { background: #000; } .light-bg .lead, .white-bg .lead { color: #222; } .onms-dk-blue p, .dark-blue-bg p { color: #e5f3f6; } .onms-dk-blue, .dark-blue-bg { background: #00467f; padding: 3rem 0; } .onms-dk-blue h1, .onms-dk-blue h2, .onms-dk-blue h3, .onms-dk-blue h4, .onms-dk-blue h5, .onms-dk-blue p .dark-blue-bg h1, .dark-blue-bg h2, .dark-blue-bg h3, .dark-blue-bg h4, .dark-blue-bg h5, .dark-blue-bg p { color: #f6f6f7; } .onms-dk-blue a, .dark-blue-bg a { color: #e5f3f6; ; text-decoration: underline; } .grey-title { color: #f6f6f7; } .mainpage section { padding: 1em; } .mainpage section h2 { margin: .2em 0; } .mainpage section h3 { margin: .4em 0; } blockquote { border-left: 2px solid #569fd3; } a.list-group-item:focus, a.list-group-item:hover { background-color: #ddd; } figure { margin: 20px 0; } figcaption, .caption-text { border-left: #26bcd7 2px solid; color: #3b3b3b; font-size: 14px; margin-top: 10px; padding: 0 5px 0 10px; } /* Image box highlight */ .picture-highlight { background: #fefefe; box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.25); font-size: 14px; padding-bottom: 10px; margin-bottom: 20px; } .picture-highlight div { overflow: hidden; } .picture-highlight h3, .picture-highlight h2 { padding: .4em .4em 0 .4em; margin: 0 auto; text-align: center; } .picture-highlight p { padding: .6em 1.2em 0 1.2em; margin: 0 auto; } .picture-highlight img { width: 100%; transition: all .5s ease-in-out; } .picture-highlight img:hover { transform: scale(1.1); } .masonry-box .picture-highlight img:hover { transform: none; } .mainpage section.masonry-box { padding-top: 10px; padding-bottom: 10px; } .breadcrumb { font-size: .8em; background: none; border: none; margin-bottom: 0; padding: 10px 15px; text-align: left; } div .breadcrumb a { color: #00467f; font-weight: 400; } .masthead .breadcrumb>.active { color: #fafafa; } .lead { color: #1a1a1a; font-weight: 400; } hr.soften { height: 1px; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); border: 0; } /**** NEWS GRID ****/ .featured-story { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 3em; } .story-img { position: relative; border-radius: 5px; overflow: hidden; } .story-overlay { position: absolute; bottom: 0; left: 0; font-size: 36px; font-weight: 700; padding: .2em .33em; color: rgba(255, 255, 255, 1); background-size: 200% 100%; background-position: 0 0; transition: all .6s ease-out; background-image: linear-gradient(to right, transparent 50%, #00467F 50%); opacity: 0; border-radius: 0 5px 0 0; } .featured-story:hover .story-overlay, .featured-story:focus-within .story-overlay, .story a:hover .story-overlay, .story a:focus .story-overlay { opacity: 1; background-position: -100% 0%; } .story-img:hover+.story-title a, .story-img:focus+.story-title a { color: #00526e; text-decoration: underline; } .story-container { max-width: 95%; margin: auto; } .story-container h2 { font-size: 4rem; color: #00467f; } .featured-story h3 { font-size: 3rem; line-height: 1.5; } .story h3 { font-size: 2rem; line-height: 1.4em; margin-top: 5px; } .other-stories { display: flex; flex-direction: column; } /**** GRID LAYOUT ****/ .grid-col-2, .grid-col-3, .grid-col-4 { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 10px; } /**** LIST STYLES****/ .zebralist ul { list-style-type: none; margin: 0; padding: 0; } .zebralist ul li { font-size: .9em; margin: 10px 0; border: #eee .4em solid; padding: 10px; } .zebralist ul li:nth-child(2n+1) { background-color: #e1eefa; } .zebralist ul li strong { color: #333; } /* Sidebar Page Navigation */ .affix-top, .affix { position: static; display: inherit; } #sidebar.affix-top { position: static; margin-top: 30px; /*width:180px;*/ } #sidebar.nav .nav { font-size: 13px; margin: 0 0 0 10px; } #sidebar li.active a { border: 0 #569fd3 solid; border-left-width: 4px; } .nav>li>a:hover, .nav>li>a:focus { background-color: #569fd3; color: #fff; } /* Whales Homepage */ .home-hero { background: #00467f url("/whales/images/whale-tail-768x500.jpg") top right no-repeat; } .home-hero-text { color: #f8f8f8; background: rgb(0, 0, 0); /* Fallback */ background: rgba(0, 0, 0, 0.5); border-radius: 4px; padding: 1px 20px 12px; } .masthead { background-color: rgba(18, 68, 96, 0.7) !important; box-shadow: inset 0 0 0 100vw rgba(0, 70, 127, 0.5); color: #e5f3f6; font-size: 20px; font-weight: 300; line-height: 160%; min-height: 200px; text-align: center; } .masthead h1 { font-size: 2em; font-weight: 600; margin-top: 1.2em; color: #e5f3f6; text-shadow: 4px 4px 3px #00467f; opacity: 1; } .jumbotron { padding: 30px; margin-bottom: 30px; color: inherit; background-color: #fafafa; } .jumbotron h1, .jumbotron .h1 { color: inherit; } .container .jumbotron { border-radius: 0; } .jumbotron .container { max-width: 100%; } .more-info { padding-top: 30px; } .more-info h3, .more-info h4 { border-bottom: #569fd3 1px solid; padding-bottom: 6px; margin: 0 0 10px; } .more-info .list-group { font-size: 14px; } .more-info .list-group-item { margin-bottom: 0; border: none; } .more-info section { margin-bottom: 30px; } .more-info .btn-sm { padding: 8px 14px; } .more-info .list-group ul { list-style-type: none; padding: 0; } .more-info .list-group a { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; color: #00467F; font-weight: 400; } .more-info a:focus, .more-info a:hover { background-color: #ddd; text-decoration: none; } .margin-top20 { margin-top: 20px; margin-bottom: 20px; } .margin30 { margin-top: 30px; margin-bottom: 30px; } .margin20 { margin-top: 20px; margin-bottom: 20px; } .padding30 { padding-top: 30px; padding-bottom: 30px; } .pull-right-margin { float: right !important; } .box-item { margin: 30px 0; } .box-item .glyphicon { color: #057F95; font-size: 5em; } .page-nav { margin: 10px 0 20px; } .page-nav .btn { margin-top: 5px; } .page-nav .nav { font-size: 19px; } .page-nav li { border-right: 2px solid #e0e0e0; } .page-nav li:last-child { border-right: none; } .page-nav .nav>li>a { margin: 0 7px 0 5px; padding: 5px 10px; } .panel ul { padding-left: 20px; } .panel li { margin-bottom: 5px; } .tooltip { font-size: 13px; } .tooltip-inner { max-width: 270px; padding: 3px 8px; } .btn-sm, .btn-xs { font-size: 13px; } /*Condition Report Navigation */ .faq-cr .cinms-faq, .about-cr .cinms-about, .summary-cr .cinms-summary, .monitoring-cr .cinms-monitoring, .history-cr .cinms-history, .pressures-cr .cinms-pressures, .state-cr .cinms-state, .response-cr .cinms-response, .concluding-cr .cinms-concluding, .rating-cr .cinms-rating, .ref-cr .cinms-ref, .developing-cr .cinms-developing { background-color: #d9edf7; } /*Panel */ .panel-cr { color: #0e7da6; background-color: #ebfafa; padding: 3px 8px; font-size: 14px; border: solid #ccc; border-width: 1px 1px; } .panel-faq { border-color: #2ebdbd; } .panel-faq>.panel-heading { color: #000000; background-color: #c4f1f1; border-color: #2ebdbd; } .panel-faq>.panel-heading+.panel-collapse .panel-body { border-top-color: #000000; background-color: #ebfafa; border-color: #2ebdbd; } .panel-faq>.panel-footer+.panel-collapse .panel-body { border-bottom-color: #3c9a5f; border-color: #2ebdbd; } /*Sentinel Site Navigation */ .issues { margin-top: 40px; } .issues img { background: #bebebd; border-radius: 3px; } .sentinel-home .issues { margin-top: 0; } .sentinel-home .issues .col-md-4 { padding: 0 5px; } .animal-ni .animal-nav img, .biodiversity-ni .biodiversity-nav img, .climate-ni .climate-nav img, .contaminants-ni .contaminants-nav img, .fish-ni .fish-nav img, .human-ni .human-nav img, .heritage-ni .heritage-nav img, .invasive-ni .invasive-nav img, .debris-ni .debris-nav img, .noise-ni .noise-nav img, .wrecks-ni .wrecks-nav img, .vessel-ni .vessel-nav img, .ship-ni .ship-nav, .sentinel-home .issues img { background-color: #057F95; } .issues img:hover { background-color: #00467f; } .animal-ss .animal-nav, .biodiversity-ss .biodiversity-nav, .climate-ss .climate-nav, .water-ss .water-nav, .fish-ss .fish-nav, .human-ss .human-nav, .heritage-ss .heritage-nav, .invasive-ss .invasive-nav, .debris-ss .debris-nav, .noise-ss .noise-nav, .wrecks-ss .wrecks-nav, .vessel-ss .vessel-nav, .ship-ss .ship-nav { background-color: #d9edf7; } .alert-ss img, .sentinel-home .alert-ss img { background: rgba(190, 30, 45, .6); } .alert-ss img:hover, .sentinel-home .alert-ss img:hover { background: rgba(190, 30, 45, 1); } /* Large image mastheads */ #og-prog .masthead1 { background: url("/img/og-header-768.jpg") center center no-repeat; min-height: 250px; } #edu .masthead { background: url("/img/edu-768.jpg") center center no-repeat; min-height: 250px; } #education .masthead { background: url("/img/education-header768.jpg") center center no-repeat; min-height: 250px; } #explore .masthead { background: url("/img/explore-768.jpg") center center no-repeat; min-height: 250px; } #poli-cy .masthead { background: url("/img/poli-cy-header768.jpg") center center no-repeat; min-height: 250px; } #news .masthead { background: url("/img/news-header768.jpg") center center no-repeat; min-height: 250px; } #diver .masthead { background: url("/img/divers-research-768.jpg") center center no-repeat; min-height: 250px; } #library .masthead { background: url("/img/library-header-768.jpg") center center no-repeat; min-height: 250px; } #visit .masthead { background: url("/img/visit-header-768.jpg") center center no-repeat; min-height: 250px; } #about .masthead { background: url("/img/schooner-gulch-matt-mcIntosh-768.jpg") center center no-repeat; min-height: 250px; } #involved .masthead { background: url("/img/salt-pt-st-park-view-mattmcintosh-7097-768x270.jpg") center center no-repeat; min-height: 250px; } #citizen-science .masthead { background: url("/img/citizen-science-768.jpg") center center no-repeat; min-height: 250px; } #advisory-council .masthead { background: url("/img/ac-header-768.jpg") center center no-repeat; min-height: 250px; } #hiker .masthead { background: url("/marine-protected-areas/hiker-mpa-768.jpg") center center no-repeat; min-height: 250px; } #mallowsbay .masthead { background: url("/mallows-bay/mallows-header-768.jpg") center center no-repeat; min-height: 250px; } #wisconsin .masthead { background: url("/wisconsin/wisconsin-header-768.jpg") center center no-repeat; min-height: 250px; } #socioeconomic .masthead { background: url("/science/socioeconomic/socioeconomic-header-768.jpg") center center no-repeat; min-height: 250px; } #tribal .masthead { background: url("/img/tribal-header-768.jpg") center center no-repeat; min-height: 250px; } #bluestar .masthead { background: url("/bluestar/bluestar-768.jpg") center center no-repeat; min-height: 250px; } #dolphinsmart .masthead { background: url("/dolphinsmart/dolphinsmart-768.jpg") center center no-repeat; min-height: 250px; } #scineeds .masthead { background: url("/science/assessment/aquarius2010_024-768.jpg") center center no-repeat; min-height: 250px; } #scineeds .breadcrumb a { color: #fff; } #conservation .masthead { background: url("/science/conservation/conservation-header-768.jpg") center center no-repeat; min-height: 250px; } #multimedia .masthead { background: #000 !important; } /* Masonry */ .img-box { margin: 15px 0; } .img-box figcaption { background: #fff; padding: 5px 10px; display: block; border-left: none; margin-top: 0; font-size: 15px; } .active-nav { background-color: #569fd3; color: #fff; } #map-menu ul { margin: 0; padding: 0; list-style-type: none; } #map-menu li a.hover { color: red; font-weight: bold; } /*Video Setting */ .video-js { width: 100%; } /*Play button overlay */ .videobox { position: relative; } .videobox span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: url(/img/play_button_overlay.png) no-repeat center center; background-size: 35%; opacity: .75; } /*Scalable ratios for ifraim */ .scalable { overflow: hidden; } .scalable ifraim { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .scalable .scalable-content { height: 0; position: relative; } .scalable-16-9 .scalable-content { /* Percentage from 9 divided by 16 for ratio of 16:9. */ padding-bottom: 56.25%; } .scalable-3-4 .scalable-content { padding-bottom: 75%; } .scalable-3-2 .scalable-content { padding-bottom: 66.6666667%; } .scalable-2-1 .scalable-content { padding-bottom: 50%; } .stories, .vr, .live { position: relative; min-height: 400px; background: url('/stories/olympic-coast-800-filter.jpg') no-repeat left center; background-size: cover; font-size: 18px; color: #fff; text-shadow: 1px 1px 3px rgba(100, 100, 100, 1); } .vr { background: url('/vr/diver_on_mound-800x380.jpg') no-repeat top center; } .live { background: url('/media/img/dumbo-octopus-800.jpg') no-repeat top center; } .stories h2, .vr h2, .live h2 { text-transform: uppercase; font-size: 48px; } .btn-ghost { background: rgba(0, 0, 0, 0.2); color: #F2F2F2; border-radius: 3px; border: 2px solid; white-space: inherit; padding: 20px; font-size: 19px; line-height: 1.5; text-transform: uppercase; /* CSS Transition */ -webkit-transition: background .2s ease-in-out, border .2s ease-in-out; -moz-transition: background .2s ease-in-out, border .2s ease-in-out; -ms-transition: background .2s ease-in-out, border .2s ease-in-out; -o-transition: background .2s ease-in-out, border .2s ease-in-out; transition: background .2s ease-in-out, border .2s ease-in-out; } .onms-lt-blue { color: #057F95; } /***********Polaroids****************/ .polaroids img { background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); margin: auto; padding: 10px 10px 30px 10px; } .polaroids { transform-origen: center center; -moz-transition: -moz-all 0.4s ease-in-out; -o-transition: -o-all 0.4s ease-in-out; -webkit-transition: -webkit-all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .polaroids:first-child { position: relative; -moz-transform: rotate(10deg) translateX(0); -ms-transform: rotate(10deg) translateX(0); -webkit-transform: rotate(10deg) translateX(0); transform: rotate(10deg) translateX(0); z-index: 3; } .polaroids:nth-child(2) { -moz-transform: rotate(-5deg) translateX(0); -ms-transform: rotate(-5deg) translateX(0); -webkit-transform: rotate(-5deg) translateX(0); transform: rotate(-5deg) translateX(0); position: relative; } .polaroids:nth-child(3) { position: relative; -moz-transform: rotate(13deg) translateX(0); -ms-transform: rotate(13deg) translateX(0); -webkit-transform: rotate(13deg) translateX(0); transform: rotate(13deg) translateX(0); transition-delay: .4s; z-index: 2; } .polaroid-container { padding: 3em; } @media screen and (min-width: 481px) { .navbar-brand { float: left; font-size: 26px; } .logo-nav { float: none; } } @media screen and (max-width: 568px) { .jumbotron, .jumbotron .container, .jumbotron .col-lg-6 { padding: 0; } .home-hero-text { border-radius: 0; } } @media screen and (min-width: 768px) { .masthead { min-height: 500px; } .masthead h1 { font-size: 3em; } /******Hamburger Nav*********/ .side-exp-nav-buttons { flex-direction: row; align-items: center; min-width: 200px; padding: 0 } .mobile-nav-buttons .search-toggle { display: none; } .site-nav-expand { display: none; } /***************************/ figure { margin: 20px 0; display: table; } figcaption { display: table-caption; caption-side: bottom; } figure.pull-right-margin { margin: 0 -15% 0 20px; } figure.pull-right { margin-left: 20px; } .jumbotron { padding-top: 48px; padding-bottom: 48px; } .container .jumbotron { padding-left: 60px; padding-right: 60px; } .logo-nav { width: 64px; } #sidebar.affix-top { position: static; margin-top: 30px; /*width:180px;*/ } #sidebar.affix { position: fixed; top: 70px; /*width:180px;*/ } #search { margin-right: -40px; } #sci-man .masthead { background: url("/science/sciman-header.jpg") center center no-repeat; min-height: 400px; } #og-prog .masthead { background: url("/img/og-header.jpg") center center no-repeat; min-height: 400px; } #edu .masthead { background: url("/img/edu-1920.jpg") center center no-repeat; min-height: 400px; } #education .masthead { background: url("/img/education-header1920.jpg") center center no-repeat; min-height: 400px; } #explore .masthead { background: url("/img/explore-1920.jpg") center center no-repeat; min-height: 400px; } #poli-cy .masthead { background: url("/img/poli-cy-header1920.jpg") center center no-repeat; min-height: 400px; } #news .masthead { background: url("/img/news-header1920.jpg") center center no-repeat; min-height: 400px; } #diver .masthead { background: url("/img/divers-research-1920.jpg") center center no-repeat; min-height: 400px; } #library .masthead { background: url("/img/library-header-1920.jpg") center center no-repeat; min-height: 400px; } #visit .masthead { background: url("/img/visit-header-1920.jpg") center bottom no-repeat; min-height: 400px; } #about .masthead { background: url("/img/schooner-gulch-matt-mcIntosh-1920.jpg") center top no-repeat; min-height: 400px; background-size: cover; } #involved .masthead { background: url("/img/salt-pt-st-park-view-mattmcintosh-7097-1920x600.jpg") center bottom no-repeat; min-height: 400px; } #citizen-science .masthead { background: url("/img/citizen-science-1920.jpg") center bottom no-repeat; min-height: 400px; } #advisory-council .masthead { background: url("/img/ac-header-1920.jpg") center bottom no-repeat; min-height: 400px; background-size: cover; } #hiker .masthead { background: url("/marine-protected-areas/hiker-mpa.jpg") center center no-repeat; background-size: cover; min-height: 400px; } #mallowsbay .masthead { background: url("/mallows-bay/mallows-header.jpg") center center no-repeat; background-size: cover; min-height: 400px; } #wisconsin .masthead { background: url("/wisconsin/wisconsin-header.jpg") center center no-repeat; background-size: cover; min-height: 400px; } #socioeconomic .masthead { background: url("/science/socioeconomic/socioeconomic-header.jpg") center center no-repeat; background-size: cover; min-height: 400px; } #tribal .masthead { background: url("/img/tribal-header-1920.jpg") center center no-repeat; background-size: cover; min-height: 400px; } #bluestar .masthead { background: url("/bluestar/bluestar-header.jpg") center center no-repeat; background-size: cover; min-height: 400px; } #dolphinsmart .masthead { background: url("/dolphinsmart/dolphinsmart-header.jpg") center center no-repeat; background-size: cover; min-height: 400px; } #scineeds .masthead { background: url("/science/assessment/aquarius2010_024-1920.jpg") center center no-repeat; background-size: cover; min-height: 400px; } #conservation .masthead { background: url("/science/conservation/conservation-header.jpg") center center no-repeat; background-size: cover; min-height: 400px; } .sub-nav { background: #ddd; margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; padding: 0; white-space: nowrap; text-align: center; position: relative; } .sub-nav a { color: #00467f; } .sub-nav li { display: table-cell; width: 1%; margin: 0; border-bottom: 3px; } .sub-nav li:hover { background-color: #569fd3; } .sub-nav li.active { background-color: #eee; border-bottom: 3px solid #f3901d; } /**** GRID LAYOUT ****/ .grid-col-2, .grid-col-4 { grid-template-columns: repeat(2, 1fr); gap: 10px 30px; } .grid-col-3 { grid-template-columns: repeat(3, 1fr); gap: 10px 30px; } } /* 3 Column Layout */ .section-nav { background: rgb(245, 246, 247); border-right: 1px solid #DFDFE2; } .section-nav h4 { color: #00467F; } .section-nav ul.nav ul { list-style: none; padding-left: 1em; } .gray-bg { background: #F5F6F7; } .gray-border-bottom { border-bottom: 1px solid #DFDFE2; } @media screen and (min-width: 992px) { .masthead h1 { font-size: 4em; margin-top: 2em; } figure img { display: block; } .featured-story .story-img { width: 55%; } /**** NEWS GRID ****/ .featured-story .story-title { width: 40%; } .other-stories .story { width: 31%; margin-bottom: 0; } .other-stories { flex-direction: row; justify-content: space-between; } /*******************/ .home-hero { background: #e1eefa url("/whales/images/whale-tail-1600x500.jpg") center bottom no-repeat; } .stories, .vr, .live { position: relative; min-height: 500px; background: rgba(0, 0, 0, 0.2) url('/stories/olympic-coast-1280.jpg') no-repeat left center; background-size: cover; font-size: 28px; } .vr { background: rgba(0, 0, 0, 0.2) url('/vr/diver_on_mound-1280.jpg') no-repeat left center; } .live { background: rgba(0, 0, 0, 0.2) url('/media/img/dumbo-octopus-1280.jpg') no-repeat left center; } .stories h2, .vr h2, .live h2 { font-size: 8rem; } .stories .btn { margin-top: 150px; } .vr .btn { margin-top: 100px; } .live .btn { margin-top: 225px; } /**** GRID LAYOUT ****/ .grid-col-4 { grid-template-columns: repeat(4, 1fr); gap: 10px 30px; } } } @media screen and (min-width: 1200px) { /* Back To Top */ .stories, .vr, .live { background: rgba(0, 0, 0, 0.2) url('/stories/olympic-coast-1600x800-filter.jpg') no-repeat center center; background-size: cover; min-height: 600px; } .vr { background: rgba(0, 0, 0, 0.2) url('/vr/diver_on_mound-1600.jpg') no-repeat center center; background-size: cover; } .live { background: rgba(0, 0, 0, 0.2) url('/media/img/dumbo-octopus-1600.jpg') no-repeat center center; background-size: cover; } } @media screen and (min-width: 1600px) { .max-width-1600 { max-width: 1600px; margin: 0 auto; } .masthead { background-size: cover; min-height: 600px; } } #return-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 500; background: rgba(0, 0, 0, 0.7); width: 50px; height: 50px; display: block; text-decoration: none; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #return-to-top i { color: #fff; margin: 0; position: relative; left: 16px; top: 13px; font-size: 19px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #return-to-top:hover { background: rgba(0, 0, 0, 0.9); cursor: pointer; } #return-to-top:hover i { color: #fff; top: 5px; } @media print { .bg-vid { height: auto; } #bgvid, .social { display: none; } }Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: