/**
 * "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 { display: none; }

	.ym-wrapper { position: relative; max-width: 980px; margin: 0 auto; }
	.ym-inside { padding: 20px; }

  header { position: relative; }
  header .ym-wrapper { height: 160px; }

	#logo { position: absolute; left: 20px; top: 0; display: block; width: 255px; height: 140px; background: url('../images/logo.png') no-repeat; }
	#main { position: relative; }

  section { padding: 20px 0px; }

	footer .ym-grid { padding-top: 0; }
	footer .ym-gbox { padding-top: 70px; }
	footer .col-logo .ym-gbox { text-align: right; padding: 0; }
	footer .col-logo .ym-gbox img { margin-right: -20px; }
  footer h2 { color: #009999; text-transform: uppercase; }
  
 
	/* Grid-Layout */
	.ym-grid { padding: 20px 0; }
	.ym-gbox { padding: 0 20px; }
	
	
	/* 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;
	}

	/**
	 * generische Klassen
	 */
	 
	.bgb { background: #009999; }
	.bgd { background: #333333; }
	.ruler { border-top: 1px solid #999;/ }
	.display-block { display: block !important; }
	

	/**
	 * Navigationen
	 */
	 
	.nav {  margin: 0; list-style: none; }
	.nav li { margin: 0; padding: 0; }
	.nav a { text-decoration: none; }
	.nav a:hover { text-decoration: underline; }

	#mainnav { position: relative; margin-top: 105px; border: 0px solid orange; }
	#mainnav .opener { display: none; padding: 20px 20px 16px 20px; line-height: 1em; background-color: #099; color: #fff; }
	#mainnav .opener:hover { color: #fff; text-decoration: none; }
	#mainnav .icon-menu { background: #099 url('../images/icons.png') no-repeat -30px -70px; }
	#mainnav .icon-menu span { color: #099; padding-left: 20px; }
	#mainnav ul { border: 0px solid green }
	#mainnav li { position: relative; display: block; float: right; margin: 0; padding: 0 10px; }

	#mainnav .trigger { display: block; border-bottom: 5px solid #333; }
	#mainnav .trigger span { display: block; height: 35px; text-transform: uppercase; cursor: pointer; }
	#mainnav .trigger:hover,
	#mainnav .trigger.active { border-color: #009999; }

	#mainnav .subitems { display: none; position: absolute; top: 35px; left: 0px; width: 180px; margin: 0; padding: 6px 0 5px 0; background-color: #009999; list-style-type: none; clear: left; z-index: 20; }
	#mainnav .subitems li { position: relative; float: none; }
	#mainnav .subitems a { position: relative; display: block; float: none; width: auto; height: auto; margin: 0; padding: 2px 1px; white-space: nowrap;}
	#mainnav .open .subitems { display: block; }



	#mainnav .display-block { display: block; }

	#quicklinks a { padding-left: 20px; background: url('../images/icons.png') no-repeat -10px -180px; text-transform: uppercase; }

	/* 
	 * Cookie Layer 
	 */

	#cookie-layer {
		position: fixed;
		bottom: 0px;
		max-width: 100%;
		background-color: white;
		box-shadow: 0px 0px 3px;
		width: 400px;
		z-index: 251;
	}
	
	#cookie-layer .cell {
		margin: 20px 45px;
		text-align: center;
	}
	
	#cookie-layer p {
		margin: 20px 0px;
	}
	
	#cookie-layer .button {
		font-weight: normal;
		padding: 10px;
		background-color: inherit;
		border: 2px solid #555553;
		margin: 10px;
	}
	
	.wrapper-button {
		display: flex;
		justify-content: center;
	}
	
	.hide {
		display: none;
	}
	
	.button {
		color: inherit;
	}
	
	.button:hover {
		color: #f59c00;
	}


	/* 
	 * Portfolio Teaser 
	 */

	.portfolio .portfolio-icon { padding: 10px 0 15px 0; }

	.portfolio-start .ym-gbox { text-align: center; }
	.portfolio-start .text { min-height: 180px; }
	.portfolio-start .portfolio-icon { margin-bottom: 30px; }
	.portfolio-start .button-link { position: relative; padding-top: 40px; }
	.portfolio-start .button-link a { display: block; width: 32px; height: 32px; margin: 0 auto; background: url('../images/icons.png') no-repeat 0px 0px; }
	.portfolio-start .button-link a:hover { background-position: 0px -35px; }


	/*
	 * Teaser / Slideshow 
	 */

	#teaser { padding: 0; background: #333 url('../images/bg_teaser_linie.png') repeat-x left bottom; }
	#teaser .kabelbild { height: 32px; background: transparent url('../images/bg_kabelbild.png') no-repeat right bottom; }
	.page_start #teaser { background-image: url('../images/bg_slideshow.png'); background-repeat: repeat-x; background-position: 0px 180px; }

	.page-header .headlines { padding-top: 20px; }

	#slideshow { min-height: 270px; }
	#slideshow .headlines { height: 185px; border: 0px solid red }
	#slideshow .flex-control-nav { display: none; }
	#slideshow .slides li { background-repeat: no-repeat; background-position: center 70px; }

	.flexslider { padding-top: 20px; list-style: none; }
	.flexslider .slides li { position: relative; }
	.flexslider .slides .slider-img { position: absolute; left: 0; top: 0; width: 100%; }

	#slider { min-height: 190px; }
	#slider .first-line span { padding-left: 55px; padding-right: 55px; background: url('../images/icons.png') no-repeat -35px -136px; }


	/* 
	 * Kontakt Box
	 */

	.contact-box { text-align: center; }
	.contact-box .buttonlink { margin 20px auto; padding: 12px 20px 10px 20px; color: #fff; background-color: #009999; font-size: 146.66%; text-transform: uppercase; text-decoration: none; }
	.contact-box .buttonlink:hover { background-color: #666; }


	/**
	 * Accordion 

	#accordion h3 { display: block; border-top: 1px solid #fff; padding: 7px 10px; margin: 0; text-decoration: none; font-weight: normal; color: #fff; background-color: #949DAE; cursor: pointer; }
	#accordion h3.selected { background-color: #091f3c; }
	#accordion div { padding: 5px 10px; line-height: 1.4em; background-color: #eee; }
	#accordion div a { display: inline; padding: 0; color: #df0079; background: transparent; font-weight: normal; }
	#accordion div a:hover { text-decoration: underline; }
  #accordion h3, #accordion div { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
	 */

	/**
	 * Formatierung der FAQs
 
	.faq-question { margin-top: 10px; padding-left: 12px; font-weight: bold; line-height: 1.5em; cursor: pointer; cursor: hand; background: url('../images/icon_pfeil333.gif') no-repeat; background-position: 0px 6px; }
	.faq-question:hover { text-decoration: underline; }
	.faq-open { background: url('../images/icon_pfeil333_open.gif') no-repeat; background-position: 0px 6px; text-decoration: underline; }
	.faq-answer { padding: 10px 0 25px 12px; line-height: 1.5em; }
	 */


	/**
 	 * Formatierung des Kontaktformulars
   */

	.formular { width: 400px; }
	.formular form { margin: 20px 0; }
	.formular fieldset{ position: relative; margin-bottom: 10px; padding: 20px 0px 8px 0px; }
	.formular div.nolabel { padding: 20px; font-weight: bold; }
	.formular p.legend { margin-bottom: 20px; font-size: 125%; }
	.formular label { width: 130px; display: block; float: left; text-align: left; padding-right: 10px; line-height: 2em; }
	.formular input, .formular textarea { border: 1px solid #999; padding: 3px; }
	.formular input.margin-top { margin-top: 3px; border: 0; }
	.formular input.submit { margin-left: 140px; padding: 3px 5px 2px 5px; color: #222; background: #fff; border: 1px solid #999; cursor: pointer; cursor: hand; }
	.formular input.textfield,
	.formular textarea.textfield { width: 210px; }
	.formular textarea { height: 100px; }
	.formular form fieldset div.floatbox { margin-bottom: 5px; overflow: hidden; }
	.formular form fieldset div.pflichtfelder { margin-bottom: 0; font-size: 87.5%; color: #333; }
	.formular label.error { width: 280px; margin-left: 140px; margin-bottom: 0.5em; padding-right: 0; text-align: left; color: red; font-size: 87.5%;  }
	.formular textarea.error,
	.formular input.error { border-color: red; }

	/* Spambot-Feld ausserhalb des viewports platzieren */
	.formular #mail { position: absolute; top: -10em; left: -99em; }



	/**
	 * Formatierung der Gallerie

	.gallery { margin: 10px -7px 0 -7px; padding: 0; list-style: none outside none; overflow: hidden; border: 0px solid red }
	.gallery li { float: left; margin: 0; }
	.gallery li a { display: block; margin: 7px; border: 0px solid #3C3C3C; }
	.gallery li a img { max-width: 100%; height: auto; }
	 */

}


/*  Responsive Galerie: 
 * Breite der Bilder 150px + 2 x 7px Abst�nde links/rechts = 164px gesamt pro Bild
 * 2 x 30px Abstand links/rechts der Galerie

@media only screen and (max-width: 995px) {
  .gallery li { width: 25%; }
}
@media only screen and (max-width: 555px) {
  .gallery li { width: 33.3333%; }
}
@media only screen and (max-width: 380px) {
  .gallery li { width: 50%; }
}
 */



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

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

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

	#logo { /* top: -30px; */ }
	#teaser .ym-inside { padding: 20px 0; }


}


/**
 * Responsive : Breite < 800px
 */

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

	/* 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;
	}

	.ym-equalize > [class*="ym-g"] > [class*="ym-gbox"] {
    margin-bottom: 0;
    padding-bottom: 0;
	}
	
	header .ym-wrapper { height: auto; }
	header .ym-inside { padding: 0; }
	#logo { position: relative; top: auto; left: none; }

	#mainnav { position: relative; right: auto; bottom: auto; margin-top: 20px; }
	#mainnav .opener { display: block; color: fff; }
	#mainnav .nav { display: none; }
	#mainnav .menu-open { display: block; }
	#mainnav li { float: none; padding: 0; }
	#mainnav .trigger { height: auto; border: none; padding: 0px 15px 15px 70px; font-size: 146.66%; }
	#mainnav .open .trigger { background: url('../images/icons.png') no-repeat 40px -206px; }
	#mainnav .trigger span { height: auto; border-top: 1px solid #999; padding-top: 20px; font-family: 'DIN Next W01 Regular',arial,helvetica,sans-Serif; }
	#mainnav .first span { border-top: none; }

	#mainnav .subitems { position: relative; top: auto; left: auto; width: auto; margin: 0; padding: 6px 0 5px 0; background: none; }
	#mainnav .subitems li {  }
	#mainnav .subitems a { color: #099; padding: 0px 15px 10px 70px; font-size: 106.66%; }
	#mainnav .subitems a.active,
	#mainnav .subitems a:hover { color: #099; text-decoration: underline; }

	.portfolio { padding: 0; }
	.portfolio .ym-grid { border-top: 1px solid #999; padding: 20px 0;  }
	.portfolio .ym-grid.first { border-top: none;  }
	.portfolio .ym-g62 .ym-gbox { padding-bottom: 0px;  }
	.portfolio .portfolio-icon { float: left; padding: 0px; }
	.portfolio h2 { margin-left: 60px; padding-top: 5px; }
	.portfolio .text { margin-left: 60px; }
	
	.portfolio-start {  }
	.portfolio-start .ym-gl { margin-bottom: 20px; border-bottom: 1px solid #999; padding-bottom: 20px; }
	.portfolio-start .portfolio-icon {  }
  .portfolio-start .text { min-height: 0; }
	.portfolio-start .button-link { padding: 20px 0; }

}


/**
 * Responsive : Breite < 768px
 */

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

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

	.ym-gbox { padding: 20px; }
	footer .ym-g33 { width: 50%; }
	footer .ym-gbox { padding-top: 30px; }
	.ym-g33.col-logo { float: none; width: 100%; }
	.ym-g33.col-logo .ym-gbox { padding: 0 20px; text-align: left; overflow: hidden; }
	.ym-g33.col-logo .ym-gbox img { margin-top: -45px; }

	.page_start #teaser { background-position: 0px 140px; }
	
	#slideshow { min-height: 215px; }
	#slideshow .headlines { height: 145px; }
	#slideshow .slides li { background-position: center 30px; }

	#slider { min-height: 140px; }
	#slider .first-line span { padding: 5px 50px; }

	.section-nocols,
	.contact-box { text-align: left; }

	.contact-box {  margin-bottom: -20px; }
	.contact-box .buttonlink { display: block; position: absolute; left: 0; bottom: 0; width: 100%; padding-left: 0; padding-right: 0; text-align: center; }

}


/**
 * Responsive : Breite < 620px
 */

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

	
}



/**
 * Responsive : Breite < 481px
 */

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

	.linearize-level-3,
	.linearize-level-3 > [class*="ym-g"] {
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		width: 100% !important;
	}


	.portfolio .ym-gbox { padding: 0px; }
	.portfolio .portfolio-icon { padding: 0 0 5px 20px; }
	.portfolio h2 { margin-left: 80px; margin-right: 20px; padding-top: 5px; }
	.portfolio .text { clear: left; margin-left: 20px; margin-right: 20px; }
	.portfolio .img-border img { border-left: none; border-right: none; }


	
	/**
	 * Formatierung des Kontaktformulars

	.formular { width: auto; }
	.formular label { width: auto; float: none; }
	.formular input.submit { margin-left: auto; }
	.formular input.textfield,
	.formular textarea.textfield { width: auto; }
	.formular label.error { width: auto; margin-left: auto; }
	 */


	/**
	 * Formatierung der Gallerie
 
	#fancybox-wrap { left:0 !important; width:100% !important; height: auto !important;  padding: 0 !important; }
	#fancybox-content { width:100% !important; height: auto !important; border: 0 !important; }
	#fancybox-close { right:0 !important; }
	 */

}


/**
 * Responsive : Breite < 400px
 */

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

}


/**
 * "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: 12pt; padding: 0 5px; }

	#topnav, #mainnav ul, #bottomnav, #logon-button, .slogan, .bgstretcher { display:none;	}


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


	.box { position: relative; margin-bottom: 1px; padding: 10px 20px; background-image: url('../images/bg_trans.png'); }
	.box.pleft240 { padding-left: 240px; }
	.box .posleft { position: absolute; left: 20px; top: 20px; width: 180px; padding-bottom: 20px; }

  .ym-g25 .ym-gbox-right .box { padding-left: 240px; }

  .ym-g25 { margin-top: 30px; }
  .page_start .box { padding-left: 240px; }
	
  #mainnav .last { margin: 20px 0px 0px auto; text-align: right; }
  
  
  /*------------------------------------------------------------------------------------------------------*/

	/* (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;
	}
	*/
	
	
	.formular { width: 400px; }
	.formular form { margin: 20px 0; }
	.formular fieldset{ position: relative; margin-bottom: 10px; padding: 20px 0px 8px 0px; }
	.formular div.nolabel { padding: 20px; font-weight: bold; }
	.formular p.legend { margin-bottom: 20px; font-size: 125%; }
	.formular label { width: 150px; display: block; float: left; text-align: left; padding-right: 10px; line-height: 2em; }
	.formular input, .formular textarea { border: 1px solid #999; padding: 3px; }
	.formular input.margin-top { margin-top: 3px; border: 0; }
	.formular input.submit { display: none; }
	.formular input.textfield,
	.formular textarea.textfield { width: 210px; }
	.formular textarea { height: 80px; }
	.formular form fieldset div.floatbox { margin-bottom: 5px; overflow: hidden; }
	.formular form fieldset div.pflichtfelder { display: none; }
	.formular #mail { display: none; }

}