.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;
background: #555;
padding: 0;
margin: 0;
overflow: hidden;
}

div.presentation {
position: absolute;
width: 100%;
display: table-cell;
vertical-align: middle;
height: 100%;
background: inherit;
}

div.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;
}

div.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(#aaa), 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;
}

div.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;
}

div.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;
}

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

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: 'Junction', serif;
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;
font-family: 'LeagueGothic';
padding: 0;
margin: 0;
margin-top: -5px;
font-size: 68px;
letter-spacing: -1px;  
}

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

h2 {
font-family: 'Junction', serif;
color: black;
font-size: 20px;
margin-left: 20px;
margin-top: 50px;
}

h2:first-child {
margin-top: 2px;
}

section {
font-family: 'Junction', serif;
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: 24px;
}

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

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

h2 {
padding: 0;
margin: 15px 0 5px 0;
}

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

pre {
text-align: left;
font-size: 16px;
font-family: Monaco, Consolas, Courier;
padding-bottom: 10px;

padding: 10px 20px;
background: rgba(255, 0, 0, 0.05);
border-radius: 8px;
border: 1px solid rgba(255, 0, 0, 0.2);
}
.two-column {
-webkit-column-count: 2;
-moz-column-count: 2;
}

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

input {
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
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: 8px;
border: 1px solid rgba(0, 0, 0, 0.2);        
}

.css,
.js,
.html,
.key {
font-family: 'Junction', serif;
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;
}

.timeline {
margin-top: .5em;
}

.timeline li {
padding: 5px 0;
}