@font-face{
  font-family: Mono;
  src: url(../fonts/DejaVuSansMono.ttf);
}

@font-face
{
  font-family:MonoBold;
  src: url(../fonts/DejaVuSansMono-Bold.ttf);
  font-weight: bold;
}

@font-face
{
  font-family:MonoBoldOblique;
  src: url(../fonts/DejaVuSansMono-BoldOblique.ttf);
  font-weight: bold;
  font-style:oblique;
}

@font-face
{
  font-family:MonoOblique;
  src: url(../fonts/DejaVuSansMono-Oblique.ttf);
  font-style:oblique;
}

@font-face{
  font-family: Sans;
  src: url(../fonts/DejaVuSans.ttf);
}

@font-face
{
  font-family:SansBold;
  src: url(../fonts/DejaVuSans-Bold.ttf);
  font-weight:bold;
}

@font-face
{
  font-family:SansBoldOblique;
  src: url(../fonts/DejaVuSans-BoldOblique.ttf);
  font-weight:bold;
  font-style:oblique;
}

@font-face
{
  font-family:SansCondensed;
  src: url(../fonts/DejaVuSansCondensed.ttf);
  font-weight: bold;
}

@font-face
{
  font-family:SansCondensedBold;
  src: url(../fonts/DejaVuSansCondensed-Bold.ttf);
  font-weight: bold;
}

@font-face
{
  font-family:SansCondensedBoldOblique;
  src: url(../fonts/DejaVuSansCondensed-BoldOblique.ttf);
  font-weight:bold;
  font-style:oblique;
}

@font-face
{
  font-family:SansOblique;
  src: url(../fonts/DejaVuSans-Oblique.ttf);
  font-style:oblique;
}

@font-face
{
  font-family:Serif;
  src: url(../fonts/DejaVuSerif.ttf);
  font-weight: bold;
}

@font-face
{
  font-family:SerifBold;
  src: url(../fonts/DejaVuSerif-Bold.ttf);
  font-weight: bold;
}

@font-face
{
  font-family:SerifBoldItalic;
  src: url(../fonts/DejaVuSerif-BoldItalic.ttf);
  font-weight:bold;
  font-style:italic;
}

@font-face
{
  font-family:SerifCondensed;
  src: url(../fonts/DejaVuSerifCondensed.ttf);
  font-weight: bold;
}

@font-face
{
  font-family:SerifCondensedBold;
  src: url(../fonts/DejaVuSerifCondensed-Bold.ttf);
  font-weight:bold;
}

@font-face
{
  font-family:SerifCondensedBoldOblique;
  src: url(../fonts/DejaVuSansCondensed-Oblique.ttf);
  font-style:oblique;}

@font-face
{
  font-family:SerifCondensedBoldItalic;
  src: url(../fonts/DejaVuSerifCondensed-BoldItalic.ttf);
  font-weight: bold;
}

@font-face
{
  font-family:SerifCondensedItalic;
  src: url(../fonts/DejaVuSerifCondensed-Italic.ttf);
  font-weight: bold;
}

@font-face
{
  font-family:SerifItalic;
  src: url(../fonts/DejaVuSerif-Italic.ttf);
  font-style:italic;
}

@font-face
{
  font-family:SerifLight;
  src: url(../fonts/DejaVuSans-ExtraLight.ttf);
}

.header
{
  margin-top:30px; margin-left:50px; margin-right:50px;
  display:grid;
  grid-template-columns: auto auto auto;
}


.main_menu
{
  margin-left:3px;
  margin-top:17px;
  display:flex;
  flex-flow:row wrap;
}

.main_menu_item
{
  position: relative;
  font-family:"Sans"; 
  font-size:12px;
  font-weight:bold;
  text-decoration:none;
  color:black;
  margin-right:20px;
}

 /* Dropdown Button */
.dropdown-button 
{
  font-family:"Sans"; 
  font-size:12px;
  font-weight:bold;
  border: none;
  background-color:white; 
  position:relative;
  top:-20px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown 
{
    margin-right:12px;
    margin-top:35px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content 
{
  display: none;
  position: absolute;
  background-color: #000066;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a 
{
  color: white;
  font-family:"Sans"; 
  font-size:12px;
  padding: 0px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: SteelBlue;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the color of the dropdown button text when the dropdown content is shown */
.dropdown:hover .dropdown-button {color: DarkGrey;} 

main.front_page
{
    background-image:url("../images/designimages/front_page_background_greyscale.png");
    background-color: #cccccc;
    height:900px;
    width:1200px;
    position:relative;
    top:-20px;
}

main.body_page
{
}

.logo
{
  display:block;
}

.technical_category_menu
{
  position:relative;
  margin-left:220px;
  margin-top:100px;
  margin-bottom:0px;
  display:flex;   
  flex-flow:column wrap;
  font-family:"Sans"; 
  font-size:20px;
  text-decoration:none;
  color:DarkGrey;
}


a
{
  font-family:"Sans"; 
  font-size:16px;
  color:Navyblue;
  margin-bottom:20px;
}

a.composer
{
  font-family:"Sans"; 
  font-size:20px;
  text-align:left;
  color:darkgrey;
  text-decoration:none;
  margin-top:20px;
}

h1.page
{
  position:relative;
  top:20px;
  text-align:center;
  font-family:"SansBoldOblique"; 
  font-size:52px;
  color:#000066;
  display: block;  
}

h2.page
{
  position:relative;
  top:120px;
  font-family:"SansBold"; 
  font-size:24px;
  color:#000066;
}

p
{
  position:relative;
  top:120px;
  font-family:"Sans"; 
  font-size:14px;
}

p.front_page_welcome
{
  position:relative;
  top:120px;
  text-align:center;
  font-family:"SansBoldOblique"; 
  font-size:52px;
  color:white;
  display: block;  
}

p.front_page_message
{
  position:relative;
  top:160px;
  text-align:center;
  font-family:"SansBoldOblique"; 
  font-size:28px;
  color:white;
  display: block;  
}

p.above_trick
{
  position:relative;
  top:80px;
  text-align:center;
  margin-left:100px;
  margin-right:100px;
  margin-bottom:80px;
  font-family:"SansOblique"; 
  font-size:20px;
  color:DarkGrey;
}

p.below_trick
{
  position:relative;
  top:20px;
  text-align:left;
  margin-left:150px;
  margin-right:150px;
  font-family:"SansOblique"; 
  font-size:20px;
  color:DarkGrey;
}

a.attribution
{
  font-family:"SansOblique"; 
  font-size:10px;
  color:DarkGrey;
}

.composer
{
    position:relative;
    margin-top:20px;
    margin-left:40px;
    margin-right:40px;
    margin-bottom:20px;
    text-align:center;
}

.comments
{
    position:relative;
    top:20px;
    font-family:"SansOblique";
    font-size:16px;
    margin-top:0px;
    margin-left:120px;
    margin-right:120px;
    margin-bottom:20px;
    text-align:left;
}