body {
	color:#000000;
	background-color:#FFF;
	font-family:"Century Gothic",Arial,"Sans Serif";
	font-size: medium;
	font-weight: 400;
	text-align: justify;
	line-height:1.5;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

    a  { color:#A41C1C; font-weight:bolder;}
    a:visited { color:#A41C1C; }
    a:hover { color:#FF0000; text-decoration:underline;}
    a:active { color:#A41C1C; }
    /* Don't underline links */
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
    
  h1 {font-size:xx-large; font-weight:bold; text-transform:uppercase;}
  h2 {font-size:x-large; font-weight:bold;  }
  h3 {font-size:medium; font-weight:bold;}
  h4 {font-size:medium; font-weight:bold;}
  
  .kleiner {font-size:smaller; }
  .groesser {font-size:large; }
  .links {text-align: left; }

   #head {
	max-width: 15em;
     } 

  #zitat {
    top: 1em; 
    margin: 1% 0% 0% 1%;
    padding: 1% 2%;
    text-align: right;
    font-size:smaller;
	line-height:1.2;
  }
  #zitat i {font-size:medium;}

   #infobox {
	top: 1em;
	float:left;
	width: 19em;
	margin: 0 0 0 0;
	padding: 1% 2%;
	line-height:1.5;
	text-align: justify;
	background-color: #fef1e7;
  }
  
  .line {
	float: left; width: 85%; 
	text-align:justify;
  }

  
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

header,
nav,
nav a,
articl,
section,
aside,
footer {
	padding: 10px;
	margin: 10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
}

header {
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
}

header * {
	-webkit-flex: 1 1 0%;
	flex: 1 1 0%;
}

header img {
	-webkit-flex: 0 0 150px;
	flex: 0 0 150px;
	margin-right: 20px;
}

header nav {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

section {
	background: #F1F3F4;
}

article {
}

aside {
	background: #ebf5d7;
}

footer {
	background: #fef1e7;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
}

footer * {
	-webkit-flex: 1 1 0%;
	-webkit-justify-content: space-between;
	flex: 1 1 0%;
	justify-content: space-between;
}


table {
		max-width: 80em;
		border: none;
		margin: 0;
}
	
tr,
th,
td {
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
		vertical-align: top;
		min-width: 8em;
		padding: 1em;
}
	
	td:first-child {
		-ms-hyphens: manual;
		-webkit-hyphens: manual;
		-moz-hyphens: manual;
		hyphens: manual;
		text-align: left;
}

@media screen and (max-width: 35em) {
	tr,
	th,
	td {
		display: block;
		padding: 0.5em;
	}
}

/* Smart Phones und Tablets mit mittlerer Auflösung */

@media all and (min-width: 35em) {
	header img {
		margin-right: 50px;
	}
	nav ul {
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	nav li {
		margin: 0 10px;
		-webkit-flex: 1 1 0%;
		flex: 1 1 0%;
	}
	articl {
		webkit-order: 2;
		order: 2;
	}
	#news {
		-webkit-flex: 1 auto;
		-webkit-order: 3;
		flex: 1 auto;
		order: 3;
	}
	aside {
		/* durch auto werden die beiden asides in eine Zeile gesetzt */
		
		-webkit-flex: 1 auto;
		-webikit-order: 4;
		flex: 1 auto;
		order: 4;
	}
	footer {
		webkit-order: 5;
		order: 5;
	}
}


/* Large screens */
@media all and (min-width: 55em) {
 	body {
		background: url(taiji_bg.gif) 45% 35% no-repeat fixed;
	}
	articl {
		/* Der Article wird 2.5x so breit wie die beiden asides! */
		
		-webkit-flex: 5 1 0%;
		-webkit-order: 3;
		order: 3;
		flex: 5 1 0%;
	}
	aside {
		-webkit-flex: 2 1 0%;
		flex: 2 1 0%;
	}
	#news {
		-webkit-flex: 2 1 0%;
		-webkit-order: 2;
		-webkit-align-self: center;
		flex: 2 1 0%;
		order: 2;
		align-self: center;
		height: 120px;
	}
}
@media all and (min-width: 63em) {
 	body {
		background: url(taiji_bg.gif) 45% 35% no-repeat fixed, url(r-d-m_rot_vert_transp.gif) right no-repeat fixed;
		margin: 1% 10% 0% 2%;
	}	

}