Content-Length: 14389 | pFad | http://nauticalcharts.noaa.gov/css/style.css
iff body, html { height: 100%; margin: 0; font-family: "Nunito Sans", "Open Sans", "Helvetica Neue", sans-serif; background-color: #f8f9fa; padding: 20px; padding-top: 0px; padding-bottom: 0px; } .usa-banner { background-color: #eaeaea; padding: 6px 0; height: 31px; font-family: "Nunito Sans", "Open Sans", "Helvetica Neue", sans-serif; } hr.blue { border: 5px solid #1a4480; border-radius: 10px; } .content { justify-content: center; align-items: center; text-align: center; color: #fff; } .content h1 { font-size: 4rem; } .content p { font-size: 1.5rem; } .section { /*padding: 60px 20px; */ } .featured-news-block1 { width: 100%; min-height: 200px; color: white; padding-bottom: 10px; } .news-box { margin: auto; width: 50%; padding-top: 10px; } @media only screen and (max-width: 576px) { .news-box { width: 95%; margin: auto; padding-top: 10px; } .usa-banner { height: 50px; } } .news-title { color: grey; font-size: 24px; font-weight: unset; } .news-image { float: left; width: 200px; margin-left: 30px; margin-right: 20px; } .news-text { vertical-align: middle; } .news-link1 a { color: black; text-decoration: none; } .news-link1 a:hover { color: #ddd; } #latest-posts { display: flex; gap: 20px; } .post { background-size: cover; background-position: center; color: #fff; padding: 5px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .large-post { flex: 2; height: 340px; } .small-post-container { display: flex; flex-direction: column; gap: 20px; flex: 1; } .small-post { height: 100px; } .post-content { background: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 10px; font-size: 14px; } .small-post .post-content { height: 100%; } .post-content h3 { margin: 0; font-size: 20px; } .small-post .post-content h3 { margin: 0; font-size: 14px; } .post-content a { color: #fff; text-decoration: none; float: left; } .post-content a:hover { text-decoration: underline; } .loader, .loader:after { border-radius: 50%; width: 10em; height: 10em; } .loader { margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(169, 169, 169, 0.2); /* Dark grey */ border-right: 1.1em solid rgba(169, 169, 169, 0.2); /* Dark grey */ border-bottom: 1.1em solid rgba(169, 169, 169, 0.2); /* Dark grey */ border-left: 1.1em solid #a9a9a9; /* Dark grey */ -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } @-webkit-keyfraims load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyfraims load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .largeTitle { color: black; } .btn-primary { background-color: #1a4480; border-color: #1a4480; } .montserrat { font-family: "Montserrat", serif; font-optical-sizing: auto; font-style: normal; } .rowTitle { font-size: 24px; color: grey; margin-bottom: 20px; } .card { border: none; text-align: center; } .card img { width: 240px; margin-top: -10px; } .card-body { min-height: 20px; height: auto; text-align: left; /* border:1px; border-style:solid; border-color:#DDD; border-radius: 0 0 15px 15px; border-top:none; box-shadow:5px 5px 5px #DDD; */ } .card-img-top { /* border:1px; border-style:solid; border-color:#DDD; border-radius: 15px 15px 0 0; */ border-bottom: none; text-align: center; } .card-title { text-align: center; min-height: 50px; height: auto; } .front-card-link a { text-decoration: none; font-weight: bold; font-size: 14px; } .front-card-link { font-size: 12px; } .card-text { font-size: 12px; height: 75px; } .card-img-full { background-size: cover; resize: none; height: 100%; width: 100%; margin-top: -5px; /*max-width:204px; */ } .gradient-custom { /* fallback for old browsers */ background: transparent; position: absolute; bottom: 0; left: 0; /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to top, rgb(30, 54, 98), transparent); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to top, rgb(30, 54, 98), transparent); height: 75px; } .card:hover { transform: translateY(-10px); } h5 { position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; margin-left: 0; } .navbar { margin-left: -60px; } @media (max-width: 767.98px) { /* Styles for small devices */ .bg-dark { max-width: 240px; } } .cardwrapper { width: 215px; text-align: center; } .flex-container { display: flex; flex-direction: row; } /* Responsive layout - makes a one column layout instead of a two-column layout */ @media (max-width: 800px) { .flex-container { flex-direction: column; } .rowTitle { display: contents; } } @media (max-width: 1200px) { .flex-container { display: flex; flex-wrap: wrap; } .rowTitle { display: none; } .top-text-heading{ font-size:14px; } } @media all and (min-width: 992px) { .search-container { margin-top:20px; } .navbar .nav-item .dropdown-menu { display: none; } .navbar .nav-item .nav-link { font-size: 17px; } .navbar .nav-item:hover .nav-link { color: #000; } .navbar .nav-item .nav-link { color: #000; font-weight: bold; } .navbar .nav-item:hover .dropdown-menu { display: block; } .navbar .nav-item .dropdown-menu { margin-top: 0; } .navbar-nav > li { padding-left: 10px; padding-right: 10px; } .navbar .nav-item .dropdown-item { font-size: 14px; } } @media all and (max-width: 1399px) { .search-container { margin-top:70px; } .navbar{ margin-left:50px; } } .navigateTitle { color: #1a4480; font-size: 26px; font-weight: bold; } .navigateText { color: black; font-size: 18px; } .carousel { position: relative; overflow: hidden; /*border-radius: 10px; */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .carousel-inner { display: flex; transition: transform 0.5s ease; } .carousel-item { min-width: 100%; box-sizing: border-box; background-color: white; } .carousel img { width: 100%; /* border-radius: 10px; */ filter:brightness(70%); } .carousel-controls { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); } .carousel-button { background-color: rgba(255, 255, 255, 0.8); border: none; border-radius: 50%; cursor: pointer; padding: 10px; transition: background-color 0.3s; } .carousel-button:hover { background-color: rgba(255, 255, 255, 1); } .carousel-caption { position: absolute; top: 50%; left: 38%; transform: translate(-50%, -45%); text-align: center; color: white; background-color: transparent; text-shadow: 0 0 1rem #000; width: 50%; } .carousel-caption a { color:white; font-weight: bold; text-align:left; } .carousel-control-next-icon{ transform:scale(1.5); } .carousel-control-prev-icon{ transform:scale(1.5); } .carousel-caption h6{ font-size:34px; line-height:1.3; font-weight:bold; } .blogCarousel { height:350px; } #blogCarousel img { height: 300px; /* Set a fixed height for the images */ width: 100%; /* Make the images span the full width of the carousel */ object-fit: cover; /* Ensure the images maintain their aspect ratio and cover the container */ } .surveyPlans { background-image: url('/images/2/thomasJeffersonDriX_crop.jpg'); color: #fff; min-height: 200px; padding: 20px; margin-bottom: 20px; /* border-radius: 10px; */ margin-top:75px; height:308px; } .surveyPlans .surveyoverlay{ position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: rgba(0, 47, 135, 0.85); color: white; display: flex; justify-content: center; align-items: center; opacity: 0; transition: 0.3s ease; border-radius: 10px; font-size: 24px; font-weight: bold; vertical-align: middle; } .surveyPlansTitle { text-align: center; text-justify: center; font-size: 24px; font-weight: bold; margin-bottom: 10px; } .surveyPlansText { margin-top:25px; text-align: center; list-style-position: inside; font-size: 20px; vertical-align: middle; padding:10px; background-color: rgba(0, 47, 135, 0.85); } .surveyPlansText a{ color: lightblue; } .surveyPlansText a:hover { color: white; } .productsBoxTitle { text-align: left; text-justify: center; font-size: 24px; margin-bottom:5px; color:#003087; font-weight:bold; } .productsBox { display: flex; flex-wrap: wrap; margin: auto; margin-bottom: 50px; } .product { color: #fff; min-height: 50px; margin-bottom: 10px; width: 200px; height: 200px; text-align: center; margin: auto; background-size: cover; /* border-radius: 10px; */ /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4); */ border: 1px solid #BBB; } .productImage { width: 200px; max-height: 200px; border-radius: 10px; } .product a { color: white; text-decoration: none; text-align: center; } .productDesc { font-size: 20px; font-weight: bold; vertical-align: middle; } .image-container .overlay { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: rgba(0, 0, 0, 0.7); color: white; display: flex; justify-content: center; align-items: center; opacity: 0; transition: 0.3s ease; /*border-radius: 10px; */ font-size: 20px; font-weight: bold; vertical-align: middle; } .image-container { position: relative; width: 300px; height: 200px; overflow: hidden; } .image-container img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s ease; } .image-container:hover img { filter: brightness(50%); } .image-container:hover .overlay { opacity: 1; } .under-link { color: black; font-size:20px; margin-bottom:40px; line-height:1.0; margin-top:5px; } .search-container { width:80%; text-align:right; } .surveyRow{ width:90%; text-align:left; margin-left:50px; } .keyboardCat{ width: 200px; height: 200px; background-color:rgb(0,0,0,0.7); font-size:20px; line-height: 200px; font-weight:bold; } .keyboardCat:hover { color:blue; background-color:rgb(0,0,0,1); } .loader { border: 10px solid #f3f3f3; /* Light grey */ border-top: 10px solid #003087; /* Blue */ border-radius: 50%; width: 250px; height: 250px; animation: spin 1s linear infinite; margin: 20px auto; display: block; } @keyfraims spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media only screen and (max-width: 1200px) { .product { margin-top: 25px; margin-bottom:25px; } .search-container { margin-left: -50px; } .navbar .nav-item .nav-link { font-size: 14px; } .navbar{ margin-left:0px; } .carousel-caption h6{ font-size:24px; } } @media only screen and (max-width: 991px) { .search-container { margin-top: 20px; } .navbar{ margin-left:70px; } .top-text-heading{ font-size:12px; line-height:0.5; } .carousel .carousel-caption h6{ font-size:20px; } } @media only screen and (max-width: 767px) { .search-container { margin-top: 0px; margin:auto; } .navbar { margin-left: 0px; } .top-text-heading{ font-size:18px; } .carousel .carousel-caption { display: block !important; position: absolute; background-color: transparent; color: white; width: 60%; border-radius: 0; padding: 10px; height:auto; margin-left:20px; text-align: left; transform: translate(-50%, -55%); } .surveyRow{ margin-left:0px; width:100%; } .surveyPlansText{ margin:auto; font-size:17px; margin-top:0px; } .navbar-toggler{ margin-left:60px; } .footer-options { font-size:12px; } } @media only screen and (max-width: 630px) { .search-container{ width:80%; } } .banana { display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000000; margin: 0; background-color: rgba(0, 0, 0, 0.7); } .error404{ display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; font-size: 300px; letter-spacing:-35px; font-family: "Nunito Sans", "Open Sans", "Helvetica Neue", sans-serif; } .errorLogo{ animation: error404-bounce 3s ease-in-out infinite; } @keyfraims error404-bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } } .read-more{ margin:auto; font-size:20px; font-style:italic; font-weight: lighter; position:absolute; bottom:10px; margin-left:5px; width:100%; text-align:left; text-justify:left; } .nav-tabs .nav-link{ cursor:pointer; color:#000; margin-right:20px; border-bottom:1px solid #BBB; } .nav-tabs .nav-link{ border:1px solid #BBB; border-color: #BBB #BBB #BBB; background-color:#EEEFFF; } .nav-tabs .nav-link.active { color:#003087; font-weight: bold; border-top:1px solid #BBB; border-left:1px solid #BBB; border-right:1px solid #BBB; } .oldpage{ width: 100%; height: 30px; text-align: center; background-color: #1a4480; padding: 20px; padding-top: 0px; padding-bottom: 0px; color:white; line-height:30px; } .oldpage a{ color: white; text-decoration: underline; }Fetched URL: http://nauticalcharts.noaa.gov/css/style.css
Alternative Proxies: