/* Colors
_____________*/
/* Resets & Overrides
____________________*/
* {
  margin: 0;
  padding: 0; }

/* Structural & Associated Elements
____________________*/
body {
  background-color: white;
  font: 62.5% Avenir, Helvetica, sans-serif;
  width: 100%; }

header {
  background-color: #3a4145;
  box-shadow: 0 0 0.3em 0.2em #646464;
  height: 3.4em;
  position: fixed;
  transition: height, 0.2s, ease-out;
  width: 100%;
  z-index: 999; }
  header div#banner {
    margin: 0.5em 0.5em 0.5em 2.0em;
    width: 30.0em; }
    header div#banner img {
      width: 2.7em; }
    header div#banner h1, header div#banner h2, header div#banner h3 {
      color: #fff;
      font-size: 1.8em;
      font-weight: 200;
      margin-left: 0.5em;
      transition: margin, 0.2s, ease; }
  header nav {
    border: none;
    bottom: 0;
    position: absolute;
    right: 10%;
    bottom: 0;
    text-align: center; }
    header nav ul {
      display: inline-table;
      font-weight: 400;
      list-style: none;
      margin-left: 0;
      vertical-align: middle; }
      header nav ul li {
        background-color: #3a4145;
        border-width: 0;
        float: left;
        margin: 0;
        letter-spacing: 0.1em;
        padding: 0.25em 0;
        text-align: center;
        transition: background-color, 0.1s, ease;
        white-space: nowrap; }
        header nav ul li a {
          padding: 0.25em 0.5em;
          font-size: 90%; }
          header nav ul li a:link, header nav ul li a:visited, header nav ul li a:hover, header nav ul li a:active {
            color: white; }
      header nav ul li:hover {
        background-color: #4a5357;
        transition: background-color, 0.1s, ease; }
        header nav ul li:hover > ul {
          display: block;
          margin: 0; }
      header nav ul ul {
        border: none;
        background-color: #6470d1;
        border-bottom-right-radius: 0.5em;
        border-bottom-left-radius: 0.5em;
        /*box-shadow:inset 0 0 0.7em 0.1em #b0b0b0;*/
        display: none;
        margin-left: 0.5em;
        padding: 0;
        position: absolute;
        text-align: center;
        top: 100%; }
        header nav ul ul li {
          background-color: #3a4145;
          border-top: 1px solid #b0b0b0;
          float: none;
          font-size: 60%;
          position: relative;
          text-align: center;
          transition: background-color, 0.2s, ease; }
          header nav ul ul li:hover {
            background-color: #6c797f;
            box-shadow: none;
            transition: background-color, 0.2s, ease; }
        header nav ul ul li:last-child {
          border-bottom: none;
          border-bottom-right-radius: 0.5em;
          border-bottom-left-radius: 0.5em; }
    header nav ul:after {
      margin: 0;
      padding: 0;
      border: none;
      content: "";
      clear: both;
      display: block; }
    @media all and (max-width: 785px) {
      header nav {
        display: none; } }

footer {
  background-color: #3a4145;
  clear: both;
  height: 6.0em;
  width: 100%; }
  footer div {
    border-top: 0.1em solid #717171;
    padding-top: 0.5em;
    width: 100%; }
    footer div p, footer div ul, footer div ol {
      color: #fff;
      font-size: 95%; }
  footer nav {
    font-size: 90%;
    font-weight: 400;
    display: inline;
    letter-spacing: 0.1em;
    text-align: center; }
    footer nav ul {
      margin: 0;
      padding: 0.3em 0; }
      footer nav ul ul {
        display: none; }
      footer nav ul li {
        display: inline;
        padding: 0.4em;
        transition: font-size, 0.2s, ease; }
        footer nav ul li a:link, footer nav ul li a:visited, footer nav ul li a:hover, footer nav ul li a:active {
          color: white; }
  footer div {
    text-align: center; }
  @media all and (max-width: 780px) {
    footer nav ul li {
      font-size: 1.0em;
      transition: font-size, 0.2s, ease; } }

div#header-push {
  height: 3.4em; }

div#content-wrapper {
  padding: 4.0em 4% 5% 2%; }

div#main-content {
  float: left;
  margin-bottom: 6.0em;
  width: 72%; }
  div#main-content h2 {
    padding-bottom: 0.5em; }
  div#main-content p, div#main-content ul, div#main-content ol, div#main-content ul, div#main-content ol {
    line-height: 1.6em; }
    div#main-content p + h2, div#main-content ul + h2, div#main-content ol + h2, div#main-content ul + h2, div#main-content ol + h2 {
      padding-top: 1.5em; }
  div#main-content ul, div#main-content ol {
    margin-left: 7%; }
  @media all and (max-width: 785px) {
    div#main-content {
      width: 100%; } }

div#sidebar {
  float: left;
  font-size: 85%;
  margin-bottom: 3.0em;
  margin-right: 4.0em;
  max-width: 23.0em;
  width: 23%; }
  div#sidebar .sidebar-widget {
    max-width: 23.0em;
    width: 100%; }
    div#sidebar .sidebar-widget h3 {
      background-color: #4a5357;
      border-top-right-radius: 0.4em;
      border-top-left-radius: 0.4em;
      color: #fff;
      font-size: 1.8em;
      font-weight: 400;
      padding: 0.5em 0;
      text-align: center;
      width: 100%; }
    div#sidebar .sidebar-widget nav ul {
      list-style-type: none; }
      div#sidebar .sidebar-widget nav ul li {
        background-color: #98cae0;
        position: relative;
        font-size: 95%;
        font-weight: 600;
        transition: background-color, 0.1s, ease; }
        div#sidebar .sidebar-widget nav ul li:last-of-type {
          border-bottom-right-radius: 0.4em;
          border-bottom-left-radius: 0.4em; }
        div#sidebar .sidebar-widget nav ul li a {
          border-top: 0.1em solid #fff;
          display: block;
          padding: 0.5em 1.0em 0.5em 0.5em; }
          div#sidebar .sidebar-widget nav ul li a:link, div#sidebar .sidebar-widget nav ul li a:visited {
            color: #3a3a3a; }
          div#sidebar .sidebar-widget nav ul li a:hover {
            color: #3a3a3a; }
          div#sidebar .sidebar-widget nav ul li a:active {
            color: #3a3a3a; }
        div#sidebar .sidebar-widget nav ul li ul {
          display: none; }
          div#sidebar .sidebar-widget nav ul li ul li {
            font-size: 56%; }
            div#sidebar .sidebar-widget nav ul li ul li:first-of-type {
              border-top-right-radius: 0.4em; }
            div#sidebar .sidebar-widget nav ul li ul li a {
              padding-left: 1.5em;
              white-space: nowrap; }
        div#sidebar .sidebar-widget nav ul li:hover {
          background-color: #d0e2e9;
          transition: background-color, 0.1s, ease; }
          div#sidebar .sidebar-widget nav ul li:hover ul {
            display: block;
            position: absolute;
            left: 100%;
            top: 0;
            z-index: 999; }
    div#sidebar .sidebar-widget + .sidebar-widget {
      margin-top: 2.0em; }
  @media all and (max-width: 785px) {
    div#sidebar {
      display: none; } }

div#top-section {
  color: #fff;
  background-color: #2e98c4;
  padding: 2.0em 2.0em 1.5em 2.0em;
  transition: height, 0.5s, ease; }
  div#top-section h1, div#top-section h2, div#top-section h3 {
    font-size: 3.8em;
    font-weight: 400;
    transition: font-size, 0.2s, ease; }
  div#top-section p, div#top-section ul, div#top-section ol {
    font-size: 2.4em;
    margin-top: 0.5em;
    letter-spacing: 0.1em;
    transition: font-size, 0.2s, ease; }
  @media all and (max-width: 785px) {
    div#top-section h1, div#top-section h2, div#top-section h3 {
      font-size: 3.2em;
      transition: font-size, 0.2s, ease; }
    div#top-section p, div#top-section ul, div#top-section ol {
      font-size: 2.1em;
      transition: font-size, 0.2s, ease; } }
  @media all and (max-width: 490px) {
    div#top-section h1, div#top-section h2, div#top-section h3 {
      font-size: 2.6em;
      transition: font-size, 0.2s, ease; }
    div#top-section p, div#top-section ul, div#top-section ol {
      font-size: 1.9em;
      transition: font-size, 0.2s, ease; } }

#sidr-button img {
  position: absolute;
  right: 0.7em;
  top: 0.2em;
  width: 2.8em; }
@media all and (min-width: 785px) {
  #sidr-button {
    display: none; } }

div#contact-info {
  font-size: 95%;
  width: 100%;
  margin-bottom: 1.5em;
  transition: font-size, 0.2s, ease; }
  div#contact-info p, div#contact-info ul, div#contact-info ol {
    padding-bottom: 1.5em;
    width: 50%; }
    div#contact-info p + p, div#contact-info ul + p, div#contact-info ol + p, div#contact-info p + ul, div#contact-info ul + ul, div#contact-info ol + ul, div#contact-info p + ol, div#contact-info ul + ol, div#contact-info ol + ol {
      padding: 0 0 0 10%;
      width: 40%; }
  @media all and (max-width: 550px) {
    div#contact-info {
      font-size: 65%;
      transition: font-size, 0.2s, ease; } }

div.pub-block {
  margin-top: 2.5em; }
  div.pub-block h3 {
    color: #434343;
    font-size: 1.8em;
    font-weight: 600;
    padding-bottom: 0.2em; }
  div.pub-block h3 + p, div.pub-block h3 + ul, div.pub-block h3 + ol {
    margin-top: 0;
    padding-top: 0.3em;
    padding-left: 0.7em; }
  div.pub-block + h2 {
    padding-top: 2.0em; }

div.link-block {
  margin-bottom: 2.0em; }
  div.link-block h3 {
    font-size: 1.8em;
    padding: 0;
    margin: 0; }
  div.link-block p, div.link-block ul, div.link-block ol {
    padding-top: 0.3em;
    margin-left: 1.0em;
    margin-top: 0; }

div.category-block {
  margin-bottom: 3.5em; }
  div.category-block h2 {
    font-size: 2.1em; }
  div.category-block div.link-block {
    margin-left: 1.5em; }

/* Fonts
____________________*/
h1, h2, h3 {
  font-size: 3.0em;
  font-weight: 400;
  letter-spacing: 0.1em; }
  h1 + h1, h2 + h1, h3 + h1, h1 + h2, h2 + h2, h3 + h2, h1 + h3, h2 + h3, h3 + h3 {
    font-size: 2.6em;
    padding-bottom: 1.5em; }

h2 {
  font-size: 2.7em; }
  h2 + p, h2 + ul, h2 + ol {
    margin-top: 1.0em; }

h3 {
  font-size: 2.5em; }
  h3 + p, h3 + ul, h3 + ol {
    margin-top: 1.0em; }

p, ul, ol {
  font-size: 1.8em; }
  p.caption, ul.caption, ol.caption {
    font-size: 1.3em; }
  p + p, ul + p, ol + p, p + ul, ul + ul, ol + ul, p + ol, ul + ol, ol + ol {
    padding-top: 1.5em; }
  p + h3, ul + h3, ol + h3 {
    margin-top: 1.5em; }
  p + div.wf-app, ul + div.wf-app, ol + div.wf-app {
    margin-top: 2.0em; }

a {
  text-decoration: none; }
  a:link, a:visited {
    color: #0088be; }
  a:hover {
    color: #ff3333; }
  a:active {
    color: #be5000; }

label, form#ion-graph span, span {
  font-size: 1.6em; }

/* Javascript Applets and so on.
____________________*/
applet {
  margin: 0 auto 2.0em auto;
  text-align: center;
  align: middle; }

form#graph {
  margin-bottom: 2.0em;
  width: 100%; }
  form#graph h1, form#graph h2, form#graph h3 {
    text-align: center; }
  form#graph h3 {
    padding-bottom: 1.0em;
    text-align: center; }
  form#graph div#placeholder {
    width: 100%;
    height: 30.0em; }
  form#graph div#top-vars {
    width: 95%;
    margin: 0 auto 1.0em auto; }
    form#graph div#top-vars input {
      font-size: 1.2em;
      margin: 0 0.7em 0 0.2em; }
  form#graph div#side-vars, form#graph div#bottom-buttons {
    float: left;
    width: 40%; }
  form#graph div#bottom-buttons {
    float: right;
    margin-bottom: 2.0em;
    margin-right: 10.0em;
    width: 100%; }
    form#graph div#bottom-buttons input {
      float: right; }
      form#graph div#bottom-buttons input[type=button] {
        margin: 0 0.5em; }

form#ion-graph {
  width: 50.0em;
  margin: 0 auto; }
  form#ion-graph div {
    margin: 0 auto 0.5em auto;
    width: 70%; }
    form#ion-graph div + div {
      margin-bottom: 2.5em;
      width: 97%; }
  form#ion-graph label, form#ion-graph span {
    padding: 0 0.7em 0 1.0em; }

form.plotting-graph {
  border: 1px solid #000;
  background-color: #f1f1f1;
  margin: 0 auto 2.5em auto;
  padding: 40px 30px 20px 40px; }
  form.plotting-graph canvas#graph {
    float: left;
    float: left;
    margin-left: -20px; }
  form.plotting-graph div#right-entry-fields {
    float: left;
    margin-left: -30px;
    width: 130px; }
    form.plotting-graph div#right-entry-fields input {
      float: right;
      width: 50px; }
    form.plotting-graph div#right-entry-fields input[type=button] {
      width: 130px;
      margin-top: 9px; }
    form.plotting-graph div#right-entry-fields p, form.plotting-graph div#right-entry-fields ul, form.plotting-graph div#right-entry-fields ol {
      padding: 0;
      margin: 0; }

form#small-graph {
  width: 380px;
  height: 270px; }

#container {
  border-radius: 1.0em;
  margin: 0 auto 2.0em auto;
  width: 50.0em; }

canvas#c {
  margin: 0 auto;
  padding: 0;
  width: 512px;
  height: 512px;
  display: block; }

/* Web GL
____________________*/
div#framerate {
  margin: 0 auto 2.0em auto;
  text-align: center; }

div#fframes {
  margin: -1.5em auto 2.0em auto;
  text-align: center; }

div.webgl-inputs {
  margin: 2.0em auto;
  width: 50.0em; }

table {
  margin: 2.0em auto; }
  table td {
    padding: 0.2em 0.5em;
    font-size: 1.6em; }
    table td span {
      font-size: 100%; }

/* Editor
____________________*/
#inputs {
  width: 100%;
  margin-bottom: 2.0em; }
  #inputs .field {
    margin-bottom: 1.0em;
    font-size: 1.3em; }
    #inputs .field span.inputTitle {
      font-size: 1.2em; }
      #inputs .field span.inputTitle + input[type=text].inField {
        width: 80%; }
      #inputs .field span.inputTitle + select.inField {
        width: 80%; }
      #inputs .field span.inputTitle + select.addField {
        width: 70%; }
      #inputs .field span.inputTitle + select.addKill {
        width: 70%; }

#editor {
  clear: both;
  position: relative; }

/* Images and Media
____________________*/
img {
  width: 95%; }
  img.canvas2-img {
    height: 525px;
    margin-top: 50px;
    width: 70px; }
  img.canvas2-small {
    height: 256px;
    width: 40px; }
  img.medium-center {
    display: block;
    width: 70%;
    margin: 2.0em auto;
    text-align: center; }

figure {
  padding: 3.0em 0; }
  figure figcaption {
    font-size: 1.3em; }
  figure.third {
    float: left;
    padding: 3.0em 1.2% 0.5em;
    width: 30%; }
  figure.half {
    float: left;
    padding: 3.0em 1.2% 0.5em;
    width: 47%; }
  figure + p, figure + ul, figure + ol {
    clear: both; }

/* Custom IDs & Classes
____________________*/
.left {
  float: left; }

.right {
  float: right; }

.bold {
  font-weight: 600;
  font-size: 100%; }

.italic {
  font-style: italic;
  font-size: 100%; }

.clear-fix {
  clear: both; }

.reset {
  clear: both;
  padding: 0;
  margin: 0; }

.sub, .super {
  font-size: 80%; }

.sub {
  vertical-align: sub; }

.super {
  vertical-align: super; }

.extra-top {
  padding-top: 2.0em; }

.center {
  display: block;
  margin: 0 auto; }

.wf-instr {
  width: 30.0em;
  margin: 0 auto; }