@font-face {
  font-family: 'Averia Serif Libre';
  src: url("../fonts/Averia_Serif_Libre/AveriaSerifLibre-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Averia Serif Libre';
  src: url("../fonts/Averia_Serif_Libre/AveriaSerifLibre-Italic.ttf") format('truetype') ;
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Averia Serif Libre';
  src: url("../fonts/Averia_Serif_Libre/AveriaSerifLibre-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Averia Serif Libre';
  src: url("../fonts/Averia_Serif_Libre/AveriaSerifLibre-BoldItalic.ttf") format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto/Roboto-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
  
@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto/Roboto-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Kanit';
  src: url("../fonts/Kanit/Kanit-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Kanit';
  src: url("../fonts/Kanit/Kanit-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Kanit';
  src: url("../fonts/Kanit/Kanit-BoldItalic.ttf") format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Kanit';
  src: url("../fonts/Kanit/Kanit-ThinItalic.ttf") format('truetype');
  font-weight: thin;
  font-style: italic;
}

@font-face {
  font-family: 'Gentium Book Basic';
  src: url("../fonts/Gentium_Book_Basic/GentiumBookBasic-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gentium Book Basic';
  src: url("../fonts/Gentium_Book_Basic/GentiumBookBasic-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url("../fonts/Nunito_Sans/NunitoSans-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url("../fonts/Nunito_Sans/NunitoSans-Italic.ttf") format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url("../fonts/Nunito_Sans/NunitoSans-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Lora';
  src: url("../fonts/Lora/Lora-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Space Mono';
  src: url("../fonts/Space_Mono/SpaceMono-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hind Madurai';
  src: url("../fonts/Hind_Madurai/HindMadurai-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
  
@font-face {
  font-family: 'Hind Madurai';
  src: url("../fonts/Hind_Madurai/HindMadurai-Medium.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: 'Space Mono', Serif;
  font-size: 1.1em;
  background: #f2f2f2;
}

h1 {
  font-family: 'Roboto';
  margin: 0px auto 0px auto;
  font-size: 3em;
  font-weight: bold;
 /* text-transform: lowercase;*/
}

h2, h3, h5, h6 {
  font-family: 'Hind Madurai';
  font-weight: bold;
}

h2 { font-size: 2.0em; }
h3 { font-size: 1.5em; }

h2, h3 {
  margin: 30px auto 0px auto;
}

#sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: #4e6679;
  overflow-x: hidden;
  text-align: right;
}

#menutoggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  margin: 12px 20px;
}

#togglelink {
  text-decoration: none;
  font-family: 'Space Mono';
  font-size: 20px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  /*color: #404039;*/
  /*background: #404040;*/
  padding: 10px 5px;
}

.menuitem {
  padding: 6px 8px 6px 8px;
  text-decoration: none;
  font-family: 'Roboto';
  font-size: 20px;
  color: #f2f2f2;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  overflow: hidden;
}

/*
.menuitem:hover {
  color: #3d003d;
  color: rgba( 61, 0, 61, 1);
}
*/

.activelink {
  color: #f2f2f2;
}

/*
.activelink:after {
  content: url(./img/picon.png);
  margin-left: 10px;
}
*/

.activelink:before {
  content: url(../img/picon2.png);
  margin-right: 10px;
}

#topnav {
  /*margin-left: 200px;*/
  display: none;
  text-align: left;
  font-family: "Space Mono";
  margin-bottom: 10px;
}

.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  padding: 0px 10px;
  color: #404040;
  position: relative;
}

.main a {
  color: #464969;
}

.main a:visited {
  color: #887d8d;
}

.main a:hover {
  color: #72b6cf;
}

.hits-count {
    /*position: absolute;
    top: 10px;
    right: 10px;*/
    text-align: right;
}

.footer {
    display: block;
    color: #404040;
    margin-top: 50px;
    padding: 50px 10px 20px 10px;
    clear: both;
    position: absolute;
    right: 10px;
}

.footer span {
  display: inline-block;
  width: 100%;
  text-align: right;
}

.borders td, th {
  border: 1px solid;
}

table.borders {
    border: 0px solid;
  /*border-collapse: collapse; */
}

#navbuttons {
    position: relative;
    height: 170px;
}

#sprite {
  position: absolute;
  bottom: 10px;
  left: 0px;
  height: calc(100% - 200px);
  max-height: 360px;
  min-height: 0px;
  width: 100%;
  display: block;
  text-align: center;
}


#sprite img{
  position: relative;
  bottom: 0px;
  height: 100%;
  max-height: 360px;
  width: auto;
  display: inline-block;
}

#menu-black { background-color: #000000; font-size: 30px; }
#menu0 { background-color: #44355d; }
#menu1 { background-color: #7b334c; }
#menu2 { background-color: #a14d55; }
#menu3 { background-color: #c77369; }
#menu4 { background-color: #e3a084; }
#menu5 { background-color: #f2cb9b; }
#menu0:hover { background-color: #5c486a; }
#menu1:hover { background-color: #8b4057; }
#menu2:hover { background-color: #aa5d62; }
#menu3:hover { background-color: #cc8074; }
#menu4:hover { background-color: #e8b195; }
#menu5:hover { background-color: #f3d0a1; }

#contact-table td{ text-align: left; }
#contact-table td:nth-child(1) { text-align: right; padding-right: 10px; }

@media screen and (max-width: 799px) {
   #sidenav {
       height: 300px;
       width: 100%;
       display: inline-block;
       position: relative;
   }

   .main {
    margin-left: 0px;
   }

   #sprite {
     right: 0px;
     top: 0px;
     text-align: right;
     height: 100%;
   }
   #sprite img {
   }

}
@media screen and (max-width: 799px) {
  #sidenav {display: none;}
  #sprite {display: none;}
  #topnav {display: block;}
  #menutoggle { display: block; }
  
  table {
    overflow-x: auto;
    display: block;
  }
}