.wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content:center;
  /* flex-direction: row-reverse; */
}
.border {
  margin:2px;
  border:1px solid  #EEDC7D;
  border-radius:3px;
  padding:4px;
}
.but {
  margin:1px;
  /*padding:1px;*/
}
.borderSmall {
  margin:2px;
  border:1px solid  #EEDC7D;
  border-radius:3px;
  padding:0px;
}
button.tlButT, button.tlButN {
  border:1px solid  #EEDC7D;
  border-radius:5px;
  background-color:#ffffaa;
}
canvas.tlButT{
    margin:1px;
  /*padding:1px;*/
}
canvas.tlButN {
    margin:1px;
  /*padding:1px;*/
}
header, footer {
  -webkit-flex: 1 100%;
  flex: 1 100%;
  /*text-align:center;*/
} 
header {
  text-align:center;
}
nav, aside, article {
  -webkit-flex: 1 100%;
  flex: 1 100%;
}

#second {
  overflow:auto;
}
#second code {
  background-color:white;
}
body, #thecanvas{background-color:white;}
header,article {background-color:#ffffdd;} 
footer, aside, nav{
  background-color:#ffffee;
  margin:4px;
}
#article{
  position:relative; 
}
#first{
  height:94%;
  width:100%;
}
#thecanvas {
  width:90%;
  min-height:75%;
}
#range{
  position:relative;
  width:25%;
  bottom:4px;
}
/* Medium screens */
@media all and (min-width: 200px) {
  /* We tell both sidebars to share a row */
  aside { 
    -webkit-flex: 0.06 auto; 
    flex: 0.06 auto; 
    }
  nav { 
    -webkit-flex: 0.2 auto; 
    flex: 0.2 auto; 
  }
}

/* Large screens */
@media all and (min-width: 400px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  article { 
    -webkit-flex: 2 auto;
    flex: 2 auto;
  }
  nav {   
    -webkit-order:1;
    order: 1;    
  }
  article  { 
    -webkit-order:3;
    order: 3; 
  }
  aside { 
    -webkit-order:2;
    order: 2; 
  }
}

li {   
  padding-left: 0px; 
}
ul {
  list-style-position: inside;
  padding-left: 0px; 
  padding: 0px;
  margin: 5px;
}