﻿
/*Strip the ul of padding and list styling*/

/*Style for menu */
navzentriert {
        display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 36px;}
  
zentriert {
        display: flex;
  align-items: center;
  justify-content: center;}


nav {
        float: left;
        font: bold 16px;
        font-family: Tahoma, Verdana, sans-serif;
        overflow: hidden;
        margin-top:4px;
}
nav ul {
        margin:0;
        padding:0;
        list-style:none;
}
nav ul li {
        float:left;
}
nav ul li a {
        float: left;
        color:#fff;
        padding: 4px 20px;
        text-decoration:none;
        background:#336699;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
}
nav li ul {
        background:#336699;
        left: -999em;
        margin: 26px 0 0;
        position: absolute;
        width: 180px;
        z-index: 9999;
        border: 1px solid rgba(0, 0, 0, 0.5);
        text-align:left;
}
nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 140px;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
}
/*2. Ebene anzeigen und stylen*/
nav ul li a:hover,
nav ul li:hover > a {
        background:#f9c964;
        color:black;
}
nav li ul a:hover, 
nav ul li li:hover > a  {
        background: #f9c964;
        border-bottom: 1px solid rgba(0,0,0,0.6);
        border-top: 1px solid #000;
        width: 140px;
}
/*3. Ebene anzeigen und stylen*/
nav li:hover ul {
        left: auto;
}
nav li li ul {
        margin: -1px 0 0 160px;
        visibility:hidden;
}
nav li li:hover ul {
        visibility:visible;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}




/*Label Menue verstecken */
.show-menu {
	font-family: Tahoma, Verdana, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #35506B;
	text-align: center;
	padding: 10px 0;
	display: none;
	border-bottom:1px dotted #fff;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: Tahoma, Verdana, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size-adjust: none;
  font-stretch: normal;
  font-size: 101%;
}


#rahmen {
  margin: 0 auto;
  margin-top: 8px;
  background: #ffffff none repeat scroll 0% 50%;
  text-align: center;
  width: 1280px;
  height:auto;
  min-height:900px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
}

.header {
  text-align: center;
  padding-top: 12px;
}

.contentmain {
  margin: 0 auto;
  margin-top: 12px;
  width: 1000px; !important;  
}

.content {
  margin: 0 auto;
  margin-top: 12px;
  width: 784px; !important;  
}

.flex-container {
  display: flex;
  flex-direction: column;
}


/*svg Seitenanfang*/
svg circle { fill: #336699;}
svg path { stroke: #ffffff;}

a:hover svg circle { fill: #f9c964;}
a:hover svg path { stroke: #000000;}

/* große Viewports */
@media all and (min-width: 30em) {
.flex-container {
    flex-direction: row;
    background-color:#336699;
  color:white;    
      }
.flex-containerrezeptliste{
  display: flex;
  flex-direction: row;
  background-color:#ffffff;
}

}

/* Flexboxen */
.flex-item {
	flex: auto;
	margin: 10px;
  padding: 20px;
}
.flex-itemrezeptliste {
	flex: auto;
	margin: 0px;
  padding-right: 10px;
  width: 50%;
}


.flex-container h2, h3  {color:white !important}
.flex-item p a {
               color: #336699;
               background-color:#f9f9f9;
               padding-left: 2em; padding-right:2em; padding-top:0.6em; padding-bottom: 0.6em;
               text-align:center
        }
.flex-container a:hover {
        background: #336699;
        color:#ffffff;}
        
.textlinks {text-align:left !important;}
.flex-item .textlinks a {color: #ffffff; background-color : transparent !important; padding: 0.0em;}

.flex-item .baseline { 
  -webkit-align-items: baseline; 
  align-items: baseline; 
}

.trenner {padding:1.2em;}

/*Flexboxen Ende */

.footer {
  border-top: 1px solid #999999;
  padding: 2px 0;
  background: #ffffff none repeat scroll 0% 50%;
  height: 1.6em;
  font-size: 0.8em;
  position: relative;
  clear: both;
  text-align:center;
}

.content, contentmain h1, h2, h3, h4 {
  color: #003366 !important;
  font-style: normal;
  font-weight: bold;
  
}
.content, contentmain h1 {
line-height: 2.0em !important;}

.content, contentmain h1 {
  font-size: 1.4em;
}

.content, contentmain h2 {
  font-size: 1.2em;
}

.content, contentmain h3 {
  font-size: 1.12em;
}

.content, contentmain p {
  font-size: 1.1em;
  font-weight:normal;
  line-height: 1.3em;
}

.content ul.zutaten {
  list-style-image: url(images/zutaten.png);
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 1.1em;
  margin-left: 14px;
}
.content ul.zubereitung {
  list-style-image: url(images/muetze.png);
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 1.1em;
  margin-left: 14px;
}


.content ul.ohne li {
  font-size: 1.1em;
  list-style-type: none;
  padding-bottom: 0.2em; 
}

.caption {margin-left:20px; font-style:italic;}

.content ul.ohne li a:link, .content ul.ohne li a:active, .content ul.ohne li a:visited{
	color: #336699;
	text-decoration:none;
	}
.content ul.ohne li a:hover { font-weight: bold;  text-decoration: underline; color :#fff; background-color:#35506B }

.content ul, ol {
  font-size: 1.1em;
}

.content ul.zubereitung {
  font-family: Tahoma, Verdana, sans-serif;
  list-style-type: square;
  font-size: 1.1em;
}

.content ul.zubereitung li {
  padding-bottom: 8px;
}
.content ul.zubereitung ul li {
	font-size: 1.0rem;}
}

.bggelb {
  background-color: #ffcc66;
}

.content .rezept {
  font-size: 1em;
  font-weight: bold;
  color: #003366;
}
.tabelle-scrollbar {
  width: 100%;
  overflow-y: auto;
  margin: 0 0 1em;
}

.tabelle-scrollbar::-webkit-scrollbar {
  -webkit-appeartabelle-scrollbarance: none;
  width: 14px;
  height: 14px;
}

.tabelle-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}
.tabelle-scrollbar th {background-color:#eeaa33; font-style:italic; font-weight:normal;}
.tabelle-scrollbar td {padding-left: 12px; border-bottom:solid; border-bottom-color:#eeaa33; border-bottom-width:1px; border-left-color:#eeaa33; border-right-color:#eeaa33; 
border-right-color: #eeaa33 !important; border-right-width: 1px !important; border-right: solid;}

.geschlossen {
  background-color: #ffcc00;
  font-weight: bold;
  padding-left:4px; padding-bottom:4px;
}
td .mehlimladen { font-weight:bold;
   padding-left:2px; padding-right:2px;
  }

.content ul, .content ol {
  padding: 0 15px 15px 40px;
}

.content .zentriert {
  text-align: center;
}
.footer {
  border-top: 1px solid #999999;
  padding: 8px 0;
  height: 1.6em;
  font-size: 1.0em;
  position: relative;
}

.imgfloat {
	float:left; padding-right: 12px;
}
.Seitenanfangnichtdrucken {text-align:right;}

/*Responsive Styles*/

@media screen and (max-width : 760px){
/*altes Layout eingebunden*/

#rahmen {
  margin: 0 auto;
  text-align: left;
  width: 100%;
  height:auto;
}
.content {
  margin: 8px;
  width: auto;
}
.contentmain {
  margin: 8px auto;
  width: auto; !important;  
}
.contentmain h1, h2, h3 {text-align:left; padding-left: 12px;
          }

.content h1, h2, h3 {text-align:left;}

img {
max-width:100%;
height:auto;
width: auto; /* ie 8 */
}

/*eingefügt Nav mobil*/

/*Strip the ul of padding and list styling*/
nav {width:100%;}
nav ul {
	list-style-type:none;
	margin: 0;
	margin-bottom: 12px;
	padding:0;
	position: absolute;
}

/*Create a horizontal list with spacing*/
nav li {
	display:inline-block;
	float: right;
	margin-right: 1px;
}

nav li > a:after {
  content: " +";
}
nav li > a:only-child:after {
  content: "";
}

/*Style for menu links*/
nav li a {
	display:block;
	min-width:200px;
	height: 40px;
	text-align: left;
	line-height: 40px;
	font-family: Tahoma, Verdana, sans-serif;
	color: #fff;
	background: #6984A9;
	text-decoration: none;
	padding-left: 24px;
}

/*Hover state for top level links*/
nav li:hover a {
	background: #e5b75b;
}

/*Style for dropdown links*/
nav li:hover ul a {
	background: #fff;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
	text-align:left;
	}

/*Hover state for dropdown links*/
nav li:hover ul a:hover {
	background: #7C9CC6;
	color: #fff;
	}

/*Hide dropdown links until they are needed*/
nav li ul {
	display: none;
}

/*Make dropdown links vertical*/
nav li ul li {
	display: block;
	float: none;
	padding-top:20px;
}

/*Prevent text wrapping*/
nav li ul li a {
	width: auto;
	min-width: 200px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: Tahoma, Verdana, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #35506B;
	text-align: left;
	padding: 10px 20px;
	display: none;
	border-bottom:1px dotted #fff;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
    float:none;
}

/*ende eingefügt nav mobil */

	/*Make dropdown links appear inline*/
nav ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
nav li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
nav ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
nav .show-menu {
		display:block;
	}
	
nav ul li ul {
        background:none;
        background-color:none; border:0px;}
/*zweite Ebene*/
nav ul li ul.hidden a:hover{
         background:#f9c964;
        color:black;
        background-color:none; border:0px;}

              
-----------------
.flex-container {
        background-color:#336699;
  color:white;    
      }
}
.flex-itemrezeptliste {
	flex: auto;
	margin: 0px;
  padding-right: 10px;
  width: 100%;
}

.flex-item {
	flex: auto;
	margin: 4px;
  padding: 8px;
}

.flex-container h3 {color:white !important}


}
