/*************************
all styles by outline4.ch 

gruen: 407510
rot: ED1C24
grau 414141

************************/

/* General Semantic Tags
----------------------------------------------------------------------------------------------------*/
header, section, nav, article, footer, video, audio {display: block; position: relative; }
	nav h1 {display: none;} /* Being friendly to newsreaders */

/* Reset
-------------------------------------------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,header,section,nav,footer,article,img,video,audio {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0; margin-bottom: 21px;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,b,strong,th,var {font-style:normal; font-weight:normal;}
ul {list-style: disc;}
ol {list-style: decimal;}
td {vertical-align: top; padding-right: 10px;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
p,dl,hr,ol,ul,pre,table,fieldset {margin-bottom: 21px; font-weight: normal;}
q:before,q:after { content:''; }
abbr,acronym {border:0;}
pre {white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -o-pre-wrap;}



/* Set to 100%
-------------------------------------------------------------------------------------------------- */
html, body {
	height: 100%;
}

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

}

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



/* Body
----------------------------------------------------------------------------------------------------*/
			
body { font: 14px/21px Arial, arial, sans-serif; color: #414141; font-style: normal; -webkit-text-size-adjust: none; 
		background-color: #fff;	
}

/* Headings
----------------------------------------------------------------------------------------------------*/

h1, h2, h3, h4 { font-style: normal; font-variant: normal; font-weight: normal; font-family: 'VinylOTRegular', Arial, sans-serif; margin-bottom: 11px; 
	color: #414141; /* text-transform: uppercase;  */letter-spacing: 0.07em; }
h4 { margin-bottom: 0em; }

h1 {text-transform: uppercase; font-family: 'ConfidentialRegular', Arial, sans-serif; }


h1{ font-size: 25px; line-height: 25px; }
h2{ font-size: 21px; line-height: 21px; }
h3, h4, h5 { font-size: 18px; line-height: 21px; }

/* could be a good idea */
p + h2, ul + h2, table + h2 {margin-top: 21px;}
p + h3, ul + h3, table + h3 {margin-top: 21px;}
p + h4, ul + h4, table + h4 {margin-top: 11px;}

span.bildlegende { display: block; margin-bottom: 21px;}


.haupttitel_schrift { font-size: 60px; line-height: 60px; margin: 30px 0; font-style: normal; font-variant: normal; font-weight: normal; font-family: 'VinylOTRegular', Arial, sans-serif; color: #414141; }
.titelschrift {font-style: normal; font-variant: normal; font-weight: normal; font-family: Arial, sans-serif; }
.laufschrift {font-style: normal; font-variant: normal; font-weight: normal; font-family: Arial, sans-serif; }
.vinyl {text-transform: none;font-family: 'VinylOTRegular', Arial, sans-serif; } 
.stampete {text-transform: uppercase ;font-family: 'ConfidentialRegular', Arial, sans-serif; font-size-adjust: 0.76 } 


/* Links
----------------------------------------------------------------------------------------------------*/

a { color: #414141; text-decoration: underline; font-weight: normal; }
a:hover { color: #407510; text-decoration: underline; }

a img, a:hover img {/*  border:none; */ text-decoration: none; }

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
	text-decoration: none;
	border: 0 none;
 	display: inline-block; 
}

/* Link icons */ 
a.external_link {padding-left: 20px; background: url(/css/images/icons/link.png) no-repeat 0 0 transparent; min-height: 16px;}
a.download_icon {padding-left: 23px; background: url(/css/images/icons/download.png) no-repeat 0 50% transparent; height: 16px; }
a.download_protected {padding-left: 23px; background: url(/css/images/icons/download_protected.png) no-repeat 0 50% transparent; height: 16px; }


/* Inline Formats
----------------------------------------------------------------------------------------------------*/
i, em { font-weight: normal; color: #414141; font-style: italic;}
b, strong {font-style: normal; font-variant: normal; font-weight: bold; color: #414141; }

hr { border: 0; margin-left: 0px; color: #414141; background-color: #414141; height: 1px; }


/* Layout divs
----------------------------------------------------------------------------------------------------*/


#wrapper { position: relative; width: 900px; margin: 0 auto; background: transparent; }
	
	#navigation_container {position: absolute; top: 0; left: 500px; }
	
	#header { width: 410px; padding-left: 40px; height: 260px; margin-top: 30px; }	
	#header_right { position: absolute; left: 700px; top: 0; margin-top: 30px; }	
	
		#logo { position: relative; width: 311px; margin: 0 auto; }		
		

	#content { position: relative; float: left; width: 410px; padding-left: 40px; background: transparent; margin-bottom: 30px;	}
		.intro {margin-top: 30px;}
		
		#content li {margin-left: 15px;}
		#content table { width: 100%; }
		#content table th { color: black; }		
	
	#header_home {margin-top: 30px;}
	#content_home { width: 350px; }
		#content_home h1 {display: none;}
	
	/* sortiment section */
	
	.sortiment_zutaten {position: relative; float: left; background: #f1f1f1; padding: 20px; width: 50%; margin-top: 30px;}
	
	.sortiment_listing {position: relative; float: left; width: 100%; margin-bottom: 11px;}
			
		.sortiment_listing h1 { font-family: 'VinylOTRegular', Arial, sans-serif; font-size: 20px; line-height: 20px; margin-bottom: 5px; text-transform: none; text-decoration: none;}
		.sortiment_listing h2 { font-family: 'VinylOTRegular', Arial, sans-serif; font-size: 16px; line-height: 16px; margin-bottom: 5px; text-transform: none; text-decoration: none;}
		
		.sortiment_listing a { text-decoration: none;} /* , .sortiment_listing a h2, .sortiment_listing a h3 */
		.sortiment_listing a:hover h1, .sortiment_listing a:hover h2, .sortiment_listing a:hover h3 {color: #407510; }
		 
		
			.zutaten { font-size: 10px; line-height: 14px; margin-bottom: 8px; }
		
		.sortiment_foto_row { float: inherit; width: 21%; padding-right: 7%; overflow: hidden;}
		.sortiment_title_row { float: inherit; width: 48%; padding-right: 7%; overflow: hidden;}
		.sortiment_bio_row { float: inherit; width: 17%; /*  padding-right: 5%;  */overflow: hidden; text-align: center;}
		.sortiment_weight_row { float: inherit; width: 15%; overflow: hidden; text-align: right; }


		.sortiment_detail header {margin-bottom: 21px;}
		.sortiment_detail h1 { font-family: 'VinylOTRegular', Arial, sans-serif; margin-bottom: 5px; text-transform: none; }
		.sortiment_detail h2, .sortiment_detail h3 { font-family: 'VinylOTRegular', Arial, sans-serif; margin-bottom: 5px; text-transform: none;}

		
		a.info_link { text-decoration: none; border-bottom: 1px dashed #999;}
		a.bio_link {text-decoration: none; border: none;}
		
	
	/* lieferbereich */
	
	.lieferbereich_listing {position: relative; float: left; width: 100%; margin-bottom: 21px;}
		
		.lieferbereich_listing h2 { margin-bottom: 5px; text-transform: none; }
		
		
	.blog_footer { position: relative; float: left; width: 100%; color: #999; margin-bottom: 44px; }
	.blog_footer p {margin-bottom: 0; font-size: 10px;}
	.footer_stroke { background: url(/media/layout/strich.png) no-repeat 0 0 transparent; height: 11px; width: 330px; margin: 0 auto; float: left;}
	
	
	/* impressionen (Siehe Supersized fuer den Rest) */
	
	#impressionen {background: #414141;}
		#impressionen_back {position: absolute; top: 20px; left: 20px; z-index: 999; }
	
	
	/*login */
	
	.login_input {width: 200px;}
	
	/* ie stuff */
	
		#IElt8 .center_list ul {display:inline-block;}
		#IElt8 .center_list ul {display:inline; }
		#IElt8 .center_list ul li {display:inline-block}
		#IElt8 .center_list ul li { display:inline;}
		#IElt8 .center_list ul a { display:inline-block;}
		#IElt8 .center_list {text-align:center}
	
/* Navigation
----------------------------------------------------------------------------------------------------*/

ul#main_nav { position: relative; float: left; list-style: none outside none; width:100%; }

	ul#main_nav, ul#main_nav ul {float: left;}
	ul#main_nav li { display: block;  width: 100%; float: left; margin-bottom: 11px;}
	
	ul#main_nav > li > a { display: block; float: left; white-space: nowrap; color: #414141; font-weight: normal;
		font-size: 25px; line-height: 25px;
		text-transform: uppercase;
		font-family: 'ConfidentialRegular', Arial, sans-serif;
	    padding: 0;
	    margin: 0;
	    text-decoration: none;
	    width: 100%;
	    font-size-adjust: 0.76
	    letter-spacing: 0em; 
	   }


	ul#main_nav > li > ul > li > a { display: block; float: left; white-space: nowrap; color: #414141; font-weight: normal;
		font-size: 13px; line-height: 13px; 
		text-transform: uppercase;
		font-family: 'VinylOTRegular', Arial, sans-serif;
	    padding: 0 0 0 30px;
	    margin: 0;
	    text-decoration: none;
	    width: 100%;
	   }
	
	ul#main_nav > li > ul > li {margin-bottom: 5px;}

	
	ul#main_nav > li.here > ul { margin-top: 11px; margin-bottom: 0px;}  	


	ul#main_nav > li.special_nav > a { display: block; float: left; color: #414141; font-weight: normal;
		font-size: 14px; line-height: 18px;
		font-style: italic;
		white-space: normal;
		text-transform: none;
		font-family: Arial, sans-serif;
	    padding: 0;
	    margin: 0;
	    text-decoration: none;
	    width: 120px;
	    color: #999;
	   }


	ul#main_nav li.here > a { color: #407510!important; }
	ul#main_nav a:hover { color: #407510!important;}
	
	.impressionen a {color: #f8f8f8!important;}
	.impressionen a:hover {color:#407510!important;}
	
	a.here {color: #407510;}

/* Slideshow (Galleriffic)
----------------------------------------------------------------------------------------------------*/

	#slideshow_container { position: relative; margin-bottom: 15px; }
		#slideshow {display: block; width: 560px; height: 380px; margin-bottom: 11px; overflow: hidden; } /* override default margin bottom */
		
		#loader { position: absolute; display: block; width: 560px; height: 380px; margin-bottom: 12px; overflow: hidden; background-image: url('/js/galleriffic/loader.gif'); background-repeat: no-repeat; background-position: center; background-color: transparent; overflow: hidden; }
		
		#thumbs {position: relative; height: 15px; width: 100%; text-align: right; }
			
			ul.thumbs {margin-top: 0; float: right;}
			
			.thumbs li { list-style-type:none; float:left; width: 12px; height: 12px; margin-left: 3px!important; background: #b5640f; color: #b5640f; overflow: hidden;}
			.thumbs li a { display: block; width: 12px; height: 12px; font-size: 1px; text-indent: -9999px; color: #b5640f; }
			.thumbs li a:hover, .thumbs li.selected, .thumbs li.selected a {background: #e2d3c0; color: #e2d3c0;}

			.caption_container {position: absolute; display: block; left: 0; bottom: 0; width: 560px; }


/* Supersized (jquery)
----------------------------------------------------------------------------------------------------*/
#supersized-loader { position:absolute; top:50%; left:50%; z-index:-999; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background-color:#111; background:rgba(0,0,0,0.8) url(/js/supersized/core/img/progress.gif) no-repeat center center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
	
#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
	#supersized img{ height:auto; width:auto; position:relative; outline:none; border:none; -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }

		#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
    	#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
    
    #supersized a { z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111;}
    	#supersized a.prevslide { z-index:-20; }
    	#supersized a.activeslide { z-index:-10; }
    	#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }

/*Controls Section*/
#controls-wrapper { margin:0 auto; height:62px; width:100%; bottom:0; left:0; z-index:4; /* background:url(../img/nav-bg.png) repeat-x; */ position:fixed; }
    #controls { overflow:hidden; height:100%; text-align:left; z-index:5; padding:0; /* Increase padding to give thumbnails room */ }
    	#slidecounter { float:left; color:#f8f8f8; font-size:23px; font-weight:bold; text-shadow:#000 0 -1px 0; margin:19px 10px 18px 20px; text-transform: uppercase ;font-family: 'ConfidentialRegular', Arial, sans-serif; font-size-adjust: 0.76;  }
    	#slidecaption { overflow:hidden; float:left; color:#FFF; font-size:16px; font-weight:normal; text-shadow:#000 0 -1px 0; margin:23px 20px 23px 0; text-transform: uppercase ;font-family: 'ConfidentialRegular', Arial, sans-serif; font-size-adjust: 0.76;}
    	#navigation { float:right; margin:10px 20px 0 0; }


/* definition list
---------------------------------------------------------------------------------------------------*/

dt {
	display: inline-block;
	float: left;
	clear: left;
	width: 30px;
	font-weight: bold; }

dd {
	margin: 0 0 0 10px;
	padding: 0; }


/* Blocks 
---------------------------------------------------------------------------------------------------*/

.alert, .download, .info, .tip, .email, .block, .calendar, .adresse {  background-color:#DCDFE1;
	margin: 10px 0px 10px 0px;
	padding: 7px 10px 7px 31px;
	text-align:left;
	color: #013366; 
}

.block, .adresse {	padding: 7px 10px;}

.alert { background: url(/css/images/alert.png) 4px 8px no-repeat; }
.download { background: url(/css/images/download.png) 4px 8px no-repeat; }
.info { background: url(/css/images/note.png) 4px 8px no-repeat;}
.tip { background: url(/css/images/info.png) 4px 8px no-repeat; }
.email { background: url(/css/images/email.png) 4px 8px no-repeat; }
.calendar { background: url(/css/images/calendar.png) 4px 8px no-repeat; }
.block { background-color: #DFE6EC; border: none; display: block; }
.adresse { background-color: #DFE6EC; border: none; display: block; }


/* Blockquote
----------------------------------------------------------------------------------------------------*/

blockquote { background: url(/css/images/blockquote_start.png) 0 0 no-repeat; }
.blockquote { font-family: Georgia, serif; font-size: 1.8em; line-height: 1.5em; color: #8296ab; font-style:italic; text-align:center; text-indent:15px; background-image: url(/css/images/quote.gif); background-repeat: no-repeat; background-position: left top; float:left; width: 100%; }

/* List styles
----------------------------------------------------------------------------------------------------*/
ul li.arrow, ul li.plus { list-style: none; margin:0; }
ul li.arrow a:link { color: #013366; text-decoration:none; }
ul.arrow a:hover { color: #013366; text-decoration:underline; }

li.arrow { padding-left:18px; margin:0; background: url(/css/images/arrow_blue.png) 0 4px no-repeat; color: #626262; }
li.plus { padding-left:18px; margin:0; background: url(/css/images/plus_blue.png) 0 4px no-repeat; color: #626262; }


/* Specials
----------------------------------------------------------------------------------------------------*/
.noborder, a.noborder, a.noborder:hover {border: none;}
.margin_btm {margin-bottom: 10px!important;}
.med_margin_btm {margin-bottom: 21px;}
.big_margin_btm {margin-bottom: 30px;}
.no_margin, .nomargin {margin-bottom: 0px;}
.small_margin_btm {margin-bottom: 7px;}
.uppercase {text-transform: uppercase;}
.small, .small a { font-size: 11px; line-height: 14px; color: #626262; }
.border {border-bottom: 1px solid #414141;}
.center {text-align: center;}
.ident {padding-left: 10px;}
.no_wrap {white-space: nowrap;}
.logged_in_logo { top:30px!important;}
.logged_in_aside { top:60px!important;}
.small_margin_top {margin-top: 11px;}
.no_margin_btm {margin-bottom: 0px!important;}
.capitalize {text-transform: capitalize;}

.img_left_medium { border: medium none; display: block; float: left; margin: 0 14px 7px 0; width: 170px; }
.img_left_small { border: medium none; display: block; float: left; margin: 0 14px 7px 0; width: 100px; }

.bildlegende { font-size:11px;}

.img_border {border: 4px solid #414141;}

.logged_in_background {background: url(/css/images/stripe-gray.png) repeat 0 0 transparent; }
.admin_background {background: #b21f17; }
.admin_white, .admin_white a {color: white!important; }
.admin_white {padding: 5px;}

/* make nicer
----------------------------------------------------------------------------------------------------*/
.shadow { box-shadow: 2px 2px 2px #ccc; -moz-box-shadow: 2px 2px 2px #ccc; -webkit-box-shadow: 2px 2px 2px #ccc; }
.frame {margin: 0px; margin-bottom: 7px; padding: 4px; border: 1px solid #e5e5e5; background: #fff;}
.rounded {-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* Admin Elements
----------------------------------------------------------------------------------------------------*/
a.modalbox_zoom {  border: inherit;}
a.modalbox_edit { color : #fff; background: #666; font-size: 10px; padding: 0 3px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* future proofing */ -khtml-border-radius: 5px; /* for old Konqueror browsers */ text-decoration: none;}
a:hover.modalbox_edit { color : #fff; background: #999; text-decoration: none;}

#admin_box {
	position: relative; width: 860px; margin: 0 auto; padding-left: 40px;
	background: /* url(/css/images/stripe-gray.png) repeat 0 0 */ transparent; z-index: 100; 
	
/*
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;	
*/
}
	#admin_box ul { position: relative; padding: 8px 30px; }
	#admin_box li {list-style: none; float: left; margin-right: 5px; padding-right: 5px; border-right: 1px solid #707173;}
	#admin_box li.first, #admin_box li.last {border: none; color: #000; font-weight: bold; text-transform: uppercase; width: 80px;}
	
	#performance_indicator {position: absolute; right: 10px; top:3; height: 21px; text-align: right;}

#toggler {position: fixed; top: 0; right: 0; padding: 5px 10px; 	
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    
    background: url(/css/images/stripe-gray.png) repeat 0 0 #fff; z-index: 101; 
}

#nufi_wrapper {background: gray;}
#nufi_header {position: absolute; left: 5%; top: 45px;}
#nufi_article_wrapper {position: absolute; top: 0; right: 0; width: 38%; height: 100%;  opacity:.90; filter: alpha(opacity=90); -moz-opacity: 0.90; background-color: white; overflow: auto;}
#nufi_article {padding: 10%;}
#nufi_navigation {position: absolute; left: 5%; top: 150px;}