@font-face {
  font-family: 'SansitaOneRegular';
  src: url('font/sansitaone-webfont.woff') format('woff'), url('fonts/sansitaone-webfont.svg#SansitaOneRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
html,
body {
  font-family: SansitaOneRegular;
  font-size: 18px;
  color: #fff;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #555555;
  background: -moz-radial-gradient(center, ellipse cover, #555555 0%, #333333 100%);
  /* FF3.6+ */

  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555555), color-stop(100%, #333333));
  /* Chrome,Safari4+ */

  background: -webkit-radial-gradient(center, ellipse cover, #555555 0%, #333333 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-radial-gradient(center, ellipse cover, #555555 0%, #333333 100%);
  /* Opera 12+ */

  background: -ms-radial-gradient(center, ellipse cover, #555555 0%, #333333 100%);
  /* IE10+ */

  background: radial-gradient(ellipse at center, #555555 0%, #333333 100%);
  /* W3C */

}
#board {
  stroke-width: 0;
}
#playzoneGradient stop.begin {
  stop-color: #333;
}
#playzoneGradient stop.end {
  stop-color: #111;
}
#play .title,
#tutorial .title {
  font-size: 34px;
  text-anchor: end;
  fill: #fff;
  stroke-width: 0;
}
#play .scoreLabel,
#tutorial .scoreLabel,
#play .levelLabel,
#tutorial .levelLabel,
#play .livesLabel,
#tutorial .livesLabel {
  text-anchor: end;
  fill: #ccc;
  stroke-width: 0;
}
#play .score,
#tutorial .score,
#play .level,
#tutorial .level,
#play .lives,
#tutorial .lives {
  fill: #eee;
  stroke-width: 0;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
#play .score.changeDown,
#tutorial .score.changeDown,
#play .level.changeDown,
#tutorial .level.changeDown,
#play .lives.changeDown,
#tutorial .lives.changeDown {
  fill: #f00;
}
#play .score.changeUp,
#tutorial .score.changeUp,
#play .level.changeUp,
#tutorial .level.changeUp,
#play .lives.changeUp,
#tutorial .lives.changeUp {
  fill: #0f0;
}
.pauseButton {
  pointer-events: visible;
}
.pauseButton .fullarea {
  fill: #fff;
  opacity: 0;
  pointer-events: visible;
}
.pauseButton .icon {
  stroke-width: 0;
  fill: #fff;
  opacity: 0.7;
}
.ball text {
  font-size: 16px;
  text-anchor: middle;
  fill: #fff;
  stroke-width: 0;
}
#playable {
  pointer-events: none;
}
#playable:hover {
  cursor: pointer;
}
#gameOverBackground,
#pauseBackground {
  opacity: 0.7;
}
#main .title-shadow,
#main .title {
  font-size: 96px;
  text-anchor: middle;
  stroke-width: 0;
}
#main .title-shadow {
  fill: #333;
}
#main .title {
  fill: #fff;
}
#main use text {
  fill: none;
}
#gameOver .title,
#pause .title {
  font-size: 48px;
  text-anchor: middle;
  fill: #fff;
  stroke-width: 0;
}
#gameOver .score {
  font-size: 34px;
  fill: #eee;
  text-anchor: middle;
}
#gameOver .previoushigh {
  font-size: 18px;
  fill: #eee;
  text-anchor: middle;
}
#gameOver .highscores {
  font-size: 18px;
  fill: #eee;
  text-anchor: end;
}
#gameOver .highscores .thisone {
  fill: #3c3;
}
.button {
  pointer-events: visible;
}
.button text {
  font-size: 18px;
  text-anchor: middle;
  fill: #333;
  stroke-width: 0;
}
.button rect {
  fill: #ddd;
  stroke-width: 3;
  stroke: #666;
}
.button:hover {
  cursor: pointer;
}
.button:hover rect {
  fill: #fff;
  stroke-width: 3;
  stroke: #888;
}
.copyright {
  font-size: 10px;
  text-anchor: begin;
  fill: #888;
  stroke-width: 0;
}
.website {
  font-size: 10px;
  text-anchor: middle;
  fill: #888;
  stroke-width: 0;
}
.version {
  font-size: 10px;
  text-anchor: end;
  fill: #888;
  stroke-width: 0;
}
.step rect,
.step path {
  fill: #aaa;
  fill-opacity: 1;
  stroke-width: 0;
  stroke: #aaa;
}
.step text {
  font-weight: normal;
  fill: #333;
}
#installButton {
  display: none;
}