/*
Google HTML5 slides template
Authors: Luke Mahé (code)
Marcin Wichary (code and design)
Dominic Mazzoni (browser compatibility)
Charles Chen (ChromeVox support)
URL: http://code.google.com/p/html5slides/
*/
/* Framework */
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: block !important;
height: 100%;
min-height: 740px;
overflow-x: hidden;
overflow-y: auto;
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 section > 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;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .3);
transition: transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-webkit-transition: -webkit-transform .3s ease-out;
}
.slides.layout-widescreen section > article {
margin-left: -550px;
width: 1100px;
}
.slides.layout-faux-widescreen section > article {
margin-left: -550px;
width: 1100px;
padding: 40px 160px;
}
.slides.template-default section > article:not(.nobackground):not(.biglogo) {
background: url(images/google-logo-small.png) 710px 625px no-repeat;
background-color: white;
}
.slides.layout-widescreen section > 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 section > article{
display: none;
}
.slides section > article.far-past {
display: block;
transform: translate(-2040px);
-o-transform: translate(-2040px);
-moz-transform: translate(-2040px);
-webkit-transform: translate3d(-2040px, 0, 0);
}
.slides section> article.past {
display: block;
transform: translate(-1020px);
-o-transform: translate(-1020px);
-moz-transform: translate(-1020px);
-webkit-transform: translate3d(-1020px, 0, 0);
}
.slides section > article.current {
display: block;
transform: translate(0);
-o-transform: translate(0);
-moz-transform: translate(0);
-webkit-transform: translate3d(0, 0, 0);
}
.slides section > article.next {
display: block;
transform: translate(1020px);
-o-transform: translate(1020px);
-moz-transform: translate(1020px);
-webkit-transform: translate3d(1020px, 0, 0);
}
.slides section > 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 section > article.far-past,
.slides.layout-faux-widescreen section > 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 section > article.past,
.slides.layout-faux-widescreen section > article.past {
display: block;
transform: translate(-1130px);
-o-transform: translate(-1130px);
-moz-transform: translate(-1130px);
-webkit-transform: translate3d(-1130px, 0, 0);
}
.slides.layout-widescreen section > article.current,
.slides.layout-faux-widescreen section > article.current {
display: block;
transform: translate(0);
-o-transform: translate(0);
-moz-transform: translate(0);
-webkit-transform: translate3d(0, 0, 0);
}
.slides.layout-widescreen section > article.next,
.slides.layout-faux-widescreen section > article.next {
display: block;
transform: translate(1130px);
-o-transform: translate(1130px);
-moz-transform: translate(1130px);
-webkit-transform: translate3d(1130px, 0, 0);
}
.slides.layout-widescreen section > article.far-next,
.slides.layout-faux-widescreen section > article.far-next {
display: block;
transform: translate(2260px);
-o-transform: translate(2260px);
-moz-transform: translate(2260px);
-webkit-transform: translate3d(2260px, 0, 0);
}
/* Styles for slides */
.slides section > article {
font-family: 'Open Sans', Arial, sans-serif;
color: rgb(102, 102, 102);
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
font-size: 30px;
line-height: 36px;
letter-spacing: -1px;
}
b {
font-weight: 600;
}
.blue {
color: rgb(0, 102, 204);
}
.yellow {
color: rgb(255, 211, 25);
}
.green {
color: rgb(0, 138, 53);
}
.red {
color: rgb(255, 0, 0);
}
.black {
color: black;
}
.white {
color: white;
}
a {
color: rgb(0, 102, 204);
}
a:visited {
color: rgba(0, 102, 204, .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;
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);
}
article.fill h3 {
background: rgba(255, 255, 255, .75);
padding-top: .2em;
padding-bottom: .3em;
margin-top: -.2em;
margin-left: -60px;
padding-left: 60px;
margin-right: -60px;
padding-right: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
margin-top: 40px;
margin-left: .75em;
}
ul:first-child {
margin-top: 0;
}
ul ul {
margin-top: .5em;
}
li {
padding: 0;
margin: 0;
margin-bottom: .5em;
}
li::before {
content: '·';
width: .75em;
margin-left: -.75em;
position: absolute;
}
ol li::before {
content: '';
}
nav.toc ol li.done{
opacity: 0.80;
}
nav.toc ol li.current{
font-weight:bold;
}
nav.toc ol li.future{
opacity: 0.95;
}
pre {
font-family: 'Droid Sans Mono', 'Courier New', monospace;
font-size: 20px;
line-height: 28px;
padding: 5px 10px;
letter-spacing: -1px;
margin-top: 40px;
margin-bottom: 40px;
color: black;
background: rgb(240, 240, 240);
border: 1px solid rgb(224, 224, 224);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);
overflow: hidden;
}
code {
font-size: 95%;
font-family: 'Droid Sans Mono', 'Courier New', monospace;
color: black;
}
iframe {
width: 100%;
height: 620px;
/*
background: white;
border: 1px solid rgb(192, 192, 192);
margin: -1px;
*/
/*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
}
h3 + iframe {
margin-top: 40px;
height: 540px;
}
article.fill iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 0;
margin: 0;
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: -1;
}
article.fill img:not(.nofill) {
position: absolute;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: -1;
}
img.centered {
margin: 0 auto;
display: block;
}
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;
}
.source {
position: absolute;
left: 60px;
top: 644px;
padding-right: 175px;
font-size: 15px;
letter-spacing: 0;
line-height: 18px;
}
q {
display: block;
font-size: 60px;
line-height: 72px;
margin-left: 20px;
margin-top: 100px;
margin-right: 150px;
}
q::before {
content: '„';
position: absolute;
display: inline-block;
margin-left: -2.1em;
width: 2em;
text-align: right;
font-size: 90px;
color: rgb(192, 192, 192);
}
q::after {
content: '“';
position: absolute;
margin-left: .1em;
font-size: 90px;
color: rgb(192, 192, 192);
}
div.author {
text-align: right;
font-size: 40px;
margin-top: 20px;
margin-right: 150px;
}
div.author::before {
content: '—';
}
/* Size variants */
article.smaller p,
article.smaller ul, article.smaller dl {
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
}
article.smaller table {
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
}
article.smaller pre {
font-size: 15px;
line-height: 20px;
letter-spacing: 0;
}
article.smaller q {
font-size: 40px;
line-height: 48px;
}
article.smaller q::before,
article.smaller q::after {
font-size: 60px;
}
/* Builds */
.build > * {
transition: opacity 0.5s ease-in-out 0.2s;
-o-transition: opacity 0.5s ease-in-out 0.2s;
-moz-transition: opacity 0.5s ease-in-out 0.2s;
-webkit-transition: opacity 0.5s ease-in-out 0.2s;
}
.to-build {
opacity: 0;
}
/* Pretty print */
.prettyprint .str, /* string content */
.prettyprint .atv { /* a markup attribute value */
color: rgb(0, 138, 53);
}
.prettyprint .kwd, /* a keyword */
.prettyprint .tag { /* a markup tag name */
color: rgb(0, 102, 204);
}
.prettyprint .com { /* a comment */
color: rgb(127, 127, 127);
font-style: italic;
}
.prettyprint .lit { /* a literal value */
color: rgb(127, 0, 0);
}
.prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */
.prettyprint .opn,
.prettyprint .clo {
color: rgb(127, 127, 127);
}
.prettyprint .typ, /* a type name */
.prettyprint .atn, /* a markup attribute name */
.prettyprint .dec,
.prettyprint .var { /* a declaration; a variable name */
color: rgb(127, 0, 127);
}
.slide-nr {
display:none;
}
aside{
display:none;
}
.presenter aside{
z-index:10;
position: absolute;
top:2%;
left:35%;
display:block;
width:60%;
height:96%;
padding:5%;
background: rgba(240, 240, 240, .90);
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;
box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
border: 1px solid rgba(0, 0, 0, .3);
}
.presenter .build > * {
transition: opacity 0.5s ease-in-out 0.2s;
-o-transition: opacity 0.5s ease-in-out 0.2s;
-moz-transition: opacity 0.5s ease-in-out 0.2s;
-webkit-transition: opacity 0.5s ease-in-out 0.2s;
}
.presenter .to-build {
opacity: 100;
}
.no-trans.slides section > article{
transition: transform;
-o-transition: -o-transform;
-moz-transition: -moz-transform;
-webkit-transition: -webkit-transform;
}
.blackfade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .90;
z-index: 9999;
}
.whitefade {
display: none;
background: #FFF;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .95;
z-index: 9999;
}
section header{
display: none;
}
.slides.template-uulm-in section > article:not(.fill):not(.title-slide):before{
content:"";
display:block;
border-top:2px solid rgb(163,38,56);
position: absolute;
width: 100%;
height: 2px;
min-height: 2px;
left: 0;
top: 24px;
}
.slides.template-uulm-in section > article:not(.fill):not(.title-slide) .slide-nr{
display:inline;
position: absolute;
color: #eee;
font-size:18px;
line-height: 26px;
font-weight: 600;
letter-spacing: -1px;
min-width: 26px;
left: 0;
top: 24px;
padding:0px;
padding-left:6px;
padding-right:6px;
margin:0;
background: rgb(163,38,56);
text-align:center;
}
.slides.template-uulm-in section > article.title-slide img {
position: absolute;
left: 0;
top: 20%;
min-width: 100%;
min-height: 50%;
width:100%;
height:50%;
z-index: -1;
}
.slides.template-uulm-in section > article h1, .slides.template-uulm-in section > article h2, .slides.template-uulm-in section > article h3{
color: rgb(163,38,56);
}
.slides.template-uulm-in section > article.title-slide #title{
font-size: 48px;
position: absolute;
left: 50%;
top: 75%;
text-align:left;
margin:0;
padding:0;
}
.slides.template-uulm-in section > article.title-slide #subtitle{
font-size: 28px;
position: absolute;
left: 50%;
bottom: 3%;
text-align:left;
margin:0;
padding:0;
}
.slides.template-uulm-in section > article.title-slide #author{
font-size: 28px;
position: absolute;
left: 5%;
bottom: 3%;
text-align:left;
margin:0;
padding:0;
}
.slides.template-uulm-in section > article.title-slide #uulm-logo {
position: absolute;
left: 50%;
top: 4%;
z-index: -2;
width: 38%;
min-width: 38%;
min-height: 10%;
height: 10%;
}
.slides.template-uulm-in section > article:not(.fill){
padding-top: 100px;
padding-left: 80px;
padding-right: 80px;
padding-bottom: 32px;
}
.slides.template-uulm-in section > article:not(.nobackground):not(.biglogo) {
background-color: white;
}
.slides.template-uulm-in li::before {
color: rgb(163,38,56);
}
.slides.template-uulm-in td{
background: rgba(169,162,141,0.4);
padding: 5px 10px;
vertical-align: top;
}
.slides.template-uulm-in th{
background: rgba(169,162,141,0.8);
padding: 5px 10px;
vertical-align: top;
color:#eee;
}
.slides.template-uulm-in iframe {
height: 580px;
}
.slides.template-uulm-in h3 + iframe {
margin-top: 40px;
height: 480px;
}
.slides.template-uulm-in section article.fill iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 0;
margin: 0;
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: -1;
}
.uulm-color {
color: rgb(125,154,170);
}
.mawi-color {
color: rgb(86,170,28);
}
.in-color {
color: rgb(163,38,56);
}
.nawi-color {
color: rgb(189,96,5);
}
.med-color {
color: rgb(38,84,124);
}
.accent-color {
color: rgb(169,162,141);
}
.slides.template-uulm-in a{
color: rgb(125,154,170);
}
a{
text-decoration: none;
}