@CHARSET "UTF-8";

html{ height: 100%; }
body { padding: 20px; background: #ffffff; }
body.site { height: 100%;  min-height: 100%; width: 100%; background: #ffffff url("../images/noise.png") 0 0 repeat; background-attachment: fixed;   }

main {  background: #ffffff; padding: 30px 25px;  }
footer {  background: #ffffff; padding: 10px 25px;  }
nav { background: #D8D7D2;  padding: 0 25px; }

#page { min-width: 300px; }
@media (max-width: 840px) {
    #leftcol { margin-top: 15px; padding-top: 15px;  border-top: 1px solid #cccccc; }
}
@media (min-width: 840px) {
    #leftcol { padding-right: 25px;  border-right: 1px solid #cccccc; }
}
#center.col-9 { padding-left: 25px; padding-top: 30px; }
#center .show-md { margin-bottom: 10px; }

/** Header */
header {  background: #ffffff; padding: 10px 25px; margin-bottom: 10px; display: table; width: 100%; }
header .columns { display: table-row; }
header .column { display: table-cell; vertical-align: bottom; }
header img {  width: auto; height: auto; max-width: 100%; max-height: 140px; }
#logo { position: relative; margin: 0 auto; }
#claim { font-size: 1.0rem; font-weight: 600; color: #993333; margin: 5px 0; }
#title { margin-bottom: -20px; }
#extlinks { position: absolute; top: 0; right: 0; }
#extlinks a { opacity: 0.8; transition: opacity 0.2s linear; vertical-align: top; }
#extlinks a.btn { margin: 0 0.3em 0 0; padding: 2px 5px; border-radius: 3px; font-size: 16px; line-height: 16px;  height: 22px; }
#extlinks a.btn:hover { box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4); }
#extlinks a:hover { opacity: 1;}
#extlinks .icon:before { font-size: 22px; }

/** Menü oben */
nav ul.nav { padding: 0; margin: 0; list-style: none; display: inline-block; overflow: visible; -webkit-backface-visibility: hidden;  position: relative;  }
nav ul.nav li { background: none; list-style: none; padding: 0; margin: 0; position: relative; }
nav ul.nav li a { display: block; padding: 6px 5px; letter-spacing: 0px;  color: #222222; text-decoration: none; }
nav ul.nav li a:hover {  color: #993333; text-decoration: none; }
nav ul.nav li.active>a {  color: #993333;  }
nav ul.nav>li { *display: inline; display: inline-block; }
nav ul.nav>li:first-child {  }
nav ul.nav>li>a { font-weight: 600; font-size: 1.1em; margin-right: 20px; }
nav img { vertical-align: middle; width: auto; height: 18px; border: 1px solid #666666; opacity: 0.6}
nav img:hover { border: 1px solid #993333; opacity: 1;}

/** unterebenen **/
nav ul.nav>li>ul { width: 220px; w\idth: 220px; margin: 0; padding: 5px 0; text-align:left; position: absolute; z-index: 99; left: -999em; display: none;  height: auto; background: rgba(233, 230, 222, 0.95) }
nav ul.nav>li:hover>ul { left: auto;  display: block; }
nav ul.nav li ul li { margin: 0; padding: 0px; display:block; height: auto !important; overflow: visible; }
nav ul.nav li ul li a { text-transform: none; border-radius: 0; font-size: 14px; padding: 5px 10px 5px 20px; margin: 0; display: block; height: auto; line-height: 1.2em; text-align: left; width: 218px; w\idth: 218px; background: none; border: none; }
nav ul.nav li ul li ul { padding: 0; margin: 0; }
nav ul.nav li ul li ul li {  padding: 0; margin: 0 0 0 20px; }
nav ul.nav li ul li ul li a:before { font-family: "feenders"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; width: 20px;  margin-left: -20px; text-align: center; font-variant: normal; text-transform: none;  line-height: 1em; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  content: '\e852';  }

#mobilenav { height: 55px; display: none;  }
#mobilenav nav { padding: 0; display: block;  margin-bottom: 15px; font-size: 1.1rem; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);  width:100%; position:fixed; top:0px; z-index: 666; }
#mobilenav a, #mobilenav a:hover, #mobilenav a:focus {  color: #222222; text-decoration: none; display: block; padding: 5px 10px; }
#mobilenav nav:hover { background: #f1f1f1; }

/** linke seite */
#sideform { margin: 15px 0; }
#leftcol a { color: #222222; text-decoration: none; }
#leftcol a:hover, #leftcol a:focus { color: #993333; text-decoration: none; }
#leftcol ul { list-style: none; margin: 8px 0; padding: 0; }
#leftcol ul li { list-style: none; margin: 0; padding: 0 0 3px 0; }
#leftcol ul { margin-bottom: 0; }
#leftcol ul ul li { list-style: none;  padding: 0 0 0 20px; }
#leftcol ul ul li:before { font-family: "feenders"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; width: 20px;  margin-left: -20px; text-align: center; font-variant: normal; text-transform: none;  line-height: 1em;   -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  content: '\e852';  }

/** Tabs **/
ul.tabs {  align-items: center; border-bottom: 1px solid #cccccc; display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
ul.tabs li { display: inline-block; margin: 0 25px -1px 0; padding: 5px 20px; border: 1px solid #D8D7D2; background: #D8D7D2; cursor: pointer; }
ul.tabs li.active { padding: 5px 15px; border-bottom-color: #ffffff; background: #ffffff; box-shadow: 2px -2px 2px 0px rgba(0,0,0,0.1); color: #000000;  }
ul.tabs li:hover { box-shadow: 2px -2px 2px 0px rgba(0,0,0,0.1); color: #000000;  }
.tab-content .tab-page { display: none; opacity: 0; transition: opacity 0.5s linear; padding: 25px 5px; }
.tab-content .tab-page.active { display: block; opacity: 1; }

/** autocomplete suche */
.dropdown-menu {  width: 220px; w\idth: 220px; margin: 0; padding: 10px; text-align:left; position: absolute; left: -999px; z-index: 99; height: auto; list-style: none; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3); background: rgba(233, 230, 222, 0.95); }
.autocomplete-suggestion { padding: 5px; cursor: pointer; color: #222222; padding: 3px 0;  }
.autocomplete-suggestion:hover { color: #993333; }
.autocomplete-suggestion strong { color: #993333; font-weight: 400; }

.book-navigation { text-align: right; }
#pnav .icon { font-size: 1.2rem; line-height: 1.6rem; }
.book-navigation a { color: #222222; line-height: 1.6rem; }
.book-navigation a .icon  { color: #993333; }
#center-inner .book-navigation { clear: both; margin: 10px 0;}

.item-row { margin-bottom: 30px; }
.item-row>.column { }
.item-row h3, .item-row h4, .item-row h5  { margin-bottom: 0px; }
.page-header { margin-bottom: 15px; padding-bottom: 10px;  }
.page-header h2, .page-header h1 { font-size: 1.6em; margin: 0; }
.item-row .headblock { }

h2 a, h4 a, .authors a { color: #222222; }
h2 a:hover, h4 a:hover, .authors a:hover
h2 a:focus, h4 a:focus, .authors a:focus { color: #993333; }

.divider-xl { clear: both;  display: block;  margin: 20px 0;   }
video { height: auto; width: auto; max-width: 100%; }
.video-container {
  clear: both;
  position:relative;
  /* padding-bottom:56.25%; changed: Marco */
  padding-bottom: 56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
  margin: 0 auto;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
h3 {  color: #993333; }
#leftcol h3 { font-size: 1.1em; }

/** menüelemente */
#menuelements { padding: 5px 0;}
#menuelements .btn { width: 100%; color: #222222; border-color: #cecece; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); }
#menuelements .hilight { color: #993333; }
#menuelements .btn:hover, #menuelements .btn:focus, #menuelements .btn:active { color: #ffffff; border-color: #882222;  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3); }
#searchword { background: #eaeaea; border: 1px solid #D8D7D2; box-shadow: inset 1px 1px 3px 0 rgba(0,0,0,0.2); }
#searchword:focus { box-shadow: none; border: 1px solid #cccccc; }
#searchword::placeholder { color: #333333; }
.has-icon-right .form-icon {  height: 1.05rem; left: 0; }
.has-icon-left .form-icon {  height: 1.05rem; left: 0; }
.moduletable, #system-message, .system-message { clear: both; margin-bottom: 15px; }
.alert-heading { display: none; }

/** verlagskomponente */
.img-cover { border: 1px solid #e5e5e5; margin: 0 10px 15px 0; }
.img-thumbnail { border: 1px solid #e5e5e5; }
.img-cover-small { border: 1px solid #e5e5e5; float: left; margin: 0 15px 10px 0; max-width: 80px; }
.price {  color: #222222; }
.subinfos { margin-bottom: 10px; }
.authors {  }
.av_rot {  color: #933; }
.av_blau {  color: #1f098b; }

/* buttons */
.cbutton { display: block;  padding: 5px 5px 5px 34px;  min-height: 30px;  line-height: 1.2em;  vertical-align:middle;  width: auto;   margin-bottom: 5px;  }
.buy { background: transparent url(../images/buy.png) 0px 50%  no-repeat; }
.text-right .buy {  display: inline-block; width: auto; }
.rights {  background: transparent url(../images/rights.png) 0px 50%  no-repeat; }
.ebook {  background: #fff url(../images/ebook.png) 0px 50%  no-repeat;  }
.download {  background: #fff url(../images/download.png) 0px 50%  no-repeat;  }
.preview {  background: #fff url(../images/preview.png) 0px 50%  no-repeat;  }
.hilight { color: #AA6600; }
.text-muted { color: #888888; }
.text-small { font-size: 10px; }

/* verlagspreis */
header .vpreis {
    position: absolute;
    margin-top: 5px;
    margin-left: 20px;
    width: 190px;
    height: auto;
}

#center .vpreis {
   background: #E6E6E6;
   padding: 5px 10px;
   border-radius: 3px;
    margin-bottom: 15px;
   display: block;
}

@media screen and (max-width: 1280px) {
    nav ul.nav>li>a { margin-right: 15px; }
}
@media screen and (max-width: 960px) {
    nav ul.nav>li>a { font-size: 1em; margin-right: 5px; }
}
@media screen and (max-width: 840px) {
    #title { margin-bottom: -5px; }
    #claim { font-size: 0.9rem; margin: 3px 0; }
}
@media screen and (max-width: 600px) {
    .item-row { margin-bottom: 20px; display: block; }
    .item-row>.column { display: block;  }
}
@media screen and (max-width: 480px) {
    #extlinks .icon:before { font-size: 18px;  }
    #extlinks .btn { font-size: 12px; line-height: 12px; height: 16px; padding: 1px 5px;  }
}

@media screen and (min-width: 1280px) {
    nav ul.nav>li>a { letter-spacing: 1px; }
}

@media (max-width: 840px) {
    .book-navigation { text-align: left; }
    ul.tabs li { display: block; margin: 5px 5px -1px 0; padding: 5px 10px;}
    body.site { padding: 0; }
    nav ul.menu { display: none; }
    .hidden-md {  display: none; }
    main { padding: 25px 15px;  }
    footer {  padding: 10px 15px;  }
    nav { padding: 0 15px; }
    header { padding: 15px 15px;}
    #menuelements .column { padding-bottom: 5px; }
    #leftcol { padding-right: .4rem;  border-right: none; }
    #center.col-9 { padding-left: .4rem; padding-top: 0px; }
    #mobilenav { display: block; }
    #claim { font-size: 0.7rem; margin: 3px 0; }
    .container { padding-left: 0; padding-right: 0; }

    header .vpreis {
        display: none;
    }

    #mobilehead {
        padding-bottom: 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #cccccc;
    }
}