@charset "UTF-8";
@font-face {
    font-family: OpenSans-Regular;
    src:url("fonts/OpenSans-Regular.ttf");
}
@font-face {
    font-family: MerriweatherSans-Regular;
    src:url("fonts/MerriweatherSans-Regular.ttf");
}
/* General options */
html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}
body {
    margin:0 auto;
    background-color:#fcfbfa;
    max-width:50em;
    line-height:1.6;
    font-size:16px;
    font-family: OpenSans-Regular;
    color:#333;
	padding-left:16px;
	padding-right:16px;
}
h1,h2,h3 {
    line-height:1.2;
    font-family: MerriweatherSans-Regular;
}
a {
  color: #333;
}
a:visited {
  color: #666;
}
a:hover {
  color: #000;
}
hr {
    width: 100%;
    margin: 1px 0px 1px 0px;
    height: 1px;
    border: 0 none;
    background-color:#666;
 }
div.header {
    display: flex;
    flex-direction: row;
    align-items: center;
}
div.header img {
    height: 4em;
    width: 5em;
}
div.header h1 {
    padding-left: 0.5em;
}
div.footnote{
    color:#666;
    padding-bottom:1em;
    font-size:12px;
}
.paesseToggle{
    float: right;
}


/* Top navigation */
.topnav {
  overflow: hidden;
}
.topnav a {
  float: left;
  color: #666;
  font-size:14px;
  text-align: center;
  padding: 6px 16px 4px;
  text-decoration: none;
}
.topnav a:hover {
  color: #333;
}
.topnav a.active {
  color: #333;
}
/* Rezepte Styling */
.rezeptbild{
    width: 21em;
    margin: 2em;
}
.rezeptbild img{
    width: 100%;
    box-shadow: 2px 2px 4px #333;
}
.zutatentabelle{
    width: 25em;
    line-height:1.2;
}
div.zutatenliste {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    align-items: top;
}
div.zutatenliste .menge {
    width: 3em;
    text-align: right;
    vertical-align: top;
    padding-right:0.5em;
}
div.zutatenliste .einheit {
    width: 2em;
    text-align: left;
    vertical-align: top;
    padding-right:1em;
}
div.zutatenliste .zutat {
    text-align: left;
    vertical-align: top;
}
div.naehrwertbox {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: top;
}
.naehrwerttabelle {
    width: 25em;
    line-height:1.2;
    margin-bottom: 1em;
}
div.naehrwerttabelle .menge {
    width: 3em;
    text-align: right;
    vertical-align: top;
    padding-right:0.5em;
}
div.naehrwerttabelle .einheit {
    width: 2em;
    text-align: left;
    vertical-align: top;
    padding-right:1em;
}
div.naehrwerttabelle .zutat {
    text-align: left;
    vertical-align: top;
}
.naehrwertmatrix{
    width: 21em;
    margin: 0em 2em ;
}
.naehrwertmatrix img{
    width: 100%;
}

/* Paesse Styling */
#sortToggle {
}
.svg {
    width: 100%;
    height: 5em;
}
.openPath{
    stroke:#7B3;
    fill:#8D4;
    stroke-width:1px;
}
.baseLine{
    stroke:#333;
    stroke-width:1px;
}
.monthMarker{
    stroke:#333;
    opacity:1;
    stroke-width:1px;
}
.monthMarkerText{
    fill:#333;
    opacity:1;
    font-size:16px;
    filter: drop-shadow( 0px 0px 1px #fcfbfa);
}
.todayMarker{
    stroke:#E63;
    opacity:0.8;
    stroke-width:2px;
}
.openPath:hover ~ .monthMarkerText{
    opacity:0.2;
}