/*
 * Style specifications for Rolf's Homepages
 * (c) Rolf Unger 2005
 +--------------------------------------------------+
 |    +- div#wrapper ------------------------+      |
 |    |+----------+-------------------------+|      |
 |     | sidebar  | main                    |       |
 |     |          |                         |       |
 |     |          |                         |       |
 |     |          |                         |       |
 |     +----------+-------------------------+       |
 |     | footer                             |       |
 |     |                                    |       |
 |    |+------------------------------------+|      |
 |    +--------------------------------------+      |
 +--------------------------------------------------+
 */
body { font-family: Verdana, Sans-Serif; font-size: 13px; }
/* Centering is achieved with a relative shift to the left (50% of the body width),
 * and then half of the div width in the opposite direction
 */
@media screen and (min-width: 769px) {
  #wrapper { width: 770px; position: relative; left: 50%; margin-left: -385px; }
  div.main { width: 533px; float: right; padding:1ex; margin-top: 20px; }
  nav.sidebar { width: 202px; float: left; padding: 1ex; margin-top: 20px; }
  .sidebar label, #hamburger { display: none; }
}
div.footer { }

nav.sidebar p { margin-top: 0; margin-bottom: 0; }
/* height in the following div should be identical with image height */
div.putzplan { height:190px; background-image:url(putzplan.jpeg); background-repeat:no-repeat; }
div.putzplan p { margin-top: 0; margin-bottom: 0; margin-left:1ex}
div.putzplan a { font-weight: bold; color:white; }
div#others {
	/* padding-top:170px; height:514px;
	background-image:url(bademantel.jpeg); background-repeat:no-repeat; */
}
nav.sidebar ul.subpages { margin: 0; padding: 0; list-style-type: none; }
nav.sidebar ul.subpages li { padding-left: 1ex; }
ul.subpages li a { display: block; width: 100%; }
nav.sidebar ul.links { margin-left: 1ex; padding-left: 1ex; }

h1 { margin-top: 3px; font-size: 3ex; }
dt { font-weight: bold; }
p.subtitle { font-weight: bold; }
p.note { text-indent: -1.8em; margin-left: 1.8em; }
/* formatting of hyperlinks */
a { text-decoration:none; }
a:hover { text-decoration:underline; }

@media screen and (max-width: 768px) {
  #wrapper { width: 98%; margin-left: auto; margin-right: auto; }
  div.main { width: 100%; padding:1ex; margin-top: 20px; }
  nav.sidebar { position: absolute; top: 6px; right: 2px; width: 200px; padding: 1ex; }
  /* (A) BREAK INTO VERTICAL MENU */
  #navigation-items a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    /*border-top: 1px solid #333;*/
  }
  .navigation-controls { text-align: right; }
  /* (B) SHOW HAMBURGER ICON */
  .navigation-controls > label {
    display: inline-block;
    color: white;
    background-color: #0f37cd;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }
  input#hamburger { position: absolute; top: 20px; right: 20px; z-index: -5; }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #navigation-items { background-color: #fff; display: none; }
  input#hamburger:checked ~ #navigation-items { display: block; }
}