@-ms-viewport {
  width: device-width;
  zoom: 1;
}
@-o-viewport { 
  width: device-width;
  zoom: 1;
}
@viewport {
  width: device-width; 
  zoom: 1;
}
html {
  -moz-hyphens   : auto;
  -o-hyphens     : auto;
  -webkit-hyphens: auto;
  -ms-hyphens    : auto;
  hyphens        : auto;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 3;
  color      : #000000;
  font-family: Verdana;
  font-size  : 12pt;
}
body {
  background-color: #FFFFFF;
}
a, a:link, a:active,
a:visited, a:hover {
  color: #5E85D7;
}
h1 {
  font-family: Verdana;
  font-size  : 20pt;
  color      : #FF9240;
  margin     : 0px;
}
em, i {
  font-family: Arial;
}
form {
  margin     : 0px;
}
#wrapper {
  max-width: 980px;
  margin: 0 auto;
}
#header{
}
.contentwrapperindex {
  width: 100%;
}
@media screen and (max-width: 600px) {
  .contentwrapper {
    width: 100%;
  }
}
@media screen and (min-width: 601px) {
  .contentwrapper {
    /* Opera Mini CSS Hack (because Opera Mini does not support calc()-funktion) */
    width: 100%;              /* for browsers which DO NOT supprt calc() */
    max-width: 640px;         /* for browsers which DO NOT supprt calc() */
    margin-right: 40px;       /* for browsers which DO NOT supprt calc() */
    width: calc(100% - 340px);
    max-width: calc(100%);    /* to "reset" max-width again on browsers which DO support calc() */
    margin-right: calc(0px);  /* to "reset" margin-right again on browsers which DO support calc() */
    /* end of: Opera Mini CSS Hack
       note: without the Opera Mini CSS Hack it would be just a one liner:

       width: calc(100% - 340px);

       all others (max-width, margin, etc.) are than not nececassry; just the calculated width is sofisticated */
    float: left;
  }
}
@media screen and (max-width: 550px) {
  .menuwrapperindex, .menuwrapper  {
    max-width: 300px;
    margin: 0 auto;
    padding-top: 2.6em;
  }
}
@media screen and (min-width: 551px) {
  .menuwrapperindex, .menuwrapper  {
    max-width: 300px;
    float: right;
  }
}
#content {
  font-family: Verdana;
  font-size  : 12pt;
  line-height: 130%;
}
#content h1 {
  font-family: Verdana;
  color      : #FF9240;
  margin     : 0px;
}
@media screen and (max-width: 480px) {
  #content h1 {
    font-size: 20pt;
    line-height: 120%;
  }
}
@media screen and (min-width: 481px) {
  #content h1 {
    font-size: 30pt;
    line-height: 120%;
  }
}
#content .booktitle {
  font-family: Verdana;
  font-size  : 18pt;
  font-weight: bold;
  line-height: 120%;
  color      : #9E87C2;
}
#content .bookdesc {
  margin-top   : 10px;
  margin-bottom: 25px;
}
#content .caption {
  font-family: Verdana;
  font-size  : 18pt;
  font-weight: bold;
  line-height: 120%;
  color      : #739B13;
}
#content .autor {
  font-size  : 11pt;
  font-style : italic;
  line-height: 120%;
}
#menu {
}
#navi {
  font-family: Verdana;
  font-size  : 12pt;
  line-height: 150%;
}
#navi a, #navi a:link, #navi a:active,
#navi a:visited, #navi a:hover {
  color: #5E85D7;
}
#navi .navibox {
  border : 1px solid #FBDBB7;
  padding: 30px;
}
#footer {
  clear: both;
}