/* CSS AB.css */
/* GLOBAL */
*						{ 	font-family: 		'Roboto Slab', serif; }
*						{ 	font-family: 		'Signika', sans-serif;}
*						{ 	color: 				inherit; 
							text-decoration:	none;
							vertical-align:		top;
							margin:				0px;
							padding:			0px;
						}
						
html						{	width:				100%;
							height:				100%;
/*
							display: 			flex;
							justify-content: 	center;	
*/
						}
body					{	width:				90%;
							max-width:			100em;
							padding:			.5em;
							margin:				auto;
						}
						
h2, h4, h6				{ 	font-family: 		'Roboto Slab', serif; }
h1, h2					{ 	font-size:			xx-large; }
h3, h4					{ 	font-size:			large; }
h5, h6					{ 	font-size:			larger; }
h1, h2, h3				{ 	font-weight:		bold;}
h4, h5, h6				{ 	font-weight:		bolder;}

div						{	padding:			8px;
						}
						
blockquote	 			{	padding:			8px;
							margin:				12px;
						}
						
						
a						{	color:				rgb(30,144,255);
							height:				inherit;
							width:				inherit;
							padding:			0px .5em;
						}

img						{	padding:			.5em;
						}

u						{	display:			block:
							padding:			0px 0.5em;
							font-size:			larger;
							font-wight:			bold;
							color:				rgba(255,140,0,1);
						}
						
ul						{ 	list-style:			square none inside;
							text-indent:		1em;
						}
						
nav li					{	display:			inline-block;
						}
						
blockquote				{	font-family: 		'Roboto Slab', serif;
							font-size:			large;
							font-weight:		bold;
							font-style:			italic;
							color:				rgba(255,140,0 , 1 );
							/*
							background-color:	rgba(0,0,0, 0.75);
							*/
							display:			inline-block;
						}

nav div					{ 	display:			inline-block;
							height:				inherit;
							padding:			0px;
						}
nav ul					{	list-style:			none none;
							padding:			0px;
							margin:				0px;
						}

nav a 	 				{	display:			inline-block;
							height:				auto;
							color:				inherit;
						}
						
/* FORMS */
form > div				{	display: 			inline-block;
						}
form *					{	color:				rgba(0,0,0, 1 );
						}
input[type="checkbox"]	{ 	display: 			inline;
							width:				2em;
						}
input, textarea			{ 	display:			block;
							width:				100%;
							margin:				0.25em 0px;
						}
input					{	width:				20em;
						}
button					{	display:			inline-block;
							margin:				0.25em 0px;
						}
						
label					{	display:			inline-block;
							margin:				0.25em 0px;
						}

div p, div h			{ 	max-width:			40em;
						}

.required				{	color:				red;
						}
.MotD					{	font-size:			smaller;
							color:				rgba(255,255,255, 0.5);
							background-color:	rgba(65,105,225, 0.5);
						}
.MotD *					{	margin:				0.25em 0px;
						}
.MotD div				{	display:			inline-block;
						}
.MotD img				{	height:				15em;
						}
.Keywords				{	font-variant:		small-caps;
						}
.Teaser					{	padding:			8px 0px;
						}
.FSK					{	color:				rgba(0,128,128, 0.75);
							font-size:			x-small;
						}
.article				{	font-size:			larger;
						}
						
footer					{	font-size:			small;
							text-align:			center;
							vertical-align:		middle;
							width:				auto;
							padding:			0px;
							font-size:			smaller;
							background-color:	rgba(0,0,0, 0.9);
							color:				rgba(255,255,255, 1 );
						}
footer *				{	color:				inherit;
						} 
footer img				{	height:				2.5em;
						}
						
/* NAVIGATION */						
.NavTop					{	font-size:			small;
							text-align:			right;
							width:				auto;
							padding:			0px;
							background-color:	rgba(0,0,0, 0.9);
							color:				rgba(255,255,255, 1 );
							margin:				0px;
						}

.NavBanner 		 		{ 	background-color:	rgba(255,255,255, 0.9);
							color:				rgba(72,61,139, 1 );
						}
.NavBanner img			{ 	height:				3.5em;
							text-align:			center;
						}
.NavBanner div			{	text-align:			center;
						}
						
.NavMain				{	font-size:			larger;
							vertical-align:		bottom;
							text-align:			right;
							text-transform:		uppercase;
							background-color:	rgba(255,255,255, 0.75);
							color:				rgba(0,0,0, 1 );
						}
.NavMain a				{	width:				8em;
							text-align:			center;
							padding:			.5em;
						}

.NavLevel				{	font-size:			medium;
							text-align:			right;
							text-transform:		uppercase;
							background-color:	rgba(255,255,255, 0.75);
							color:				rgba(0,0,0, 1 );
						}
.NavLevel a				{	width:				8em;
							text-align:			center;
							padding:			.5em;
						}

section					{	font-size:			small;
							background-color:	rgba(0,0,0, 0.75);
							color:				rgba(255,255,255, 1 );
						}
						
main						{	background-color:	rgba(0,0,0, 0.75);
							color:				rgba(255,255,255, 1 );
/*
							background-image:	url("../Images/Images/B_HortDerMagie.png");
							background-repeat:	no-repeat;
							background-size:	200%;
							background-position: 50%;
*/
						}

.sidebar, .about, .extra1, .extra2
						{	font-size:			small;
							/*
							background-color:	rgba(0,0,0, 0.9);
							*/
							color:				rgba(255,255,255, 0.5);
						}

.about			 		{	font-size:			small;
							background-color:	rgba(255,255,255, 0);
							color:				rgba(30,144,255, 0.9 );
						}
.aside					{	display:			block;
							color:				rgba(255,255,255, 0.5 );
						}
aside u					{	color:				rgba(255,140,0, 1 );
						}
aside img					{	max-width:			15em;
						}
						
/* Position via FlexBox */
body					{	font-size:			14px;
						}
						
/* NavTop */						
#Box1					{	
						}
/* NavBanner */
#Box2					{	
						}
/* NavMain */
#Box3					{
						}
/* NavLevel */
#Box4					{	
						}
/* Main */
#Box5					{	display:	flex;
							flex-flow:	row wrap;
							align-items:		stretch;
							justify-content:	center;
						}
#Box5 > *				{	flex:		1;
						}
/* MotD */
#Box51					{	flex:		1 1 100%; 
							order: 		1;
						}
/* Article */
#Box52					{	flex:		1 1 70%; 
							order: 		3; 
							/*
							background-color:	rgba(255,255,255, 0.25);
							*/
						}
/* aside */
#Box6					{	flex:		6 1 25%; order: 5; }
#Box6 > *				{	border-left:	1px solid;
						}
						
#Box61					{	}
#Box62					{	}
#Box63					{	}

/* INTERIM */
.NavMain, .NavLevel 		{ 	display:			none;	} 
/* TEST */
/*
body > *
	{ border: 3px solid yellow;
	}
div	{ border: 1px solid blue; 
	}
a	{ border: 2px solid red; 
	}
*/