/* Modify core HTML elements. */

/* HTML body. */
body
  {
  /* Make the text a nice dark green. */
  color: #004400;

  /* Green background. */
  background-color: rgb(224, 255, 204);
  }

/* Links. */
a
  {
  /* Make the text a nice sea green. */
  color: #006644;
  }

/* Hover links. */
a:hover
  {
  /* Use a brigher green for this one. */
  color: #00aa00;
  }

/* Active links. */
a:active
  {
  /* Make the text a nice dark green. */
  color: #004400;
  }

/* Header. */
div.header
  {
  /* Add a rule. */
  border-bottom: 1px solid #ddddaa;
  
  /* Green background. */
  background-color: rgb(224, 255, 204);
  }
  
/* Header title. */
div.header h1
  {
  /* Make the header title dark green and bold. */
  color: #77aa77;
  }

/* Content background. */
.content_backdrop
  {
  /* Use yellow background. */
  background-color: #ffffcc;
  }

/* Footer menu and backdrop. */
#footer
  {
  /* Add a border and transparent green background colour. */
  border-top: 1px solid #ddddaa;

  /* Green background. */
  background-color: rgb(224, 255, 204);
  }

@media (prefers-color-scheme: dark)
  {
  /* HTML body. */
  body
    {
    /* Make the text a nice pale yellow. */
    color: #ffffcc;

    /* Use a dark green as the background. */
    background-color: rgba(13, 28, 13);
    }

  /* Content background. */
  .content_backdrop
    {
    /* Use green background. */
    background-color: rgb(4, 33, 3);
    }

  /* Links. */
  a
    {
    /* Make the text a nice sea green. */
    color: #66bb88;
    }

  /* Hover links. */
  a:hover
    {
    /* Use a brigher green for this one. */
    color: #00aa00;
    }

  /* Active links. */
  a:active
    {
    /* Make the text a nice pale yellow. */
    color: #00ff00;
    }

  /* Header. */
  div.header
    {
    /* Add a rule. */
    border-bottom: 1px solid #ddddaa;
    
    /* Green background. */
    background-color: rgba(13, 28, 13);
    }
 
  /* Footer. */
  #footer
    {
    /* Add a border and transparent green background colour. */
    border-top: 1px solid #ddddaa;

    /* Green background. */
    background-color: rgba(13, 28, 13);
    }
  }

/* Don't let the header get too small. */
div.header
  {
  min-width: 800px;
  }

/* Fix the size of the header table. */
div.header table
  {
  table-layout: fixed;
  }
  
div.header td.language
  {
  width: 100px;
  text-align: center;
  }
  
/* Don't let the menu get small enough to wrap. */
#menu
  {
  min-width: 800px;
  }

/* Space the header content nicely. */
div.header h1,
h1.title
  {
  margin: .3em;
  }

/* This should be boldface. */
dt
  {
  font-weight: bold;
  margin-bottom: 1em;
  }

/* Add extra spacing. */
dd
  {
  margin-bottom: 1em;
  }
  
.background,
.background_shade
  {
  position: fixed;
  top: 100px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  }

.background
  {
  z-index: 0;
  }
  
.background_shade
  {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffcc+0,ffffcc+100&1+0,0.8+70,0.68+78,0.51+86,0.2+100 */
  background: -moz-linear-gradient(left, rgba(255,255,204,1) 0%, rgba(255,255,204,0.8) 70%, rgba(255,255,204,0.68) 78%, rgba(255,255,204,0.51) 86%, rgba(255,255,204,0.2) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255,255,204,1) 0%,rgba(255,255,204,0.8) 70%,rgba(255,255,204,0.68) 78%,rgba(255,255,204,0.51) 86%,rgba(255,255,204,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255,255,204,1) 0%,rgba(255,255,204,0.8) 70%,rgba(255,255,204,0.68) 78%,rgba(255,255,204,0.51) 86%,rgba(255,255,204,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffcc', endColorstr='#33ffffcc',GradientType=1 ); /* IE6-9 */
  }
  
.background img
  {
  position: absolute;

  top: 0;
  margin-left: 30%;
  width: 70%;
  
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  }

.foreground
  {
  z-index: 1000;
  }

.footer
  {
  z-index: 1100;
  }

ul.terms li
  {
  margin-bottom: 10px;
  }

/* Icons. */
img.icon
  {
  /* Don't let the logo get too big. */
  height: 2.75em;
  
  vertical-align: middle;
  }

/* App table. */
table.apps
  {
  border-spacing: 15px 10px; /* Horizontal Vertical spacing */
  }
  
.dark
  {
  display: none;
  }

@-moz-document url-prefix()
  {
  }

@media (prefers-color-scheme: dark)
  {
  .aqua
    {
    display: none;
    }

  .dark
    {
    display: inherit;
    }

  .background_shade
    {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002200+0,002200+100&1+0,0.8+70,0.68+78,0.51+86,0.2+100 */
    background: -moz-linear-gradient(left, rgba(0,34,0,1) 0%, rgba(0,34,0,0.8) 70%, rgba(0,34,0,0.68) 78%, rgba(0,34,0,0.51) 86%, rgba(0,34,0,0.2) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,34,0,1) 0%,rgba(0,34,0,0.8) 70%,rgba(0,34,0,0.68) 78%,rgba(0,34,0,0.51) 86%,rgba(0,34,0,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,34,0,1) 0%,rgba(0,34,0,0.8) 70%,rgba(0,34,0,0.68) 78%,rgba(0,34,0,0.51) 86%,rgba(0,34,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002200', endColorstr='#33002200',GradientType=1 ); /* IE6-9 */
    }
  }
