@charset "UTF-8";
/* CSS Document */

/* 
	Farb Schema 

	White	#ffffff
	Black	#000000
	Türkis	#aeefde;
	
	Fonts
	
	Quick Navigation
	Folk-solid	54px
	
	facebook Link
	arial bold 22px
	
	Page Navigation
	Folk-solid	36px
	
	Page Title
	Folk-solid	60px

	Page Content
	arial	16px 
	
	Gluecks Kugeln
	Folk-solid	84px
	
	Image Size
	
	Content Image
	586 x 228

*/

@import url('Folksolid.css');


/* HTML5 HACK ---------------------------------------------------*/  
header, section, footer, nav, article, p{  
	display: block;  
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	color:#000;
	margin:0;
	padding:0;

}

address {font-style: normal;}

header#Siteheader, section.Page, section.Page footer, footer#Sitefooter
{
	width: 980px;
	margin: 0 auto;
	padding:0;
}

/* NAV ----------------------------------------------------------------- */ 

nav ul {
	color: #000000;
	list-style:none;
	margin:0;
	padding:0;
}

nav a {
	font-family:Folk-solid; 
	color: #000000;
	text-decoration:none;
}

nav a:hover{
	color:#aeefde;
}

/* HEADER & QUICK-NAVIGATION ------------------------------------------- */
header#Siteheader {
	/*position:relative;*/
}

header#Siteheader h1 {
	display:none;
}

header#Siteheader nav {
	position: absolute;
	right: .5em;
	top: 10px;
	margin:0;
	padding:0;
	z-index: 101;
}
header#Siteheader nav ul {
	background-image:url(../image/engel.png);
	background-repeat:no-repeat;
	padding-top:54px;
	padding-right: 2px;
	
	
}
header#Siteheader nav ul li { text-align:center;}
header#Siteheader nav a:hover {color:#000; background-color:#aeefde;}
header#Siteheader nav ul li a {
	background-color:#000000; 
	border-radius: 2em; 
	-moz-border-radius: 2em; 
	color: #ffffff;
	font-size: 54px;
	display:block;
	margin:0;
	padding:0;
	width: 1em;
	height: 1em;
}
header#Siteheader nav ul li.active a { background-color:#aeefde;}
header#Siteheader nav a.facebook {
	background-image: url("../image/facebookballon.gif");
	background-position: 0 0;
	background-repeat: no-repeat;
	color: #FFFFFF;
	display: block;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 22px;
	font-weight: bold;
	height: 71px;
	padding-top: 5px;
	position: absolute;
	text-indent: 0.6em;
	top: -44px;
	width: 28px;
}
header#Siteheader nav a.facebook:hover {
	color:#000;
	background-color: transparent;
}
/* HEADER & QUICK-NAVIGATION ------------------------------------------- */

footer#Sitefooter {
	margin-top: 2em;
	text-align: right; 
}

footer#Sitefooter a {
	color:#ffffff;
	background-color:#000000;
	text-decoration: none;
}

footer#Sitefooter a:hover {
	color: #000000;
	background-color:#aeefde;
	text-decoration:none;
}
/* SECTION Page ------------------------------------------- */


/* HEADER & NAVIGATION ------------------------------------ */

section.Page header.Page {
	position: relative;
	height: 78px;
	padding: 0;
	margin-top: 20px;
}

section.Page header.Page h1 {
	position: absolute;
	background-position: 0 0;
	background-image: url(../image/werkeria_logo.png);
	background-repeat: no-repeat;
	height: 380px;
	width: 310px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
}
section.Page header.Page nav { position: absolute; top: 40px; left: 380px;}
section.Page header.Page nav ul {}
section.Page header.Page nav ul li { display:inline;}
section.Page header.Page nav ul li a { font-size: 34px; padding: 0 15px; text-transform:uppercase;}
section.Page header.Page nav ul li a:hover {}
section.Page header.Page nav ul li.active a {color: #aeefde;}

/* PAGE TITLE, Content -------------------------------------- */

section.Page article {
	position: relative;
	padding-left: 390px;
}

section.Page article div.imagesContainer {
	position: absolute;
	left: 390px;
	top: 0;
}

section.Page article div.imagesContainer img {
	position: absolute;
	right: 0;
	top: 0;
}

section.Page article header {
	position: relative;
	height: 307px;
	width: 586px;
	z-index: 100;
}

section.Page article header h1 {
	padding-top:245px;
	background-repeat:no-repeat;
	font-family:Folk-solid;
	font-size:60px;
	text-transform:uppercase;
}

section.Page article p {
	line-height:22px;
}

section.Page footer {
	position:relative;
    height:460px;
	margin-bottom: 2em;
	background:url(../image/footer_background1.png);
}

section.Page footer div.symbol {
	position:absolute;
	background-repeat:no-repeat;
}

section.Page footer p {
	position:absolute;
	margin:0;
	padding-top:1em;
	background-color:#aeefde;
	border-radius: 4em;
	-moz-border-radius: 4em;
	height:3em;
	width:4em;
	color:#fff;
	text-align:center;
	font-family:Folk-solid;
	font-size:4em;
	font-weight:bold;
	line-height:1em;
	text-transform:uppercase;
}

.rotate {
  -webkit-transform: rotate(-16deg);
  -moz-transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
}

/* Produkte Seite ---------------------------------------------------------------- */
section#Produkte article header h1 {
	background-image:url(../image/hirschkopf.png), url(../image/huhn.png);
	background-position:490px 227px, 18px 187px;
}

section#Produkte article header {
	/*background-image: url("../image/ProduktBild.jpg");*/
	background-repeat: no-repeat;
}

section#Produkte footer p.Glueck1 {
	top: -0.5em;
	right:0.5em;
}
	
section#Produkte footer p.Glueck2{
	bottom:-0.5em;
	left:5em;
}

section#Produkte footer div.symbol {
	background-image:url(../image/haus.png);
	width:135px;
	height:101px;
	top:-101px;
	left: 26px;
}

/* Laden Seite ----------------------------------------------------------------------- */
section#Laden article header h1 {
	background-image:url(../image/schweinchen.png), url(../image/schaf.png);
	background-position:346px 218px, 1px 50px;
}

section#Laden article header {
	background-image: url("../image/LadenBild.jpg");
	background-repeat: no-repeat;
}

section#Laden footer {
	background:url(../image/footer_background2.png);
}

section#Laden footer p.Glueck1 {
	top: 0.5em;
	right:0.5em;
}
	
section#Laden footer p.Glueck2{
	bottom:-0.5em;
	left:2.5em;

}

section#Laden footer div.symbol {
	background-image:url(../image/hase.png);
	width:135px;
	height:101px;
	top:-90px;
	left: 126px;
}

/* UeberMich footer ----------------------------------------------------------------------- */
section#UeberMich article header h1 {
	background-image:url(../image/paar.png), url(../image/kinder.png);
	background-position:490px 226px, 18px 100px;
}

section#UeberMich article header {
/*	background-image: url("../image/UeberMichBild.jpg");*/
	background-repeat: no-repeat;
}

section#UeberMich footer p.Glueck1 {
	top: 3.5em;
	right:-1em;
}
	
section#UeberMich footer p.Glueck2 {
    bottom: 3em;
    height: 3em;
    left: 4em;
    padding: 1em 0.2em 0;
    width: 3.6em;
}

section#UeberMich footer div.symbol {
	background-image:url(../image/schmetterling.png);
	width:110px;
	height:107px;;
	top:-72px;
	left: 42px;
}

/* Kontakt Seite --------------------------------------------------------------------------- */
section#Kontakt article header h1 {
	background-image:url(../image/macchinetta_gross.png), url(../image/kontaktengel.png);
	background-position:398px 80px, 172px 200px;
}

section#Kontakt footer {
	background:url(../image/footer_background2.png);
}

section#Kontakt article a{
	font-family:Folk-solid;
	color:#AEEFDE;
	font-size:34px;
	text-decoration:none;
}

section#Kontakt article a:hover{
	background-color:#AEEFDE;
	color:#000;
}

section#Kontakt article header {
/*	background-image: url("../image/KontaktBild.jpg");*/
	background-repeat: no-repeat;
}

section#Kontakt footer p.Glueck1 {
	top: -0.5em;
	right:0.5em;
    height: 3em;
    padding: 1em 0.3em 0;
    width: 3.4em;
}
	
section#Kontakt footer p.Glueck2{
	bottom:-0.5em;
	left:0.5em;
}

section#Kontakt footer div.symbol {
	background-image:url(../image/kaffeetasse.png);
	width:135px;
	height:101px;
	top:-60px;
	left: 206px;
}

/* iPhone */
@media handheld, only screen and (max-device-width: 480px) {
    /* overrides or style additions for iPhone */

	body {
		margin-top:360px;
	}
	section.Page article p {
		font-size: 1.8em;
		line-height:1.6em;
	}
 
 	/* linken Rand wegnehmen */
	header#Siteheader, section.Page, section.Page footer, footer#Sitefooter
	{
		width: 620px;
	}

	section.Page header.Page nav {
		left: 15px;
	}
    section.Page article {
    	padding-left: 30px;
    	width: 590px;
    }
    
    /* Logo nicht zeigen */
	section.Page:nth-child(1n+3) header.Page h1 {
		display: none;
	}    
	section#Produkte header.Page h1 {
		top: -364px;
		left: 166px;
	}    

    /* Quick Navigation nur (1) und facebook zeigen */
	header#Siteheader nav ul > li:nth-child(1n+2){
		display: none;
	}
	
	/* quick nav an den rechten rand setzen */
	header#Siteheader nav {
		right: auto;
		left: 600px;
	}

	/* footer symbole opacity */
	section footer div.symbol {
		opacity: .2;
	}
	
	/* Slideshow Images nach links holen */
	section.Page article div.imagesContainer {
		left: 30px;
	}	
}

/* iPdad */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {

	section.Page header.Page h1 {
		margin-left: 20px;
	}    
	
	section.Page article p, address {
		font-size: 1.5em;
		line-height:1.55em;
	}
	
	
	/* quick nav an den rechten rand setzen */
	header#Siteheader nav {
		right: -261px;
	}
}