/***************************************************************************
 *
 *   LiteBox
 *   An Adaptive Density Graphical Photo Browser written in Computed HTML
 *   © Copyright Gary Royal 2022, 2025
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
 *   the Free Software Foundation; either version 2 of the License, or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 *   GNU General Public License for more details.
 *
 ***************************************************************************/


*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

html, body {
    margin:0;
    padding:0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;    
  font-size: 1em;
  background:#222;
  color:#f2f2f2;
}

header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:48px;display:flex;
    justify-content:center;

    padding:0 16px 0 16px;
      color:#f2f2f2;
}

nav.left, .logo, nav.right {
    line-height:48px;
}

nav.left, nav.right {
    display:flex;
}

nav.menu {
    position:fixed;
    top:0;
    right:0px;
    height:48px;
    line-height:48px;
    display:flex;
    justify-content:flex-end;
    padding:0 16px 0 16px;
    background:#222;
    z-index:11;
}

table, th, td {
  border-collapse: collapse;
  cell_padding:0;
  cell_spacing:0;
}

td.stub {
    text-align:right;
    padding-right:8px;
}

td.col {
    text-align:left;
    font-weight:bold;
}

td.stub, td.col {
    color:#222222;
}

a:link.icon,
a:visited.icon,
a:hover.icon,
a:active.icon {
    color:#F2F2F2;
    text-decoration:none;
}

#pga {
    position:fixed;
    top:60px;
    left:0;
    right:0;
    bottom:0;
    z-index:0;
    overflow-x:hidden;
    overflow-y:scroll;
}

.brick {
    position:absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color:#444;
    cursor:zoom-in;
}

.brick:hover {opacity: 0.5;}

.brick-id {
    margin:8px;
    padding:4px;
    background-color:black;
    width:50px;
    font-weight:bold;
    text-align:center;
    font-family: Serif;
}


#lightbox {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  z-index: 2;
  overflow-x:hidden;
  overflow-y:hidden;
  /*
  background-color: rgb(34, 34, 34);
  background-color: rgba(34, 34, 34, 0.9);
  */
  background:#222;
  display:none;
  cursor:default;
}

.cover  {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
}

.slide {
    max-width:100%;
    max-height:100%;
    height:auto;
    margin:auto;
}

#nfobox {
    position:fixed;
    top:0;
    left:0;
    z-index:5;
    border:#000 1px solid;
    background:#a2a2a2;
    text-align:center;
    width:260px;
    height:260px;
    display:flex;
    justify-content:center;
    filter:drop-shadow(4px 4px 3px black);
    visibility:hidden;
}

#logo {
    font-family:sans-serif;
    font-size:24px;
    line-height:36px;
    margin:8px;
    font-weight:bold;
}

.button {
    font-family:sans-serif;
    font-size:18px;
    border-radius: 5px;
    border:#f2f2f2 1px solid;
    color:#F2F2F2;
    /*
    padding: .5em;
    */
    padding:4px;
    text-decoration: none;
    display:inline;
    margin:11px;
    line-height:24px;
    color:#F2F2F2;
    height:32px;
}

.button:hover, .button:focus {
    background-color:#666;
    color: White;
}