#header {
  background-color: #3a878b;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a878b), color-stop(100%, #8cbbb8));
  background-image: -webkit-linear-gradient(top, #3a878b, #8cbbb8);
  background-image: -moz-linear-gradient(top, #3a878b, #8cbbb8);
  background-image: -ms-linear-gradient(top, #3a878b, #8cbbb8);
  background-image: -o-linear-gradient(top, #3a878b, #8cbbb8);
  background-image: linear-gradient(top, #3a878b, #8cbbb8);
  color: white;
  padding: 0.5em 1em;
  position: relative;
  font-size: 1em;
  font-weight: 600; }
  #header h1 {
    margin-right: 11em; }
    #header h1 a {
      color: white;
      text-decoration: none; }
  #header a#logo {
    display: block;
    height: 3.25em;
    margin: -1.625em 0 0;
    position: absolute;
    right: 2.25em;
    top: 50%;
    width: 10.5em; }
    #header a#logo img {
      border: none;
      height: 3.25em;
      width: 10.5em; }

img#fullscreen {
  cursor: pointer;
  height: 1.2em;
  width: 1.2em;
  margin: 0;
  position: absolute;
  right: 0.5em;
  top: 0.5em; }

#bottom.interactive-bottom {
  margin-top: 0.5em; }

select.component {
  font-size: 1em;
  margin-top: 0.5em; }

option.component {
  font-size: 1em; }

button.component {
  padding: 0.2em 0.4em;
  font-size: 1.1em; }

input[type=checkbox] {
  -webkit-transform: scale(1, 1); }

#intro {
  padding: 0.5em 1em 0; }

#description {
  padding: 1em;
  width: 100em; }

.description {
  padding: 1em;
  width: 80%; }
  .description ul {
    margin: 0.5em 0em 0.5em 1em; }
    .description ul li {
      line-height: 1em;
      padding: 0.2em 0.2em 0.2em 0em; }
  .description .key-command {
    font-weight: 600; }

.chart {
  background-color: #f9eec1;
  width: 960px;
  height: 500px;
  border: solid 1px #f4b626;
  margin: 1em 0 0 1em;
  padding: 0;
  position: relative;
  border-radius: 0.5em; }

a {
  color: #3a878b; }
  a:hover {
    color: #da5936; }

#content.a {
  color: #336644; }
  #content.a:hover {
    color: #88eecc; }

ul {
  margin: 1em 0em 1em 0em;
  padding: 0em 0em 0em 0em; }
  ul li {
    margin: 0.3em 0.2em 0.3em 0.2em;
    padding: 0em 0em 0em 0em; }

#save-button {
  border: 1px solid #076fe4;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 0 #8ebcf1;
  color: white;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  background-color: #4294f0;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4294f0), color-stop(100%, #0776f3));
  background-image: -webkit-linear-gradient(top, #4294f0, #0776f3);
  background-image: -moz-linear-gradient(top, #4294f0, #0776f3);
  background-image: -ms-linear-gradient(top, #4294f0, #0776f3);
  background-image: -o-linear-gradient(top, #4294f0, #0776f3);
  background-image: linear-gradient(top, #4294f0, #0776f3);
  padding: 7px 18px;
  text-decoration: none;
  text-shadow: 0 1px 0 #0065d6;
  -webkit-background-clip: padding-box; }
  #save-button:hover:not(:disabled) {
    box-shadow: inset 0 1px 0 0 #60a2ec;
    cursor: pointer;
    background-color: #2f87ea;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2f87ea), color-stop(100%, #086fe3));
    background-image: -webkit-linear-gradient(top, #2f87ea, #086fe3);
    background-image: -moz-linear-gradient(top, #2f87ea, #086fe3);
    background-image: -ms-linear-gradient(top, #2f87ea, #086fe3);
    background-image: -o-linear-gradient(top, #2f87ea, #086fe3);
    background-image: linear-gradient(top, #2f87ea, #086fe3); }
  #save-button:active:not(:disabled) {
    border: 1px solid #076fe4;
    box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee; }
  #save-button:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

#flash {
  margin: 0;
  padding: 1em;
  font-style: italic;
  display: inline-block; }
  #flash p {
    margin: 0;
    padding: 0.3em; }

.error-message p {
  color: firebrick;
  background-color: yellow;
  font-size: 1.5em; }
.error-message.fade-out p {
  background-color: transparent; }

.informational-message p {
  background-color: yellow; }
.informational-message.fade-out p {
  background-color: transparent; }

.fade-out p {
  -webkit-transition: background-color, 0.75s, linear;
  -moz-transition: background-color, 0.75s, linear;
  -ms-transition: background-color, 0.75s, linear;
  -o-transition: background-color, 0.75s, linear;
  transition: background-color, 0.75s, linear; }

#example-list ul {
  margin: 1em 1em 1em 1em;
  padding: 0em 0em 0em 1em; }
  #example-list ul li {
    margin: 0.5em 0.2em 0.5em 0.2em;
    padding: 0em 0em 0em 0em; }
#example-list ol {
  margin: 1em 1em 1em 1em;
  padding: 0em 0em 0em 1em; }
  #example-list ol li {
    margin: 0.5em 0.2em 0.5em 0.2em;
    padding: 0em 0em 0em 0em; }