@font-face {
  font-family: 'Junicode';
  src:  url('fonts/Junicode.woff') format('woff');
}

@font-face {
  font-family: 'Junicode';
  src:  url('fonts/Junicode-Bold.woff') format('woff');
  font-weight:bold;
}

@font-face {
  font-family: 'Junicode';
  src:  url('fonts/Junicode-Italic.woff') format('woff');
  font-style:italic;
}

/*Overall font*/
body {
  background-color:#f2f1f1;
  font-family:"Junicode",Times,Serif;
}

/* Styles row of alphabetical jump links to sections displayed at LEM Personenverzeichnis page top */
div.quicklinksrow {
  position: sticky;
  top:0;
  background:#f2f1f1;
  text-align: center;
  border-bottom: 2px solid #424242;
  border-top: 2px solid #424242;
  margin-bottom: 5px;
  z-index: 1;
}

/* Styles text of row of jump links to sections displayed at LEM Personenverzeichnis page top */
div.quicklinksrow a {
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: larger;
}

/* Adds a little breathing room between the jump links for easier clicking */
div.quicklinksrow a::after { 
content: " ";
}

/* Styles row of jump links to sections displayed at page top */
div.quicklinksrow h2, div.quicklinksrow a:link, div.quicklinksrow a:visited {
  color: #17365c;
}

/* Styles row of jump links to sections displayed at page top */
div.quicklinksrow a:active, div.quicklinksrow a:hover {
  color: #8dae10; 
}

/* Styles the text of the introductory portion of the page above the alphabet links */
#introblock {
    text-align: center;
    width: 95%;
    margin: auto;
}

/* centers the website entry button */
div.entrylink {
  margin: auto;
  display: block;
  text-align: center;
  padding-bottom: 20px;   /* CONVERT THIS TO em UNITS */
  padding-top: 10px;      /* CONVERT THIS TO em UNITS */
}

/*Styles the internal navigation menus*/
ul.nav {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* ul.nav li{
  padding-top:1px;
} */

ul.nav a.button { /*Styles the internal navigation menu buttons as a set width*/
  width: 20em;
}


/* Styles navigational links as buttons */
a.button { 
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 10px;
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
  margin-top: 2px;
  box-shadow: 3px 3px 2px;
  text-decoration: none;
  display: inline-block;
}

/* Styles navigational links as buttons */
a.button:link, a.button:visited {
  color: #17365c;
  background-color: #c0c0c0;
}

/* Styles navigational links as buttons */
a.button:hover, a.button:active {
  color: #8dae10; 
  background-color: #7b7b7b;
}

/*hide text dropdowns when input is not checked*/
input, p.dropdown_text {  
  display: none;      
  margin-top: 15px;  
}

/*show text dropdowns when input is checked*/  
 input:checked~p.dropdown_text {  
  display: block; }
  
 /*styles text dropdown buttons*/
label:hover {  
  position: relative;  
  display: block;  
  cursor: pointer;  
  background: #7b7b7b;   
  color: #8dae10;     
}

 /*styles text dropdown buttons*/
label {  
  position: relative;  
  display: block;  
  cursor: pointer;  
  background: #c0c0c0;  
  width: inherit;  
  color: #17365c;  
  padding: 10px;
  box-shadow: 3px 3px 2px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

 /*allows larger headings inside dropdown text*/
span.false_h3 {
  font-size: 1.5em;
}

 /*allows larger headings inside dropdown text*/
span.false_h2 {
  font-size: 1.875em;
} 

/* Styles the 'banner' at the top of the page */
/* The easiest way to customize this aspect of the site is to make a custom hero image/banner of e.g. 1600x500px and 
display the image at the top of the page at full viewport width. Doesn't look great on all screens but it's fine on most of them.*/
#hero {
  display:block;
  width: 100%;
}

/* Edit here if replacing the hero image with a banner div constructed from HTML */
#banner { 
    background-color:#17365c;
    color: white;
}

/*Invisible H1 for search engine indexing purposes.*/
#banner h1{ 
  display:none
}

/*Styles the alphabetical dividers used between people in the LEM*/
div.alphabetdivider {
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  font-size: 2em;
  font-weight: bold;
  background-color: #17365c;
  padding: 10px;
}

/* Styles the sections for each person's section in the LEM list - padding */
div.personblock {
  padding: 25px 100px;
} 

/* Styles the sections for each person's section in the LEM list - photo */
div.personblock img {
  height: 200px;
  width: 200px;
  float: right;
}
/*Styles the name heading to allow pronouns neatly underneath*/
div.personblock h2 {
  margin-bottom: .15em;
}

/* Automatically styles pronouns for people in the LEM list*/
span.pronouns {
  opacity: 50%;
  font-style: italic;
  /*margin-bottom: 1em;*/
  display: block;
}