@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans Mono'), url('http://themes.googleusercontent.com/font?kit=ns-m2xQYezAtqh7ai59hJViAdY2Sz5g753dOuB6TK0I') format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), url('http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g') format('truetype');
}

.notes { display: none; }
.stroke {
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 1px;
-moz-text-stroke-color: red;
-moz-text-stroke-width: 1px;
}

body {
font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0px; top: 0px;
}

.presentation {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
display: block;
overflow: hidden;
background: #51828b;
}

.slides {
width: 100%;
height: 100%;
/*
overflow: hidden;
*/
left: 0;
top: 0;
position: absolute;
display: block;
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
}

.slide {
display: none;
position: absolute;
overflow: hidden;
width: 900px;
height: 700px;
left: 50%;
top: 50%;
margin-top: -350px;
background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
-webkit-transition: margin 0.25s ease-in-out;
background-color: #eee;
background: -moz-linear-gradient(bottom, #bbd, #fff);
-moz-transition: margin 0.25s ease-in-out;
-o-transition: margin 0.25s ease-in-out;
}

.slide:nth-child(even) {
border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
}

.slide:nth-child(odd) {
border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
}

.slide p {
font-size: 20px;
}

.slide .counter {
color: #999999;
position: absolute;
left: 20px;
bottom: 20px;
display: block;
font-size: 12px;
}

.slide.title > .counter,
.slide.segue > .counter,
.slide.mainTitle > .counter {
display: none;
}

.force-render {
display: block;
margin-top: -10000px;
}

section.intro p {
font-size: 35px;
}

button {
font-size: 20px;
}

.summary {
font-size: 30px;
}

.bullets {
font-size: 40px;
}

.slide.far-past {
display: block;
margin-left: -2400px;
}

.slide.past {
display: block;
margin-left: -1400px;
}

.slide.current {
display: block;
margin-left: -450px;
}

.slide.future {
display: block;
margin-left: 500px;
}

.slide.far-future {
display: block;
margin-left: 1500px;
}

body.three-d div.presentation {
/*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */
}

body.three-d div.slides {
-webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
-moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
-o-transform: translateX(50px) scale(0.8) rotateY(10deg);
}

/* Content */

@font-face { font-family: 'Junction'; src: url(Junction02.otf); }
@font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); }

header {
font-family: 'Droid Sans';
font-weight: normal;
font-size: 50px;
letter-spacing: -.05em;
color: white;
color: black;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
position: absolute;
left: 30px;
top: 25px;
margin: 0;
padding: 0;
}

.intro h1 {
color: black;
padding: 0;
margin: 0;
letter-spacing: -2px;
font-size: 96px;
}

.intro h2 {
color: black;
padding: 0;
margin: 0;
margin-top: -5px;
font-size: 40px;
letter-spacing: -1px;
}

h1 {
display: inline;
font-size: 100%;
font-weight: normal;
padding: 0;
margin: 0;
}

h2 {
font-family: 'Droid Sans';
color: black;
font-size: 20px;
padding: 0;
margin: 15px 0 5px 0;
}

h2:first-child {
margin-top: 0;
}

section {
font-family: 'Droid Sans';
font-size: 50px;
color: #3f3f3f;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
margin-left: 30px;
margin-right: 30px;
margin-top: 100px;
display: block;
overflow: hidden;
}

a {
color: inherit;
display: inline-block;
text-decoration: none;
line-height: 110%;
border-bottom: 2px solid #3f3f3f;
}

#wmap a {
line-height: 100%;
border-bottom: none;
}

section.left {
float: left;
width: 390px;
}

section.small {
font-size: 14px;
}

section.small ul {
margin: 0 0 0 15px;
padding: 0;
}

section.small li {
padding-bottom: 0;
}

iframe {
  border: 0 none;
  height: 800px;
  width: 100%;
}

section.center {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 700px;
width: 900px;
}

pre {
text-align: left;
font-size: 16px;
line-height: 120%;
font-family: 'Droid Sans Mono', Courier;
padding: 10px 20px;
background: rgba(255, 0, 0, 0.05);
border-radius: 8px;
border: 1px solid rgba(255, 0, 0, 0.2);
margin: 0px 30px;
}
.two-column {
-webkit-column-count: 2;
-moz-column-count: 2;
}

pre select {
font-size: 16px;
font-family: Monaco, Courier;
border: 1px solid #c61800;
}

input {
font-size: 16px;
font-family: Helvetica;
padding: 3px;
}
input[type="range"] {
width: 100%;
}

button {
font-family: Verdana;
}

button.large {
font-size: 32px;
}

pre b {
font-weight: normal;
color: #c61800;
text-shadow: #c61800 0 0 1px;
/*letter-spacing: -1px;*/
}
pre em {
font-weight: normal;
font-style: normal;
color: #18a600;
text-shadow: #18a600 0 0 1px;
}
pre input[type="range"] {
height: 6px;
cursor: pointer;
width: auto;
}
example {
font-size: 16px;
display: block;
padding: 10px 20px;
color: black;
background: rgba(255, 255, 255, 0.4);
border-radius: 8px;
margin-bottom: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
video {
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
}

.css,
.js,
.html,
.key {
font-family: 'Droid Sans';
color: black;
display: inline-block;
padding: 6px 10px 3px 10px;
font-size: 25px;
line-height: 30px;
text-shadow: none;
letter-spacing: 0;
bottom: 10px;
position: relative;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: white;
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; 
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; 
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; 
}

.key { font-family: Arial; }

:not(header) > .css,
:not(header) > .js,
:not(header) > .html,
:not(header) > .key {
margin: 0 5px;
bottom: 4px;
}

.css {
background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
background-color: #ff4;
background: -moz-linear-gradient(left top, #ff4, #ffa);        
}
.js {
background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));        
background-color: #4f4;
background: -moz-linear-gradient(left top, #4f4, #afa);
}
.html {
background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
background-color: #e88;
background: -moz-linear-gradient(left top, #e88, #fee);
}

li {
list-style: none;
padding: 10px 0;
}

.summary li::before, .bullets li::before {
content: '· ';
}

info {
display: block;
font-size: 50%;
text-align: center;
}

div#mediaevents p { margin-bottom: 2em; }
div#mediaevents table { border: none; margin: auto; margin-top: 1ex;}
div#mediaevents th {  text-align: right; }
div#mediaevents caption { background-color: #ccc; }
div#mediaevents thead th {  background-color: #ccc; }
div#mediaevents #events td { text-align: right; width: 4ex;}
div#mediaevents #properties td { }
div#mediaevents hr { clear: both; margin-top: 2em;}
div#mediaevents .true { background-color: #95d12e }
div#mediaevents .false { background-color: #ff5a4f }
div#mediaevents #buttons { text-align: center; }