:root {
  --color1 : #FFFFFF;
  --color2 : #CCCCCC;
  --color3 : #F3F3F3;
  --color4 : #000000;
  --color5 : #FFFFFF3F;
  --color6 : #00000019;
  --color7 : #FFFFFFCC;
  --color-link : #CC0000;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, small, strong, b, u, i, svg {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-family: sans-serif;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
}

body {
  line-height: 1;
  padding: 5px;
  overflow: hidden;
}

h1 { font-size: 2em; margin:1em 10px; }

#onlineGame {
  position: relative;
  opacity:1;
  border: 1px solid #ccc;
  padding: 0;
  background-color: var(--color1);
  background-repeat: repeat;
  background-position: 50%;
  background-size: cover;
  overflow:hidden;
}

#onlineGame #menu {
  position:relative;
  border-bottom: 1px dotted #999;
  text-align: right;
  padding:10px 0;
  margin-bottom: 1em;
}

#onlineGame #menu span.zeit {
  color:#999;
}

#onlineGame #menu span {
  font-size: 1em;
  line-height: 1em;
  color: #666;
  padding: 0 .5em;
  vertical-align: middle;
  height: 1em;
}

#onlineGame #menu .btn {
  cursor: pointer;
}

#onlineGame #menu .btn:hover {
  color:var(--color1);
  background-color: var(--color-link);
}

#onlineGame #rahmen {
  position:relative;
  margin: 0;
  padding: 0;
  width: 96%;
  left: 2%;
}

#onlineGame #layout img, #onlineGame #karten img {
  position:absolute;
  width: 13%;
  border-radius: 10%;
  -moz-border-radius: 10%;
  -webkit-border-radius: 10%;
  border: 1px solid #666;
}

#onlineGame #karten img {
  box-shadow:1px 1px 3px var(--color6);
  cursor: pointer;
}

#onlineGame #layout .y1 {
  cursor: pointer;
}

#onlineGame #karten img.aktiv {
  border-color: var(--color-link);
  border-width: 2px;
}

#positionButtonDiv {
  float:right;
}

#positionButtonDiv  img {
  width: 2em;
  border: 1px solid;
  margin-left:10px;
  cursor:pointer;
}

#onlineGame .dialog {
  position: absolute;
  left: 15%;
  top: 10%;
  width:70%;
  color: var(--color4);
  text-align: center;
  display:none;
  background-color: var(--color7);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#onlineGame .dialog div, #onlineGame .dialog p {
  margin: 1em auto;
}

#onlineGame .dialog .spieldauer {
  font-weight: 600;
}

#onlineGame .dialog h2 {
  margin: 1.5em auto;
  font-size: 2em;
}

#onlineGame div.but_start_game {
  background-color: var(--color-link);
  cursor: pointer;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  font-size: 1.4em;
  line-height: 1.4em;
  font-weight: bold;
  color: var(--color1);
  padding: .4em 10%;
  width: 50%;
  margin: 3em auto 2em auto;
}