/* CSS Styles Floetenunterricht */

body
{ background: #f4f3f1;
  font-size: 12px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #333333; }
  
img
{ border: none; }

a
{ text-decoration: none;
  color: #960202; }
  
a:hover
{ text-decoration: underline; }  

#wrap
{ max-width: 860px; 
  margin: 20px auto;
  overflow: hidden; }
  
#header
{ max-width: 850px; 
  /*height: 170px; */
  background: url('img/header.png') no-repeat;
  padding: 0px 5px; }
  
#main
{ max-width: 850px;
  background: url('img/wrap.png') repeat-y;
  padding: 0px 5px;
  overflow: hidden; }
  
#linkeSpalte
{ width: 200px;
  float: left;
  display: inline;
  margin: 35px 40px 0px 20px; }
  
#linkeSpalte ul
{ margin: 0px;
  padding: 0px;
  list-style: none;
  border-top: 1px solid #960202; }
  
#linkeSpalte ul li
{ border-bottom: 1px solid #960202;
  padding: 3px 5px; }
  
#linkeSpalte ul li a
{ color: #333333; }

#linkeSpalte ul li a:hover
{ color: #000000;
  text-decoration: none;
  font-weight: bold; }

#linkeSpalte ul li.active
{ color: #000000;
font-weight: bold; }  

#content
{ width: 560px;
  min-height: 500px; 
  height: auto !important; 
  height: 500px;
  float: left;
  display: inline;
  margin: 0 30px 20px 0;
  line-height: 18px; }
  
h1
{ font-size: 18px;
  margin: 0 0 13px 0;
  font-weight: normal;
  line-height: 22px; }
  
h2
{ font-size: 14px;
  margin: 5px 0 10px 0;
  line-height: 18px; }
  
ul
{ margin: 0 0 20px 0;
  padding: 0 0 0 18px;
  list-style-image: url('img/li.png'); }
  
ul li
{ padding: 0 0 5px 0; }

.imagebox
{ margin: 0 0 5px 0; }

.galerieliste
{ margin: 0px; }

.galerieliste ul
{ margin: 0 0 20px 0;
  padding: 0px;
  list-style: none; }
  
.galerieliste ul li
{ padding: 0 5px 5px 0;
  float: left; }
  
.galerieliste ul li.last
{ padding: 0 0px 5px 0;
  float: left; }
  
.galerieliste ul li.final
{ padding: 0 5px 5px 170px;
  float: left; }
  
img.big
{ clear: left;
  margin: 0 0 10px 0; }

img.left
{ float: left;
  margin: 0 10px 2px 0; }  

.klein
{ font-size: 10px; }
  
#footer
{ width: 850px;
  height: 95px;
  background: url('img/footer.png') no-repeat;
  padding: 0px 5px 5px 5px;
  text-align: center;
  font-size: 10px;
  color: #666666; }
  
#footer a
{ color: #666666; }

.infobox {
    border: 1px solid #960202;
    padding: 12px;
    margin: 0px 0px 20px 0px;
    background: #f4f3f1;
 
}

@media (max-width:900px)  {
	
	body {
		margin:0;
	}
	
	img {
		max-width: 100%;
    height: auto;
	}
	
	#wrap {

 max-width: 620px;
		margin-left:auto;
		margin-right:auto;
		-webkit-box-shadow: 0px 5px 13px 0px rgba(102,102,102,0.5); 
box-shadow: 0px 5px 13px 0px rgba(102,102,102,0.5); 
		
	}
	
	#header, #main, #footer {
		background:none;
		padding:0;
		background-color:#fff;
		
	}
	

	#main {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		    -ms-flex-direction:column;
		        flex-direction:column;
	}
	
	#linkeSpalte {
		-webkit-box-ordinal-group:4;
		    -ms-flex-order:3;
		        order:3;
      width: 560px;
    float: none;
    display: block;
		margin:0 auto 40px;
}
	#linkeSpalte ul {
	background: #f4f3f1;
		}
	
	#linkeSpalte ul li {
			line-height:24px;
		text-align:center;
	}
	
	#linkeSpalte ul li a {
   display:block;
	
}
	
	#content {
    width: auto;
		max-width:560px;
    min-height: 0;
    height: auto !important;

    float: none;
    display: block;
    margin: 30px auto;
  
}
	
	#footer {
    width: auto;
	


}
	
	 .home h1, .home h2 {
		text-align:center;
	}
	
	
	
	h2 {
		margin-top:20px;
	}
	
	
	

}

@media (max-width:620px)  {
	
	#wrap {
    max-width: none;
		width:100%;
    -webkit-box-shadow: none;
    box-shadow:none;
		margin:0;
}
	
	#header {
		padding:0;
		width:100%;
	}
	
	#main, #footer {
 
    padding-left:20px;
		padding-right:20px;
		width:calc(100% - 40px);

}
	
	#linkeSpalte {
		width:100%;
	}
		.reset_mobile {
		float:none!important;
		width:auto!important;
			margin-bottom:30px;
	}
	
		img {
		max-width: 100%;
    height: auto;
		display:block;
		   float: none;

	}
		#main img {
		margin: 0 auto 10px;
	}
	
		#header img {
			margin-right:10px;
			width:calc(100% - 10px);
		margin-bottom:3px;
	}
	
	#main	img.left {
    float: none;
    margin: 20px auto 10px;
}
	#main img.big {
    clear: none;
     margin: 0 auto 20px;
}
	
	.galerieliste ul li.last, .galerieliste ul li, .galerieliste ul li.final {
		    padding: 0 0 0 0;
    float: none;
		display:inline-block;
		width:calc(20% - 4px);
	}
	
	#main .galerieliste ul li img {
		margin-bottom:2px;
	}
		

	
}