@charset "utf-8";
/* ########################################   Variables   ######################################## */
:root {
  --sv-sizing: 80px;  
  --sv-back: #333333; --sv-backbrighter: #444444; 
  --sv-front: #999999; --sv-frontbright: #d0d0d0; 
  --sv-green: #4CAF50; --sv-darkgreen: #158428; --sv-brightgreen: #6cce6c;
  --sv-shadow: 0px 0px 12px 6px; --sv-strongshadow: 0px 0px 12px 10px;

}
/* By default providing sizing for mobile users; "mobile first", and then sensible size for computer users */
body { 
       background: var(--sv-back); color: var(--sv-front); font-family: 'Arial','Sans'; font-size: 24px;
       text-align: center; margin: 0px; padding: 0px; border: 0px;}
h1 {font-size: 32px;} h2 {font-size: 30px;} h3 {font-size: 28px;}
@media only screen and (min-width: 1025px) {
  :root { --sv-sizing: 40px; }
  body {font-size: 16px;} h1 {font-size: 32px;} h2 {font-size: 26px;} h3 {font-size: 20px;}
}

/* #######################  Generic settings and commonly used components  ####################### */
a, a:visited { text-decoration: none; color: var(--sv-frontbright); text-shadow: 0 0 5px black; outline: none;}
a:hover      { color: var(--sv-green); text-shadow: 0 0 8px black; outline: none;}
a:active     { color: var(--sv-brightgreen); outline: none; }


.sv_acronym { position: relative; display: inline-block; border-bottom: 1px dotted green; }
.sv_acronym span { visibility: hidden; opacity: 0; width: 240px; background-color: green; color: white;
  text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -120px; }
.sv_acronym:hover span { visibility: visible; opacity: 1; transition: opacity 0.3s;}
.sv_acronym:hover { cursor: help; }

/* #######################  Tables in pages ####################### */
.datatable { margin-top: 0px; margin-bottom: 0px; 
             margin-left: auto; margin-right: auto; 
             padding: 0px; border: 0px; color: #000000; }
.datatable tr:nth-child(odd) { background: #aaaaaa; }
.datatable tr:nth-child(even) { background: #cccccc; }
.datatable tr:nth-child(1) { background: #222222; color: #ffffff; }
.datatable td { padding: 3px; text-align: left; }
.datatable th { padding: 3px; font-weight: 700; text-align: left; color: #ffffff; }
.datatable tr:hover { background: var(--sv-darkgreen); }

/* ######################## photo -> browse photos (=grid of thumbnails) ######################### */
.sv_photolist_grid { display : grid; grid-template-columns: repeat(auto-fill, 320px);
  grid-template-rows: repeat(auto-fill, 225px); grid-gap: 0px; align-items: center; justify-content: center;}
.sv_photolist_grid div { text-align: center; z-index: 1; padding: 7px;}
.sv_photolist_grid div img { box-shadow: var(--sv-shadow) black; transition: box-shadow 2s; z-index: 2;}
.sv_photolist_grid div img:hover { box-shadow: var(--sv-shadow) white; transition: box-shadow 0.3s;}
.sv_photolist_search_load_more { display: none; width: 100%; padding: 20px; text-align:center; }
.sv_photolist_search_load_more:active { outline: none; }
.sv_photolist_search_load_more button, .sv_photolist_search_load_more button:visited {  width: 80%; opacity: 0.8; 
  background: var(--sv-green); border: none; color: white; text-align: center; padding: 15px 30px; text-decoration: none; display: 
  inline-block; margin: 4px 2px; cursor: pointer; box-shadow: var(--sv-shadow) black; outline: none; }
.sv_photolist_search_load_more button:hover { opacity: 1.0; outline: none;}
.sv_photolist_search_load_more button:active { outline: none; }

#sv_previous_page, #sv_next_page { position: fixed; bottom: calc(var(--sv-sizing) * 0.5); outline: none; z-index:9; }
#sv_previous_page { left:  calc(var(--sv-sizing) * 0.1); text-align: left;  }
#sv_next_page     { right: calc(var(--sv-sizing) * 0.1); text-align: right; }  
#sv_previous_page a, #sv_next_page a { font-size: calc(3.5 * var(--sv-sizing)); font-weight: bolder; }

#sv_previous_page div, #sv_next_page div { position: absolute; bottom: calc(0.0 * var(--sv-sizing)); text-align: center; width:100%;
                                           font-size: 20px; font-weight: bolder; color: var(--sv-frontbright); z-index: 50; text-shadow: 0 0 10px black;}
#sv_previous_page:hover div, #sv_next_page:hover div { opacity: 1; color: var(--sv-green); text-shadow: 0 0 10px black; }
.sv_photocentering { display: grid; grid-template-columns: auto 330px auto; }
@media only screen and (min-width: 700px)  { .sv_photocentering { display: grid; grid-template-columns: auto 640px auto; } }
@media only screen and (min-width: 1025px) { .sv_photocentering { display: grid; grid-template-columns: auto 965px auto; } }
@media only screen and (min-width: 1340px) { .sv_photocentering { display: grid; grid-template-columns: auto 1280px auto; } }
@media only screen and (min-width: 1645px) { .sv_photocentering { display: grid; grid-template-columns: auto 1600px auto; } }
@media only screen and (min-width: 1975px) { .sv_photocentering { display: grid; grid-template-columns: auto 1930px auto; } }
@media only screen and (min-width: 2290px) { .sv_photocentering { display: grid; grid-template-columns: auto 2250px auto; } }

/* ################################ photo -> single image display ################################ */
.sv_image_prevnext { position: fixed; bottom: calc(var(--sv-sizing) * 0.5); outline: none; z-index:9; background: var(--sv-back); }
.sv_image_prevnext-prev { text-align: left;  left:  calc(var(--sv-sizing) * 0.5); }
.sv_image_prevnext-next { text-align: right; right: calc(var(--sv-sizing) * 0.5); }
.sv_image_prevnext a img { opacity: 0.4; height: 100px; transition: opacity 0.5s; box-shadow: var(--sv-shadow) black;}
.sv_image_prevnext:hover a img { opacity: 1.0; box-shadow: var(--sv-shadow) white; transition: opacity 0.3s; } 
.sv_image_prevnext div { position: absolute; top: 40%; opacity: 1; text-align: center; font-size: 20px; font-weight: bolder;  z-index: 50; width:100%; color: black; text-shadow: 0 0 10px white; }
.sv_image_prevnext:hover div { opacity: 1; transition: opacity 0.5s; color: white; text-shadow: 0 0 10px black; }

.sv_image { box-shadow: var(--sv-shadow) black; }
.sv_image:hover { box-shadow: var(--sv-strongshadow) black; transition: box-shadow 0.5s; }
@media only screen and (max-width: 1339px)  { .sv_image { max-width: 94%;  } }
@media only screen and (max-height: 990px)  { .sv_image { max-height: 90vh; } }

/* ############################  Top bar = title, buttons and menus  ############################# */
.sv_topbar { grid-area: topbar; }
.sv_topbar h1 { color: var(--sv-frontbright);}
.sv_svg_icon { opacity: 0.6; stroke: white; fill: white; stroke-linecap: round; 
               width: var(--sv-sizing); height: var(--sv-sizing); }
.sv_svg_icon:hover { opacity: 1.0; transform: scale(1.1);}

/* menu */
.sv_topbar_menu { position: fixed; left: 0; top: 0; z-index: 10; }
.sv_topbar_menu:hover .sv_topbar_menu_content { display: block; }
.sv_topbar_menu_button { position: absolute; left: calc(var(--sv-sizing) * 0.5); top: calc(var(--sv-sizing) * 0.5); z-index: 20; }
@keyframes menu_content {   0% {opacity: 0; transform: scale(0.15); }  15% {opacity: 1; }
                           75% {opacity: 1; transform: scale(1.1); }  100% {opacity: 1; transform: scale(1.0); } }
.sv_topbar_menu_content { position: absolute; left: calc(var(--sv-sizing) * 0.25); top: calc(var(--sv-sizing) * 0.25); 
                          background: var(--sv-green); min-width: 350px; min-height: 200px; display: none; 
                          transform-origin: top left; box-shadow: var(--sv-strongshadow) black; border-radius: calc(var(--sv-sizing) * 0.15);
                          animation: menu_content 0.4s ease-out 0.0s 1 normal forwards; padding-bottom: calc(var(--sv-sizing) * 0.4);}
.sv_topbar_menu_content div { color: white; margin-top:20px; margin-bottom: calc(var(--sv-sizing) * 0.75); font-weight: bolder; font-size: larger; }
.sv_topbar_menu_content a { color: black; font-weight: bold; padding: 12px 16px; text-decoration: none; display: block; text-shadow: none; }
.sv_topbar_menu_content a:hover { color: white; background: var(--sv-darkgreen); font-weight: bolder; text-shadow: none;}

/* home button */
.sv_topbar_home { position: fixed; left: calc(var(--sv-sizing) * 2.0); top: calc(var(--sv-sizing) * 0.5); z-index: 8;}

/* search */
.sv_topbar_search { position: fixed; right: 0; top: 0; z-index: 10;}
.sv_topbar_search:hover .sv_topbar_search_content { display: block; }
.sv_topbar_search_button { position: absolute; right: calc(var(--sv-sizing) * 0.5); top: calc(var(--sv-sizing) * 0.5); z-index: 20; }
@keyframes search_content {   0% {opacity: 0; transform: scale(0.15); }  15% {opacity: 1; }
                           75% {opacity: 1; transform: scale(1.1); }  100% {opacity: 1; transform: scale(1.0); } }
.sv_topbar_search_content { position: fixed; right: calc(var(--sv-sizing) * 0.25); top: calc(var(--sv-sizing) * 0.25); z-index: 10;
                            background: var(--sv-green); color: black; min-width: 450px; min-height: 200px; border-radius: calc(var(--sv-sizing) * 0.15); 
                            display: none; transform-origin: top right; box-shadow: var(--sv-strongshadow) black;
                            animation: search_content 0.4s ease-out 0.0s 1 normal forwards;}
.sv_topbar_search_content .sv_topbar_search_header { color: white; margin: calc(var(--sv-sizing) * 0.65) auto;font-weight: bolder; font-size: larger; }
.sv_topbar_search_content input { width: 400px;  }
.sv_topbar_search_content select { width: 400px;  }
.sv_topbar_search_content div { margin: calc(var(--sv-sizing) * 0.25) auto;}
.sv_search_loader_svg { width:192px; height: 192px;  }
.sv_search_loader:hover  { cursor: wait; }

/* photoinfo */
.sv_topbar_photoinfo { position: fixed; right: 0; top: 0; z-index: 10;}
.sv_topbar_photoinfo:hover .sv_topbar_photoinfo_content { display: block; }
.sv_topbar_photoinfo_button { position: absolute; right: calc(var(--sv-sizing) * 0.5); top: calc(var(--sv-sizing) * 0.5); z-index: 20; }
@keyframes photoinfo_content {   0% {opacity: 0; transform: scale(0.15); }  15% {opacity: 1; }
                                75% {opacity: 1; transform: scale(1.1); }  100% {opacity: 1; transform: scale(1.0); } }
.sv_topbar_photoinfo_content { position: fixed; right: calc(var(--sv-sizing) * 0.25); top: calc(var(--sv-sizing) * 0.25); z-index: 10;
                               background: var(--sv-green); color: black; min-width: 50%; min-height: 200px; border-radius: calc(var(--sv-sizing) * 0.15); 
                               display: none; transform-origin: top right; box-shadow: var(--sv-strongshadow) black;
                               animation: photoinfo_content 0.4s ease-out 0.0s 1 normal forwards;}
.sv_topbar_photoinfo_content .sv_topbar_photoinfo_header { color: white; margin: calc(var(--sv-sizing) * 0.65) auto;  font-weight: bolder; font-size: larger; }
.sv_topbar_photoinfo_content span { display: block; padding: 20px; }
.sv_topbar_photoinfo_content span textarea { font-size: 8px; width: 90%; }

/* #################################  Footer = Copyright text  ################################### */
.sv_footer { position: fixed; left: 0px; top: 0px; width: 400px; height: 40px; transform: translateY(400px) translateX(-175px) rotate(-90deg);  text-align: center; z-index:9;}

/* #################################   Single column layout   #################################### */
.sv_grid_1col_col1 { margin: 0 auto; grid-area: col1; padding: 5px; text-align: left;}
.sv_grid_1col_spacerL { grid-area: spacerL1; }
.sv_grid_1col_spacerR { grid-area: spacerR1; }
.sv_grid_1col {  
  display: grid;
  grid-template-areas:
    'topbar topbar topbar'
    'spacerL1 col1 spacerR1';
  grid-template-columns: 10px auto 10px;
  grid-template-rows: calc(var(--sv-sizing) * 1.5) auto auto auto;
  grid-gap: calc(var(--sv-sizing) / 8);
  padding: 0px;
  height:100%;
}

/* ##################   Three column layout with adaptability to display width   ################# */
.sv_grid_3col_col1, .sv_grid_3col_col2, .sv_grid_3col_col3 { text-align: left; padding: 5px; }
.sv_grid_3col_col1 { grid-area: col1; } .sv_grid_3col_col2 { grid-area: col2; } .sv_grid_3col_col3 { grid-area: col3; }
.sv_grid_3col_spacerL { grid-area: spacerL3; }
.sv_grid_3col_spacerR { grid-area: spacerR3; }
.sv_grid_3col {
  display: grid;
  grid-template-areas:
    'topbar topbar topbar'
    'spacerL3 col1 spacerR3'
    'spacerL3 col2 spacerR3' 
    'spacerL3 col3 spacerR3';
  grid-template-columns: 5vh auto 5vh;
  grid-template-rows: calc(var(--sv-sizing) * 2.0) auto auto auto;
  grid-gap: 5px;
  padding: 0px;
  height:100%;
}
@media only screen and (min-width: 1025px) {
  .sv_grid_3col {
    grid-template-areas:
      'topbar topbar topbar topbar'
      'spacerL3 col1 col2 spacerR3'
      'spacerL3 col3 col2 spacerR3';
    grid-template-columns: auto 450px 450px auto;
    grid-template-rows: calc(var(--sv-sizing) * 2.0) auto auto;
  }
}
@media only screen and (min-width: 1450px) {
  .sv_grid_3col {
    grid-template-areas:
      'topbar topbar topbar topbar topbar'
      'spacerL3 col1 col2 col3 spacerR3';
    grid-template-columns: auto 450px 450px 450px auto;
    grid-template-rows: calc(var(--sv-sizing) * 2.0) auto;
  }
}