body {
      font-size:0.9em;
      line-height:1.3em; 
      font-family:Calibri, Arial sans-serif;
      background:#333333;
      }
      
table{
      border-collapse:collapse;
}

ul{
  list-style:none;
}

.navitop, .navileft, .contentarea, .naviright, .contentspacer{
      background:#ffffff;
}

.navileft, .navitop {
  border:1px solid #666666;
  padding:0em;
  margin:0px auto;
  margin-bottom:0.5em;
  border-bottom-color:#555555;
  }
.contentarea{
  padding-top:1em;
}
.contentarea, .contentspacer {      
  margin: 0px auto; 
  width:100%;
  }
.contentspacer{
  padding:0px;
}
.viewcovercontent{
      width:95%;
      margin: 0 auto;
      padding-top:1.5em;
}
.naviright{
          margin:0px auto;
          margin-top:0.5em;
          border:1px solid steelblue;
}
.naviright, .navileft, .navitop{
          border-left:0px;
          border-right:0px; 

}
.homebutton {font-weight:bold;
             font-size:12pt;
             text-align:center;
             color:#000000;
}
.contentarea h1 {text-align:center;
                font-weight:bold;
                font-size:15pt;
                }

.contentarea h2, .viewcovercontent h2 
                {text-align:center;
                font-weight:bold;
                text-decoration:underline;
                font-size:2.4em;
                line-height:1.1em;
                text-transform: uppercase;
                }

.contentarea h3 {text-align:center;
                font-weight:bold;
                font-size:12pt;
                }
.contentarea h4 {
                font-weight:bold;
                font-size:10pt;
                text-decoration:underline;
                text-align:center;
}

h1,h2,h3,h4{padding:4px;clear:both;}
h1{
  margin-top:0px;
  padding:1vw;
}
td, th {font-size:10pt;}
.width100px {width:100px;}
.width200px {width:200px;}

a, a:visited {
  color:#444444;
  text-decoration:underline;
}

a:hover{
  text-decoration:none;
  color:#333333;
}
/*************************** Filterlist *****************/

.filterlist {
  width:250px;
  margin: 1px auto;
  overflow: hidden;
  padding:1.2vh;
  
}

.filterhead, .filteritem{
    float:left;
}
.filterhead{
    margin-right:0.2vw;
    font-size:1.1em;
    width:260px;
}

.filteritem a{
    color:#000;
    display:inline-block;
    padding:10px;
    width:11vw;
    min-width:130px;
    text-align:center;
    border-radius:5px;
    font-size:1em;
    text-transform: uppercase;
    pointer-events: auto;
    -webkit-transition: color 0.4s, background-color 0.9s;
    -moz-transition: color 0.4s, background-color 0.9s;
    transition: color 0.4s, background-color 0.9s;
}

.filteritem{
  padding:10px;
  margin-left:0.5vw;
  margin-right:0.5vw;
  border-bottom: 1px solid #888888;
}
.filteritem a:hover,
.filteritem.filtered a{
    background:#333333;
    color:#f1f1f1;
    border-radius:5px;
    pointer-events: auto;
    -webkit-transition: color 0.4s, background-color 0.9s;
    -moz-transition: color 0.4s, background-color 0.9s;
    transition: color 0.4s, background-color 0.9s;
}
.filteritem p{padding:0px;}
@media only screen and (min-width: 520px) {
  .filterlist{
    width:500px;
  }
  .filterhead{
    width:500px;
  }
  .filteritem{
  padding-top:20px;
  padding-bottom:20px;
  }
}
@media only screen and (min-width: 1000px) {
  .filterlist{
    width:95%;
  }
  .filteritem {
  padding:10px;
  }
  
  .filterhead{
    width:110px;
  }

}
/*************************** Ende Filterlist ************/

.bookinfo{
 border:1px;
 width:90%;
 margin:0px auto;
}

 .connections, .illustration{
 
 }

.bookinfo ul, .connections{
      list-style-type:none;
      padding:0px;
}

.connections li dl{
  display:inline-block;
}

@media only screen and (min-width: 1000px) {
  .bookinfo ul, .connections{
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    }
}
.bookinfo ul li div ul.trans{
  -moz-column-count:1;
  -webkit-column-count: 1;
  column-count: 1;
}
.trans li{
  padding:0.2em;
}

p.infotext, form{
  padding-left:3px;
}

.contentnavi a{
      padding-left:4px;
}
.bookinfo ul.column0{
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    margin-left:1.2em;
}
/*************************** Changelog ******************/
.changelogcontainer{
  width:90%; 
  margin:auto;
}

.changelogcontainer h3{
  text-align:left;
}

.changelog{
    margin-left:4px;
    font-size:9pt;
    margin-bottom:8px;
}
.changelog dt.head1, .changelog dt h1{
  padding:2px;
  text-align:left;
  font-weight:bold;
  font-size:14pt;
}
.changelog dt h2{
  padding:2px;
  font-weight:normal;
  text-decoration:none;
  text-align:left;
  font-size:11pt;
}
.changelog dt h3{
  font-size:10pt;
  font-weight:normal;
}
.changelog dd{
  padding:0px;
  margin-left:1em;
}
/*************************** Ende Changelog ******************/
.coveramazon{
  font-weight:bold;
  margin-right:2em;
}

.sammlungsliste, .adaptionsliste{
    margin-top:0px;
    padding:0px;
    width:49%;
    vertical-align:top;
}
.sammlungsliste{
  padding-left:0.5em;}
  
 .nav table{
  margin:2px auto; 
  empty-cells:show;
  }
 
 .countrynavmeta{
  width:60px;
 }

 .nav a{
  font-size:10pt;
  margin:1px;
  display:block;
  padding:3px;
  padding-left:10px;
  padding-right:10px;
  float:left;
  width:14px;
  text-align:center;
  color:#333333;
  text-decoration:none;
 }
 
 .nav a:hover{
  color:#333388;
 }
 
 .countrynavmeta a{
  height:1.5em;
  line-height:1.5em;
  vertical-align:middle;
  width:56px;
  }
 .countrynavpres{
  font-weight:bold;
  text-decoration:none;
 }
 *,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.book_large {
    float: left;
    margin-bottom: 20px;
}

ul.viewcoverimg li,
ul.viewcoverimg li.schuber{
  display:inline;
  float:right;
}

ul.viewcoverimg li.schuber{
  padding-left:4px;
}

ul.viewcoverimg a img{
  border-radius:5px;
  box-shadow: 2px 2px 5px rgba(51,51,51,0.64);
}

.book_info {
    float: left;
    margin-left: 25px;
    color: #2B2B2B;
    text-transform: none;
    width:  50vw;
    width: 450px;
    border-top: 1px solid #CBCBCB;
}  
.book_info h2, .viewsimilarcover h2{
    font-weight:300;
    color: #a4a4a4;
    font-size:27pt;
}

.book_info ul{
    padding-bottom:2px;
    border-bottom: 1px dashed #cbcbcb;
    margin-bottom:10px;
}

.book_info ul li{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

.viewsimilarcover{
    clear: both;
    padding: 0px 0px 7px;
    color: #2B2B2B;
    width: 730px;
    text-transform: capitalize;
    border-top: 1px solid #CBCBCB;
}

.book_info ul li.viewcoverlink{
  margin-left:2em;
}
/**********************************
Menüzeugs für obere Navileiste

**********************************/
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#csssubmenu,
#csssubmenu ul,
#csssubmenu ul li,
#csssubmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0px;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index:990;
}

#cssmenu {
  background: #333333;
  border-bottom: 3px solid #444444;
  box-shadow: 2px 2px 8px rgba(51,51,51,0.64);
}

#csssubmenu {
  background: #555555;
  box-shadow: 2px 2px 8px rgba(51,51,51,0.64);
}
#cssmenu > ul > li,
#csssubmenu > ul > li {
  float: left;
}
#csssubmenu.align-center > ul,
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li,
#csssubmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center .active {
  background: #444444;
  border-left:1px solid #383838;
  border-right:1px solid #383838;
}

#csssubmenu.align-center .active {
  background: #444444;
  border-left:1px solid #383838;
  border-right:1px solid #383838;
}

#cssmenu > ul > li > a,
#csssubmenu > ul > li > a{
  -webkit-transition: color 0.4s, background-color 0.4s;
  -moz-transition: color 0.4s, background-color 0.4s;
  transition: color 0.4s, background-color 0.4s;
}

#cssmenu > ul > li > a:hover,
#csssubmenu > ul > li > a:hover{
  background: #444444;
  color:#ffffff;
  pointer-events: auto;
  -webkit-transition: color 0.4s, background-color 0.4s;
  -moz-transition: color 0.4s, background-color 0.4s;
  transition: color 0.4s, background-color 0.4s;
}

#cssmenu > ul > li > a {
  text-decoration: none;
  color: #dddddd;
}

#csssubmenu > ul > li > a {
  text-decoration: none;
  color: #dddddd;
}

@media only screen and (max-width: 1244px){
#cssmenu > ul > li > a {
  padding: 8px 0.9vw;
  font-size: 14pt;
  font-weight:200;
  letter-spacing: 0;
}
#csssubmenu > ul > li > a {
  padding: 8px 10px;
  font-size: 12pt;
  font-weight:200;
  letter-spacing: 0;
}
}

@media only screen and (max-width: 800px){
#cssmenu > ul > li > a {
  padding: 4px 1vw;
  font-size: 12pt;
  font-weight:100;
  letter-spacing: 0;
  text-transformation:capitalize;
}
#csssubmenu > ul > li > a {
  padding: 4px 1vw;
  font-size: 12pt;
  font-weight:100;
  letter-spacing: 0;
  text-transformation:capitalize;
}
}

@media only screen and (min-width: 1244px){
#cssmenu > ul > li > a {
  padding: 12px;
  font-size: 16pt;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#csssubmenu > ul > li > a {
  padding: 8px 25px;
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.2vw;
  text-transform: uppercase;
}
}
nav{
  position:static;
  top:0;
  z-index:1000;
  width:100%;
}
/************************* Ende Menüzeugs obere Navileiste *************************/

.figcaption {
   display: block;
   width:100px;
   text-transform:capitalize;   
}

/************************* Footerbereich *************************/

.footer{
  text-align:center;
  font-size:1em;
  padding:0.4em;
}
.footerrightwrap{
    width:90vw;
    margin-top:1.2em;
}
.footerright{
    margin-left:1em;
    max-width:200px;
    text-align:left;
    float:left;
}
.footerleft{
    margin-left:1em;
    float: left;
    max-width:200px;
    text-align:left;
    padding-left:0px;
}

.footer a{
  color:#888888;
  text-decoration:none;
}
.footer a:hover{
  color:#444444;
  text-decoration:underline;
}

.footerright h4, .footerleft h4{
  padding-top:5px;
  border-top:1px solid #999999;
  margin:6px 0;
  text-transform:uppercase;
  font-size:11pt;
  font-weight:100;
}

.footerleft ul li, .footerright ul li{
  color:#959595;
  list-style-type:none;
}

.footerleft ul li .stroke{
  text-decoration:line-through;
}
/************************* Ende Footerbereich *************************/
/************************* Navigation Startseitengalerie *************************/
.ingalnav{
  padding:10px;
  min-width:95%;
  max-width:calc(100% - 100px);
  margin:auto;
  font-size:1.4em;
}
.ingalnav ul li {
  list-style-type:none;
  display:inline;
  margin-right:10px;
  padding:4px;
  text-transform: uppercase;
}

.ingalnav ul li a {
  text-decoration:none;
}
.ingalnav ul li a:hover {
  text-decoration:underline;
}

.nav_back_blank,
.ingalnaviblank {
  color:#b7b7b7;
}

.nav_oneof{
  display: none;
  width: 0;
  height: 0;
}


@media only screen and (min-width: 1000px) {
.nav_oneof{
  display:inline-block;
  width:500px;
}

}

/************************* Ende Navigation Startseitengalerie *************************/
/************************* Kingfamilienliste *************************/
ul.kingfamily{
  
}

ul.kingfamily li{
  font-size:14pt;
  display:inline-block;
  width:220px;
  text-align:left;
  padding:2px;
  font-weight:bold;
  vertical-align:top;
  margin-bottom:12px;
  border-top:1px dashed #a2a2a2;
}
ul.kingfamily li ul li{
  font-weight:normal;
  margin:2px;
  font-size:10pt;
  border:0px;
}
.kingfamily a{
  text-decoration:none;
}
.kingfamily a:hover{
  text-decoration:underline;
  color:#000000;
}
/************************* Ende Kingfamilie *************************/
/************************* Flippanel in der Buchuebersicht **********/
.flip,
.flip2,
.flip3{
  text-decoration:underline;
  -webkit-transition: color 0.4s, background-color 0.4s;
  -moz-transition: color 0.4s, background-color 0.4s;
  transition: color 0.4s, background-color 0.4s;
}

.flip:hover,
.flip2:hover,
.flip3:hover{
  text-decoration:none;
  pointer-events: auto;
}

.panel .trans{
  display:inline-block;
}
.panel,
.panel2,
.panel3{
  display:none;
  background-color:#f1f1f1;
  padding-left:3em;
  margin:3px;
  border-radius:5px;
  box-shadow: 2px 2px 5px rgba(51,51,51,0.64);
}

#flippanel{
  width:100%;
  display:inline-block;
  border-radius:5px;
}

.flip a,
.flip2 a,
.flip3 a {
  position: relative;
}
.flip a::before, .flip a::after,
.flip2 a::before, .flip2 a::after,
.flip3 a::before, .flip3 a::after {
  /* arrow icon in CSS 
  ueber ein Quergeruest. Zwei Leerzeichen - vor und hinter dem Element werden mit Hintergrund versehen, 
  verkleinert, gedreht und so positioniert, dass sie zusammen einen Pfeil oder ein X oder sonstwas ergeben, was man
  mit zwei geraden Strichen so malen kann */
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -1px;
  display: inline-block;
  height: 1.5px;
  width: 10px;
  background: #333333 none repeat scroll 0% 0%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: 9px 50% 0px;
}
.flip a::before,
.flip2 a::before,
.flip3 a::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.flip a::after,
.flip2 a::after,
.flip3 a::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.flip > a,
.flip2 > a,
.flip3 > a {
  padding-right: 40px;
}
.flip > a::before,
.flip2 > a::before,
.flip3 > a::before {
  /* linke Haelfte des Pfeils nach unten */
  right: 24px; /* Verschiebung um links/rechts, um rechte Haelfte zu 'treffen' */
  -webkit-transform-origin: 3px 50%; /* Verschiebung um oben/unten*/
  -moz-transform-origin: 3px 50%;
  -ms-transform-origin: 3px 50%;
  -o-transform-origin: 3px 50%;
  transform-origin: 3px 50%;
}

.flip > a::after,
.flip2 > a::after,
.flip3 > a::after{
  /* rechte Haelfte des Pfeils nach unten */
  right: 19px; /* Verschiebung um links/rechts, um linke Haelfte zu 'treffen' */
  -webkit-transform-origin: 7px 50%; /* Verschiebung um oben/unten*/
  -moz-transform-origin: 7px 50%;
  -ms-transform-origin: 7px 50%;
  -o-transform-origin: 7px 50%;
  transform-origin: 7px 50%;
}

/************************* Ende Flippanel ***************************/
/************************* Statistiktabelle *************************/


.toplist {margin:0 auto; width:60%; border:1px dotted #333333;}
.toplist td {text-align:center; font-size:1em; border:1px dotted #333333;}
.toplist td a{display:block;}

/************************* Ende Toplist *****************************/
/************************* Start Suchseiten *************************/
.search{
  width:95%;
  margin:auto;
}

.searchresult li{
margin-left:20px;
line-height:1.3em;
font-size:1.2em;
display:block;
text-transform:capitalize;
}
/************************* Ende Suchseiten **************************/
/************ Back-To-Top ***************/
.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    border-radius:5px;
    box-shadow: 2px 2px 5px rgba(51,51,51,0.64);
    color: #000000;
    background-color: rgba(205, 205, 205, 0.80);
    padding: 1em;
    display: none;
    pointer-events: auto;
    -webkit-transition: color 0.4s, background-color 0.9s;
    -moz-transition: color 0.4s, background-color 0.9s;
    transition: color 0.4s, background-color 0.9s;
}

.back-to-top:hover {    
    background-color: #000000;
    color:#f1f1f1;
    pointer-events: auto;
    box-shadow: 2px 2px 5px rgba(23,23,23,0.64);
    -webkit-transition: color 0.4s, background-color 0.9s;
    -moz-transition: color 0.4s, background-color 0.9s;
    transition: color 0.4s, background-color 0.9s;
}


/******** Ende Back-To-Top **************/
li h3 a, li h3 a:visited{
color:#dddddd;
text-decoration:none;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    transition: color 0.4s;
}
li h3 a:hover{
color:#ffffff;
text-decoration:none;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    transition: color 0.4s;
}