/* HEADER */

#header {
 height:300px;
}


.headerimg {
 background-position: center top;
 background-repeat: no-repeat;
 position: absolute; left: 50%; width: 864px; margin-left: -432px; /* Ein Trick, um die Positionierung des Containers im absolute modus immer mittig zu halten */
 height:300px; }


/* Navigation */

		#nav

		{

			width: 60em; /* 1000 */

			font-family: 'Open Sans', sans-serif;

			font-weight: 400;

			position: absolute;

			top: 25%;

			left: 50%;

			margin-left: -30em; /* 30 480 */

		}


			#nav > a

			{

				display: none;

			}


			#nav li

			{

				position: relative;

			}

				#nav li a

				{

					color: #000000;

					display: block;

				}

				#nav li a:active

				{

					background-color: #75bbd2 !important;

				}


			#nav span:after

			{

				width: 0;

				height: 0;

				border: 0.313em solid transparent; /* 5 */

				border-bottom: none;

				border-top-color: #6ca7c7;

				content: '';

				vertical-align: middle;

				display: inline-block;

				position: relative;

				right: -0.313em; /* 5 */

			}


			/* first level */


			#nav > ul

			{

				height: 3.75em; /* 60 */

				background-color: #e8e8e8;

			}

				#nav > ul > li

				{

					width: 25%;

					height: 100%;

					float: left;

				}

					#nav > ul > li > a

					{

						height: 100%;

						font-size: 1.5em; /* 24 */

						line-height: 2.5em; /* 60 (24) */

						text-align: center;

					}

						#nav > ul > li:not( :last-child ) > a

						{

							border-right: 1px solid #2a3852;

						}

						#nav > ul > li:hover > a,

						#nav > ul:not( :hover ) > li.active > a

						{

							background-color: #a0cfdf;

						}



				/* second level */


				#nav li ul

				{

					background-color: #a0cfdf;

					display: none;

					position: absolute;

					top: 100%;

				}

					#nav li:hover ul

					{

						display: block;

						left: 0;

						right: 0;

					}

						#nav li:not( :first-child ):hover ul

						{

							left: -1px;

						}

						#nav li ul a

						{

							font-size: 1.25em; /* 20 */

							border-top: 1px solid #2a3852;

							padding: 0.75em; /* 15 (20) */

						}

							#nav li ul li a:hover,

							#nav li ul:not( :hover ) li.active a

							{

								background-color: #6ca7c7;

							}



		@media only screen and ( max-width: 62.5em ) /* 1000 */

		{

			#nav

			{


				width: 100%; /* Das definiert NICHT den button  */
				position: static;

				margin: 0;
			}

		}


		@media only screen and ( max-width: 40em ) /* 640 */

		{

			html

			{

				font-size: 100%; /* 12 Größe des buttons, Default war 75% */

			}


			#nav

			{

				position: relative;

				top: auto;

				left: auto;

			}

				#nav > a

				{

					width: 3.125em; /* 50 */

					height: 3.125em; /* 50 */

					text-align: left;
					text-indent: -9999px;

					background-color: #75bbd2;

					position: relative;

				}

					#nav > a:before,

					#nav > a:after

					{

						position: absolute;

						border: 2px solid #fff;

						top: 35%;

						left: 25%;

						right: 25%;

						content: '';

					}

					#nav > a:after

					{

						top: 60%;

					}


				#nav:not( :target ) > a:first-of-type,

				#nav:target > a:last-of-type

				{

					display: block;

				}



			/* first level */


			#nav > ul
			{

				height: auto;

				display: none;

				position: absolute;

				left: 0;

				right: 0;

			}

				#nav:target > ul

				{

					display: block;

				}
				#nav > ul > li

				{

					width: 100%;

					float: none;

				}

					#nav > ul > li > a

					{

						height: auto;

						text-align: left;

						padding: 0 0.833em; /* 20 (24) */

					}

						#nav > ul > li:not( :last-child ) > a

						{

							border-right: none;

							border-bottom: 1px solid #6ca7c7;

						}



				/* second level */


				#nav li ul

				{

					position: static;

					padding: 1.25em; /* 20 */

					padding-top: 0;

				}

		}


$( '#nav li:has(ul)' ).doubleTapToGo();

/* -- Hauptteil -- */
#containereineversion { /* Ist dafür gedacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz außen am Fenster ist. */
  position: absolute; left: 50%; width: 864px; margin-left: -432px; /* Ein Trick, um die Positionierung des Containers immer mittig zu halten */
  font-size: 0.8em; /* Ein Kompromiss über den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen selbst eingestellte Textgröße für zu groß, wissen aber nicht wie man das ändert. */
  max-width: 70em; /* Eine Begrenzung der Breite auf höchstens 70em. Das machen wir um nicht zu lange Textbreiten zu erhalten, welche dann schlecht zu lesen sind. Für den IE gibt es in ielte6.css einen Woraround. */
  border: 1px solid #aaa; /* Eine kleine optische Abgränzung. */
  border-top: 0; /* Ganz oben allerdings würde es mit dem grauen komisch aussehen, deshalb weg damit. */
  background: white;
}
#containereinezweiteversion {
 background-position: center top;
 background-repeat: no-repeat;
 background-color: #FFFFFF;
 position: absolute; left: 50%; width: 864px; margin-left: -432px; /* Ein Trick, um die Positionierung des Containers im absolute modus immer mittig zu halten */
}