
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 16px;
			line-height: 20px;
			background:		#DDDDDD;
			font-family: 	Georgia, Times, serif;
			font-size:		62.5%;
		}
		
		#section {
			max-width:		960px;
			padding:		20px 20px;
			margin:			auto;
			background:		#fff;
			box-shadow: #141817 2px 2px 10px;
		}
		
		#section > header {
			width:			100%;
			min-height:		120px;
		}
		
		#section > header hgroup {
			display: flex;
			justify-content: center;
			padding:	20px 0px;
		}

		#section > header hgroup h1 {
			margin: 0;
			padding: 0;
			color: #e5fb46;
			font-size: 150%;
		}
	
		#section > header hgroup h1 span {
			color: #007bff;
		}

		#section > header hgroup img {
			margin-left: 2rem;
			}

		nav#primarynav {
			margin-bottom:	10px;
		}
		
		nav#primarynav ul {
			margin: 0;
			padding: 0;
		}
		
		nav#primarynav ul li {
			margin: 0;
			padding: 0;
			font-size: 100%;
			line-height: 100%;
			list-style: none;
			display: inline-block;
			border-right: 1px solid #eee;
			padding: 0 0.5em;
		}
		
		nav#primarynav ul li:nth-child(1) a {  /* Home  */
			text-decoration: none;
			color: blue;
		}

		nav#primarynav ul li:nth-child(1) a:hover {
			text-decoration: underline;
			color: blue;
		}
		
		#primarynav ul li:nth-child(2) a {   /*  Verein  */
			text-decoration: none;
			color: #999;
		}
	
		nav#primarynav ul li:nth-child(2) a:hover {
			text-decoration: underline;
			color: blue;
			text-shadow: 1px 0 0 #331d07;
		}
		
		#primarynav ul li:nth-child(3) a {   /*  Veranstaltung  */
			text-decoration: none;
			color: #999;
		}
		
		nav#primarynav ul li:nth-child(3) a:hover {
			text-decoration: underline;
			color: blue;
			text-shadow: 1px 0 0 #331d07;
		}
		
		nav#primarynav ul li:nth-child(4) a {  /*  Kontakt  */
			text-decoration: none;
			color: #999;
		}
		
		nav#primarynav ul li:nth-child(4) a:hover {
			text-decoration: underline;
			color: blue;
			text-shadow: 1px 0 0 #331d07;
		}
		
		nav#primarynav ul li:nth-child(5) a {   /*  Impressum  >*/
			text-decoration: none;
			color: #999;
		}
		
		nav#primarynav ul li:nth-child(5) a:hover {
			text-decoration: underline;
			color: blue;
			text-shadow: 1px 0 0 #331d07;
		}

		nav#primarynav ul li:nth-child(6) a {   /*  Veranstaltung  */
			text-decoration: none;
			color: #999;
		}
		
		nav#primarynav ul li:nth-child(6) a:hover {
			text-decoration: underline;
			color: blue;
			text-shadow: 1px 0 0 #331d07;
		}

		nav#primarynav ul li:nth-child(7) a {
			text-decoration: none;
			color: #999;
		}
		
		nav#primarynav ul li:nth-child(7) a:hover {
			text-decoration: underline;
			color: blue;
			text-shadow: 1px 0 0 #331d07;
		}

/*		 End Navigation  */ 

		#container h1 {
			font-size: 1.2rem;
			}
		
		#pagelayout {  /* overall container as flex-box  */
			position: relative;
			display: flex;
			flex-flow: row wrap;					
			align-items: stretch;	
		}

		#mainlayout {
			position: relative;
			max-width: 960px;
			margin: auto;
			margin-left: 1em;
			columns: 3 12em;  /* 4  12em  */
			column-rule: 1px solid red;
			column-gap: 20px;			
		}
		
		#mainlayout article p {
			font-size: 100%;
			line-height: 130%;
		}

		#mainlayout article p span {
			font-size: 130%;
			font-weight: bolder;
			}
		
		#mainlayout article figure {
			width: 100%;
			margin: 0;
			padding: 0;
		}
		
		#mainlayout article figcaption {
			font-style: italic;
			font-size: 80%;
			color: #333;
		}
			
		#mainlayout article figure img {
			width: 100%;
			height: auto;
			border-radius: 10px;
		}
		
		#mainlayout article h2 {
			column-span: all;
			padding: 10px 0px;
			border-top: 1px solid #999;
			border-bottom: 1px solid #999;
			font-weight: normal;
			color: #297c21;
			font-size: 120%;
			line-height: 150%;
			text-shadow: 1px 1px 1px #297c21;
		}
		
		#mainlayout article h3 {
			column-span: all;
			padding: 10px 0px;
			border-top: 1px solid #999;
			border-bottom: 1px solid #999;
			font-weight: normal;
			color: #297c21;
			font-size: 120%;
			line-height: 150%;
			text-shadow: 1px 1px 1px #297c21;
		}	
		
		#callouts {
			column-span: all;
			columns: 2 230px;
		}
		
		#callouts > div {
			margin-bottom: 10px;
		}
		
		#callouts h2 {
			margin: 0;
			padding: 0.3em 0.5em;
			min-height: 160%;
			font-weight: bold;
			font-size: 140%;
			line-height: 150%;
			margin-top: -1em;
			z-index: 5;
			position: relative;
		}

		#callouts img {
			position: relative;
			width: 80%;
			height: auto;
			margin: 0;
			padding: 0;
			z-index: 1;
			border-radius: 10px;
		}

</style>	
