@font-face{
  font-family: "Roboto-Regular";
  src: url("../public/Roboto-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "Roboto-Bold";
  src: url("../public/Roboto-Bold.ttf") format("truetype");
}

@font-face{
  font-family: "Play-Regular";
  src: url("../public/Play-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "Play-Bold";
  src: url("../public/Play-Bold.ttf") format("truetype");
}

body {
   padding                : 0px;
   margin                 : 0px;
   font-family            : Play-Bold, sans-serif;
   font-size              : 12pt;
   background-color       : #000000;
}

#MainDiv {
   position               : absolute;
   top                    : 0px;
   left                   : 50%;
   margin-left            : -500px;
   width                  : 1000px;
   border-left            : 1px #FFFFFF solid;
   border-right           : 1px #FFFFFF solid;
   min-height             : 100%;
}
   

#Banner {
   background-image       : url("../img/banner.png");
   height                 : 190px;
   width                  : 990px;
   color                  : #D8D8D8;
   font-size              : 30pt;
   padding-left           : 10px;
   padding-top            : 10px;
}

#Menu {
  padding                 : 10px 0;
  text-align              : center;          
}

#Menu ul {
  list-style              : none;
  margin                  : 0;
  padding                 : 0;
  display                 : inline-block;       
}


#Menu ul li {
  display                 : inline-block;
  margin                  : 0 20px;
}


#Menu ul li a {
  color                   : #FFFFFF; 
  text-decoration         : none;
  font-weight             : bold;
  font-size               : 14pt;
}

#Menu ul li a:hover {
  color                   : #00bfff;          
}

#Intro {
  float                   : left;
  width                   : 600px;
  color                   : #D8D8D8;
  padding                 : 10px;
  text-align              : justify;
}

#Sidebar {
  float                   : right;
  text-align              : right;
  padding                 : 10px;
}

#Language {
  margin-bottom           : 5px;
}

#Login a {
  color                   : blue;
  font-weight             : bold;
}

#LoginBox {
  width               : 300px;
  margin              : 15px auto;
  padding             : 5px;
  background          : rgba(0, 0, 0, 0.8);
  border              : 2px solid #444;
  border-radius       : 8px;
  color               : #FFFFFF;
  box-shadow          : 0 0 15px rgba(0, 255, 255, 0.2);
}

#LoginBox h2 {
  text-align          : center;
  margin-bottom       : 15px;
  color               : #00bfff;
}

#LoginBox label {
  display             : block;
  margin-bottom       : 5px;
  font-weight         : bold;
}

#LoginBox input[type="text"],
#LoginBox input[type="password"] {
  width               : 90%;
  padding             : 8px;
  margin-bottom       : 15px;
  border              : 1px solid #888;
  border-radius       : 4px;
  background          : #111;
  color               : #fff;
}

#LoginBox button {
  width               : 95%;
  padding             : 10px;
  background          : #00bfff;
  color               : #000;
  border              : none;
  border-radius       : 4px;
  font-weight         : bold;
  cursor              : pointer;
}

#LoginBox button:hover {
  background          : #00cccc;
}