/**
  MIX-INS
  ========
**/
.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

.centered {
  text-align: center; }

.inline {
  display: inline-block; }

.pad-block {
  border: 1px solid #f0f0f0;
  background-color: white; }
  .pad-block > div {
    margin: 0.2em;
    background-color: #ffffe7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffe7), to(white));
    background-image: -webkit-linear-gradient(top, #ffffe7, white);
    background-image: -moz-linear-gradient(top, #ffffe7, white);
    background-image: -ms-linear-gradient(top, #ffffe7, white);
    background-image: -o-linear-gradient(top, #ffffe7, white);
    background-image: linear-gradient(top, #ffffe7, white);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffe7', EndColorStr='white'); }

@font-face {
  font-family: 'ITCOfficinaSerifStdBook';
  src: url("officinaserifstd-book-webfont.eot");
  src: url("officinaserifstd-book-webfont.eot?#iefix") format("embedded-opentype"), url("officinaserifstd-book-webfont.woff") format("woff"), url("officinaserifstd-book-webfont.ttf") format("truetype"), url("officinaserifstd-book-webfont.svg#ITCOfficinaSerifStdBook") format("svg");
  font-weight: normal;
  font-style: normal; }

body {
  font-family: "ITCOfficinaSerifStdBook",sans-serif;
  line-height: 1.3em;
  font-size: .8em;
  background: #0d7fc7; }

.container {
  width: 900px;
  background: white;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -o-border-radius: 15px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 3px solid #e7e7e7;
  padding: 1em; }

.column {
  width: 50%;
  float: left; }

.question {
  color: black;
  padding: .5em 0;
  font-size: 1.2em; }
  .question input {
    margin: .2em 0.1em;
    padding: 0.1em;
    border: none;
    border-style: none;
    border-bottom: 2px dashed black;
    font-size: 1.3em;
    width: 10em; }
    .question input:focus {
      outline: none;
      border-bottom-color: #306232;
      border-bottom-style: solid; }
  .question .prompt {
    display: inline-block;
    margin-left: .5em; }
  .question .sub-prompt {
    color: gray; }
  .question .number {
    font-size: .8em;
    font-weight: bold;
    display: block;
    position: relative;
    z-index: 2;
    float: left;
    background: white;
    padding: .5em;
    border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    -o-border-radius: 2em;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: #38733b;
    height: 1.5em;
    width: 1.5em;
    line-height: 1.8em;
    text-align: center;
    border: 1px solid #b6dbb8;
    text-shadow: 0px 1px 0px solid white;
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(1, 0.2, 0.2, 1);
    /* Saf3.2+, Chrome */
    -moz-transition: all 0.2s cubic-bezier(1, 0.2, 0.2, 1);
    /* FF4+ */
    -ms-transition: all 0.2s cubic-bezier(1, 0.2, 0.2, 1);
    /* IE10? */
    -o-transition: all 0.2s cubic-bezier(1, 0.2, 0.2, 1);
    /* Opera 10.5+ */
    transition: all 0.2s cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-transform: rotate(0deg) rotateY(0deg);
    -moz-transform: rotate(0deg) rotateY(0deg);
    -ms-transform: rotate(0deg) rotateY(0deg);
    -o-transform: rotate(0deg) rotateY(0deg);
    transform: rotate(0deg) rotateY(0deg);
    cursor: pointer; }
    .question .number .front, .question .number .back {
      position: absolute;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: -webkit-transform 0.2s cubic-bezier(1, 0.2, 0.2, 1);
      /* Saf3.2+, Chrome */
      -moz-transition: all 0.2s cubic-bezier(1, 0.2, 0.2, 1);
      /* FF4+ */
      -ms-transition: all 0.2s cubic-bezier(1, 0.2, 0.2, 1);
      /* IE10? */
      -o-transition: all 0.2s cubic-bezier(1, 0.2, 0.2, 1);
      /* Opera 10.5+ */
      transition: all 0.2s cubic-bezier(1, 0.2, 0.2, 1); }
    .question .number .front {
      z-index: 2; }
  .question.focused .number {
    -webkit-transform: scale(1.4) rotate(-20deg) rotateY(0deg);
    -moz-transform: scale(1.4) rotate(-20deg) rotateY(0deg);
    -ms-transform: scale(1.4) rotate(-20deg) rotateY(0deg);
    -o-transform: scale(1.4) rotate(-20deg) rotateY(0deg);
    transform: scale(1.4) rotate(-20deg) rotateY(0deg); }
  .question.answered .number {
    background-color: #418444;
    color: white; }
  .question.answered input {
    border-bottom: none; }

button {
  background: url(../images/go_button.png) no-repeat;
  width: 150px;
  height: 63px;
  border: none;
  margin: 1em;
  cursor: pointer; }
  button.go {
    float: right;
    background-position: top left; }
  button.back {
    background-position: -150px 0; }

.mad-lib-back {
  display: none;
  font-size: 1.7em;
  line-height: 1.5em; }
  .mad-lib-back .word.blank {
    font-size: .8em;
    width: 100px;
    display: inline-block;
    padding: 0 .5em;
    border-bottom: 2px dashed black;
    text-align: center;
    color: #51a756; }
  .mad-lib-back .word.answered {
    color: #0d7fc7; }

.input.submit {
  clear: both; }