/** Allgemeine Formatierungen **/



body {
	color: black;
	font-family: "Calibri", sans-serif;
	font-size: 14px;
	margin: px;
}

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
}

input[type="password"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
}

input[type="submit"] {
    width: 155px;
	/** line-height: 2em; // 2em is (2 * default line height) **/
    display: block;
    margin-bottom: 10px;
}

a:link {
  text-decoration: none;
  color: white;
}
a:visited {
  text-decoration: none;
   color: white;
}
a:hover {
  text-decoration: underline;
   color: white;
}
a:active {
  text-decoration: underline;
   color: white;
}





/** Formatierung für mobile Ansicht **/

/** Navigation wird als vertikale Liste über die komplette Breite dargestellt **/




nav {
	display: none;
}

nav ul {
 	padding: 0px;
 	margin: 0px;
 	width: 100%;
}
 
nav ul li {
	list-style: none;
	padding: 20px 10px;
	border: 1px solid black;
	background:#8c8585 /* Old browsers */
	background: -moz-linear-gradient(top, #8c85850%, #8c8585 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c8585), color-stop(100%,#8c8585)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #8c85850%,#8c8585 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #8c85850%,#8c8585 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #8c85850%,#8c8585 100%); /* IE10+ */
	background: linear-gradient(to bottom, #8c85850%,#8c8585 100%); /* W3C */
}


/** Anpassungen Checkbox+Label (Button) **/

input#open-menu {
	display: none;
}

input[type=checkbox]:checked ~ nav {
    display: block;
}
	
label.open-menu-label {
	background: #0000FF; /* Old browsers */
	background: -moz-linear-gradient(top, #0000FF 50%, ##0000FF  100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd2e2e), color-stop(100%,#0000FF )); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* IE10+ */
	background: linear-gradient(to bottom, #0000FF 50%,##0000FF 100%); /* W3C */
	padding: 20px 10px;
	border: 1px solid white;
	display: block;

}


/** Label wird ausgeblendet **/ 
	label.open-menu-labelDT {
		display: none;
	}



/** Formatierung für Tablet und Desktopansicht **/

@media only screen and (min-width: 1024px) {

  img {
      width: 30%;
      height: auto;
      }

/** Test Anfang **/

label.open-menu-labelDT {
	background: #0000FF; /* Old browsers */
	background: -moz-linear-gradient(top, #0000FF 50%, ##0000FF  100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd2e2e), color-stop(100%,#0000FF )); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* IE10+ */
	background: linear-gradient(to bottom, #0000FF 50%,##0000FF 100%); /* W3C */
	padding: 20px 10px;
	border: 1px solid white;
	display: block;

}




/** Test ENDE **/







input[type="text"] {
    width: 250px;
	line-height: 2em; // 2em is (2 * default line height)
    display: block;
    margin-bottom: 10px;
}


input[type="password"] {
    width: 250px;
	line-height: 2em; // 2em is (2 * default line height)
    display: block;
    margin-bottom: 10px;
}


input[type="submit"] {
    width: 260px;
	line-height: 2em; // 2em is (2 * default line height)
    display: block;
    margin-bottom: 10px;
    /** background-color: silver; **/
}

	/** Navigation wird als einfarbiger, horizontaler Balken dargestellt **/
	
	nav {
		display: block;
		text-align: left;
		padding: 20px;
		background: #0000FF; /* Old browsers */
		background: -moz-linear-gradient(top, #0000FF 50%, #0000FF 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd2e2e), color-stop(100%,#309dcf)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* IE10+ */
		background: linear-gradient(to bottom, #0000FF 50%,#0000FF 100%); /* W3C */
	}
	
	nav ul li {
		display:inline;
		border: none;
		width: 25%;
		background: #0000FF; /* Old browsers */
		background: -moz-linear-gradient(top, #0000FF 50%, #0000FF 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd2e2e), color-stop(100%,#309dcf)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #0000FF 50%,#0000FF 100%); /* IE10+ */
		background: linear-gradient(to bottom, #0000FF 50%,#0000FF 100%); /* W3C */
	}
	
	/** Label wird ausgeblendet **/ 
	label.open-menu-label {
		display: none;
	}
}