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

body { 

  overflow: hidden;
  margin: 0;
  background: #595652;
  color: #fff;
  font-size: 16px;
  font-family: generic;
  cursor: url(cursor_3x.png) 0 0, auto;
  user-select: none;
}

  
input { user-select: all }

a { color: #cf0; cursor: url(cursor_3x.png) 0 0, auto;  text-decoration: none }
a:hover { color: #fff; }

canvas.main { image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; position: absolute; }

.cursor-none { cursor: none; }

.text-align-left { text-align: left; }
.text-align-center { text-align: center; }

.border-window { 

  border-style: solid;
  border-width: 16px 14px 20px 16px;
  border-image: url(borders/default.png) 16 14 20 16 stretch;
  border-radius: 4px;
  min-width: 32px;
  min-height: 32px;
  background: #403434;

}

.window-handle {

  border-radius: 2px;
  background: url(borders/window-handle-center.png) repeat;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  color: #fff;
  text-shadow: 0 1px 0 #663931;
  padding: 0 4px 0 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);

}

.window-handle:before {
  content: "";
  display: inline-block;
  background: url(borders/window-handle-left.png) repeat;
  width: 12px;
  height: 24px;
  position: absolute;
  left: 0px;
}

.window-handle .button { width :16px; height: 16px; }

.button {   
  display: inline-block;
  border-style: solid;
  border-width: 10px 9px;
  border-image: url(buttons/default.png) 10 9 fill stretch;
  transition: all 0.1s;
}

.button.small {
  border-style: solid;
  border-width: 4px;
  border-image: url(buttons/small.png) 4 fill repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button.primary { 
  border-image: url(buttons/primary.png) 10 9 fill stretch;
  color: #99e550;
}

.button.extra { 
  border-image: url(buttons/blue.png) 10 9 fill stretch;
  color: #99eaf5;
}

.button.select { 

  border-image: url(buttons/select.png) 10 9 fill stretch;

}

.button.select.selected { 

  border-image: url(buttons/select-selected.png) 10 9 fill stretch;

}

a.button { color: #fff; }


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

.absolute.center { left: 50%; top:50%; transform: translate(-50%, -50%); }
.absolute.center-top { left: 50%; top:0%; transform: translate(-50%, 0%); }
.absolute.right-top { right: 0%; top:0%; }

.button:hover {

  filter: saturate(120%) brightness(1.2);

}

.button:active {

  transform: scale(0.8), translate(0, 0);

}
.lobby .mainMenu { min-width: 360px; }
.lobby .mainMenu > div { padding-top: 8px; }
.lobby { background: url(logo.png) center -6px no-repeat #575553; padding-top: 100px; }
.lobby .showMainMenu { position: absolute; left: 156px; top: 290px; }

.lobby .footer { text-align: right; }
.lobby .footer a { color: #9badb7; }
.lobby .footer a:hover { color: #fff; }

.lobby .mode-selector { display: flex; justify-content: space-between; }

.lobby .mode-selector > div {  margin: 8px; }

input[type=text] {  
  font-family: "generic";
  padding: 4px;
  display: inline-block;
  border-style: solid;
  border-width: 10px 9px;
  border-image: url(buttons/input.png) 10 9 fill stretch;
  color: #fff;
  background: none;
}

.full-width {
  width: 100%;
}

.smallfont { font-size: 14px }
.smallerfont { font-size: 12px }

.flex { display: flex }
.flex-column { flex-direction: column; display: flex }
.flex-row { flex-direction: row; display: flex }
.flex-no-shrink > * { flex-shrink: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-grow-equal > * { flex-grow: 1; flex-basis: 0 }

.flex-grow-1 { flex-grow: 1 }
.flex-grow-2 { flex-grow: 2 }
.flex-grow-3 { flex-grow: 3 }
.flex-grow-4 { flex-grow: 4 }
.flex-grow-5 { flex-grow: 5 }

.flex-justify-center { justify-content: center; }
.flex-align-center { align-content: center; }

.top-separator { margin-top: 12px; padding-top: 12px; border-top: 2px solid #847e87; }

.overlay-window { background: rgba(50, 42, 0, 0.68); border-radius: 10px; }
.overlay-window .window-handle { border-radius: 4px 4px 0 0; }
.overlay-window .content { padding: 4px; }

.fit-height { max-height: 400px; display: flex; }
.scroll { overflow: auto; padding-right: 8px; }


table.results { margin-bottom: 16px; }
table.results th, table.results td { padding: 2px 8px; }
table.results th { text-align: left;  }



div::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #d0c8b4;
}

div::-webkit-scrollbar {
  width: 12px;
  background-color: #000;
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #9c8749;
}

#ad { border: 3px solid #ffef59; background: #45283c; padding: 6px; }

.ui-tabs {     
  display: flex;
  align-items: flex-end; 
  border-bottom: 2px solid #6b3b35;
}

.ui-tabs > a {
  display: flex;
  color: #ffb100;
  padding: 2px 4px;
  border-style: solid;
  border-width: 8px;
  border-image: url(buttons/tab.png) 8 fill repeat;
}

.ui-tabs > a.selected {
  color: #ffe770;
  border-image: url(buttons/tab-selected.png) 8 fill repeat;
  padding-bottom: 4px;
}

.modePicker > div.ui-tabs-panel { background: #663931; padding: 4px 8px; border-radius: 0 0 6px 6px; font-size: 14px; text-align: left; border-bottom: 2px solid #222034; border-right: 2px solid #222034; margin-bottom: 16px; }



.LeaderboardWindow p { margin: 0; margin-bottom: 4px; }

.new { position: relative; }
.new:after { 

  content: "new";
  position: absolute;
  padding: 3px;
  font-size: 10px;
  font-weight: bold;
  right: 6px;
  top: -4px;
  border-bottom: 4px solid #b97800;
  transform: translate(0, -100%);
  color: #ffa500; 

}

.ci-ad { display: none; }
.ci-ad img { max-width: 400px   }