/* Breakpoints: 320,480,768 */ 

/* CSS RESET */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
} 

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

nav ul, nav li { margin: 0; } 
nav ul { list-style:none; }
ul {
	margin-left: 5%;
    line-height: 1.5em; /* 21 / 14 */
}


  /* LAYOUT */

.span1, .span2, .span3, .span4, .span5{
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.col{
  margin-left: 1.5%;
}

.col:first-child {
  margin-left: 0;
}

.span2{
  width: 20.0%;
  
}
.span3{
  width: 65.0%;
  
}
.span4{
  width: 79.7%;
  
}
.span5{
  width: 100%;
  margin-left: 0;
}
.highlight{
  background: #C81E1E
}

  /* HTML-SELEKTOREN */

body{ 
  font-size: 75%;
  color: #1E2D5C; 
  font-family: Verdana, Helvetica, Arial, sans-serif; 
  line-height: 1.0em;
  background: #E67717;  
}

  /* color: RGB 30 / 45 / 92: #1E2D5C */
  /* visited color: RGB 80 / 128 / 176: #5080B0 */
  /* Gästehaus Sanders background-color: RGB 230 / 119 / 23: #E67717 */
  /* highlight background: #FFFF40 */

h1{
    font-size: 1.7em; /* 24 / 14 */
    line-height: 1.5em; /* 21 / 14 */
	text-align: center;
}

h2{
  font-size: 1.5em; /* 21 / 14 */
  line-height: 1.5em; /* 21 / 14 */
  text-align: center;
  margin: 0 0 0.5em 0;
}

h3{
  font-size: 1.2em; /* 21 / 14 */
  line-height: 1.2em; /* 21 / 14 */
  text-align: center;
  margin: 0 0 0.5em 0;
}

p{
    font-size: 1em; /* 14 / 14 */
    line-height: 1.5em; /* 21 / 14 */
    margin-bottom: 1.5em; /* 21 / 14 */
	text-align: center;
}

a{
	color: #1E2D5C;
}

a.belegzeiten{
	font-size: 1.2em; /* 21 / 14 */
}

#container{
	clear: both;
	padding-top: 20px;
}

#container, .inner{
	margin: 0 auto;
	color: #1E2D5C;
}

header{
	background: #FFFFFF;

}

header h1{
	 text-align: center;
}

article{
	background: #FFFFFF;
	padding: 4px;
}

aside{
	background: #FFFF40;
	padding: 4px;
}

footer{
	clear: both;
	position: relative;
	padding: 10px;
	vertical-align: middle;
	background: #FFFFFF;
}

/* PSEUDOKLASSEN */

.event{
	display: none;
}

.headerpic{
	float: left;
}

.headerlogo{
	float: right;
}

.smallfont{
	font-size: 0.9em;
}

.centric{
	text-align: center;
}

.alignimpressum{
	float: left;
}


/* Formular */
input{
	width: 3em;
	text-align: center;
}


/* Generiert ein Trennelement in Hintergrundfarbe zwischen Elementen */
#delimitor{
	clear: both;
	height: 3px;
	background: #E67717; 
}


/* NAVIGATION */

nav{
  margin: 7px 0 7px 0;
}

nav ul{
  text-align: left;
  overflow: auto;
  width: 100%;
}

nav ul li{
  margin: 0 0 0 0;
  text-align: left;
  overflow: auto;
}

nav a{
  text-decoration: none;
  margin: 0;
  display: block;
  padding: 7px 0px 7px 2%;
  margin: 0 0 0 2%;
  text-align: center;
}

nav p{
  margin: 0;
  line-height: 1.5em;
}

/* Hintergrund für selektiertes Nav-Element */
.selectnav{
	color: #5080B0;
}

/* large und small zeigen unterschiedliche Inhalte bei den Nav-Elementen an, 
   wenn die Text-Länge des Textes im Nav-Element zu groß ist. */
.large {
	display: block;
 }
.small {
	display: none;
 }

 
 /* GALLERY */
 
 .gallery1 {
	text-align: center;
 }
 
.gallery2, .gallery3 , .gallery4 {
	width: 100%;
	margin: auto;
	text-align: center;
}

.gallery2 a:hover, .gallery3 a:hover, .gallery4 a:hover {
	z-index: 2;
}

.gallery2 a:hover img, .gallery3 a:hover img, .gallery4 a:hover  img{
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
	border: 2px solid #1E2D5C;
	z-index: 1;
}

.gallery2 img, .gallery3 img, .gallery4 img{
	max-width: 117px;
	max-height: 117px;
	margin: 2px 0 0 0;
	vertical-align: middle;
}

 
 /* TABELLEN */

.rt { 
	width: 100%;
	font-size: 0.9em;
	line-height: 1.0em;
	border-collapse: collapse;
	border-spacing: 0; 
}

.rt th, .rt td {
	margin: 0;
	padding: 0.2em;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #1E2D5C;
	background: #ffffff;
}

.rt th { 
	text-align: center;
	background: #E67717; 
	border-bottom: 0; 
}


/* MEDIA QUERIES */

@media screen and (max-width: 768px){

nav a{
	padding: 7px 0 7px 2,5%;
 }

nav ul li{
	width: 20%;
	text-align: center;
	margin: 0 0,5% 3px 0;
	float: left;
}

nav .span2{
	width: 100%;
}

.span1{
	width: 100%;
	margin-left: 0;
}

.span2, aside{
	width: 18%;
	margin-left: 2%;
}

.span3, article{
	width: 80%;
}

#container, .inner{
	width: 100%; 
	padding: 0;
}
}


@media screen and (max-width: 480px){
  
.span2, aside{
    width: 100%;
    /* margin-left: 0; */
	margin: 5px 0;
  }

.span3, article{
    width: 100%;
  }
  
.large {
	display: none;
 }
 
.small {
	display: block;
 }
 
.event{
	position: absolute; top: 50px; right: 0px; width:50px; height:20px;
	text-align: center;
	/* border: 1px 0px 1px 1px solid #1E2D5C; */
	border-width: 2px 0px 2px 2px;
	border-style: solid;
	border-color: #1E2D5C;
	padding: 5px;
	z-index:1; background-color:#FFFF40;
	float: right;
	display: inline-block;
}

.event a{
	text-decoration: none;
	line-height: 20px;
}


 
 /* Zentrieren von gezoomten Bildern, damit sie nicht über den Rand hinausgehen */

.gallery3 a:hover img.img1 {
	position: relative;
	left: 20px;	
}

.gallery3 a:hover img.img3 {
	position: relative;
	right: 20px;
}
 
  }

  
/* Custom Breakpoints */

@media screen and (max-width: 320px) {
 
#broadtable.rt { 
	font-size: 0.75em;
 }
 
.largeimg{
	overflow: hidden;
 }
 
.gallery1 div a img {
 	border: 1px solid red;
}
 
  /* Zentrieren von gezoomten Bildern, damit sie nicht über den Rand hinausgehen */
.gallery2 a:hover img.img1, .gallery3 a:hover img.img1, .gallery4 a:hover  img.img1, .gallery4 a:hover  img.img2 {
	position: relative;
	left: 35px;	
}

.gallery2 a:hover img.img2, .gallery3 a:hover img.img2,.gallery2 a:hover img.img2, .gallery2 a:hover img.img4 {
	position: relative;
	right: 35px;
}
  
 }


	/* MICRO CLEARFIX */

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}