@charset "utf-8";
/* CSS Document */
body {
	background-color: #FC6;
	font-family: arial, sans-serif;
	font-size: 0.8em;
	font-family: Arial, sans-serif;
	text-align: center;
}
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

main{
	display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-orient: vertical; -webkit-flex-flow: column wrap; flex-flow: column wrap;
	width: 100%;
	justify-content: center; text-align: center;
}
@media all and (min-width: 640px) {
main {
	-webkit-box-orient: horizontal; -ms-flex-flow: row nowrap; -webkit-flex-flow: row nowrap; flex-flow: row nowrap;}
}

h1 {text-align: center;
    font-weight: bold; color: #cc3300; font-family: Arial; font-size: 1.5em;}
h2 {text-align: center;
    color: #cc3300; font-family: Arial; font-size: large; font-size: 1.2em;}

section {
	-webkit-box-flex: 1; -ms-flex: 1 auto; -webkit-flex: 1 auto; flex: 1 auto;
	border: hidden; min-width: 150px; max-width: 400px; text-align: center;
	margin-left: 3px; margin-right: 3px; margin-top: 10px;}
section.breit {
	-webkit-box-flex: 1; -ms-flex: 1 auto; -webkit-flex: 1 auto; flex: 1 auto;
	border: hidden; min-width: 200px; max-width: 400px;
	margin-left: 3px; margin-right: 3px; margin-top: 10px;}
@media all and (min-width: 640px) {
section {
	-webkit-box-flex: 1; -ms-flex: 1 auto; -webkit-flex: 1 auto; flex: 1 auto;
    margin-left: 20px; margin-right: 20px; min-width: 150px;}
section.breit {min-width: 250px; max-width: 600px;
	-webkit-box-flex: 2; -ms-flex: 2 auto; -webkit-flex: 2 auto; flex: 2 auto;}
}
@media all and (min-width: 800px) {
section {
	-webkit-box-flex: 1; -ms-flex: 1 auto; -webkit-flex: 1 auto; flex: 1 auto;
    margin-left: 30px; margin-right: 30px; }
    }
article {
    background-color: #FA1;
	-webkit-border-radius: 5px; border-radius: 5px;
	border: 1px solid #009;
	padding: 5px; margin: 0px;
	text-align: center; font: Arial, Helvetica, sans-serif #009; font-size: 0.9em;}
@media all and (min-width: 640px) {
	article {font-size: 1em;}
}
/* article.img muss auf eine class beschränkt werden, sonst funktionert bei "AntoniQ - wo ist das" die bing-map nicht - warum auch immer...*/
article img {display: block;
    width: 100%; max-width: 300px; height: auto; margin-left: auto; margin-right: auto;}
article img.hochkant {max-width: 220px;}
p {padding: 0px; margin-bottom: 10px;}
p.license {color:#666; font-size: 0.7em; font-style: italic;}

li {text-align: left;}

a {text-decoration: none; color: #009;}