@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700);

@font-face {
   font-weight: normal;
   font-style: normal;
   font-family: 'codropsicons';
   src:url('../fonts/codropsicons/codropsicons.eot');
   src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
       url('../fonts/codropsicons/codropsicons.woff') format('woff'),
       url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
       url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
   /* background: #88ABC2; */
   font-weight: 500;
   font-size: 18px;
   font-family: 'Roboto', Arial, sans-serif;
}

#controls {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 20%;
}

#scaleContainer {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 60px;
   background-color: rgba(255, 255, 255, .5);
}

#scaleBar {
   position: absolute;
   top: 20px;
   right: 20px;
   left: 20px;
   height: 20px;
   border-radius: 10px;
   border: solid 1px gray;
}

#scaleSlider {
   position: absolute;
   left: calc(100% - 18px);
   width: 18px;
   height: 18px;
   border-radius: 10px;
   background-color: red;
   border: solid 1px black;
}

.component {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0px;
   width: 80%;
   background: url(../img/gridme.png) repeat center center;
   border-left: 3px solid #49708A;
   overflow: hidden;
}