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

body {
	width: 98%;
	margin: 5px auto;
	padding: 1px;
    top: 5px;
    left: 5px;
	background-image: url('../../pic/HEILIGE-SCHRIFT/Die-Wiedergeburt-des-Gott-Paars/Honda-CA125-Rebel_4.gif');
	background-size: normal; 
	background-repeat: no-repeat;
	background-position: fixed left top;
    background-color: #fff;
    color: #022B98;
    font-size: 1.1em;
}
			
header,
nav,
nav a,
article,
section,
aside,
footer {
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 1 100%;
	flex: 1 100%;
    font-family: 'Grenze Gotisch', DejaVuSans, Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
}

header {
	background: #ffcc40 url('../../pic/bg_oben.jpg') repeat-x fixed center top;
	border-color: #d5d5d5;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

header * {
	display: block;
	float: left;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
}

header img {
	background: #F1F3F4 url('../../pic/bg4a.gif') repeat-x fixed center top;
    width: 300px;
	margin: 0 auto;
	margin-right: 2px;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

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

h1 {
        color: #dfac20;
        background: #bf441e;
        margin-right: 10px;
        border-radius: 0 0.2em 0.2em 0;
}

nav,
nav ul,
nav li {
	margin: 0;
	padding: 0;
	border: none;
}

nav ul {
	display: -webkit-flex;
	-webkit-flex-direction: column;
	display: flex;
	flex-direction: column;
}

nav li {
	list-style-type: none;
	margin: 5px 0;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

nav a {
	display: inline-block;
	width: 95%;
	background: #bf441e;
	border: 1px solid #dfac20;
	margin: 0;
	text-decoration: none;
	text-align: center;
        color: #00335f;
        font-size: 1.1em;
}

nav a:hover {
	background-color: #bf441e;
}

#selected {
	background-color: #dfac40;
    color: #efefee;
    font-weight: bold;
}

section {
	background: #ffede0;
	border-color: #022BF8;
}

article {
	background: #bf441e url('../../pic/iconartist.jpg') no-repeat center center;
	border-color: #df6c20;
	color: #022B98;
}

aside {
	background: #ebf5d7;
	border-color: #8db243;
}

aside a:link,
aside a:visited {
        text-decoration: none;
        background-color: #ebf5ef;
        color: #000fee;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
	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;
}

footer p {
	text-align: right;
}

#heute {
       position: absolute;
       top: 10px;
       right: 30px;
       font-size: 0.89em;
       background-color: #8D0C33;
}

.f0 {
	display: block;
	float: left;
	padding: 0 0.3em;
	color: teal;
	border-bottom: thin solid #000066;
	border-left: thin solid #000066;
	font-family: 'Open Sans Condensed', Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	font-weight: bolder;
	font-size: 0.9em;
}
.f1 {
	font-style: italic;
	text-align: justify;
}

.f2 {
	display: block;
	float: right;
	padding: 3px 5px;
	text-align: right;
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
	font-size: 0.78em;
	color: #000099;
	background-color: #E1E1E1;
}

.f3 {
	border-bottom: 2px #000099 solid;
	padding: 5px 0px 5px 20px;
	background-color: #800000;
	color: #99FFCC;
	margin-bottom: 0;
}

.f4 {
	display: inline-block;
	background-color: #fff;
	color: #000;
	font-size: 0.9em;
	vertical-align: middle;
	min-width: 60px;
}

.f5 {
	border-bottom: 2px #000333 solid;
	padding: 5px 0px 5px 20px;
	background-color: #888;
	font-size: 0.98em;
	color: #000333;
	margin-top: 3px;
}

.f6 {
	display: inline-block;
	background-color: #aaa;
	color: #000333;
	font-size: 0.8em;
	vertical-align: middle;
	min-width: 60px;
}

.f7 {
	
}

.img {
	padding: 5px;
}

img#logo {
        border-radius: 0 0.2em 0;
}

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

@media all and (min-width: 610px) {
        body {
			width:96%;
			margin: 10px auto;
			padding: 0;
			top: 4px;
			left: 5px;
            font-size: 1em;
			color: #022B98;
			background-image: url('../../pic/HEILIGE-SCHRIFT/Die-Wiedergeburt-des-Gott-Paars/Honda-CA125-Rebel_4.gif');
			background-size: normal; 
			background-repeat: no-repeat;
			background-position: left top fixed;
			background-color: transparent;
        }
			
		header,
		nav,
		nav a,
		article,
		section,
		aside,
		footer {
			display: -webkit-flex;
			display: flex;
			-webkit-flex: 1 100%;
			flex: 1 100%;
			font-family: 'Grenze Gotisch', DejaVuSans, Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
			width: 96%;
			border-radius: 0px 0.5em 0.5em;
			border: 1px solid;
			margin: 10px auto;
			padding: 5px;
}
     
        header img {
			display: block;
			clear: left;
			-webkit-flex: 1 1 100%;
			flex: 1 1 100%;
                background: #F1F3F4 url('../../pic/bg4a.gif') repeat-x fixed center top;
                width: 545px;
                margin: 8px auto;
                margin-right: 10px;
                padding: 0;
        }

	nav ul {
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
	}

	nav li {
		margin: 0 10px;
		-webkit-flex: 1 1 0;
		flex: 1 1 0;
	}
	article {
		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;
		-webkit-order: 4;
		flex: 1 auto;
		order: 4;
	}
	footer {
		-webkit-order: 5;
		order: 5;
	}

        #heute {
                position: absolute;
                top: 15px;
				right: 35px;
                font-size: 0.89em;
				background-color: #8D0C33;
        }
        
        #logo {
                border-radius: 0 0.5em 0.5em;
        }

}
/* Large screens */

@media all and (min-width: 800px) {
    body {
			width: 800px;
			margin: 10px auto;
			padding: 0;
			top: 5px;
			left: 5px;
			background-image: url('../../pic/HEILIGE-SCHRIFT/Die-Wiedergeburt-des-Gott-Paars/Honda-CA125-Rebel_4.gif');
			background-size: normal; 
			background-repeat: no-repeat;
			background-position: fixed left top;
			background-color: transparent;
            font-size: 1.1em;
			color: #022B98;
    }
			
		header,
		nav,
		nav a,
		article,
		section,
		aside,
		footer {
			display: -webkit-flex;
			display: flex;
			-webkit-flex: 1 100%;
			flex: 1 100%;
			font-family: 'Grenze Gotisch', DejaVuSans, Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
			width: 800px;
			border-radius: 0px 0.5em 0.5em;
			border: 1px solid #adef00;
			margin: 10px auto;
			padding: 5px;
}
   
		header img {
			-webkit-flex: 1 1 100%;
			flex: 1 1 100%;
			background: #F1F3F4 url('../../pic/bg4a.gif') repeat-x fixed center top;
			width: 800x;
			margin: 8px auto;
            margin-right: 10px;
			padding: 0;
		}

	article {
		/* Der Article wird 2.5x so breit wie die beiden asides! */
		
		-webkit-flex: 10 1 0;
		-webkit-order: 3;
		order: 3;
		flex: 10 1 0;
	}
	
	aside {
		-webkit-flex: 2 1 0;
		flex: 2 1 0;
	}
        nav a {
                display: inline-block;
                width: 95%;
                background: #fffbf0;
                border: 1px solid #dfac20;
                margin: 0;
                text-decoration: none;
                text-align: center;
                color: #00335f;
                font-size: 1em;
        }
	#news {
		-webkit-flex: 2 1 0;
		-webkit-order: 2;
		-webkit-align-self: center;
		flex: 2 1 0;
		order: 2;
		align-self: center;
		height: 120px;
	}

        h1 {
                font-size: 1.4em;
                color: #dfac20;
                background: #111;
                padding: 10px 0;
                border-radius: 0 0.3em 0.3em 0;
        }

        h2 {
                font-size: 1.2em;
        }

        h3 {
                font-size: 1.06em;
        }
 
        #heute {
                position: absolute;
                top: 10px;
				right: 45px;
				font-size: 0.89em;
				background-color: #8D0C33;
        }

        img#logo {
                border-radius: 0 0.5em 0;
        }

}