--- /dev/null
+@media screen {
+ /* Framework */
+ html {
+ height: 100%;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+
+ display: block !important;
+
+ height: 100%;
+ height: 100vh;
+
+ overflow: hidden;
+
+ background: rgb(215, 215, 215);
+ background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -webkit-gradient(
+ radial,
+ 50% 50%,
+ 0,
+ 50% 50%,
+ 500,
+ from(rgb(240, 240, 240)),
+ to(rgb(190, 190, 190))
+ );
+
+ -webkit-font-smoothing: antialiased;
+ }
+
+ .slides {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+
+ position: absolute;
+
+ -webkit-transform: translate3d(0, 0, 0);
+ }
+
+ .slides > article {
+ display: block;
+
+ position: absolute;
+ overflow: hidden;
+
+ width: 900px;
+ height: 700px;
+
+ left: 50%;
+ top: 50%;
+
+ margin-left: -450px;
+ margin-top: -350px;
+
+ padding: 40px 60px;
+
+ box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ background-color: white;
+
+ border: 1px solid rgba(0, 0, 0, 0.3);
+
+ transition: transform 0.3s ease-out;
+ -o-transition: -o-transform 0.3s ease-out;
+ -moz-transition: -moz-transform 0.3s ease-out;
+ -webkit-transition: -webkit-transform 0.3s ease-out;
+ }
+ .slides.layout-widescreen > article {
+ margin-left: -550px;
+ width: 1100px;
+ }
+ .slides.layout-faux-widescreen > article {
+ margin-left: -550px;
+ width: 1100px;
+
+ padding: 40px 160px;
+ }
+
+ .slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
+ .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
+ background-position-x: 0, 840px;
+ }
+
+ /* Clickable/tappable areas */
+
+ .slide-area {
+ z-index: 1000;
+
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 150px;
+ height: 700px;
+
+ left: 50%;
+ top: 50%;
+
+ cursor: pointer;
+ margin-top: -350px;
+
+ tap-highlight-color: transparent;
+ -o-tap-highlight-color: transparent;
+ -moz-tap-highlight-color: transparent;
+ -webkit-tap-highlight-color: transparent;
+ }
+ #prev-slide-area {
+ margin-left: -550px;
+ }
+ #next-slide-area {
+ margin-left: 400px;
+ }
+ .slides.layout-widescreen #prev-slide-area,
+ .slides.layout-faux-widescreen #prev-slide-area {
+ margin-left: -650px;
+ }
+ .slides.layout-widescreen #next-slide-area,
+ .slides.layout-faux-widescreen #next-slide-area {
+ margin-left: 500px;
+ }
+
+ /* Slides */
+
+ .slides > article {
+ display: none;
+ }
+ .slides > article.far-past {
+ display: block;
+ transform: translate(-2040px);
+ -o-transform: translate(-2040px);
+ -moz-transform: translate(-2040px);
+ -webkit-transform: translate3d(-2040px, 0, 0);
+ }
+ .slides > article.past {
+ display: block;
+ transform: translate(-1020px);
+ -o-transform: translate(-1020px);
+ -moz-transform: translate(-1020px);
+ -webkit-transform: translate3d(-1020px, 0, 0);
+ }
+ .slides > article.current {
+ display: block;
+ transform: translate(0);
+ -o-transform: translate(0);
+ -moz-transform: translate(0);
+ -webkit-transform: translate3d(0, 0, 0);
+ }
+ .slides > article.next {
+ display: block;
+ transform: translate(1020px);
+ -o-transform: translate(1020px);
+ -moz-transform: translate(1020px);
+ -webkit-transform: translate3d(1020px, 0, 0);
+ }
+ .slides > article.far-next {
+ display: block;
+ transform: translate(2040px);
+ -o-transform: translate(2040px);
+ -moz-transform: translate(2040px);
+ -webkit-transform: translate3d(2040px, 0, 0);
+ }
+
+ .slides.layout-widescreen > article.far-past,
+ .slides.layout-faux-widescreen > article.far-past {
+ display: block;
+ transform: translate(-2260px);
+ -o-transform: translate(-2260px);
+ -moz-transform: translate(-2260px);
+ -webkit-transform: translate3d(-2260px, 0, 0);
+ }
+ .slides.layout-widescreen > article.past,
+ .slides.layout-faux-widescreen > article.past {
+ display: block;
+ transform: translate(-1130px);
+ -o-transform: translate(-1130px);
+ -moz-transform: translate(-1130px);
+ -webkit-transform: translate3d(-1130px, 0, 0);
+ }
+ .slides.layout-widescreen > article.current,
+ .slides.layout-faux-widescreen > article.current {
+ display: block;
+ transform: translate(0);
+ -o-transform: translate(0);
+ -moz-transform: translate(0);
+ -webkit-transform: translate3d(0, 0, 0);
+ }
+ .slides.layout-widescreen > article.next,
+ .slides.layout-faux-widescreen > article.next {
+ display: block;
+ transform: translate(1130px);
+ -o-transform: translate(1130px);
+ -moz-transform: translate(1130px);
+ -webkit-transform: translate3d(1130px, 0, 0);
+ }
+ .slides.layout-widescreen > article.far-next,
+ .slides.layout-faux-widescreen > article.far-next {
+ display: block;
+ transform: translate(2260px);
+ -o-transform: translate(2260px);
+ -moz-transform: translate(2260px);
+ -webkit-transform: translate3d(2260px, 0, 0);
+ }
+}
+
+@media print {
+ /* Set page layout */
+ @page {
+ size: A4 landscape;
+ }
+
+ body {
+ display: block !important;
+ }
+
+ .slides > article {
+ display: block;
+
+ position: relative;
+
+ page-break-inside: never;
+ page-break-after: always;
+
+ overflow: hidden;
+ }
+
+ h2 {
+ position: static !important;
+ margin-top: 400px !important;
+ margin-bottom: 100px !important;
+ }
+
+ div.code {
+ background: rgb(240, 240, 240);
+ }
+
+ /* Add explicit links */
+ a:link:after,
+ a:visited:after {
+ content: ' (' attr(href) ') ';
+ font-size: 50%;
+ }
+
+ #help {
+ display: none;
+ visibility: hidden;
+ }
+}
+
+/* Styles for slides */
+
+.slides > article {
+ font-family: 'Open Sans', Arial, sans-serif;
+
+ color: black;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+
+ font-size: 26px;
+ line-height: 36px;
+
+ letter-spacing: -1px;
+}
+
+b {
+ font-weight: 600;
+}
+
+a {
+ color: rgb(0, 102, 204);
+ text-decoration: none;
+}
+a:visited {
+ color: rgba(0, 102, 204, 0.75);
+}
+a:hover {
+ color: black;
+}
+
+p {
+ margin: 0;
+ padding: 0;
+
+ margin-top: 20px;
+}
+p:first-child {
+ margin-top: 0;
+}
+
+h1 {
+ font-size: 60px;
+ line-height: 60px;
+
+ padding: 0;
+ margin: 0;
+ margin-top: 200px;
+ margin-bottom: 5px;
+ padding-right: 40px;
+
+ font-weight: 600;
+
+ letter-spacing: -3px;
+
+ color: rgb(51, 51, 51);
+}
+
+h2 {
+ font-size: 45px;
+ line-height: 45px;
+
+ position: absolute;
+ bottom: 150px;
+
+ padding: 0;
+ margin: 0;
+ padding-right: 40px;
+
+ font-weight: 600;
+
+ letter-spacing: -2px;
+
+ color: rgb(51, 51, 51);
+}
+
+h3 {
+ font-size: 30px;
+ line-height: 36px;
+
+ padding: 0;
+ margin: 0;
+ padding-right: 40px;
+
+ font-weight: 600;
+
+ letter-spacing: -1px;
+
+ color: rgb(51, 51, 51);
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+ margin-top: 20px;
+ margin-left: 1.5em;
+}
+li {
+ padding: 0;
+ margin: 0 0 0.5em 0;
+}
+
+div.code {
+ padding: 5px 10px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ overflow: hidden;
+
+ background: rgb(240, 240, 240);
+ border: 1px solid rgb(224, 224, 224);
+}
+pre {
+ margin: 0;
+ padding: 0;
+
+ font-family: 'Droid Sans Mono', 'Courier New', monospace;
+ font-size: 18px;
+ line-height: 24px;
+ letter-spacing: -1px;
+
+ color: black;
+}
+
+pre.numbers span:before {
+ content: attr(num);
+ margin-right: 1em;
+ display: inline-block;
+}
+
+code {
+ font-size: 95%;
+ font-family: 'Droid Sans Mono', 'Courier New', monospace;
+
+ color: black;
+}
+
+article > .image,
+article > .video {
+ text-align: center;
+ margin-top: 40px;
+}
+
+article.background {
+ background-size: contain;
+ background-repeat: round;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 40px;
+}
+th {
+ font-weight: 600;
+ text-align: left;
+}
+td,
+th {
+ border: 1px solid rgb(224, 224, 224);
+ padding: 5px 10px;
+ vertical-align: top;
+}
+
+p.link {
+ margin-left: 20px;
+}
+
+.pagenumber {
+ color: #8c8c8c;
+ font-size: 75%;
+ position: absolute;
+ bottom: 0px;
+ right: 10px;
+}
+
+/* Code */
+div.code {
+ outline: 0px solid transparent;
+}
+div.playground {
+ position: relative;
+}
+div.output {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ right: 40px;
+ bottom: 40px;
+ background: #202020;
+ padding: 5px 10px;
+ z-index: 2;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+}
+div.output pre {
+ margin: 0;
+ padding: 0;
+ background: none;
+ border: none;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+}
+div.output .stdout,
+div.output pre {
+ color: #e6e6e6;
+}
+div.output .stderr,
+div.output .error {
+ color: rgb(255, 200, 200);
+}
+div.output .system,
+div.output .exit {
+ color: rgb(255, 230, 120);
+}
+.buttons {
+ position: relative;
+ float: right;
+ top: -60px;
+ right: 10px;
+}
+div.output .buttons {
+ position: absolute;
+ float: none;
+ top: auto;
+ right: 5px;
+ bottom: 5px;
+}
+
+/* Presenter details */
+.presenter {
+ margin-top: 20px;
+}
+.presenter p,
+.presenter .link {
+ margin: 0;
+ font-size: 28px;
+ line-height: 1.2em;
+}
+
+/* Output resize details */
+.ui-resizable-handle {
+ position: absolute;
+}
+.ui-resizable-n {
+ cursor: n-resize;
+ height: 7px;
+ width: 100%;
+ top: -5px;
+ left: 0;
+}
+.ui-resizable-w {
+ cursor: w-resize;
+ width: 7px;
+ left: -5px;
+ top: 0;
+ height: 100%;
+}
+.ui-resizable-nw {
+ cursor: nw-resize;
+ width: 9px;
+ height: 9px;
+ left: -5px;
+ top: -5px;
+}
+iframe {
+ border: none;
+}
+figcaption {
+ color: #666;
+ text-align: center;
+ font-size: 0.75em;
+}
+
+#help {
+ font-family: 'Open Sans', Arial, sans-serif;
+ text-align: center;
+ color: white;
+ background: #000;
+ opacity: 0.5;
+ position: fixed;
+ bottom: 25px;
+ left: 50px;
+ right: 50px;
+ padding: 20px;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+}