/* line 17, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../compass.app/lib/ruby/compass_0.12/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* line 18, ../sass/remote_draw.scss */
body, html {
  padding: 0;
  margin: 0;
  font-family: '微軟正黑體';
  background-color: #ffe5e5;
  background-image: radial-gradient(circle at 100% 150%, #ddffdd 24%, #ffffff 25%, #ffffff 28%, #ffedcc 29%, #ffedcc 36%, #ffffff 36%, #ffffff 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #ddffdd 24%, #ffffff 25%, #ffffff 28%, #ffedcc 29%, #ffedcc 36%, #ffffff 36%, #ffffff 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, #ffffff 10%, #e5e5ff 11%, #e5e5ff 23%, #ffffff 24%, #ffffff 30%, #ddffdd 31%, #ddffdd 43%, #ffffff 44%, #ffffff 50%, #ffedcc 51%, #ffedcc 63%, #ffffff 64%, #ffffff 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, #ffffff 5%, #e5e5ff 6%, #e5e5ff 15%, #ffffff 16%, #ffffff 20%, #ddffdd 21%, #ddffdd 30%, #ffffff 31%, #ffffff 35%, #ffedcc 36%, #ffedcc 45%, #ffffff 46%, #ffffff 49%, transparent 50%, transparent), radial-gradient(circle at 0 50%, #ffffff 5%, #e5e5ff 6%, #e5e5ff 15%, #ffffff 16%, #ffffff 20%, #ddffdd 21%, #ddffdd 30%, #ffffff 31%, #ffffff 35%, #ffedcc 36%, #ffedcc 45%, #ffffff 46%, #ffffff 49%, transparent 50%, transparent);
  background-size: 100px 50px;
  color: #990000;
}

/* line 35, ../sass/remote_draw.scss */
body.scratching .remote-draw-button, body.scratching .draw-result {
  display: none;
}
/* line 38, ../sass/remote_draw.scss */
body.scratching .guagua-card {
  display: block;
}

/* line 42, ../sass/remote_draw.scss */
.remote-draw-title {
  color: red;
  font-size: 36px;
  text-shadow: 0 -1px 0 black;
  text-align: center;
  margin: 20px 0;
}

/* line 49, ../sass/remote_draw.scss */
.remote-draw-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 3px solid black;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-top: -150px;
  margin-left: -150px;
  padding: 100px;
  width: 300px;
  height: 300px;
  line-height: 300px;
  border-radius: 300px;
  background-color: red;
  text-shadow: 0 -1px 0 black, 0 0 5px pink, 0 0 5px pink, 0 0 5px pink, 0 0 5px pink, 0 0 5px pink;
  color: white;
  background-image: linear-gradient(180deg, rgba(235, 176, 176, 0.8), rgba(165, 42, 42, 0.4) 30%, rgba(165, 42, 42, 0.7));
  padding: 5px;
  font-size: 120px;
  box-shadow: 2px 2px 0 red inset, 4px 4px 0 white inset, -2px -2px 0 red inset, -10px -10px 30px #660000 inset, 20px 20px 50px brown;
}
/* line 74, ../sass/remote_draw.scss */
.remote-draw-button:active {
  background-image: linear-gradient(180deg, rgba(214, 95, 95, 0.5), rgba(165, 42, 42, 0.6) 30%, rgba(165, 42, 42, 0.3));
  box-shadow: -1px -1px 0 red inset, 0 0 3px red;
  background-color: gold;
  margin-top: -130px;
  margin-left: -130px;
}
/* line 81, ../sass/remote_draw.scss */
.remote-draw-button:after {
  content: '請按按鈕';
  font-size: 0.5em;
  color: black;
  display: block;
  text-align: center;
  transform: translateX(-200px);
}

/* line 90, ../sass/remote_draw.scss */
.guagua-card {
  display: none;
  text-align: center;
  line-height: 160px;
  color: black;
  position: relative;
  border: 15px solid #660000;
  box-shadow: 0 0 10px black;
  width: 640px;
  height: 480px;
  margin: 100px auto;
  background-color: white;
  background-image: url(../images/card2.jpg);
}

/* line 110, ../sass/remote_draw.scss */
.guagua-canvas {
  cursor: url(http://i.imgur.com/7ZGwfbu.png) 32 32, auto;
  position: absolute;
  left: 0;
  top: 0;
}

/* line 115, ../sass/remote_draw.scss */
.guagua-img {
  display: none;
}

/* line 118, ../sass/remote_draw.scss */
.drawmode-group {
  font-size: 84px;
}

/* line 121, ../sass/remote_draw.scss */
.drawmode-sn, .drawmode-name {
  font-size: 128px;
}

/* line 124, ../sass/remote_draw.scss */
.drawmode-sn {
  font-family: 'courier new';
  font-weight: bold;
  text-shadow: 1px 1px 0 yellow, -1px 1px 0 yellow, 1px -1px 0 yellow, -1px -1px 0 yellow;
}

@-webkit-keyframes signal {
  /* line 136, ../sass/remote_draw.scss */
  0% {
    opacity: 1;
  }

  /* line 136, ../sass/remote_draw.scss */
  100% {
    opacity: 0;
  }
}

@keyframes signal {
  /* line 136, ../sass/remote_draw.scss */
  0% {
    opacity: 1;
  }

  /* line 136, ../sass/remote_draw.scss */
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes signal2 {
  /* line 139, ../sass/remote_draw.scss */
  0% {
    opacity: 1;
  }

  /* line 139, ../sass/remote_draw.scss */
  100% {
    opacity: 0;
  }
}

@keyframes signal2 {
  /* line 139, ../sass/remote_draw.scss */
  0% {
    opacity: 1;
  }

  /* line 139, ../sass/remote_draw.scss */
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes signal2 {
  /* line 142, ../sass/remote_draw.scss */
  0%, 80% {
    opacity: 1;
  }

  /* line 142, ../sass/remote_draw.scss */
  100% {
    opacity: 0;
  }
}

@keyframes signal2 {
  /* line 142, ../sass/remote_draw.scss */
  0%, 80% {
    opacity: 1;
  }

  /* line 142, ../sass/remote_draw.scss */
  100% {
    opacity: 0;
  }
}

/* line 144, ../sass/remote_draw.scss */
.draw-result {
  opacity: 0;
  font-size: 72px;
  text-align: right;
  color: black;
  position: absolute;
  top: -30px;
  right: 0;
  -webkit-animation: signal 5s 1;
  animation: signal 5s 1;
}
/* line 153, ../sass/remote_draw.scss */
.draw-result.pong {
  -webkit-animation: signal2 5s 1;
  animation: signal2 5s 1;
}
/* line 157, ../sass/remote_draw.scss */
.draw-result:before {
  content: '前次結果';
  font-size: 24px;
  letter-spacing: 20px;
  line-height: 24px;
  color: gray;
}

/* line 164, ../sass/remote_draw.scss */
.ping {
  opacity: 0.2;
  font-size: 16px;
  position: absolute;
  right: 0;
  bottom: 0px;
  padding-left: 100px;
  z-index: 1000;
  color: pink;
  font-size: 40px;
  -webkit-animation: signal 1s 1;
  animation: signal 1s 1;
}
/* line 175, ../sass/remote_draw.scss */
.ping.pong {
  -webkit-animation: signal2 1s 1;
  animation: signal2 1s 1;
}