/* All cats have the same dimensions and the same sprite for a background image. */
.cat {
  background: url(http://stash.rachelnabors.com/24ways2012/cat_sprite.png) -800px 0 no-repeat; 
  height: 200px; width: 400px;
}

/* The cats animated with CSS have their running animations set with CSS */
.cat.withCSS {
  animation: run-cycle;
  animation-duration: .75s;
  animation-timing-function: steps(13,end);
  animation-iteration-count: infinite;
}

/* The keyframes for the run cycle.
   This moves the background image sprite around. */
@keyframes run-cycle {  
  0% {background-position: -800px 0; }
  100% {background-position: -800px -2591px; } 
}

/* More information on this spriting technique in my 24 Ways article: 
http://24ways.org/2012/flashless-animation/ 
*/

/* It's all presentational from here on. 
   Nothing to see here! */
#CSSCats, #WAAPICats {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 400px;
}

@media only screen and (min-width: 850px) {

  #CSSCats, #WAAPICats {
    margin: 3em 1em;
  }
}

#CSSCats p, #WAAPICats p {
  text-align: left;  
}

body { 
  background: #e5e6e9;
  color: #071933;
  font-family: 'Lato', sans-serif;
  font-size: 1em; 
  line-height: 1.5em;
  margin: 1em 1em;
  text-align: center;
  width: 100%;
}

@media only screen and (min-width: 850px) { 
  body {
    margin: 4em auto;
    width: 80%;
  }
}
h1 {
  font-family: 'Aleo', sans-serif;
  font-weight: 200;
  font-size: 2em;
  line-height: 1.25em;
}

h2 {
  font-family: 'Aleo', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.25em;  
}

p {
  margin: .5em 0;
}

button {
  background: #2d0d3c;
  border: 0;
  color: #f7e6ff;
  cursor: pointer;
  font-size: .9em;
  padding: .7em 2em;
}

@media only screen and (min-width: 850px) { 
  button {
    padding: 1em 3em;
    font-size: 1em;
  }
}

code { font-family: monospace;}

a:link { color: #1954c0; } a:visited {color: #702096; }
a:hover, a:active, a:focus {
  color: #646d97;
}