/**
* 1. Avoid the IE 10-11 `min-height` bug.
* 2. Set `flex-shrink` to `0` to prevent Chrome, Opera, and Safari from
* letting these items shrink to smaller than their content's default
* minimum size.
* 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
*/

*, *::before, *::after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */

html {
	 margin: 0 auto;
     max-width: 1280px;
	 }

body 	{
		box-shadow: 7px 7px 7px #888, -4px -4px 7px #888;
		}
	
.grail-layout {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 100%; /* 1, 3 */
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	}
	
.page-wrapper {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex: 1 0 auto;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto; /* 2 */
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	/* padding: 1.5em; */
	}
	
header {
	display: block;
	margin-bottom: 1.5em;
	}
	
article {
	margin: 0;
	padding: 0 1.25em 0 1.25em;
	/* overflow: hidden; */
	}
	
p 	{
	margin: 1.25em 0 1.25em 0;
	}
	
article ul {
			margin: 1.25em 0 1.25em 1.25em;
			}
	
table	{
		width: 100%;
		margin: 1.5em 0 1.5em 0;
		}
		
 /* tr td:nth-child(2) 	{ */
						 /* white-space:; /*  Der Veranstaltungsort wird nicht umbrochen */
						 /* } */
						
th    	{
		max-width: 100%;
		padding: 0.3em 0.6em;
    	text-align: left;
  		/*  white-space:; */
  		/*  overflow: hidden; */
  		/*  text-overflow: ellipsis; */
		}
		
td	    {
		max-width: 100%;
		padding: 0.3em 0.6em;
  		/*  white-space:; */
  		/*  overflow: hidden; */
  		/*  text-overflow: ellipsis; */
		}
				
.intern th 	{
			padding: 0.3em 0 0.3em 0.6em;
    		text-align: left;
			}
		
.intern td {
	padding: 0.3em 0 0.3em 0.6em;
	}


.grid10	{
		width: 10%;
		}
		
.grid20	{
		width: 20%;
		}
		
.grid30	{
		width: 30%;
		}
		
.grid50	{
		width: 50%;
		}


address {
		margin: 1.5em 0 1.5em 0;
		}
		
footer address {
		margin: 0;
		}

nav 	{
	/* border-radius: 3px; */
	/* background: rgba(147, 128, 108, 0.1); */
	}

aside 	{
	padding: 1.25em; /* padding rund herum */
	}
	
footer 	{
	-webkit-flex: none;
	-ms-flex: none;
	flex: none; /* 2 */
	padding: 1.25em;
	}
	
small   {
		display: block;
		}
		
img	{
	width: 100%;
	height: auto;
	box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.6);
    }

.flags img {
	margin: 10px 0 6px 3px;
	width: 48px;
	height: auto;
	box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.6);
	}	
	
.einzug {
	padding-left: 0.8em;
	}
	
.anzeige {
	padding: 1.25em 0;
	}
	
.adsbygoogle 	{
				clear: both;
				margin: 2.5em 0 2.5em 0;
				}

nav .adsbygoogle {
				margin: 0.5em 0 0 0.8em;
				}
				
#bild > .adsbygoogle 	{
				clear: both;
				margin: 0.5em 0 0 0;
				}
				
.center	{
		text-align: center;
    	}
				
.button {
		text-align: center;
		margin-top: 3.25em;
		margin-bottom: 3.5em;
		padding: 20px;
		text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		
		background: -webkit-linear-gradient(top,rgba(93, 63, 33, 0.3),rgba(93, 63, 33, 1)); /*Safari 5.1-6*/
  		background: -o-linear-gradient(bottom,rgba(93, 63, 33, 0.3),rgba(93, 63, 33, 1)); /*Opera 11.1-12*/
  		background: -moz-linear-gradient(bottom,rgba(93, 63, 33, 0.3),rgba(93, 63, 33, 1)); /*Fx 3.6-15*/
  		background: -ms-linear-gradient(bottom,rgba(93, 63, 33, 0.3),rgba(93, 63, 33, 1)); /*Fx 3.6-15*/
  		background: linear-gradient(to bottom, rgba(93, 63, 33, 0.3), rgba(93, 63, 33, 1)); /*Standard*/
  		background-size: min-width: 25%;
		
		-webkit-box-shadow: 3px 4px 8px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    3px 4px 8px rgba(50, 50, 50, 0.75);
		box-shadow:         3px 4px 8px rgba(50, 50, 50, 0.75);
    	}
					
.clear {
	clear: both;
	}

#bild {
	  width: 100%;
	  height: auto;
	  margin: 0;
	  padding: 0;
	  display: block;
	  text-align: center;
	  background-color: #CCCCCC;
	  box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.6);
	  overflow: hidden;
      }
      
figure img {
	   width: 100%;
	   height: auto;
       }
	  
.shadowfloat {
	  display: block;
	  box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.6);
      }

figcaption {
	margin: 0.25em 0 0.125em 0;
	padding: 0 0.5em 0.5em 0.5em;
	overflow: hidden;	
	}

p img {
	float: left;
	margin-right: 0.625em;
	margin-bottom: 0.375em;
	position: relative;
	top: 3px;
	right: 2px;
	}
	
/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */	

header h1 {
	text-align: center;
	}

h1 {
	margin: 1em 0 0.5em 0;
	padding: 0;
	}
	
h2 {
	padding: 0;
	margin-top: 1em; /*  was 1.25em; */
	margin-bottom: 0.25em; /*  was -0.875em; */
	}

header h2 {
	padding: 0;
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	}

article ul, article ol, article ul li ul {
	padding: 0 0 0.625em 0.625em;
	margin: 0 0 0.625em 0.625em;
	}

	
/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
	
nav ul {
	margin: 0;
	padding: 0 0 0 0; /*  was 0 0 2.5em 0; */
	}	

nav ul > li {
	margin-left: 0; /*  ensures complete fill of hover-color */
	padding: 0;
	background-image: url("bullets/bullet.gif");
	background-size: 234px auto;
	background-position: left top; 
	background-repeat: no-repeat;
	text-shadow: 3px 4px 8px #000;
	line-height: 1.75em; /*  was 2.5em; */
	display: block;
	}
	
nav ul > li > a {
	padding: 17px 0.8em 17px 0.8em;
	display: block;
	}
	
nav a:hover, nav a:active, nav ul li em {
    background-image: url("bullets/bullet-an.gif");
	background-size: 234px auto;
	background-position: left top;
	background-repeat: no-repeat;
	}

nav ul > li > em {
    padding: 0.2em 0.4em;
    display: block;
	}
	
.an {
    background-image: url("bullets/bullet-an.gif");
	background-size: 234px auto;
	background-position: left top;
	background-repeat: no-repeat;
	}

.blink {
    background-image: url("bullets/bullet-blink.gif");
	background-size: 234px auto;
	background-position: left top;
	background-repeat: no-repeat;
	}
	
nav ul a:link {
	text-decoration: none;
	}
	
/* ----------------------------------------------------------------------------- *
 *                          Styles fŸr schmale Viewports                         *
 *                         bis 608px / 16px/em = 38em                            *
 * ----------------------------------------------------------------------------- */

/* @media only all and (max-width: 22em) { */
@media (max-width: 38em) {

thead	{
		display: none;
		}
		
tr 	{
	overflow: auto;
	clear: both;
	}	
		
td:before	{
			content: attr(data-header);
			font-weight: bold;
			}

td 	{
	width: 100%;
	display: block;
	float: left;
	white-space: wrap;
	}	

}

/* ----------------------------------------------------------------------------- *
 *                          Styles fŸr breitere Viewports                        *
 *                          608px / 16px/em = 38em                               *
 * ----------------------------------------------------------------------------- */
 
 /* @media only all and (min-width: 48em) { */
@media (min-width: 37em) {

#bild {
	  width: 300px;
	  height: auto;
	  float: left;
	  margin-right: 1.25em;
	  margin-bottom: 1.5em;
	  position: relative;
	  top: 0.375em;
	  right: 0;
      }
	  
.shadowfloat {
	  width: 300px;
	  height: auto;
	  float: left;
	  margin-right: 1.25em;
	  margin-bottom: 1.5em;
	  position: relative;
	  top: 0.375em;
	  right: 0;
      }    	  
 }
 
/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          768px / 16px/em = 48em                               *
 * ----------------------------------------------------------------------------- */
	
/* @media only all and (min-width: 48em) { */
@media (min-width: 48em) {

.page-wrapper {
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	}
	
	/* main, flex-item von page-wrapper (order 2) UND flex-container mit 2 flex-items article (1) und aside (2) */
main    {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 0;
	margin: 0;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	overflow: hidden;
	}

	/* flex-item von main */
article {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin: 1.25em;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	overflow: hidden;
	}
	
	/* Navigation links anordnen */
nav 	{
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	min-width: 234px;
	max-width: 234px;
	overflow: hidden;
	}

	/* flex-item von main, unter article anordnen */
aside 	{
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	margin: 0;
	padding: 1.25em; /* padding rund herum */
	overflow: hidden;
	}
	
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          800px / 16px/em = 50em                               *
 * ----------------------------------------------------------------------------- */

@media only all and (min-width: 50em) {

body    {
    font-size: 1em; /* 16px */
	}
	
}

/* ----------------------------------------------------------------------------- *
 *                          Styles der Tabletversion                            *
 *                          896px / 16px/em = 56em                               *
 * ----------------------------------------------------------------------------- */
 
 @media only all and (min-width: 56em) {
 
 }

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          980px / 16px/em = 61.25em                            *
 * ----------------------------------------------------------------------------- */

@media only all and (min-width: 61.25em) {

body	{
    	font-size: 1em;
		}
	
nav	{
    min-width: 234px;
	max-width: 234px;
	}
	
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          1024px / 16px/em = 64em                              *
 * ----------------------------------------------------------------------------- */

/* @media only all and (min-width: 64em) { */
@media (min-width: 64em) {

body    {
    font-size: 1em; /* was 0.9375em */
	}

.page-wrapper {
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	}
	
	/* main, flex-item von page-wrapper (order 2) UND flex-container mit 2 flex-items article (1) und aside (2) nebeneinander */
main    {
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 0;
	margin: 0;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	overflow: hidden;
	}
	
	/* flex-item von main */
article {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin: 0.625 em;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	overflow: hidden;
	}
	
	/* Navigation links anordnen */
nav 	{
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	min-width: 234px;
	max-width: 234px;
	overflow: hidden;
	}

	/* flex-item von main, rechts anordnen */
aside 	{
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	padding: 0; /* kein padding */
	margin: 0;
	min-width: 160px;
	max-width: 160px;
	}
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          1280px / 16px/em = 80em                           *
 * ----------------------------------------------------------------------------- */

@media only all and (min-width: 80em) {

body    {
    font-size: 1em;
	}
	
nav 	{
	min-width: 234px;
	max-width: 234px;
	}

	
aside	{
		min-width: 300px;
		max-width: 300px;
		}
	
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          1920px / 16px/em = 120em                             *
 * ----------------------------------------------------------------------------- */

@media only all and (min-width: 120em) {

	
}