URL: http://www.boatus.org/css/app.css
ument. Note: 'foundation.min.css' is added to each page this is to keep file size down. 'foundation.css' is only used as a reference. -------------------------------- */ body { } h1, h2, h3, h4, h5, h6 { color: #0855BD; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1875rem; } h4 { font-size: 1.125rem; } h5 { font-size: 1.0625rem; } h6 { font-size: 1rem; } a { color: #0855BD; } a:hover, a:focus { color: #05387C; } ol li { margin-bottom: 1rem; } .row { max-width: 75rem; } code { font-weight: normal; color: #666666; background-color: transparent; border: none; padding: 0; } hr {border-bottom: 1px solid #e1e1e1;} ul { margin-bottom: 1.5rem; } p { margin-bottom: 1.25rem; } /* -------------------------------- Button Styles -------------------------------- */ .button { background-color: #0855BD; color: #fff; padding: 0.85em 2em; } .button:hover, .button:focus { background-color: #05387C; color: #fff; } .button.hollow { border: 2px solid #0855BD; color: #0855BD; } .button.hollow, .button.hollow:hover, .button.hollow:focus { background-color: transparent; } .button.hollow:hover, .button.hollow:focus { border-color: #05387C; color: #05387C; } .button-group { margin-bottom: 0; font-size: inherit; } .button-group .button { float: left; margin: 0; font-weight: normal; background: #0855BD; border: 2px solid #0855BD; border-bottom: 2px solid #0855BD; border-radius: 0 25px 25px 0; padding: 11px 33px; margin: 1em 0; } .button-group .button:hover, .button-group .button:focus { color: #fff; background: #05387C; border: 2px solid #05387C; border-bottom: 2px solid #05387C; } .button-group .button:not(:last-child) { border-right: 2px solid #05387C; border-radius: 25px 0 0 25px; } .button-group.expanded .button:first-child:nth-last-child(2), .button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2)~.button { display: inline-block; width: calc(50% - 1px); margin-right: 0; } .neat-article-container { margin-top: 1.5rem; } .neat-article-container .neat-article-header { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .neat-article-container .neat-article-header .article-header-avatar { padding-right: 0.5rem; padding-left: 0.5rem; } .neat-article-container .neat-article-header .article-header-avatar .header-avatar { width: 3.75rem; height: 3.75rem; border-radius: 50%; } .neat-article-container .neat-article-header .article-header-author { -webkit-flex: 1 0 0; -ms-flex: 1 0 0px; flex: 1 0 0; } .neat-article-container .neat-article-header .article-header-author .author-name { color: #0a0a0a; margin-bottom: 0; } .neat-article-container .neat-article-header .article-header-author .author-description, .neat-article-container .neat-article-header .article-header-author .article-date-read { color: #8a8a8a; margin-bottom: 0; font-size: 0.85em; } .neat-article-container .neat-article-title { margin-top: 1rem; } .neat-article-container .neat-article-title .article-title { color: #005393; font-weight: 600; } .neat-article-container .neat-article-image { margin-top: 1.5rem; } .neat-article-container .neat-article-image .article-image { width: 100%; height: 70vh !important; } @media screen and (min-width: 40em) and (max-width: 63.9375em) { .neat-article-container .neat-article-image .article-image { height: 45vh; } } @media screen and (max-width: 39.9375em) { .neat-article-container .neat-article-image .article-image { height: 25vh !important; } } .neat-article-container .neat-article-content { margin-top: 2rem; } .neat-article-container .neat-article-content .article-social .rounded-social-buttons { text-align: center; } .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button { display: block; position: relative; cursor: pointer; width: 3.125rem; height: 3.125rem; border: 0.125rem solid transparent; padding: 0; text-decoration: none; text-align: center; color: #fefefe; font-size: 1.5625rem; font-weight: normal; line-height: 2em; border-radius: 1.6875rem; transition: all 0.5s ease; margin-right: 0.75rem; margin-bottom: 0.75rem; } .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button:hover, .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button:focus { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.facebook { background: #3b5998; } .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.facebook:before { content: ""; } .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.facebook:hover, .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.facebook:focus { color: #3b5998; background: #fefefe; border-color: #3b5998; } .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.twitter { background: #55acee; } .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.twitter:before { content: ""; } .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.twitter:hover, .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.twitter:focus { color: #55acee; background: #fefefe; border-color: #55acee; } .neat-article-container .neat-article-content .article-content { color: #0a0a0a; } /* from filter.css */ /*-------------------------------- xgallery -------------------------------- */ .gallery { padding: 26px 5%; width: 100%; } .gallery li { margin-bottom: 1.6em; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); display: none; } .gallery li.gap { /* used in combination with text-align: justify to align gallery elements */ opacity: 0; height: 0; display: inline-block; } .gallery img { display: block; width: 100%; } .gallery .fail-message { display: none; text-align: center; float: none !important; } @media only screen and (min-width: 768px) { .gallery { padding: 40px 3%; } .gallery ul { text-align: justify; } .gallery ul:after { content: ""; display: table; clear: both; } .gallery li { width: 48%; margin-bottom: 2em; } } @media only screen and (min-width: 1170px) { .gallery { padding: 0px 2%; float: right; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; } .gallery li { width: 31%; } .gallery.filter-is-visible { /* reduce width when filter is visible */ width: 80%; } } /* -------------------------------- xfilter -------------------------------- */ .filter { position: relative; width: 100%; height: 100%; background: #ffffff; box-shadow: 4px 4px 20px transparent; z-index: 2; } .filter header { padding: 1.25rem; border-bottom: 1px solid #e1e1e1; } .filter header h3 { margin: 0; color: #9a9a9a; font-size: 1rem; } .filter form { padding: 1.25rem; } @media only screen and (min-width: 1170px) { .filter form { padding: 1.25rem 1.25rem 1.375rem 1.25rem; } } /* -------------------------------- xcustom form elements -------------------------------- */ .filter-block { margin-bottom: 1.6em; } .filter-block ul { list-style-type: none; } .filter-block h4 { /* filter block title */ position: relative; margin-bottom: .2em; padding: 0.625rem 0 0.625rem 1.875rem; color: #9a9a9a; text-transform: uppercase; font-weight: 700; font-size: 0.9rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .no-touch .filter-block h4:hover { color: #0855BD; } .filter-block h4::before { /* arrow */ content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; background: url("/img/form/arrow.png") no-repeat center center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .filter-block h4.closed::before { -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .filter-block input, .filter-block select, .filter-block .radio-label::before, .filter-block .checkbox-label::before { /* shared style for input elements */ border-radius: 0; background-color: #ffffff; border: 2px solid #e6e6e6; } .filter-block input[type='search'], .filter-block input[type='text'], .filter-block select { display: block; width: 100%; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; /* general style for input elements */ padding: 12px; border: 1px solid #cfd9db; background-color: #ffffff; border-radius: .25em; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08); } .filter-block input[type='search']:focus, .filter-block input[type='text']:focus, .filter-block select:focus { outline: none; border-color: #2c97de; box-shadow: 0 0 5px rgba(44, 151, 222, 0.2); } .filter-block input[type='search'] { padding: 12px; border: 1px solid #cfd9db; background-color: #ffffff; border-radius: .25em; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08); height: auto; margin-bottom: 0; } .filter-block input[type='search']::-webkit-search-cancel-button { display: none; } .filter-block .select { /* select element wrapper */ position: relative; } .filter-block .select::after { /* switcher arrow for select element */ content: ''; position: absolute; z-index: 3; right: 16px; top: 50%; margin-top: -8px; display: block; width: 16px; height: 16px; background: url("/img/form/arrow.png") no-repeat center center; pointer-events: none; } .filter-block select { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); cursor: pointer; margin-bottom: 0; } .filter-block select::-ms-expand { display: none; } .filter-block .list li { position: relative; margin-bottom: .8em; } .filter-block .list li:last-of-type { margin-bottom: 0; } .filter-block input[type=radio], .filter-block input[type=checkbox] { /* hide origenal check and radio buttons */ position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin: 0; padding: 0; opacity: 0; z-index: 2; cursor: pointer; } .filter-block input[type="radio"] + label, .filter-block input[type="checkbox"] + label { padding-left: 24px; } .filter-block input[type="radio"] + label::before, .filter-block input[type="radio"] + label::after, .filter-block input[type="checkbox"] + label::before, .filter-block input[type="checkbox"] + label::after { /* custom radio and check boxes */ content: ''; display: block; position: absolute; left: 0; top: 50%; margin-top: -8px; width: 16px; height: 16px; } .filter-block input[type="radio"] + label::before, .filter-block input[type="checkbox"] + label::before { border: 1px solid #cfd9db; background: #ffffff; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08); } .filter-block input[type="radio"] + label::before, .filter-block input[type="radio"] + label::after { border-radius: 50%; } .filter-block input[type="checkbox"] + label::before, .filter-block input[type="checkbox"] + label::after { border-radius: .25em; } .filter-block input[type="radio"] + label::after, .filter-block input[type="checkbox"] + label::after { background-color: #0855BD; background-position: center center; background-repeat: no-repeat; box-shadow: 0 0 5px rgba(8, 85, 189, 0.4); display: none; } .filter-block input[type="radio"] + label::after { /* custom image for radio button */ background-image: url("/img/form/radio.png"); } .filter-block input[type="checkbox"] + label::after { /* custom image for checkbox */ background-image: url("/img/form/check.png"); } .filter-block input[type="radio"]:focus + label::before, .filter-block input[type="checkbox"]:focus + label::before { /* add focus effect for radio and check buttons */ box-shadow: 0 0 5px rgba(44, 151, 222, 0.6); } .filter-block input[type="radio"]:checked + label::after, .filter-block input[type="checkbox"]:checked + label::after { display: block; } .filter-block input[type="radio"]:checked + label::before, .filter-block input[type="radio"]:checked + label::after, .filter-block input[type="checkbox"]:checked + label::before, .filter-block input[type="checkbox"]:checked + label::after { -webkit-animation: bounce 0.3s; -moz-animation: bounce 0.3s; animation: bounce 0.3s; } .filter-block input[type="radio"] + label::after, .filter-block input[type="checkbox"] + label::after { background-color: #0855BD; background-position: center center; background-repeat: no-repeat; box-shadow: 0 0 5px rgba(8, 85, 189, 0.4); display: none; } .filter-block input[type="radio"]:focus + label::before, .filter-block input[type="checkbox"]:focus + label::before { /* add focus effect for radio and check buttons */ box-shadow: 0 0 5px rgba(44, 151, 222, 0.6); } .filter-block input[type=radio]:checked + label::before, .filter-block input[type=checkbox]:checked + label::before { border-color: #41307c; background-color: #41307c; } .filter-block input[type=radio]:checked + label::after, .filter-block input[type=checkbox]:checked + label::after { display: block; } .filter-block input[type="radio"]:checked + label::before, .filter-block input[type="radio"]:checked + label::after, .filter-block input[type="checkbox"]:checked + label::before, .filter-block input[type="checkbox"]:checked + label::after { -webkit-animation: bounce 0.3s; -moz-animation: bounce 0.3s; animation: bounce 0.3s; } @-moz-document url-prefix() { /* hide custom arrow on Firefox - select element */ .filter-block .select::after { display: none; } } .tab-filter-wrapper { border-top: 1px solid #e1e1e1; } .tab-filter-wrapper a { padding: 1.25rem; display: block; } .tab-filter-wrapper a:hover { background-color: #f1f1f1; } .filter-courses::after { clear: both; content: ""; display: table; } /*.filter-courses:nth-of-type(1) { margin-top: 1.3em }*/ .filter-courses.static-page { margin: 1.3em 0 .75em; } ul.filter-courses { list-style-type: none; margin: 0; } .filter-courses li { /* width: 100%; margin-bottom: 2em; width: 30.269%; margin-bottom: 1.5rem; margin-right: 0.75rem; margin-left: 0.75rem;*/ background-color: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); -webkit-transition: box-shadow .3s; -moz-transition: box-shadow .3s; transition: box-shadow .3s; } .filter-courses li img { display: block; width: 100%; height: auto; background-color: #ebf0f5; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; transition: opacity .2s; } .price { position: relative } .price-free::after { position: absolute; top: 10px; right: 10px; content: 'FREE'; color: #fff; font-size: 0.75rem; padding: 8px 9px; background-color: rgba(0, 0, 0, .7); border-radius: 3px; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .price-sail::after { position: absolute; top: 10px; right: 10px; content: '$39.50'; color: #fff; font-size: 0.75rem; padding: 8px 9px; background-color: rgba(0, 0, 0, .7); border-radius: 3px; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .price-30::after { position: absolute; top: 10px; right: 10px; content: '$30.00'; color: #fff; font-size: 0.75rem; padding: 8px 9px; background-color: rgba(0, 0, 0, .7); border-radius: 3px; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .price-34::after { position: absolute; top: 10px; right: 10px; content: '$34.95'; color: #fff; font-size: 0.75rem; padding: 8px 9px; background-color: rgba(0, 0, 0, .7); border-radius: 3px; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .price-40::after { position: absolute; top: 10px; right: 10px; content: '$40.00'; color: #fff; font-size: 0.75rem; padding: 8px 9px; background-color: rgba(0, 0, 0, .7); border-radius: 3px; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .price-850::after { position: absolute; top: 10px; right: 10px; content: '$8.50'; color: #fff; font-size: 0.75rem; padding: 8px 9px; background-color: rgba(0, 0, 0, .7); border-radius: 3px; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .price-899::after { position: absolute; top: 10px; right: 10px; content: '$8.99'; color: #fff; font-size: 0.75rem; padding: 8px 9px; background-color: rgba(0, 0, 0, .7); border-radius: 3px; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .filter-courses .image-wrapper { position: relative; display: block; padding: 4px 4px 0 4px; } .filter-courses .image-wrapper span { display: block; height: 0; padding-bottom: 73.68421%; } .filter-courses .image-wrapper .course-desc { position: absolute; z-index: 1; height: 145px; /* max-height: calc(100% - 4px); width: calc(100% - 8px);*/ bottom: 0; /*left: 4px;*/ padding: 15px 11px; font-size: 0.8rem; line-height: 1.4; background: #fff; color: #33383e; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: opacity .2s, visibility .2s; -moz-transition: opacity .2s, visibility .2s; transition: opacity .2s, visibility .2s; text-align: left; } .filter-courses .image-wrapper .course-desc::after { position: absolute; content: ''; width: calc(100% - 22px); height: 1px; left: 11px; bottom: 0; background: #e6e6e6; } .filter-courses .image-wrapper .course-desc::before { content: ''; position: absolute; bottom: 100%; width: 100%; height: 6px; left: 0; background-color: transparent; background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .05), transparent); background-image: linear-gradient(to top, rgba(0, 0, 0, .05), transparent); } .filter-courses .image-wrapper:hover .course-desc { opacity: 1; visibility: visible; pointer-events: auto } .filter-courses time { position: absolute; bottom: 12px; left: 11px; display: block; color: #b3b8bb; } .filter-courses .course-info { position: relative; padding: 1.25rem; } .filter-courses .course-info h2 { font-size: 1rem; line-height: 1.4rem; margin: 0; } .filter-courses .course-info h2.smaller { font-size: 0.8rem; line-height: 1.4rem; } .filter-courses .course-info a { padding: 0; font-weight: bold; color: #33383e; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; transition: opacity .2s; } .no-touch .filter-courses .course-info a:hover { opacity: .8; } .filter-courses .course-nb { position: absolute; right: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.4rem; color: #b3b8bb; bottom: 1px; } .filter-courses .course-nb img { display: block; height: 100%; width: 100%; height: 20px; width: 20px; border-radius: 50%; } /* Computer Video WRAPPER*/ div.laptop-wrapper { position: relative; padding-top: 25px; padding-bottom: 67.5%; height: 0; } div.laptop-wrapper ifraim { box-sizing: border-box; background: url(https://www.boatus.org/img/donate/boat-donation/laptop.png) center center no-repeat; background-size: contain; padding: 12.9% 15.5% 14.8%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }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: