/* mithilfe dieser css datei können die "Rahmenelemente" des WebsiteView gestyled/angepasst werden */

@font-face {
  font-family: 'Geometria';
  src: url('fonts/Geometria-Regular.ttf') format('truetype');

}

.modal-dialog
{
  font-weight:normal;
  text-indent:0px;
}

/* der Header-Bereich */
/* hier nichts an den Größen ändern - das gibt Probleme! */
/* Farben, HintergrundGrafiken etc. ist kein Problem! */
.websiteview-header
{
    text-align:center; /* inhalte (logo) ausrichten */
    background-color:#333;
    /*border-bottom:1px solid #eee;*/
    padding:2px;
}

#HLogo{display:inline!important;}
#HTitle{display:none!important;}
#history{
padding-top:10px;
display:none!important;
}


#BREADCRUMB{
  display:block!important; /* DIESE ZEILE BLENDET DEN BREADCRUMB EIN */
  width:100%;
  min-height:20px;
  margin-top:-4px;
  margin:0px;
}

/* die Farbe für Header und die beiden reinziehbaren Bereiche */
/* sollte dunkel sein, damit der Treeview (Toc) gut aussieht */
.websiteview-frame-color 
{
  /*background-color:#fff;*/
  background-color:#333;
  
}


/* inhaltsbereich  */
#pub_content{
padding-top:40px;  /* stückchen runterschieben - weil vom Header verdeckt */
}






/*.ad-inactivecontent{opacity:0;} */

.websiteview-logo
{
    margin-right:10px;
    cursor:pointer; /* diese angabe sorgt dafür, dass das logo wie ein link wirkt */
}

/* der Button links oben (für den Toc) */
.websiteview-icon
{
    height:32px;
    margin:8px;
    padding:0px;
    opacity:0.8; /* darf für touch-devices nicht zu durchsichtig sein, weils da keinen hover gibt */
    
}
.websiteview-icon:hover
{
    opacity:1;
}







/* ************************************** */
/* Responsive Größen und Verhalten        */
/* Festlegungen zu kleinen Fensterbreiten */
/* ************************************** */
/* Default-Vorgaben (für alle (insbesondere Große) Fensterbreiten) */
  #pub_content{
  max-width:1000px;
  padding:10px;
  }
@media (max-width: 768px)  /* Breite bis zu 480px*/ 
{
  /* hier alle angaben zu KLEINEN Breiten */
  #pub_content{
  /*background-color:yellow;*/  /* zuim testen:Klein=Knallgelb */
  width:100%;
  max-width:100%;
  /*margin-left:0px;*/ /* den margin-left sollte man nicht befummeln - das tut der TOC schon, um den Content nach rechts zu schieben */
  margin-right:0px;
  padding:10px;
  }


  /* Marginalien im Fluss einbinden und negativ-einzüge (für Ü-Nummern) eliminieren */
  .CONTENTCONTAINER{
    margin-left:0px!important;
    margin-left:0px!important;
  }
  div.table-responsive {
    margin-left:0px!important;
    width:100%!important;
  }
  .CONTENTCONTAINER>.Ueberschrift::before{
    margin-left:0px!important;
    min-width:unset!important;
  }

  .Ueberschrift{
    margin-left:0px!important;
  }
  
  .MARGINALIENCONTAINER{
    float:none!important;
    margin-left:0px!important;
  }

  /* Spaltentabelle übereinander und ohne Breitenangabe*/
  table.BLOCKSPALTEN_TABELLE, table.BLOCKSPALTEN_TABELLE > tbody > tr, table.BLOCKSPALTEN_TABELLE > tbody > tr > td {
  display:block!important;
  padding:0px;
  margin:0px;
  width:100%!important;
  max-width:100%!important;
  }

  /* Mehrspaltigkeit (Zeitungslayout) deaktivieren*/
  .Zeitungslayout{
    -moz-column-count:unset!important;
    -webkit-column-count:unset!important;
    column-count:unset!important;
  }

  .Ueberschrift {
    margin-left: unset!important;
  }
}

@media (max-width: 799px) and (min-width: 480px)  /* Breite von 480 bis zu 800px*/ 
{
  /* hier alle angaben zu Mittleren Breiten */
  #pub_content{
  /*background-color:magenta;*/  /* zuim testen:Mittel=Magenta */
  /*width:100%;*/
  max-width:100%;
  /*padding:10px;*/
  }
}





/* *************************************************************
   felstlegungen für den Abbildungs-Vergrösserungs overlay
   ********************************************************** */

#pic-overlay
{
  position:fixed;
  z-index:2999;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
  display:none;
  background:#333;
  opacity:1;
  padding:1cm;
}

#pic-overlay-inner{
background:white;
width:100%;
height:100%;
padding:0.5cm;
overflow-x:scroll;
overflow-y:scroll;
}

.modal
{
  z-index:2050;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  cursor: pointer;
  height: 15px;
  width: 15px;
  background-image: url("x.svg");
}