body {
     font-size:1em;
     line-height:24px;
     background-color:#228494;
}

a:link, a:visited {
     color:#228494;
     opacity:1!important;
}
a:active,a:hover {
     color:#2b507a;
}

a.advanced-search:active, a.advanced-search:hover{color:#fff;}

label {font-family:"Open Sans", sans-serif;}

#content a:active, #content a:hover {text-decoration:underline;}

#content{background-color:#2b507a;}

#content .blocks {padding-top:3em;}
#content .blocks h4 {
     color:#ffffff;
     margin-bottom:0;
}

.preview-block{margin-top:0!important;}

header {
     border-bottom:0px;
     padding-top:0;
     margin-bottom:0;
}

header>*, #content, footer {max-width:100%;}

header h1 {
     font-size:2em;
     line-height:3em;
     margin:0;
}

h1 a.site-title {color:#4b6569;}

header nav {background-color:#228494;}
header nav ul a:link, header nav ul a:visited {
     padding:15px 16px;
     color:#def9ff!important;
     border:1px solid transparent;
}
header nav ul a:hover {
     color:#fff;
     border:1px solid #dedede;
     opacity:1;
     background-color: rgba(0, 0, 0, 0.15)!important;
}

header nav ul li.active{
     color:#fff;
     opacity:1;
     background-color: rgba(0, 0, 0, 0.15)!important;
}

nav.pagination, input, textarea, button, .button, .resource-list.preview+a, select {
     font-size:1em;
}
nav.pagination span {color:#fff;}

nav.sub-menu {margin-top:3.8em;}

.breadcrumbs {
     margin-top:3.8em;
     padding-top:1em;
     font-size:0.9375em;
     color:#fff;
}

.site-page-pagination {display:none;}

aside{margin-top:1em;}

#content h2 {
     margin-bottom:.5em;
     margin-top:2em;
     padding-top:.5em;
}

.preview-block ul.resource-list .resource, .site-list{
     display:flex;
     flex-direction:column;
     align-items:center;
}

/*white background*/
body.item.show .media-embeds, .item-metadata, .resource-list, .blocks p, form#advanced-search,#content > .property,.hTagcloud, .items.results, .site_pages.results, .site-login, #comments-container, .site-list {
     background-color:#fff;
     padding:1em;
     border-top:10px solid #228494;
}

#content #comments-container h2 {color:black;}

div#comments-container {margin-bottom:1em;}

.comment-flag {display:none;}
#comments h2  {
     font-size:1.25em;
     line-height:24px;
     padding-top:0;
}

.comment .comment-reply{
     padding:4px 7.5px;
     background-color:#228494;
     color:#fff;
     border-radius:2px;
     font-weight:900;
}

#comment-form .field {margin:0;}

.field .inputs {width:100%;}

#comment-form label {
     display:inline-block;
     padding-bottom:.75em;
}

input.fas.fa-comment {font-family:"Open Sans", sans-serif;}


body.login #content {padding-top:1em;}

aside .property h4 {
     background-color:#fff;
     border-top: 10px solid #228494;
     padding: 1em 1em 0 .75em;
}

aside .property .value {
     background-color:#fff;
     padding: .5em 1em 0em 1em;
}

aside .property .value:last-child{padding-bottom:1em;}

.item.resource h4 {font-size:1.125em;}

.resource-list {padding:1em 0;}

body.item.show .media-embeds .media-render {text-align:center;}

.item-metadata{
     margin-top:1em;
}

#content h2, .item-set-items h3 {color:#fff;}

div#item-linked {display:none;}

/* search results layout */
#content .results h2 {
     color:black;
     padding-top:0;
     padding-bottom:.5em;
}

body.search #content h1 {
     font-size:30px;
     color:#fff;
     margin-top:0;
     margin-bottom:.5em;
     padding-top:.5em;
     line-height:45px;
}

.results>ul {margin-bottom:2em;}

/*item metadata*/
.property {margin-bottom:1em;}
.property h4 {font-size:1.25em; margin-top:0;}

/* turn item browse list into grid */
ul.resource-list, .site-list {
     display:flex;
     flex-wrap:wrap;
     flex-direction:column;
}

ul.resource-list .resource, .site-list .site {
     flex-basis:100%;
     padding:1em;
     border:1px solid rgba(0,0,0,0.125);
     border-radius:4px;
     margin:0 1% 1.5em 1%;
}

ul.resource-list .resource img, .list-of-sites .site-list .site-thumbnail-image  {
     width:auto;
     height:auto;
     float:none;
     margin-left:0;
     max-width:100%!important;
}

.resource-list li.resource span {
     display: block;
     /*height: 250px;
     overflow: hidden; this makes a cropped image view on grids*/
     margin-bottom:12px;
}

ul.resource-list .resource .description {
     max-height:inherit;
     overflow:visible;
     display:none;
}

ul.resource-list .resource h4 {
     margin-bottom:.5em;
}
ul.resource-list .resource .description:after{content:none;}

ul.resource-list .collection-items-link a {padding:.5em;}
p.collection-items-link{
     border-top:1px solid #dfe2e2;
     padding-top:.5em;
}

/*previous and next buttons*/
.previous-next-items {
     margin-bottom:2em;
     display:flex;
     justify-content:space-between;
}

a.previous-item, a.next-item {
     background-color: #228494;
     border: none;
     padding: 15px 32px;
     display: inline-block;
}
a.previous-item:link, a.next-item:link,a.previous-item:visited, a.next-item:visited{color: white;}

.next-item::after {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061";
  }

  .previous-item::before {
      font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f060";
    }

   .collection-items-link a::after {
        font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061";
      }

.sub-menu .navigation a:link, .sub-menu .navigation a:visited{color:white;}

/*styling the map marker popup*/
.mapping-marker-popup-content h3 {
     font-size: 1.5em;
    line-height: 1.25;
    margin-bottom:.5em;
}
/*hiding link to the file that shows in popup with media: */
.mapping-marker-popup-content div:first-of-type {display:none;}


footer {
     color:#fff;
     background: #228494;
    padding-top: 2em;
}

button, a.button, .resource-list.preview+a, [type="submit"] {
     background-color:#228494;
     color:#fff;
}

.pagination .button, .pagination .resource-list.preview+a{
     background-color:#228494;
     color:#fff;
     border:1px solid #228494;
}

.pagination .inactive.button {
     color:#ababab;
}

.filter-label, .filter-value {
     border:0px;
     background-color:#fff;
}

.filter-label {
     background-color:#def9ff;
}

/*item set page*/
body.item-set #content .metadata {display:none;}/*hide collection metadata*/

/*family tree*/
.family-tree {
     background-color:#fff;
     padding:.75em;
}

.family-tree a:link, .family-tree a:visited {
     color:white;
}

.family-tree .person {
    font-size: 1em;
    padding:1em;
    color: white;
    text-align: center;
    text-decoration: none;
    border:1px solid rgba(0,0,0,0.125);
    border-radius:4px;
    margin:0 .25% .25% .25%;
    flex-grow:1;
}

.family-tree .inner-person{
    padding:.5em 0;
}

.family-tree .purple {
  background-color:#7b356c;
}

.family-tree .blue {
  background-color:cornflowerblue;
}

.family-tree .green {
  background-color:#00a058;
}

.family-tree .orange {
  background-color:orange;
}

.family-tree .red {
  background-color:crimson;
}

.family-tree .couple {
  opacity:.65;
}

.family-tree .spouse{
  opacity:.5;
}


div#mapping-map {top:5.5em;}
form#advanced-search {margin-top:5.5em;}
.items.search form#advanced-search, .item-sets.search form#advanced-search {margin-top:0em;}

.vvvvv-popular a, .vvvvv-popular a:visited, .vvvvvv-popular a, .vvvvvv-popular a:visited, .vvvvvvv-popular a, .vvvvvvv-popular a:visited, .vvvvvvvv-popular a, .vvvvvvvv-popular a:visited, .popular a, .popular a:visited, .v-popular a, .v-popular a:visited, .vv-popular a, .vv-popular a:visited {
     color:#4b6569!important;
}



/*Back to top button*/

  #backtop {
     position: fixed;
     left:auto;
     right: 20px;
     top:auto;
     bottom: 20px;
     outline: none;
     overflow:hidden;
     color:#fff;
     text-align:center;
     background-color:rgba(34,132,148,0.84);
     height:40px;
     width:40px;
     line-height:40px;
     font-size:14px;
     border-radius:2px;
     cursor:pointer;
     transition:all 0.3s linear;
     z-index:999999;
     opacity:1;
     display:none;
  }
  #backtop:hover {
      background-color:#def9ff;
  }
  #backtop.mcOut {
      opacity:0;
  }


.list-of-sites{margin:1rem 0;}

.list-of-sites .site-list .site-link{
     margin-top: 0.5em;
     font-weight: bold;
     padding:.5em;
}


@media screen and (min-width: 768px){

aside{margin-top:0em;}

ul.resource-list, .site-list {
     flex-direction:row;
     justify-content:center;
}
ul.resource-list .resource {
     flex-basis:23%;
}

.site-list .site {
     flex-basis:48%;
     max-width:650px;
}

.preview-block ul.resource-list .resource{
     flex-basis:18%;
}

ul.resource-list .resource:hover, .site-list .site:hover {
     box-shadow: 0 4px 12px 0 rgb(0 0 0 / 40%);
}


#content::after {
  content: "";
  clear: both;
  display: table;
}

main{
     width: 61.53846%;
     float: left;
     margin-right: 2.5641%;
     margin-left: 0;
}

aside, #content > .property, #comments-container {
     width: 35.89744%;
     float: left;
     margin-right: 0;
}

.family-tree{
       display:flex;
       flex-wrap:wrap;
}
.family-tree .one {flex-basis:100%;}
.family-tree .two {flex-basis:49.5%;}
.family-tree .three {flex-basis:32.8333333%;}
.family-tree .four {flex-basis:25.5%;}
.family-tree .five {flex-basis:19.5%;}
.family-tree .six {flex-basis:16.1666666%;}
.family-tree .seven {flex-basis:13.785%;}
.family-tree .eleven{flex-basis:8.59090909%;}

}

@media screen and (min-width: 800px) {

/*fixing drop down menu*/
     header nav ul.navigation li.parent {position:relative;}
     header nav ul.navigation>li>ul>li {width:auto;}
     header nav>ul li:hover ul li {white-space: nowrap;}
     /*header nav ul.navigation>li>ul {background-color:transparent;}
     header nav ul.navigation>li:hover>ul:after {
          left:0;
          right:0;
          position:static;
          border:0;
     }*/
     header nav>ul>li>ul>li.active>a:before {
          content:none;
          margin-left:0;
     }

     header nav>ul>li>ul>li.active>a {
          margin-left:0;
          border:1px solid #dedede;
     }


     #content .blocks {padding-top:.25em;}

     #search {top:0;}

     header nav>ul>li>a, header nav>ul>li>.parent-link>a {margin:0;}
     header nav ul.navigation>li:hover>ul:after {
          background-color:#2796a9;
     }

     header nav ul.navigation>li:hover>ul {
          padding-top:0;
          padding-bottom:0;
          z-index:10000;
     }

     #content, header>*, header nav, footer {
          padding-left:6.77966%;
          padding-right:6.77966%;
     }

     nav.pagination {margin-bottom:.75em;}

     .sub-menu ul {
          padding-top:1em;
          margin-top:0;
     }

     nav.sub-menu, .breadcrumbs, #content h2 {margin-top:0em;}

     /*item set page*/
     body.item-set #content .metadata ~ * {
          width:100%;
          border-left:0px;
          padding-left:0:
     }
     body.item-set.item #content {display:block;}

     div#mapping-section {
          clear:both;
          padding-top:1.5em;
     }

     div#mapping-map {top:0;}
     form#advanced-search {margin-top:0;}

}

@media screen and (min-width: 1200px){
     ul.resource-list .resource {
          flex-basis:18%;
     }
     .preview-block ul.resource-list .resource{
          flex-basis:18%;
     }
}

@media screen and (min-width: 1800px){
     ul.resource-list .resource {
          flex-basis:14.666666%;
     }
     .preview-block ul.resource-list .resource{
          flex-basis:18%;
     }
}