#gamecontainer {
    width: 873px;
    height: 631px;
    position: relative;
    margin: 0 auto;
}

canvas {
  position: absolute; z-index: 1
}

#gamestartscreen {
    position: absolute;
    margin: 0 auto;
    z-index: 2;
  }

.startPanelHandle {
  /* background-color: #336633;
  font-family: 'open_sansregular', sans-serif;
	font-size: 24px;
  color: #ddffdd;
  padding: 10px 15px;
  border: none;
  cursor: pointer; */
  position: relative;
  width: 100px;
  top : 15px;
  left: 45%;
  z-index: 3;
}

.startPanelNextButton {
  background-color: #336633;
  font-family: 'open_sansregular', sans-serif;
	font-size: 24px;
  color: #ddffdd;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  position: relative;
  width: 100px;
  top : 15px;
  left: 45%;
  z-index: 3;
}

.startPanelStartButton {
  background-color: #993333;
  font-family: 'open_sansregular', sans-serif;
	font-size: 24px;
  color: #ddffdd;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  position: relative;
  width: 200px;
  top : 15px;
  left: 30%;
  z-index: 3;
}

.startPanelOKButton {
  background-color: #993333;
  font-family: 'open_sansregular', sans-serif;
	font-size: 24px;
  color: #ddffdd;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  /* position: relative; */
  width: 100px;
  top : 15px;
  left: 45%;
  z-index: 3;
}

.levelTable {
  /* border : thin solid black; */
  width : 100%;
  display : none;
}

.levelTD {
  color: '#cccccc';
}

.panelName {
	font-family: 'open_sansregular', sans-serif;
	font-size: 24px;
	line-height: 30px;
    background-color: #006666;
	color: #DCDCDC;
	text-align: center;
}

.panelConstant {
	font-family: 'open_sansregular', sans-serif;
	font-size: 24px;
	line-height: 30px;
  background-color: #ffffff;
	color: #333399;
	text-align: center;
}

.panelValue {
	font-family: 'open_sansregular', sans-serif;
	font-size: 36px;
	line-height: 30px;
    background-color: #ffffff;
	color: #993333;
	text-align: center;
}

.levelPopup {
  /* display: none; */
  font-size: 14px;
  position: fixed;
  top : 250px;
  left: 150px;
  width: 450px;
  border: 10px solid #ccbbaa;
  background-color: #ffddaa;
  z-index: 9;
  padding: 10px;
}

.hint {
  font-size: 18px;
  color: red;
  position: fixed;
  top : 150px;
  left: 150px;
  width: 300px;
  border: 3px solid #339966;
  background-color: #aaeedd;
  z-index: 9;
  padding: 10px;
}

.gdpr {
  font-size: 16px;
  position: fixed;
  top : 150px;
  left: 150px;
  width: 300px;
  border: 3px solid #339966;
  background-color: #aaeedd;
  z-index: 9;
  padding: 10px;
}

.cookie-banner {
  position: fixed;
  bottom: 40px;
  left: 10%;
  right: 10%;
  width: 80%;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.cookie-close {
  height: 20px;
  background-color: #777;
  border: none;
  color: white;
  border-radius: 2px;
  cursor: pointer;
}

.gameOverMessage {
  font-family: 'open_sansregular', sans-serif;
	font-size: 24px;
	line-height: 30px;
	color: #333399;
	text-align: center;
}

.buttonPopup {
  background-color: #330033;
  color: red;
  padding: 10px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
}

.buttonMoreHints {
  font-family: 'open_sansregular', sans-serif;
	font-size: 20px;
  background-color: #aaaadd;
  color: #336699;
  padding: 1px 2px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  width: 280px;
}

.button {
  background-color: #aaaadd;
  color: white;
  padding: 1px 2px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  width: 280px;
}

body {
	background-color: #FFFFFF; /* DCDCDC; */
	font-family: 'open_sansregular', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #336699;
}

td, th {
	font-family: 'open_sansregular', sans-serif;
	font-size: 12px;
	line-height: 24px;
	color: #333333;
}

a {
	font-family: 'open_semibold', sans-serif;
	color: #0000ff;
	font-size: 12pt;
	text-decoration: none;
}

.title {
	font-family: 'open_sansregular', sans-serif;
  font-size: 24px;
	line-height: 30px;
  background-color: #006666;
	color: #DCDCDC;
}

.subtitle {
	font-family: 'open_sansbold', sans-serif;
	font-size: 16px;
  color: #0033aa;
}

.header {
	font-family: 'open_sansregular', sans-serif;
	font-size: 24px;
	background-color: #006666;
  color: #DCDCDC;
}

.nav {
	font-family: 'open_sansregular', sans-serif;
	font-size: 14px;
  font-weight: bold;
	background-color: #CCCCCC;
}

.navLink {
	font-family: 'open_sansregular', sans-serif;
	font-size: 14px;
	font-weight: bold;
	background-color: #DEDECA;
}

.sidebar {
	font-family: 'open_sansregular', sans-serif;
	font-size: 12px;
	line-height: 18px;
	padding: 3px;
	background-color: #FFFFFF;
}

.sidebarHeader {
	font-family: 'open_sansregular', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	background-color: #339999;
}

.sidebarFooter {
	font-family: 'open_sansregular', sans-serif;
	font-size: 12px;
	line-height: 18px;
	background-color: #CCCCCC;
}

.footer {
  font-family: 'open_sansregular', sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 22px;
	color: #333333;
	background-color: #CCCCCC;
}

.legal {
	font-family: 'open_sansregular', sans-serif;
	font-size: 9px;
	color: #333333;
}

.box1 {
	border-color: #CCCCCC #333333 #333333 #CCCCCC;
	border-width: medium;
  border-style: ridge;
}

.promo {
	font-family: "Times New Roman", Times, serif;
	color: #000033;
}

.titlebar {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #FFFFFF;
  background-color: #336699;
}

/* .dingbat {
	font-family: 'open_sansregular', sans-serif;
	background-color: #99CC99;
	color: #006666;
	font-weight: bolder;
	font-size: medium;
}
 */
a:hover {
	text-decoration: underline;
}

.bigreg {
	font-family: 'open_sansregular', sans-serif;
	font-size: 15pt;
	color: #0033cc;
}
.reg {
	font-family: 'open_sansregular', sans-serif;
	font-size: 12pt;
	color: #006699;
}
.regreg {
	font-family: 'open_sansregular', sans-serif;
	width: 175px;
	font-size: 12pt;
	color: #006699;
}

.light {
	font-family: 'open_sanslight';
	width: 100px;
	color: #003399;
}

input.small {
	width: 50px;
}

/* Large rounded green border */
hr.bluey {
  border: 1px solid #000099;
}

.popup1 {
  position: relative;
  top : 290px;
  left: 280px;
  z-index: 120;
  display: none;
}
.popup2 {
  position: relative;
  top : 235px;
  left: 323px;
  z-index: 120;
  display: none;
}
.popup3 {
  position: relative;
  top : 150px;
  left: 235px;
  z-index: 120;
  display: none;
}
.popup4 {
  position: relative;
  top : 350px;
  left: 325px;
  z-index: 120;
  display: none;
}
.popup5 {
  position: relative;
  top : 235px;
  left: 560px;
  z-index: 120;
  display: none;
}
.popup6 {
  position: relative;
  top : 350px;
  left: 645px;
  z-index: 120;
  display: none;
}
.popup7 {
  position: relative;
  top : 150px;
  left: 452px;
  z-index: 120;
  display: none;
}
.popup8 {
  position: relative;
  top : 356px;
  left: 444px;
  z-index: 120;
  display: none;
}
