/* 
This CSS style applies to the html files, the virtual guide, and all other elements developed for the course BIO325 at the Department of Biological Sciences, University of Bergen, Norway (https://www.uib.no/en/bio). Parts of this files are directly derived from the project Fieldpass at the University Centre in Svalbard (https://www.unis.no/project/fieldpass/). The origical CSS style was written by Simen Salomonsen Hjelle, and modified (with permission from the author) for BIO325 by Jonathan Soule.

*/



/*                         */
/* Developer notes
BIO325 main color:  #151B4D
BIO325 secondary color: #1E5484
BIO325 optional color: #DDAE58
BIO325 accent color orange: #F49F1C

*/
/*                         */

/*                         */
/* Body styling */
/*                         */
body {
    background-color: #f5f5f5;
}

body.nav {
    margin: 0;
    padding: 0;
}

body.nav a {
    font-weight: 700;
}

body.nav th {
    background-color: #f5f5f5;
}

body.nav th:hover {
    background-color: #8FA96A;
    cursor: pointer;
}

/*                         */
/* Hyperlinks styling */
/*                         */

a:link, a:visited {
	color: #27567C; 

}

a.notice:link, a.notice:visited {
	color: #000000; 
    text-decoration: none;
}

a:hover {
	text-decoration: underline;
    color: #27567C;
}

a.subselect:hover {
    text-decoration-color: rgb(0, 0, 0);
}

a.button:hover {
    text-decoration: none;
}




/*                         */
/* Selector panel (Switching between locations with multiple introduction texts) styling */
/*                         */

#selector-panel {
    display: flex;
    padding-top: 5px;
}

#selector-panel div {
    cursor: pointer;
    display: inline-block;
  }
  
#selector-panel div.selected {
    font-weight: bold;
  }



/*                         */
/* Table styling*/
/*                         */

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 16px;
    font-family: 'IBM Plex Sans', sans-serif;

}

td, th {
    padding: 5px;
}

th {
    text-align: center;
    border-bottom: 1px solid #42443c;
}

tr:nth-child(even) {
    background-color: #dfdfdf;
  }

/*                         */
/*	Heading TXT styling  */
/*                         */

h1, h2, h3, h4 {
    font-family: 'Open Sans', sans-serif;
}

h1.explorer {
	color: #151B4D; 
	margin-top: 6px; 
	margin-bottom: 10px;
    font-size: 43px;
    font-weight: 700;
}

h1.subzonetxt {
    font-size: 30px;
}

h2.explorer {
    color: #2B78BD;
}

h3.explorer, h3.explorerb {
	margin-top: 0; 
}

h3.explorer {
	color: #f0f0f0; 
	margin-bottom: 0;
    font-size: 17px;
    font-weight: 600;
}

h3.black {
	color: black; 
}

h3.explorerb {
    color: #f0f0f0;
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 600;
}

/*                         */
/*	Paragraphs styling  */
/*                         */

p {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.25;
}

p.explorer {
	color: rgb(22, 22, 22); 
	margin-top: 0; 
	margin-bottom: 10px;
    font-size: 16px;
}


p.explorerb {
	color: rgb(22, 22, 22);
	margin-top: 0; 
	margin-bottom: 0;
	line-height: 1.5;
	font-size: 14px;
}

p.figuretxt {
	color: rgb(22, 22, 22);
	margin-top: 5px; 
	margin-bottom: 5px;
    line-height: 1.5;
	font-size: 13px;
}

body.nav p.figuretxt {
    color: #f5f5f5;
    margin: 0;
    padding: 0;
    padding-left: 10px;
}




/*                         */
/* Lists styling */
/*                         */

ul.notice {
    color: #f5f5f5;
    margin: 0;
}

ul {
    line-height: 1.25;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}

li {
    font-family: 'Open Sans', sans-serif;
    color: rgb(22, 22, 22); 
	margin-top: 0; 
	margin-bottom: 10px;
    font-size: 16px;
}

/*                         */
/* Image styling
*/
/*                         */

img {
	border-radius: 10px;
    width: 100%;
    height: auto;
    max-width:700px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

img.picto {
    width: 40px;
    height: 40px;
    display: inline-block;
    
}

img.explorer {
	border-radius: 10px;
    max-width:700px;
    display: block;
    margin-left: auto;
    margin-right: auto;

} 

img.wide {
    object-fit: cover;
    width: 100%;
    height: 400px;
    border-radius: 10px;
}


img.button {
    width: 100px;
    height: 100px;
    display: flex;
    margin-left: 0;
    padding: 0px 20px 0px 0px;

}

figcaption {
    
    padding-top: 5px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 80%;
}




/*                         */
/* Video container styling */
/*                         */


video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.introvideo{
    width: 95%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.collapsevideo{
    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.video-container { 
    position: relative; 
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 10px;
} 

.video-container iframe,
.video-container object,
.video-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

video::cue {
    background-color:rgba(36, 36, 36, 0.573);
    color: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 10px;
}



/*                         */
/* Logo styling (not in use) */
/*                         */

.container-about-logos{
  margin: 20px auto;
  display:grid;
  grid-template-columns: 200px 200px;
  grid-row: auto auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.box-logo{
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*                         */
/* Navigation styling (For the navigation tables)*/
/*                         */

ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    background-color: #8FA96A;
}

nav {
    width: 100%;
}

li.nav {
    float: left;
    height: 45px;
}

li.nav a {
    display: block;
    padding: 8px;
    height: 100%;
    padding: 10px;
    color: #f5f5f5;
    background-color: #8FA96A;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
}

li.nav a:hover {
    color: #f5f5f5;
    background-color: #728754;
    text-decoration: none;
}

li.nav a.active {
    background-color: #728754;
}

/*                         */
/*	Emojie flags styling  */
/*                         */

span.emoji {
    font-family: 'Noto Color Emoji';
    font-size: 14px;
}

h3.explorerb span.emoji {
    font-size: 18px;
}


/*                            */
/*  Icon guide on start page  */
/*                           */

.icon-guide {
    list-style: none;
    margin: 0;
    padding: 0;
}

.icon-guide-item {
    display: grid;
    grid-template-columns: 10% 1fr;
    column-gap: 3%;
    align-items: center;
    padding: 1rem 0;
}

.icon-guide-image {
    text-align: center;
}

.icon-guide-image img {
    max-width: 100%;
    height: auto;
}

.icon-guide-description {
    min-width: 0;
}

.icon-guide-item:nth-child(odd) {

    background-color: #dfdfdf;

}

@media (max-width: 600px) {
    .icon-guide-item {
        grid-template-columns: 60px 1fr;
        column-gap: 1rem;
    }
}

/*                         
    Quote div class box / for quotes
*/

div.quote {
    background-color: #fff;
    width: 60%;
    padding: 10px;
    border-left: 10px solid #8FA96A;
}

div.quote p.explorerb {
    font-style: italic;
}

/*                          */
/*   Collapsible buttons    */
/*                          */

.collapsible, .noncollapsible{
    background-color: #2B78BD;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-width: 0;
    border-radius: 12px;
    text-align: left;
    outline: none;
    font-size: 15px;
    margin-bottom: 10px;
    display: inline-flex;
  }
  
.collapsible:hover, .collapsible:active, .noncollapsible:hover, .noncollapsible:active {
    background-color: #1E5484;
    border-color: #151B4D;
    border-width: 3px;
  }
  
.collapsibletextimage {
    background-color: #2B78BD;
    color: white;
    cursor: pointer;
    padding: 0px;
    width: 100%;
    border-width: 0;
    border-radius: 12px;
    outline: none;
    font-size: 15px;
    margin-bottom: 10px;
    align-items: center;
    display: inline-flex;
  }

.collapsibletextimage img{
    margin-right: 0px;
    pointer-events: none;
}

.collapsibletextimage h1 {
    pointer-events: none;
}

.content {
    padding: 0px 10px 18px 10px;
    display: none;
    overflow: hidden;
    background-color: #f5f5f5;
  }

.contentShortcut {
    padding: 0px 10px 18px 10px;
    display: none;
    justify-content: center;
    overflow: hidden;
    background-color: #f5f5f5;
    
  }


.shortcut {
    background-color: #f5f5f5;
    color: #151B4D;
    text-align: center;
    padding: 10px;
    border: solid #151B4D 3px;
    border-radius: 10px;
    margin-left: clamp(10px, 1vw, 20px);
    margin-right: auto;
    margin-bottom: 10px;
  }

.shortcut:hover {
    background-color: #151B4D;
    color: #DDAE58;
  }

.shortcutbtn, .shortcutbtn:hover {
    text-decoration: none;
  }

.shortcuttitle {
    font-family: "Open Sans", sans-serif;
    font-size:1.75em;
    font-weight: 500;
  }

/*                                    */
/*   Image buttons in pages           */
/*                                    */

button.btnshow  {
    font-weight: 700;
    background-color: #1E5484;
    color: black;
    cursor: pointer;
}

.buttontitle {
    text-align:left;
    font-size:1.75em;
    font-weight: 500;
    text-decoration: none;
}

.noncollapsible a {
    text-align:left;
    font-size:1.75em;
    font-weight: 500;
}


/*                                    */
/*   Responsive mosaic of pictures    */
/*                                    */

  .label {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    font-size: 25px;
    
    padding-left: 25px; 
    padding-right: 25px;    
    pointer-events: none;
    
  }

  .toggleable {
    display: none;
  }

  .wide {
    width: 100%;
  }

  div.label p {
    text-align: center;
  }


  .image-mosaic {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 240px));
    grid-auto-rows: 240px;
  }
  
  .card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    font-size: 3rem;
    color: #fff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    transition: all 500ms;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
  }

  .card:hover {
    opacity: .7;
  }

  .card:focus {
    opacity: .2;
  }
  
  @media screen and (min-width: 600px) {
    .card-tall {
      grid-row: span 2 / auto;
    }
  
    .card-wide {
      grid-column: span 2 / auto;
    }
  }