@charset "UTF-8";
/******************************************************************************
  @brief      AndoLib-OPAC Desktop Referenz-Stylesheet #1
  @File       al-opac.css
  @Version    4.10.12
  @Copyright  Anando Eger, www.aneg.de
  @Function   css-Datei
  @date 2025-01-04 ste: Anpassung Stiftung Brandenburg
      red 990000
      blau 0a4366
  @date 2025-12-10
      red neu f33b46
      grau #888888 statt blau
  @date 2025-09-08 aneg: JS-Hinweis ergänzt
  @date 2025-09-17 ste: div.JsMsg JS-Hinweis zeitverzögert einblenden ergänzt
    - divFuss - zeitverzögertes Einblenden ergänzt
 *****************************************************************************/
                    
  html            { background-color: #ffffff; }    
  body            { padding: 0px; margin: 0px; 
                    font-size: 1em; /*0.8 bei 600px iframewidth*/
                    FONT-FAMILY: Arial,Verdana; color: #000000;
                    background-color: #ffffff; }
	.bodyRahmen     { /* Vollbildanzeige oder Vergrößert */		
                    max-width: 1200px; /* Breite Banner */
                    min-height: 1000px;                   
                    margin: auto; /* horizontal mittige Darstellung */
                    margin-bottom: 10px; }
  
  /*** index.html - Meldung einblenden, wenn JS deaktiviert ist ***************/
  div.JsMsg       { position: fixed; top: 100px; width: 100%; height: 80px;
                     z-index: 5; padding: 8px; font-weight: bold; 
                    background-color: #eeeeee; border: 1px solid black;
                    box-sizing: border-box;
                    animation:         einblenden 7s;
                    -moz-animation:    einblenden 7s; /* Für Firefox */
                    -webkit-animation: einblenden 7s; /* Für Safari und Chrome */
                    -o-animation:      einblenden 7s; /* Für Opera */    
                  } 
  @keyframes einblenden {
    from { opacity:0; } to { opacity:1; } 
  }
  @-moz-keyframes einblenden { /* Für Firefox */
    from { opacity:0; } to { opacity:1; }
  }
  @-webkit-keyframes einblenden { /* Für Safari und Chrome */
    from { opacity:0; } to { opacity:1; }
  }
  @-o-keyframes einblenden { /* Für Opera */
    from { opacity:0; } to { opacity:1; }
  }    
  
	/*** liste.html ************************************************************/
  body.liste      { overflow: auto; }
  .divBtnListeDrucken 
                  { text-align: right; border-bottom: 1px solid #926839;
                    margin-bottom: 10px; }
                    
  /*** info.html *************************************************************/
  table.info      { border-collapse: collapse; color: #000000;  }
  table.info tr:nth-of-type(odd) td 
                  { background-color: #f0f0f0;  } 
	table.info td   { padding: 2px; }
  
  /*** in Hilfedateien help?.html ********************************************/
  body.help       { font-size: 0.8em; FONT-FAMILY: 'Lucida Sans Unicode'; 
                    overflow: auto; }  
  body.help div.content
                  { padding: 40px; }
  
  /*** allgemeine Einstellungen **********************************************/
  a               { color: #000000; text-decoration: underline;  }
  a:hover         { background-color: #eee; }
  h1, h2, h3 ,h4  { margin: 0px; padding: 0px; font-weight: bold; }
  h1              { font-size: 1.3em; }
  h2              { font-size: 1.2em; }
  h3              { font-size: 1.1em; }
  h4              { font-size: 1.0em; }
  img             { border: 0px; margin: 5px; }
  table           { width: 100%; border: 0px; empty-cells: show;
                    font-size: 1em; }
  td              { vertical-align: top; }
  p               { margin-top:0.2em; margin-bottom:0.2em; }
  input           { font-size: 1em; outline: none; /* entfernt default Rand */
                    border: 1px solid #666; 
                    border-radius: 0px; } 
  input:focus, input:active, input:hover 
                  { background-color: #f0f0f0; }
  input[type=text][readonly] 
                  { color: #000000; border: 0px; }
  input, select, textarea 
                  {	font-size: 1em;	vertical-align: top; }
  /* checkbox mit eigenem Layout, überschreibt browser-defaults */
  input[type="checkbox"] 
                  {	position: absolute;	left: -20px;}
	input[type="checkbox"] + label::before 
                  {	width: 17px; height: 20px; border: 1px solid #666;
                    border-radius: 2px;
                    background-color: #ffffff; display: block;
                    content: ""; cursor: pointer;	}
	input[type="checkbox"]:hover + label::before 
                  {	background-color: #ffe090; }
	input[type="checkbox"]:checked + label::before 
                  {	content: "\2714";	text-align: center; font-size: 0.8em;
                    background-color: #ffffff; }
	input[type="checkbox"]:checked:hover + label::before 
                  {	background-color: #ffe090; }
	
  fieldset        { margin-top: 8px; padding: 6px 14px 6px 14px; 
                    border: 1px solid #444444; max-width: 100%; }
  legend          { font-weight: bold; color: #000000; }  

  /* Schaltflächen, Buttons */
  input[type=button] 
                  { font-size: 1em; COLOR: #ffffff; 
                    BACKGROUND-COLOR: #f33b46; 
                    BORDER: 1px solid #f33b46; }
  input[type=button]:hover
                  { COLOR: #ffffff; cursor: pointer;
                    BACKGROUND-COLOR: #888888; 
                    BORDER: 1px solid #888888; }
  .BtnListeDrucken{ margin-right: 15px; vertical-align: middle; }
                                   
  .inpBtn         { ; }
  .inpBtn:hover   { ; }
  .inpBtnInactive { opacity: 0.5;}
  .inpBtnInactive:hover 
                  { cursor: default; }
  /* Navigationspfeile Btn Liste im Druckformat */
  .divNav         { width: 100%; text-align: right; margin-bottom: 5px; }
  .divNavArrows   { float: right; }
  .navBtn         { float: left; width: 30px; }
  .navArrow       { width: 0px; height: 0px; border-style: solid;
                    -webkit-transform:rotate(360deg); }
  .navArrowPrev   { border-width: 3px 10px 3px 0; }
  .navArrowPrevCol{ border-color: transparent white transparent transparent; }
  .navArrowPrevCol:hover
                  { border-color: transparent white transparent transparent; }
  .navArrowPrevColHover 
                  { border-color: transparent white transparent transparent; }

  .navArrowNext   { border-width: 3px 0 3px 10px;}
  .navArrowNextCol{ border-color: transparent transparent transparent white; }
  .navArrowNextCol:hover
                  { border-color: transparent transparent transparent white; }
  .navArrowNextColHover
                  { border-color: transparent transparent transparent white; }
                        
  .navArrowLine   { width: 2px; height: 6px;}
  .navArrowLineCol{ background-color: white; }
  .navArrowLineCol:hover
                  { background-color: white; }
  .navArrowLineColHover
                  { background-color: white; }

  .navPf          { float: left;
                    padding: 7px; cursor: pointer; color: white;
                    background-color: #f33b46; margin-right: 10px;
                    border: 1px solid #f33b46; }
  .navPf:hover    { background-color: #888888;
                    border: 1px solid #888888; }
  .BtnListeDrucken{ height: 6px; line-height: 6px; }


  .clearfix::after{ content: ""; clear: both; display: table; 
                  /* verhindert, dass images über div-Rand ragen */ }
  .antifloat      { clear: both; }
  
  /* die naechsten 4 Klassen werden vom Interpreter verwendet */
  .hide           {;}
  .hide1          { visibility: hidden; }
  .pInstruction   { font-weight: bold;  }
  .spnWarn        { color: red; text-align: center; font-weight: bold; }

  /*** Header und Menü ******************************************************/
  /*
  .imgBanner      { height: 100%; width: 100%; object-fit: contain;
                    margin: 0px; margin-bottom: 35px; }
  .divBanner      { display: flex; flex-direction: row; flex-wrap: nowrap; 
                    border: 1px solid #986b38; }
  */
  /* Bannervarianten */                                                                            
  .divBannerV1    { display: flex; flex-direction: row; flex-wrap: nowrap; }
  .divBannerV2    { background-image: url("images/kd_banner.jpg");
                    background-repeat: no-repeat; 
                    background-size: contain;       /* autoresize */ 
                    height: 278px;                  /* nötig bannerhöhe */ }
  .divBannerBottom{ display: none; }
            
  .divTop         { width: 100%; margin-top: 30px; }
  .divTopLeft     { width: 100%; text-align: left; white-space: nowrap; }
  .divLogo        { float: left; width: 80px; height: 50px; padding-left: 10px;}                                                                                       
  .spnTitle       {	position: relative;
                    height: 50px; line-height:50px;		/* vertical zentrieren */
                    display: inline-block;  padding: 0px; padding-left: 10px; padding-right: 10px;  
                    vertical-align: middle; text-align: left; font-weight: bold;
                    font-size: 1.4em; color: #ffffff; background-color: #f33b46;                    
                  }

  /* Anmeldung/Hilfe/Vergroessern */
  .divTopRight    { width: 100%; text-align: right; }
  .divMenu        { float: right; height: 50px; padding-top: 0px; 
                    margin-top: -60px; margin-bottom: 15px;}  
  .divMenuPkt     { margin: 2px; padding: 0px; width: 50px; height: 50px;
                    background-color: #f33b46; float: left;
                    display: flex; align-items: center; color: white;
                    justify-content: center; }
  .divMenuPkt:hover
                  { background-color: #888888; cursor: pointer; }
  .spnMenu        { color: #ffffff; font-weight: bold; }
  .spnMenu:hover  { cursor: pointer;}
  .spnTrenn       { color: #000000; font-size: 0.9em; 
                    padding-left: 3px; padding-right: 3px; }
  .imgLng         { /* Language Image  */
                    vertical-align: middle; margin: 0px; border: 0px; }
  .imgLng:hover   { cursor: pointer; }
  .divExpand      { float: right; height: 30px; }
  .divExpand:hover{ float: right; height: 30px; color: black; cursor: pointer; }
  .divExpTrenn    { float: right; height: 30px; color: #4a4a4a; } 
  .divMobil       { float:left; margin: 0px; padding:0px; 
                    cursor: pointer; transform: rotate(270deg); 
                    text-align:left; }
  /* End divMenu-Mobil  */
  
  .divLogin       { margin-top: 0px; margin-bottom: 10px; }
  .divJsMsg       { color: red;margin-top: 0px; margin-bottom: 10px; text-align: center;}
  .LoginResult    { color: red; font-weight: bold;}
  .inpLoginout    { width: 110px;}
  .spnLoginout    { color: #000000; text-decoration:underline; 
                    padding-left: 3px; padding-right: 3px; }
  .spnLoginout:hover
                  { background-color: #888888; cursor:pointer;
                    color: white; text-decoration: none; }

  /* Tabulatoren Menu */
  .divTab         { width: 100%; height: 24px; margin-top: 10px; 
                    font-size: 1em; }
  .TabAll         { /* gilt für alle Tabs */
                    float: left; overflow: hidden; width: 12%; height: 20px;
                    margin: 10px 4px 0px 0px; padding: 5px 0px 3px 0px;
                    text-align: center; font-weight: bold;
                    border-width: 1px; border-style: solid; border-radius: 0px;
                    color: white; }
  .TabActive,      
  .TabNoActive:hover 
                  { background-color: #888888;
                    border-color: #888888; }
  .TabNoActive    { background-color: #f33b46;
                    border-color: #f33b46; }
  .TabNoActive:hover 
                  { cursor: pointer; }
  
  /*** Content / Grids *******************************************************/
  .divContent     { width: 100%; }
  .thin_border    { border: 1px solid #444444; padding: 5px;}

  /* Sucheinschraenkungen */
  .GridR          { width: 100%; text-align: left; display:none;
                    margin-top: 40px; margin-bottom: 20px; }
  .MTypOpt        { width:100px; }
  .BranchOpt      { width:80px; }
  .SortOpt        { width:80px; }

  /* Grid1 einfache Suche */
  .GridSrch1      { width: 100%; display:none; }
  .tblSrch1       { border: 0px;  margin: 0px; width: 100%}
  .tdtblSrch1     { padding: 0px; margin: 0px; }
  img.spezSuchen  { border: 3px solid #ffffff; width: 100px; cursor:pointer;
                    border-radius: 50px;   }  
  img.spezSuchen:hover    
                  { border: 3px solid #926839;
                    background-color: #926839; }  

  /* Grid2 erweiterte Suche */
  .GridSrch2      { width: 100%; display:none; }
  .tdSrchInstruction 
                  { ; }
                  
  .tblSrch2       { border-spacing: 5px 10px; }
  .tblSrch2 th    { font-weight: bold; text-align: left; }
  .tblSrch2 td    { ; }
  .tblSrch2 tr    { ; }
  
  .tdSelReg       { width: 18%; }
  .clSelReg       { ; }
  .clSelRes       { ; }
  .clSelSort      { ; }

  .tdSuchStr      { ; }
  .ipSuchStr      { width: 99%; }
  .ipSuchRes      { ; }
  
  .tdTrunc        { width: 2%; }
  .tdSelLogic     { width: 5%; text-align: center; }  
    
  .tdIndex        { width: 5%; text-align: right; }
  input[type=button].inpIndex
                  { ; }
  input[type=button].inpIndex:hover
                  { ; }

  /* Grid3 Ergebnisliste */
  .GridResults    { width: 100%; text-align: left; display: none; }
  
  .Grid3_Content  { width: 100%; overflow: auto; }
  .tdMasterLabel  { width: 30%; font-weight: bold; white-space: nowrap;}
  .tdMasterDescription 
                  {;}
  .divResNotify   { width: 100%; text-align: left; }
  
  .divResList     { width: 100%; text-align: left; display: block;  }
  .divResListHidden 
                  { display: none; }
  .divRegister    { width: 100%; text-align: left; display: block;  }
  .divRegisterHidden
                  { display: none;  }
  
  .TblResults     { width: 100%; background-color: #ffffff; text-align: left; }
                                                       
  .TblRegResults  { background-color: #ffffff; width: 100%; text-align: left;
                    table-layout:fixed; overflow: hidden; } 
                    /* fixed + overflow hidden kürzt lange Registereinträge */

  /* auch für Merkliste */
  .divLegende     { font-size: 0.9em; margin-left: 4em; margin-top: 5px; 
                    float: left; }

  /* Grid4 Detailanzeige Vollanzeige */
  .GridDetails    { width: 100%; text-align: left; display: none; }
 
  .divCard        { overflow: AUTO; margin: auto; }

  .divStatusTtl   { width: 100%; border: 0px; color: black; }
  .TblDetails     { background-color: #ffffff; border: 0px; }
  
  .trTblResults   {;} 
  .trTblResults:hover 
                  { background-color: #eeeeee; cursor: pointer; color: #000000; }
  .tdTblResHead   { color: #A0A0A0; padding: 3px; border-style: solid;
                      border-width: 1px; border-color: white gray gray white; }
                                                    
  .tdTblResHead:hover 
                  {;}
  .tdTblResults   { padding: 3px; border: 0px; }
  .tdTblResults:hover
                  { cursor: pointer; }
                                                
  .tdTblResEx     { padding: 3px; border: 0px; }
  .tdTblRegister  { padding-left: 3px; border: 0px; font-family: courier; }
  .tdTblRegister:hover
                  { cursor: pointer; background-color: gainsboro; }
                                           

  .tblLendFkt     { width: 100%; border: 0px; padding: 0px; margin: 0px; }
                                                  
  .divLendFkt     { /* innerhalb divStatusTtl */
                    width: 100%; height: 21px; margin-bottom: 0px; }
  .divLendFktLeft {	float: left;	}
  .divLendFktRight{	float: right;	}

  .divfSelfL 			{ display: none; }
  .divfSelfL1 		{;} 
  .btnfSelfL 			{ background-color: #00f000; }
  .btnfSelfL:hover{ background-color: #00f000; cursor: pointer; }
  .btnfSelfL1 		{ background-color: #00f000; }
  .btnfSelfL1:hover
                  { background-color: #00f000; cursor: pointer; }

  .divfBook 			{	display: none; }
  .divfBook1 			{;} 
  .divfSelfB 			{	display: none; }
  .divfSelfB1 		{;} 
  .divfPreBook 		{	display: none; }
  .divfPreBook1 	{;}
 
  /* Grid 5 Merkliste */
  .GridList       { width: 100%; text-align: left; display: none; }
  
  /* Exemplarstatus (sState) */
  .reserviert     { color: red;   font-weight: bold;  }
  .nicht_entleihbar { color: red;   font-weight: bold;  }                                                       
  .entliehen      { color: red;   font-weight: bold;  }
  .entleihbar     { color: green; font-weight: bold;  }
  .verfügbar      { color: green;  }
  /* Entleihbarkeit (EAV) */
  .EAV            { background-color: #ccffcc;  }
  .ENOTAV         {;}
  
  /***************************************************************************/
  /* Leserbereich */
  /***************************************************************************/
  /* Grid6 Kontouebersicht */
  .clGridAcc      { width: 100%; text-align: center; display: none; }
  
  /* Grid7 persoenliche Daten */
  .clGridAccData  { width: 100%; text-align: center; display: none; }
  
  .tblPatronData  { border: 0; }
  .tdPDataLabel   { text-align: right; }
  .PatronInfo     { color: red; font-weight: bold; text-align: center; }
  .divPatronFkt   { position: relative; text-align: left; }
  
  .inpBtnFkt      { border: #926839 1px solid; }
  .inpBtnFkt:hover{;}

  input[type=button].inpBtnFktCol   
                  { width: 90px; }
  input[type=button].inpBtnFktCol:hover 
                  { ; }
                                                   
  .inpPData       { width: 150px; height: 22px; }
  .inpPInfo       { width: 98%; text-align: left; }
  .pPDInfotext    { color: red; font-weight: bold; }
 
/*** Fuss ********************************************************************/
  .divFuss        { margin-top: 10px;
                    animation:         Fusseinblenden 5s;
                    -moz-animation:    Fusseinblenden 5s; /* Für Firefox */
                    -webkit-animation: Fusseinblenden 5s; /* Für Safari und Chrome */
                    -o-animation:      Fusseinblenden 5s; /* Für Opera */    
                  }
  @keyframes Fusseinblenden {
    from { opacity:0; } to { opacity:1; } 
  }
  @-moz-keyframes Fusseinblenden { /* Für Firefox */
    from { opacity:0; } to { opacity:1; }
  }
  @-webkit-keyframes Fusseinblenden { /* Für Safari und Chrome */
    from { opacity:0; } to { opacity:1; }
  }
  @-o-keyframes Fusseinblenden { /* Für Opera */
    from { opacity:0; } to { opacity:1; }
  }
  .divLog         { padding: 10px; }
  .divCopyright   { width: 100%; }
  .copyright      { text-align: left; float:left; font-size: 0.6em; }
  .impressum      { text-align: right; font-size: 0.8em; }
  
/*** Verschiedenes und Allgemeines *******************************************/
  .tooltip        { text-decoration: underline;  cursor: help;  }
  span[role=tooltip] 
                  { display: none; }
  span:hover[role=tooltip] 
                  { display: block; }

/*** Media print ************************************************************/
@media print {		
	body            { border:0px; margin: 0px; }	
  .DruckBtnNoPrint 
                  { display: none; }
}