/*GENERAL*/

*{
  margin:0;
  padding:0;
}

body{
  font-family:Verdana, Geneva, sans-serif;
  color:white;
  background:black;
  font-size:12px;
}


.container{
  width:600px;
  margin:0 auto;
}

/*HEADERSTUFF*/

header{
  border-bottom:1px dashed white;
  padding-bottom:20px;
  margin-bottom:40px;
}

h1{
  margin-top:20px;
  margin-bottom:10px;
  font-weight:normal;
  font-size:2em;
}
h2{
  margin-bottom:20px;
  font-weight:normal;
  font-size:1.5em;
}

.btn{
  display:block;
  float:left;
  margin:0 20px;
  width:156px;
  height:36px;
  line-height:36px;
  background:white;
  border:2px solid black;
  text-decoration:none;
  text-align:center;
  color:black;
}
.btn:hover{
  background:black;
  color:white;
  border-color:white;
}

/*SPRITES*/
.sprite{
  background:url(/prx/000/http/robbeman.github.io/jquery_sprites/images/sparksy.png) top left no-repeat;
  width:128px;
  height:128px;

  /*pointer-events:none;*/
}
#sprite1,#sprite2{
  border:1px solid white;
  margin-bottom:20px;
}
#sprite3{
  position:absolute;
  /*easy way to prevent it from capturing clicks*/
  /*additionally it will not overlap the border of the container, nice!*/
  z-index:-1;
}
#sprite3_container{
  position:relative;
  border:1px solid white;
  width:600px;
  height:600px;
  overflow:visible;

  /*just to prevent a selection from showing up when rapidly clicking*/
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none; 
}



/*PS*/
.thanks{
  float:right;
  background:url(/prx/000/http/robbeman.github.io/jquery_sprites/images/cat.png) right no-repeat black;
  padding:10px 20px 10px 10px;
  line-height:20px;
  font-size:.7em;

  position:fixed;
  bottom:0;
  right:10px;
}