@media screen and (max-width: 48em) {
  .stdnav, .rstitle { display: none; }

  .story {  padding: 1em; }	/* make room, make room */
  .storytitlepoke { margin-left: 0; }

  /* mininav ohne kringel etc, und nicht soviel links einruecken */
  #mininav ul { list-style-type: none; 
                padding-left: 0; 
                margin-top: 0; margin-bottom: 0;
                }
  /*  aber unterlisten schon ein bissl (oder halt den inhalt ) */
  #mininav ul > li { padding-left: 0.5em; }
  #mininav ul ul > li { padding-left: 1em; }

  /* farbe fuer alles damit nix drunter rausleckt */
  #mininav { background-color: #222222; }

  /* generelles layout, aber normal isses aus. */
  #mininav {
             position: fixed;
             top: 0.5em;
             left: 5%;

             width: 90%;
             margin: 0;
             z-index: 1000;

             display: none;
             }

  /* fuers anschalten vom nav overlay */
  #mininav:target { display: inherit; }

  #mininav:target li a
  { 
    display: inline-block;
    width: 100%;		/* damit der link die ganze zeile ausfuellt */

    color: #999999;
    background-color: #222222;
    border-bottom: 1px solid #333333;
    }
  #mininav:target li a:hover {  color: orange; transition: color .3s; }

	/* mehr platz fuer kleinere breadcrumbs */
  .menublock, .formblock { font-size: smaller; } 
  .pure-button { padding: 0.5em 0.5em; } /* detto */
}

@media screen and (min-width: 48em) { 
/* have the icon poke out into the void */
.storytitlepoke { margin-left: -1em; } 

#mininav, .mininav {  display: none; }
}

body { background-image: url("daemon-bg.jpg");}

/* center the logo, please */
.logo { margin-left: auto; margin-right: auto; }

.menublocktitle { font-weight: bold; }
.menublock { padding: 5px; text-align: left; }
/* form wie menu aber nach rechts bitte  */
.formblock { padding: 5px; text-align: right; }

.storytitle { font-size: larger; font-weight: bold;}
.updatetitle { font-size: larger; font-weight: bold;}


/* no underline pls, but color transition */
a { text-decoration: none; border: none; color: #33C; }
a:hover   { color: #c03;     transition: color .3s; }

/* image thumbs bissl huebscher */
.thumbs { text-align: center; }
/* und inline-block damits mit pure img nicht nach links rutscht */
.thumb { display: inline-block; text-align: center; padding: 3px; border: 1px solid #AAAAAA; }

/* pure-menu ist normal zu breit, und link entries bissl zu hell */
.categorymenu { display: inline-block; }
.pure-menu-link { color: #333333; }


/* quotes usw */
q { font-style: italic; }
blockquote, .quote, pre { 
   font-style: italic; 
   margin: 5px;
   padding: 5px;
   border: 1px solid #AAAAAA;
}

/* letzte zeile per story und der text und die logos ganz unten */
.storybar { font-size: smaller; text-align: right; }
.address {font-style: italic; font-size: smaller;}
.rstitle { float: right;}

/* fuer die 403 seite */
.onred { background-color: #ff0000 }

/* newer/older buttons */
.fwdrevbutton {   background-color: silver; }
.linkbutton {   background-color: silver; }
/* click here for rest of the story */
.morebutton {   background-color: silver; font-size: 85%; }

/* button for the last of the breadcrumbs */
.youareherebutton {  background-color: #1E90FF; }


/* story block schmaler machen fuer text-lesbarkeit */
.story { max-width: 76em; margin-left: auto; margin-right: auto; margin-top: 10px; }