/*
################################################################
A component of justinscreations.com

Copyright 2014-2019,2025 Justin Law. All rights reserved.
################################################################
*/

/* Global Style */
body {background-color:black;font-family:arial;font-size:16px;color:white;margin:10px;}

/* Highlighting */
::selection, ::-moz-selection   {background-color:white;color:darkblue;}
h1:target, h2:target, h3:target {background-color:#4a3f00;color:gold;}

/* Content Block Styles */
h1        {font-size:1.6em;text-align:center;border-bottom:1px solid white;margin:0 0 16px 0;padding:0.26em 0;}
h2        {font-size:1.4em;}
h3        {font-size:1.1em;}
p         {font-size:1.0em;}
hr        {border:unset;height:1px;background-color:white;margin:8px 0;}

/* Links */
a:link    {color:white;}
a:visited {color:lightgrey;}
a:active  {color:yellow;}
a:hover   {color:yellow;}

/* Table */
table      {border-collapse:collapse;border:1px solid white;background-color:white;}
td         {background-color:darkblue;border:1px solid white;padding:2px;}
th         {background-color:blue;border:1px solid white;padding:2px;text-align:center;}
td.SubHead {text-align:center;font-weight:bold;}

/* Text Box */
textarea, input[type=text], input[type=password], input[type=email]
    {margin:2px;padding:2px 4px;font:inherit;color:white;border:1px solid white;background-color:#000044;}

/* Content Box */
.UiContentBox {display:block;border-collapse:collapse;border-radius:4px;border:1px solid darkblue;background-color:darkblue;margin:auto;padding:0 8px;}

/* Link Button */
.LinkButton                   {color:white;background-color:darkblue;font:inherit;font-weight:bold;text-decoration:none;border:1px solid white;display:block;padding:4px 8px;margin:2px;text-align:center;box-sizing:border-box;}
.LinkButton:visited           {color:white;}
.LinkButton:hover             {color:yellow;background-color:blue;}
.LinkButton:active            {color:yellow;background-color:black;}
.LinkButton.AttractsAttention        {background-color:darkgreen;}
.LinkButton.AttractsAttention:hover  {background-color:limegreen;}
.LinkButton.AttractsAttention:active {background-color:black;}

/* Link Bar */
.LinkBar            {display:flex;list-style-type:none;padding:0 12px;flex-wrap:wrap;justify-content:flex-start;}
.LinkBar>*          {display:block;}
.LinkBar>a          {white-space:nowrap;flex-basis:100px;font-weight:bold;text-decoration:none;padding:6px;text-align:center;}
.LinkBar>a:link     {color:white;}
.LinkBar>a:visited  {color:white;}
.LinkBar>a:hover    {color:yellow;background-color:blue;}
.LinkBar>a:active   {color:yellow;background-color:black;}
.LinkBar>.FlexSpace {flex-grow:1;flex-basis:unset;}

/* Link Button Bar */
.LinkButtonBar             {display:flex;justify-content:center;}
.LinkButtonBar>.LinkButton {flex-basis:160px;}
.LinkButtonBar>.FlexSpace  {flex-grow:1;flex-basis:unset;}

/* Text Field Row */
.TextField                      {display:flex;align-items:center;}
.TextField>label                {flex-basis:150px;font-weight:bold;}
.TextField>input[type=text], .TextField>input[type=password], .TextField>input[type=email], .TextField>div
    {flex-grow:1;}

/* Message Box */
.MessageBox      {text-align:center;margin:8px 0;background-color:#884400;border:1px solid white;text-align:center;padding:4px 8px;}

/* Thumbnail List */
.ThumbnailList       {display:flex;flex-wrap:wrap;justify-content:flex-start;margin:8px 0;}
.ThumbnailList>a     {display:flex;justify-content:stretch;align-items:flex-end;flex-basis:180px;margin:4px;height:150px;border:1px solid white;background:darkblue center no-repeat;font-weight:bold;text-decoration:none;}
.ThumbnailList>a>div {flex-grow:1;text-align:center;padding:4px 0;background-color:#00000088;}

/* Normal Page Features (Header, Footer) */
body>header, body>footer        {box-sizing:border-box;min-width:400px;max-width:800px;margin:10px auto;background-color:darkblue;border:1px solid darkblue;border-collapse:collapse;border-radius:4px;overflow:hidden;}
body>header                     {overflow-x:auto;flex-wrap:nowrap;}
body>header>img                 {height:32px;width:32px;}
body>footer                     {text-align:left;padding:4px 8px;}
body>footer>span:nth-of-type(2) {float:right;}
body>table, body>form>table, body>.UiContentBox, body>form>.UiContentBox, body>.MessageBox
    {box-sizing:border-box;min-width:380px;max-width:780px;margin:10px auto;}