/*
Theme CSS Bäcker Webseiten

Design Urs Stettler
V2.0

*/

/* Webfont Ballantines */
@import url("//hello.myfonts.net/count/28608e");
  
@font-face {font-family: 'BallantinesSerial-Bold';src: url('webfonts/28608E_0_0.eot');src: url('webfonts/28608E_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/28608E_0_0.woff') format('woff'),url('webfonts/28608E_0_0.ttf') format('truetype');}



/* Als Erstes eingie CSS Resets */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font: inherit;
    	vertical-align: top;
    	outline: 0;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }

    body {
    	line-height: 1;
         
        font-weight: normal;
        font-style: normal;
        
        font-family: Verdana, Sans-Serif;
        font-size: 0.8em;
        line-height: 1.4em;
        
    }
    
    html, body {
        height: 100%;
        width: 100%;
    }
    body {
        min-height: 100%;
        height: auto;
        
    }
    
    
        body.braun, body.braun header {
            background: url(images/verlauf-braun-2013.jpg) #562f08 repeat-x;
        }
        body.rot, body.red header {
            background: #641d0d  url(images/verlauf-rot-2013.jpg) repeat-x;
        }
        body.blau, body.blau header {
            background: #0a3d76  url(images/verlauf-blau-2013.jpg) repeat-x;
        }
            body.fullBgPage {
                background: transparent;
            }
            body.fullBgPage header {
                background: none;
            }
            
            
    
    body a, body {
        color: #000;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    .clear {float: none; clear: both;}
    
    
    a {
        transition: background-color .2s ease, color .2s ease, opacity .2s ease;
        -webkit-transition: background-color .2s ease, color .2s ease, opacity .2s ease;
        -moz-transition: background-color .2s ease, color .2s ease, opacity .2s ease;
    }
    
    
    .alignright {
	    float: right;
	    margin-left: 5px;
    }
    .alignleft {
	    float: left;
	    margin-right: 5px;
    }
  
    
    
	/* Grosses Hintergrundbild */
		img.bg {
		  min-height: 100%;
		  min-width: 1350px;
			
		  /* Set up proportionate scaling */
		  width: 100%;
		  height: auto;
			
		  /* Set up positioning */
		  position: fixed;
		  top: 0;
		  left: 0;
		  
		  z-index: -10;
		}
		
		@media screen and (max-width: 1350px) { /* Specific to this particular image */
		  img.bg {
		    left: 50%;
		    margin-left: -675px;   /* 50% */
		  }
		}
		
		


/* Allgemeine Block Styles */
    
    .mainWrapper, .mainWrapper2 {
    	height: 100%;
    }
    
    .pagewrapper {
        min-width: 100%;
        height: 100%;
    }
    
    .middler {
        width:960px;
        margin: 0px auto;
    }
    
    

/* Header */    

header {
	background: #fff;
	overflow: hidden;
	
	padding-bottom: 20px;
}


/* Header Navigation */
    .mainNavigation {
	 	background: #fff;
	 	height: 30px;
	 	
	 	box-shadow: 0 0 15px rgba(0,0,0,.4);
	 	
	 	padding: 5px 0 5px 0; 
    }
    	
    	/* Allgemein & 1te Stufe */
    	.mainNavigation ul li {
	    	float: left;
	    	border-left: 1px solid #dbdbdb;
	    	
	    	position: relative;
	    
    	}
    	
    	.mainNavigation ul li a,
    	.mainNavigation ul li span {
	    	text-decoration: none;
	    	font-size: 1.4em;
	    	
	    	line-height: 30px;
	    	padding: 0 50px 0 10px;
    	}
    		.mainNavigation ul li span {
	    		cursor: default;
    		}
    		
    		.mainNavigation ul li.current_page_item > a,
    		.mainNavigation ul li.current_page_parent > a,
    		.mainNavigation ul li.current_page_item > span,
    		.mainNavigation ul li.current_page_parent > span {
	    		font-weight: bold;
    		}
    	
    	/* 2te Stufe / Dropdown */
    		
    		/* Dropdown */
			.mainNavigation ul ul {
				display: none;
			}
				.mainNavigation ul li:hover ul {
				display: block;
			}
			
			
    	
    	
    	.mainNavigation ul ul {
	    	position: absolute;
	    	top: 30px;
	    	left: 0px;
	    	
	    	min-width: 200px;
	    	
	    	background: #fff;
    	}
    		.mainNavigation ul ul li {
	    		float: none;
	    		border: 0px;
    		}
	    		.mainNavigation ul ul li a {
		    		font-size: 1.2em;
		    		color: #666666;
		    		
		    		padding: 5px 10px 5px 10px;
		    		line-height: normal;
		    		
		    		display: block;
		    		
		    		width: auto;
	    		}
	    		
	    		.mainNavigation ul ul li:hover a,
	    		.mainNavigation ul ul li.current_page_item a {
		    		background: #ececec;
		    		font-weight: normal;
		    		color: #000;
	    		}
	    		


/* Main Content */	 

.contentbox {
	background: #fff;
	background: rgba(255,255,255,.85);
	
	border-radius: 4px;
}
	.contentbox .w1 {
		padding: 25px;
	}


.maincontent {
	margin-top: 30px;
	margin-bottom: 50px;
	overflow: hidden;
}

   		
	.maintext {
		float: left;
		width: 65%;
		margin-right: 5%;
	}
		.maintext img {
			max-width: 100%;
			height: auto;
		}
	
	.seitenspalteRechts {
		float: left;
		width: 30%;
		
		font-size: 0.9em !important;
	}



/* Startseite */
	.home .aktuellWrapper {
		margin-top: 220px;
	}
	
		.startseitenBox {
			background: #fff;
			background: rgba(255,255,255,.8);
			
			border-radius: 4px;
			float: left;
			
			min-height: 200px;
		}
			.startseitenBox .w1 {
				padding: 20px;
			}
		
		.aktuellBox {
			width: 60%;
			margin-right: 10%;
		}
			.aktuellBox .w1 {
				margin: 15px 20px 20px 20px;
			}
		
		.home .adressBox.styled {
			width: 30%;
			font-size: 1.0em;
		}
			.home .adressBox.styled p {
				margin-bottom: 10px;
			}


/* Styled Text */

.styled {
	font-size: 1.1em;
	line-height: 1.5em;
	color: #3a3a3a;
}


.styled strong,
.styled b {
	font-weight: bold;
}
	.styled p {
		margin-bottom: 20px;
	}

	.styled h1 {
		font-size: 4.5em;
		line-height: normal;
		
		margin-bottom: 10px;
		
		font-family: 'BallantinesSerial-Bold', Arial, sans-serif;
	}
	    .styled .TitelSerifen h1 {
	        font-family: 'Domine', Arial, sans-serif;
	        font-size: 45px;
	        font-weight: bold;
	    }
	    .styled .TitelSerifenlos h1 {
	        font-family: 'Belleza', Arial, sans-serif;
	        font-size: 50px;
	    }
	
	
	.styled h2 {
		font-weight: bold;
		font-size: 1.0em;
		line-height: normal;
		
		margin-top: 20px;
	}
	

.styled td {
	padding-right: 10px;
}

.headerimage {
	margin-bottom: 20px;
}


    
    
 /* Responsivität */
 
 @media screen and (max-width: 960px) { /* Specific to this particular image */
  .middler {
	width:auto;
	padding: 0 10px 0 10px;
	}
	
	
	.maintext {
		float: left;
		width: 62%;
		margin-right: 3%;
	}
	
	.seitenspalteRechts {
		width: 35%;
	}
	
	
	/* Startseite */
			.startseitenBox .w1 {
				margin: 20px !important;
			}
		
		.aktuellBox {
			width: 60%;
			margin-right: 2%;
		}
		.home .adressBox.styled {
			width: 38%;
			font-size: normal;
		}
	
}



 @media screen and (max-width: 750px) { 
  .middler {
	width:auto;
	padding: 0 10px 0 10px;
	}
	
	
	.maintext,
	.seitenspalteRechts {
		width: 100%;
		float: none;
		margin-bottom: 10px;
		
		font-size: 1.0em !important; 
	}
	
	
	.alignright {
		float: none;
		margin: 5px 0 5px 0;
	}

	
	            /* mobile Navigation */
                
                header {
	                position: relative;
                }
                
                /* Trigger */
                .mobilenav {
                    display: block;
                    
                    position: absolute;
                    right: 10px;
                    bottom: 20px;
                    
                    z-index: 9999;
                    
                    width: 25px;
                    height: 25px;
                    
                    padding: 6px 6px 3px 6px;
                    
                    background: #fff;
                    
                    cursor: pointer;
                    
                    transition: .2s background linear;
                    
                    box-shadow: 1px 1px 1px #303030;
                                     
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                    
                }
                    .mobilenav:hover {
                        background: #dcdcdc;
                    }
                    .mobilenav .strike {
                        width: 100%;
                        height: 3px;
                        margin-bottom: 6px;
                        
                        background: #c51d00;
                        
                        border-radius: 4px;
                        -webkit-border-radius: 4px;
                        -moz-border-radius: 4px;
                    }
                    
                    
                    /* Navigation */
                    .mainNavigation {
						position: absolute;
						
						right: 0px;
						
						height: auto;
						
						box-shadow: none;
						
						margin: 0px;
						width: 100%;
						height: 100%;
						
						background: #fff;
						
						box-shadow: inset 5px 0px 20px #a4a4a4;
							
						}
						
					.mainNavigation ul li {
						float: none;
						border: 0px;
						
						padding: 10px;
						
					}
						.mainNavigation ul li li {
						padding: 5px;
						
					}
						
						/* Subnavi 1 */
						.mainNavigation ul ul,
						.mainNavigation ul li:hover ul {
							float: none;
							
							position: relative;
							top: 0px;
							
							background: none;
							
							margin-left: 10px;
							margin-bottom: 10px;
							
							display: none;
						}
						
						
					
					/* Mobile Nav Dropout */
					
					body {
						
					}
					
					.mainWrapper {
						width: auto;
						
						overflow: hidden;
					}
					
					.mainWrapper2 {
						width: auto;
						position: relative;
					}
					
					.mainNavigation {
						right: -75%;
						width: 75%;
						
						top: 0px;
						
						position: absolute;
					}
					
						
						.mobNavAcitve .mainWrapper {
							
						}
						
						.mobNavAcitve .mainWrapper2 {
							margin-left: -70%;
							margin-right: 70%;
						}
						
						.mobNavAcitve .mainNavigation {
							
						}
						
						.mobNavAcitve .mobilenav .strike {
							margin: 0px;
							position: absolute;
							top: 16px;
							
							width: 70%;

							
							display: none;
						}
							.mobNavAcitve .mobilenav .strike:first-child {
								display: block;
								
								-ms-transform: rotate(45deg);
								-webkit-transform: rotate(45deg);
								-moz-transform: rotate(45deg);
								transform: rotate(45deg);
								
							}
							.mobNavAcitve .mobilenav .strike:last-child {
								display: block;
								
								-ms-transform: rotate(-45deg);
								-webkit-transform: rotate(-45deg);
								-moz-transform: rotate(-45deg);
								transform: rotate(-45deg);
							}
						
						/* Animation */
						.mainNavigation,
						.mainWrapper,
						.mainWrapper2 {
							transition: .2s all;
						}
	
		
		/* Startseite */
			
		.home .aktuellWrapper {
			margin-top: 0px;
			}
			
			.startseitenBox {
				float: none;
				width: auto;
				margin-bottom: 10px;
				
				min-height: 0px;
			}
			.startseitenBox .w1 {
				padding: 20px;
				
			}
		
		.aktuellBox {
			width: auto;
			margin-right: 0px;
		}
		.home .adressBox.styled {
			width: auto;
			font-size: normal;
		}
			.home .adressBox.styled table {
				width: auto !important;
			}

}


 @media screen and (max-height: 700px) {
	 .home .aktuellWrapper {
		margin-top: 10px;
	}
 }