/******************************************************************
Site Name: 
Author: 

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/


/*********************
IMPORTING STYLES
*********************/

/* import normalize */
@import "normalize.less";
/* import mixins */
@import "mixins.less";

/******************************************************************
BASE (MOBILE) SIZE 
This is the average viewing window. So Desktops, Laptops, and 
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
******************************************************************/

/* styles in base.less */
@import "base.less";
@import "768up.less"; 

#cookie-law {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	line-height: 20px;
	z-index: 1000000;
	text-align: center;
	padding: 10px 15px;
	background-color: #185e98;
	color: white;
}

#cookie-law p {
	margin: 0px;
}

#cookie-law .ds-link {
	font-weight: bold;
	color: white;
	text-decoration: underline;
}

#cookie-button {
	margin-bottom: 0px;
	padding-left: 16px;
	margin-left: 15px;
}

#mapContainer {
	z-index: 1;
}

.cb-container {
	margin-top: 15px;
	margin-bottom: 30px;
	padding-bottom: 30px;
	position: relative;
	padding-left: 20px;
}

.cb-container .checkbox {
	width: auto;
	margin-bottom: 0px;
	position: absolute;
	left: 0px;
	top: -3px;

}

#cookie-button:before {
	display: none;
}

.btop {
	border-top: 1px solid #c6c6c6;
}

.bbottom {
	border-bottom: 1px solid #c6c6c6;
}


body {
	font-family: @sans-serif;
}

	img {
		vertical-align: bottom;
	}
	
/* Navigation */

nav {
	float: right;
	display: inline;
	margin-right: -50px;
	ul.nav {
			margin: 0;
			padding: 0;
			
			li {
				display: block;
				float: left;
				
				a {
					display: block;
					padding: 10px;
					padding-top: 88px;
					height: 21px;
					font-size: 16px;
					text-decoration: none;
				}
				
				
			}
			
			li.current-menu-item {
				
				a {
					color:white;
					text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
					background-image: url(../../img/menu_bg.jpg);
					background-repeat: repeat-x;	
				}
			}
	}
}


/* Struktur */

.logo {
	position: absolute;
	left: -0px;
}

#inner-footer p.attribution {
	margin-left: 0px;
	font-size: 11px;
}

#inner-header {
	position: relative;
	padding-bottom: 28px;
	border-bottom: 1px solid #c6c6c6;
}

#inner-slider {
	padding-top: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid #c6c6c6;
}

#inner-footer {
	margin-top: 10px;
	padding-top: 28px;
	padding-bottom: 28px;
	border-top: 1px solid #c6c6c6;
}

/* Inhalt */

.post-content {
	
	img {
		padding-bottom: 5px;
		border-bottom: 1px solid #c6c6c6;
		margin-bottom: 15px;
	}
	
	img.alignleft {
		float: left;
		margin-right: 15px;
	}
	
	img.alignright {
		float: right;
		margin-left: 15px;
	}
	
	img.aligncenter {
		float: inherit;
		display: block;
		margin: 15px auto;
	}
}

.wp-post-image {
	margin-bottom: 15px;
}

/* Footer */

#inner-footer {
	p {
		margin-left: 40px;
	}
	
	#map-shadow {
		margin-bottom: 20px;
		border: 4px solid white;
		box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
		position: relative;
		z-index: 10000003;
	}
	
	#map {
		position: relative;
		z-index: -1;
		width: 273px;
		height: 153px;
	}
}

/* Sidebar */
	
	.sidebar {
	
		#search-2 {
			margin-top: 0px;
		}
		input , button {
			margin: 0;
			padding: 0;
			border:none;
			box-shadow: none;
			-webkit-box-shadow: none;
			background-color: transparent;
			height: 30px;
			line-height: 30px;
			.bbottom;
			.btop;

		}
		input {
			height: 28px;
			line-height: 28px;
			width: 193px;
			padding-left: 20px;
			padding-right: 50px;
		}
		input::-webkit-input-placeholder , textarea::-webkit-input-placeholder {
			font-style: italic;
		}
		input:focus , textarea:focus {
			outline: none;
		}
		textarea {
			margin: 0;
			padding: 0;
			border:none;
			box-shadow: none;
			-webkit-box-shadow: none;
			background-color: transparent;
			padding-top: 10px;
			padding-bottom: 60px;
			width: 223px;
			padding-left: 20px;
			padding-right: 20px;
			height: 90px;
			resize: none;
			.bbottom;
			.btop;
		}
	}
	
	/* Search */
	
	.widget_search {
		#searchform {
			position: relative;
		}
		button {
			position: absolute;
			right: 0px;
			top: 0px;
			width: 39px;
			-webkit-transition: all 0.3s;
		}
		button:hover {
			opacity: 0.4;
		}
	}
	
	/* Kontakt */
	
	.contact-widget {
		position: relative;
		input {
			margin-bottom: 15px;
		}
		button {
			position: absolute;
			bottom: 0px;
			right: 10px;
			background-color: #c6c6c6;
			color: darken(#c6c6c6, 20%);
			z-index: 100;
			padding: 10px 20px;
			height: auto;
			line-height: 15px;
			font-size: 15px;
			border-radius: 4px 0px 0px 0px;
			-webkit-transition: all 0.3s;
			border-top:none;
		}
		button:hover {
			background-color: lighten(#c6c6c6, 10%);
			color: darken(#c6c6c6, 40%);
		}
	}

/* Homepage */

.innerTeaser {

	p {
		font-weight: bold;	
	}
	
}

.teaser , #inner-footer , .sidebar {
	
	h2 {
		
		height: 24px;
		line-height: 24px;
		text-transform: uppercase;
		font-weight: 200;
		font-size: 18px;
		margin-bottom: 20px;
		margin-top: 0px;
		
		.icon {
			height: 24px;
			line-height: 24px;
			
			img {
				margin-right: 12px;
			}
		}
	}
}










 
/******************************************************************
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with 
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
******************************************************************/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
	
	/* styles in 2x.less */
	@import "2x.less"; 

} /* end of media query */

/******************************************************************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
******************************************************************/
@media print { 
	* { 
		background: transparent !important; 
		color: black !important; 
		text-shadow: none !important; 
		filter:none !important; 
		-ms-filter: none !important; 
	} 
	
	a, a:visited { 
		color: #444 !important; 
		text-decoration: underline; 
		
		/* show links on printed pages */ 
		&:after { 
			content: " (" attr(href) ")"; 
		}
		
		/* show title too */
		abbr[title]:after { 
			content: " (" attr(title) ")"; 
		}
	} 
	
	.ir a:after, 
	a[href^="javascript:"]:after, 
	a[href^="#"]:after { 
		content: ""; 
	} 
	
	pre, blockquote { 
		border: 1px solid #999; 
		page-break-inside: avoid; 
	} 
	
	thead { 
		display: table-header-group; 
	} 
	
	tr, img { 
		page-break-inside: avoid; 
	} 
	
	img { 
		max-width: 100% !important; 
	}
    
    @page { 
    	margin: 0.5cm;
    } 
    
    p, h2, h3 { 
    	orphans: 3; 
    	widows: 3; 
    } 
    
    h2, 
    h3 { 
    	page-break-after: avoid; 
    }
    
    /* hide content people who print don't need to see */
    .sidebar,
    .page-navigation, 
    .wp-prev-next,
    .respond-form,
    nav {
    	display: none;
    }
}