/* (c) Joshua John Lawrence 2012-2014, all rights reserved. */

/* The whole page. */

body {
  font-family: "Cambria", "Times", serif;
  text-align: justify;
  margin: 2em 15em 2em 20em;
}

@media screen and (max-width: 1000px) {
  body {
    margin: 1em;
  }
}

img {
  border: 0;
}

/* Headings, headers and footers. */

.mainHeading, h2, h3 {
  font-family: "Corbel", "Ariel", sans-serif;
  color: #505050;
}

.mainHeading, .swatch {
  height: 90pt;
}

.mainHeading {
  display: table-cell;
  vertical-align: middle;
  font-size: 32px;
  font-weight: bold;
}

h2, .swatch {
  position: absolute;
  left: 2em;
  margin: 0pt;
}

h2 {
  width: 10em;
}

@media screen and (max-width: 1000px) {
  h2, .swatch {
    position: static;
    margin: 1ex;
  }

  h2 {
    width: 100%;
  }
}

.banner, .footer {
  font-family: "Cambria", "Times", serif;
  font-variant: small-caps;
  font-size: small;
  text-align: center;
}

.banner {
  letter-spacing: 0.5ex;
  word-spacing: 1em;
}

.swatch {
  background: #456bc4;
  width: 146pt;
}

/* Normal content. */

.paragraph {
  margin-top: 30pt;
  margin-bottom: 25pt;
}

blockquote {
  margin: 1em 5em 1em 0em;
}

.reference {
  margin-left: 30%;
}

.icon {
  margin-right: 2em;
}

/* Buttons. */

.button, .centeredButton {
  cursor: pointer;
}

.centeredButton {
  margin: 1em auto;
  display: block;
}

/* The table. */

table {
  text-align: left;
  background: #456bc4;
  padding: 3px;
  border-spacing: 0pt;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
}

th {
  font-weight: normal;
  font-style: italic;
}

tbody th {
  background: #edf0ff;
}

thead th {
  color: white;
}

table td, table th {
  padding: 0ex 1ex;
}

.odd {
  background: #fafafa;
}

.even {
  background: #edf0ff;
}

/* Tooltips. */

.tooltipAnchor {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.inactiveTooltip {
  display: none;
}

.activeTooltip {
  position: absolute;
  background: #edf0ff;
  margin: 2ex 0em 0em 1ex;
  width: 15em;
  padding: 1ex;
}

@media screen and (max-device-width: 800px) {
  .activeTooltip {
    left: 25%;
    width: 50%;
  }
}

/* Things with borders. */

.activeTooltip, .demo, input, .sourceCode {
  border: #505050 solid 3px;
  border-radius: 4px;
}

/* Mandelbrot Set sample. */

.overlay { 
  position: absolute;
}

.demo {
  margin: 1em auto;
  cursor: crosshair;
  width: 640px;
  height: 480px;
}

.center {
  text-align: center;
}

iframe {
  height: 40em;
  width: 100%;
  border: none;
}