* {
  float:none;
  font-family:sans-serif;
  cursor:default;
  outline:none;
  -webkit-appearance: none;
  -webkit-border-radius:0; 
  border-radius:0;
}

::-webkit-scrollbar { 
    display: none; 
}

html {
  -webkit-text-size-adjust:none;
}

body {
  background-color:#000000;
  font-size:7vmin;
}

#info {
  position:fixed;
  left:10vmin;
  bottom:15vmin;
  right:10vmin;
  text-align:center;
  background-color:rgba(255,255,255,0.9);
  color:#555555;
  z-index:20000000;
  font-size:3.5vmin;
  font-weight:bold;
  padding:1vmin;
  display:none;
  border-radius:3vmin;
}

#info.visible {
  display:block;
}

#menu {
  position:fixed;
  left:0%;
  top:0%;
  bottom:0%;
  width:15vmin;
  background-color:#FF6600;
  background:linear-gradient(to bottom, #555, #000);
  transition:width 1s;
  z-index:20;
  overflow:hidden;
  padding:0;
}

#menuContent {
  position:absolute;
  left:0;
  top:25vmin;
  bottom:0;
  right:0;
  overflow:auto;
  overflow-x:hidden;
}

.scroll {
  overflow:scroll;
  position:absolute;
}

.menuActivated #menu {
  width:80vmin;
}

#menuBanner {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:25vmin;
  z-index:1;
  display:none;
  background-image:url('./res/menuBanner.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
}

#main {
  position:fixed;
  left:15vmin;
  top:0%;
  bottom:0%;
  right:0%;
  background-color:#000000;
  transition:1s;
  color:#FFFFFF;
  z-index:10;
  padding:5vmin;
  overflow:auto;
}

.menuActivated #main,
.loading #main {
  opacity:0.2;
}

#menuButton {
  position:relative;
  width: 15vmin;
  height:15vmin;
  left:0%;
  top:0%;
  background-image:url('./res/menu.svg');
  background-position:center top;
  background-repeat:no-repeat;
  background-size:100% auto;
  transition: 1s;
  z-index:30;
  cursor:pointer;
}

#menuNotification {
  position:absolute;
  display:none;
  right:2vmin;
  top:3vmin;
  height:2.5vmin;
  width:2.5vmin;
  border-radius:3vmin;
  border:2px solid #555;
  background-color:rgb(255,120,0);
  content:'';
  transition:1s;
}

#menuButton.messagesPending #menuNotification {
  display:block;
}

.menuActivated #menuButton {
  transform:rotate(90deg);
}

.menuActivated  #menuNotification {
  opacity:0;
}

#backButton {
  position:absolute;
  width: 15vmin;
  height:15vmin;
  left:85vmin;
  top:0%;
  background-image:url('./res/back.svg');
  background-position:center top;
  background-repeat:no-repeat;
  background-size:100% auto;
  z-index:3000;
  cursor:pointer;
  display:none;
  transition:1s;
}

.backActivated #backButton {
  display:block;
}

.menuActivated #backButton {
  opacity:0.2;
}

#menuFader {
  position:absolute;
  z-index:100000;
  left:0;
  right:0;
  bottom:0;
  height:7vmin;
  background-image:url('./res/fader.svg');
  background-repeat:repeat-x;
  background-size:auto 100%;
}

ul.menu {
  position:absolute;
  left:0%;
  margin:0;
  padding:0;
  z-index:100;
  display:none;
  width:80vmin;
  margin-bottom:7vmin;
}

ul.submenu {
  margin:0;
  padding:0;
  z-index:100;
}

#playerName {
  position:absolute;
  width:76vmin;
  padding:0;
  padding-right:4vmin;
  padding-top:4vmin;
  margin:0;
  color:#FFFFFF;
  font-size:5vmin;
  font-weight:bold;
  display:none;
  text-align:right;
  text-shadow:2px 2px #000000;
  z-index:1000;
  cursor:pointer;
}

#playerName:hover {
  color:#FFFF00;
}

ul.menu li {
  position:relative;
  width:69vmin;
  padding-left:8vmin;
  padding-right:3vmin;
  padding-top:2vmin;
  padding-bottom:2vmin;
  margin:0;
  color:#fff;
  font-size:3.5vmin;
/*   font-weight:bold; */
  cursor:pointer;
}

div.messages {
  position:absolute;
  text-align:center;
  border-radius:100%;
  font-size:3vmin;
  background-color:#FF0000;
  color:#000;
  font-weight:normal;
  text-align:center;
  padding-top:1vmin;
  right:3vmin;
  top:1vmin;
  width:6vmin;
  height:5vmin;
  line-height:4.5vmin;
}

div.messages.hidden {
  display:none;
}

ul.menu li.logout {
  color:#ff8800;
  text-align:right;
}

ul.menu li.admin {
  color:#000088;
  text-align:right;
}

ul.menu li:hover {
  background-color:#FF9900;
  transition:background-color 0.25s;
}

ul.submenu li {
  width:64vmin;
  padding-left:16vmin;
  margin:0;
  color:#fff;
}

li.icon {
  padding-left:14vmin !important;
  width:66vmin !important;
  background-position:8.5vmin center;
  background-size:auto 4vmin;
  background-repeat:no-repeat;
}

#avatar {
  position:absolute;
  display:none;
  right:4vmin;
  top:2vmin;
  width:15vmin;
  height:15vmin;
  border-radius:100%;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:-1px -1px 3px #FFFFFF, 1px 1px 3px #000000;
  z-index:1000;
  cursor:pointer;
}

#avatar:hover {
  box-shadow:-1px -1px 3px #000000, 1px 1px 3px #FFFFFF;
}

div.avatar {
  position:relative;
  width:30vmin;
  height:30vmin;
  border-radius:100%;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:1000;
  margin-bottom:2vmin;
  margin-left:4vmin;
}

li.separator {
  border-top:1px solid #ff8800;
  padding-top:3vmin;
}

.gameButton {
  position:absolute;
  width:32vmin;
  height:32vmin;
  background-color:#FFFFFF;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0px 0px 30px #FFFFFF;
  border-radius:100%;
  cursor:pointer;
}

.gameButton.dark {
  background-color:#000000;
  border-radius:0;
  background-size:90% 90%;
}

.gameButton:hover {
  box-shadow:0px 0px 30px #FF8800;
}

.patButton {
  position:relative;
  font-size:4vmin;
  padding-left:12vmin;
  padding-top:1.5vmin;
  padding-bottom:1.5vmin;
  margin-bottom:2vmin;
  color:#AAAAAA;
  background-position:2vmin center;
  background-size:auto 4vmin;
  background-repeat:no-repeat;
  box-shadow:0px 0px 30px rgba(255,255,255,0.5);
  cursor:pointer;
}

.patButton:hover {
  box-shadow:0px 0px 30px #FF8800;
}

.patImage {
  position:relative;
  width:32vmin;
  height:17vmin;
  margin-left:24vmin;
  background-position:center bottom;
  background-size:contain;
  background-repeat:no-repeat;
  margin-bottom:1vmin;
  z-index:11000;
}

.patImageZoom {
  position:absolute;
  left:50%;
  top:0%;
  margin-left:-40vmin;
  width:80vmin;
  height:44vmin;
  display:none;
}

.patImage:hover .patImageZoom {
  display:block;
  background-position:top center;
  background-size:contain;
  background-repeat:no-repeat;
}

.patRules {
  width:80vmin;
  height:8vmin;
  z-index:10000;
  position:relative;
}

.patRule {
  width:10%;
  height:100%;
  background-position:center center;
  background-size:90% 90%;
  background-repeat:no-repeat;
  position:relative;
  float:left;
  opacity:0.3;
}

.patRule.allowed {
  opacity:1.0;
}

.patRuleZoom {
  position:absolute;
  left:50%;
  top:100%;
  margin-left:-10vmin;
  height:20vmin;
  width:20vmin;
  display:none;
}

.patRules:hover .patRuleZoom {
  display:block;
  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;
}

.titel {
  margin-top:5vmin;
/*   text-align:center; */
  padding-left:1vmin;
  font-size:7vmin;
  color:#FF6600;
  font-weight:bold;
  margin-bottom:5vmin;
}

#cover {
  position:fixed;
  right:0%;
  top:0%;
  bottom:0%;
  left:15vmin;
  display:none;
  z-index:10000000;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:15vmin 15vmin;
  transition:1s;
}

.loading #cover {
  background-image:url('./res/refresh.gif');
  display:block;
}

.menuActivated #cover {
  left:80vmin;
}

.menuActivated ul.menu,
.menuActivated #menuBanner,
.menuActivated #avatar,
.menuActivated #cover,
.menuActivated #playerName {
  display:block;
}

.offline #playerName,
.offline #avatar {
  display:none;
}

div.spalten {
  color:#888888;
  font-size:5vmin;
  margin-bottom:1vmin;
}

div.zeilen {
  position:relative;
  font-size:5vmin;
  padding-bottom:3vmin;
  border-bottom:1px solid #885500;
}

div.zeilen.rejected {
  background-color:rgba(255,0,0,0.1);
}

.semiTransparent {
  opacity:0.3;
}

.link, .link * {
  cursor:pointer;
}

div.zeilen.link {
  padding-top:3vmin;
}

div.zeilen.link.abstand {
  padding-top:0;
}

div.zeilen.link:hover {
/*   background-color:rgba(255,255,255,0.3); */
}

/*div.zeilen * {
  background-color:rgba(255,0,0,0.5);
}*/

div.zeile {
  position:relative;
  margin-left:10vmin;
  width:59vmin;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

div.image {
  position:absolute;
  left:0.5vmin;
  bottom:3vmin;
  width:7vmin;
  height:7vmin;
  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;
  border:1px solid rgba(0,0,0,0);
}

div.player2 {
  color:#AAAAAA;
}

div.date {
  font-size:4vmin;
  color:#885500;
}

.rejected .date {
  color:#AA0000;
}

div.note {
  font-size:4vmin;
  color:#888888;
}

div.result1, div.result2 {
  position:absolute;
  right:1vmin;
  width:13vmin;
  text-align:right;
  color:#FF8800;
  font-weight:bold;
}

.rejected .result1,
.rejected .result2 {
  color:#FF0000;
}

div.result1 {
  bottom:9vmin;
}

div.result2 {
  bottom:3vmin;
}

div.checkbox {
  position:absolute;
  background-color:#000000;
  color:#FFFFFF;
  border:1px solid #FF8800;
  left:0;
  top:0;
  width:8vmin;
  height:8vmin;
  font-size:6vmin;
  overflow:hidden;
  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;
}

div.checkbox.checked {
  background-image:url('./res/check.svg');
}

div.spalten.abstand {
  margin-top:4vmin;
}

div.zeilen.abstand {
  margin-bottom:4vmin;
}

span.right {
  position:absolute;
  width:83vmin;
  left:1vmin;
  text-align:right;
/*   left:64vmin; */
}

div.player {
  font-size:6vmin;
  height:7vmin;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:60vmin;
  text-align:left;
}

select, input {
  position:absolute;
  background-color:#ddd;
  border:none;
  color:#444;
  border-bottom:2px solid #FF6600;
/*   left:1vmin; */
  width:60vmin;
  height:7vmin;
  font-size:6vmin;
}

select.points {
  position:absolute;
  left:64vmin;
  width:20vmin;
  text-align:right;
}

select.points.left {
  left:1vmin;
  text-align:left;
}

select.points.alignUp {
  margin-top:-7vmin;
}

input.form {
  position:relative;
  width:75vmin;
  margin:0;
/*   background-color:#333333; */
}

div.vs {
  text-align:center;
  color:#000000;
  background-color:#666666;
  padding:0.5vmin;
  font-size:5vmin;
  margin-top:5vmin;
  margin-bottom:5vmin;
}

div.buttons {
  position:relative;
  margin:10vmin 0;
  height:10vmin;
/*   padding-top:10vmin; */
/*   border-top:1vmin solid #666666; */
}

div.buttons .button {
  position:absolute;
  width:16vmin;
  height:16vmin;
  background-position:center center;
  background-size:10vmin 10vmin;
  background-repeat:no-repeat;
  border-radius:16vmin;
  background-color:#441100;
  border:2px solid #ff8800;
}

div.buttons .button.ok {
  left:0;
  border-color:#00FF55;
  background-color:#003300;
  background-image:url('./res/ok.svg');
}

div.buttons .button.ok:hover {
  background-color:#006600;
}

div.buttons .button.cancel {
  left:34.5vmin;
  border-color:#FF5555;
  background-color:#330000;
  background-image:url('./res/cancel.svg');
}

div.buttons.both .button.ok {
    left:15vmin;
}

div.buttons.both .button.cancel {
    left:auto;
    right:15vmin;
}

div.buttons .button.disabled,
div.buttons .button.disabled:hover {
  background-color:#111111;
  border-color:#555555;
  opacity:0.5;
}

.stats {
  font-size:10vmin;
  color:#AAAAAA;
  text-align:right;
  width:55vmin;
  margin-top:5vmin;
  margin-left:15vmin;
  padding:1vmin;
  padding-right:3vmin;
  background-position:left center;
  background-size:contain;
  background-repeat:no-repeat;
  background-color:#441100;
  border-radius:8vmin 0 0 8vmin;
}

.stats.total {
  background-color:#662200;
  color:#FFFFFF;
  margin-left:5vmin;
  width:65vmin;
}

#block {
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:90000000;
  background-color:rgba(100,100,100,0.7);
  display:none;
}

#message {
  position:fixed;
  left:50%;
  top:50%;
  width:80vmin;
  margin-left:-40vmin;
  margin-top:-40vmin;
  background-color:#FFFFFF;
  box-shadow:1px 1px 10px #000000;
  overflow:hidden;
}

#messageProgress {
  position:absolute;
  left:0;
  bottom:1vmin;
  height:2vmin;
  background-color:#FF8800;
  width:50%;
}

#messageText {
  font-size:5vmin;
  margin:2vmin 4vmin;
  padding:4vmin;
  margin-bottom:15vmin;
  max-height:43vmin;
  overflow:auto;
  color:#000000;
}

#messageText.error {
  color:#880000;
}

#messageButtons {
  position:absolute;
  right:4vmin;
  bottom:8vmin;
  left:4vmin;
  text-align:right;
  height:8vmin;
}

#messageButton {
  position:relative;
  display:inline-block;
  text-align:center;
  background-color:#fff;
  border:2px solid #ff8800;
  color:#000;
  padding:1vmin 3vmin;
  font-size:5vmin;
}

#messageButtonCancel {
  position:relative;
  display:none;
  text-align:center;
  background-color:#EEEEEE;
  padding:1vmin 3vmin;
  font-size:5vmin;
}

#messageButtonCancel.visible {
  display:inline-block;
}

#messageFocus {
  width:1vmin;
  left:-100vmin;
}

div.tabContainer {
  position:fixed;
  left:15vmin;
  top:0;
  right:0;
  background-color:#000000;
  z-index:100000;
}

div.tab {
  position:relative;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:75% 75%;
  border-bottom:2px solid #FF6600;
  background-color:#885500;
  cursor:pointer;
}

div.tab:hover {
  background-color:#552200;
}

div.tab.active,
div.tab.active:hover {
  border-left:2px solid #FF6600;
  border-right:2px solid #FF6600;
  border-bottom:2px solid #000000;
  margin-left:-2px;
  margin-right:-2px;
  z-index:100000;
  background-color:#000000;
}