/* https://github.com/theleagueof/junction */
@font-face {
  font-family:'junctionregular';
  src:url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot");
  src:url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot?#iefix") format("embedded-opentype"),
      url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.woff") format("woff"),
      url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.ttf") format("truetype"),
      url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.svg#junctionregular") format("svg");
}

h1,h2,h3,h4,h5,h6{
  font-family:junctionregular, lucida grande,lucida sans console,sans-serif;
  font-weight:normal
}

body { padding-top: 20px; }
span.group { display: inline-block; }

footer.footer {
 clear: both;
 padding-top: 10px;
}

div#image-container {
 text-align: center;
}

div#image-container canvas#image {
 margin: 0px auto;
}

div#colorbar-container {
 display: inline-block;
 width: 70%;
}

div#colorbar-container canvas#colorbar {
 width: 80%;
 height: 2em;
 vertical-align: middle;
}

#toolbar {
  clear:both;
  background:#eee;
  margin-bottom:10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

}
#toolbar .zone {
  margin:6px 0 6px 6px;
  padding:0 12px 0 6px;
  border-right:1px solid #ddd;
  float:left;
}
#toolbar .zone.last {
  border:none;
}
#toolbar .zone p {
  color:#bbb;
  font-weight:bold;
  font-size:10px;
  margin-bottom:0;
}

#image {
  background:#ddd;
  width:800px;
  height:600px;
}

@media (max-width: 700px){
  #image {
    width:100%;
    height:auto;
  }
}

.container {
  padding-left: unset;
}