/* Google Font API */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);
@import url(http://fonts.googleapis.com/css?family=Varela);



/************************* BASE.CSS ****************************/
@media all {

	/**
	* @section CSS-Normalisation Module
	*/

	/* (en) Global reset of paddings and margins for all HTML elements */
	/* (de) Globales Zur??etzen der Innen- und Au?nabst?e f??lle HTML-Elemente */
	* { margin:0; padding:0; }

	/* (en) Correction:margin/padding reset caused too small select boxes. */
	/* (de) Korrektur:Das Zur??etzen der Abst?e verursacht zu kleine Selectboxen. */
	option { padding-left:0.4em; } /* LTR */
	select { padding:1px; }

	/**
	* (en) Global fix of the Italics bugs in IE 5.x and IE 6
	* (de) Globale Korrektur des Italics Bugs des IE 5.x und IE 6
	*
	* @bugfix
	* @affected   IE 5.x/Win, IE6
	* @css-for    IE 5.x/Win, IE6
	* @valid      yes
	*/
	* html body * { overflow:visible; }

	body {
		/* (en) Fix for rounding errors when scaling font sizes in older versions of Opera browser */
		/* (de) Beseitigung von Rundungsfehler beim Skalieren von Schriftgr?? in ?eren Opera Versionen */
		font-size:100%;

		/* (en) Standard values for colors and text alignment */
		/* (de) Vorgabe der Standardfarben und Textausrichtung */
		background:#fff;
		color:#000;
		text-align:left; /* LTR */
	}

	/* (en) avoid visible outlines on DIV containers in Webkit browsers */
	/* (de) Vermeidung sichtbarer Outline-Rahmen in Webkit-Browsern */
	div:target { outline:0 none; }

	/* (en) HTML 5 - adjusting visual formatting model to block level */
	/* (en) HTML 5 - Anpassung des visuellen Formatmodells auf Blockelemente */
	article,aside,details,figcaption,figure,
	footer,header,hgroup,nav,section {
		display:block;
	}

	/* (en) HTML5 - default media element styles */
	/* (de) HTML5 - Standard Eigenschaften f??edia-Elemente */
	audio,
	canvas,
	video {
		display: inline-block;
	}

	/* (en) HTML5 - don't show <audio> element if there aren't controls */
	/* (de) HTML5 - <audio> ohne Kontrollelemente sollten nicht angezeigt werden */
	audio:not([controls]) {
		display: none;
	}

	/* (en) HTML5 - add missing styling in IE & old FF for hidden attribute  */
	/* (de) HTML5 - Eigenschaften f??as hidden-Attribut in ?eren IEs und FF nachr??n */
	[hidden] {
		display: none;
	}

	/* (en) force consistant appearance of input[type="search"] elements in all browser  */
	/* (de) Einheitliches Erscheinungsbild f??nput[type="search"] Elemente erzwingen  */
	input[type="search"] {
		-webkit-appearance: textfield;
	}
	input[type="search"]::-webkit-search-decoration {
		-webkit-appearance: none;
	}

	/* (en) Clear borders for <fieldset> and <img> elements */
	/* (de) Rahmen f??fieldset> und <img> Elemente l??en */
	fieldset, img { border:0 solid; }

	/* (en) new standard values for lists, blockquote, cite and tables */
	/* (de) Neue Standardwerte f??isten, Zitate und Tabellen */
	ul, ol, dl { margin:0 0 1em 1em; } /* LTR */
	.listen li {
		line-height:1.5em;
		margin-left:0.8em; /* LTR */
	}

	dt { font-weight:bold; }
	dd { margin:0 0 1em 0.8em; } /* LTR */

	blockquote { margin:0 0 1em 0.8em; } /* LTR */
	q { quotes: none; }

	blockquote:before, blockquote:after,
	q:before, q:after { content: ''; content:none }

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

 	/**
	* @section Float Handling Module
	*/

	/* (en) clearfix method for clearing floats */
	/* (de) Clearfix-Methode zum Clearen der Float-Umgebungen */
	.clearfix{display: block; height: 0; clear: both; visibility: hidden;}
	.ym-clearfix:before {
		content:"";
		display:table;
	}
	.ym-clearfix:after {
		clear:both;
		content:".";
		display:block;
		font-size:0;
		height:0;
		visibility:hidden;
	}

	/* (en) alternative solutions to contain floats */
	/* (de) Alternative Methoden zum Einschlie?n von Float-Umgebungen */
	.ym-contain-dt { display:table; width: 100%; overflow: visible; }
	.ym-contain-oh { overflow:hidden; width:100%; display:block; }
	.ym-contain-fl { float:left; width:100%; }

	/**
	* @section Accessibility Module
	*
	* (en) skip links and hidden content
	* (de) Skip-Links und versteckte Inhalte
	*/

	/* (en) classes for invisible elements in the base layout */
	/* (de) Klassen f??nsichtbare Elemente im Basislayout */
	.ym-skip,
	.ym-hideme,
	.ym-print {
		position:absolute;
		top:-32768px;
		left:-32768px; /* LTR */
	}

	/* (en) make skip links visible when using tab navigation */
	/* (de) Skip-Links f??ab-Navigation sichtbar schalten */
	.ym-skip:focus,
	.ym-skip:active {
		position:static;
		top:0;
		left:0;
	}

	/* skiplinks:technical setup */
	.ym-skiplinks {
		position:absolute;
		top:0px;
		left:-32768px;
		z-index:1000;
		width:100%;
		margin:0;
		padding:0;
		list-style-type:none;
	}

	.ym-skiplinks .ym-skip:focus,
	.ym-skiplinks .ym-skip:active {
		left:32768px;
		outline:0 none;
		position:absolute;
		width:100%;
	}
}

@media screen, projection {

	/**
	* @section Column Module
	*
	* default column config:
	* |-------------------------------|
	* | col1    | col3      | col2    |
	* | 20%     | flexible  | 20%     |
	* |-------------------------------|
	*/

	.ym-column { display:table; width:100%; }

	.ym-col1 { float:left; width:20%; }
	.ym-col2 { float:right; width:20%; }
	.ym-col3 { width:auto; margin:0 20%; }

	.ym-cbox { padding: 0 10px }
	.ym-cbox-left { padding: 0 10px 0 0 }
	.ym-cbox-right { padding: 0 0 0 10px }

	/* (en) IE-Clearing:Only used in Internet Explorer, switched on in iehacks.css */
	/* (de) IE-Clearing:Ben??t nur der Internet Explorer und ?? iehacks.css zugeschaltet */
	.ym-ie-clearing { display:none; }

	/**
	* @section Grid Module
	*
	*/

	.ym-grid {
		display:table;
		width:100%;
		table-layout:fixed;
		list-style-type: none;
		padding-left:0;
		padding-right:0;
		margin-left:0;
		margin-right:0;
	}

	.ym-gl { float:left; margin: 0; }
	.ym-gr { float:right; margin: 0 0 0 -5px; }

	.ym-g20 { width:20%; }
	.ym-g40 { width:40%; }
	.ym-g60 { width:60%; }
	.ym-g80 { width:80%; }
	.ym-g25 { width:25%; }
	.ym-g33 { width:33.333%; }
	.ym-g50 { width:50%; }
	.ym-g66 { width:66.666%; }
	.ym-g75 { width:75%; }
	.ym-g38 { width:38.2%; }
	.ym-g62 { width:61.8%; }

	.ym-gbox { padding: 0 10px }
	.ym-gbox-left { padding: 0 10px 0 0 }
	.ym-gbox-right { padding: 0 0 0 10px }

	.ym-equalize { overflow:hidden; }

	.ym-equalize > [class*="ym-g"] {
		display:table-cell;
		float:none;
		margin:0;
		vertical-align:top;
	}

	.ym-equalize > [class*="ym-g"] > [class*="ym-gbox"] {
		padding-bottom: 10000px;
		margin-bottom: -10000px
	}
}

@media all {

   /**
	* @section Form Module
	*
	* Vertical-Forms - technical base (standard)
	*
	* |-------------------------------|
	* | form                          |
	* |-------------------------------|
	* |   label                       |
	* |   input / select / textarea   |
	* |-------------------------------|
	* | /form                         |
	* |-------------------------------|
	*
	* (en) Styling of forms where both label and input/select/textarea are styled with display:block;
	* (de) Formulargestaltung, bei der sowohl label als auch input/select/textarea mit display:block; gestaltet werden
	*/

	.ym-form,
	.ym-form fieldset { overflow:hidden; }

	.ym-form div { position:relative; }
	
	.ym-form label,
	.ym-form .ym-message {
		position:relative;
		display:block; /* important for Safari */
	}

	.ym-form .ym-fbox-check label {
		display:inline;
	}

	.ym-form input,
	.ym-form textarea { cursor:text; }

	.ym-form input[type="checkbox"],
	.ym-form input[type="radio"],
	.ym-form select,
	.ym-form label { cursor:pointer; }

	/* small adjustments for Internet Explorer - all versions */
	.ym-form textarea { overflow: auto; }

	/* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. h?iche L??n im Firefox) */
	.ym-form input[type=hidden] { display:none !important; }

	/* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
	.ym-form .ym-fbox-text:before,
	.ym-form .ym-fbox-select:before,
	.ym-form .ym-fbox-check:before,
	.ym-form .ym-fbox-button:before {
		content:"";
		display:table;
	}

	.ym-form .ym-fbox-text:after,
	.ym-form .ym-fbox-select:after,
	.ym-form .ym-fbox-check:after,
	.ym-form .ym-fbox-button:after {
		clear:both;
		content:".";
		display:block;
		font-size:0;
		height:0;
		visibility:hidden;
	}

	/* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit ann?nd gleicher Breite */
	.ym-form select,
	.ym-form input,
	.ym-form textarea {
		display:block;
		position:relative;
		width:58.5%;
	}

	.ym-form .ym-fbox-check input {
		display: inline;
		width: auto;
	}

	/* Styling of buttons | Gestaltung von Buttons */
	.ym-form .ym-fbox-button input {
		display: inline;
		overflow:visible;  /* Fixes IE7 auto-padding bug */
		width:auto;
	}

	/* avoid jumping checkboxes & radiobuttons in IE8 */
	.ym-form .ym-fbox-check input:focus,
	.ym-form .ym-fbox-check input:hover,
	.ym-form .ym-fbox-check input:active {
		border:0 none;
	}

	/* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einr??n, wie die Breite der labels */

	.ym-full .ym-fbox-select select,
	.ym-full .ym-fbox-text input,
	.ym-full .ym-fbox-text textarea {
		width:94.2%;
		margin-right: -3px;
	}

   /**
	* Columnar forms display - technical base (optional)
	*
	* |-------------------------------------------|
	* | form                                      |
	* |-------------------------------------------|
	* |                                           |
	* |   label   |   input / select / textarea   |
	* |                                           |
	* |-------------------------------------------|
	* | /form                                     |
	* |-------------------------------------------|
	*
	* (en) Styling of forms where label floats left of form-elements
	* (de) Formulargestaltung, bei der die label-Elemente nach links flie?n
	*/

	/* Columnar display | Spalten-Darstellung */
	.ym-columnar .ym-fbox-text label,
	.ym-columnar .ym-fbox-select label {
		display:inline;
		float:left;
		width:30%; /* Can be fixed width too | Kann auch eine fixe Angabe sein */
	}
	.ym-columnar .ym-fbox-check {
		position:relative;
	}

	.ym-label { display:block; }
	.ym-columnar .ym-fbox-check .ym-label {
		position:absolute;
		top:0;
	}

	/* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einr??n, wie die Breite der labels */
	.ym-columnar .ym-fbox-check input,
	.ym-columnar .ym-error .ym-message {
		margin-left:30%;
	}

	/* global and local columnar settings for button alignment */
	.ym-columnar fieldset .ym-fbox-button,
	fieldset.ym-columnar .ym-fbox-button {
		padding-left:30%;
	}

	.ym-columnar .ym-fbox-select select,
	.ym-columnar .ym-fbox-text input,
	.ym-columnar .ym-fbox-text textarea {
		float:left;
		width:67.2%;
		margin-right: -3px;
	}

	/**
	* @section Form Construction Kit | Screen Adjustments
	*
	*/

	.ym-fbox-select select { width:60%; }
	.ym-full .ym-fbox-select select { width:94.8%; }
	.ym-columnar .ym-fbox-select select { width:68.8%; }
}

@media print {

	/**
	* @section print adjustments for core modules
	*
	* (en) float clearing for subtemplates. Uses display:table to avoid bugs in FF & IE
	* (de) Float Clearing f??ie Subtemplates. Verwendet display:table, um Darstellungsprobleme im FF & IE zu vermeiden
	*
	* @bugfix
	* @since     3.0
	* @affected  FF2.0, FF3.0, IE7
	* @css-for   all browsers
	* @valid     yes
	*/

	.ym-grid > .ym-gl,
	.ym-grid > .ym-gr {
		overflow:visible;
		display:table;
	}

	/* (en) make .ym-print class visible */
	/* (de) .ym-print-Klasse sichtbar schalten */
	.ym-print {
		position:static;
		left:0;
	}

	/* (en) generic class to hide elements for print */
	/* (de) Allgemeine CSS Klasse, um beliebige Elemente in der Druckausgabe auszublenden */
	.ym-noprint {
		display:none !important;
	}
}
/*********************** BASE.CSS ENDE *************************/





/************************* HLIST.CSS ****************************/
@media all {

	.ym-hlist {
		/* (en) containing floats in IE */
		/* (de) Einfassen der Floats im IE */
		width:100%;
		overflow:hidden;
		/* (en|de) Bugfix:IE - collapsing horizontal margins */
		position:relative;
		line-height:1em;
		background: #222;
	}

	.ym-hlist ul {
		margin:0;
		padding: 0.5em 1.5em;
		/* (en|de) Bugfix:IE - Doubled Float Margin Bug */
		display:inline;
		float:left; /* LTR */
	}

	.ym-hlist ul li {
		/* (en|de) Bugfix:IE - Doubled Float Margin Bug */
		display:inline;
		float:left; /* LTR */
		font-size:1.0em;
		line-height:1em;
		list-style-type:none;
		margin: 0 .25em 0 0;
		padding:0;
	}

	.ym-hlist ul li a,
	.ym-hlist ul li strong {
		background:transparent;
		color:#aaa;
		display:block;
		font-size:1em;
		line-height: 2em;
		padding: 0 0.5em;
		font-weight:normal;
		text-decoration:none;
		text-shadow: 0 1px 1px rgba(0,0,0,.5);
		width:auto;
	}

	.ym-hlist ul li a:focus,
	.ym-hlist ul li a:hover,
	.ym-hlist ul li a:active  {
		color: #ccc;
		background:#666;
		background: rgba(255,255,255,.25);
		-webkit-border-radius: 0.2em;
		-moz-border-radius: 0.2em;
		border-radius: 0.2em;
		text-decoration:none;
		outline: 0 none;
	}

	.ym-hlist ul li.active {
		background:#666;
		background: rgba(255,255,255,.3);
		-webkit-border-radius: 0.2em;
		-moz-border-radius: 0.2em;
		border-radius: 0.2em;
		color: #fff;
	}

	.ym-hlist ul li.active strong,
	.ym-hlist ul li.active a:focus,
	.ym-hlist ul li.active a:hover,
	.ym-hlist ul li.active a:active {
		background:transparent;
		color:#fff;
		text-decoration:none;
	}


	/* search form -------------------------------------- */
	.ym-searchform {
		float:right;
		display: inline;
		line-height: 2em;
		padding: 0.5em 1.5em;
	}

	.ym-searchform .ym-searchfield {
		background: #fff;
		line-height: 1em;
		padding: 0.25em;
		width: 12em;
		border: solid 1px #888;
		border: solid 1px rgba(255,255,255,.1);
		outline: none;

		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
		-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
		box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
	}

	.ym-searchform .ym-searchbutton {
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 1em;
		line-height: 1.3571em;
		padding: 0.25em;
		border: solid 1px transparent;
		text-shadow: 0 1px 1px rgba(0,0,0,.5);

		-webkit-border-radius: .2em;
		-moz-border-radius: .2em;
		border-radius: .2em;

		background: #5f5f5f;
		background: rgba(255,255,255,.2);
	}
}
/*********************** HLIST.CSS ENDE *************************/








/*********************** GRAY THEME.CSS *************************/
@media screen and (min-width: 0px){

	/**
	* @section general width settings for formular elements in modern browsers
	*          switching to CSS3 box modell "border-box" for perfect flexible forms
	*
	* Styling for: <labels>, <input>, <textarea> and <select>
	*
	*/

	.ym-form input,
	.ym-form input,
	.ym-form textarea,
	.ym-form select {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		width:60%;
	}

	.ym-columnar label {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	.ym-columnar .ym-fbox-select select,
	.ym-columnar .ym-fbox-text input,
	.ym-columnar .ym-fbox-text textarea { width:70%; }

	.ym-full .ym-fbox-select select,
	.ym-full .ym-fbox-text input,
	.ym-full .ym-fbox-text textarea { width:100%; }
}

@media screen, projection {

	/**
	* @section general form styling
	*
	* Styling for: <form>, <fieldset>, <legend>, <label> and rows (class="ym-fbox-[xxx]")
	*
	*/
	.ym-form {
		background:#f4f4f4;
		border:2px #fff solid;
		margin: 1.5em 0 0 0;
		padding: 0;
		-webkit-box-shadow: 0 0 4px #ddd;
		-moz-box-shadow: 0 0 4px #ddd;
		box-shadow: 0 0 4px #ddd;
	}

	.ym-form fieldset {
		position:static;
		background:transparent;
		margin: 0.75em 0 0.75em 0;
		padding: 0 0.5em;
	}

	.ym-form legend {
		background:transparent;
		color:#000;
		font-size:1.2em;
		line-height:1.25em;
		font-weight:bold;
		padding:0 0.5em;
	}

	.ym-form label {
		color:#666;
		line-height: 1.5em;
	}

	.ym-label {
		color: #666;
		padding-top: 0.25em;
	}

	.ym-form .ym-form div.ym-fbox-check:focus + label {
		color:#000;
	}

	/* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
	.ym-form div.ym-fbox-text,
	.ym-form div.ym-fbox-select,
	.ym-form div.ym-fbox-check,
	.ym-form div.ym-fbox-button {
		padding: 0.3em 1em;
		margin-bottom: 0.5em;
	}

	.ym-form div.ym-fbox-button {
		background: #ececec;
		border-top: 1px #e0e0e0 solid;
		padding:0 1em 1.5em 1em;
		margin: 0;
	}

	.ym-form .ym-gbox {
		padding: 0 0.5em;
		margin-right: 0;
	}

	.ym-form h6 {
		color: #000;
		margin: 1em 0 0 1em;
	}

	/**
	* @section styling form elements
	*
	* Styling for: Input, Textarea, Select ...
	*
	*/

	/* styling standard form elements with 'almost' equal flexible width */
	/* Gestaltung der einzelnen Formularelemente mit ann?nd gleicher Breite */
	.ym-form .ym-fbox-text input,
	.ym-form .ym-fbox-text textarea {
		line-height: 1em;
		padding: 0.25em 0.3em;
		margin-top: -2px;
	}

	.ym-form .ym-fbox-select select {
		line-height: 1em;
		padding: 0.25em 2px 0.25em 1px;
		margin-top: -2px;
	}

	/* proportional fonts for all form elements */
	.ym-form input,
	.ym-form textarea,
	.ym-form select,
	.ym-form optgroup {
		font-family:Arial, Helvetica, sans-serif;
		-webkit-box-shadow: inset 0 0 4px #eee;
		-moz-box-shadow: inset 0 0 4px #eee;
		box-shadow: inset 0 0 4px #eee;
	}

	.ym-form optgroup {
		font-style:normal;
		font-weight:bold;
	}

	.ym-form .ym-fbox-text input,
	.ym-form .ym-fbox-text textarea,
	.ym-form .ym-fbox-select select {
		border:1px solid #ddd;
	}

	/* General form styling	| Allgemeine Formatierung des Formulars */
	.ym-form .ym-message {
		color:#666;
		margin-bottom:0.5em;
	}

	/* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
	.ym-form .ym-required {
		color:#800;
		font-weight:bold;
	}

	/* form validation highlight colors */
	.ym-form input:valid,
	.ym-form textarea:valid { background-color: #fff; }
	.ym-form input:invalid,
	.ym-form textarea:invalid { background-color: #fdd; }

	/**
	* @section error messages
	*
	*/

	.ym-form .ym-error label {
		color:#800;
		font-weight:normal;
	}

	.ym-form .ym-error input,
	.ym-form .ym-error select,
	.ym-form .ym-error textarea {
		border: 1px #800 solid;
	}

	.ym-form .ym-error input:hover,
	.ym-form .ym-error input:focus,
	.ym-form .ym-error select:hover,
	.ym-form .ym-error select:focus,
	.ym-form .ym-error textarea:hover,
	.ym-form .ym-error textarea:focus {
		border: 1px #800 solid !important;
	}

	.ym-form .ym-error .ym-message {
		color:#800;
		font-weight: bold;
		margin-top: 0;
	}

	/* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
	.ym-form div.ym-fbox-text input:focus,
	.ym-form div select:focus,
	.ym-form div textarea:focus,
	.ym-form div.ym-fbox-text input:hover,
	.ym-form div select:hover,
	.ym-form div textarea:hover,
	.ym-form div.ym-fbox-text input:active,
	.ym-form div select:active,
	.ym-form div textarea:active {
		border:1px #888 solid;
		background:#fff;
	}

	/**
	* @section Buttons
	*
	* inspired from: Catalin Rosu (http://www.red-team-design.com/just-another-awesome-css3-buttons)
	*/

	.ym-button,
	.ym-form button,
	.ym-form input[type="button"],
	.ym-form input[type="reset"],
	.ym-form input[type="submit"] {
		display: inline-block;
		white-space: nowrap;
		background-color: #ccc;
		background-image: -webkit-linear-gradient(top, #eee, #ccc);
		background-image: -moz-linear-gradient(top, #eee, #ccc);
		background-image: -ms-linear-gradient(top, #eee, #ccc);
		background-image: -o-linear-gradient(top, #eee, #ccc);
		background-image: linear-gradient(top, #eee, #ccc);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
		border: 1px solid #777;
		-webkit-border-radius: .2em;
		-moz-border-radius: .2em;
		border-radius: .2em;
		-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		color: #333 !important;
		cursor: pointer;
		font: normal 1em/2em Arial, Helvetica;
		margin: 1.5em 0.75em 0 0;
		padding: 0 1.5em;
		overflow: visible; /* removes extra side spacing in IE */
		text-decoration: none !important;
		text-shadow: 0 1px 0 rgba(255,255,255,.8);
	}

	.ym-form button:hover,
	.ym-form input[type="button"]:hover,
	.ym-form input[type="reset"]:hover,
	.ym-form input[type="submit"]:hover,
	.ym-button:hover {
		background-color: #ddd;
		background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
		background-image: -moz-linear-gradient(top, #fafafa, #ddd);
		background-image: -ms-linear-gradient(top, #fafafa, #ddd);
		background-image: -o-linear-gradient(top, #fafafa, #ddd);
		background-image: linear-gradient(top, #fafafa, #ddd);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
	}

	.ym-form button:active,
	.ym-form input[type="button"]:active,
	.ym-form input[type="reset"]:active,
	.ym-form input[type="submit"]:active,
	.ym-button:active {
		background-color: #bbb;
		background-image: -webkit-linear-gradient(top, #ccc, #bbb);
		background-image: -moz-linear-gradient(top, #ccc, #bbb);
		background-image: -ms-linear-gradient(top, #ccc, #bbb);
		background-image: -o-linear-gradient(top, #ccc, #bbb);
		background-image: linear-gradient(top, #ccc, #bbb);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
		box-shadow: 2px 2px 3px rgba(0,0,0,.2) inset;
		position: relative;
		top: 1px;
	}

	.ym-form button:focus,
	.ym-form input[type="button"]:focus,
	.ym-form input[type="reset"]:focus,
	.ym-form input[type="submit"]:focus,
	.ym-button:focus {
		outline: 0;
		background: #fafafa;
	}

	/* pseudo elements don't work on input */
	.ym-form button:before,
	.ym-button:before {
		background: #ccc;
		background: rgba(0,0,0,.1);
		float: left;
		width: 1em;
		text-align: center;
		font-size: 1.5em;
		margin: 0 1em 0 -1em;
		padding: 0 .2em;
		-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
		-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
		box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
		-moz-border-radius: .15em 0 0 .15em;
		-webkit-border-radius: .15em 0 0 .15em;
		border-radius: .15em 0 0 .15em;
		pointer-events: none;
	}

	.ym-add:before { content: "\271A"; }
	.ym-delete:before { content: "\2718"; }
	.ym-edit:before { content: "\270E"; }
	.ym-email:before { content: "\2709"; }
	.ym-like:before { content: "\2764"; }
	.ym-next:before { content: "\279C"; }
	.ym-play:before { content: "\25B6"; }
	.ym-save:before { content: "\2714"; }
	.ym-spark:before { content: "\2737"; }
	.ym-star:before { content: "\2605"; }

	/* removes extra inner spacing in Firefox */
	.ym-form button::-moz-focus-inner {
		border: 0;
		padding: 0;
	}

	/* If line-height can't be modified, then fix Firefox spacing with padding */
	.ym-form input[type=button]::-moz-focus-inner,
	.ym-form input[type=reset]::-moz-focus-inner,
	.ym-form input[type=submit]::-moz-focus-inner {
		padding: .4em;
	}

	/* The disabled styles */
	.ym-form button[disabled],
	.ym-form button[disabled]:hover,
	.ym-form input[type=button][disabled],
	.ym-form input[type=button][disabled]:hover,
	.ym-form input[type=reset][disabled],
	.ym-form input[type=reset][disabled]:hover,
	.ym-form input[type=submit][disabled],
	.ym-form input[type=submit][disabled]:hover,
	.ym-button.ym-disabled,
	.ym-button.ym-disabled:hover {
		background: #eee;
		color: #aaa !important;
		border-color: #aaa;
		cursor: default;
		text-shadow: none;
		position: static;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	/* ie6 support styles - redefined buttons, because of missing support for attribute selectors */
	* html .ym-button,
	* html .ym-form button {
		display: inline-block;
		white-space: nowrap;
		background-color: #ccc;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
		border: 1px solid #777;
		color: #333 !important;
		cursor: pointer;
		font: normal 1em/2em Arial, Helvetica;
		margin: 1.5em 0.75em 0 0;
		padding: 0 1.5em;
		overflow: visible; /* removes extra side spacing in IE */
		text-decoration: none !important;
	}

	* html .ym-form button:focus,
	* html .ym-button:focus {
		outline: 0;
		background: #fafafa;
	}

	* html .ym-form button:hover,
	* html .ym-button:hover {
		background-color: #ddd;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
	}

	* html .ym-form button:active,
	* html .ym-button:active {
		background-color: #bbb;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
		position: relative;
		top: 1px;
	}

	* html .ym-button.ym-disabled,
	* html .ym-button.ym-disabled:hover {
		background: #eee;
		color: #aaa !important;
		border-color: #aaa;
		cursor: default;
		text-shadow: none;
		position: static;
	}
}
/********************* GRAY THEME.CSS ENDE **********************/







/*********************** TYPOGRAPHY.CSS *************************/
@media all {
	/* (en) reset font size for all elements to standard (16 Pixel) */
	/* (de) Alle Schriftgr?? auf Standardgr??(16 Pixel) zur??etzen */
	html * { font-size:100%; }

	/**
	* (en) reset monospaced elements to font size 16px in all browsers
	* (de) Schriftgr??von monospaced Elemente in allen Browsern auf 16 Pixel setzen
	*
	* @see: http://webkit.org/blog/67/strange-medium/
	*/

	textarea,
	pre,
	code,
	kbd,
	samp,
	var,
	tt {
		font-family:Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier;
	}

	/* (en) base layout gets standard font size 14px */
	/* (de) Basis-Layout erh? Standardschriftgr??von 14 Pixeln */
	body {
		font-family: "Varela", Georgia, "Times New Roman", Times, serif;
		font-size:87.50%; /* base: 14px */
		color:#444;

		/* (en) Prevent auto-scaling of text in mobile webkit browsers */
		/* (de) Automatische Schriftvergr??ung in mobilen Webkit-Browsern vermeiden */
		-webkit-text-size-adjust:100%;
	}

	/*--- Headings | ?erschriften ------------------------------------------------------------------------*/

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: "Varela", Arial, Helvetica, sans-serif;
		font-weight: 400;
		color:#161e21;
		margin:0;
	}
	
	h1 						{margin:0; padding:5px 15px 5px 15px; display: inline; color:white; font-size:350%; font-weight:bold; line-height: 0.8571em; background:rgba(0,0,0,0.6);}

	h2 {
		font-size:250%;
		line-height: 1.2em;
		margin: 0.6em 0 0 0;
	}

	h3 {
		font-size:175%;
		line-height: 0.8571em;
		margin:0.8571em 0 0 0;
	}

	h4 {
		font-size:133.33%;
		line-height: 1.125em;
		margin:0; padding:0; color:#fff; font-weight:bold; text-shadow:1px 1px 0 rgb(0,0,0);
	}

	h5 {
		font-size:116.67%;
		line-height: 1.2857em;
		margin: 1.2857em 0 0 0;
	}

	h6 {
		font-weight: bold;
		font-size:100%;
		line-height: 1.5em;
		margin: 1.5em 0 0 0;
	}

	/* --- Lists | Listen  -------------------------------------------------------------------------------- */

	.liste ul,
	ol,
	dl {
		font-size:1em;
		line-height:1.5em;
		margin: 1.5em 0 0 1em;
	}

	ul {
		list-style-type:disc;
	}

	ol {
		list-style-type:decimal;
	}

	ul ul {
		list-style-type:circle;
		margin-top:0;
	}

	ol ol {
		list-style-type:lower-latin;
		margin-top:0;
	}

	ol ul {
		list-style-type:circle;
		margin-top:0;
	}

	.listen li {
		font-size:1em;
		line-height:1.5em;
		margin-left:0.8em;
	}

	dt { font-weight:bold; }

	dd { margin:0 0 1.5em 0.8em; }

	/* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */

	p							{color:white;}
	p.mitrahmen					{color:white; margin:0; padding:15px; font-size:1em; background:rgba(0,0,0,0.6);}

	blockquote, cite, q {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-style:italic;
	}

	blockquote {
		margin:1.5em 0 0 1.5em;
		color:#666;
	}

	strong, b { font-weight:bold; }

	em, i { font-style:italic; }

	big {
		font-size:116.667%;
	}

	small {
		font-size:85.71%;
	}

	pre,
	code,
	kbd,
	tt,
	samp,
	var {
		font-size:100%;
	}

	pre {
		line-height:1.5em;
		margin: 1.5em 0 0 0;
		white-space: pre;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
	pre, code { color:#800; }

	kbd, samp, var, tt {
		color:#666;
		font-weight:bold;
	}

	var, dfn { font-style:italic; }

	acronym, abbr {
		border-bottom:1px #aaa dotted;
		font-variant:small-caps;
		letter-spacing:.07em;
		cursor:help;
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sup { top: -0.5em; }
	sub { bottom: -0.25em; }

	mark {
		background: #ff0;
		color: #000;
	}

	hr {
		color:#fff;
		background:transparent;
		margin:0 0 0.75em 0;
		padding:0 0 0.75em 0;
		border:0;
		border-bottom:1px #eee solid;
	}

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

	a {
		color:#fff;
		background:transparent;
		text-decoration:none;
	}

	a:active { outline: none; }

	/* (en) maximum constrast for tab focus - change with great care */
	/* (en) Maximaler Kontrast f??ab Focus - Udern Sie diese Regel mit Bedacht */
	a:hover,
	a:focus {
		text-decoration:none;
	}

	/* --- images ------------------ */

	img,
	figure {
		margin: 0;
	}

	.flexible {
		margin-top: 1.5em;
		max-width: 100%;
		height: auto;
	}

	* html .flexible {	/* IE6 support */
		width: 98%;		/* 2% space for borders */
	}

	.bordered {
		border: 5px #eee solid;
		border: 5px rgba(255,255,255,1) solid;
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
		box-shadow: 0 0 10px rgba(0,0,0,.5);
	}

	/**
	* ----------------------------------------------------------------------- #
	*
	* Generic Content Classes
	*
	* (en) standard classes for positioning and highlighting
	* (de) Standardklassen zur Positionierung und Hervorhebung
	*
	* @section content-generic-classes
	*/
	.highlight {
		color:#c30;
	}

	.dimmed {
		color:#888;
	}

	.box {
		border-radius: 0.3em;
		border-width: 1px;
		border-style: solid;
		border-color: #888;
		border-color: rgba(0,0,0,.3);
		-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
		-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
		color: #444;
		color: rgba(0,0,0,.8);
		padding: 1.4286em;
		margin: 1.5em 0 0 0;
	}

	.box > *:first-child {
		margin-top: 0;
	}

	.label {
		font-family: Verdana, Geneva, sans-serif;
		padding: 1px 6px 2px;
		display: inline-block;
		vertical-align:middle;
		letter-spacing: normal;
		white-space:nowrap;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		background: #06C;
		color: #fff;
		font-size: 10px;
		line-height: 12px;
	}

	.info {
		background:#f4f4f4;
	}

	.success {
		background:#8c8;
	}

	.warning {
		background:#cc8;
	}

	.error {
		background:#c88;
	}

	.float-left {
		float:left;
		display:inline;
		margin: 1.5em 1em 0 0;
	}

	.float-right {
		float:right;
		display:inline;
		margin: 1.5em 0 0 1em;
	}

	.center {
		display:block;
		text-align:center;
		margin: 1.5em auto 0 auto;
	}

	/**
	* ------------------------------------------------------------------------------------------------- #
	*
	* Tables | Tabellen
	*
	* (en) Generic classes for table-width and design definition
	* (de) Generische Klassen f??ie Tabellenbreite und Gestaltungsvorschriften f??abellen
	*
	* @section content-tables
	*/

	table {
		width:100%;
		border-collapse:collapse;
		margin: 1.3571em 0 0 0;
		color:#333;
		border-top: 1px #ccc solid;
		border-bottom: 1px #ccc solid;
	}

	table.narrow {
		margin:  1.4286em 0 0 0;
	}

	table.narrow th,
	table.narrow td {
		padding: 0 0.5em;
		line-height: 1.4286em;
	}

	table.bordertable {
		border:1px #ccc solid;
	}

	table caption {
		font-variant:small-caps;
	}

	th, td {
		line-height: 1.5em;
		vertical-align: top;
		padding: 0.7143em 0.5em;
	}

	th *:first-child,
	td *:first-child {
		margin-top: 0;
	}

	th.nowrap,
	td.nowrap {
		white-space: nowrap;
	}

	thead th {
		text-align: left;
		color:#000;
		border-bottom:2px #000 solid;
	}

	.bordertable thead th {
		background:#e0e0e0;
		border-right:1px #ccc solid;
		border-bottom:1px #ccc solid;
	}

	.bordertable tbody th[scope="row"] {
		background:#f0f0f0;
	}

	tbody th {
		text-align: left;
		border-top:1px solid #ccc;
		text-align:left;
	}

	.bordertable tbody th {
		border-right:1px solid #ccc;
	}

	tbody td {
		text-align: left;
		border-top:1px solid #ccc;
	}

	.bordertable tbody td {
		border-right:1px solid #ccc;
	}

	/* highlight row on mouse over */
	tbody tr:hover th,
	tbody tr:hover td {
		background:#f8f8f8;
	}
}
/********************* TYPOGRAPHY.CSS ENDE **********************/









/******************* SCREEN-PAGE-LAYOUT.CSS *********************/
@media screen {

	/* force vertical scrollbar */
	body {
		overflow-y: scroll;
	}

	/* Layout Module Configuration & fallback for unsupported media queries */
	.ym-wrapper {
		min-width: 760px;
		max-width: 80em;
		margin:0 auto 70px auto;
	}
	
	#impressum {
		margin:0 auto 40px auto;
	}
	
	.ym-wbox { padding: 10px; }

	/* Basic Element Styling */

header								{top:0; z-index:100; width:100%; height:100px; background:#000; background:rgba(0, 0, 0, .5); margin:30px 0 0 0; padding:0;}
header img:first-of-type				{margin:10px 0 0 0;}
#sprachauswahl						{float:right;}
#sprachauswahl img					{margin:10px 0 0 0;}
#sprachauswahl img:hover				{opacity:0.8; filter:alpha(opacity=80);}
#trennlinie							{height:25px; margin:8px 20px 0 20px; float:right;}
header select							{margin:10px 0 0 0; float:right;}


	header h1 {
		background: transparent;
		color: #fff;
	}

	nav {
		background: #222222;
	}

	#main {
	}
	
#transparentes_raster				{position:fixed; top:0; z-index:-100; background-image:url('../bilder/bg.png'); width:100%; height:100%;}

#sticky_navigation_wrapper 			{z-index:9998; width:100%; height:52px; background:rgba(0, 0, 0, .8);}
#sticky_navigation					{min-width:760px; max-width:80em; margin:auto;}
#sticky_navigation ul 				{list-style:none; margin:0; padding:5px;}
#sticky_navigation ul li 				{margin:0; padding:0; display:inline;}
#sticky_navigation ul li a 				{display:block; float:left; padding:0 30px 0 15px; color:#ddd;}
#sticky_navigation ul li a span			{font-size:11px;}
#sticky_navigation ul li a h4:hover		{color:#a7a7a7;}

#veranstaltungen  .rahmen						{width:90%;}
#veranstaltungen  .rahmen  div:first-of-type 		{width:300px; float:left;}
#veranstaltungen  .rahmen  img:first-of-type		{width:300px;}
#veranstaltungen  .rahmen  a:nth-of-type(1) img	{width:40px; margin-top:10px; float:right;}
#veranstaltungen  .rahmen  div:nth-of-type(2)		{margin-left:320px; margin-bottom:5px;}
	
#newsletter form						{margin:0 0 15px 0;}
#newsletter form	div					{margin:0 0 6px 0;}
#newsletter label 						{display:inline-block; width:70px; text-align:right; margin:0 15px 0 0; color:white;}
#newsletter input						{width:280px; height:22px; border:1px solid #000;}
#newsletter select					{width:152px; margin:0 0 0 -3px; border:1px solid #000;}
#newsletter .tooltip					{float:right; margin:1px 0 0 10px;}
#newsletter h4						{background-color:#f00; color:#fff; display:inline; padding:2px 10px 2px 5px; text-shadow:none;}
#newsletter h4 img					{margin:6px 0 -2px 3px;}
#newsletter h4 a:hover				{opacity:0.8; filter:alpha(opacity=80); color:#fff;}
.button_over:hover					{opacity:0.8; filter:alpha(opacity=80);}

.socialicons						{margin:0 15px 0 0;}
#socialmedia .rahmen :last-child		{margin:0;}
.social_media_icons:hover			{opacity:0.8; filter:alpha(opacity=80);}					

#videos h4							{margin:10px 0 2px 0;}
#anfahrt h4							{margin:10px 0 2px 0;}
#impressum div *						{width:90%;}
	
	footer {
		margin: 1.5em 0 0 0;
		background: #eee;
		color: #444;
		padding: 1.5em;
	}

	footer p {
		margin: 0;
	}
	
#social_media_slider_rechts_facebook	{top:260px;}
#social_media_slider_rechts_youtube		{top:340px;}
#social_media_slider_rechts_googleplus	{top:420px;}
#social_media_slider_rechts_twitter		{top:500px;}
#social_media_slider_rechts_instagram	{top:580px;}
.social_media_slider_rechts				{position:fixed; right:-40px;}	

	/* Column-Set Configuration: 1-3 (sidebar right) */
	.ym-column {
		display:block;
		overflow:hidden;
		padding-right: 340px;
		width:auto;
	}

	.ym-col1 { /* content */
		float:left;
		width: 100%;
	}

	.ym-col3 { /* sidebar */
		position:relative;
		float:left;
		width: 340px;
		margin-left:0;
		margin-right:-340px;
	}

.rahmen							{float:left; margin:0 15px 15px 0; padding:15px 15px 10px 15px; background:rgba(0,0,0,0.6);}

	
	.ym-col1 .ym-cbox { padding: 0 0.75em 0 1.5em; }
	.ym-col3 .ym-cbox { padding: 0 20px 0 12px; }

	.ym-gbox { padding: 0 1.5em 0 0; }

	/* 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;
	}
	
.view-tenth {background-size:300px auto;	}

/********************** CSS3 IMAGE CAPTION *********************/
.view {
    width: 300px;
    height: 422px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
.view .mask, .view .content {
    width: 300px;
    height: 422px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
	background: url(../bilder/vergroessern.png) no-repeat center center; width:100%; height:100%; margin:auto; padding:0;
}
.view-tenth img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
    background-color: rgba(0, 0, 0, 0.4);
    transition: all 0.5s linear;
    opacity: 0;
}  
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth:hover img {
    transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask {
    opacity: 1;
}                                                                           
.view-tenth:hover p {
    transform: scale(1);
    opacity: 1;
}
/********************** CSS3 IMAGE CAPTION ENDE *********************/
}

/* reset fallback values in modern browsers */
@media screen and ( min-width: 0px ) {
	.ym-wrapper {
		min-width: 0px;
	}
}


@media screen and ( max-width: 960px ) {
	#veranstaltungen .rahmen, #videos .rahmen, #anfahrt .rahmen {width:96%;}
	#impressum div * {width: 96%;}
	#sticky_navigation_wrapper {height:112px;}
	#sticky_navigation {padding-top:5px;}
	#sticky_navigation ul li a {display: block; float:left; padding: 0 30px 10px 15px; color: #ddd; width: 170px;}
	
	.social_media_slider_rechts {display:none;}
	.rahmen iframe {width:100%; height:450px;}
	
}




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

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

	.linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"],
	.linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
		overflow: hidden; /* optional for containing floats */
		padding: 0;
		margin: 0;
	}

	nav .ym-hlist ul {
		padding-right: 10px;
	}

	.ym-searchform {
		display:block;
		float: none;
		width: auto;
		padding-right: 10px;
		text-align: right;
	}

	.ym-searchform input[type="search"] {
		width: 14%;
	}
	.rahmen iframe {width:100%; height:300px;}
	.view-tenth {background-size:200px auto;	}
	.view {height:281px;}
	#veranstaltungen .rahmen div:first-of-type {width: 200px;}
	#veranstaltungen .rahmen img:first-of-type {width: 200px;}
	#veranstaltungen .rahmen div:nth-of-type(2) {margin-left:220px;}
	.view .mask, .view .content  {height:281px;}

}

@media screen and (max-width: 650px) {
	h4 {font-size:110%;}
	header #logo {width:200px;}
	#sticky_navigation_wrapper {height: 152px;}
	#sticky_navigation ul li a {display: block; float:left; padding: 0 10px 10px 15px; color: #ddd; width: 33%;}
	.view-tenth {background-size:150px auto;	}
	.view {height:211px;}
	#veranstaltungen .rahmen div:first-of-type {width: 150px;}
	#veranstaltungen .rahmen img:first-of-type {width: 150px;}
	#veranstaltungen .rahmen div:nth-of-type(2) {margin-left:170px;}
	.view .mask, .view .content  {height:211px;}
}

@media screen and ( max-width: 520px) {
	#sprachauswahl {margin-right:10px;}
	header #logo {width:200px;}
	header select {margin: -20px 10px 0 0;}
	#sticky_navigation_wrapper {height: 145px;}
	#sticky_navigation ul li a {display: block; float:left; padding: 0 10px 4px 15px; color: #ddd; width: 100%;}
	#sticky_navigation ul li a span {display: none;}
	
	h1 {font-size:150%;}
	.view-tenth {background-size:100% auto;	}
	.view {height:211px;}
	#veranstaltungen .rahmen div:first-of-type {width: 100%; height: auto;}
	#veranstaltungen .rahmen img:first-of-type {width: 100%;}
	#veranstaltungen .rahmen div:nth-of-type(2) {margin-left:10px; margin-top:20px; padding-bottom:15px;}
	.view .mask, .view .content  {height:211px;}
	#veranstaltungen .rahmen, #socialmedia .rahmen,  #videos .rahmen, #anfahrt .rahmen, #impressum .rahmen {width:100%; margin:0; padding:0;}
	#socialmedia .rahmen {background:none;}
	#socialmedia img {width:25%;}
	#videos p {margin-bottom:30px;}
	#videos p:lastchild {margin-bottom:10px;}
	#videos h4, #videos p, #anfahrt h4, #anfahrt p {padding:0 10px 0 10px;}
	#anfahrt p {margin-bottom:10px;}
	.socialicons {margin:0;}
	#impressum .rahmen, #impressum div * {width:100%;}
	#impressum p {padding:10px;}
}



@media screen and ( max-width: 480px) {
	header #logo {width:150px;}
	.ym-wbox {
		padding: 0;
	}

	header {
		padding: 0.75em 10px;
	}

	header h1 {
		font-size: 1.5em;
		line-height: 1em;
		margin: 0;
	}

	footer,
	#main,
	.ym-searchform,
	nav .ym-hlist ul {
		padding-left: 10px;
		padding-right: 10px;
	}

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

	.linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"],
	.linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] {
		overflow: hidden; /* optional for containing floats */
		padding: 0;
		margin: 0;
	}

	.ym-searchform,
	nav .ym-hlist ul,
	nav .ym-hlist li {
		display:block;
		float: none;
		width: auto;
		text-align: left;
	}

	.ym-searchform input[type="search"] {
		width: 75%;
	}

}

@media screen and ( max-width: 350px) {
	#sprachauswahl {display:none;}
	#trennlinie {display:none;}
	header select {margin:10px 0 0 0; width:95%; float:left;}
}
/***************** SCREEN-PAGE-LAYOUT.CSS ENDE ******************/






/************************* PRINT.CSS ***************************/
@media print {
body 							{font-size: 10pt; padding: 0 5px;}

/* (de) F??en Druck nicht ben??te Container des Layouts abschalten */
nav,	.ym-searchform 				{display:none;}

/* (de) Vermeidung von Seitenumbr??n direkt nach einer ?erschrift */
h1,h2,h3,h4,h5,h6 				{page-break-after:avoid;}

/* (de) optionale Ausgabe der URLs von Hyperlinks */
	a[href]:after {
		content:" <URL:"attr(href)">";
		color:#444;
		background:inherit;
		font-style:italic;
	}
}
/*********************** PRINT.CSS ENDE ************************/








/************************* SUPERSIZED **************************/
body {height:100%; }
	img { border:none; }
	
	#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../bilder/progress.gif) no-repeat center center;}
	
	#supersized {display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
		#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
			#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 li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
		#supersized a { width:100%; height:100%; display:block; }
			#supersized li.prevslide { z-index:-20; }
			#supersized li.activeslide { z-index:-10; }
			#supersized li.image-loading { background:#111 url(../bilder/progress.gif) no-repeat center center; width:100%; height:100%; }
				#supersized li.image-loading img{ visibility:hidden; }
			#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
			
				#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:0px; left:0; z-index:4; background:url(../bilder/nav-bg.png) repeat-x; position:fixed; }
		#controls { overflow:hidden; height:100%; position:relative; text-align:left; z-index:5; }
			#slidecounter { float:left; color:#999; font:14px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow:#000 0 -1px 0; margin:0px 10px 0 15px; line-height:42px; }
			#slidecaption { overflow:hidden; float:left; color:#FFF; font:400 14px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow:#000 1px 1px 2px; margin:0 20px 0 0; line-height:42px; }
			
			#navigation { float:right; margin:0px 20px 0 0; }
				#play-button{ float:left; margin-top:1px;border-right:1px solid #333; background:url('../bilder/bg-hover.png') repeat-x 0 44px; }
					#play-button:hover{ background-position:0 1px; cursor:pointer; }
				
				#prevslide, #nextslide{ position:absolute; height:43px; width:43px; top:50%; margin-top:-21px; opacity:0.6; }
					#prevslide{ left:10px; background:url('../bilder/back.png'); }
					#nextslide{ right:10px; background:url('../bilder/forward.png'); }
						#prevslide:active, #nextslide:active{ margin-top:-19px; }
						#prevslide:hover, #nextslide:hover{ cursor:pointer; }
				
				ul#slide-list{ padding:15px 0; float:left; position:absolute; left:50%; }
					ul#slide-list li{ list-style:none; width:12px; height:12px; float:left; margin:0 5px 0 0; }
						ul#slide-list li.current-slide a, ul#slide-list li.current-slide a:hover{ background-position:0 0px; }
						ul#slide-list li a{ display:block; width:12px; height:12px; background:url('../bilder/nav-dot.png') no-repeat 0 -24px; }
							ul#slide-list li a:hover{ background-position:0 -12px; cursor:pointer; }
				
				#tray-button{ float:right; margin-top:1px; border-left:1px solid #333; background:url('../bilder/bg-hover.png') repeat-x 0 44px; }
					#tray-button:hover{ background-position:0 1px; cursor:pointer; }
		
	
	/* Progress Bar
	----------------------------*/					
	#progress-back{ z-index:5; position:fixed; bottom:42px; left:0; height:8px; width:100%; background:url('../bilder/progress-back.png') repeat-x; }
		#progress-bar{ position:relative; height:8px; width:100%; background:url('../bilder/progress-bar.png') repeat-x; }
	
	
	/* Thumbnail Navigation
	----------------------------*/	
	#nextthumb,#prevthumb { z-index:2; display:none; position:fixed; bottom:61px; height:75px; width:100px; overflow:hidden; background:#ddd; border:1px solid #fff; -webkit-box-shadow:0 0 5px #000; }
		#nextthumb { right:12px; }
		#prevthumb { left:12px; }
			#nextthumb img, #prevthumb img { width:150px; height:auto;  }
			#nextthumb:active, #prevthumb:active { bottom:59px; }
			#nextthumb:hover, #prevthumb:hover { cursor:pointer; }
	
	
	/* Thumbnail Tray
	----------------------------*/			
	#thumb-tray{ position:fixed; z-index:3; bottom:0; left:0; background:url(../bilder/bg-black.png); height:150px; width:100%; overflow:hidden; text-align:center; -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; }
		
		#thumb-back, #thumb-forward{ position:absolute; z-index:5; bottom:42px; height:108px; width:40px; }
			#thumb-back{ left:0; background: url('../bilder/thumb-back.png') no-repeat center center;}
			#thumb-forward{ right:0; background:url('../bilder/thumb-forward.png') no-repeat center center;}
				#thumb-back:hover, #thumb-forward:hover{ cursor:pointer; background-color:rgba(256,256,256, 0.1); }
					#thumb-back:hover{ border-right:1px solid rgba(256,256,256, 0.2); }
					#thumb-forward:hover{ border-left:1px solid rgba(256,256,256, 0.2); }
		
		
		ul#thumb-list{ display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px; }
			ul#thumb-list li{ background:#111; list-style:none; display:inline; width:150px; height:108px; overflow:hidden; float:left; margin:0; }
				ul#thumb-list li img { width:200px; height:auto; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; }
				ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); }
				ul#thumb-list li:hover{ cursor:pointer; }
				
/*********************** SUPERSIZED ENDE ***********************/







/********************** SHADOWBOX *********************/
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{color:#000;}
#sb-container{position:fixed;width:450px;margin:0;padding:0;top:0;left:0;z-index:9999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;}
#sb-wrapper-inner{position:relative;overflow:hidden;border:10px solid rgba(255, 255, 255, 0.6)}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;padding:0px;}
#sb-player.html{width:100%;height:100%;overflow:auto;padding:0;margin:0;background-color:#000;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#fff;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;display:none;}
#sb-info-inner{font-size:12px;background-color:#ccf;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png);}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
/********************** SHADOWBOX ENDE *********************/


#intro {
    margin: 0;
    padding: 0;
    color: #fff;
    background: #111;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-weight: 300;
    font-size: 1em;
}

.wrapper {
    position: absolute;
    width: 500%;
    height: 100%;
    z-index: 0;
}



/* Header */
#intro header						{position:absolute; top:0; left:0; margin-top:0; z-index:999; color:#fff; padding:9% 6%; width:100%; height:100%; text-align:left; background-image: url(../bilder/bg.png);}
#intro header	h1					{font-size:11em; font-weight:bold; text-align:left; margin:0; padding:0; display:block; line-height: 1.1em;}
#intro header	div					{position: absolute; left:20px; bottom:20px;}
#intro header	a 					{width:26%; height:20%; margin:0 7px 7px 0; float:left; position: relative; color:#fff;}
#intro header	a h1					{font-size:2em; margin:0; padding:0;}
#intro header	a p					{margin:0; padding:0; font-size:1em;}
#intro header	a.madrid			{background:#000;}
#intro header	a.muenchen			{background:#A300A9;}
#intro header	a.ulm				{background:#009E01;}
#intro header	a.ravensburg		{background:#D34827;}
#intro header	a.konstanz			{background:#001941;}
#intro header	a.berlin			{background:#BB1E49;}
#intro header	a.koeln				{background:#4881FF;}
#intro header	a:hover 				{background:#FFEE02;}


.big-image {
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
}


/*	BigVideo Styles 
	You may need to adjust these styles to get this working right in your design. 
*/
#big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0;}
#big-video-vid,#big-video-image{position:absolute;}
#big-video-control-container{position:fixed;bottom:20px;padding: 0 20px;width:100%;
  -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;}
#big-video-control{width:100%;height:16px;position:relative;}
#big-video-control-middle{margin: 0 56px 0 24px;}
#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;}
#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}