/* CSS Document */

:root {
  --game-background: #33ccff;	/*#efe5ef*/
  --deepred: #990000;
  --grey-shadow: #666666;
  --dark-blue: #2525bd;
  --nav-color: #f8f765;	/*#d9eae7;*/
  --pale-yellow: #eeeece;
  --pale-blue: #ccffff;
  --mid-blue: #2baecc;
  --klunk-background: #ffeecc;
}
body  {
  background-color: var(--game-background); /*##efe5ef;*/
  font-family: Verdana, Geneva, sans-serif;

}
.head {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  background-color: var(--page-background);
  text-align: center;
  font-size: 56px;
  /*font-style: italic;*/
  font-family: "Tempus Sans ITC", "Ink Free", sans-serif;
  font-weight: lighter;
  padding: 0px;
}
.gamelogo {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: 60%;
  border-collapse: collapse;

}
#logo {

}

#klunk	{
  background-color: var(--klunk-background);
}
#game  {
  background-color: var(--game-background);
}

#grandad {
  text-align: center;
  padding: 0px;
  width: 80%;
  font-style: italic;
  color: var(--deepred);
  text-shadow: 3px 3px 5px var(--grey-shadow);
}

#present  {
  color: var(--dark-blue);
  font-size: 40px;
  font-weight: bold;
}

#logo	{
  vertical-align: middle;
}
.download	{
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  text-align: center;
}

#link	{
  font-size: 28px;
  font-weight: bold;
  color: var(--dark-blue);
  border-style: none solid;
  border-width: thin;
  border-color: var(--deepred);
  padding: 0px 20px;
  text-decoration: none;
}

#link:hover:not(.active) {
  background-color: #d3dee8;
  color: #ff753a;
}

.main	{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}

#hdr	{
  text-align: center;
  color: var(--deepred);
  font-size: 26px;
  font-weight: bold;
  border-style: none none solid none;
  border-width: thin;
  border-color: var(--deepred);
}
#hdrarch	{
  text-align: center;
  color: var(--dark-blue);
  font-size: 30px;
  font-weight: bold;
}

#txt	{
  text-align: left;
  color: var(--dark-blue);
  font-size: 20px;
}

.navbar {
  list-style-type: none;
  margin: 0px 0px 0px 20%;
  padding: 0px;
  overflow: hidden;
  background-color: var(--pale-blue);
  width: 60%;
  font-size: 16px;
  border-style: solid none;
  border-width: thin;
  border-color: var(--deepred);
}

li {
  float: left;

}

li a {
  display: block;
  color: var(--dark-blue);
  text-align: center;
  padding: 0px 20px;
  text-decoration: none;
  visibility: visible;

}

li a:hover:not(.active) {
  background-color: var(--nav-color);
}

.archive	{
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  background-color: var(--game-background);
  color: var(--deepred);
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}


#archlink	{
  font-size: 22px;
  //font-weight: bold;
  color: var(--dark-blue);
  text-decoration: none;
  //width: 50%;
  background-color: var(--game-background);
  padding: 5px 50px;
  border-style: none none;
}

#datepanel	{
  font-size: 22px;
  //font-weight: bold;
  color: var(--dark-blue);
  width: 50%;
  background-color: var(--game-background);
}

#archlink:hover:not(.active) {
  background-color: #d3dee8;
  color: #ff753a;
}