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

body {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
    font-size: 1.01em;
    color: #022B98;
	background-image: url('../../pic/io.lhw.germanensohn.20.24.gif');
	background-size: normal; 
	background-repeat: no-repeat;
	background-position: center top;
    background-color: transparent;
}
			
header,
nav,
nav a,
article,
section,
aside,
footer {
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid #000;
	padding: 10px;
	margin: 10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
}

header,
div.zwei {
    font-family: 'Sansita Swashed', DejaVuSans, Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	background: #ffcc40 url('../../pic/bg_oben.jpg') repeat-x fixed center top;
	border-color: #d5d5d5;
	display: block;
	width: 96%;
	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 {
	background: #F1F3F4 url('../../pic/bg4a.gif') repeat-x fixed center top;
	-webkit-flex: 1 1 98%;
	flex: 1 1 98%;
	margin-right: 2px;
	float: left;
        min-width: 350px;
}

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

h1, h2, h3, h4, h5 {
        color: #dfac20;
        background-color: #bf441e;
        margin-right: 10px;
        border-radius: 0 0.2em 0.2em 0;
        border: 1px solid #fff;
}

nav {
	display: block;
	float: left;
	width: 96%;
	margin: 5px auto;
	padding: 2px;
	border: 1px solid #dfac20;
}

nav ul {
	clear: left;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	display: flex;
	flex-direction: column;
	width: fit-content;
	margin: 5px auto;
	padding: 2px;
}

nav li {
	list-style-type: none;
	display: inline-block;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

nav a,
nav a:link,
nav a:visited {
	background-color: #bf441e;
	border: none;
	margin: 0;
	text-decoration: none;
	text-align: center;
    color: #00335f;
    font-size: 1.1em;
}

nav a:hover {
	background-color: #a770e2;
	text-decoration: none;
	text-align: center;
    color: #313332;
    font-size: 1.1em;
    border: none;
}

#selected,
#naviActive {
	background-color: #a770e2;
    color: #313332;
    font-weight: bolder;
    font-size: larger;
	border-left: thin #000 ridge;
	border-bottom: thin #000 ridge;
}

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

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

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

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

footer {
	background-color: #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: 20px;
       left: 25px;
       font-size: 0.89em;
}

.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 solid #000099;
	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 solid #000333;
	background-color: #888;
	font-size: 0.98em;
	color: #000333;
	margin-top: 3px;
	padding: 5px 0px 5px 20px;
}

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

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

@media all and (min-width: 610px) {
        body {
                font-size: 0.97em;
                top: 15px;
                bottom: 15px;
        }
        
        header,
        div.zwei {
				display: block;
				float: left;
                width: 580px;
                margin: 5px auto;
                padding: 5px;
				color: #022B98;
				background-color: #F1F3F5;
				background-image: url('../../pic/io.lhw.germanensohn.20.24.gif');
				background-size: normal; 
				background-repeat: no-repeat;
				background-position: center top;
		}

        header img {
                background: #F1F3F5 url('../../pic/bg4a.gif') repeat-x fixed center top;
                width: 545px;
                margin: 5px;
                margin-left: 10px;
                margin-right: auto;
        }

	nav ul {
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	nav li {
		margin: auto 10px;
		-webkit-flex: 1 1 0;
		flex: 1 1 0;
	}

	article {
		-webkit-order: 2;
		order: 2;
	}

	aside {
		/* durch auto werden die beiden asides in eine Zeile gesetzt */
		
		-webkit-flex: 1 auto;
		-webkit-order: 4;
		flex: 1 auto;
		order: 4;
	}

	#news {
		-webkit-flex: 1 auto;
		-webkit-order: 3;
		flex: 1 auto;
		order: 3;
	}

	footer {
		webkit-order: 5;
		order: 5;
	}

        #heute {
                position: absolute;
                top: 35px;
                left: 45px;
                font-size: 0.89em;
        }
        
        img#logo {
                border-radius: 0 0.5em 0.5em;
        }

}
/* Large screens */

@media all and (min-width: 800px) {
    body {
        font-size: 1.09em;
        top: 15px;
        bottom: 15px;
    }
        
        header,
        div.zwei {
				display: block;
				float: left;
                width: 780px;
                margin: 4px auto;
                padding: 2px;
				color: #022B98;
				background-color: #F1F3F5;
				background-image: url('../../pic/io.lhw.germanensohn.20.24.gif');
				background-size: normal; 
				background-repeat: no-repeat;
				background-position: center top;
		}
        
    header img {
        background: #F1F3F5 url('../../pic/bg4a.gif') repeat-x fixed center top;
        width: 760px;
        margin: 5px auto;
        margin-left: 10px;
    }

	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,
        nav a:link,
        nav a:active,
        nav a:visited {
                display: inline-block;
                width: 95%;
                background: #fffbf0;
                border: 1px solid #dfac20;
                margin: 0 auto;
                padding: 2px;
                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 {
                clear: left;
                font-size: 1.3em;
                color: #dfac20;
                background-color: #111;
                padding: 10px 2px;
                border-radius: 0 0.3em 0.3em;
        }

        h2 {
                clear: left;
                font-size: 1.14em;
                color: #dfac20;
                background-color: #111;
         }

        h3 {
                clear: left;
                font-size: 1.07em;
                color: #dfac20;
                background-color: #111;
         }
 
        #heute {
                position: absolute;
                top: 32px;
                left: 40px;
                font-size: 0.89em;
        }

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

}