/**************************************************************************************************/
/* Reset all tags to a default state, so that all browsers start with the same foundation.        */
/**************************************************************************************************/
*, *:before, *:after { margin:0; padding:0; border:0; box-sizing:border-box; }

/**************************************************************************************************/
/* Overrides of the standard HTML tags.                                                           */
/**************************************************************************************************/
html, body { height:100%; background-color:black; }
body       { font-family:Verdana, Palatino, Arial, times, serif; font-size:1.0em; color:black; overflow:hidden; }
h1         { font-size:2.0em; margin:0; padding:0; text-align:center; font-family:'Octin Sports Free', sans-serif; }
h2         { font-size:1.3em; padding:0.2em 0 0.2em 0.5em; text-align:left; }
h3         { font-size:1.1em; padding:0.2em 0 0.2em 0.5em; text-align:left; font-weight:bold; color:black; }
h4         { font-size:1.0em; padding:0.2em 0 0.2em 0.7em; text-align:left; font-weight:bold; color:black; }
p          { padding:0 0.7em 1.5em 0.7em; text-align:justify; font-size:1.0em; line-height:1.3em; }
p.indent   { padding:0 0.7em 1.5em 0.7em; text-align:justify; font-size:1.0em; line-height:1.3em; text-indent:2.0em; }
a          { text-decoration:none; font-weight:bold; color:black; }
a.ext      { text-decoration:none; font-weight:bold; font-style:italic; color:red; }
a:hover    { text-decoration:underline; }
img        { width:100%; height:auto; margin-bottom:-5px; text-decoration:none; }
ul         { margin:0; }
ol         { margin:0 0 15px 3.0em; }
li         { text-align:justify; margin:0px; padding:2px 9px; font-size:1.0em; line-height:1.3em; }
sup        { font-weight:bold; color:maroon; }
p.hp1      { font-size:5.0em; margin-bottom:0.2em; padding:0.2em 0; text-align:center; color:black; }
p.hp2      { font-size:4.0em; margin-bottom:0.2em; padding:0.2em 0; text-align:center; color:black; }
p.hp3      { font-size:2.0em; margin-bottom:0.2em; padding:0.2em 0; text-align:center; color:black; }

/**************************************************************************************************/
/* Core layout of the pages:                                                                      */
/*                                                                                                */
/*             Page Title                                                                         */
/*                                                                                                */
/* (menu)   (scrollable content)                                                                  */
/*                                                                                                */
/*              (footer)                                                                          */
/*                                                                                                */
/**************************************************************************************************/
div.pg_page                          { width:100%; height:100%; display:grid; grid-template-columns:100%; grid-template-rows:clamp(1.8rem, calc(7vw + 1rem), 20%) calc(100% - clamp(1.8rem, calc(7vw + 1rem), 20%)); }
    .pg_header                       { display:grid; grid: auto / 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66% 6.66%; grid-auto-rows:max-content; color:white; }
        .hp_letter                   { text-align:center; font-family:'Octin Sports Free', Palatino, Arial, times, serif; font-size:calc(clamp(1.8rem, calc(7vw + 1rem), 10rem) - 9px); }
    .pg_container                    { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; height:100%; background-color:black; }
        .pg_menu                     { order:1; display:flex; flex-direction:column; text-align:right; margin:0 15px 0 2px; min-width:10.75em; }
            .pg_menu a:hover         { text-decoration:none; }
                div.img_home         { width:100%; height:3em; display:flex; justify-content:center; align-items:center; margin:0; padding:0; }
                    div.img_home img { display:flex; justify-content:center; align-items:center; max-width:24px; max-height:24px; }
            .pg_menubtn              { max-width:15em; margin-bottom:10px; padding:8px; border:1px solid black; border-radius:3px; background-color:white; font-size:1.0em; display:flex; justify-content:center; align-items:center; }
            .pg_menubtn_on           { max-width:15em; margin-bottom:10px; padding:8px; border:1px solid black; border-radius:3px; background-color:silver; font-size:1.0em; display:flex; justify-content:center; align-items:center; }
            .pg_menubtn:hover        { background-color:black; color:white; border:1px solid red; }
        .pg_content                  { order:2; width:100%; /*max-width:1000px;*/ display:flex; flex-direction:column; justify-content:center; background-color:white; }
        .pg_content_hp               { order:2; width:100%; /*max-width:1000px;*/ display:flex; flex-direction:column; justify-content:center; background-color:black; }
            .pg_title                { order:1; text-align:center; display:flex; justify-content:center; align-items:center; font-size:3em; color:black; font-family:'Octin Sports Free', sans-serif; }
            .pg_scroll               { order:2; width:100%; height:100%; margin:0 auto; padding:1.5em 0 5px 0; overflow-x:hidden; overflow-y:auto; outline:none; }
            .pg_scrollnone           { order:2; width:100%; height:100%; margin:0 auto; padding:1.5em 0 5px 0; overflow:hidden; outline:none; }
            .pg_footer               { order:3; padding-top:5px; text-align:center; font-size:0.8em; }

/**************************************************************************************************/
/* Table-of-content.                                                                              */
/**************************************************************************************************/
.toc_link         { display:grid; grid: auto / 25% 55% 20%; grid-auto-rows:max-content; margin-bottom:0.5em; }
.prog_report_link { display:grid; grid: auto / 33% 47% 20%; grid-auto-rows:max-content; margin-bottom:0.5em; }
.toc_path         { padding:0.1em 0.1em 0.1em 1.0em; }
.toc_desc         { padding:0.1em; }
.toc_date         { padding:0.1em 1.0em 0.1em 0.1em; text-align:right; }

/**************************************************************************************************/
/* Progress reports.
/**************************************************************************************************/

/**************************************************************************************************/
/* Custom texts                                                                                   */
/**************************************************************************************************/
.center       { text-align:center; }
.right        { text-align:right; }
.justify      { text-align:justify; }
.bold         { font-weight:bold; }
.list         { padding-bottom:0.3em; }
.bdr          { border:1px black solid; }
.shw          { box-shadow:2px 2px 6px black; }
.top          { margin-top:5px; }
.rnd          { border-radius:5px; }
.header_title { float:left; width:100%; margin-bottom:11px; padding-top:12px; font-size:1.8em; text-align:center; }
.header_sep   { clear:both; border-bottom:1px solid black; }
.small        { font-size:0.9em; }
.tiny         { font-size:0.7em; }
.text_credit  { font-size:1.3em; font-weight:bold; font-style:italic; }
.full_center  { height:100%; display:flex; justify-content:center; align-items:center; }

/**************************************************************************************************/
/* Specialty divs.                                                                                */
/**************************************************************************************************/
div.clr     { clear:both; }
.line_green { display:block; height:1px; width:auto; margin:0 2px 0 2px; background-color:black; }

/**************************************************************************************************/
/* Images.                                                                                        */
/**************************************************************************************************/
img.bdr                     { border:1px black solid; }
img.shw                     { box-shadow:2px 2px 6px black; }
img.rnd                     { border-radius:5px; }
img.extlink                 { width:10px; height:10px; }

div.img_l                   { float:left;  display:block; width:50%; margin:7px; }
div.img_c                   { clear:both;                            margin:0 0.7em 1.5em 0.7em; }
div.img_sm_c                { clear:both;                            margin:7px; padding:0; }
div.img_r                   { float:right; display:block; width:50%; margin:7px; }
div.img_sm_r                { float:right; display:block; width:25%; margin:7px; }
div.img_fixed               { float:right; display:block; margin:7px; }

div.img_clickable           { border:1px solid #ddd; border-radius:4px; padding:3px; }
div.img_clickable img:hover { box-shadow:0 0 2px 1px rgba(128, 128, 128, 0.5); }

div.img_credit              { padding-bottom:3px; border-radius:5px; text-align:center; font-size:0.8em; font-style:italic; background-color:transparent; }
div.img_credit img          { margin-bottom:1px; }

div.textphoto               { display:block; overflow:auto; width:100%; }

div.backlink                { float:right; width:32px; height:32px; }
div.hidden                  { visibility:hidden; }

/**************************************************************************************************/
/* Large-image viewer                                                                             */
/**************************************************************************************************/
.imageviewer div               { visibility:hidden; position:fixed; top:5%; right:5%; bottom:5%; left:5%; z-index:75; text-align:center; display:flex; justify-content:center; align-items:center; }
.imageviewer div:before        { content:''; position:fixed; top:0; right:0; bottom:0; left:0; z-index:74; background-color:rgba(0, 0, 0, 0); transition:all 0.5s ease-out; }
.imageviewer div img           { position:relative; z-index:77; width:auto; height:auto; max-width:100%; max-height:100%; margin-left:-9999px; opacity:0; transition-property:all, opacity; transition-duration:0.5s, 0.2s; transition-timing-function:ease-in-out, ease-out; }
.imageviewer div:target        { visibility:visible; }
.imageviewer div:target:before { background-color:rgba(0, 0, 0, 0.7); }
.imageviewer div:target img    { margin-left:0; opacity:1; }

/**************************************************************************************************/
/* Rows & Columns                                                                                 */
/**************************************************************************************************/
.grid_flow         { display:flex; flex-flow:row wrap; justify-content:stretch; align-content:space-between; }
.grid_flow_col     { flex:1 1 15em; margin-bottom:2.0em; }
.grid_flow_title   { min-height:3.50em; margin:0 0.2em 0.1em 0.2em; padding:0.3em 0 0.3em 0; border:1px solid gold; border-radius:11px; background-image:linear-gradient(beige, rgb(251,252,253)); text-align:center; font-size:1.1em; font-weight:bold; }
.grid_flow_titlesm { min-height:2.0em;  margin:0 0.2em 0.1em 0.2em; padding:0.3em 0 0.3em 0; text-align:center; font-size:1.1em; font-weight:bold; }
.grid_flow_titlelg { min-height:4.50em; margin:0 0.2em 0.1em 0.2em; padding:0.3em 0 0.3em 0; border:1px solid gold; border-radius:11px; background-image:linear-gradient(beige, rgb(251,252,253)); text-align:center; font-size:1.1em; font-weight:bold; }
.grid_flow p       { padding-bottom:0.7em; text-align:left; }
.grid_flow p.right { padding-bottom:0.7em; text-align:right; }

.grid_5050     { display:grid; grid: auto / 50% 50%;         grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_2080     { display:grid; grid: auto / 20% 80%;         grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_3070     { display:grid; grid: auto / 30% 70%;         grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_333333   { display:grid; grid: auto / 33% 33% 33%;     grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_articles { display:grid; grid: auto / 33% 49% 18%;     grid-auto-rows:max-content; margin-bottom:0.1em; }
.grid_quarters { display:grid; grid: auto / 25% 25% 25% 25%; grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_111178   { display:grid; grid: auto / 11% 11% 78%;     grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_11114820 { display:grid; grid: auto / 11% 11% 48% 20%; grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_memes    { display:grid; grid: auto / 50% 50%;         grid-auto-rows:max-content; padding:0.5em; }

/**************************************************************************************************/
/* Slideshow                                                                                      */
/**************************************************************************************************/
.hpslideshow,.hpslideshow:after { position:relative; width:100%; height:100%; z-index:0; }
.hpslideshow:after              { content:''; }
.hpslideshow li span            { width:100%; height:100%; top:0; left:0; position:absolute; color:transparent; background-size:contain; background-position:50% 50%; background-repeat:no-repeat; opacity:0; z-index:0; -webkit-backface-visibility:hidden;
                                    -webkit-animation:imageAnimation 120s linear infinite 0s;
                                    -moz-animation:imageAnimation    120s linear infinite 0s;
                                    -o-animation:imageAnimation      120s linear infinite 0s;
                                    -ms-animation:imageAnimation     120s linear infinite 0s;
                                    animation:imageAnimation         120s linear infinite 0s; }

.hpslideshow li:nth-child(1) span { background-image:url("./images/image012.jpg"); }
.hpslideshow li:nth-child(2) span { background-image:url("./images/image040.jpg"); -webkit-animation-delay:15s;  -moz-animation-delay:15s;  -o-animation-delay:15s;  -ms-animation-delay:15s;  animation-delay:15s;  }
.hpslideshow li:nth-child(3) span { background-image:url("./images/image042.jpg"); -webkit-animation-delay:30s;  -moz-animation-delay:30s;  -o-animation-delay:30s;  -ms-animation-delay:30s;  animation-delay:30s;  }
.hpslideshow li:nth-child(4) span { background-image:url("./images/image031.jpg"); -webkit-animation-delay:45s;  -moz-animation-delay:45s;  -o-animation-delay:45s;  -ms-animation-delay:45s;  animation-delay:45s;  }
.hpslideshow li:nth-child(5) span { background-image:url("./images/image014.jpg"); -webkit-animation-delay:60s;  -moz-animation-delay:60s;  -o-animation-delay:60s;  -ms-animation-delay:60s;  animation-delay:60s;  }
.hpslideshow li:nth-child(6) span { background-image:url("./images/image024.jpg"); -webkit-animation-delay:75s;  -moz-animation-delay:75s;  -o-animation-delay:75s;  -ms-animation-delay:75s;  animation-delay:75s;  }
.hpslideshow li:nth-child(7) span { background-image:url("./images/image013.jpg"); -webkit-animation-delay:90s;  -moz-animation-delay:90s;  -o-animation-delay:90s;  -ms-animation-delay:90s;  animation-delay:90s;  }
.hpslideshow li:nth-child(8) span { background-image:url("./images/image001.jpg"); -webkit-animation-delay:105s; -moz-animation-delay:105s; -o-animation-delay:105s; -ms-animation-delay:105s; animation-delay:105s; }
.hpslideshow li:nth-child(2) div  { -webkit-animation-delay:15s;  -moz-animation-delay:15s;  -o-animation-delay:15s;  -ms-animation-delay:15s;  animation-delay:15s;  }
.hpslideshow li:nth-child(3) div  { -webkit-animation-delay:30s;  -moz-animation-delay:30s;  -o-animation-delay:30s;  -ms-animation-delay:30s;  animation-delay:30s;  }
.hpslideshow li:nth-child(4) div  { -webkit-animation-delay:45s;  -moz-animation-delay:45s;  -o-animation-delay:45s;  -ms-animation-delay:45s;  animation-delay:45s;  }
.hpslideshow li:nth-child(5) div  { -webkit-animation-delay:60s;  -moz-animation-delay:60s;  -o-animation-delay:60s;  -ms-animation-delay:60s;  animation-delay:60s;  }
.hpslideshow li:nth-child(6) div  { -webkit-animation-delay:75s;  -moz-animation-delay:75s;  -o-animation-delay:75s;  -ms-animation-delay:75s;  animation-delay:75s;  }
.hpslideshow li:nth-child(7) div  { -webkit-animation-delay:90s;  -moz-animation-delay:90s;  -o-animation-delay:90s;  -ms-animation-delay:90s;  animation-delay:90s;  }
.hpslideshow li:nth-child(8) div  { -webkit-animation-delay:105s; -moz-animation-delay:105s; -o-animation-delay:105s; -ms-animation-delay:105s; animation-delay:105s; }
.hpslideshow li                   { list-style-type:none; }

@-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 4% { opacity: 1; -webkit-animation-timing-function: ease-out; } 9% { opacity: 1 } 15% { opacity: 0 } 100% { opacity: 0 } }
@-moz-keyframes    imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; }    4% { opacity: 1; -moz-animation-timing-function: ease-out; }    9% { opacity: 1 } 15% { opacity: 0 } 100% { opacity: 0 } }
@-o-keyframes      imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; }      4% { opacity: 1; -o-animation-timing-function: ease-out; }      9% { opacity: 1 } 15% { opacity: 0 } 100% { opacity: 0 } }
@-ms-keyframes     imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; }     4% { opacity: 1; -ms-animation-timing-function: ease-out; }     9% { opacity: 1 } 15% { opacity: 0 } 100% { opacity: 0 } }
@keyframes         imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; }         4% { opacity: 1; animation-timing-function: ease-out; }         9% { opacity: 1 } 15% { opacity: 0 } 100% { opacity: 0 } }
.no-cssanimations .hpslideshow li span { opacity:1; }
.hidden { font-size:0; }

/**************************************************************************************************/
/* Overrides for smaller screens.                                                                 */
/**************************************************************************************************/
@media only screen and (max-width:750px)
{
    h1          { font-size:1.3em; }
    .pg_content { width:100%; }
}
@media only screen and (max-width:600px)
{
    body                   { font-size:1.0em; }
    h1                     { font-size:1.1em; }
    h2                     { font-size:1.2em; }
    h3                     { font-size:1.1em; }
    p                      { font-size:0.9em; }
    p.indent               { font-size:0.9em; }
    a                      { font-weight:normal; }
    li                     { font-size:0.8em; }
    .pg_container          { display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; background-color:silver; }
        .pg_menu           { order:2; width:100%; height:calc(2.0em + 4px); margin:0 0px 5px 0px; padding:0px 0 0 0; display:inline-grid; grid-template-columns: 34px calc(16.66% - 13px) calc(16.66% - 9px) calc(16.66% - 9px) calc(16.66% + 9px) calc(16.66% - 12px) calc(16.66% - 16px); grid-column-gap:2px; }
            div.img_home   { width:24px; height:24px; margin:4px 0 0 9px; padding:0; }
            .pg_menubtn    { max-width:15em; margin-bottom:10px; padding:8px; border:1px solid black; background-color:white; font-size:0.8em; display:flex; justify-content:center; align-items:center; }
            .pg_menubtn_on { max-width:15em; margin-bottom:10px; padding:8px; border:1px solid black; background-color:silver; font-size:0.8em; display:flex; justify-content:center; align-items:center; }
        .pg_content        { order:1; width:100%; height:calc(100% - 2.5em); padding-top:1em; display:flex; flex-direction:column; justify-content:center; }
        .pg_content_hp     { order:1; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
            .pg_title      { display:none; order:1; }
            .pg_scroll     { padding:0; }
            .pg_scrollnone { padding:0; }
            .pg_footer     { color:black; }
            .pg_footer_hp  { display:none; }
    div.img_credit         { font-size:0.6em; }
}

/**************************************************************************************************/
/* Overrides for printing the page.                                                               */
/**************************************************************************************************/
@media only print
{
    .pg_content { width:100%; background-color:white; }
}

/**************************************************************************************************/