/****************************************************************************************
* General items
****************************************************************************************/
:root
{
   --project-background-color: #E2E9E9;
   --project-page-color: white;
   --project-accent-color: #98B2B2;
   --project-font-color: white;
}

html
{
   font-size: 10px; /* Root em */
}

body
{
   font-family: "Work Sans", sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
   background-color: var(--project-background-color);
   margin: 0;
}

h1, h2, h3, h4
{
   font-weight: bold;
   margin-top: 2rem;
   margin-bottom: 1rem;
}

h1
{
   font-size: 2.2rem;
}

h2
{
   font-size: 2.0rem;
}

h3
{
   font-size: 1.8rem;
}

h4, p, .popover
{
   font-size: 1.6rem;
}

a:link,
a:visited
{
   text-decoration: none;
   color: #207F7F;
}

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

button:focus
{
   outline: 0;
}

.font-italic
{
   font-style: italic;
}

/***********************************************************
* Vertical navigation for large screen (Bootstrap)
***********************************************************/
.sidebar
{
   color: var(--project-font-color);
   background-color: var(--project-accent-color);
   min-width: 34rem; /* Prevents wrapping */
   padding: 2rem;
}

.sidebar hr
{
   background-color: var(--project-font-color);
   opacity: 0.4;
   height: 2px;
   border: none;
   margin: 1.2rem 0 1.2rem 0;
}

.sidebar p
{
   font-style: italic;
   font-size: 1.5rem;
}

nav
{
   margin-bottom: 2rem;
}

nav.vertical ul
{
   list-style-type: none;
   font-size: 1.74rem;
   background-color: inherit;
}

nav.vertical a:link,
nav.vertical a:visited
{
   color: inherit;
   background-color: inherit;
}

nav.vertical li.active,
nav.vertical a:active,
nav.vertical a:hover
{
	text-decoration: none;
   color: black;
   background-color: inherit;
}

ul.indent
{
   padding-left: 2rem;
}

.menu-arrow
{
   font-size: 1.3rem;
   margin-left: 1.2rem;
}

/***********************************************************
* Horizontal navigation for small screen
***********************************************************/
nav.horizontal
{
   color: var(--project-font-color);
   background-color: var(--project-accent-color);
   font-size: 1.84rem;
   display: flex;
   
   /* Sticky menu bar part 1 */
   position: fixed;
   top: 0;
   width: 100%;
   margin: 0;
}

nav.horizontal ul
{
   background-color: var(--project-accent-color);
	list-style-type: none;
	position: relative;
	display: flex;
   padding: 0;
   margin: 0;
   z-index: 1100; /* Always on top */
}

nav.horizontal li
{
   white-space: nowrap;
   text-align: left;
	float: left;
   padding: 0.4rem 1.4rem 0rem 1.4rem;
}

nav.horizontal a
{
   color: inherit;
   display: block;
}

nav.horizontal li.active,
nav.horizontal a:active,
nav.horizontal a:hover
{
	text-decoration: none;
   color: black;
}

nav.horizontal ul ul
{
	display: none; /* Hide when not needed */
	position: absolute;
   top: 100%;
   left: 0%;
   padding: 0 0 1rem 0;
}

nav.horizontal ul li:hover > ul
{
   display: block; /* Display on hover */
   border: 2px solid var(--project-font-color);
}
   
nav.horizontal ul ul li
{
   float: none;
   position: relative;
}

nav.horizontal hr
{
   background-color: var(--project-font-color);
   opacity: 0.4;
   height: 0.2rem;
   border: none;
   margin: 0;
}

.hamburger
{
  width: 2.4rem;
  height: 0.3rem;
  background-color: var(--project-font-color);
  margin: 0.5rem 0;
}

.menu-items-block
{
   margin-right: auto; /* Within [display: flex] this behaves in a specific way */
}

.button-block
{
   margin-left: auto; /* Within [display: flex] this behaves in a specific way */
}

.button-block button
{
   background-color: inherit;
   border: none;
   padding: 0;
   margin: 0.4rem 1rem 0.4rem 0.4rem;
}

/***********************************************************
* Bootstrap adjustments
***********************************************************/
hr
{
   opacity: 1;
}

.container
{
   background-color: var(--project-page-color);
   width: 100%;
   max-width: 120rem;
   padding: 0;
}

/****************************************************************************************
* Header & footer
****************************************************************************************/
.small-screen-top
{
   background-color: var(--project-background-color);
   padding-top: 3.4rem; /* Sticky menu bar part 2 */
   margin-bottom: 1.4rem;
}

.small-screen-header
{
   display: flex;
   justify-content: center;
}

.small-screen-header td
{
   padding-right: 3rem;
}

.small-screen-header img
{
   height: 8rem;
}

.small-screen-title
{
   font-size: 2.0rem;
   line-height: 1.3;
}

.small-screen-footer
{
   background-color: var(--project-accent-color);
   padding: 1rem;
   margin: 2rem 0 0 0;
}

/****************************************************************************************
* Header
****************************************************************************************/
td.header
{
   padding: 0;
}

img.header
{
   height: 10rem;
}

button.language
{
   border: none;
   background-color: inherit;
   margin: 2rem 0 0 3rem;
}

/****************************************************************************************
* Images
****************************************************************************************/
img
{
   max-width: 100%;
}

img.simple-border
{
   border: 1px solid grey;
}

img.bordered
{
   border: 1px solid grey;
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
   margin-right: 2rem;
}

img.thumb-mw
{
   width: 45rem;
}

img.thumb-lw
{
   width: 65rem;
}

img.thumb-sh
{
   height: 20rem;
}

img.thumb-mh
{
   height: 30rem;
}

img.thumb-lh
{
   height: 40rem;
}

img.fact
{
   width: 72rem;
}

img.review
{
   height: 10rem;
   margin-bottom: 1rem
}

/****************************************************************************************
* Table
****************************************************************************************/
table.standard
{
   empty-cells: show;
   border-collapse: collapse;
   margin-top: 1rem;
   margin-bottom: 1rem;
}

th
{
   font-weight: bold;
   text-align: left;
}

th, td
{
   vertical-align: top;
   padding-right: 2rem;
}

td.description
{
   vertical-align: top;
}
 
table.bordered > thead > tr > th,
table.bordered > thead > tr > td,
table.bordered > tbody > tr > th,
table.bordered > tbody > tr > td,
table.bordered > tfoot > tr > th,
table.bordered > tfoot > tr > td
{
   border: 1px solid grey;
   padding-left: 1rem;
}

/****************************************************************************************
* List
****************************************************************************************/
ul.plain
{
   list-style-type: none;
   padding-left: 2rem;
}

ul.spacious li
{
   margin-bottom: 1rem;
}

ol.spacious li
{
   margin-bottom: 1rem;
}

ul.standard
{
   margin-top: 1rem;
   list-style-type: disc;
}

ul.standard li
{
   margin-bottom: 0rem;
}

ul.history
{
   padding-left: 2rem;
}

/****************************************************************************************
* Source info
****************************************************************************************/
.source
{
   cursor: pointer;
   margin: 0;
   color: #1E5AB4;
}

/****************************************************************************************
* Download page
****************************************************************************************/
.download table
{
   margin: 3rem 1rem 3rem 0rem;
}

.download tr
{
   background-color: var(--project-accent-color);
}

.download td
{
   color: var(--project-font-color);
   padding: 1rem 2rem 1rem 2rem;
   border: 1px solid black;
}

.download a
{
   color: var(--project-font-color);
   background-color: var(--project-accent-color);
   line-height: 24px;
}

.download a:link,
.download a:visited
{
   color: var(--project-font-color);
}

.download a:active,
.download a:hover
{
	text-decoration: none;
   color: black;
}

.download hr
{
   background-color: white;
   height: 1px;
   border: none;
}

.checksum
{
   float: right;
   margin-left: 4rem;
}

/***********************************************************
* Contact
***********************************************************/
.contact table
{
   width: 40rem;
}

.contact td
{
   padding-right: 1rem;
   padding-bottom: 1rem;
}

.contact button
{
   color: white;
   background-color: var(--project-accent-color);
   padding: 0.3rem 2rem 0.3rem 2rem;
   border-width: 0;
}

.lowered
{
   border-top: 2px solid #A4A4A4;
   border-bottom: 1px solid silver;
   border-left: 2px solid #A4A4A4;
   border-right: 1px solid silver;
}

.raised
{
   border-top: 1px solid silver;
   border-bottom: 2px solid #A4A4A4;
   border-left: 1px solid silver;
   border-right: 2px solid #A4A4A4;
}

/***********************************************************
* Presentation of source and fact note
***********************************************************/
a.button-lookalike
{
   outline: none;
   text-decoration: none;
   background-color: #EDEDED;
   border-radius: 5px;
   padding: 0.1rem 0.7rem 0.1rem 0.7rem;
}

/****************************************************************************************
* Program button
****************************************************************************************/
.atm-button-lookalike
{
   background-color: rgb(230, 230, 230);
   text-align: center;
   white-space: nowrap;
   padding: 2px 10px 2px 10px;
   border-radius: 4px;
   border: 1px solid silver;
   margin-left: 2px;
   margin-right: 2px;
}

/****************************************************************************************
* Important text
****************************************************************************************/
.important
{
   border: 0.5rem solid var(--project-accent-color);
   padding: 1rem;
   margin: 2rem 0rem 2rem 0rem;
}

.semi-important
{
   border: 0.3rem dashed var(--project-accent-color);
   padding: 1rem;
   margin: 2rem 0rem 2rem 0rem;
}

.important hr
{
   background-color: var(--project-accent-color);
   height: 0.5rem;
   border: none;
   margin: 1.5rem;
}

/****************************************************************************************
* Span types
****************************************************************************************/
span.menu
{
   font-weight: bold;
   color: #607F7F;
   white-space: nowrap;
}

span.tab
{
   font-weight: bold;
}

span.section
{
   font-weight: bold;
}

span.key
{
   font-style: italic;
}

span.path
{
   font-style: italic;
   white-space: nowrap;
}

/***********************************************************
* Fonts
***********************************************************/
@font-face
{
  font-family: "Work Sans";
  
  src: url("Fonts/WorkSans-VariableFont_wght.ttf") format("truetype"),
       url("Fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");
}

/***********************************************************
* Small screen
***********************************************************/
@media screen and (max-width: 599px)
{
   td.description
   {
      white-space: normal;
   }
   
   .sidebar
   {
      display: none;
   }

   .content-block
   {
      width: 100%;
      min-height: 70rem;
      padding: 0rem 2.4rem 0rem 2.4rem;
   }
   
   .small-screen
   {
      display: block;
   }

   span.path
   {
      white-space: normal;
   }

   h3::before
   { 
      display: block; 
      content: " "; 
      visibility: hidden; 
      pointer-events: none;
   
      height: 5rem; 
      margin-top: -5rem; 
   }
}

/***********************************************************
* Medium screen
***********************************************************/
@media screen and (min-width: 600px) and (max-width: 1199px)
{
   td.description
   {
      white-space: normal;
   }
   
   .sidebar
   {
      display: none;
   }

   .content-block
   {
      width: 100%;
      min-height: 75rem;
      padding: 0rem 2.4rem 0rem 2.4rem;
   }
   
   .small-screen
   {
      display: block;
   }
   
   h3::before
   { 
      display: block; 
      content: " "; 
      visibility: hidden; 
      pointer-events: none;
   
      height: 5rem; 
      margin-top: -5rem; 
   }
}

/***********************************************************
* Large screen
***********************************************************/
@media screen and (min-width: 1200px)
{
   .sidebar
   {
      display: block;
      width: 30%;
   }
   
   .content-block
   {
      width: 70%;
      min-height: 80rem;
      padding: 2rem 2rem 0rem 2rem;
   }
   
   .small-screen
   {
      display: none;
   }
   
   td.description
   {
      white-space: nowrap;
   }
}                                                      

/***********************************************************
* Don't print irrelevant items
***********************************************************/
@media print
{
   .sidebar, .small-screen
   {
      display: none;
   }
   
   /* Does not work ? */
   ol, ul, p, img
   {
      break-inside: avoid;
      page-break-inside: avoid;
   }
}