/*--- FONT ----*/
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*----MAIN----*/

h1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 900;
  font-size: 1.4em;
  margin: 12px 0px 4px 0px;
}


h2 {
  font-weight: 900;
  font-size: 1.4em;
  margin:0px 0px 0px 8px;
  padding-bottom: 2px;
}

p {
  font-size: 0.8em;
}

.content {
  font-size: 1.2em;
  margin:12px 0px 12px 8px;
}

.content_page {
  font-size: 1.2em;
  margin-bottom: 2pt;
}

.subtitle {
    margin: 0px 8px 0px 8px;
}

.supertitle {
  margin: 8px 0px 0px 8px;
}

.subtitle_page {
  font-size: 0.8em;
  margin-top: 2pt;
}

article {
    font-family: 'Source Sans Pro', sans-serif;
  }

.top_article {
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid black;
  }
 
.middle_article {
    border-left: 1px solid;
    border-right: 1px solid;
    min-height: 30px;
    padding-top: 8px;
  } 
  .middle_article:hover{
    background-color: #e6e6e6;
  }

.bottom_article {
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    padding-top:8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    min-height: 30px;
  }
  .bottom_article:hover{
    background-color: #e6e6e6;
  }


  a.note:link, a.note:visited {
    color: black;
    text-decoration: none;
    margin: 4px;
    display: inline-block

}

.block:link, .block:visited {
  display:block;
}


a.alt_note:link, a.alt_note:visited {
  color: black;
  text-decoration: none;
  display: block
}

a.alt_note:hover, a.alt_note:active {
  display: block;
}



a.page_link:link, a.page_link:visited {
  color: darkslategrey
}

a.note:hover, a.note:active {
  border-left: 1px solid;
  margin:4px 4px 4px 3px;
  display: inline-block
}

a.button {
/*background-color: slategrey;
box-shadow: 0 5px 0 darkslategrey;*/
background-color: white;
color: black;
border: 2px solid slategrey;
/*color: white;*/
min-width: 125px;
text-align: center;
padding: 10px;
margin-bottom: 20px;
/*position: absolute;*/
text-decoration: none;
display: inline-block;
/*text-transform: uppercase;*/
}

a.button:hover {
background-color: slategray;
color:white;
cursor: pointer;
}

a.button:active {
box-shadow: none;
top: 5px;
}




/*SIDENAV */

.page_title {
    font-size: 10pt;
    margin:0px 0px 8px 0px;
}

/* The navigation menu links */
.sidenav a {
    padding-top: 6px;
    text-decoration: none;
    font-size: 10pt;
    color: black;
    display: block;
    text-align: left;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
    font-weight: bold;
    }



/* The sidebar menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 250px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */ /* Stay at the top */
left: 0;
background-color:white; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 40px;
padding-left: 100px;
padding-bottom: 20px;
top:0;
}



/* Style page content */
.main {
margin-left: 350px; /* Same as the width of the sidebar +padding-left*/
}

.box {
  display: block;
  width: 90%;
  max-width: 56ch;
}



/*Responsive design*/

@media screen and (max-width: 700px) {
  .sidenav {
    width: 100%;
    height: auto;
    position: relative;
    padding-left: 12px;
    margin-left: 12px;
    width:380px;
  }
  .sidenav a {float: none;}
  div.main {
    margin-left: 12px;
  } /*padding-left of sidebar minus 12px*/
}


/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidenav a {
    text-align: left;
    float: none;
  }
  div.sidenav {
    padding-left: 24px;
    margin-left:12px;
    width:280px;
  }
  div.main {margin-left: 24px;}
}



/* WSET relevant deisng */
#buttonContainer {
  display: flex; /* Use flexbox to arrange items in a row */
  gap: 10px; /* Add some space between the buttons */
}