/* STANDARD	*/
/* line 3, app/assets/stylesheets/drawing.scss */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* line 7, app/assets/stylesheets/drawing.scss */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* line 15, app/assets/stylesheets/drawing.scss */
body, html {
  width: 100%;
  height: 100%;
  font-family: Tahoma, Arial, sans-serif;
  color: #000000;
  background: #ffffff;
}

/* line 23, app/assets/stylesheets/drawing.scss */
h1 {
  color: #ffffff;
  font-size: 3em;
  padding-top: 0;
  padding-bottom: 0.3em;
  text-transform: uppercase;
}

/* line 31, app/assets/stylesheets/drawing.scss */
p, h3 {
  color: #cccccc;
  font-size: 0.75em;
  line-height: 160%;
  font-weight: normal;
}

/* line 38, app/assets/stylesheets/drawing.scss */
h3 {
  width: 100%;
  padding: 2px 0 2px;
  border-bottom: 1px dotted #5b5b5b;
}

/* line 44, app/assets/stylesheets/drawing.scss */
h3:first-child {
  padding-top: 0;
}

/* line 48, app/assets/stylesheets/drawing.scss */
h3:last-child {
  border-bottom: none;
}

/* line 52, app/assets/stylesheets/drawing.scss */
a {
  color: #828988;
}

/* line 56, app/assets/stylesheets/drawing.scss */
a:hover {
  color: #fff;
  text-decoration: none;
}

/* line 61, app/assets/stylesheets/drawing.scss */
h2 {
  padding-top: 10px;
  font-size: 20px;
  color: #ffcc33;
  font-weight: normal;
  letter-spacing: 1px;
}

/* GAME */
/* line 70, app/assets/stylesheets/drawing.scss */
.games-spinner-modal {
  width: 100%;
  height: 100%;
}

/* line 75, app/assets/stylesheets/drawing.scss */
.games-spinner-modal > .spinner {
  background: url(/kleurplaten/tekenen/images/spinner-zappelin.gif);
}

/* line 79, app/assets/stylesheets/drawing.scss */
#game-container,
#wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* line 87, app/assets/stylesheets/drawing.scss */
#gamebackground {
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
}

/* line 94, app/assets/stylesheets/drawing.scss */
#colors {
  position: absolute;
  text-align: center;
  z-index: 100;
  margin-top: 3%;
  top: 0;
  right: 2%;
  bottom: 90%;
  left: 20%;
}

/* line 105, app/assets/stylesheets/drawing.scss */
#colors a {
  width: 6%;
  height: 0;
  padding-bottom: 6%;
  display: inline-block;
  margin-right: 1%;
  border-radius: 50%;
  border: 3px solid #e2e2e2;
  box-shadow: inset 0 0 5px #888;
}

/* line 120, app/assets/stylesheets/drawing.scss */
#colors a.active {
  border: 3px solid #c2c2c2;
}

/* line 124, app/assets/stylesheets/drawing.scss */
#drawing {
  position: absolute;
  z-index: 110;
  margin-top: 10%;
  top: 0;
  right: 2%;
  bottom: 5%;
  left: 20%;
  height: 80%;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: 0 0 5px #888;
  background-color: white;
}

/* line 141, app/assets/stylesheets/drawing.scss */
#mycursor {
  cursor: none;
  width: 181px;
  height: 108px;
  position: absolute;
  background-position: bottom left;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  z-index: 120;
  display: none;
}

/* line 154, app/assets/stylesheets/drawing.scss */
#img-sketch {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
}

/* line 164, app/assets/stylesheets/drawing.scss */
#tools {
  position: absolute;
  width: 20%;
  margin-top: 10%;
  top: 0;
  bottom: 5%;
}

/* line 172, app/assets/stylesheets/drawing.scss */
#potlood-dik,
#potlood-dun {
  width: 65px;
  height: 20px;
  right: 0;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  background-size: cover;
}

@media (min-width: 800px) {
  /* line 172, app/assets/stylesheets/drawing.scss */
  #potlood-dik,
#potlood-dun {
    width: 110px;
    height: 40px;
  }
}

/* line 187, app/assets/stylesheets/drawing.scss */
#potlood-dik {
  top: 0;
  background-position: top left;
}

/* line 192, app/assets/stylesheets/drawing.scss */
#potlood-dun {
  top: 52px;
  background-position: bottom left;
}

/* line 197, app/assets/stylesheets/drawing.scss */
#gum {
  width: 25px;
  height: 20px;
  right: 0;
  position: absolute;
  z-index: 100;
  top: 90px;
  background: url(/kleurplaten/tekenen/images/btn_gum.png) no-repeat;
  display: block;
  cursor: pointer;
  background-size: cover;
}

@media (min-width: 800px) {
  /* line 197, app/assets/stylesheets/drawing.scss */
  #gum {
    width: 50px;
    height: 20px;
  }
}

@media (min-width: 600px) {
  /* line 215, app/assets/stylesheets/drawing.scss */
  #potlood-dik,
#potlood-dun {
    width: 140px;
    height: 54px;
  }
  /* line 221, app/assets/stylesheets/drawing.scss */
  #potlood-dun {
    top: 52px;
  }
  /* line 225, app/assets/stylesheets/drawing.scss */
  #gum {
    width: 67px;
    height: 54px;
    top: 100px;
  }
}

/* line 232, app/assets/stylesheets/drawing.scss */
#printimage {
  position: absolute;
  z-index: 1;
  top: 96px;
  right: 20px;
}

/* line 239, app/assets/stylesheets/drawing.scss */
#print {
  width: 80px;
  height: 80px;
  top: 288px;
  right: 20px;
  position: absolute;
  background: url(/kleurplaten/tekenen/images/btn_print.png) no-repeat;
  cursor: pointer;
}

/* line 249, app/assets/stylesheets/drawing.scss */
#download {
  display: none;
  width: 80px;
  height: 80px;
  right: 20px;
  bottom: 90px;
  position: absolute;
  background: url(/kleurplaten/tekenen/images/btn_download.png) no-repeat;
  cursor: pointer;
}

@media (min-width: 800px) {
  /* line 249, app/assets/stylesheets/drawing.scss */
  #download {
    display: block;
  }
}

/* line 263, app/assets/stylesheets/drawing.scss */
#clear {
  width: 40px;
  height: 40px;
  right: 20px;
  bottom: 10px;
  position: absolute;
  background-image: url(/kleurplaten/tekenen/images/btn_delete.png);
  background-size: cover;
  cursor: pointer;
}

@media (min-width: 600px) {
  /* line 274, app/assets/stylesheets/drawing.scss */
  #clear {
    width: 80px;
    height: 80px;
  }
}

/* OVERLAY */
/* line 282, app/assets/stylesheets/drawing.scss */
#saveimage {
  display: none;
}

/* line 286, app/assets/stylesheets/drawing.scss */
.overlay {
  width: 920px;
  height: 500px;
  background: #ffffff;
  position: absolute;
  z-index: 130;
  opacity: 0;
  transition: opacity .5s;
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
}

/* line 300, app/assets/stylesheets/drawing.scss */
.overlay.animation {
  /*display:none;*/
  opacity: 0.7;
}

/* line 305, app/assets/stylesheets/drawing.scss */
#imageoverlay {
  width: 310px;
  height: 242px;
  left: 230px;
  top: 120px;
  padding: 16px 0 0 39px;
  background: url(/kleurplaten/tekenen/images/bg_saveimage.png) no-repeat;
  z-index: 100001;
  position: absolute;
  display: none;
}

/* line 317, app/assets/stylesheets/drawing.scss */
#closeoverlay {
  width: 100px;
  height: 100px;
  left: 570px;
  top: 40px;
  z-index: 100001;
  position: absolute;
  display: none;
  background: url(/kleurplaten/tekenen/images//btn_close.png) no-repeat;
}

/* TERUG NAAR HET PLEIN */
/* line 329, app/assets/stylesheets/drawing.scss */
.terug {
  display: block;
  width: 80px;
  height: 80px;
  background: url(/kleurplaten/tekenen/images/btn_terug.png) no-repeat;
  bottom: 15px;
  left: 15px;
  text-indent: -9999px;
  position: absolute;
  z-index: 9999;
}

/* line 341, app/assets/stylesheets/drawing.scss */
.terug:hover {
  background-position: bottom center;
}