body {
  margin: 0px;
  padding: 0px;
  background: #FFF;
  font-family: Helvetica, Tahoma, Arial;
}

body,div {
  margin: 0px;
  padding: 0px;
}

p {
  margin: 4px;
  padding: 0px;
}

.spacey {
  line-height: 1.5em;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 18px;
  margin: 0px;
  padding: 8px 12px;
  color: #000;
  font-weight: bold;
  text-shadow: 2px 2px 1px #ACE;
  border-bottom: 1px solid rgba(128, 160, 195, 0.5);
}

h2 {
  font-size: 24px;
  padding: 8px 12px;
}

h1,h1 a {
  font-size: 64px;
  color: #FFF;
  text-align: center;
  text-shadow: 2px 2px 1px #88A;
  border-bottom: none;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

h1 a:hover {
  text-shadow: 4px 4px 2px #000;
}

.title {
  direction: rtl;
}

div.header {
  height: 0;
  background: #ACE;
  z-index: 10;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 1);
}

div.content {
  background: #E0F0FF;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 1);
  margin-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

div.left {
  width: 100%;
  height: 20%;
  bottom: 0px;
  position: absolute;
  overflow-y: auto;
  
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

div.right {
  width: 100%;
  height: 80%;
  left: 0px;
  position: absolute;
}

/* Convenience Tags */
.padded {
  padding: 4px 8px;
}

#debug {
  padding: 4px;
  border-radius: 12px;
}

#cubeDimension {
  border-radius: 8px;
  text-align: center;
}

#playback_alg {
  font-size: 200%;
}

#playback_alg span {
  margin: 0em 0.1em;
}

#playback_alg span:hover {
  cursor: pointer;
  text-decoration: underline;
}

#typed_alg {
  font-size: 150%;
  width: 100%;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#timer {
  background: #ACE;
  /*padding: 4px;*/
  /*font-family: monospace;*/
  /*font-size: 48px;*/
  /*box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);*/
}

#timer.reset { 
    background: #F80;
}

#timer.running { 
    background: #FF0;
}

#timer.stopped { 
    background: #0F0;
    box-shadow: 0px 0px 64px rgba(0, 255, 0, 1);
}

#twistyContainer {
}

#twistyCanvas {
  /*width: 100%;*/
  /*height: 100%;*/
  cursor: move;
}

#canvas_input {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
  border: none;
  color: none;
  width: 1em;
  font-size: 100px;
  text-transform: uppercase;
  text-align: center;
  z-index: 1000;
  opacity: 0.2;
}

.checkered {
  background-color: #DDD;
}

#canvasPNG {
  text-align: center;
}

#canvasPNG img {
  max-height: 200px;
  max-width: 75%;
  background: rgba(0, 0, 255, 0.05);
  border: 1px solid #00F;
}

#canvasPNG img:hover {
  background: rgba(0, 0, 255, 0.1);
}

.center {
  text-align: center;
}

/* Debugging and Testing */

/* From http://leaverou.me/demos/css3-patterns.html */
.hi {
  background-color: rgba(255, 127, 0, 0.5);
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2)
    25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2)
    25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2)
    25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%,
    transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%,
    transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
  -webkit-background-size: 50px 50px;
  -moz-background-size: 50px 50px;
  background-size: 32px 32px; /* Controls the size of the stripes */
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
}

.err {
  background-color: #F44;
  padding: 4px;
  border-radius: 8px;
}

#twistyContainer {
  background-color: #EAEAEA;
  background-image:
    -webkit-linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD),
    -webkit-linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD);
  background-image:
    -moz-linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD),
    -moz-linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD);
  background-image:
    -o-linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD),
    -o-linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD);
  background-image:
    -ms-linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD),
    -ms-linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD);
  background-image:
    linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD),
    linear-gradient(45deg, #DDD 25%, transparent 25%, transparent
    75%, #DDD 75%, #DDD);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
}