/* Modify core HTML elements. */

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

  /* Use a nice, tight font. */
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5em;

  background-color: #ffffcc;
  
  margin: 0;
  }

/* Turn off image borders. */
img
  {
  border: none;
  }

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

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

  /* While the button is pressed, keep the underline and press the link. */
  text-decoration: underline;
  border-width: 1px;
  }

/* Header. */
div.header
  {
  /* Make a fixed header across the top. */
  height: 85px;
  margin: 0;
  border-bottom: 1px solid #ddddaa;
  background-color: rgba(204, 255, 204, .6); 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  /* Use vibrancy on Safari. */
  -webkit-backdrop-filter: blur(10px);
  
  z-index: 2000; 
  }
  
/* Specify the size of the header logo. */
div.header .logo
  {
  float: left;
  height: 65px;
  margin: 10px;
  }
  
/* Take the app name and icon, float it right and center vertically. */
div.header .app
  {
  float: right;
  }
  
/* Make the app name dark green and bold. */
div.header .app span
  {
  color: #77aa77;
  vertical-align: middle;
  font-size: 2em;
  font-weight: bold;
  line-height: 85px;
  }

/* Use the correct size for the app icon. */
div.header .app img
  {
  width: 48px;
  height: 48px;
  vertical-align: middle;
  margin-top: 12px;
  margin-bottom: 13px;
  margin-right: 15px;
  }
    
/* Float the language controls at the right of the header. */
div.header .language
  {
  float: right;
  width: 75px;
  font-size: 10px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);  
  }
  
/* Give the controls a little whitespace. */
div.header .language label
  {
  margin-left: 5px;
  }
  
/* Site content. */
.content
  {
  padding: 10px;

  /* Position in the middle. */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  }

#splash
  {
  position: relative;
  width: 100%;
  margin-top: 80px;
  z-index: 1000; 
  }

#splash img 
  {
  position: absolute;
  top: 0;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  }

#splash1
  {
  }
  
#splash2
  {
  opacity: 0;
  } 
  
.anchor
  {
  margin-top: 200px;
  margin-bottom: 100px;
  
  padding-bottom: 1px;
  }
  
.anchor span
  {
  display: none;
  }

#about
  {
  margin-top: 100%;
  }
    
#donate
  {
  margin-top: 0px;
  }
  
.section
  {
  margin-bottom: 100px;
  }

.download_link
  {
  text-transform: uppercase;
  color: #993300;
  font-size: 1.4em;
  font-family: "Arial Black", Arial, sans-serif;
  }
    
/* A software overview box. */
a.linkbox
  {
  /* Create a square box. */
  display: block;
  width: 150px;
  height: 130px;
  margin: 0px;
  margin-right: 1em;
  margin-bottom: 1em;
  padding: 10px;

  float: right;

  /* Center the text. */
  text-align: center;

  border-style: dashed;
  border-width: 1px;
  border-color: #aaaaaa;
  border-radius: 10px;
  
  -webkit-transition: box-shadow .5s;
  -webkit-transition: background-color .5s;
  }

.linkbox img
  {
  margin: 5px;
  height: 48px;
  width: 48px;
  }

/* Make the software box act like a button. */
a.linkbox:hover
  {
  border-color: transparent;
  background-color: #eeeebb;
  box-shadow: inset 0px 0px 2px 2px rgba(160, 160, 160, 1.0);
  }

a.linkbox:active
  {
  border-color: transparent;
  background-color: #eeeebb;
  box-shadow: inset 0px 0px 2px 2px rgba(160, 160, 160, 1.0);
  }

/* Turn off underline. */
a.linkbox,
a.linkbox:hover,
a.linkbox:active,
a.linkbox:visited
  {
  text-decoration: none;
  }

/* dt and dd items. */
.content dt
  {
  font-weight: bold;
  }
  
.content dd
  {
  margin-bottom: 10px;
  }
  
.usage li
  {
  margin-bottom: 10px;
  }
  
.usage img
  {
  float: right;
  }
  
#intro_image
  {
  float: none;
  display: block;
  }
  
#tips_link
  {
  text-decoration: underline;
  }
  
/* Footer menu. */
div.footer
  {
  /* Stretch the footer across the bottom of the screen. */
  height: 40px;
  margin: 0;
  border-top: 1px solid #ddddaa;
  background-color: rgba(204, 255, 204, .6); 
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  /* Use vibrancy on Safari. */
  -webkit-backdrop-filter: blur(10px);

  z-index: 2000;
  
  /* Make the text easy to see. */
  font-size: 1.2em;
  }

/* Put a nice border around the menu table. */
div.footer table.menu
  {
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  
  border-color: rgb(194, 215, 194);
  border-width: 1px;
  border-style: solid;
  border-radius: 15px;
  background-color: rgb(244, 255, 244);
  
  font-weight: bold;
  
  padding: 0;
  }

/* Put vertical borders in the interior of the menu table. */
div.footer table td
  {
  border-width: 0;
  border-left-color: rgb(194, 215, 194);
  border-left-width: 1px;
  border-left-style: solid;
  }

div.footer table td:first-child
  {
  border-left-width: 0;
  }
  
/* Don't let these look like regular links. */
div.footer a,
div.footer a:hover,
div.footer a:active,
div.footer a:visited
  {
  text-decoration: none;

  border: none;

  margin-left: 10px;
  margin-right: 10px;
  }

/* Firefox hacks. */
@-moz-document url-prefix() 
  {
  /* Header. */
  div.header
    {
    /* Firefox doesn't support vibrancy. */
    background-color: rgba(204, 255, 204, .9); 
    }
  
  /* Footer menu. */
  div.footer
    {
    /* Firefox doesn't support vibrancy. */
    background-color: rgba(204, 255, 204, .9); 
    }
  }