/*----------------------------------------------------------------------
index.css holds CSS3 style definition used by metadata.html
Application: Website CultLib
Platform   : CSS3
------------------------------------------------------------------------
Copyright  : http://creativecommons.org/publicdomain/zero/1.0/
Developed  : Hartwig Thomas, Zurich, Switzerland, 2020
Created    : December 2020, Hartwig Thomas
----------------------------------------------------------------------*/
@import url("styles.css");
@media screen
{

  #divtitle .mdl-tooltip
  {
    font-size: 8pt; 
  }

  #divcontent
  {
    margin: 0;
    padding: 0;
  }
  
  #divcontent ul
  {
    margin: 0;
    padding: 0;
  }
  
  #divdisplay
  {
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  #divdisplay form
  {
    padding: 0;
    margin: 0;
    border: 0;
    height: 100%;
  }
  
  /* badges */
  .mdl-badge[data-badge]:after
  {
    background: var(--col_orange);
  }  
  
  .mdl-tabs
  {
    height: 100%;
  }
  
  /* tab-bar */
  .mdl-tabs__tab-bar
  {
    background-color: var(--col_dark);
    justify-content: flex-start;
    font-size: 10pt;
    line-height: 10pt;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #buttons
  {
    width: 50%;
    padding: 2mm;
  }
  
  #buttons span
  {
    float: right;
  }
    
  #buttons .mdl-button
  {
    min-height: 0;
    font-size: 10pt;
    line-height: 10pt;
    padding: 0;
    color: var(--col_black);
    background: var(--col_white);
  }
  
  #buttons .mdl-badge[data-badge]
  {
    top: 6px; 
    left: -9px;
  }

  /* tab panel */  
  #cultlib
  {
    width: calc(100% - 6mm); /* 100% minus two times padding */
    height: calc(100% - 48px - 6mm); /* 100% minus heigth of tab bar and two times padding */
    padding: 3mm;
    overflow-y: auto;
    scrollbar-width: auto;
  }
  
  /* cultlib */
  #cultlib #reference
  {
    padding-top: 5px;
  }
  
  #cultlib .mdl-textfield label
  {
    display: inline-block;
  }
  
  #cultlib .mdl-textfield .mdl-badge
  {
    min-width: 0px;
    vertical-align: top;
    margin: 0;
    padding: 0;
  }
  
  #cultlib .mdl-textfield .mdl-badge[data-badge]:after
  {
    top: -8px;
    right: -16px;
    font-size: 8pt;
    width: 16px;
    height: 16px;
  }
  
  #cultlib .mdl-textfield
  {
    display: inline-block;
    font-size: 8pt;
    line-height: 12pt;
    margin: 0;
    padding: 0;
  }
  
  #cultlib .mdl-textfield.half
  {
    width: 49%;
  }
  
  #cultlib .mdl-textfield.date
  {
    width: 98%;
  }
  
  #cultlib .mdl-textfield.long
  {
	  width: 98%;
  }
  
  #cultlib .mdl-textfield.indent
  {
    margin-left: 93mm;
  }
  
  #cultlib .mdl-textfield.long label
  {
    width: 100%;
  }
  
  #cultlib .mdl-textfield.date .mdl-textfield__input
  {
    display: inline-block;
    width: 48%;
    font-size: 8pt;
    border-style: inset;
    border-width: 2px;
  }
  
  #cultlib .mdl-textfield.long .mdl-textfield__input
  {
    display: inline-block;
    width: 80%;
    font-size: 8pt;
    border-style: inset;
    border-width: 2px;
    vertical-align: middle;
  }
  
  #cultlib .mdl-textfield span
  {
    display: inline-block;
    min-width: 8.5em;
    text-align: right;
    vertical-align: middle;
    padding-right: 1em;
  }
  
  #cultlib .mdl-textfield__input
  {
    display: inline-block;
    font-size: 8pt;
    border-style: inset;
    border-width: 2px;
    vertical-align: middle;
  }
  
  .mdl-textfield__input[readonly]
  {
    background: lightgray;
  }
  
  #cultlib .mdl-textfield.half .id
  {
    width: 20em;
  }
  
  #cultlib .mdl-textfield.half .digest
  {
    width: 21em;
  }

  #cultlib ul
  {
    padding-top: 5px;
	  width: 100%;
  }
  
  #cultlib li:first-child
  {
    padding-top: 8px;
  }
  
  #cultlib .mdl-list .mdl-textfield
  {
    width: 47%;
  }
  
  #cultlib .mdl-list__item
  {
    min-height: 0;
    font-size: 10pt;
    line-height: 10pt;
    padding: 0;
  }
  
  /* keywords */  
  #keywords
  {
    width: calc(100% - 6mm); /* 100% minus two times padding */
    height: calc(100% - 48px - 6mm); /* 100% minus heigth of tab bar and two times padding */
    padding: 3mm;
    overflow-y: auto;
    scrollbar-width: auto;
  }
  
  #keywords .mdl-list
  {
    width: 90%; 
    height: auto;
  }
  
  #keywords .mdl-list__item
  {
    min-height: 0;
    font-size: 10pt;
    line-height: 10pt;
    padding: 0;
  }
  
  #keywords .mdl-list i
  {
    width: 20px;
    height: 10pt;
  }
  
  #keywords .mdl-list .mdl-textfield
  {
    font-size: 10pt;
    line-height: 10pt;
    padding: 0;
  }
  
  #keywords .mdl-list .mdl-textfield:first-of-type
  {
    width: 30%;
  }
  
  #keywords .mdl-list .mdl-textfield:last-of-type
  {
    width: 70%;
  }
  
  #keywords .mdl-list label
  {
    font-size: 10pt;
    line-height: 10pt;
    padding: 1mm;
  }

  /* popup */  
  #divdisplay .popup
  {
    display: none;
    position: fixed;
    margin: 3mm;
    background: var(--col_light);
  }
  
  #divdisplay .popup .mdl-card__title
  {
    background-color: var(--col_orange);
  }
  
  #divdisplay .popup .mdl-card__supporting-text
  {
    font-size: 10pt;
    line-height: 10pt;
    overflow-y: auto;
    color: var(--col_black);
  }

  #divdisplay .popup .mdl-list
  {
    width: 90%;
  }
  
  #divdisplay .popup .mdl-list p
  {
    display: none;
    margin-left: 6mm;
  }
  
  #divdisplay .popup .mdl-list__item
  {
    min-height: 0;
    font-size: 10pt;
    line-height: 10pt;
    padding: 0;
  }
  
  #divdisplay .popup .mdl-list__item i
  {
    width: 12pt;
    margin-right: 2mm;
  }
  
} /* media screen */