/* ---------------------------------------------------------
   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%;
    }

    aside {
      padding: 1rem;
      float: left;
      background-color: #eee;
      /*min-width: 200px;*/
    }

    footer {
      clear: both;
    }

    #instructions {
      font-size: 0.75rem;
    }
    
    #wrap {
      padding: 2rem;
      width: 1260px;
      margin: 0 auto; 
    }

    #diagram {
      float: left;
    }

    #response {
      float: left;
    }


    /* Default link styling */
    a:link { color:#0271fb; }
    a:visited { color:#bd02fb; }
    a:hover, a:focus { color:#000; }
    a:active { color:#fb0e02; }