/**************************************************************************************************/
/* 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; }

/**************************************************************************************************/
/* Constants                                                                                      */
/**************************************************************************************************/
:root
{
  --BackgroundColor:rgb(217, 201, 123);     /* D&RGW depot yellow. */
  --ForegroundColor:rgb(65, 47, 43);        /* D&RGW depot brown. */
  --SelectedColor:rgb(169, 131, 122);       /* a lighter version of D&RGW depot brown. */
}

/**************************************************************************************************/
/* Override the standard HTML tags.                                                               */
/**************************************************************************************************/
html, body   { height:100%; }
body         { font-family: Verdana,Arial,Courier Bold,Courier,Times,Times New Roman,serif; font-size:1.0em; color:var(--ForegroundColor); background-color:var(--BackgroundColor); }
h1           { width:100%; height:auto; font-size:3.0em; text-align:center; color:var(--ForegroundColor); }
h1 a         { color:var(--ForegroundColor); }
h1 a:hover   { text-decoration:none; }
h2           { margin:0.2em 0.3em; padding:0.2em 0.2em 0.2em 15em; color:var(--ForegroundColor); text-align:center; font-variant:small-caps; font-size:1.8em; font-style:italic; }
h3           { font-size:1.5em; margin-bottom:0.2em; padding:0.2em 0 0.2em 0.4em; color:maroon; text-align:justify; }
h4           { font-size:1.1em; width:calc(100% - 0.6em); margin-bottom:0.2em; padding:0.2em 0 0.2em 0.6em; color:maroon; text-align:left; }
p            { padding:0 0.7em 1.5em 0.7em; text-align:justify; font-size:1.5em; line-height:1.3em; }
p.list       { margin:0; padding-bottom:0.1em; }
a            { text-decoration:none; font-weight:bold; color:red; }
a:hover      { text-decoration:underline; }
a:focus      { outline:none; }
img          { width:100%; height:auto; margin-bottom:-5px; text-decoration:none; }
ul           { margin:0 0 15px 30px; padding:0 0 0.7em 0; }
ol           { margin:0 0 15px 2.0em; padding:0 0 0.7em 1.5em; }
li           { margin:0px; padding:0.3em 0.7em 0.3em 0.3em; text-align:justify; font-size:1.5em; line-height:1.3em; }
li.bullet    { list-style:url("./images/bullet.gif"); }
li.left      { text-align:left; }
.small       { font-size:0.8em; font-style:italic; }
.medium      { font-size:1.0em; font-style:italic; }
cite         { font-size:0.8em; font-style:italic; padding:3px 0 0 15px; }

/**************************************************************************************************/
/* Core layout of the pages.                                                                      */
/**************************************************************************************************/
div.pg_outer           { width:100%; height:auto; margin:0; padding:0% 3% 1% 3%; }
div.pg_border          { width:100%; height:100%; margin:0; padding:0%; border:2em solid var(--ForegroundColor); border-radius:3em; background-color:var(--ForegroundColor); }
div.pg_inner           { width:100%; height:100%; margin:0; padding:0%; border-width:2em 2em 2em 0em; border-style:solid; border-color:var(--BackgroundColor); border-radius:2em; background-color:var(--BackgroundColor); }
div.pg_format          { display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; height:100%; justify-content:center; }
div.pg_menu            { order:1; display:flex; flex-direction:column; width:25%; height:100%; text-align:left; }
div.pg_menu p          { width:100%; height:auto; margin:0.4em 0 0.4em 0em; padding:0.1em; border-radius:0 1em 1em 0; text-align:left; font-size:2.8em; color:white; background-color:var(--ForegroundColor); }
div.pg_menu p.focused  { background-color:var(--SelectedColor); color:black; }
div.pg_menu a          { text-decoration:none; font-weight:normal; color:white; }
div.pg_menu a:hover    { text-decoration:none; }
div.pg_menu a:focus    { outline:none; }
div.pg_content         { order:2; display:flex; flex-direction:column; width:75%; height:100%; min-width:5em; text-align:justify; outline:none; }
div.pg_content a:hover { text-decoration:none; }
div.pg_footer          { padding:5px 0 15px 0; border-top:1px solid var(--ForegroundColor); text-align:center; font-size:0.8em; }

/**************************************************************************************************/
/* Custom grids                                                                                   */
/**************************************************************************************************/
div.grid_thirds             { display:grid; grid: auto / 33% 33% 33%; grid-auto-rows:max-content; margin-bottom:0.3em; }
div.grid_quarters           { display:grid; grid: auto / 25% 25% 25% 25%; grid-auto-rows:max-content; margin-bottom:0.3em; }
div.grid_halfhalf           { display:grid; grid: auto / 50% 50%; grid-auto-rows:max-content; margin-bottom:0.3em; }
div.grid_two_one            { display:grid; grid: auto / 60% 40%; grid-auto-rows:max-content; margin-bottom:0.3em; }
div.grid_one_two            { display:grid; grid: auto / 10em calc(100% - 10em); grid-auto-rows:max-content; margin-bottom:0.3em; padding:0 0 0 1.0em; }
div.formlabel               { height:2.0em; padding-top:0.5em; }
div.formedit                { height:2.0em; padding:0; }
div.formselect              { height:2.0em; padding:0; }
div.formtextarea            { height:4.0em; padding:0; margin:0 0 0.7em 0; }
div.grid_cartcontent_header { display:grid; grid: auto / 30% 50% 20%; }
div.grid_cartcontent        { display:grid; grid: auto / 10% 10% 10% 50% 20%; }
.left                       { text-align:left; }
.right                      { text-align:right; }
.center                     { text-align:center; }
.line                       { display:block; height:1px; width:auto; margin:0 2px 0 2px; }
.black                      { background-color:black; }
.beige                      { background-color:beige; }
.darkgray                   { background-color:rgb(128, 128, 128); }
.mediumgray                 { background-color:rgb(192, 192, 192); }
.lightgray                  { background-color:rgb(230, 230, 230); }
.white                      { background-color:white; }

/**************************************************************************************************/
/* Shopping Cart                                                                                  */
/**************************************************************************************************/
/* Product Pages */
h1.cart           { width:100%; height:auto; padding-top:0.5em; text-align:center; color:var(--ForegroundColor); }
div.cart_product2 { display:grid; grid: auto / 25% 50% 25%; grid-auto-rows:max-content; margin:0 0 1.3em 0.7em; }
div.cart_center   { border:0.1em solid var(--ForegroundColor); }
div.cart_col1     { display:grid; grid: auto / 90% 10%; grid-auto-rows:max-content; margin-bottom:0; padding:0.2em 0.4em 0.2em 0.4em; }
div.cart_col2     { display:grid; grid: auto / 50% 20% 10% 5% 15%; grid-auto-rows:max-content; margin-bottom:0; padding-right:0.4em; }

/* Add-to-Cart Button */
input, textarea                 { font-family:inherit; font-size:inherit; }
input[type=text]                { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=number]              { width:90%; margin:0.3em 0; padding:0.1em; border:1px solid black; border-radius:10px; text-align:center; }
input[type=email]               { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=tel]                 { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=url]                 { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=file]                { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=image]               { width:100%; margin:0.3em 0; padding:0.2em; }
input[type=submit]              { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; background-color:yellow; cursor:pointer; }
select                          { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
label                           { width:100%; margin:0.3em 0; padding:0.2em; }
textarea                        { width:100%; height:4.0em; resize:none; margin:0.5em 0 0 0; padding:0; border:1px solid black; border-radius:10px; }
form.checkout input[type=image] { margin:0; padding:0; margin-left:calc((100% - 32px) / 2); }
form.payment                    { margin:0; padding:1.3em; }
.cart_btn_qty                   { max-width:32px; }

/* View Cart Bar to Top of the Pages (the _space one is needed to have the scrolling page account for the presence of the View Cart bar). */
div.viewcart        { width:100%; height:2.0em; position:fixed; background-color:yellow; color:darkblue; overflow:hidden; }
div.viewcart_grid   { display:grid; grid: auto / 13% 87%; grid-auto-rows:max-content; margin-bottom:0.3em; }
div.viewcart_grid p { margin:0; padding:0.5em 0 0 0; }
div.viewcart_space  { width:100%; height:2.0em; }
div.viewcart img    { width:auto; height:2.0em; }
p.warning           { background-color:yellow; border:3px solid red; margin:0.3em 0.3em 1.0em 0.3em; padding:0.2em; }

/**************************************************************************************************/
/* Images                                                                                         */
/**************************************************************************************************/
div.img_c                   { clear:both; margin:0 0.7em 1.5em 0.7em; }
div.img_r_10                { float:right; display:block; width:10%; margin:7px; }
div.img_clickable           { padding:3px; }
div.img_clickable img:hover { box-shadow:0 0 3px 3px rgba(186, 140, 0, 0.5); }
div.img_desc                { padding-bottom:3px; text-align:center; font-size:2em; font-style:italic; background-color:transparent; color:rgb(50, 50, 50); }
div.img_desc img            { margin-bottom:1px; }

/**************************************************************************************************/
/* 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; }

/**************************************************************************************************/
/* YouTube Video Frame                                                                            */
/**************************************************************************************************/
.video_utube { height:34em; margin:1em 3em 3em 3em; box-shadow:2px 2px 9px black; }
.frame       { width:100%; height:100%; }

/**************************************************************************************************/
/*                              Screen Size Overrides                                             */
/**************************************************************************************************/
@media only screen and (max-width:2185px)
{
    div.pg_menu p { font-size:2.5em; }
    div.cart_col2 { display:grid; grid: auto / 40% 20% 13% 7% 20%; }
}
@media only screen and (max-width:2070px)
{
    div.cart_col1 { display:grid; grid: auto / 100%; }
    div.pg_menu p { font-size:2.5em; }
}
@media only screen and (max-width:1875px)
{
    div.cart_product2 { display:grid; grid: auto / 20% 60% 20%; }
}
@media only screen and (max-width:1740px)
{
    div.pg_menu p { font-size:1.9em; }
}
@media only screen and (max-width:1585px)
{
    div.cart_product2 { display:grid; grid: auto / 15% 70% 15%; }
}
@media only screen and (max-width:1520px)
{
    p             { font-size:1.4em; }
    li            { font-size:1.4em; }
    div.pg_menu p { font-size:1.6em; }
    div.img_desc  { font-size:1.4em; }
}
@media only screen and (max-width:1375px)
{
    div.cart_product2 { display:grid; grid: auto / 10% 80% 10%; }
}
@media only screen and (max-width:1297px)
{
    h1                { font-size:2.5em; }
    h2                { font-size:1.6em; }
    p                 { font-size:1.2em; }
    div.img_desc      { font-size:1.2em; }
    li                { font-size:1.2em; }
    div.pg_menu p     { font-size:1.3em; }
    div.cart_product2 { display:grid; grid: auto / 100%; }
}
@media only screen and (max-width:1078px)
{
    p             { font-size:1.1em; }
    div.img_desc  { font-size:1.1em; }
    li            { font-size:1.1em; }
    div.pg_menu p { font-size:1.0em; }
    div.cart_col1 { font-size:0.9em; }
    div.cart_col2 { display:grid; grid: auto / 20% 40% 13% 7% 20%; }
    .video_utube  { height:25em; margin:1em 1em 1em 1em; }
}
@media only screen and (max-width:950px)
{
    h1 { font-size:2.3em; }
    h2 { font-size:1.3em; }
}
@media only screen and (max-width:860px)
{
    h1              { font-size:2.1em; }
    h2              { font-size:1.1em; }
    div.pg_border   { border:1.5em solid var(--ForegroundColor);}
    div.pg_inner    { border-width:1.5em 1.5em 1.5em 0em;}
    div.pg_menu p   { font-size:0.9em; }
    p               { font-size:1.0em; }
    div.img_desc    { font-size:1.0em; }
    li              { font-size:1.0em; }
    div.cart_col1   { font-size:0.8em; }
    div.cart_col2   { display:grid; grid: auto / 10% 40% 16% 9% 25%; }
    div.grid_thirds { grid: auto / 100%; }
    .video_utube    { height:20em; margin:1em 2em 2em 2em; }
}
@media only screen and (max-width:777px)
{
    div.pg_border     { border:1.1em solid var(--ForegroundColor);}
    div.pg_inner      { border-width:1.1em 1.1em 1.1em 0em;}
    div.pg_menu p     { font-size:0.8em; }
    p                 { font-size:0.8em; }
    div.img_desc      { font-size:0.8em; }
    li                { font-size:0.8em; }
    div.cart_col2     { font-size:0.8em; }
    div.grid_quarters { grid: auto / 100%; }
}
@media only screen and (max-width:665px)
{
    h1            { font-size:1.8em; }
    h2            { font-size:0.9em; }
    div.pg_border { border:1.0em solid var(--ForegroundColor);}
    div.pg_inner  { border-width:1.0em 1.0em 1.0em 0em;}
    div.pg_menu p { font-size:0.7em; }
    p             { font-size:0.7em; }
    div.img_desc  { font-size:0.7em; }
    li            { font-size:0.7em; }
}
@media only screen and (max-width:602px)
{
    div.pg_border { border:0.9em solid var(--ForegroundColor);}
    div.pg_inner  { border-width:0.9em 0.9em 0.9em 0em;}
    div.pg_menu p { font-size:0.6em; }
    p             { font-size:0.6em; }
    div.img_desc  { font-size:0.6em; }
    li            { font-size:0.6em; }
    div.cart_col2 { display:grid; grid: auto / 1% 50% 13% 9% 28%; }
}
@media only screen and (max-width:520px)
{
    h1 { font-size:1.5em; }
    h2 { font-size:0.7em; }
    div.cart_col2 { display:grid; grid: auto / 1% 43% 13% 9% 35%; }
}
@media only screen and (max-width:500px)
{
    h3                { font-size:0.6em; }
    h4                { font-size:0.6em; }
    ol                { margin-left:1.0em; padding-left:1.0em; }
    h1.cart           { font-size:1.3em; }
    div.grid_halfhalf { display:grid; grid: auto / 100%; grid-auto-rows:max-content; margin-bottom:0.3em; }
    div.viewcart_grid { display:grid; grid: auto / 8.5em calc(100% - 8.5em); grid-auto-rows:max-content; margin-bottom:0.3em; }
    div.grid_two_one  { display:grid; grid: auto / 100%; grid-auto-rows:max-content; margin-bottom:0.3em; }
    div.grid_one_two  { display:grid; grid: auto / 100%; margin-bottom:0; padding-bottom:0; }
    div.formlabel     { width:100%; padding-top:0.3em; padding-bottom:0; height:auto; }
    div.formedit      { width:100%; padding-top:0; padding-bottom:0.3em; }
    form.payment      { margin:0; padding:1.0em 0 1.0em 0; }
    .video_utube      { height:10em; margin:1em 1em 1em 1em; }
}

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