@charset "UTF-8";
/* steffens mediadesign 2016 */

html { -webkit-text-size-adjust: 100%; }

body { background-color:#ddd; font-family:Arial,Helvetica,sans-serif; line-height:150%; }

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

.klar { width:100%;
		font-size:0.1em;
		clear:both;
		}

.mobil { display:none; }
.desktop { display:block; }



#seite_start { max-width:1000px;
		       margin-left:auto;
		       margin-right:auto;
		       background-color:#ffcc00;
		      }

#seite { max-width:1000px;
		 margin-left:auto;
		 margin-right:auto;
		 background-color: #F9E6C0;
		  }

#kopf { width:100%;
		height:120px;
		background-color:#fff;
		}

#logo { position:relative;
		max-width:410px;
		left:5px;
		top:5px;
		float:left;
		}
		
#logo img { border:0; }





#aeskulap { position:relative;
			max-width:84px;
		    right:10px;
		    top:5px;
			float:right;
			}
			
#hnav	{ width:100%; 
		  min-height:45px;
		  margin-top:0px;
		  }

#hnav ul { list-style:none;
		   padding:10px;
		   margin:0;
		   background-color:#faa61a;
		   }

#hnav ul li { display:inline;
			  padding:10px;
			  border-right:1px #FFF solid;
			  min-height:50px; }

#hnav a { margin:10px 0;
		  font-family:"Cumbria","Calibri",Arial,Helvetica, sans-serif;
		  font-weight:bold;
		  color:#333;
		  font-size:1.2em;
			  }


#hnav a.currentpage { color:#ddd; }

#hnav a:hover { color:#842500; }

#mobilnav { display:none; }



/* Inhalt */
#inhalt { width:100%; }

#spalte_links_start { position:relative;
				      float:left;
				      width:96%;
				      min-height:300px;
					  padding:2%; 
				      background:url(../img/familie-2020.gif) no-repeat center right;
					  }

#spalte_links_weih { position:relative;
					 float:left;
					 width:96%;
					 min-height:300px;
					 padding:2%; 
				     background-color:#F00;
					 /*background:url(../img/familie-2020.gif) no-repeat center right;*/
					}


#spalte_links_start p {	color:#333;
						font-size:1em;
						background-color:#FFE890;
						border:solid 1px #666;
						padding:10px;
						width:540px;
						margin-left:20px;
						
	   					-webkit-border-radius:5px;
	   					-moz-border-radius:5px;
	   					-khtml-border-radius:5px;
	   					border-radius:5px;
						
						box-shadow: 2px 2px 5px #666;
	   					-webkit-box-shadow: 2px 2px 5px #666;
	   					-moz-box-shadow: 2px 2px 5px #666;
						}


#spalte_links_start p a { font-weight: bold;}








#spalte_links { position:relative;
				float:left;
				/*width:560px;
				padding:20px;*/ 
				width:58%;
				padding:1%;/**/ 
				background-color: #F9F0DE;
				}

#spalte_links img { margin-right:5px;
					border: 1px solid #666;
					 }


/* Album */

#spalte_links_album { position:relative;
				float:left;
				/*width:560px;
				padding:20px;*/ 
				width:98%;
				padding:1%;
				background-color: #F9F0DE;
				}

#spalte_links_album img { margin-right:5px;
			  border: 1px solid #333;
			  max-width: 800px;
                          height: auto;
                         }





#spalte_rechts { position:relative;
				 float:right;
				 width:40%;
					 }

#spalte_rechts p { padding:10px; 
				   font-size:0.9em;
				   line-height:120%;
				    }



#spalte_rechts img { border: 1px solid #666; 
					 max-width: 300px;
					 height: auto;
					 }







#fuss { width:100%;
		background-color:#ccc;
		}

#fuss ul { list-style:none;
		   padding:10px;
		   margin:0;
		   }

#fuss ul li { display:inline;
			  padding:10px;
			  min-height:30px;
			  }

#fuss ul li a { font-family:"Cumbria","Calibri",Arial,Helvetica, sans-serif;
		  		font-weight:bold;
		  		color:#333;
		  		font-size:1em;
				}

#fuss ul li a:hover { color:#842500;}



/************ tablet **************
@media screen and  (max-width:1023px)	 {


	#spalte_links { position:relative;
				    float:none;
				    width:98%;
				    padding:1%; 
				   }	
	
	#spalte_rechts { float:left;
					 width:98%;
				     padding:1%; 
					 }		
	}
	
	
	*/
	
	
/************ mobil ***************/
@media screen and  (max-width:700px)	 {
	
	/******* Inhalt *********/
	
	body { background-color:#fff; margin:0; }	
	
	.mobil { display:block; }
	.desktop { display:none; }
	
	/*#hnav a.menuactive { color:#842500; }*/
	
	
	#kopf img { width:100%;
	  			height:auto;
	  			}
	
	
	#logo { position:relative;
			max-width:410px;
			left:0px;
			top:10px;
			float:left;
			}	
	
	#aeskulap { display:none; }
	
	#hnav	{ display: block;
			  position:fixed;
			  right:-160px;
			  top:85px;
			  width: 200px;
			  height: auto;
			  z-index:200;
			  padding:0;
			  
					   
			 text-align:left;
								 
			 transition-property:right;
			 transition-duration:0.5s;
			 
			 -webkit-transition-property:right;
			 -webkit-transition-duration:0.5s;
			 
			 -o-transition-property:right;
			 -o-transition-duration:0.5s;
			 
			 -ms-transition-property:right;
			 -ms-transition-duration:0.5s;			
			}		
	
	#hnav a.currentpage { color:#333; }
	
	
	
	
	#hnav ul { margin-left:40px;
			   margin-top:-5px;
			   padding:0;
			   background: rgba(255,255,255,0.8);
			   }
	
	#hnav ul li { display:block;
				  padding:10px;
				  border-bottom:1px #FFF solid;
				  min-height:30px; }
	
	
	#mobilnav { display:block;
				width: 30px;
				height:21px;
				background-image:url(../img/men-icon.gif);
				background-position: -30px 0;
				transition: background-position 0.5s;
				float:left;
				margin:5px;
				  }	
	
	
	
	
	#spalte_links_start { position:relative;
						  float:left;
						  width:96%;
						  min-height:300px;
						  padding:1%; 
						  background:url(../img/trans.gif) no-repeat center right;
						  }	
	
	#spalte_links_start p {	color:#333;
							font-size:1em;
							background-color:#FFE890;
							border:solid 1px #666;
							padding:2%;
							width:96%;
							margin-left:0;
							}	
	
	#spalte_links { position:relative;
				    float:none;
				    width:98%;
				    padding:1%; 
				   }	
	
	
	#spalte_links_album img { margin-right:5px;
			  border: 1px solid #333;
			  width: 98%;
                          height: auto;
                         }





         #spalte_rechts { float:left;
					 width:98%;
				     padding:1%; 
					 }			
	
	
	
	
	
	#spalte_rechts p { padding:5px; 
					   font-size:1em;
					   line-height:120%;
						}	
	
					 
					 
	/******* Fuss *********/	
	#fuss ul { list-style:none;
			   padding:10px;
			   margin:0;
			   text-align:center;
			   }
	
	#fuss ul li { display:block;
				  padding:10px;
				  min-height:30px;
				  border-bottom: 1px solid #aaa; 
				  }					 
					 
			}