/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * default screen tbstylesheet - PAGE-layout type layout
 *
 * @copyright       Copyright 2005-2012, Dirk Jesse
 * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-CDL (http://www.yaml.de/license.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         v4.0.1
 * @revision        $Revision: 733 $
 * @lastmodified    $Date: 2012-03-04 19:15:48 +0100 (So, 04 Mrz 2012) $
 */

@media screen {

	/* Basic Element Styling */
	body {	} 

	.editmode-info, .toplink, #mobile-header , .hidden { display: none; }

	#scrollr-menu { position: fixed; right: 0; top: 50%; margin-top: -140px; z-index: 1000; }
	.ym-wrapper { position: relative; max-width: 980px; margin: 0 auto; border: 0px solid orange; }
	#logo { width: 614px; height: 36px; margin: 0px auto 40px auto; background: url('../images/logo_large.png') no-repeat; }
	
	
	/* Grid */
	.ym-gbox { padding: 0px 10px 20px 10px; }
/*
	.ym-gbox { padding: 0px 20px 20px 0px; }
	.ym-gbox { padding: 0px 0px 20px 20px; }
	.ym-g50 .ym-gbox { padding: 0px 10px 20px 0px; }
	.ym-g50 .ym-gbox { padding: 0px 0px 20px 10px; }
*/	

	/* skip links styling */
	.ym-skiplinks a.ym-skip:focus,
	.ym-skiplinks a.ym-skip:active {
		color:#fff;
		background:#333;
		border-bottom:1px #000 solid;
		padding:10px 0;
		text-align: center;
		text-decoration:none;
	}


	/**
	 * Navigationen
	 */
	 
	.nav ul { margin: 0; list-style: none; overflow: hidden; }
	.nav li { margin: 0; padding: 0; line-height: 40px; list-style: none outside none; text-align: right; }
	.nav li a { display: block; height: 40px; padding-right: 75px; background: transparent url('../images/icons.png') right 0 no-repeat; text-decoration: none; overflow: hidden; }
	.nav li a:hover { background-position: right -40px; }
	.nav li a span { padding: 2px 10px 1px 11px; visibility: hidden; background: rgba(255,255,255,0.7); border-radius: 10px; }
	.nav li a:hover span { visibility: visible; }

	

	/**
 	 * Formatierung der Bild-Sections
   */

	section.image { position: relative; height: 630px; }
	section.image .citation { position: absolute; left: 0; bottom: -15px; width: 100%; background: transparent url('../images/trans50.png'); color: #fff; }
	.rgba section.image .citation { background-image: none; background: rgba(209,204,197,0.5); }
	section.image .inside { padding: 30px 20px 40px 20px; }

	#s1 { background-image: url('../../images/s01_bg.jpg'); }
	#s3 { background-image: url('../../images/s03_bg.jpg'); }
	#s5 { background-image: url('../../images/s05_bg.jpg'); }
	#s7 { background-image: url('../../images/s07_bg.jpg'); }
	#s9 { background-image: url('../../images/s09_bg.jpg'); }
	#s11 { background-image: url('../../images/s11_bg.jpg'); }


	/**
 	 * Formatierung der Content-Sections
   */

	.story { background: #fff; }
	.story article { padding: 130px 10px 120px 10px; }
	.story .headlines { padding: 0px 10px 80px 10px; text-align: center; }
	.story .inside { padding: 0px 10px 40px 10px; text-align: center; }


	/* s2 - Willkommen */
	#s2 .text { padding: 0px 10px 0px 10px; }
	#s2 .ym-gl .text { padding-left: 20px; }
	#s2 .ym-gr .text { padding-right: 20px; }
	
	/* s6 - Planung */
	#s6 .text { padding: 15px 20px 0px 20px; }
	
	/* s8 - Umsetzung */
	#s8 .text { padding: 10px 40px 0px 0px; }
	
	/* s12 - Teamgedanken */
	#s12 .text { padding: 15px 40px 20px 15px; }
	
	/* s13 - Last Section - Footer */
	#s13 { background: transparent url('../images/trans50.png'); overflow: hidden; }
	.rgba #s13 { background-image: none; background: rgba(209,204,197,0.5); }
	#s13.story .headlines { padding: 50px 0 40px 0; }
	#s13 #kontakt { padding: 0 20px; }



	/**
	 * Page - Impressum
	 */
	 
	#impressum { display: none; }
	#impressum .ym-grid { padding: 0 0px 40px 0px; }

}


	/**
 	 * Formatierung des Parallax - Scrollr
   */

	html, body { height:100%; }
	.skrollr-desktop body { height: 100% !important; }
	.parallax-image-wrapper { position: fixed; left: 0; width: 100%; overflow: hidden; }
	.parallax-image-wrapper-50 { height: 50%; top: -50%; }
	.parallax-image-wrapper-100 { height: 100%; top: -100%; }
	.parallax-image { display: none; position: absolute; bottom: 0; left: 0; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
	.parallax-image-50 { height: 200%; top: -50%; }
	.parallax-image-100 { height: 100%; top: 0; }
	.parallax-image.skrollable-between { display: block; }
	.no-skrollr .parallax-image-wrapper { display: none !important; }

	#skrollr-body { height: 100%; overflow: visible; position: relative; }
	.gap { background: transparent center no-repeat; background-size: cover; }
	.skrollr .gap { background: transparent !important; }
	.gap-50 { height: 50%; }
	.gap-100 { height: 100%; }
	.content-full { height: 100%; }
	#done { height:100%; }



/**
 * Responsive : Breite < 980px
 */

@media screen and ( max-width: 979px ) {

	img, figure {
		max-width: 100% !important;
		height: auto !important;
	}

	#scrollr-menu { position: fixed; right: 0; top: 0; width: 100%; height: 50px; margin: 0; background-color: #fff; }
	#scrollr-menu .inside { position: absolute; right: 0; top: 10px; width: 250px; background-color: #fff; }

	#mobile-header { display: block; width: 250px; margin-left: auto; margin-right: 0px; }
	#mobile-header a { display: block; line-height: 40px; text-align: right; padding-right: 60px; background: transparent url('../images/icons.png') 205px -40px no-repeat; }

	#scrollr-menu ul { display: none; position: relative; right: auto; top: auto; padding: 10px 0; }
	#scrollr-menu li a { padding-right: 0px; background-position: 205px 0px; }
	#scrollr-menu li a:hover { background-position: 205px -40px; }
	#scrollr-menu li a span { visibility: visible; padding-right: 50px; background: transparent; }

/*	#scrollr-menu .inside:hover ul, */
	#scrollr-menu .is-open ul { display: block; } 

	footer p.h2 span.spacer { display: block; }

}


/**
 * Responsive : Breite < 700px
 */

@media screen and (max-width: 699px){

	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
	.linearize-level-1,
	.linearize-level-1 > [class*="ym-g"] {
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		width: 100% !important;
	}

	#logo { width: 309px; height: 18px; margin: 0px auto 30px auto; background: url('../images/logo_small.png') no-repeat; }

	section.image { height: 555px; }
	section.image .inside { padding: 5px 20px 90px 20px; }

	.story .ym-gbox,
	.story .ym-gbox p.right { text-align: center; }
	.story .ym-gbox .text { text-align: center; padding: 0 5px !important; }

	.story article { padding: 60px 10px 30px; 10px }
	.story .headlines { padding-bottom: 40px; }
	
	#s4.story .inside,
	#s4 .pbot40 { padding-bottom: 20px; }
	
	#s6 .ym-gbox .center { padding-top: 20px; }
	
	#impressum .headlines { padding-bottom: 10px; }
	#impressum .ym-grid { padding-bottom: 10px; }
	#impressum .ym-grid .text { line-height: 1.35em; }
	
	
}


/**
 * Responsive : Breite < 480px
 */

@media screen and ( max-width: 479px ) {

	section.image .inside { padding-left: 10px; padding-right: 10px; }
	.story article { padding: 60px 0px 40px 0px; }
	
}


/**
 * Sidebar
 */

@media screen { .sidebar { display: none; position: fixed; top: 70px; left: -160px;  z-index: 5; } }
@media screen and (min-width: 325px) { .sidebar { display: block; } }
@media screen and (min-width: 810px) { .sidebar { top: 50%; margin-top: -85px; } }

@media screen { .sidebar .sbTab { position: relative; width: 160px; margin-bottom: 15px; -webkit-transition: margin-left .5s; transition: margin-left .5s; -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }
  .sidebar .sbTab:hover { margin-left: 160px; }
  .sidebar .sbTab.open { margin-left: 160px; -webkit-transition: margin-left 0; transition: margin-left 0; }
  .sidebar .trigger { position: absolute; right: -40px; top: 0px; width: 40px; height: 40px; cursor: pointer; }
  .sidebar .trigger .inside { 
  	width: 40px; 
  	height: 40px; 
  	border-left: 0px solid #2f4a65; 
  	padding: 0; 
  	background-color: transparent; 
  	/* -webkit-border-top-right-radius: 7px; -moz-border-radius-topright: 7px; border-top-right-radius: 7px; -webkit-border-bottom-right-radius: 7px; -moz-border-radius-bottomright: 7px; border-bottom-right-radius: 7px; -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); */ }
  .sidebar .trigger::after { content: " "; display: block; position: absolute; left: 10px; top: 0px; width: 40px; height: 40px; }
  .sidebar .body { position: relative; min-height: 40px; background-color: rgba(255,255,255, 0.75); }
  .sidebar .body .inside { padding: 5px 10px 5px 15px; display: table-cell; height: 30px; width: 100%; vertical-align: middle; }
  .sidebar .body a.inside { display: block; }
  .sidebar #sbTab1 .trigger::after { background: url("../images/icon_facebook.svg") no-repeat 0px 0px/40px auto; }
  .sidebar #sbTab2 .trigger::after { background: url("../images/icon_instagram.svg") no-repeat 0px 0px/40px auto; } }
  .sidebar #sbTab3 .trigger::after { background: url("../images/icon_shop.svg") no-repeat 0px 0px/40px auto; } }



/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * default print stylesheet
 *
 * @copyright       Copyright 2005-2012, Dirk Jesse
 * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-CDL (http://www.yaml.de/license.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         v4.0.1
 * @revision        $Revision: 724 $
 * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
 */


@media print {

	* { margin: 0; padding: 0; }

	body { font-size: 10pt; padding: 0 5px; }

	#wrapper-navigation, .newslink { display:none;	}


  /* Positionieren der Inhaltselemente */
	.wrapper { position: relative; width: 940px; margin: 0 auto; border: 0px solid red }


 .headlines h1 { padding-top: 50px; text-align: center; }
 .headlines h2 { padding-bottom: 10px; text-align: center; }
 .ym-gbox {  padding: 20px 0; }
  
  /*------------------------------------------------------------------------------------------------------*/

	/* (en) Avoid page breaks right after headings */
	/* (de) Vermeidung von SeitenumbrŸchen direkt nach einer †berschrift */
	h1,h2,h3,h4,h5,h6 {
		page-break-after:avoid;
	}

	/*------------------------------------------------------------------------------------------------------*/

	/* (en) optional output of acronyms and abbreviations*/
	/* (de) optionale Ausgabe von Auszeichnung von AbkŸrzungen */

	/*
	abbr[title]:after,
	acronym[title]:after {
		content:'(' attr(title) ')';
	}
	*/

	/*------------------------------------------------------------------------------------------------------*/

	/* (en) optional URL output of hyperlinks in print layout */
	/* (de) optionale Ausgabe der URLs von Hyperlinks */
	/*
	a[href]:after {
		content:" <URL:"attr(href)">";
		color:#444;
		background:inherit;
		font-style:italic;
	}
	*/
	
	
}