/* 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;
  }
  
dl.faq dd,
dl.healthymac dd
  {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  }
  
button.inactive
  {
  display: none;
  }
  
button.active
  {
  display: inline-block;
  }
  
/* Style the title image nicely. */
.title img
  {
  vertical-align: -.3em;
  margin: 0;
  height: 1.2em;
  width: 1.2em;
  }

/* Make the app name dark green and bold. */
.title span.app
  {
  color: #006644;
  vertical-align: middle;
  font-weight: bold;
  margin-left: 10px;
  }

/* Use the correct size for the app icon. */
.title .app img
  {
  height: 1.2em;
  width: 1.2em;
  vertical-align: middle;
  }

/* Style the download link button. */
a.download_link
  {
  position: relative;
  font-size: .75em;

  border-color: #aaaaaa;
  background-color: rgba(119, 170, 119, .2);
  }

/* Put the text in the middle. */
a.download_link span
  {
  position: relative;
  top: .1em;
  }

/* Position the download image. */
a.download_link img
  {
  margin: 0;
  margin-left: 10px;
  height: 1.2em;
  width: 1.2em;
  float: right;
  }

/* Make the software box act like a button. */
a.download_link:hover
  {
  color: #006644;
  background-color: rgba(119, 170, 119, .5);
  box-shadow: inset 0px 0px 2px 2px rgba(160, 160, 160, 1.0);
  }

a.download_link:active
  {
  color: #006644;
  background-color: rgba(238, 238, 187, .5);
  box-shadow: inset 0px 0px 2px 2px rgba(160, 160, 160, 1.0);
  }

a.button
  {
  /* Create a square box. */
  padding: 5px;
  padding-left: 10px;

  float: right;

  /* Center the text. */
  font-weight: bold;
  text-align: center;

  border-style: dashed;
  border-width: 1px;
  border-radius: 10px;

  -webkit-transition: box-shadow .5s;
  -webkit-transition: background-color .5s;
  }

/* Make the software box act like a button. */
a.button:hover
  {
  border-color: transparent;
  }

a.button:active
  {
  border-color: transparent;
  }

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

/* Slideshow tables tables. */
table.slideshow
  {
  table-layout: fixed;
  width: 100%;
  height: 1px;
  }
  
table.slideshow td.caption
  {
  width: 36em;
  vertical-align: top;
  }
  
td.caption ol
  {
  list-style: none;
  padding-left: 0px;
  }
  
td.caption li
  {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 0.5em;
  }

td.caption li.highlight
  {
  font-weight: bold;
  }
  
td.caption li.highlight::before
  {
  content: "➔ ";
  }

table.slideshow td.slideshow
  {
  height: 100%;
  text-align: center;
  vertical-align: middle;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  }
  
.slide
  {
  display: none;
  position: relative;
  vertical-align: middle;
  }

img.slide
  {
  width: 100%;
  }
  
#start_slide,
#solution_slide
  {
  display: inline;
  }

/* Slide controls. */
.previous_slide,
.next_slide
  {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  text-align: center;
  padding-top: 1px;
  z-index: 5000;
  display: block;
  overflow: hidden;
  font-size: 40px;
  line-height: 37px;
  font-weight: bold;
  color: #ddddaa;
  text-decoration: none;

  border-radius: 20px;
  }

.previous_slide
  {
  transform: rotate(180deg);
  }

.previous_slide:hover,
.next_slide:hover,
.previous_slide:active,
.next_slide:active
  {
  color: white;
  background-color: rgba(200,200,200,1);
  text-decoration: none;
  }

.previous_slide span
  {
  position: relative;
  top: 7px;
  left: 0px;
  }

.next_slide span
  {
  position: relative;
  top: 6px;
  left: 0px;
  }

.previous_slide
  {
  left: 0;
  border-left: 0px;
  }

.next_slide
  {
  right: 0;
  border-right: 0px;
  }

.previous_slide
  {
  display: none;
  }
  
.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;
  }

.dark,
.slide img.dark
  {
  display: none;
  }

@-moz-document url-prefix()
  {
  .previous_slide,
  .next_slide
    {
    line-height: 42px;
    }
  }

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

  .dark,
  .slide img.dark
    {
    display: inherit;
    }

  /* Make the app name dark green and bold. */
  .title span.app
    {
    color: #66bb88;
    }

  /* Make the software box act like a button. */
  a.download_link:hover
    {
    color: #002200;
    background-color: rgba(119, 170, 119, .5);
    box-shadow: inset 0px 0px 2px 2px rgba(160, 160, 160, 1.0);
    }

  a.download_link:active
    {
    color: #002200;
    background-color: rgba(238, 238, 187, .5);
    box-shadow: inset 0px 0px 2px 2px rgba(160, 160, 160, 1.0);
    }

  .previous_slide,
  .next_slide
    {
    color: #66bb88;
    }

  .previous_slide:hover,
  .next_slide:hover,
  .previous_slide:active,
  .next_slide:active
    {
    color: black;
    background-color: rgba(100,100,100,1);
    }
    
  .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 */
    }
  }
