/** Allgemeine Formatierungen **/

body {
	color: #333333;
	font-family: 'Play', sans-serif;
	font-size: 14px;
	margin: 0px;
}


/** 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: 12px 8px;
	border: 1px solid white;
	background: #FB9928; /* Old browsers */
	background: -moz-linear-gradient(top, #FB99280%, #FDDF4B  100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB9928), color-stop(100%,#FDDF4B )); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #FB9928 0%,#FDDF4B  100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #FB9928 0%,#FDDF4B  100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #FB9928 0%,#FDDF4B  100%); /* IE10+ */
	background: linear-gradient(to bottom, #FB9928 0%,#FDDF4B  100%); /* W3C */
}


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

input#open-menu {
	display: none;
}

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

}


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

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

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