/* 
This CSS style applies to the html files, the virtual guide, and all other elements of the project ChemView360 directed by the Department of Chemistry at the University of Bergen, Norway (https://www.uib.no/en/kj). 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 ChemView360 by Jonathan Soule.

*/



/*                         */
/* Developer notes
KI main color:  #8FA96A
KI active color: #728754
*/
/*                         */

/*                         */
/* 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: #8FA96A; 
    text-decoration: none;
}

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

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

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;
}

td.explorer_acid {
    color: #f5f5f5;
    text-align:center;
    background-color: rgba(255, 12, 29, 0.7);
}

td.explorer_base {
    color: #f5f5f5;
    text-align:center;
    background-color: rgba(0, 0, 255, 0.7);
}

td.explorer_accessory {
    background-color: rgba(237,127,16, 0.7);
    text-align:center;
}

td.subzoneA {
    color: white;
    text-align: center;
    background-color: rgba(205, 83, 50, .7);
}

td.subzoneB {
    color: white;
    text-align: center;
    background-color: rgba(243, 177, 0, .7);
}

td.subzoneC {
    color: white;
    text-align: center;
    background-color: rgba(50, 205, 97, .7);
}

body.nav tr {
    height: 35px;
}

tr.extra { 
    background-color: rgba(255, 253, 33, .5);
}

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

table.chemicals td:first-child {
    font-weight: 700;
}

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

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

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

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

h2.explorer {
    color: #728754;
}

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: 'IBM Plex Sans', sans-serif;
}

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;
}

/*                         */
/*	Field handbook buttons species/to notice styling  */
/*                         */
/*
div.explorer   {
	margin-top: 10; 
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 10px;
	padding: 10px;
    border-bottom: 1px solid #DFDFDF;
    border-left: 12px solid #0099ff;
}
div.plant {
    border-left: 12px solid #00e269;
}
div.nutrient {
    border-left: 12px solid #D7E7A9;
}
div.algae {
    border-left: 12px solid #CFDCF2;
}
div.moss {
    border-left: 12px solid #5f7d0f;
}
div.marine {
    border-left: 12px solid #9AD5FA;
}
div.animal {
    border-left: 12px solid rgba(255, 12, 29, 0.7);
}
div.bird {
    border-left: 12px solid #e39d22;
}
div.lichen {
	border-left: 12px solid #848c6f;
}

div.invertebrate {
    border-left: 12px solid rgba(255, 111, 135, 0.7);
}

div.top {
    margin-top: 10; 
    margin-bottom: 0;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 0px solid white;
}

div.mid {
    margin-top: 0; 
    margin-bottom: 0;
    border-radius: 0px 0px 0px 0px;
}

div.bottom {
    margin-top: 0; 
    margin-bottom: 10;
    border-radius: 0px 0px 10px 10px;
}

div.explorer:hover {
	background-color: #8FA96A;
}

*/


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

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

ul {
    line-height: 1.5;
    font-size: 16px;
    font-family: 'IBM Plex Sans', sans-serif;
}


/*                         */
/* 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;

}

/*                         */
/* 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;
}


/*                         
    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 {
    background-color: #8FA96A;
    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 {
    background-color: #728754;
    border-color: #728754;
    border-width: 3px;
  }
  
.collapsibletextimage {
    background-color: #8FA96A;
    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;
  }

/*                                                  */
/*   Collapsible buttons in shorcut page            */
/*                                                  */

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

.shortcut {
    background-color: #f5f5f5;
    width: 45%;
    color: #8FA96A;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    border: solid #8fa96a 3px;
    border-radius: 10px;
    margin-left: clamp(10px, 1vw, 20px);;
    margin-right: auto;
    
  }

  .shortcut:hover {
    text-decoration: none;
    border: solid #728754 3px;
    color: #728754;
  }



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

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

.buttontitle {
    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: 400px) { 
    .card-tall {
      grid-row: span 2 / auto;
    }
  
    .card-wide {
      grid-column: span 2 / auto;
      
    }

 } 


 @media screen and (max-width: 400px) {
    .image-mosaic {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(120px, 120px));
        grid-auto-rows: 120px;
    }
    
    .card{
      grid-row: span 2 / auto;
      grid-column : span 2;
    }

    .card-tall {
      grid-row: span 4;
      grid-column: span 2;
      background-size: 117%;
    }
  
    .card-wide   {
      background-size: cover;
      grid-column: span 2;
      grid-row: span 1;
    }

 } 



/*                                    */
/*               QUIZ                 */
/*                                    */