@CHARSET "UTF-8";

/* Fonts */

@font-face {
    font-family: 'AllerLightRegular';
    src: url('../fonts/aller_lt-webfont.eot');
    src: url('../fonts/aller_lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aller_lt-webfont.woff') format('woff'),
         url('../fonts/aller_lt-webfont.ttf') format('truetype'),
         url('../fonts/aller_lt-webfont.svg#AllerLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*****************************************************************
 * Positioning Elements
 *****************************************************************/


html, body {
	height: 100%;
}

/*
body {
	background: #fff;
	background-image: -moz-linear-gradient(#f4f4f4, #ffffff);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f4f4f4));
	background-image: -webkit-linear-gradient(#f4f4f4, #ffffff); 
	background-image: -o-linear-gradient(#f4f4f4, #ffffff);
}
*/

/*****************************************************************
 * Heading
 *****************************************************************/

div#header h1 {
	position: absolute; 
	left: -9999px;
}

div#header header {
	background: url(../images/bg_header.png) no-repeat left top transparent;
	height: 212px;
	position: relative;
}

div#header header div#branding {
	position: absolute;
	top: 60px;
	left: 20px;
	width: 565px;
	height: 126px;
}

/*****************************************************************
 * Content
 *****************************************************************/


div#content {
	position: relative;
	margin-top: 40px !important;
	min-height: 600px;
}

div#container_bg.schere {
	background: url(../images/bg_container.png) no-repeat -30px 180px;
}

div#container_bg.foehn {
	background: url(../images/foehn.png) no-repeat -60px 350px;
}

div#container_bg.kamm {
	background: url(../images/kamm.png) no-repeat -110px 230px;
}

div#container_bg.glas {
	background: url(../images/glas.png) no-repeat -50px 330px;
}

div#container_bg.pinsel {
	background: url(../images/pinsel.png) no-repeat -110px 300px;
}

div#content aside {
	width: 300px;
	height: auto;
	padding-left: 60px;
	overflow: hidden;
}

div#content aside section#contactinfos, 
div#content aside section#gallery, 
div#content aside section#features, 
div#content aside section#features article {
	margin-bottom: 20px;
}


div#content aside section#features article img {
	float: left;
	margin-right: 15px;
}

div#content aside section#features article p.lead {
	overflow: hidden;
}

div#content aside section#features article p.more {
	text-align: right;
	padding-right: 10px;
}

div#content div#main {
	float: left;
	width: 600px;
	padding-left: 20px;
	height: auto;
}

div#content div#main h1, div#content div#main h2 {
	margin-bottom: 10px;
}

div#content div#main h3, div#content div#main h4 {
	margin: 10px 0 5px 0;
}


div#content aside section h1, 
div#footer footer section h1 {
	font-size: 18px;
	margin-bottom: 10px;
}


div#content, 
div#container_bg, 
div#header header, 
div#header div#emotion, 
div#header nav#globalnavi, 
div#footer footer {
	width: 980px;
	margin: 0 auto;
}

section#teaserboxes {
	margin: 20px 0;
}

section#teaserboxes article {
	float: left;
	width: 280px;
	position: relative;
	height: 280px;
	margin-right: 40px;
} 

section#teaserboxes article h1 {
	font-size: 18px;
	margin-top: 5px;
}

h1 a {
	text-decoration: none !important;
	color: #3e3f40 !important;
}

section#teaserboxes article.last {
	margin: 0;
}

section#teaserboxes article a.internal {
	position: absolute;
	bottom: 0;
	left: 0;
}

/*****************************************************************
 * News
 *****************************************************************/
 
article.news-entry {
	margin-bottom: 30px;
	position: relative;
}

article.news-entry div.fb {
	position: absolute; 
	bottom: 0;
	right: 0;
}

article.news-entry p.date {
	font-size: 18px;
	margin: 0;
	line-height: 110%;
	color: #ccc;
}

article.news-entry h2 {
	margin: 0 0 20px 0;
}

article.news-entry img {
	float: left;
	margin: 0 20px 20px 0;
}

article.news-entry img.single {
	float: none;
	margin: 0;
}

article.news-entry p {
	margin-bottom: 10px;
}

article.news-entry.detail a.internal {
	display: block;
	margin-top: 20px;
}



/*****************************************************************
 * Footer
 *****************************************************************/

div#footer {
	height: auto;
	margin-top: 40px;
	background: #f8f8f8;
	background-image: -moz-linear-gradient(#f8f8f8, #ffffff);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f8f8f8));
	background-image: -webkit-linear-gradient(#f8f8f8, #ffffff); 
	background-image: -o-linear-gradient(#f8f8f8, #ffffff);
}

div#footer footer {
	position: relative;
	font-size: 13px;
}

div#footer footer p#copyright {
	margin-top: 40px;
}

div#footer footer p#copyright a, div#footer footer p#copyright {
	color: #aaa;
}

div#footer footer section#social {
	position: absolute;
	top: 10px;
	right: 0;
	width: 150px;
}

div#footer footer section#address {
	position: absolute;
	top:10px;
	right: 150px;
	width: 150px;
} 

div#footer footer section#address img {
	padding-right: 10px;
	margin-bottom: 10px;
}

div#footer footer section#address p {
	padding-left: 2px;
}

div#footer footer section#address > p {
	margin: 0;
}

div#footer footer section#address a {
	text-decoration: none;
}

/*****************************************************************
 * Navigation
 *****************************************************************/

/* Main Navi */

nav#globalnavi {
	background: url(../images/bg_navi.png) repeat-x left top transparent;
	height: 40px;
	position: relative;
}

nav#globalnavi > ul {
	margin-left: 20px;
}

nav#globalnavi a {
	text-decoration: none;
}

nav#globalnavi > ul > li {
 	display: block;
 	height: 40px;
 	-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;	float: left;
	padding-right: 25px;
	position: relative;
}
 
nav#globalnavi > ul > li > a {
 	color: #626262;
 	padding: 12px 0;
 	font-size: 16px;
 	line-height: 40px;
 	text-transform: uppercase;
}

nav#globalnavi > ul > li > ul {
	position: absolute;
	top: 40px;
	left: 0;
}

nav#globalnavi > ul > li.active > a, 
nav#globalnavi > ul > li > a:hover, 
nav#globalnavi > ul > li.open > a {
	color: #000;
}


nav#globalnavi > ul > li > ul > li {
	float: none;
	border: none;
	height: auto;
	background: url('../images/bg_subnavi.png') repeat left top transparent;
	margin-top: 3px;
	position: relative;
}

nav#globalnavi > ul > li > ul > li > a,
nav#globalnavi > ul > li > ul > li > ul > li > a {
	color: #fff;
	font-size: 16px;
 	line-height: 30px;
 	text-transform: uppercase;
 	padding: 0 4px;
 	display: block;
}

nav#globalnavi > ul > li > ul > li > a:hover, 
nav#globalnavi > ul > li > ul > li.active > a, 
nav#globalnavi > ul > li > ul > li.open > a,
nav#globalnavi > ul > li > ul > li > ul > li > a:hover,
nav#globalnavi > ul > li > ul > li > ul > li.active > a,
nav#globalnavi > ul > li > ul > li > ul > li.open > a {
	color: #c38fdb;
}


nav#globalnavi > ul > li > ul > li > ul > li {
	height: 30px;
}

nav#globalnavi > ul > li > ul > li > ul > li > a {
	padding-left: 10px;
	font-size: 14px;
}


/* Metanavi */

nav#metanavi {
	text-align: right;
	position: absolute;
	top: 10px;
	right: 0px;	
}

a.social {
	position: absolute; 
	top: 12px;
	right: 0;
}

div#fb_like {
	position: absolute;
	top: 12px;
	left: 0px;
}

div#google_plus {
	position: absolute; 
	left: 0;
	top: 12px;
}

nav#metanavi ul li {
	display: inline;
}

nav#metanavi ul li a {
	color: #727272;
	padding: 0 0 0 10px;
	text-transform: uppercase;
}


/* Sitemap */

nav#sitemap {
	padding: 10px 10px 20px;
	width: 640px;
}

nav#sitemap ul.level0 {
	height: 100%;
}

nav#sitemap ul.level0 li {
	float: left;
	width: 105px;
	z-index: 100;
}

nav#sitemap ul.level0 li a {
	text-align: left;
	text-decoration: none;
	padding: 3px 0;
	display: block;
	margin-bottom: 10px;
}

nav#sitemap ul.level0 li ul.level1 li {
	clear: both;
}

nav#sitemap ul.level0 li ul.level1 li a {
	margin-bottom: 0;
}


nav#sitemap ul.level0 li ul.level1 li ul.level2 li a {
	padding: 3px 0px 3px 15px;	
} 


/* Pagebrowser */

nav.page-browser {
	overflow: hidden;
	margin: 20px 0;
}

nav.page-browser ul > li  {
	float: left;
	border: 1px solid #727272;
	margin-right: 10px;
	line-height: 100%;
}

nav.page-browser ul > li > a {
	text-decoration: none;
	display: block;
	padding: 5px;
}

nav.page-browser ul > li > a:hover {
	color: #fff;
}

nav.page-browser ul > li.active,
nav.page-browser ul > li > a:hover {
	background: #727272;
}

nav.page-browser ul > li.active > a {
	color: #fff;
}

nav.page-browser li.page-browser-spacer {
	padding: 5px;
	border: none;
}

/* FB Page */

body#fb {
	width: 520px;
	overflow: hidden;
	padding: 0;
	margin: 0;
}


body#fb header {
	background: url('../images/fb_header_bg.png') no-repeat left top transparent;
	width: 520px;
	height: 150px;
	position: relative;
}

body#fb header h1 {
	position: absolute; 
	left: -9999px;
}

body#fb #branding {
	padding: 20px 15px;
}

body#fb #container {
	width: 520px;
}

#page_content {
	margin-top: 20px;
}

body#fb h1 {
	font-weight: normal;
}

body#fb #globalnavi ul.level0 {
	padding-left: 10px;
	margin: 0;
}

body#fb nav#globalnavi > ul > li {
	padding-right: 15px;
}

body#fb nav#globalnavi > ul > li > a {
	font-size: 13px;
}