/**************************************************************************************************/
/* 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%; }
body       { font-family:Verdana, Palatino, Arial, times, serif; font-size:1.0em; color:black; overflow:hidden; }
h1         { font-size:1.8em; margin-bottom:0.2em; padding:0.2em 0; text-align:center; }
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 3.0em; text-align:justify; font-size:1.0em; line-height:1.3em; }
a          { text-decoration:none; font-weight:bold; color:crimson; }
a:hover    { text-decoration:underline; }
img        { width:100%; height:auto; margin-bottom:-5px; text-decoration:none; }
ul         { margin:0 0 15px 30px; }
ol         { margin:0 0 15px 3.0em; }
li         { text-align:justify; margin:0px; padding:2px 9px; font-size:1.0em; line-height:1.3em; }
li.bullet  { margin-left:7px; list-style:url("./images/bullet.gif"); }
sup        { font-weight:bold; color:maroon; }

/**************************************************************************************************/
/* Core layout of the pages:                                                                      */
/*                                                                                                */
/*       Peter's Model Railroading                                                                */
/*             Page Title                                                                         */
/*                                                                                                */
/* (menu)   (scrollable content)                                                                  */
/*                                                                                                */
/*              (footer)                                                                          */
/*                                                                                                */
/**************************************************************************************************/
.pg_container                { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; height:100%; padding:15px 0 15px 0; background-image:linear-gradient(beige, mediumseagreen); }
    .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:20px; box-shadow:2px 2px 6px black; background-color:beige; font-size:0.8em; display:flex; justify-content:center; align-items:center; }
        .pg_menubtn:hover    { background-color:mediumseagreen; color:beige; }
    .pg_content              { order:2; width:100%; max-width:1000px; display:flex; flex-direction:column; justify-content:center; border-radius:15px; }
        .pg_header           { order:1; text-align:center; border-bottom:1px solid darkolivegreen; border-radius:15px 15px 0 0; background-image:linear-gradient(beige, rgb(203, 230, 196)); }
            .hdr_left        { float:left; display:block; width:10%; height:100%; }
            .hdr_left img    { width:32px; height:32px; }
            .hdr_center      { float:left; display:block; width:80%; height:100%; }
            .hdr_right       { float:left; display:block; width:10%; height:100%; }
            .hdr_right img   { width:32px; height:32px; }
        .pg_scroll           { order:2; width:100%; height:100%; margin:0 auto; padding:5px 0 5px 0; overflow-x:hidden; overflow-y:auto; background-color:rgb(203, 230, 196); outline:none; }
        .pg_footer           { order:3; padding-top:5px; border-top:1px solid darkolivegreen; text-align:center; font-size:0.8em; }

/**************************************************************************************************/
/* Table-of-content pages.                                                                        */
/**************************************************************************************************/
.toc_link         { display:grid; grid: auto / 25% 55% 20%; grid-auto-rows:max-content; margin-bottom:0.5em; }
.toc_layout       { display:grid; grid: auto / 32% 48% 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; }

/**************************************************************************************************/
/* 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:0.9em; 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:green; }

/**************************************************************************************************/
/* 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(186, 140, 0, 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_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; }

/**************************************************************************************************/
/* Overrides for smaller screens.                                                                 */
/**************************************************************************************************/
@media only screen and (max-width:750px)
{
    h1          { font-size:1.3em; }
    .pg_margin  { width:0; height:0; display:none; }
    .pg_content { width:100%; }
    .menu_btn   { font-size:0.7em; padding:6px 1px 6px 1px; }
}
@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.8em; }
    a              { font-weight:normal; }
    li             { font-size:0.8em; }
    .pg_margin     { width:0; height:0; display:none; }
    .pg_content    { width:100%; }
    .menu_btn      { font-size:0.6em; padding:6px 1px 6px 1px; }
    .pg_container  { display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; padding:0; background-color:beige; }
        .pg_menu   { order:1; width:100%; height:2.5em; margin:0 1px 5px 1px; display:inline-grid; grid-template-columns: 10% 17% 13% 18% 14% 13% 11%; grid-column-gap:2px; }
            .pg_menubtn { width:100%; min-width:50%; height:90%; margin:0; padding:0; display:flex; justify-content:center; align-items:center; border-radius:10px; }
        .pg_content { order:2; width:100%; height:calc(100% - 2.5em); display:flex; flex-direction:column; justify-content:center; border-radius:15px; }
            .pg_header         { order:1; text-align:center; border-bottom:1px solid darkolivegreen; border-radius:15px 15px 0 0; background-image:linear-gradient(beige, rgb(203, 230, 196)); }
            .pg_footer         { color:white; }
    div.img_home   { width:24px; height:24px; height:100%; margin-left:5px; display:flex; justify-content:center; align-items:center; }
    .toc_path      { font-size:0.8em; }
    .toc_desc      { font-size:0.8em; }
    .toc_date      { font-size:0.6em; }
}

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