/* - ploneCustom.css - */
@media all {
/* https://easternbrooktrout.org/portal_css/ploneCustom.css?original=1 */
body {
background: #fff;
font-family: 'PT Serif', serif;
font-size: 16px;
color: #666;
}
html { scroll-behavior: smooth; }
.material-icons-black {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 60px !important;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
color: #9d9d9d !important;
padding: 5px;
}
.material-icons-white-circle {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 70px !important;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
color: #fff !important;
padding: 0;
background: transparent;
border-radius: 50%;
border: 1px solid;
}
.material-icons-white-circle:hover {
color: #a0b426 !important;
background: #fff;
}
#partnerSiteSelection {
position: relative;
top: 20px;
}
#visual-portal-wrapper {
background-color: #fff;
margin: 0 auto;
max-width: 1170px;
box-shadow: none;
}
@media screen and (max-width: 769px){
#visual-portal-wrapper {
width: 98%;
margin:0 auto;
box-shadow: none;
}
}
#portal-header {
background: url(protect-restore-enhance-2.png) no-repeat center bottom;
position: relative;
z-index: 2;
height: 130px;
width: 1170px;
margin: 0 auto;
}
#portal-top {
z-index: unset;
height: 140px;
background: #084c5d;
position: relative;
width: 100vw;
margin-left: -50vw;
left: 50%;
}
@media screen and (max-width: 667px){
#portal-top {
height: 225px;
}
#portal-logo img {
display: none;
}
#portal-header {
background: #fff url(header-bg-mobile.jpg) no-repeat center;
position: relative;
z-index: 3;
width: 100%;
height: 200px;
}
}
.portletHeader > a {
color: #FFFFFF !important;
}
#portal-logo {
display: inline-block;
margin: 19px 0 0 0;
background: #fff;
padding: 0 6px;
border-radius: 6px;
}
#content div.fc-event a,
#content div.fc-event a:hover {
color: #fff;
}
#portlet-add-to-events a, #portlet-how-to-participate a, #portlet-add-to-library a, #portlet-add-to-links a, #portlet-add-to-funding a, #portlet-add-to-news a, #portlet-social a{
border: 0 none;
}
#portlet-social {text-align:center;}
/* */
#portal-globalnav {
background: transparent;
position: absolute;
top: 45px;
right: 0;
}
@media screen and (max-width: 767px){
#portal-globalnav {
position: absolute;
top: 320px;
left: 0
}
}
#portal-globalnav li a {
background: transparent;
border: none;
padding: 0 13px;
color: #cdcdcd;
font-size: 1.2em;
line-height: 45px;
font-weight: 700;
font-family: 'Raleway', sans-serif;
min-width: 2em;
}
#portal-globalnav a:link, a:visited {
color: #cdcdcd;
}
#portaltab-index_html > a {
background: url("home-icon-grey.png") no-repeat scroll center center transparent !important;
padding: 0 11px;
text-indent: -999em;
width: 30px;
}
#portaltab-index_html.selected a {
background: url("home-icon.png") no-repeat scroll center center !important;
}
#portaltab-index_html a:hover {
background: url("home-icon-on.png") no-repeat scroll center center transparent !important;
}
#portal-globalnav a:hover, #portal-globalnav .selected a:hover {
background: none repeat scroll 0 0 #094c5d;
color: #76c0c6;
}
#portal-globalnav .selected a {
background: #094c5d;
color: #b6c259;
}
li#portaltab-donate a {
background: #a7b254 !important;
text-transform: uppercase;
color: #fff!important;
padding: 0 12px;
border-radius: 6px;
font-size: 1.25em;
}
li#portaltab-donate a:hover {
background: #e77424 !important;
color: #fff!important;
}
#portaltab-search-action { /* */
position: absolute;
right: 0;
}
#portaltab-search-action > a {
background: url(noun-search-icon-grey.png) no-repeat scroll 9px center !important;
text-indent: 20px;
width: 77px;
background-size: 17px!important;
}
#portaltab-search-action > a:hover {
background: url(noun-search-icon-on.png) no-repeat scroll 9px center !important;
text-indent: 20px;
width: 77px;
background-size: 17px!important;
}
#portal-globalnav ul.submenu {
background: #fff;
text-transform: none;
font-size: 12px;
box-shadow: 0px 2px 5px 0 rgb(75 75 75 / 25%);
z-index: 12;
border-bottom: 4px solid #a7b254;
padding: 10px 10px;
}
@media screen and (max-width: 767px){
#portal-globalnav ul.submenu {
font-size: 16px;
}
}
#portal-globalnav ul.submenu li a {
padding: 0.5em 1.5em 0.5em 1em;
width: 18em;
color: #666!important;
font-weight: 500;
text-transform: none;
line-height: 20px;
background: #fff;
}
#portal-globalnav ul.submenu li a:hover {
color: #d68a3a!important;
background: #fff;
}
#document-action-kml_download {
display:none !important;
}
#portal-footer {
display: block;
height: 200px;
background-color: #196678;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
border-bottom: 40px solid #134d5b;
padding: 30px;
}
#portal-footer-wrapper {
width: 1170px;
margin: 0 auto;
}
@media screen and (max-width: 767px){
#portal-footer-wrapper {
width: 100%;
}
#portal-footer {
height: auto;
padding: 20px;
}
}
#portal-siteactions {
background: none repeat scroll 0 0 transparent;
bottom: 20px;
clear: left;
left: 0;
padding: 1em 0 2em;
position: absolute;
right: 0;
text-align: center;
font-family: 'Raleway';
letter-spacing: 0.05em;
}
#portal-siteactions li a {
color: #dac393;
font-size: 12px;
padding: 10px;
text-transform: uppercase;
}
#portal-footer .footer-col-w2b {
float: left;
}
#portal-footer .footer-col-last-w2b {
display: block;
float: right;
width: 320px;
margin-right: 65px;
margin-top:10px;
padding: 0px;
text-align: right;
}
#portal-footer .footer-col-w2b h4 {
color: #FFFFFF;
text-align: center;
}
.footerlist ul {
color:#eee;
font-size:12px;
list-style: url(none);
line-height: 1.4em;
}
.footerlist ul li {
line-height:1.4em;
display: block;
}
.footerlist a, .footerlist a:visited {
color:#AFE4F9;}
.footerlist a:hover {
color:#ffffff;
}
.tileItem {
border-top: 1px solid #dedede;
margin-top: 30px;
padding-top: 15px;
}
.tileImage img {
border: 1px solid #ccc;
float: left;
margin: .5em 1.5em 1em 0;
padding: 4px;
}
.news-tile {
display: block;
clear: both;
}
.news-tile img {
width: 120px;
max-height: 120px;
float: right;
background: #fff;
padding: 4px;
border-radius: 4px;
margin-left: 1em;
margin-bottom: 1.5em;
object-fit: cover;
}
.news-tile-left img {
width: 200px;
max-height: 120px;
float: left;
background: #fff;
padding: 4px;
border-radius: 4px;
margin-right: 1em;
margin-bottom: 1.5em;
object-fit: cover;
}
.news-item li {
line-height: 1.4em!important;
margin-bottom: 20px!important;
}
.icons-on .contenttype-document, .icons-on .contenttype-event, .icons-on .contenttype-folder, .icons-on .contenttype-link, .icons-on .contenttype-news-item, .icons-on .contenttype-plone-site, .icons-on .contenttype-topic, .icons-on #plone-contentmenu-factories .contenttype-file, .icons-on #plone-contentmenu-factories .contenttype-image {
display: block;
line-height: 1.6em;
padding-left: 0px !important;
}
.icons-on .contenttype-link {
background: url("none") no-repeat scroll 0 -1076px transparent;
}
.tileHeadline{
font-size: 1.4em;
letter-spacing: -0.025em;
padding-top:5px;
margin: 0;
}
.documentByLine {
margin-bottom: 10px;
}
dl.portlet dt, div.portletAssignments div.portletHeader {
background: #a7b254;
border-radius: 6px 6px 6px 6px;
color: #FFFFFF;
line-height: normal;
margin-top: 20px;
padding: 0.65em 1em;
font-size: 14px;
}
#content {
clear: both;
font-size: 100%;
line-height: 1.6em;
margin: 1em 1.5em 2em;
}
#content h1.documentFirstHeading {
color: #d68a3a;
}
h1, h2, h3, h4 {
color: #d68a3a!important;
margin-bottom: 10px;
font-family: 'Raleway', sans-serif;
font-weight: 600;
letter-spacing: -0.0125em;
line-height: 1.3em;
margin-top: 1.5em;
}
h1 { font-size: 2.3em; }
h2 { font-size: 1.8em;}
h3 { font-size: 1.4em;}
h4 {
font-size: 1.2em;
letter-spacing: 0;
}
.intro-big {
font-size: 36px;
line-height: 1.5em;
margin: 1em 2em;
letter-spacing: -0.025em;
color: #d68a3a;
}
@media screen and (max-width: 767px){
.intro-big {
font-size: 33px;
margin: 1em;
}
p { font-size: 18px;}
p.intro {font-size: 26px;}
}
.intro {
font-size: 20px;
color: #686868;
line-height: 1.6em;
}
#portal-breadcrumbs {
margin-bottom: 1.5rem;
font-family: 'helvetica', sans-serif;
}
#portal-breadcrumbs a{
color: #5D848D;
}
.detail-txt {
display: block;
font-family: 'montserrat';
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #7e7e7e;
padding: 0 0 3px;
margin: 0 0 40px!important;
border-bottom: 1px dotted #ddd;
}
dl.portlet {margin-bottom:0px}
#portal-personaltools a {
color: #b7c6c9;
}
#portal-personaltools dd a {
color: #205C90;
}
dl.actionMenu a, dl.actionMenu div {
color: #205C90;
}
table.invisible td, table.invisible th, table.plain td, table.plain th, table.listing td, table.listing th {
padding: 0.5em 0.5em;
}
table.listing {font-size:91%;}
#edit-bar {
margin-bottom: 3em;
}
.template-ebtjv_home #edit-bar , .template-ebtjv_home #portal-breadcrumbs{display: none;}
.clear{
clear: both;
height: 1px;
}
.floatright{
float: right;
margin-bottom: 10px;
margin-left: 20px;
}
.floatleft{
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
.photoborder{
padding: 3px;
border: 1px solid #CCC;
}
#portal-searchbox {
visibility: hidden;
background: transparent;
margin-right: 20px;
position: relative;
top: 30px;
}
#portal-searchbox [type="submit"] {
border: none;
color: transparent;
background: no-repeat transparent url(magnifier.png) center center;
height: 25px;
width: 25px;
}
#searchGadget {
width: 13em;
padding: 3px;
border-radius: 0px;
border: none;
font-size: 13px;
}
.searchSection {
color: #888;
padding-top: 9px;
letter-spacing: 0.05em;
border-top: 1px solid #888;
}
#portal-personaltools-wrapper {
position: absolute;
top: 0;
right: 0;
}
#portal-personaltools {
background-color: transparent;
margin-bottom: 4px;
}
#portal-personaltools li {
margin-right: 1.2em;
}
a:link, a:visited {
color: #205C90;
}
.space{
height: 20px;
}
.managedPortletActions a{color: #DAC393}
.portletAssignments a{color: #DAC393}
#content .documentDescription, #content #description {
font-family: 'Raleway',sans-serif;
font-weight: 500;
line-height: 1.5em;
margin-bottom: 20px;
}
.eventDetails {
clear: left;
float: left;
margin: 0px 1.5em 0.5em 0em;
}
.loginbutton a,
.logoutbutton a,
.registerbutton a {
display: inline-block;
height: 26px;
margin-top: 0;
vertical-align: bottom;
width: 88px;
margin-right: -21px;
}
.loginbutton a {
background-image: url("login-btn.png");
display: none;
}
.logoutbutton a {
background-image: url("logout-btn.png");
}
.registerbutton a {
background-image: url("register-btn.png");
height: 26px;
display: none;
}
.morelink {
background: url("arrow-orange.png") no-repeat scroll right center transparent;
font-size: 12px;
margin-bottom: 0.75em;
padding: 3px 12px 3px 3px;
text-align: right;
text-transform: uppercase;
font-weight: bold;
}
#content a:link, dl.portlet a:link {
border-bottom: none;
}
#content li, dl.portlet li {
margin-bottom: 10px;
}
.more-link {
background: url("arrow-orange.png") no-repeat scroll right center transparent;
font-size: 12px;
font-weight: bold;
margin-bottom: 0.75em;
margin-right: 6px;
padding: 3px 12px 3px 3px;
text-align: right;
text-transform: uppercase;
}
.person_caption {
float: left;
height: 100px;
margin: 0 0 15px;
padding: 0 5px 0 0;
position: relative;
width: 280px;
}
.imageFloatLeft {
float: left;
margin-right: 1em;
}
.disco {
padding: 20px;
margin-top:12px;
background-color: white;
/* */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
/* */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}
.classybutton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff !important;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #528ecc;
margin-top:5px;
}
.classybutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}
.classybutton:active {
position:relative;
top:1px;
}
a.btn-small {
padding: 6px 10px;
background: #fff;
border-radius: 3px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
color: #d68a3a!important;
letter-spacing: 1px;
}
a.btn-purple {
padding: 10px 20px;
background: #515587;
border-radius: 3px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
color: #f5e058!important;
letter-spacing: 1px;
}
a.btn-purple:hover {
background: #696eaf;
color: #f5e058!important;
}
a.btn-blue {
padding: 15px 20px;
background: #3f799f url(shadow.png) no-repeat;
border-radius: 5px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 19px;
color: #f5e058!important;
display: flex;
}
dl.portlet a.btn-blue:hover {
background: #448ebe url(shadow.png) no-repeat;
color: #fff779!important;
}
a.btn-orange {
padding: 15px 20px;
background: #e79238 url(shadow.png) no-repeat;
border-radius: 5px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 19px;
color: #fff!important;
}
#content a.btn-orange:hover {
background: #e77424 url(shadow.png) no-repeat;
color: #fff!important;
}
#content a.classybutton:hover {
color:#fff !important;
}
table.invisible td, table.invisible th, table.plain td, table.plain th, table.listing td, table.listing th {
padding: 0.5em 0.6em;
}
table.listing {font-size:95%;}
.objectDetails {
float: left;
min-width: 240px;
padding-right:20px;
}
.field {
clear:left;
}
#cyclist .feature .featureimage a {
border-bottom:none !important;
}
h4.documentFirstHeading {
margin-bottom:1.4em;
}
table.metadata {
}
table.metadata th {
background: none repeat scroll 0 0 #A9CC66;
padding:4px;
}
table.metadata tr {
border-bottom:1px solid #fff;
}
table.metadata td {
background: none repeat scroll 0 0 #CBE0A3;
border-top:none !important;
}
table.metadata tr.first th,
table.metadata tr:first-child th {
border-top-left-radius: 10px;
}
table.metadata tr.first td,
table.metadata tr:first-child td {
border-top-right-radius: 10px;
}
table.metadata tr.last th,
table.metadata tr:last-child th {
border-bottom-left-radius: 10px;
}
table.metadata tr.last td,
table.metadata tr:last-child td {
border-bottom-right-radius: 10px;
}
table.metadata tr:hover th,
table.metadata tr:hover td {
background-color:#DDEBC2;
}
#content table.metadata ul {
list-style-type: none !important;
margin-left: 0 !important;
}
#dashboard .portletHeader a:link {
color: #FFFFFF !important;
font-size: 1.2em;
}
#lineageSelection {
display:none;
}
.imgright {
float: right;
margin-bottom: 2%;
margin-left: 3%;
}
.subhead {
font-size: 1.4em;
font-weight: 300;
margin-bottom: 0;
}
.subhead span{
font-weight: 600;
letter-spacing: -0.035em;
}
.subheading {
font-family: 'Raleway', san-serif;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 3px;
color: #999;
font-size: 15px;
}
.intro-section hr {
background-color: #a0b426;
max-width: 35px;
margin: 0 auto 20px;
height: 2px;
border: 0;
}
.right-portlet-box{
background: #EDE2C0;
border: 1px solid #BFA661;
border-radius:6px;
width: auto;
margin-bottom: 20px;
padding: 10px 10px 4px;
}
.formQuestion {
font-size:120%;
}
body.portaltype-topic #relatedItemBox {
display:none;
}
#content li {
display: block;
}
#content fieldset {
border-style: solid;
}
#portal-footer .help {
background: url("help-btn.png") no-repeat scroll 0 6px transparent;
color: #9adff1;
line-height: 40px;
margin-left: 5px;
margin-top: 10px;
padding-left: 35px;
text-transform: uppercase;
font-family: 'raleway';
}
#portal-footer .staff {
background: url("staff-btn.png") no-repeat scroll 0 7px transparent;
color: #9adff1;
line-height: 40px;
margin-left: 25px;
margin-top: 10px;
padding-left: 35px;
text-transform: uppercase;
font-family: 'raleway';
}
#portal-footer .sitecredit {
background: url(fergusonlynch.png) no-repeat scroll 0 7px transparent;
color: #9adff1;
font-size: 10px;
letter-spacing: 0.055em;
line-height: 40px;
margin-left: 5px;
margin-top: 10px;
padding-left: 35px;
text-transform: uppercase;
width: 220px;
text-align: left;
font-family: 'raleway';
}
#portal-footer .sitecredit a, #portal-footer .sitecredit a:visited,#portal-footer .help a, #portal-footer .help a:visited,#portal-footer .staff a, #portal-footer .staff a:visited {
color: #9adff1 !important;
}
#portal-footer .sitecredit a:hover,#portal-footer .help a:hover,#portal-footer .staff a:hover {
color: #ffffff!important;
}
#portal-footer img:hover {
opacity:.9; }
div.form-section {
border: 1px solid #f3f3f3;
margin-bottom:15px;
padding: 12px;
background: #fafafa;
}
div.form-section input,
div.form-section textarea,
div.form-section select{
padding: 5px;
border: 1px solid #dddddd;
border-radius: 3px;
}
#archetypes-fieldname-priorityScore label div {
font-weight:normal;
}
#archetypes-fieldname-priorityScore label div h3 {
font-weight:normal;
color: #222;
font-size:15px;
}
.edit-table{
width: 100%;
}
.edit-table tr:nth-child(odd) {
background: #efefef;
}
.edit-table th,
.edit-table td{
padding: 10px 5px;
}
.edit-table th {
background-color: #ddd;
}
.edit-table td input{
padding: 5px;
border: 1px solid #dddddd;
border-radius: 3px;
}
.edit-table td input[type="submit"]{
background-color: #bbb;
border: 1px solid #bbb;
}
.edit-table a{
background: #e74c3c;
width: 20px;
height: 20px;
position: relative;
display: block;
line-height: 20px;
border-radius: 50%;
text-align: center;
}
.edit-table a:before{
content: 'x';
color: white;
font-size: 'Arial', sans-serif;
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.edit-table img[src="close_icon.png"]{
display: none;
}
.section-funded-projects .section-block h2{
margin-top: 15px;
margin-bottom: 5px;
}
.section-funded-projects .section-block a.facet-list{
padding: 3px 5px;
background: #f3f3f3;
display: inline-block;
margin-bottom: 5px;
border-radius: 3px;
transition: all .4s;
}
.section-funded-projects #content .section-block a.facet-list:hover{
background-color: #427597;
color: #f3f3f3 !important;
}
.threecolbox {
width: 27.5%;
float: left;
margin-right: 20px;
padding: 20px 30px 20px 0px;
}
span.number {
font-size: 44px !important;
font-weight: 200;
padding-right: 5px;
color:#FFA300;
}
.threecolbox h2 {
font-size: 22px;
line-height: 1.3em;
}
.threecolbox > p {
color: #666;
font-size: 17px;
line-height: 1.4em;
}
.hilite {
background: #fffdbb none repeat scroll 0 0;
border: 1px solid #ccc;
padding: 20px;
}
.hilite h2 {
font-size: 36px;
font-weight: 200;
margin-bottom: 0;
padding-bottom: 0;
}
.hilite .description {
font-size: 18px;
line-height: 1.4em;
}
.template-manage_catchments #content form label,
.template-manage_catchments #content form input{
display: block;
}
.template-manage_catchments #content form input[type="string"]{
width: 100%;
max-width: 270px;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
}
.template-manage_catchments #content form input[type="submit"]{
padding: 5px 10px;
border-radius: 5px;
background: #e3e3e3;
border: none;
}
.portlet-rounded {
margin: 0 0 20px;
}
.portlet-rounded img{
border-radius: 6px;
}
/* */
.grid-container-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0;
grid-gap: 20px;
}
.grid-2col-center {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0;
grid-gap: 20px;
justify-content: center;
align-items: center;
}
.grid-container-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0;
grid-gap: 30px;
}
.grid-container-4col {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0;
grid-gap: 30px;
}
.grid-container-onethird-two-third {
display: grid;
grid-template-columns: 30% 70%;
grid-gap: 30px;
}
.grid-container-2-third-1-third {
display: grid;
grid-template-columns: 70% 30%;
grid-gap: 30px;
}
.grid-item {
padding: 0;
position: relative;
}
.grid-item img.border {
width: 100%;
height: 125px;
object-fit: cover;
border-radius: 6px;
}
.grid-item > h2 {
border-bottom: 1px dotted #ccc;
letter-spacing: -0.0125em;
line-height: 1.1em;
margin-top: 10px;
margin-bottom: 20px;
margin-right: 0.5em !important;
padding-bottom: 6px;
}
.grid-item ul {
list-style-image: url(bullet.png);
list-style-type: square;
margin-left: 0em!important;
}
.grid-item li a {
border-bottom: 1px solid #FFFFFF;
text-decoration: none!important;
font-weight: 600;
}
.grid-rule {
padding-right: 20px;
border-right: 1px solid #ccc;
margin: 2em 0;
}
.grid-rule h4 {
margin-top: 0;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center-block {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 767px){
.left, .right {  text-align: center; }
.grid-container-2col { grid-template-columns: auto; }
.grid-2col-center { grid-template-columns: auto; }
.grid-container-3col { grid-template-columns: auto; }
.grid-container-4col { grid-template-columns: auto; }
.grid-container-2-third-1-third  { grid-template-columns: auto; }
.hide-mobile { display: none; }
}
.flex-container {
display: flex;
flex-direction: row;
padding: 20px;
}
.flex-block {
display: flex;
flex-direction: row;
}
@media screen and (max-width: 767px){
.flex-container { flex-direction: column; }
}
.flex-item-center {
display: flex;
justify-content: center;
align-items: center;
}
.gap20 { gap: 20px;}
/* */
.grid-421 { /* */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
@media screen and (max-width: 1200px) {
.grid-421 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
}
@media screen and (max-width: 767px) {
.grid-421 {
display: grid;
grid-template-columns: auto;
grid-gap: 20px;
}
}
.news-card {
background-color: white;
border-radius: 0.25rem;
box-shadow: 0px 1px 5px 0 rgba(75,75,75,0.25);
}
.news-card img {
width: 100%;
height: 250px;
object-fit: cover;
object-position: top;
}
@media screen and (max-width: 767px) {
.news-card img {
object-position: center;
}
}
.news-card h3 {
margin-top: 10px;
}
.card-content {
padding: 0 15px;
}
/* */
.newsletter-block { min-height: 500px; }
@media screen and (min-width: 668px) {
.hide-desktop { display: none; }
}
@media screen and (max-width: 667px) {
#portaltab-search-action { display: none; }
a#portal-logo + h5.hiddenStructure {
height: auto;
overflow: visible;
width: auto;
display: block;
color: white;
text-align: left;
padding: 5px 15px 5px 35px;
font-size: 80%;
background: url(menu-toggle.png) 29px center no-repeat #ffffff;
z-index: 50;
text-indent: -999em;
margin: 0;
position: relative;
top: 116px;
}
#portal-globalnav { margin: 0px; display: none; }
#portal-globalnav.opened { display: block; }
#portal-globalnav > li { float: none; }
#portal-globalnav > li a { background-color: #ffffff; }
#portaltab-index_html.selected a { background: #ea9f4f !important; color: #ffffff !important; text-indent: 0px; width:93%; }
#portal-globalnav li#portaltab-index_html a { background: url(blank.png)!important; text-indent: 0px; width:93%; }
.searchSection,
#portal-advanced-search { display: none; }
#portal-logo { margin: 0em 8em 1em; }
#portal-searchbox{ position: absolute; top: unset; bottom: 5px; right: 0; margin: 0; z-index: 1000; visibility: visible; }
#portal-searchbox + form  { display: none; }
#portal-personaltools-wrapper { text-align: center; position: absolute; top: 0; width: 83% }
#portal-personaltools { position: unset; }
#portal-header { padding-top: 3em; }
}
.fullwidth-section {
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
padding: 0;
overflow-x: hidden;
}
.narrow-width {
margin: 0 auto;
width: 1170px;
}
@media (max-width: 1170px) {
.narrow-width {
width: 96%;
padding: 0 15px;
}
}
.bg-grey {
background: #e5e5dc;
}
.pad15 {padding: 15px; }
.pad20 {padding: 20px 0; }
.pad30 {padding: 30px 0; }
.pad40 {padding: 40px 0; }
@media screen and (max-width: 767px){
.padphone {padding: 0 20px; }
}
.fullwidth-video-section {
width: 100vw;
height: 500px;
position: relative;
margin-left: -50vw;
left: 50%;
padding: 0;
overflow-x: hidden;
}
.white {
color: #fff!important;
}
.white a {
color: #95d659!important;
}
/* */
#hero-video {
width: 100vw;
height: 100vh;
position: relative;
margin-left: -50vw;
left: 50%;
padding: 0;
overflow-x: hidden;
margin-bottom: 40px;
margin-top: -16px;
z-index: 1;
}
#hero-video video {
width: 100%;
height: 100vh;
background-image: url(hero-video-bg.jpg);
background-size: cover;
background-color: #efefef;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
#hero-video .inner-content {
/* */
width: 100%;
height: 100vh;
z-index: 10;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
top: 30px;
}
#hero-video .inner-content h1 {
color: rgb(225 240 245 / 80%)!important;
font-size: 2.7rem;
text-align: center;
margin: 0 10%;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: -0.0135em;
text-transform: uppercase;
font-weight: 600;
line-height: 3.5rem;
z-index: 100;
}
#hero-video .inner-hero-content {
width: 70%;
height: 40vh;
z-index: 10;
position: absolute;
top: 0;
left: 15%;
display: flex;
align-items: center;
text-align: center;
}
@media screen and (max-width: 1200px) {
#hero-video .inner-hero-content {
width: 90%;
height: 40vh;
left: 5%;
}
}
@media screen and (max-width: 667px){
#hero-video {
width: 100vw;
height: 50vh;
}
#hero-video video {
height: 70vh;
}
#hero-video .inner-content h1 {
font-size: 2rem;
line-height: 2.5rem;
}
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
margin: 15px 0px;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.card-white {
border-radius: 8px;
background-color: #fff;
box-shadow: 0px 1px 5px 0 rgba(75,75,75,0.25);
color: #666;
margin: 10px;
}
.card-white h3 {
margin: 15px 0 5px;
}
.card-white h3 a {
color: #d68a3a !important;
}
.divider-medium {
display: block;
height: 20px;
padding: 20px;
}
.divider-small {
display: block;
height: 10px;
padding: 5px;
}
/* */
#portal-banner {
display: none;
height: 450px;
top: 0;
background-position: center;
background-size: cover;
background-color: #efefef;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
margin-bottom: 20px
}
@media (max-width: 767px) {
#portal-banner {
height: 250px;
}
}
.section-home #portal-banner,.section-home #edit-bar, .section-home #portal-breadcrumbs  {
display: none;
}
.section-about #portal-banner {
display: block;
background-image: url(/banner-images/natdiglib_28506_full.jpg);
}
.section-projects #portal-banner {
display: block;
background-image: url(/banner-images/DSCF0063.jpg);
}
.section-why-native-brook-trout #portal-banner {
display: block;
background-image: url(/banner-images/natdiglib_32745_full.jpg);
}
.section-funding #portal-banner {
display: block;
background-image: url(/banner-images/natdiglib_32745_full.jpg);
}
.section-science-data #portal-banner {
display: block;
background-image: url(/banner-images/science-banner.jpg);
}
.section-news-events #portal-banner {
display: block;
background-image: url(/banner-images/banner3.jpg);
height: 330px;
}
.section-donate #portal-banner {
display: block;
background-image: url(/banner-images/banner3.jpg);
height: 330px;
}
.section-why-wild-brook-trout #portal-banner {
display: block;
background-image: url(ryan-lara-unsplash.jpg);
height: 350px;
}
.subsection-styleguide #portal-banner {
display: block;
background-image: url(/banner-images/styleguide-banner.jpg);
height: 270px;
}
#kss-spinner {
display: none;
}
.trout-right {
background: #fff url(trout-right.jpg) no-repeat;
background-size: 210px;
background-position: -25px 100%;
}
.trout {
background: #fff url(trout-left.jpg) no-repeat;
background-size: 315px;
background-position: 115% bottom;
}
@media (max-width: 767px) {
.trout,.trout-right {
background: #fff url(blank.png) no-repeat;
}
}
.freshwater-bg {
background-image: url(banner-images/FreshwatersIllustrated_01089_ED.jpg);
background-size: cover;
background-position: center 80%;
}
.freshwater-bg2 {
background-image: url(banner-images/DrnNOVvw.jpg);
background-size: cover;
background-position: center;
padding: 20% 0;
}
@media (max-width: 767px) {
.freshwater-bg {
background-image: none;
}
}
.bg-blue {
background: #1a6678;
}
.blue-block {
background: #1a6678;
margin: 0;
padding: 40px;
color: #fff;
}
a.newsletter-btn {
background: rgb(215 140 62);
border: 1px solid #fff;
font-size: 1.5em;
padding: 25px;
border-radius: 8px;
color: #fff!important;
font-family: 'raleway';
border-bottom: 1px solid #fff!important;
display: table-cell;
}
a.newsletter-btn:hover {
background: #ffffff;
border: 1px solid #fff;
font-size: 1.5em;
padding: 25px;
border-radius: 8px;
color: #616161;
text-decoration-line: none;
}
.photo-credit {
color: #a3d8e4;
position: absolute;
left: 20px;
bottom: -310px;
font-size: 12px;
}
.photo-credit-right {
color: #a3d8e4;
position: absolute;
right: 20px;
bottom: 15px;
font-size: 12px;
}
.photocredit-banner {
color: #d9e1e2;
position: absolute;
right: 0;
top: -65px;
font-size: 12px;
z-index: 10;
}
.greybox {
background: #efefef;
padding: 15px;
}
/* */
#content form.searchPage h1{
text-align: left;
}
#content form.searchPage div{
text-align: left;
}
#content form.searchPage dl:not(.searchResults) dd {
margin: 0;
}
#content form.searchPage .select2-container { width: 100% !important; }
#content form.searchPage .select2-container ul { margin: 0; list-style-type: none; }
#content form.searchPage .collapser + .collapse { display:none; }
#content form.searchPage .expanded + .collapse { display:block; overflow: visible !important; }
#content form.searchPage .select2-container li { margin: 0; }
#content form.searchPage .select2-container input { height: 100%; }
#content form.searchPage #search-results-bar {
position: relative;
z-index: 1;
width: 100%;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
padding: 1em 0;
margin-bottom: 1em;
}
#content form.searchPage #search-results-bar .sortField { float: right; }
#content form.searchPage div.searchForm-fields{ text-align: center; }
#content form.searchPage .documentByLine { display: block; }
/* */
/* */
.grid_layout {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
place-content: flex-start;
}
.grid_layout .tileItem {
padding-top: 0;
width: calc((90% - (3 - 1) * 25px) / 3 - 1px);
margin: 0 20px 20px 0;
flex-grow: 1;
border: 1px solid #ededed;
box-shadow: 0px 0px 0px 0px #ededed;
-webkit-transition: box-shadow 0.6s linear;
transition: box-shadow 0.3s linear;
}
.grid_layout .tileItem:hover {
box-shadow: 0px 5px 10px 0px #ddd;
}
.gridImage img {
width: 100%;
height: 180px;
object-fit: cover;
margin-bottom: 10px;
}
.grid_layout .tileHeadline {
padding: 15px 15px 5px;
}
.grid_layout .tileBody {
padding: 0 15px;
overflow-wrap: break-word;
}
.grid_layout .tileFooter {
padding: 0 15px;
}
#content .grid_layout a:link {
border-bottom: none;
}
@media only screen and (max-width: 770px) {
.grid_layout .tileItem {
flex: 0 100%;
}
}
.section-partners .grid_layout {
}
.section-people .gridImage img {
width: 100%;
height: auto;
object-fit: contain;
margin-bottom: 10px;
padding: 10px;
}
#content .grid_layout a:link {
border-bottom: none;
}
@media only screen and (max-width: 768px) {
.grid_layout .tileItem {
flex: 0 100%;
}
}
/* */
dd.image-caption {
text-align: center;
padding: 15px 0;
margin: 0;
color: #676767;
font-size: 14px;
font-weight: 500;
margin: 0 0 1em 0!important;
border-bottom: 1px solid #ddd;
font-family: 'Raleway';
line-height: 1.4em;
}
.text-shadow {
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.45);}
.relatedItems {
margin-top: 1em;
background: #f1f1f1;
padding: 30px 30px 10px;
}
#relatedItemBox dt {
font-family: 'raleway';
text-transform: uppercase;
letter-spacing: 2px;
color: #d68a3a;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
#content .pullquote {
letter-spacing: -0.05em !important;
}
@media screen and (min-width: 667px) {
#portal-searchbox {
background-color: #fff;
border-radius: 10px 10px;
width: 60%;
margin: 1.2em auto;
top: 50px;
float: none;
}
#portal-searchbox .searchSection { display: none; }
#portal-searchbox .LSBox { margin: 0 10px; }
#portal-searchbox [type="text"] {
height: 38px;
display: inline-block;
width: 96%;
}
#portal-searchbox.opened{
visibility: visible;
transition: opacity 1s linear;
}
}
@media screen and (min-width: 1024px) {
#portal-top {
position: fixed;
z-index: 9;
margin-top: -140px;
}
#visual-portal-wrapper { margin-top: 140px; }
}
.login-portlet {
margin: 1rem auto;
display: flex;
justify-content: flex-end;
gap: 5px;
}
a.button{
text-transform: uppercase;
padding: 5px 12px;
font-size: .9rem;
font-family: 'Raleway', sans-serif;
display: inline-block;
margin: 5px 0;
font-weight: 600;
letter-spacing: 1px;
border: 1px solid #b4b4b4;
border-bottom: 1px solid #b4b4b4!important;
}
.btn-green {
background: #a7b254 !important;
color: #fff!important;
border: 1px solid #878787!important;
}
a.btn-green:hover  {
background: #e77424 !important;
color: #fff!important;
}
.btn-white {
background: #ffffff;
color: #5e5e5e!important;
}
a.btn-white:hover  {
color: #e77424 !important;
border: 1px solid #878787!important;
}
}