/* 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;
}

.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;
}

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

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

a:link {
	color: #DC6A03;
}

a:visited {
	color: #DC6A03;
}

/*für Dame*/
img {
	width: 1.7em;
	height: auto;
	display: block;
}


.abbildung {
	width: 20em;
	height: auto;
	margin: .5em;
}

.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;
    /*width: 7em; */
    /*height: 1.5em;*/
}

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

/* Sudoku */
.sudokuFeld {
	padding: 0px;
    border-spacing: 0px;
}

.sudokuDunkel {
    background-color: #CCCCCC;
	text-align: center;
	border: thin grey solid;
	height: 2em;
	width: 2em;
	font-size: large;
}

.sudokuHell {
    background-color: #FFFFFF;
    text-align: center;
	border: thin grey solid;
	height: 2em;
	width: 2em;
	font-size: large;
} 
   
.zahlenListe {
	width: 2.2em;
	font-size: small;
	border-style: none;
}

.optionenListe {
	padding: 0px;
    border-spacing: 0px;
    width: 100%;
}

.optionenFeld {
	padding: 0px;
	text-align: center;
	border-style: none;
	height: .6em;
	width: 1.1em;
	font-size: .55em;
}

/* Schach */
   .schwarzesFeld {
 	   color: white;
	   background-color: #333333;
	   text-align: center;
	   border: thin white solid;
	   height: 1.7em;
	   width: 1.7em;
    }
    
   .weissesFeld {
	   color: black;
	   background-color: #FFFFFF;
	   text-align: center;
	   border: thin white solid;
	   height: 1.7em;
	   width: 1.7em;
   } 
   
   .spaltenkopf {
	   color: white;
	   background-color: #666666;
	   text-align: center;
	   border: thin white solid;
   }
   
   .zeilenkopf {
	   color: white;
	   background-color: #666666;
	   text-align: center;
	   border: thin white solid;
   }

.unterschrift {
	   color: white;
	   background-color: #333333;
	   width: 8em;
	   height: 2em;
	   text-align: center;
	   border: thin white solid;
    }
    
.bauplatz {
	   width: 8em;
	   height: 1.5em;
	   text-align: center;
	   border: none;
	   background-position: center;
	   background-repeat: no-repeat;
	   cursor: pointer;
   }
   
.spielfeld {
	background: #FFFFFF;
	border: 0;	
}

/*
.schachbrett {
	cellpadding="0";
}

tr {
	border: 0;
}
*/
   
/* 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: 6.5em;
	background: #DDDDDD;
	border-radius: .3em;
	padding-left: .3em;
	}

.abschnitt {
}

article{
	margin-top: .3em;
	background: #DDDDDD;
	border-radius: .3em;
	padding-left: .3em;
	}
	
aside{
	margin-top: .3em;
	background: #DDDDDD;
	border-radius: .3em;
	padding-left: .3em;
	}
	
footer{
	margin-top: .3em;
	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: .3em;
  }
  
  aside {
    flex: 25%;
	/*margin-left: .3em;*/
    align-self: right;
 }
  
  footer{
  	flex: 100%;
  }
  
  footer{
  	flex: 1 100%;
	padding-left: .3em;
  }
    
}