:root
{
   --Amethyst: #9966cc;
   --AmethystB: #cc99ff;
   --Diamond: #b9f2ff;
   --DiamondB:  #460d00;
   --Emerald: #009b77;
   --EmeraldB: #33ceaa;
   --Jade: #00a86b;
  --JadeB: #33db9e;
    --LogoBlue: #53c9e9;
   --MatrixGreen: #92d500;
   --Obsidian: #445055;
   --Onyx: #353839;
   --RichBlack: #010203;
   --Ruby: #a30031;
   --Sapphire: #0f52ba;
   --Silver: #c0c0c0;
   --Topaz: #ffc87c;
   --TopazB: #003783;
}
@font-face
{
   font-family: AryaDouble;
   src: url(https://vizability.ca/Images/Matrix.TTF);
}
@media screen and (orientation: landscape)
{
   figure
   {
   margin-bottom: 2em;
   width: 25%;
   }
   table
   {
   width: 50%;
      margin-left: 25%;
   }
.SectionContent
{
   margin-bottom: 2em;
   width: 25%;
}
   .SectionGroup
   {
      width: 50%;
   }
   #MainImage
   {
      width: 25%;
   }
}
@media screen and (orientation: portrait)
{
   figure
   {
   margin-bottom: 4em;
   width: 50%;
   }
   table
   {
   width: 100%;
   }
.SectionContent
{
   margin-bottom: 4em;
   width: 50%;
}
   .SectionGroup
   {
      width: 100%;
   }
   #MainImage
   {
      width: 50%;
   }
}
*
{
   box-sizing: border-box;
   text-align: center;
}
a
{
   color: darkblue;
   padding: 0.25em;
   white-space: pre-wrap;
}
body
{
   background-color: royalblue;
   color: var(--Silver);
   font-family: Arial, Helvetica, sans-serif;
   border: 3em solid darkblue;
   border-image-source: url(https://cmc.vizability.ca/Images/border.jpg);
   border-image-slice: 33%;
   border-image-width: 3em;
   border-image-repeat: repeat;
   padding: 1em;
}
button
{
   height: 24px;
   padding-top: 0.25em;
}
figure
{
   display: inline-block;
   margin: 0;
   padding: 0.5em;
}
form
{
   background-color: var(--Silver);
   padding: 1em;
   text-align: left;
}
h1
{
   color: var(--Silver);
}
h2
{
   color: skyblue;
}
h3
{
   color: hotpink;
}
img
{
   width: 100%;
}
img.Icon
{
   height: 32px;
   width: auto;
}
input
{
   margin: 0.25em;
}
input[type=textarea]
{
   width: 100%;
   height: 20em;
}
li
{
   text-align: left;
   margin: 0.5em;
}
nav
{
   clear: both;
   background-color: lightcyan;
   color: var(--RichBlack);
   padding: 0.5%;
   margin-top: 4%;
}
ol
{
   background-color: var(--Silver);
   text-align: left;
   margin-top: 1em;
   padding: 1em;
}
p
{
   text-align: left;
}
select
{
   width: 100%;
}
ul
{
   background-color: var(--Silver);
   text-align: left;
   margin-top: 1em;
   padding: 1em;
}
.Amethyst
{
   background-color: var(--AmethystB);
   color: var(--Amethyst);
}
.Bonus
{
   width: 100%;
   padding: 1%;
   background-color: lightblue;
   color: darkblue;
}
.Cashed
{
   width: 100%;
   padding: 1%;
   background-color: lightpink;
   color: deeppink;
}
.Diamond
{
   background-color: var(--DiamondB);
   color: var(--Diamond);
}
.Earned
{
   width: 100%;
   padding: 1%;
   background-color: lightgreen;
   color: darkgreen;
}
.Emerald
{
   background-color: var(--EmeraldB);
   color: var(--Emerald);
}
.FooterHeading
{
   color: var(--RichBlack);
}
.FooterLink
{
   padding: 0.5em;
   white-space: nowrap;
}
.Hide
{
   display: none;
}
.Jade
{
   background-color: var(--JadeB);
   color: var(--Jade);
}
.Matrix
{
   display: inline-block;
   color: royalblue;
}
.Matrix::first-letter
{
   color: var(--MatrixGreen);
   font-family: AryaDouble, Arial, Helvetica, sans-serif;
   background-color: var(--RichBlack);x
}
.Obsidian
{
   background-color: fuchsia;
   color: var(--Obsidian);
}
.Onyx
{
   background-color: hotpink;
   color: var(--Onyx);
}
.Ruby
{
   background-color: var(--RichBlack);
   color: var(--Ruby);
}
.Sapphire
{
   background-color: var(--Silver);
   color: var(--Sapphire);
}
.SectionContent
{
   padding: 0.5em;
   display: inline-block;
}
.SectionGroup
{
   padding: 1em;
   display: inline-block;
}
.Tabs
{
   border-radius: 10%;
   background-color: var(--Silver);
   height: 2em;
   margin-left: 1%;
   margin-right: 1%;
}
.Topaz
{
   background-color: var(--TopazB);
   color: var(--Topaz);
}
.Total
{
   width: 100%;
   padding: 1em;
   background-color: fuchsia;
   color: black;
}
#Bag
{
   display: none;
}
#BannerLogo
{
   width: calc(100% + 2em);
   margin-top: -1em;
   margin-left: -1em;
   margin-right: -1em;
}
#GemLevels
{
   background-color: gold;
   color: black;
}
#Logo
{
   display: inline-block;
}
#MainImage
{
   float: left;
   padding-bottom: 0;
   padding-right: 2em;
}
#Piece1
{
   float: left;
}
#Piece2
{
   float: right;
}
#Piece3
{
   clear: both;
}
#Piece4
{
   float: left;
}
#Piece5
{
   float: right;
}
#SetBirthday
{
   width: auto;
}
#SetGemsPref
{
   width: auto;
}
#TabBar
{
   width: calc(100% + 2em);
   margin-left: -1em;
   margin-right: -1em;
}