@charset "UTF-8";
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	background-color:#fff;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

body {
	background-color:#fff;
	width:95%;
	height:95%;
	margin:auto;
	padding:0;
	font-family:"Century Gothic",Verdana,sans-serif;	
	font-size:0.8rem;
}

/* BOXMODELL */
header {
	width:100%;
	height:5rem;
	text-align:center;
	padding-top:0.5rem;
	padding-bottom:5rem;
	float:left;
}
@media screen and (min-width:800px) {
	header {
		width:100%;
		height:5rem;
		text-align:center;
		padding-top:0.5rem;
	}
	nav {
		width:100%;
		height:3rem;
		text-align:center;
		padding-top:0.5rem;
		margin-top:0;
		padding-left:0;
	}
}

div.main {
	width:100%;
	clear:both;
	border-top: dotted 2px #006699;
}
@media screen and (max-width:799px) {
	aside#kategorie {
		display:none;
		width:10rem;
		height:16rem;
		border:solid 1px #006699;
		border-radius:10px;
		background-color:#fff;
		background-color:rgba(255,255,255,0.9);
		border:solid 1px #006699;
		position:absolute;
		z-index:1;
	}
	aside#zusatz {
		display:none;
		width:12rem;
		height:8rem;
		border:solid 1px #006699;
		border-radius:10px;
		background-color:#fff;
		background-color:rgba(255,255,255,0.9);
		border:solid 1px #006699;
		position:absolute;
		z-index:2;
	}
}
@media screen and (min-width:800px) {
	aside#kategorie {
		display:none;
		width:10rem;
		height:16rem;
		border:solid 1px #006699;
		border-radius:10px;
		background-color:#fff;
		background-color:rgba(255,255,255,0.9);
		border:solid 1px #006699;
		position:absolute;
		margin-left:5%;
		z-index:1;
	}
	aside#zusatz {
		display:none;
		width:12rem;
		height:8rem;
		border:solid 1px #006699;
		border-radius:10px;
		background-color:#fff;
		background-color:rgba(255,255,255,0.9);
		border:solid 1px #006699;
		position:absolute;
		z-index:2;
	}
}
aside#kategorie ul,
aside#zusatz ul {
	list-style-type:none;
	margin:0 0 1rem 0.5rem;
	padding:1rem;
	text-transform:none;
}
aside#kategorie ul li a,
aside#zusatz ul li a {
	color: #006699;
	text-decoration: none;
	font-size:0.8rem;
	width:10rem;
	display:block;
	padding-left:10px
}
aside#kategorie ul li a:hover,
aside#zusatz ul li a:hover {
	border-left: solid #006699 1px;
	padding-left:9px;
	text-decoration: none;
}

footer {
	width:100%;
	clear:both;
	background-color: #006699;
	color: #ccccff;
	font-size:0.7rem;
	border-top: dotted 2px #006699;
	padding:0.6rem;
	text-align:center;
}

/* IMAGES HEADER */
figure#img01,figure#img02,figure#img03,figure#img04,figure#img05,figure#img06,figure#img07{
	display:none;
}

@media screen and (min-width:800px) {
	figure#img01,figure#img02,figure#img03,figure#img04,figure#img05,figure#img06,figure#img07{
		display:inline;
	}
	header img{
		width:100%;
	}
	figure#img01{ /* Pfanne */
		width:10%;
		position:absolute;
		top:7%;
		left:22%;
		z-index:0;
	}
	figure#img02{ /* Korkenzieher */
		width:5%;
		position:absolute;
		top:3%;
		right:12%;
	}
	figure#img03{ /* Kanne */
		width:5%;
		position:absolute;
		top:2%;
		left:13%;
	}
	figure#img04{ /* Nudelholz */
		width:7%;
		position:absolute;
		top:2%;
		right:30%;
	}
	figure#img05{ /* Topf */
		width:7%;
		position:absolute;
		top:9%;
		right:20%;
		transform:rotate(10deg);
	}
	figure#img06{ /* Schöpfer */
		width:4.2%;
		position:absolute;
		top:2%;
		right:2%;
		transform:rotate(10deg);
	}
	figure#img07{ /* Handschuh */
		width:8%;
		position:absolute;
		top:4%;
		left:2%;
		transform:rotate(10deg);
	}
}

/* SCHRIFT */
header h1 {
	font-family: 'MelissaMedium';
	font-weight: normal;
	font-style: normal; 
	font-size:5rem;
	margin:0;
	color: #006699;
}
header h1 a {
	text-decoration:none;
	color:#006699;
}
div.main h1 {
	text-align:center;
	color:#006699;
	text-transform:uppercase;
	font-size:1.7rem;
	margin:0;
}
div.main p {
	line-height:1.5rem;
}

footer a {
	text-decoration:underline;
	color:#ccccff;
}

div#error{
	color: red;
}


/* ARTICLES */
@media screen and (max-width:799px) {
	div.main figure {
		width:100%;
		height:20.5vw;
		margin:0 0 1vw 0;
		clear:both;
		background-color:#006699;
		border-radius:5px;
		border:solid 1px #006699;
	}
	div.main figure.leer {
		width:100%;
		height:5vw;
		margin:0 0 1vw 0;
		clear:both;
		background-color:#fff;
		border-radius:5px;
		border:none;
	}
	div.main figure img {
		max-height: 20vw;
		float:left;
		border-radius:5px;
	}
	div.main figure figcaption {
		color:#ccccff;
		max-width:80vw;
		padding:7vw 0;
		position:relative;
		left:2rem;
	}
	div.main figure a {
		text-decoration:none;
		font-family: 'MelissaMedium';
		font-size:2rem;
	}
}
@media screen and (min-width:800px) {
	div.main div.startwrapper {
		width:95%;
		margin:auto;
		padding-left:5%;
		padding-left:5vw;
	}
	div.main figure {
		width:10%; /* für Browser, die vw noch nicht unterstützen */
		width:10vw;
		float:left;
		margin:0.5%;
		margin:0.5vw;
	}
	div.main figure img {
		max-width:100%;
		border-radius:10px;
		border: solid 1px #006699;
	}
	div.main figure a {
		text-decoration:none;
		font-family: 'MelissaMedium';
		text-align: center;
		font-size:1.6rem; /* für Browser, die vw noch nicht unterstützen */
		font-size:1.6vw;
	}
	div.main figure a:hover {
		transition-delay:0s 0;
		transition-duration: 0.1s;
		transition-property:background-color;
		transition-timing-function:ease-in-out;
	}
	div.main figure figcaption {
		background-color:#006699;
		border:solid 1px #006699;
		color: #ccccff;
		border-radius:5px;
		-moz-transform:rotate(-4deg);
		-webkit-transform:rotate(-4deg);
		transform:rotate(-4deg);
		position:relative;
		top:-2rem;
		
		transition-delay:0s 0;
		transition-duration: 0.3s,1s;
		transition-property:background-color,color;
		transition-timing-function:ease-in-out;
	}
	div.main figure figcaption:hover {
		background-color:#fff;
		color:#006699;
	}
	.break {
		clear:both;
	}
}

/* NAVIGATION */
.show-menu { /* Zeichen/Text, das anstatt des Menüs erscheint */
	float:right;
	text-decoration: none;
	color: #006699;
	font-size:2.5rem;
	background-color:#fff;
	text-align: center;
	/*padding-top:2rem;*/
	margin-top:-2rem;
}
input[type=checkbox]{
    display: none;
}
nav {
	display:none;
	z-index:10;
}
input[type=checkbox]:checked  ~ nav{
    display: block;
}

@media screen and (max-width:799px) {
	nav {
		clear:both;
	}
	nav ul.menu {
		background-color:#006699;
		padding: 1rem 1rem 1rem 1.5rem;
		color:#ccc;
		list-style-type:none;
		margin:0;
		line-height:1.6rem;
		border-radius:5px;
	}
	nav ul.menu li {
		padding-left:1rem;
	}
	nav ul.menu li a {
		color:#fff;
		font-size:0.9rem;
		text-decoration:none;
		width:100%;
		display:block; /* damit die width-Angabe greift */
	}

	nav ul.menu li:hover,
	nav ul.menu li a:hover	{
		background-color:#fff;
	}
	nav ul.menu li:hover > a {
		color:#006699;
		
	}
}

@media screen and (min-width:800px) {
	.show-menu {
		display: none;
	}
	nav {
		display:inline-block;
	}
	nav ul.menu {
		display:inline-block;
		list-style-type:none;
		margin:0;
		padding:0;
	}
	nav ul.menu li {
		display: inline-block; /* Elemente werden horizontal angeordnet */
		padding: 0 1.5em;
	}
	nav ul.menu li:nth-child(2) {
		border-left:solid black 1px;
		border-right:solid black 1px;
	}
	nav ul.menu li a {
		color: #000;
		text-decoration: none;
	}
	nav ul.menu li a:hover,
	nav ul.menu li a.aktiv {
		color: #006699;
		text-decoration: none;
	}
}


/* FORMS */
div.main input.suche,
div.main input.sucheklassisch {
	width:80%;
	background-color:#006699;
	border:solid #006699 1px;
	color:#ccccff;
	border-radius:10px;
	padding:0.5rem 1rem;
}
div.main form#suche {
	width:80%;
	position:relative;
	left:15%;
	top:-0.7rem;
}
div.main button.suchesubmit {
	background-color:transparent;
	border:none;
	position:relative;
		left:-3rem;
}

div.main button.suchesubmit  img{
	max-height:1rem;
}
div.main button.suchesubmit:hover{
		cursor:pointer;
	}
@media screen and (min-width:800px) {
	div.main input.suche,
	div.main input.sucheklassisch {
		width:80%;
		background-color:#006699;
		border:solid #006699 1px;
		color:#ccccff;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		padding:0.5rem 1rem;
		
		transition-delay:0s 0;
		transition-duration: 1s;
		transition-property:background-color;
		transition-timing-function:ease-in-out;
	}
	div.main form#suche {
		width:40%;
		position:relative;
		left:35%;
		top:-1rem;
	}
	
	div.main button.suchesubmit {
		background-color:transparent;
		border:none;
		position:relative;
			left:-3rem;
	}

	div.main button.suchesubmit  img{
		max-height:1rem;
	}
	div.main button.suchesubmit:hover{
		cursor:pointer;
	}
}
/* FORM REZEPT EINTRAGEN */
div.main form#f_eintragen {
	width:80%;
	margin-top:10px;
	margin-left:5%;
}
div.main form#f_eintragen input[type=text],
div.main form#f_eintragen input[type=submit],
div.main form#f_eintragen input[type=reset],
div.main form#f_eintragen select,
div.main form#f_eintragen textarea {
	width:100%;
	border:solid #000 1px;
	color:#000;
	border-radius:3px;
	padding:0.4em 0.5rem;
	margin:5px 0 10px 0;
	font-family:"Century Gothic",Verdana,sans-serif;	
	font-size:0.8rem;
}
@media screen and (min-width:800px) {
	div.main form#f_eintragen {
		width:80%;
		margin-left:30%;
		margin-top:10px;
	}
	div.main form#f_eintragen input[type=text],
	div.main form#f_eintragen input[type=submit],
	div.main form#f_eintragen input[type=reset],
	div.main form#f_eintragen select,
	div.main form#f_eintragen textarea {
		width:50%;
		border:solid #000 1px;
		color:#000;
		border-radius:3px;
		padding:0.4em 0.5rem;
		margin:5px 0 10px 0;
		font-family:"Century Gothic",Verdana,sans-serif;	
		font-size:0.8rem;
	}
}

div.main form#f_eintragen input[type=file] {
	border:none;
}
div.main form#f_eintragen input[type=checkbox] {
	display:inline;
	border:solid 1px black;
}
div.main form#f_eintragen input[type=submit],
div.main form#f_eintragen input[type=reset] {
	width:8rem;
	background-color:#006699;
	color:#ccccff;
	border:none;
	cursor:pointer;
}

/* FORMULAR Login */
#f_login {
	width:80%;
	margin-top:10px;
	margin-left:5%;
}
@media screen and (min-width:800px) {
	#f_login {
		width:80%;
		margin-left:30%;
		margin-top:10px;
	}
}

#f_login label {
	display:inline-block;
	min-width:9em;
	text-align:left;
	line-height:3em;
}
#f_login input[type=text], #f_login input[type=password] {
	background-color:#006699;
	border:solid #006699 1px;
	color:#006699;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:6px;
	padding:0.2rem 0.5rem;
	
	transition-delay:0s 0;
	transition-duration: 1s;
	transition-property:background-color;
	transition-timing-function:ease-in-out;
}
#f_login input[name=username] {
	background-color:#fff;
}
#f_login input[type=submit] {
	width:5rem;
	background-color:#fff;
	border-radius:5px;
	color:#006699;
	padding:3px 0px;
	border:1px solid #006699;
	margin-left:1rem;
	
	transition-delay:0s 0;
	transition-duration: 1s;
	transition-property:background-color,color;
	transition-timing-function:ease-in-out;
}
#f_login input[type=submit]:hover {
	background-color:#006699;
	color:#fff;
}
span#info {
	color: #006699;
	font-weight:bold;
	margin-left:9em;
}
p.hello {
	text-align:center;
}
p.hello a {
	text-decoration:none;
	color:#006699;
}
p.hello a:hover {
	text-decoration:none;
}
/* Login-Button wird bei kleinen Bildschirmen unterhalb des Formulars angezeigt */
@media screen and (max-width:500px) {
	#f_login input[type=submit] {
		display:block;
		margin-left:0;
		margin-top:1rem;
	}
}

/* REZEPT-TABELLE */
div.main table.rezepte,
div.main table.tablehead {
	width:95%;
	margin:10px auto;
}
div.main table.tablehead th img {
	width:13px;
	float:right;
}
@media screen and (min-width:800px) {
	div.main table.rezepte,
	div.main table.tablehead{
		width:80%;
		margin:10px auto;
	}
	div.main table.tablehead th img {
		width:13px;
		margin-right:2%;
		float:right;
	}
}
div.main table.tablehead th {
	background-color:#006699;
	color:#fff;
	font-weight:normal;
	padding:5px 10px;
	font-size:0.8rem;
	text-transform:uppercase;
	text-align:left;
}
div.main table.rezepte a {
	border:0;
}
div.main table.rezepte td {
	padding:5px 10px;
	font-size:0.8rem;
	text-align:left;
	border-bottom:solid #006699 1px;
}
div.main table.rezepte tr:nth-child(odd) {
	background-color:#d9e2e7;
}
div.main table.rezepte td a {
	color:#006699;
	text-decoration:none;
}
div.main table.rezepte td a:hover{
	font-weight:bold;
}

/* REZEPTANZEIGE */
@media screen and (min-width:800px) {
	div.main h2 {
		text-align:left;
		color:#006699;
		font-size:1.1rem;
	}
	div.main div.wrapper {
		width:60%;
		margin:10px auto;
	}
	div.main div.zutaten {
		width:30%;
		padding-right:3%;
		float:left;
		border-right:1px dotted #006699;
		margin-bottom:5%;
	}
	div.main div.zubereitung {
		width:70%;
		float:right;
		padding-left:3%;
	}
	div.main div.rezeptimg {
		text-align:center;
		margin-top:10px;
	}
	div.main div.rezeptimg img {
		height:200px;
		border-radius:10px;
		border: solid 2px #006699;
	}
	div.main div.zusatzinfos {
		clear:both;
		border-top: dotted #006699 1px;
		padding:5px 20px;
		-moz-transform:rotate(-2deg);
		-webkit-transform:rotate(-2deg);
		transform:rotate(-2deg);
	}
	div.main div.zusatzinfos p {
		line-height:0.8rem;
	}
	div.main div.icons{
		clear:both;
		padding-left:20px;
	}
	div.main div.icons img{
		height:15px;
	}
	div.zurueck {
		width:60%;
		margin:0 auto;
	}
}

@media screen and (max-width:799px) {
	div.main h2 {
		text-align:left;
		background-color:#006699;
		color:#fff;
		font-size:1.1rem;
		padding: 5px 10px;
		border-radius:3px;
	}
	div.main div.wrapper {
		width:100%;
		margin:0 auto;
	}
	div.main div.zutaten {
		width:100%;
		margin-left:3%;
		margin-bottom:5%;
	}
	div.main div.zubereitung {
		width:100%;
		margin-left:3%;
	}
	div.main div.zubereitung p,
	div.main div.zutaten p
	{
		padding-left:10px;
	}
	
	div.main div.rezeptimg {
		text-align:center;
	}
	div.main div.rezeptimg img {
		max-width:100%;
		border-radius:10px;
		border: solid 2px #006699;
	}
	div.main div.zusatzinfos {
		clear:both;
		border-top: dotted #006699 1px;
		padding:5px 20px;
		-moz-transform:rotate(-2deg);
		-webkit-transform:rotate(-2deg);
		transform:rotate(-2deg);
	}
	div.main div.zusatzinfos p {
		line-height:0.8rem;
	}
	div.main div.icons{
		clear:both;
		padding-left:20px;
	}
	div.main div.icons img{
		height:15px;
	}
	div.zurueck {
		width:95%;
		margin:0 auto;
	}
}
div.zurueck a {
	border:0;
}
div.zurueck a img {
	height:15px;
}
div.zusatz {
	text-align:center;
	margin-top:10px;
}

/* REZEPT ÄNDERN */
div#aendernbox {
	display:none;
	width:10rem;
	height:10rem;
	border:solid 1px #006699;
	border-radius:10px;
	background-color:#fff;
	background-color:rgba(255,255,255,0.9);
	border:solid 1px #006699;
	position:absolute;
	bottom:20px;
	z-index:1;
}
div#aendernbox  ul {
	list-style-type:none;
	margin:0 0 1rem 0.5rem;
	padding:1rem;
	text-transform:none;
}
div#aendernbox  ul li a {
	color: #006699;
	text-decoration: none;
	font-size:0.75rem;
	width:10rem;
	display:block;
	padding-left:10px
}
div#aendernbox  ul li a:hover {
	border-left: solid #006699 1px;
	padding-left:9px;
	text-decoration: none;
}
div.kategorie_aendern {
	display:none;
}
div.foto_aendern form {
	display:none;
}
div.foto_aendern form.hide{
	display:none;
}
div.main button {
	font-family:"Century Gothic",Verdana,sans-serif;	
	font-size:0.6rem;
	border:none;
	width:4rem;
	background-color:#006699;
	color:#ccccff;
	border-radius:3px;
	padding:0.4em 0.5rem;
	margin:5px 0 10px 0;
	cursor:pointer;
}
div.zusatz input[type=checkbox] {
	display:inline;
	border:solid 1px black;
}