html, body {
    margin:0px;
    padding:0px;
    height:100%;
    color:#333333;
    font:normal 24px/32px "Rosario", helvetica, arial, sans-serif;
    overflow:hidden;
    -webkit-user-select:none;
    -webkit-font-smoothing:antialiased;
    text-shadow:0px 0px 1px rgba(64, 64, 64, 0.25);
}
body.hidden {
    visibility:hidden;
}
a {
    color:#336699;
    text-decoration:none;
}
a:hover {
    background-color:#FAFCF4;
    color:#6699CC;
}
iframe {
    width:90%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    border-width:0px;
}
h1.large {
    font-size:60px;
    line-height:72px;
    text-transform:uppercase;
}
h1, h2, h3 {
    font:normal 48px/56px "Bitter", georgia, serif;
    margin:0px;
}
h2 {
    font-size:36px;
    line-height:42px;
    margin-top:0em;
}
h3 {
    font-size:28px;
    line-height:32px;
    margin-left:5%;
    margin-bottom:0px;
}
p {
    margin:0.75em 10% 0.75em 5%;
}
ul {
    margin:0px 0px 0px 6%;
    padding:20px 60px 20px 20px;
}
li {
    font-size:28px;
    line-height:36px;
    margin-bottom:18px;
}

h1.sideways {
    position:absolute;
    width:550px;
    height:50px;
    line-height:50px;
    color:#666666;
    border-bottom:2px dotted #666666;
    top:300px;
    right:-240px;
    padding-bottom:8px;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
}
pre.code {
    margin:0.5em 5% 2em 5%;
    padding:9px;
    background-color:#202020;
    color:#FFFFFF;
    font-size:18px;
    line-height:24px;
    overflow:auto;
    -webkit-box-shadow: inset 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(32,32,32,0.5);
    box-shadow: inset 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(32,32,32,0.5);
}
pre.code em {
    color:#60B0F0;
}
pre.code .yellow {
    color:#E0E080;
}
.left {
    float:left;
    width:35%;
}
.right {
    float:right;
    width:35%;
}

.centered {
    position:absolute;
    left:5%;
    top:50%;
    text-align:center;
    width:90%;
    margin-top:-30px;
}

.cover {
    background-color:#E06030;
}
.cover h1, .cover p {
    color:#FFFFFF;
    text-align:center;
}
.cover h1 {
    position:absolute;
    left:5%;
    top:50%;
    width:90%;
    margin-top:-28px;
    text-align:center;
}

.cover #instructions {
    position:absolute;
    left:0%;
    top:75%;
    width:90%;
    text-align:center;
}

.cover .pageNumber,
.theme .pageNumber {
    display:none;
}

.theme {
    background-color:#3070A0;
    color:#FFFFFF;
}

.theme a {
    color:#FFFFFF;
}

.theme a:hover {
    background-color:#206080;
}

#container {
    -webkit-transition:-webkit-transform 360ms ease-in;
    -moz-transition:-moz-transform 360ms ease-in;
    -ms-transition:-ms-transform 360ms ease-in;
    -o-transition:-o-transform 360ms ease-in;
    height:100%;
}
.control {
    position:fixed;
    background-color:rgba(128,128,128,0.5);
    opacity:0;
    z-index:10;
    -webkit-transition:opacity 320ms;
    -moz-transition:opacity 320ms;
    -webkit-box-shadow:1px 1px 3px rgba(32,32,32,0.5);
    box-shadow:1px 1px 3px rgba(32,32,32,0.5);
}

.control:active {
    opacity:1;
}
#prev, #next {
    width:60px;
    top:0px;
    bottom:0px;
}
#prev {
    left:0px;
    border-radius:0px 10px 10px 0px;
    cursor:w-resize;
}
#next {
    right:0px;
    border-radius:10px 0px 0px 10px;
    cursor:e-resize;
}
#up, #down {
    left:0px;
    right:0px;
    height:60px;
}
#up {
    top:0px;
    border-radius:0px 0px 10px 10px;
    cursor:n-resize;
}
#down {
    bottom:0px;
    border-radius:10px 10px 0px 0px;
    cursor:s-resize;
}
.slide {
    position:relative;
    min-height:100%;
    float:left;
}
.page {
    position:relative;
    width:100%;
    padding:40px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.slideNumber {
    display:none;
    width:65px;
    height:25px;
    text-align:center;
    position:absolute;
    border-radius:0px 0px 10px 10px;
    right:20px;
    top:0px;
    background-color:#FAFAFF;
    font-size:20px;
}
.pageNumber {
    color:#202020;
    position:absolute;
    right:50px;
    bottom:20px;
    font-size:24px;
}
.card {
    width:150px;
    height:200px;
    position:absolute;
    left:50%;
    margin:0px 0px 0px -75px;
    background-color:rgba(240,240,240,0.75);
    border:1px outset #C0C0C0;
    box-shadow:inset 0px 0px 5px rgba(64,64,64,0.5);
    -webkit-border-radius:10px;
    border-radius:10px;
    font-size:72px;
    text-align:center;
    line-height:200px;
    text-shadow:1px 1px 3px rgba(32,32,32,0.5);
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

#basicElement {
    display:block;
    width:200px;
    height:200px;
    margin-left:5%;
    background-color:#C02020;
    border:2px solid #800000;
    -webkit-transition:-webkit-transform 1200ms ease-out 600ms;
    -moz-transition:-moz-transform 1200ms ease-out 600ms;
    -o-transition:-o-transform 1200ms ease-out 600ms;
    -ms-transition:-ms-transform 1200ms ease-out 600ms;
    transition:transform 1200ms ease-out 600ms;
}

#basicElement.changedState {
    -webkit-transform:rotate(45deg) translate3d(0px, 0px, 0px);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg) translate3d(0px, 0px, 0px);
}


@-webkit-keyframes moving {
  0% {
    -webkit-transform:rotate(0deg) translate3d(0px, 0px, 0px);
  }      

  50% {
    -webkit-transform:rotate(30deg) translate3d(250px, -200px, 0px);
  }      

  100% {
    -webkit-transform:rotate(0deg) translate3d(0px, 0px, 0px);
  }
}

@-moz-keyframes moving {
  0% {
    -moz-transform:rotate(0deg) translate3d(0px, 0px, 0px);
  }      

  50% {
    -moz-transform:rotate(30deg) translate3d(250px, -200px, 0px);
  }      

  100% {
    -moz-transform:rotate(0deg) translate3d(0px, 0px, 0px);
  }
}

@-ms-keyframes moving {
  0% {
    -ms-transform:rotate(0deg) translate3d(0px, 0px, 0px);
  }      

  50% {
    -ms-transform:rotate(30deg) translate3d(250px, -200px, 0px);
  }      

  100% {
    -ms-transform:rotate(0deg) translate3d(0px, 0px, 0px);
  }
}

@keyframes moving {
  0% {
    transform:rotate(0deg) translate3d(0px, 0px, 0px);
  }      

  50% {
    transform:rotate(30deg) translate3d(250px, -200px, 0px);
  }      

  100% {
    transform:rotate(0deg) translate3d(0px, 0px, 0px);
  }
}

#keepMoving {
  display:block;
  margin-left:5%;
  width:200px;
  height:200px;
  background-color:#20C020;
  -webkit-animation: moving 2000ms infinite both ease-in-out;
  -moz-animation: moving 2000ms infinite both ease-in-out;
  -ms-animation: moving 2000ms infinite both ease-in-out;
  animation: moving 2000ms infinite both ease-in-out;
}