/* banner & menu bar*/
.banner {
	height: 3em;
	width: 100%;
	background-image:url('Banner.png');
	background-repeat:repeat;
	background-position:left;
}

.menubar {
	background: #666666;
	padding: .2em .2em .2em .2em;
	margin-left: 0.5em;
	color: white;
	text-align: left;
}

.menubar a:link {
	color: white;
	text-decoration: none;
}

.menubar a:visited {
	color: white;
	text-decoration: none;
}

.menubar a:hover {
	color: white;
	text-decoration: underline;
}

.submenu {
	background: #444444;
	padding: .2em .2em .2em .2em;
	margin-left: 0.5em;
	color: white;
}

.submenu a:link {
	color: white;
	text-decoration: none;
}

.submenu a:visited {
	color: white;
	text-decoration: none;
}

.submenu a:hover {
	color: white;
	text-decoration: underline;
}

.legal {
	color: #888888;
}

.spielButtonG {
	background: green;
	color: white;
}

.spielButtonG:disabled {
	background: gray;
  	color: #CCCCCC;
}

.spielButtonR {
	background: red;
	color: white;
}

.spielButtonR:disabled {
	background: gray;
  	color: #CCCCCC;
}

/*Single styles*/
h1{
	color: #DC6A03;
	font-size: x-large;
}

h2{
	color: #DC6A03;
	font-size: large;
}

h3{
	color: #DC6A03;
	font-size: medium;
}

a:link {
	color: #DC6A03;
}

a:visited {
	color: #DC6A03;
}

img {
	width: 0,8em;
	height: auto;
	display: block;
}

.nowrap { 
	white-space: nowrap;
}

input {
   width: 3.5em; 
   /*height: 1.25em;*/
}

input:disabled {
/*  background-color: #cccccc;*/
  color: #CCCCCC;
}

input:disabled+label{
	color:#AAAAAA;
}

label {
	font-size:smaller;
}

button {
	background: gray;
	color: white;
}

button:disabled {
/*  background-color: #cccccc;*/
  color: #CCCCCC;
}

/* Scrabble */
table, tr {
  border-color: #DDDDDD;
  border-collapse: collapse;
}

th {
  color: #DC6A03;
  border-color: #DDDDDD;
  border-collapse: collapse;
}

td {
  padding: 0px;
  border-spacing: 0px;
  border-color: #DDDDDD;
  height: 1.5em;
  width: 1.5em;
  font-size: normal;
  text-align: center;
}
   
.zahlen {
   	text-align:right;
}

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

.aktiv {
	font-weight: bolder;
}

.gewonnen {
	font-weight: bolder;
	/*font-style: italic; */
	color: green;
}


.selektiert {
	border: 2px black solid;
}

.normal {
  border: thin grey solid;
}

/*.scrabbleFeld {
	background-color: #808080;
	border: thin grey solid;
}*/

.standardFeld {
    background-color: #EEEEEE;
	border: thin grey solid;
}

.textFeld {
	/*width: 3.0em; */
	background-color: #DDDDDD; 
	border-color: #DDDDDD;
	text-align: left;
}

.buttonFeld {
	width: 8.5em; 
	background-color: #DDDDDD; 
	border-color: #DDDDDD;
}

.doppelterBuchstabenwert {
	background-color: #33DDDD;
	border: thin grey solid;
} 

.dreifacherBuchstabenwert {
	background-color: #4444DD;
	border: thin grey solid;
} 

.doppelterWortwert {
	background-color: #FF99FF;
	border: thin grey solid;
} 

.dreifacherWortwert {
	background-color: #DD3333;
	border: thin grey solid;
} 
/*Zustände für Steine */
.bank {
	background-image: url("Scrabblestein.png"); 
	background-repeat: no-repeat;
	background-position: center;
	draggable: true;
	color: black
}

.spiel {
	background-image: url("ScrabblesteinG.png");
	background-repeat: no-repeat;
	background-position: center;
	draggable: true;
	color: #FFFFFF
}

.inPruefung {
	background-image: url("ScrabblesteinG.png"); 
	background-repeat: no-repeat;
	background-position: center;
	draggable: false;
	color: #404040
}

.fixiert {
	background-image: url("Scrabblestein.png"); 
	background-repeat: no-repeat;
	background-position: center;
	draggable: false;
	color: black
}

.chat {
	height: 10em;
	width: 19em;
	overflow-y: scroll;
	overflow-x: hidden;
	border: thin grey solid;
}

.content {
	width: 17em;
}
  
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
body {
	font-family:  Calibri, "Trebuchet MS", sans-serif;
	background-color: #666666;
	color: black;
}

header {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
    /*margin-bottom: 5em;*/
   	border-radius: .3em
}

main{
	margin-top: 4.5em;
	background: #DDDDDD;
	border-radius: .3em;
	padding-left: .3em;
	}

.abschnitt {
}

article{
	margin-top: .1em;
	background: #DDDDDD;
	border-radius: .3em;
	padding-left: .3em;
	}
	
aside{
	margin-top: .1em;
	background: #DDDDDD;
	border-radius: .3em;
	padding-left: .3em;
	}
	
footer{
	margin-top: .1em;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: .3em;
	background: #DDDDDD;
	padding-left: .3em;
}

/* nebeneinander bei ausreichender Breite */
@media all and (min-width: 35em) {
  body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 60em;
  } 
  
   header{
  	flex: 100%;
/*	margin-bottom: 13em;*/
   }

  main {
    flex: 100%;
  }
  
.abschnitt {
  display: flex;
  flex-flow: row;
/*  background: #DDDDDD;*/

 }

 
  article {
    flex: 25%;
    align-self: left;
    margin-right: .1em;
  }
  
  aside {
    flex: 25%;
	/*margin-left: .3em;*/
    align-self: right;
 }
  
  footer{
  	flex: 100%;
  }
  
  footer{
  	flex: 1 100%;
	padding-left: .3em;
  }
    
}