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

/**************************************************************************************************/
/* Customization of standard HTML tags.                                                           */
/**************************************************************************************************/
html, body { height:100%; }
body       { font-family:Verdana, Palatino, Arial, times, serif; font-size:1em; color:black; overflow-x:hidden; overflow-y:hidden; background-image:url("./images/bkg.jpg"); background-repeat:repeat; }
h1         { margin-bottom:0.4em; font-size:2.5em; font-weight:bold; color:rgb(86,79,46); text-align:center; }
h2         { margin-bottom:0.3em; font-size:2.0em; font-weight:bold; color:rgb(86,79,46); text-align:center; }
h3         { margin-bottom:0.2em; font-size:1.5em; font-weight:bold; color:black; text-align:center; border-bottom:1px solid green; }
h4         { width:100%; margin-top:25px; padding:0.1em; font-size:1.1em; font-weight:bold; text-align:center; background-color:rgb(225, 205, 177); color:black; border:1px solid black; border-bottom:0; border-radius:7px 7px 0px 0px; display:inline-block; }
p          { padding:0 0.3em 1.2em 0.1em; text-align:justify; font-style:normal; }
a          { text-decoration:none; font-weight:bold; color:rgb(245, 23, 14); }
a:hover    { text-decoration:underline; color:red; }
ul         { margin:0 0 2em 1.9em; }
li         { padding-bottom:0.4em; font-size:0.9em; }

/**************************************************************************************************/
/* These define the main layout of a page on this site.                                           */
/* The text "margin:0 auto" causes the div to be centered horizontally.                           */
/**************************************************************************************************/
.pg            {             width:100%; height:100%; }
.pg_menu       { float:left; width:15%;  height:100%; overflow-x:hidden; overflow-y:auto; background-image:url("./images/bkg_menu.jpg"); background-repeat:repeat; }
.pg_content    { float:left; width:70%;  height:100%; overflow:hidden; }
.content       {             width:100%; height:calc(100% - 3.5em); max-width:820px; margin:0 auto; overflow-x:hidden; overflow-y:auto; }
.content:focus { outline:none; }
.footer        {             width:100%; max-width:820px; margin:0 auto; overflow-x:hidden; overflow-y:hidden; text-align:center; border-top:1px solid black; }

/**************************************************************************************************/
/* Menu definitions.                                                                              */
/**************************************************************************************************/
.logo                    { text-align:center; color:yellow; }
.logospace               { width:20%; }
.logo img                { width:auto; max-height:100px; }
.menuitem                { padding:6px; margin:5px; background-color:beige; color:green; border-radius:9px; }
.menuitem a:hover        { color:red; }
.menu h4                 { color:gold; text-align:center; margin:0.1em, 0, 0.1em, 0; padding:0; border:0; background-color:transparent; border-radius:0; }
.menu p                  { color:gold; text-align:center; }
.tooltip                 { position:relative; }
.tooltip .ttttext        { visibility:hidden; width:80%; background-color:black; color:beige; font-size:0.8em; text-align:center; border-radius:6px; padding:5px 0; position:absolute; z-index:1; bottom:150%; left:10%; opacity:0; transition:opacity 1s; transition-delay:1s; }
.tooltip .ttttext::after { content:" "; position:absolute; top:100%; left:25%; margin-left:-5px; border-width:10px; border-style:solid; border-color:black transparent transparent transparent; }
.tooltip:hover .ttttext  { visibility:visible; opacity:1; }
.tooltip .btttext        { visibility:hidden; width:80%; background-color:black; color:beige; font-size:0.8em; text-align:center; border-radius:6px; padding:5px 0; position:absolute; z-index:1; top:150%; left:10%; opacity:0; transition:opacity 1s; transition-delay:1s; }
.tooltip .btttext::after { content:" "; position:absolute; bottom:100%; left:25%; margin-left:-5px; border-width:10px; border-style:solid; border-color:transparent transparent black transparent; }
.tooltip:hover .btttext  { visibility:visible; opacity:1; }

/**************************************************************************************************/
/* Special announcements.                                                                         */
/**************************************************************************************************/
@keyframes slidecircles { from {left:825px;} to {left:0px;} }
div.circlegroup         { width:auto; height:auto; margin:5px; }
div.circle              { float:left; position:relative; margin:0 10px 0 10px; width:110px; height:110px; vertical-align:middle; border-radius:100%; border:1px solid red;
                          background-image:-moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
                          background-image:-webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
                          background-image:radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
                          animation:slidecircles 5s 1; animation-timing-function:ease-in-out;
                        }
div.circle_sp           { float:left; position:relative; margin:0 10px 0 0px; width:120px; height:110px; vertical-align:middle; border-radius:100%; border:2px solid green;
                          background-image:-moz-linear-gradient(red, yellow);
                          background-image:-webkit-linear-gradient(red, yellow);
                          background-image:linear-gradient(red, yellow);
                          animation:slidecircles 5s 1; animation-timing-function:ease-in-out;
                        }
div.circletextwrapper   { position:relative; left:15%; top:15%; width:70%; height:70%; max-width:70%; max-height:70%; transform-style:preserve-3d; }
div.circletext          { position:relative; top:50%; font-size:0.7em; text-align:center; transform:translateY(-50%); }
div.circletext_sp       { position:relative; top:50%; font-size:0.7em; text-align:center; transform:translateY(-50%); color:black; font-weight:bold; }
div.circle a            { text-decoration:underline; }

/**************************************************************************************************/
/* Home page photo rotation                                                                       */
/**************************************************************************************************/
@keyframes hpphotos {
   0%  { background-image:url("./images/hp1.jpg"); }
/*  10%  { background-image:url("./images/SummerSellathon.jpg"); }*/
  10%  { background-image:url("./images/hp2.jpg"); }
  30%  { background-image:url("./images/hpD.jpg"); }
  50%  { background-image:url("./images/hp3.jpg"); }
  70%  { background-image:url("./images/hp4.jpg"); }
  90%  { background-image:url("./images/hp5.jpg"); }
  100% { background-image:url("./images/hpD.jpg"); }
}
div.hpphoto    { float:left; left:0%; top:10px; width:100%; height:calc(100% - 115px); max-width:100%; text-align:center; }
div.hpbkgphoto { position:relative; left:0%; top:10px; width:70%; height:100%; max-width:70%; max-height:80%; transform-style:preserve-3d; margin:0 auto; text-align:center;
                 animation-name:hpphotos; animation-duration:45s; animation-iteration-count:infinite; background-repeat:no-repeat; }

/**************************************************************************************************/
/* Template files definitions.                                                                    */
/**************************************************************************************************/
/* selection pages: */
.templ_entry_wrap     { display:grid; grid-template-columns:30% 15% 55%; font-size:0.8em; }
.templ_entry_header   { grid-column: 1 / -1; }
.templ_entry_col1 img { width:100%; height:100%; }
.templ_entry_img      { margin-bottom:15px; }
.templ_entry_col2     { padding-left:15px; font-weight:bold; }
.templ_entry_col3     { padding-left:15px; margin-bottom:15px; }

/* individual-product pages: */
.templ_detail_wrap              { background-color:white; border:1px solid black; margin-bottom:35px; }
.templ_detail_textwrap          { display:grid; grid-template-columns:auto auto; font-size:1.0em; }
.templ_detail_l                 { font-weight:bold; padding:2px; border-bottom:1px solid lightgray; }
.templ_detail_r                 { padding:2px; border-bottom:1px solid lightgray; }
.templ_detail_imgwrap           { display:grid; grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto; margin-right:3px; }
.templ_detail_imgwrap img       { width:100%; border:1px solid black; margin:3px 3px 0 3px; }
.templ_detail_imgwrap a         { margin-right:3px; }
.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; 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:0px; opacity:1; }
.return_link                    { float:right; text-align:right; font-size:0.7em; margin-top:3px; }
.sorting                        { margin-bottom:15px; padding-bottom:3px; border-bottom:1px solid green; font-size:0.8em; text-align:left; }

/**************************************************************************************************/
/* Miscellaneous definitions.                                                                     */
/**************************************************************************************************/
.b           { border:1px solid black; }
.small       { font-size:0.7em; }
.medium      { font-size:0.8em; }
.img_c       { text-align:center; }
.img_c img   { text-align:center; width:100%; }
.img_l       { float:left; text-align:left; }
.img_r       { float:right; display:block; margin:5px 10px 5px 15px; padding:0; text-align:center; font-size:10px; font-style:italic; }
.btm_b       { margin-bottom:25px; }
.clr         { clear:both; }
.clr_lg      { clear:both; margin-bottom:25px; }
.clr_bottom  { clear:both; margin-bottom:800px; }
table        { margin-bottom:25px; }
col#tcol_5   { width:5%;  }
col#tcol_10  { width:10%; }
col#tcol_15  { width:15%; }
col#tcol_20  { width:20%; }
col#tcol_25  { width:25%; }
col#tcol_30  { width:30%; }
col#tcol_35  { width:35%; }
col#tcol_40  { width:40%; }
col#tcol_45  { width:45%; }
col#tcol_50  { width:50%; }
col#tcol_55  { width:55%; }
col#tcol_60  { width:60%; }
col#tcol_65  { width:65%; }
col#tcol_70  { width:70%; }
col#tcol_75  { width:75%; }
col#tcol_80  { width:80%; }
col#tcol_85  { width:85%; }
col#tcol_90  { width:90%; }
col#tcol_95  { width:95%; }

/**************************************************************************************************/
/* Overrides of the above for smaller screens.                                                    */
/**************************************************************************************************/
@media only screen and (max-width:700px)
{
    .body                       { width:100%; }
    .pg                         { overflow-y:auto; }
    .pg_menu                    { width:100%; height:auto; }
    .pg_content                 { width:100%; }
    .content                    { width:100%; height:calc(100% - 6.0em); }
    .content:focus              { outline:none; }
    div.hpphoto                 { display:none; }
    .templ_detail_img img:hover { left:0; width:700px; }
}

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