:root {
/* Similar to original OBV catalog */

  --background: #FFFFFF;
  --background-highlight: #F8F8F8;
  --content-secondary:  #989898;
  --content-primary: #333333;
  --content-emphasized: 0;
  --link: #3E6BAC;
  --link-active: #FA6908;

/* Solarized dark*/
/*
  --background: #002b36;
  --background-highlight: #073642;
  --content-secondary:  #586e75;
  --content-primary: #839496;
  --content-emphasized: 93a1a1;
  --link: #cb4b16;
  --link-active: #b58900;
*/

/* Solarized light*/
/*
  --background: #fdf6e3;
  --background-highlight: #eee8d5;
  --content-secondary:  #93a1a1;
  --content-primary: #657b83;
  --content-emphasized: 586e75;
  --link: #cb4b16;
  --link-active: #b58900;
*/
}


/*
---------------
color scheme
---------------
$base03:    #002b36;
$base02:    #073642;
$base01:    #586e75;
$base00:    #657b83;
$base0:     #839496;
$base1:     #93a1a1;
$base2:     #eee8d5;
$base3:     #fdf6e3;
$yellow:    #b58900;
$orange:    #cb4b16;
$red:       #dc322f;
$magenta:   #d33682;
$violet:    #6c71c4;
$blue:      #268bd2;
$cyan:      #2aa198;
$green:     #859900;
---------------
*/


body {
  box-sizing: border-box;
  background-color: var(--background);
  color: var(--content-primary);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  margin: 0;
  text-align: left;  
}


/*
img {
  max-width:100%;
  height:auto;
}
*/

a {
 color: var(--link);
}

a:hover {
 color: var(--link-active);
}

table {
  border-collapse: collapse;
  font-size: 80%;  
  width: 100%;
  background-color: var(--background-highlight);
}

td, th {
  height: 1rem; /* otherwise empty lines will collapse */
  vertical-align: top;
  border: 2px solid var(--background);
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  padding-left: 0.2em;
  padding-right: 0.4em;
}

/* don't advertise that table headings are clickable */
th a { color: var(--content-primary); text-decoration: none; }

h1, h2 {
  text-align: center;
  font-size: 120%;
  margin: 0.5rem;
}

h3 {
  margin-left: 2.5rem;
  font-size: 100%;
}  

header {
  border-top: 4px solid var(--link-active);
  min-height: 70px;
}

header .page-logo {
  float: left;
}  

header .navbar1 {
  background-color: var(--background-highlight);
  color: var(--background);
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 80%;
  padding-left: 2rem;
}  

header .navbar2 {
  background-color: var(--background-highlight);
  color: var(--content-emphasized);
  text-align: center;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 90%;
}

footer {
  color: var(--content-secondary);
  font-size: 70%;
  margin-left: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

header p, footer p {
  margin: 0;
}

input[type="text"], textarea {
  color : var(--content-primary);  
  background-color : var(--background);  
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}


/* disable linebreaks in strings like call numbers */
.nbsp {
    white-space: nowrap;
}

/* enable hyphenation by browser for text known to not look off if hyphenated*/
.hyphenate {
    hyphens: auto;
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }

  header {
    border: 0;
  }
}

/* for bibliographic information and items */

.column-description { 
  font-weight: bold;
  text-align: left;
  width: 15em; /* original: ~20em */
}

.column-content {
  /*color: blue;*/
  width:auto;
}

/* for inline-barcodes with introductory text; for columns only containing the barcode use "barcode" */
.column-barcode {
  Width: 12em;
  color: var(--content-secondary);
}

/* first row of table */
.firstrow {
  border-top: 0px; /* otherwise there is too much whitespace when stacking multiple tables together */
}

/* needs to fit either "Studienbibliothek" or "Magazin" */
.column-location {
  width: 9em;
  color: var(--content-secondary);
}

.column-note {
  /* background-color: red; */
  width: auto;
}

/* for MARC source display */
.source-display {
  font-family: Arial;
  border-collapse: collapse;
  font-size: 102%;  
  margin-left: 2rem;
  margin-right: 2rem;
  width: calc(100% - 4rem);
  color: red;
  line-height: 1.22;
}

.source-display-description {
  color: maroon;
  border: hidden;
  font-style: italic;
  min-width: 9em;
  margin: 0;
  padding: 0;
}

.source-display-field {
  color: blue;
  border: hidden;
  font-weight: bold;
  text-decoration: underline;
  margin: 0;
  padding: 0;
  padding-left: 0.75em;
}

.source-display-subfield {
  color: #C00000;
  border: hidden;
  font-weight: bold;
  text-decoration: underline;
  margin: 0;
  padding: 0;
  padding-left: 0.75em;
}

.source-display-content {
  color: black;
  border: hidden;
  margin: 0;
  padding: 0;
  padding-left: 0.75em;
  width: 100%;
  overflow-wrap: anywhere;
  white-space: break-spaces;  /* don't collapse multiple spaces into one, for empty control fields */
}

.container {
  max-width: 82rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  /* border: 10px solid yellow; */
}

.newbarcode {
  Width:6em;
  /* border: 10px solid yellow; */
}

.icons {
  Width: 1.5em;
  color: var(--content-secondary);
  text-align: center;
  /* background: yellow; */
}

.newcallnumber {
  Width: 10em;
  /* background: yellow; */
}

.newtitle {
  Width: auto;
  /* background: yellow; */
}

.newdescription {
  Width: auto;
  /* background: lightyellow; */
}

.newyear {
  Width: 6em;
  /* background: lightgreen; */
}

.newperson {
  Width: 22em;
  /* background: lightblue; */
}

/* Visual indicator that item is unavailable (currently: text is grayed-out) */
.missing {
  color: var(--content-secondary);
}

.multipagenavigation {
  text-align: center;
  margin: 1em;
}

.hovertable tr:hover {
      background-color: #F4F4F4;
}

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 17rem; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111;
  overflow-x: hidden; /* Disable horizontal scroll */
  margin: 0;
  padding: 0.8rem;
  color: var(--content-primary);
}

/* The navigation menu links */
.sidenav ul {
  padding: 0;
  margin: 0;
}


/* Headings */
.sidenav ul li {
  padding-left: 0;
  margin-left: 0;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
  color: #eee;
  margin-bottom: 2rem;
  list-style-type: none;
  font-weight: bold;
}
/* Content */
.sidenav ul ul li {
  padding-left: 0;
  margin-left: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0;
  font-style: italic;
  list-style-type:disc;
  font-weight: normal;
  color: #777;
  font-size: 1rem;
}

li::marker {
  color: #666;
}

.sidenav a {
  padding: 8px 8px 8px 4px;
  text-decoration: none;
  color: #ccc;
  transition: 0.3s;
  padding: 0;
  margin: 0;
  font-style: normal;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
 color: var(--link-active);
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}