/*
	Project:   Referat 414, pgrdeu
	Version:   1.01
	Author:    Marc Haunschild (mh)
	           Gerd Niemeier (gn)
	Copyright: Bundesanstalt für Landwirtschaft
	           und Ernährung (BLE)


* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*                                                                   *
*                    Stand:  17.11.2015                             *
*                                                                   *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


- Contents  - - - - - - - - - - - -

	1. Resets and general rules
	   - Tooltips
		   a) with data-description (not accessible to screenreader users)
			 b) with hint-class (accessible and animated)
	2. The Layout
	3. Header
	4. Main Navigation
	5. Content
	6. Marginal

To do:

 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Paul irish, Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 
 
 =================================================================================
 =================================================================================
 =================================================================================
 
 
 ! A C H T U N G !
 
 Projektspezifische Styles, die nicht in die Boilerplate übernommen werden sollen,
 gehören in die Datei project.css 

 =================================================================================
 =================================================================================
 ================================================================================= */
 
@import url("project.css");
 
/* 
 * 
 * ==|== normalize ==========================================================
 */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
[hidden] {
  display: none;
}
/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  font: 1em/1.53846 Arial, Helvetica, sans-serif;
  *font-size: medium;
  /* Hack retained to preserve specificity */

}
select,
input,
textarea,
button {
  font: 99% sans-serif;
  color: #333;
}
/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */
::-moz-selection {
  background: #84920e;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #84920e;
  color: #fff;
  text-shadow: none;
}
/* =============================================================================
   Links
   ========================================================================== */
a {
  color: #00e;
}
a:visited {
  color: #551a8b;
}
a:hover {
  color: #06e;
}
a:focus {
  outline: thin dotted;
}
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover,
a:active {
  outline: 0;
}
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
blockquote {
  margin: 1em 40px;
}
dfn {
  font-style: italic;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
/* Redeclare monospace font family: h5bp.com/j */
pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}
/* Improve readability of pre-formatted text in all browsers */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
small {
  font-size: 85%;
}
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* =============================================================================
   Lists
   ========================================================================== */
ul,
ol {
  margin: 1em 0 1em 22px;
  padding: 0 0 0 0;
}
dd {
  margin: 0 0 0 40px;
}
header ul,
header li,
nav ul,
nav li,
footer ul {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between img and borders on image containers: h5bp.com/e 
 */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}
/*
 * Correct overflow not hidden in IE9 
 */
svg:not(:root) {
  overflow: hidden;
}
/* =============================================================================
   Figures
   ========================================================================== */
figure {
  margin: 0;
}
/* =============================================================================
   Forms
   ========================================================================== */
form {
  margin: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/* Indicate that 'label' will shift focus to the associated form element */
label {
  cursor: pointer;
}
/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */
legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
}
/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */
button,
input {
  line-height: normal;
  *overflow: visible;
}
/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */
table button,
table input {
  *overflow: auto;
}
/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
/*
 * Consistent box sizing and appearance
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}
/* Colors for form validity */
input,
textarea {
  -webkit-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
  -moz-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
  box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
}
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: none;
}
input:active,
input:focus,
input:hover,
textarea:active,
textarea:focus,
textarea:hover {
  -moz-box-shadow: 0 0 10px #dde399;
  -webkit-box-shadow: 0px 0px 10px #dde399;
  box-shadow: 0px 0px 10px #dde399;
}
/* input:invalid, textarea:invalid {
   -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
} */
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid {
  background-color: #f0dddd;
}
/* =============================================================================
   Tables
   ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  vertical-align: top;
}
/* ==|== primary styles =====================================================
   Author: Marc Haunschild, Gerd Niemeier
   ==========================================================================


-----------------------------------
  1. Resets and general rules
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */
/* html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent no-repeat;
}
/* Tooltips
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* If an element has the tag data-description, it will be shown as a tool-tip - works also for keyboard-users! 
   
	 Attention!
	 The text in data-description is not accessible for screenreader users, so it should be optional (not
	 necessary to understand the context) OR you must provide the same information in an additional element
	 with the class visuallyhidden 
	 
	 See below for a solution for animated AND accessible tooltips */


[data-description]:focus,[data-description]:hover {
	position:relative
}
[data-description]:focus:before,[data-description]:hover:before {
	content:attr(data-description);
	display:block;
	position:absolute;
	top:1.125em;
	left:2em;
	min-width:10em;
	max-width:17em;
	margin-bottom:5em;
	border:.125em outset #333;
	padding:.25em;
	color:#333;
	z-index:100;
	zoom:1;
	-webkit-border-radius:.25em;
	-moz-border-radius:.25em;
	border-radius:.25em;
	-moz-background-clip:padding;
	-webkit-background-clip:padding-box;
	background-clip:padding-box;
	-webkit-box-shadow:4px 4px 6px #aaa;
	-moz-box-shadow:4px 4px 6px #aaa;
	box-shadow:4px 4px 6px #aaa;
	background-color:#eee;
	background-image:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#aaa));
	background-image:-webkit-linear-gradient(top,#f2f2f2,#ccc);
	background-image:-moz-linear-gradient(top,#f2f2f2,#ccc);
	background-image:-ms-linear-gradient(top,#f2f2f2,#ccc);
	background-image:-o-linear-gradient(top,#f2f2f2,#ccc);
	background-image:linear-gradient(top,#f2f2f2,#ccc)
}
@-webkit-keyframes myanim {
	0% {
	opacity:.0
}
50% {
	opacity:.5
}
100% {
	opacity:1.0
}

}
@-moz-keyframes myanim {
	0% {
	opacity:.0
}
50% {
	opacity:.5
}
100% {
	opacity:1.0
}

}
@-ms-keyframes myanim {
	0% {
	opacity:.0
}
50% {
	opacity:.5
}
100% {
	opacity:1.0
}

}

/* Animated Tooltips
   The hovered element gets a grey background and an animated tooltip with a customized color will appear */

.tooltip {
	margin:1.5em auto;
	background:#fff;
	position:relative;
	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.tooltip:hover,.tooltip:focus,.tooltip:active {
	background-color:#eee;
	background-color:rgba(0,0,0,0.1)
}
.tooltip .visuallyhidden {
	width:25%;
	padding:5px;
	opacity:0;
	position:absolute;
	top:-100px;
	-webkit-box-shadow:0 0 0 0 rgba(255,255,255,0.5);
	box-shadow:0 0 0 0 rgba(255,255,255,0.5);
	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	transition:all .3s ease-out;
	background-color:#19633e;
	z-index:1;
	clip:auto;
	height:auto;
	margin:0;
	overflow:visible;
	padding:0
}
.tooltip:hover .visuallyhidden,.tooltip:focus .visuallyhidden {
	top:0;
	opacity:1;
	color:white;
	-webkit-box-shadow:0 4px 4px 0 rgba(33,33,33,0.5);
	box-shadow:0 4px 4px 0 rgba(33,33,33,0.5)
}
.right .visuallyhidden {
	right:0;
	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.tooltip.right .visuallyhidden:before {
	content:'';
	position:absolute;
	left:0;
	top:10px;
	border-right:0 solid rgba(0,0,0,0);
	border-top:0 solid rgba(0,0,0,0);
	border-bottom:0 solid rgba(0,0,0,0);
	-webkit-box-shadow:0 0 0 0 rgba(255,255,255,0.5);
	box-shadow:0 0 0 0 rgba(255,255,255,0.5);
	-webkit-transition:all .3s ease-out .3s;
	-moz-transition:all .3s ease-out .3s;
	-o-transition:all .3s ease-out .3s;
	transition:all .3s ease-out .3s
}
.tooltip.right:hover .visuallyhidden:before,.tooltip.right:focus .visuallyhidden:before {
	left:-10px;
	top:0;
	border-right:10px solid #19633e;
	border-top:5px solid rgba(0,0,0,0);
	border-bottom:5px solid rgba(0,0,0,0);
	-webkit-box-shadow:0 4px 4px 0 rgba(33,33,33,0.5);
	box-shadow:0 4px 4px 0 rgba(33,33,33,0.5)
}
.left .visuallyhidden {
	right:0;
	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	transition:all .3s ease-out
}
[class^=code] {
	counter-reset:lineNumber;
	overflow:auto;
	margin:.0625em 0;
	padding:0 .0625em;
	border:1px solid #aaa;
	background-color:#aaa
}
code[class^=language] {
	display:block;
	margin:.0625em 0;
	font-size:.75em;
	background-color:#fff;
	white-space:nowrap
}
code[class^=language]:nth-child(2n-1) {
	background-color:#eee;
	text-shadow:1px 1px 0 rgba(255,255,255,0.75)
}
code[class^=language]:before {
	content:counter(lineNumber,decimal-leading-zero);
	counter-increment:lineNumber;
	display:inline-block;
	width:2em;
	margin-right:.25em;
	padding-right:.25em;
	text-align:right;
	text-shadow:1px 1px 0 rgba(0,0,0,0.75);
	color:#fff;
	background-color:#333;
	background-color:rgba(0,0,0,0.3)
}
code[class^=language]:after {
	display:block;
	width:1em;
	background:#900;
	border-top:5px solid rgba(0,0,0,0);
	border-right:10px solid red;
	border-bottom:5px solid rgba(0,0,0,0);
	border-left:0 solid red;
	position:absolute;
	left:2.25em;
	top:0
}

/* Starting with project specific rules 
/* -------------------------------------------------------------------------- */
/* By default backgrounds will NOT be repeated */
* {
  background-repeat: no-repeat;
}
/* Hyperlinks have no default decoration; define those yourself */
a {
  text-decoration: none;
}
/* Inputs get smoother corners */
input {
  -moz-border-radius: 2px;
  /* FF1-3.6 */

  -webkit-border-radius: 2px;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: 2px;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
/* Floating behavior for forms
   forms start always after floats, never next to them,
   also they get there own BFC   (Search for => Contain floats: h5bp.com/q)  */
form {
  clear: both;
}
/* Colors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body {
  background-color: #D5D6CD;
  color: #333333;
}
a:link,
a:visited {
  color: #337554;
}
a,
a:active,
a:visited {
  color: #4d8669;
}
header a,
header a:active,
header a:visited,
nav a,
nav a:active,
nav a:visited,
#main > aside section a,
#main > aside section a:visited {
  color: #337554;
}
a:active,
a:focus,
a:hover,
#main > aside article .csc-textpic-text a:active,
#main > aside article .csc-textpic-text a:focus,
#main > aside article .csc-textpic-text a:hover {
  color: #fff !important;
  background-color: #4d8669;
}
a.select2-choice:active,
a.select2-choice:focus,
a.select2-choice:hover {
  color: #aaa !important;
}
/* Boxes and Images                                                           */
pre,
#headerImage,
#main > nav > ul,
#main > aside section,
#main > aside article > div,
.infobox,
blockquote,
.teaserWide,
.teaserNarrow {
  -moz-box-shadow: 4px 4px 4px #dadada;
  /* FF3.5+ */

  -webkit-box-shadow: 4px 4px 4px #dadada;
  /* Saf3.0+, Chrome */

  box-shadow: 4px 4px 4px #dadada;
  /* Opera 10.5, IE9, Chrome 10+ */
}
/* similar shadows for IE lt 9                                                */
.ie8 #headerImage,
.ie8 #main > aside section,
.ie8 #main > aside article > div,
.ie8 .infobox,
.ie8 blockquote {
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=0, Strength=0) progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=9) progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=180, Strength=9);
}
/*
-----------------------------------
  2. The Layout
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
#container {
  max-width: 59.375em;
  margin: 0 auto 1.625em auto;
  padding: 0px 20px .625em 10px;
  -moz-box-shadow: 0px 0px 10px #888;
  /* FF3.5+ */

  -webkit-box-shadow: 0px 0px 10px #888;
  /* Saf3.0+, Chrome */

  box-shadow: 0px 0px 10px #888;
  /* Opera 10.5, IE9, Chrome 10+ */

  background-color: #fff;
}
/* While zooming ie does not ie multiplie max-width, so use width instead...          */
.ie6 #container,
.ie7 #container,
.ie8 #container {
  max-width: none;
  width: 59.375em;
}
header {
  float: left;
  width: 100%;
}
#main {
  display: table;
  width: 100%;
  padding-top: .5em;
  clear: both;
}
#main > nav,
#content,
#main > aside {
  display: table-cell;
  vertical-align: top;
}
#main > nav {
  width: 14.375em;
}
#content {
  min-width: 230px;
  max-width: 465px;
  padding: 0 10px 0 15px;
}
#main > aside {
  width: 230px;
}
footer {
  width: 100%;
  margin-top: 2em;
}
/* Supporting ancient IE versions */
.ie6 #main,
.ie7 #main {
  display: block;
  float: left;
  width: 100%;
}
.ie6 #main > nav,
.ie6 #content,
.ie6 #main > aside,
.ie7 #main > nav,
.ie7 #content,
.ie7 #main > aside {
  float: left;
}
.ie6 #main > nav,
.ie7 #main > nav,
.ie6 #main > aside,
.ie7 #main > aside {
  width: 190px;
}
.ie6 #content,
.ie7 #content {
  width: 370px;
}
/*
-----------------------------------
  4. Header
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
header ul {
  float: right;
  padding: .0625em 4px 0 0;
}
header li {
  display: inline;
  margin: 0;
}
header li:first-child a:before {
  content: "";
}
header li a:before {
  content: "|";
  padding-right: 5px;
}
header li a {
  font-size: .6875em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Icon */
header li a img {
  position: relative;
  left: 0px;
  top: 5px;
  width: 1.5454em;
  -moz-box-shadow: .1818em .1818em .3636em #ccc;
  /* FF3.5+ */

  -webkit-box-shadow: .1818em .1818em .3636em #ccc;
  /* Saf3.0+, Chrome */

  box-shadow: .1818em .1818em .3636em #ccc;
  /* Opera 10.5, IE9, Chrome 10+ */

}
header > a {
  float: left;
}
header > h1 {
  margin: .77778em 0 0 240px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.25em;
  letter-spacing: .75px;
  font-weight: normal;
  color: #19633E;
}
header > h1 span {
  position: relative;
  left: 0;
  top: -0.7692em;
  display: block;
  font-size: 0.3611em;
  font-family: Arial, Helvetica, sans-serif;
  color: #98A609;
}
#headerImage {
  display: inline-block;
  margin-top: 0.1875em;
  width: 100%;
  height: 8.125em;
  background-image: url(../img/headBG.png);
  background-size: auto 100%;
}
#homepage #headerImage {
  height: 16.5625em;
  background-image: url(../img/headBGHomePage.png );
  background-size: auto 100%;
}
/*
-----------------------------------
  4. Main Navigation
- - - - - - - - - - - - - - - - - -

   General Styles and Nav Level 1 - - - - - - - - - - - - - - - - - - - - - - */
#main > nav > ul {
  margin-bottom: 22px;
  -moz-border-radius: .125em;
  /* FF1-3.6 */

  -webkit-border-radius: .125em;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: .125em;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#main > nav li a {
  display: block;
  padding: .7692em 10px .7692em 10px;
  font-size: .8125em;
}
#main > nav .on > a {
  font-weight: bold;
}
#main > nav li:first-child a {
  margin-top: 0;
  padding: .7692em 10px .7692em 10px;
}
#main > nav li:first-child a {
  border-top: none;
}
#main > nav p {
  padding: 0;
  font-size: .01px;
  line-height: .01%;
}
#main > nav li {
  position: relative;
  background-color: #dde399;
}
#main > nav li.on {
  background-color: #eef1cc;
  border-top: .0625em solid #bcc833;
}
#main > nav li:first-child {
  -moz-border-radius: .125em .125em 0 0;
  /* FF1-3.6 */

  -webkit-border-radius: .125em .125em 0 0;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: .125em .125em 0 0;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#main > nav ul,
#main > nav li:last-child {
  -moz-border-radius: 0 0 .125em .125em;
  /* FF1-3.6 */

  -webkit-border-radius: 0 0 .125em .125em;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: 0 0 .125em .125em;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#main > nav li.first,
#main > nav li.first:active,
#main > nav li.first:focus,
#main > nav li.first:hover {
  border-top: none;
}
#main > nav li {
  border-top: .0625em solid #fff;
}
#main > nav li:active,
#main > nav li:focus,
#main > nav li:hover {
  border-top: .0625em solid #bcc833;
}
#main > nav li:active + li,
#main > nav li:focus + li,
#main > nav li:hover + li,
#main > nav li.on + li {
  border-top: .0625em solid #bcc833;
}
#main > nav a:active,
#main > nav a:focus,
#main > nav a:hover {
  background-color: #c8d259;
}
#main > nav strong {
  display: block;
  padding: .7692em 10px .3846em 10px;
  font-size: .8125em;
  color: #84920E;
}
/* Nav Level 2 */
#main > nav .level1 li,
#main > nav .level1 li + li {
  border-top: none;
}
#main > nav .level2,
#main > nav .level3 {
  background-color: #eef1cc;
}
#main > nav .level2 a,
#main > nav .level2:first-child a,
#main > nav .level2 strong {
  padding: .3846em 10px .3846em 30px;
}
#main > nav .level2:last-child a {
  padding: .3846em 10px .7692em 30px;
}
#main > nav .on a:active,
#main > nav .on a:focus,
#main > nav .on a:hover,
#main > nav .level2 a:active,
#main > nav .level2 a:focus,
#main > nav .level2 a:hover {
  background-color: #c8d259;
}
/* Nav Level 3 */
#main > nav .level2 .level3 a,
#main > nav .level3:first-child a,
#main > nav .level3 strong {
  padding: .3846em 10px .3846em 50px;
}
#main > nav .level3 strong {
  display: block;
  padding: .3846em 10px .3846em 50px;
  font-size: .8125em;
  color: #84920E;
  background-image: url(../img/icon-link-intern-hellgruen.png);
  background-position: 35px 5px;
}
/* Nav Level 4 */
#main > nav .level4 {
  background-color: inherit;
}
#main > nav .level3 .level4 a,
#main > nav .level4:first-child a,
#main > nav .level4 strong {
  padding: .3846em 10px .3846em 70px;
}
#main > nav .level4 strong {
  background-position: 55px 5px;
}
/*
-----------------------------------
  5. Content
- - - - - - - - - - - - - - - - - -

/* General formatting - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#content .clearfix {
  margin: 2px 0;
}
#content article {
  padding-right: 5px;
}
#content h2 {
  margin: 0 0 .75em 0;
  font: 1.5em/1.25em Georgia, "Times New Roman", Times, serif;
}
#main > aside h2 {
  padding: .1818em 10px 0 10px !important;
  font: bold 0.6875em/2.0909em Arial, Helvetica, sans-serif;
  letter-spacing: .04545em;
  text-transform: uppercase;
}
#homepage #content h1,
h1.news,
#main > aside article h2 {
  /* Also used for aside */

  border: 1px solid #abba00;
  -moz-border-radius: .1818em;
  /* FF1-3.6 */

  -webkit-border-radius: .1818em;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: .1818em;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1  */

  padding: .1818em 10px 0 10px !important;
  font: bold 0.6875em/2.0909em Arial, Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: .04545em;
  text-transform: uppercase;
  color: #fff;
  background: #abba00;
  /* Old browsers */

  background: -moz-linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #abba00), color-stop(4%, #bbc648), color-stop(8%, #bcc658), color-stop(42%, #9aa80f), color-stop(46%, #98a609), color-stop(58%, #98a60a), color-stop(67%, #9aa80e), color-stop(75%, #9fac1a), color-stop(83%, #a9b530), color-stop(88%, #b1bc41), color-stop(92%, #bbc459), color-stop(96%, #c7cf75), color-stop(100%, #abba00));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* Opera11.10+ */

  background: -ms-linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* IE10+ */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#bbc648', EndColorStr='#98a609');
  /* IE6–IE9 */

  background: linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* W3C */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0px .0909em .0909em #ccc;
  /* FF3.5+ */

  -webkit-box-shadow: 0px .0909em .0909em #ccc;
  /* Saf3.0+, Chrome */

  box-shadow: 0px .0909em .0909em #ccc;
  /* Opera 10.5, IE9, Chrome 10+ */

}
.teaser h2 + p {
  font-weight: bold;
  margin: .61538em 0 1.30769em 0;
}
article h3 {
  /* Also used for aside */

  margin-bottom: .5556em;
  font-size: 1.125em;
  line-height: 1.38889;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}
#content article h3 a {
  padding-left: 0;
  background-image: none;
}
#content h4 {
  margin-top: .714286em;
  font-size: .875em;
  line-height: 1.42857;
}
ol ol {
  list-style-type: lower-latin;
}
#content ul {
  margin-left: 21px;
  padding-left: 0;
  list-style-image: url(../img/listenbild-ebene1.png);
}
#content ul ul {
  list-style-image: url(../img/listenbild-ebene2.png);
}
#content ul ul ul {
  list-style-image: url(../img/listenbild-ebene3.png);
}
article p,
article li,
article details {
  font-size: .8125em;
  margin: .3846em 0;
}
article p *,
article li *,
article details * {
  font-size: inherit;
}
#content a {
  background-position: 0 1px;
  background-image: url(../img/icon-link-intern-dunkelgruen.png);
}
#content a[class*="download"] {
  /* using attribute selector instead of class selector makes reusing the css file easier */

  background-position: 0 2px;
  background-image: url(../img/icon-link-down-dunkelgruen.png);
}
#content a[class*="extern"] {
  /* using attribute selector instead of class selector makes reusing the css file easier */

  background-image: url(../img/icon-link-extern-dunkelgruen.png);
}
#content article a {
  padding-left: 15px;
  background-position: 0 0px;
}
article li > * {
  /* Also used for aside */

  font-size: inherit;
}
article .csc-linkToTop {
  margin: 15px 0;
}
#content .top {
  padding-left: 20px;
  font-weight: bold;
  background-image: url(../img/icon-link-top-dunkelgruen.png);
  background-position: 0 1px;
}
/* Breadcrumb - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#content nav {
  margin: 0 0 1.375em;
  border-top: .0625em solid #D6D9B8;
  border-bottom: .0625em solid #D6D9B8;
  background-color: #fff;
}
#content #breadcrumb {
  margin: 0;
  padding-top: .0625em;
  border-top: .0625em solid #fff;
  border-bottom: .0625em solid #fff;
  background-color: #F3F4EA;
}
#breadcrumb li {
  float: left;
  padding-right: 10px;
  font-size: .6875em;
  line-height: 1.81818;
  background-color: #F3F4EA;
  background-image: url(../img/iconInternalLink.png);
  background-position: right .4545em;
}
#breadcrumb li:last-child {
  background-image: none;
}
#breadcrumb a,
#breadcrumb strong {
  display: block;
  padding: 0 11px 0 6px;
  font-weight: normal;
}
#breadcrumb a {
  background-image: none;
}
#breadcrumb strong {
  color: #979982;
}
/* In Page Navigation - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#content .inPageNavigation,
#content .inPageNavigation ul {
  list-style-type: none;
  list-style-image: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
#content article .inPageNavigation a {
  display: block;
  padding-left: 20px;
  color: #337554;
  font-weight: bold;
  background-image: url(../img/icon-link-down-dunkelgruen.png);
  background-position: 0 2px;
}
#content article .inPageNavigation ul a {
  margin-left: 10px;
  font-weight: normal;
  background-image: none;
}
/* Link list  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#content .linkList ul,
aside .linkList ul {
  /* Also used for aside */

  list-style-type: none;
  list-style-image: none;
  margin-left: 0;
  padding-left: 0;
}
article li h3 {
  font-weight: bold;
}
#content .linkList ul a {
  display: block;
  padding-left: 20px;
}
/* Pictures with captions   - - - - - - - - - - - - - - - - - - - - - - - - - */
#content .csc-textpic a {
  display: block;
  padding-left: 0;
  background-image: none;
}
#content .csc-textpic a img {
  width: 100% !important;
}
#content .csc-textpic-imagewrap {
  padding-top: 5px;
}
#content .csc-textpic-intext-left .csc-textpic-imagewrap {
  float: left;
  margin: 0 15px 10px -5px;
}
#content .csc-textpic-intext-right .csc-textpic-imagewrap {
  float: right;
  margin: 0 5px 10px 5px;
}
#content .csc-textpic-center .csc-textpic-imagewrap {
  width: 100% !important;
}
#content .csc-textpic-center .csc-textpic-image,
#content .csc-textpic-center img {
  width: 100% !important;
}
#content .csc-textpic-image dt {
  width: 95.65217%;
  padding: 5px 5px 0 5px;
  background-color: #e2e6b5;
}
#content .csc-textpic-center .csc-textpic-image dt {
  width: 100%;
}
article .csc-textpic-image a {
  /* Also used for aside */

  padding-left: 0;
  background-image: none;
}
.csc-textpic-caption {
  /* Also used for aside */

  padding: 7px 5px 0 6px;
  font-size: .6875em;
  line-height: 1.3636;
  color: #808080;
  background-color: #fff;
}

/* Pictures standing alone (not in Text) */

#content .csc-textpic.standalone dt,
#content .csc-textpic.standalone a,
#content .csc-textpic.standalone img {
	display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
}
#content .standalone .csc-textpic-image dd {
  display: block;
}

/* Emulating details/summary - - - - - - - - - - - - - - - - - - - - - - - - - */
/* <details> and <summary> are block level elements */
details,
summary {
  display: block;
}
details {
  position: relative;
}
details > *:not(summary) {
  padding: 0 2em;
}
summary {
  padding-left: 25px;
}
summary:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1875em;
  width: -10px;
  border-left: 10px solid rgba(33, 33, 33, 0.9);
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
  display: inline-block;
}
details.open summary:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.375em;
  width: -10px;
  border-top: 10px solid rgba(33, 33, 33, 0.9);
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-left: 10px solid rgba(0, 0, 0, 0);
  display: inline-block;
}
/* The following styles will only get applied if JavaScript is enabled and <details> is not natively supported */
/* Add focus styles (for keyboard accessibility) */
.no-details summary:hover,
.no-details summary:focus {
  background: #ddd;
}
/* The following styles are not really needed, since the jQuery script takes care of hiding/displaying the elements. */
/* However, we’re still gonna use CSS as well to prevent FOUC in browsers that understand these selectors. */
/* Remember: by default (and probably most of the time), the contents of the <details> element are hidden. */
/* Hide all direct descendants of every <details> element */
/* Note that IE6 doesn’t support the child selector; we’ll work around that using jQuery later */
.no-details details > * {
  display: none;
}
/* Make sure summary remains visible */
.no-details details summary {
  display: block;
}
/* Apply a pointer cursor upon hover to indicate it’s a clickable element. These styles can be applied regardless of whether the fallback is needed */
summary {
  cursor: pointer;
}
/* List of News - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#content ul.news-list-container {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: none;
  clear: both;
}
#content .news-list-container article {
  margin-top: .75em;
  border-bottom: .3125em solid #e0e0da;
  padding-bottom: .625em;
}
#content .news-list-container article .newsImage ~ * {
  margin-left: 125px;
}
#content .news-list-container article .newsImage {
  margin-left: 0;
}
#content .news-list-container article h2 {
  margin-bottom: .3333em;
  font-size: 1.125em;
  line-height: 1.1111;
}
#content .news-list-container article h2 a {
  padding-left: 0;
  background-image: none;
}
#content .news-list-container h2 + p {
  font-weight: normal;
}
#content .news-list-container article a {
  color: #4C8669;
}
#content .news-list-container article p {
  margin: .3333em 0 .3333em 0;
}
#content .news-list-container article p a {
  padding-left: 10px;
  background-position: -5px 0;
}
#content .newsImage a {
  padding-left: 0;
  background-image: none;
}
.news-list-container article img {
  float: left;
  margin: 0 14px 0 0;
}
#content .news-list-item {
  font-size: 1em;
}
/* Infobox  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.infobox {
  float: right;
  width: 13.125em;
  /* This box is a narrow one, em makes sure, zoomed text will fit inside */

  max-width: 100%;
  /* Keep the box in the column */

  /*	overflow: auto; */
  /* Keeps even "Donaudampfsschifffahrtsgesellschaftskapitän" readable/accessible */

  margin: 0 0 .625em 10px;
  padding: .625em 10px;
  background-color: #eef1cc;
}
/* Change behavior for info boxes when main column is narrow or text is really big */
@media (max-width: 55em) {
  .infobox {
    float: none;
    width: 100%;
    margin: 0 0 0 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
}
.infobox h1 {
  margin: 0;
  font: bold 0.875em/1.42857em Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  color: #84920E;
}
.infobox a {
  font-weight: bold;
}
/* Blockquote - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
blockquote {
  padding: 15px 25px;
  font-size: 0.8125em;
  color: #737373;
  background-color: #f2f2f2;
}
article blockquote * {
  font-size: inherit;
  color: inherit;
}
/* Flexible Teaser Boxes  - - - - - - - - - - - - - - - - - - - - - - - - - - */
.teaserWide,
.teaserNarrow {
  float: left;
  position: relative;
  left: -5px;
  top: 0;
  margin: 3px 0 13px 0px;
  border-top: 5px solid #b2bd39;
  padding-bottom: 14px;
}
.teaserWide {
  width: 102.1739%;
}
.teaserNarrow {
  width: 50%;
  overflow: hidden;
}
.teaserNarrow + .teaserNarrow {
  position: relative;
  left: 5px;
  top: 0;
}
/* Change behavior for narrow teasers when main column is narrow or text is really big */
@media (max-width: 53em) {
  .teaserNarrow {
    width: 102%;
  }
  .teaserNarrow .csc-textpic-image {
    width: 100% !important;
  }
  .teaserNarrow img {
    width: 100%;
    height: auto;
  }
  .teaserNarrow + .teaserNarrow {
    width: 100%;
    position: static;
  }
  .teaserNarrow + .teaserNarrow img {
    width: 100%;
    height: auto;
  }
}
.teaserWide h3,
.teaserNarrow h3 {
  margin: 0 0 5px 0;
  font-size: .6875em;
  line-height: 1.8181;
  font-weight: bold;
  text-transform: uppercase;
  color: #4c4c4c;
}
.teaserNarrow h3 {
  margin: 10px 0 5px 5px;
}
.teaserWide p,
.teaserNarrow p {
  margin: 0 0 2px 5px;
}
#content .teaserWide .csc-textpic-imagewrap,
#content .teaserNarrow .csc-textpic-imagewrap {
  float: none;
  margin: 0 0px 10px 0;
  padding-top: 7px;
}
#content .teaserWide .csc-textpic-intext-left .csc-textpic-imagewrap {
  width: 100%;
}
.teaserWide .csc-textpic-image {
  /* description list dl.csc-textpic-image */

  float: left;
  width: 48.94%;
  margin-right: 15px;
  overflow: hidden;
}
/* Change behavior for wide teasers when main column is narrow or text is really big */
@media (max-width: 53em) {
  .teaserWide .csc-textpic-image {
    float: none;
    width: 100% !important;
  }
  .teaserWide .csc-textpic-image img {
    width: 100%;
    height: auto;
  }
  .teaserWide p {
    margin: 0 0 2px 0;
  }
  .teaserWide p a {
    width: auto;
  }
}
#content .teaserWide .csc-textpic-image dt,
#content .teaserNarrow .csc-textpic-image dt {
  width: 100%;
  min-width: 115px;
  /*	height: 145px; */

  padding: 3px 0 0 0;
  background-color: #fff;
}
#content .csc-textpic-image dd {
  display: none;
}
#content .teaserWide .csc-textpic-imagewrap a {
  padding-left: 13px;
  background-position: 0 1px;
  background-image: url("../img/icon-link-intern-dunkelgruen.png");
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* Explicit formatting for the home page  - - - - - - - - - - - - - - - - - - */
#homepage #content {
  padding: 0 10px 0 10px;
}
#homepage #content article h3 {
  margin-bottom: .3125em;
  line-height: 1.1111;
  font-family: Georgia, "Times New Roman", Times, serif;
}
#homepage #content article p a {
  background-image: url(../img/icon-link-intern-dunkelgruen.png);
}
/* List of Teasers  on Home Page                                              */
#homepage #content ul.news-list-container {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: none;
}
#homepage #content .news-list-container article {
  margin-top: .75em;
  margin-bottom: .625em;
  border-bottom: .3125em solid #e0e0da;
  padding-bottom: .6125em;
}
#homepage #content .news-list-container article p {
  line-height: 1.53846;
}
#homepage #content .news-list-container article img ~ * {
  margin-left: 125px;
}
@media (max-width: 55em) {
  #homepage #content .news-list-container article img ~ * {
    margin: 0 0 0 0;
  }
}
#homepage .news-list-container article img {
  float: left;
  margin-left: 0;
}
#homepage #content .news-list-item {
  font-size: 1em;
}
/* Form  - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - */
form h3 {
  font-size: 1.125em;
  line-height: 1.38889;
  color: #84920e;
}
label {
  font-size: .6875em;
  font-weight: bold;
  text-transform: uppercase;
  color: #84920e;
}
input {
  height: 1.923077em;
}
#content input[type="text"],
#content input[type="url"],
#content input[type="email"],
#content input[type="number"],
#content input[type="range"],
#content input[type="password"],
#content input[type="date"],
#content input[type="color"],
#content input[type="search"],
textarea,
select {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: .30769em 0;
  border: .0769em solid #abba00;
  -moz-border-radius: 2px;
  /* FF1-3.6 */

  -webkit-border-radius: 2px;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: 2px;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 2px 3px;
  font-size: .8125em;
  color: #19633E;
  background-color: #f7f8e6;
}
#content input[required],
textarea[required],
select[required] {
  background-color: #EFEFBD;
}
#content input[type="submit"] {
  border: none;
  padding-left: 15px;
  text-align: left;
  font-size: 1.125em;
  color: #337554;
  background-image: url('../img/icon-link-intern-dunkelgruen.png');
  background-position: 0 8px;
  background-color: #fff;
}
/* input type="submit" as alphabetical register */
#content #register {
  margin: 2em auto;
}
#content #register input[type="submit"] {
  float: left;
  width: 1.9375em;
}
#content #register [disabled] {
  color: #999;
  background-image: none;
}
#content #register [disabled]:active,
#content #register [disabled]:focus,
#content #register [disabled]:hover {
  cursor: default;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#content #register input[type="submit"]:nth-child(14) {
  clear: left;
}
textarea {
  resize: vertical;
}
/* columns */
.columns > section,
.columns > div {
  display: table;
  width: 100%;
}
.columns > section > div,
.columns > section > section,
.columns > div > div,
.columns > div > section {
  display: table-cell;
  padding: .5em;
}
.check {
  position: relative;
}
/* checkbox alignment */
.cbRight {
  padding-right: 1.75em;
}
.cbRight input {
  position: absolute;
  right: .25em;
  top: .375em;
}
/* Advanced checkbox/radio-button formatting */
/* #################################################################
   #################################################################
   #################################################################
   #################################################################

input[type="checkbox"] + label:before {
    border-radius: 0.102533em 0.102533em 0.102533em 0.102533em;
}
input[type="checkbox"] + label:before, input[type="radio"] + label:before {
    background: radial-gradient(ellipse at center center , #E2E6DA 0%, #E5E9DD 33%, #E3E7DC 58%, #DDE1D5 83%, #DFE3D7 100%) repeat scroll 0 0 / 0.769em auto transparent;
    border: 0.102533em solid #B1C098;
    box-shadow: 0.102533em 0.102533em 0.102533em rgba(0, 0, 0, 0.2);
    content: "";
    display: inline-block;
    font-family: Verdana,sans-serif;
    font-size: 1.21875em;
    height: 0.769em;
    line-height: 0.769em;
    margin: 0 8px 0 0;
    vertical-align: middle;
    width: 0.769em;
}
label, input[type="checkbox"] + label:before, input[type="radio"] + label:before {
    vertical-align: middle;
}
form div label {
    width: 35%;
}
form div label {
    float: left;
    margin-top: 5px;
}
form div label {
    color: #191919;
    display: inline-block;
    font-weight: bold;
    padding: 0;
}
label {
    font-size: 0.8125em;
}
label, input[type="checkbox"] + label:before, input[type="radio"] + label:before {
    vertical-align: middle;
}
form div [type="radio"], form div [type="checkbox"] {
    opacity: 0;
    position: absolute;
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
}
input[type="checkbox"]:checked + label:before {
    content: "?";
}
input[type="radio"]:checked + label:before {
    content: "•";
    padding: 0 0 0 0.0512667em;
    width: 0.717733em;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}
html, button, input, select, textarea {
    color: #191919;
    font-family: sans-serif;
}
*/
/* Two columns for Checkboxes */
/* .check {
	float: left;
	width: 45%;
}
.check>* {
	
}
.check+*.submit-group,
.check:nth-child(2n) {
	clear: left;
} */
/* pagination */
#content .blaetterNavigation p {
  display: table;
  width: 100%;
}
#content .blaetterNavigation p > * {
  display: table-cell;
  min-width: 2em;
  text-align: center;
  vertical-align: middle;
}
#content .blaetterNavigation a {
  padding: 0;
  background-image: none;
}
#content .blaetterNavigation img {
  position: relative;
  top: 3px;
}
/* just for explanations in example pages: use italic font-style  */
label i {
  text-transform: none;
}
.check input,
.radio input {
  height: auto;
}
/* event schedules */
.agendaTitle,
.agendaItem,
.agendaSpecial {
  position: relative;
  padding-left: 5em;
}
.agendaTitle {
  margin-top: .9375em;
}
.agendaItem:last-child {
  margin-bottom: 20px;
}
.agendaSpecial h3,
.agendaTitle h3 {
  margin-bottom: 5px;
  font-size: .8125em;
  line-height: 1.538;
  font-weight: bold;
  color: #84920e;
}
.agendaSpecial h3 strong,
.agendaTitle h3 strong {
  position: absolute;
  left: 0;
  top: 0;
}
/* Remove indention when column is narrow or text is really big */
@media (max-width: 55em) {
  .agendaSpecial h3 strong,
  .agendaTitle h3 strong {
    position: static;
  }
  .agendaTitle,
  .agendaItem,
  .agendaSpecial {
    position: static;
    padding-left: 0;
  }
}
/* sitemap - - - - -  - */
#sitemap #content article {
  width: 460px;
}
#sitemap #content article > ul {
  list-style-type: none;
  list-style-image: none;
  margin: 23px 0 0px 0;
  font-size: .923077em;
  line-height: 1.1538;
}
#sitemap #content article > ul > li {
  margin-bottom: 27px;
}
#sitemap #content ul ul {
  margin: 13px 0 0 21px;
}
#sitemap #content ul ul li {
  margin: 12px 0;
}
#sitemap #content ul a {
  padding-left: 0;
  background-image: none;
}
#sitemap #content article > ul > li > a {
  display: block;
  width: 458px;
  margin-left: -5px;
  border: 1px solid #66977f;
  -moz-border-radius: 2px;
  /* FF1-3.6 */

  -webkit-border-radius: 2px;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: 2px;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 4px 0 2px 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background: #8db19f;
  /* Old browsers */

  background: -moz-linear-gradient(top, #8db19f 0%, #8fb3a1 5%, #4a8466 32%, #2c6f4d 50%, #1b633e 64%, #206743 68%, #2a6e4c 73%, #719f87 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8db19f), color-stop(5%, #8fb3a1), color-stop(32%, #4a8466), color-stop(50%, #2c6f4d), color-stop(64%, #1b633e), color-stop(68%, #206743), color-stop(73%, #2a6e4c), color-stop(100%, #719f87));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #8db19f 0%, #8fb3a1 5%, #4a8466 32%, #2c6f4d 50%, #1b633e 64%, #206743 68%, #2a6e4c 73%, #719f87 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #8db19f 0%, #8fb3a1 5%, #4a8466 32%, #2c6f4d 50%, #1b633e 64%, #206743 68%, #2a6e4c 73%, #719f87 100%);
  /* Opera11.10+ */

  background: -ms-linear-gradient(top, #8db19f 0%, #8fb3a1 5%, #4a8466 32%, #2c6f4d 50%, #1b633e 64%, #206743 68%, #2a6e4c 73%, #719f87 100%);
  /* IE10+ */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8db19f', endColorstr='#719f87', GradientType=0);
  /* IE6-9 */

  background: linear-gradient(top, #8db19f 0%, #8fb3a1 5%, #4a8466 32%, #2c6f4d 50%, #1b633e 64%, #206743 68%, #2a6e4c 73%, #719f87 100%);
  /* W3C */

  -moz-box-shadow: 0px 1px 1px #d8e5df;
  /* FF3.5+ */

  -webkit-box-shadow: 0px 1px 1px #d8e5df;
  /* Saf3.0+, Chrome */

  box-shadow: 0px 1px 1px #d8e5df;
  /* Opera 10.5, IE9, Chrome 10+ */

}
/* Tables - - - - - - */
table {
  width: 100%;
  border-collapse: collapse;
  empty-cells: show;
}
th,
td {
  padding: 0;
}
thead th p {
  padding: 0 10px;
}
thead th a {
  color: #fff;
}
th p,
td p {
  padding: 5px;
}
thead th {
  font-size: .6875em;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-align: left;
  text-transform: uppercase;
  color: #fff;
  background: #abba00;
  /* Old browsers */

  background: -moz-linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #abba00), color-stop(4%, #bbc648), color-stop(8%, #bcc658), color-stop(42%, #9aa80f), color-stop(46%, #98a609), color-stop(58%, #98a60a), color-stop(67%, #9aa80e), color-stop(75%, #9fac1a), color-stop(83%, #a9b530), color-stop(88%, #b1bc41), color-stop(92%, #bbc459), color-stop(96%, #c7cf75), color-stop(100%, #abba00));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* Opera11.10+ */

  background: -ms-linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* IE10+ */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#bbc648', EndColorStr='#98a609');
  /* IE6–IE9 */

  background: linear-gradient(top, #abba00 0%, #bbc648 4%, #bcc658 8%, #9aa80f 42%, #98a609 46%, #98a60a 58%, #9aa80e 67%, #9fac1a 75%, #a9b530 83%, #b1bc41 88%, #bbc459 92%, #c7cf75 96%, #abba00 100%);
  /* W3C */

}
thead th:first-child {
  -moz-border-radius: 2px 0 0 2px;
  /* FF1-3.6 */

  -webkit-border-radius: 2px 0 0 2px;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: 2px 0 0 2px;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
thead th:last-child {
  -moz-border-radius: 0 2px 2px 0;
  /* FF1-3.6 */

  -webkit-border-radius: 0 2px 2px 0;
  /* Saf3-4, iOS 1-3.2, Android <1.6 */

  border-radius: 0 2px 2px 0;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.ie8 thead {
  border-right: 55px solid pink;
  margin-right: 5px;
}
tbody tr:first-child th p,
tbody tr:first-child td p {
  margin: 0;
}
tbody th,
tbody td {
  border-top: 5px solid white;
  border-left: 5px solid white;
}
tbody th:first-child,
tbody td:first-child {
  border-left: none;
}
tbody td:last-child p {
  border-right: none;
}
tbody th {
  text-align: left;
  background-color: #f0f2da;
}
tbody td {
  background-color: #ededed;
}
thead p {
  font-size: 100%;
}
/*
-----------------------------------
  7. Marginal
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

! Hint: Some formatting declared in content is used here, too */
.ie6 #main > aside h2,
.ie7 #main > aside h2,
.ie8 #main > aside h2 {
  font-size: .6875em;
}
/* section is used for special containers, article for content elements added by contributing editors */
#main > aside section {
  margin: 16px 0 13px 0;
  border: 1px solid #EFF0E3;
  background-color: #F3F4EA;
}
#main > aside section#tagCloud {
  margin: 12px 0 15px 0;
}
#main > aside form {
  display: block;
  position: relative;
  height: 25px;
}
#keywordSearch {
  position: absolute;
  top: 0;
  left: 0;
  width: 185px;
  height: 21px;
  border: 1px solid #D6D9B8;
  padding: 0 4px 2px 4px;
  font-size: .75em;
  line-height: 1.66667;
  color: #337554;
  background-color: #fff;
}
#keywordSearch + button {
  position: absolute;
  top: 1px;
  right: -7px;
  width: 35px;
  height: 25px;
  border: none;
  background-image: url(../img/keywordSearch.png);
  background-color: transparent;
}
/* Links to Accessibility Features and Help */
#accessibilityTools ul {
  margin: 0;
  padding: 4px 0 9px 0px;
  font-size: .75em;
  line-height: 2.5;
  list-style-type: none;
}
#accessibilityTools a {
  display: block;
  padding-left: 49px;
}
a.iconSignLanguage {
  background-image: url(../img/iconSignLanguage.png);
  background-position: 11px -1px;
}
a.easyLanguage {
  background-image: url(../img/iconEasyLanguage.png);
  background-position: 11px 1px;
}
a.contrast {
  background-image: url(../img/iconContrast.png);
  background-position: 11px 3px;
}
a.fontSize {
  background-image: url(../img/iconFontSize.png);
  background-position: 11px 1px;
}
a.help {
  background-image: url(../img/iconHelp.png);
  background-position: 13px 2px;
}
/* Tag Cloud */
#main #tagCloud h2 {
  margin-top: 4px;
  border: none;
  padding-bottom: 0 !important;
  line-height: 1.81818;
  color: #4c4c4c;
  background-color: transparent;
  background-image: none;
}
#main #tagCloud h2:before {
  content: "";
  width: 0;
  height: 0;
  background-image: none;
}
#main #tagCloud h2:after {
  content: "";
  width: 0;
  height: 0;
  background-image: none;
}
#tagCloud ul {
  margin-left: 10px;
  width: 100%;
  list-style-type: none;
  line-height: 1.4375em;
  padding-bottom: 16px;
}
#tagCloud li {
  display: inline-block;
}
#tagCloud a {
  white-space: nowrap;
  margin-right: 7px;
}
.importance1 {
  font-size: 1.25em;
}
.importance3 {
  font-size: .75em;
}
/* ! Hint: Article is used for content elements added by contributing editors, section for special containers */
/* Article: general formatting - - - */
#main > aside article {
  margin: 6px 0 0 0;
  border-top: 1px solid #F3F4EA;
  padding-bottom: 6px;
}
#main > aside article > * {
  padding: 0 5px;
}
#main > aside article > div {
  background-color: #F3F4EA;
}
#main > aside article h3 {
  line-height: 1.1111;
}
#main > aside article a {
  padding-left: 12px;
  background-image: url(../img/iconInternalLinkAside.png);
  background-position: 0 3px;
}
#main > aside article a:visited,
#main > aside article a {
  color: #337554;
}
#main > aside article h2 {
  letter-spacing: .5px;
}
#main > aside article h2 + div {
  margin-top: 4px;
  padding: 1px 5px 5px 5px;
}
#main > aside article > div.clearfix {
  -moz-box-shadow: 0px 0px 0px #fff;
  /* FF3.5+ */

  -webkit-box-shadow: 4px 4px 4px #fff;
  /* Saf3.0+, Chrome */

  box-shadow: 0px 0px 0px #fff;
  /* Opera 10.5, IE9, Chrome 10+ */

}
/* Images */
#main > aside .csc-textpic {
  padding: 5px;
}
#main > aside article .csc-textpic-imagewrap a {
  padding-left: 0;
  background-image: none;
}
#main > aside .csc-textpic-caption {
  padding: 1px 0 0 5px;
}
/* Images should refer to long article */
#main > aside .csc-textpic-text p {
  padding: 3px 0 0 5px;
  font-size: .75em;
  line-height: 1.66667;
}
#main > aside .csc-textpic-text a {
  display: block;
  background-position: 0px 5px;
}
/* Lists containing only links */
#main > aside article.linkList ul {
  padding: 0 0 0 5px;
}
#main > aside article.linkList li {
  font-size: .75em;
  line-height: 1.66667;
}
#main > aside article.linkList li > * {
  font-size: inherit;
}
#main > aside p {
  color: #4C4C4C;
}
#main > aside .linkList li a {
  display: block;
  background-position: 0px 5px;
}
/* Footer  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
footer section {
  padding: 0 240px 0 245px;
}
footer #pageControls {
  margin: 0 240px 0 245px;
}
footer a {
  color: #337554;
}
#pageControls {
  position: relative;
}
#pageControls a {
  padding-left: 15px;
  font-size: .8125em;
  background-image: url(../img/iconInternalLinkFooter.png);
  background-position: 0 -2px;
}
#pageControls .top {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 25px 0 0;
  background-image: url(../img/iconTopLinkFooter.png);
  background-position: right 2px;
}
/* Place link to top on the left when column is narrow or text is really big */
@media (max-width: 50em) {
  #pageControls .top {
    position: static;
    padding-left: 15px;
    background-position: -4px 2px;
  }
}
footer section {
  margin-top: .5625em;
  background-color: #f5f5f3;
  border-top: .0625em solid #EAEBE6;
  border-bottom: .0625em solid #EAEBE6;
}
footer p a {
  /* located only in section */

  font-size: .75em;
  font-weight: bold;
  text-transform: uppercase;
}
footer section ul {
  display: table;
}
footer section li {
  display: table-cell;
}
footer section li a {
  font-size: .6875em;
  color: #4C8669;
}
footer section li a:before {
  content: "|";
  padding: 0 5px;
  color: #979982;
}
footer section li:first-child a:before {
  content: "";
  padding: 0 0;
}
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}
.ir br {
  display: none;
}
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
  display: none !important;
  visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.sr-hint,
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden;
}
/* Contain floats: h5bp.com/q */.clearfix:before,
form:before,
#register:before,
.clearfix:after,
form:after,
#register:after {
  content: "";
  display: table;
}
.clearfix:after,
form:after,
#register:after {
  clear: both;
}
.clearfix,
form,
#register {
  zoom: 1;
}
/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
}
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
   
/* print styles by mh */

@media print {
	.noPrint,
  nav,
  header > ul:first-child,
  footer > section:last-child > ul:last-child,
  #headerImage {
  	display: none !important;
  }
}


/* print styles by boilerplate */
   
   
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
  /* Black prints faster: h5bp.com/s */
  a,
  a:visited {
    text-decoration: underline;
  }
/*  a[href]:after {
    content: " (" attr(href) ")";
  }  */
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  /* Don't show links for img, or javascript/internal links */
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  /* h5bp.com/t */
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page  {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* ==|== developers styles =======================================================
   Developer supporting styles.
   ###########     !!! Remove for productive purposes !!!     ####################
   ========================================================================== */
/*
@media (max-width: 1100px) {	
	* { outline: 2px dotted red !important;}
	* * { outline: 2px dotted green !important; background-color: white !important}
	* * * { outline: 2px dotted orange !important; background-color: #888 !important}
	* * * * { outline: 2px dotted blue !important; background-color: #666 !important}
	* * * * * { outline: 1px solid red !important; background-color: #444 !important}
	* * * * * * { outline: 1px solid green !important; background-color: #333 !important}
	* * * * * * * { outline: 1px solid orange !important; background-color: #222 !important}
	* * * * * * * * { outline: 1px solid blue !important; background-color: #111 !important}
} */