/* ---------------------------------------------------------
   CSS - Template

   Add your prefered Styles here
   ---------------------------------------------------------*/


    /* Optional: Import normalisation:
    @import 'normalize.css'; */

    body {
    font-size: 100%;
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    }

    h1 { 
      font-size: 1.5rem;
    }

    p {
      font-size: 0.75rem;
    }

  /* ----------------------------------------------------------
   * Styling the form  
   * ----------------------------------------------------------*/

    label {
      padding: 0 5px 0 0;
      vertical-align: middle;
      float: left;
    }

    input[type=range] {
      width: 68%;
      padding: 0 1%;
    }

    input[type=text] {
      width: 28%;
      float: left;
    }

    input[type=select] {
      width: 28%;
      float: left;
    }

    input[type=button] {
      width: 28%;
    }

  
  /* ----------------------------------------------------------
   * Styling the Layout 
   * ----------------------------------------------------------*/

  
  header {
      padding: 1rem;
      float: left;
      background-color: #ddd;
      width: 100%;
  }

  footer {
      clear: both;
  }
    
  #wrap {
    padding: 2rem;
    width: 1160px;
    margin: 0 auto; 
    /*width: 100%;
    padding: 1.724137931%;*/
  }

  #diagram {
    float: left;
    /*min-width: 636px;*/
    /*width: 54.827586207%;
    z-index: 0;*/
  }

  #response {
      padding: 1rem;
      float: left;
      background-color: #eee;
      min-width: 400px;
  }


/*  #synth {
    float: left;
    min-width: 300px;
    max-width: 1160px;
    width: 100%;
    padding: 3%;
    background-color: #eee;
  }

  #additional {
    float: left;
    clear: top;
    background-color: #eee;
    padding: 1rem;
  }*/