/**
 * White theme for reveal.js. This is the opposite of the 'black' theme.
 *
 * By Hakim El Hattab, http://hakim.se
 */


@import url(lato/lato.css);



/*********************************************
 * GLOBAL STYLES
 *********************************************/

body {
  background: #ffffff;
  background-color: #ffffff;
}

.reveal {
  font-family: "Lato", sans-serif;
  font-size: 36px;
  font-weight: normal;
  color: #222; }


::selection {
  color: #fff;
  background: #98bdef;
  text-shadow: none; }

.reveal .slides > section,
.reveal .slides > section > section {
  line-height: 1.3;
  font-weight: inherit;
}


/*********************************************
 * MARIO: ALIGNMENT & COLUMNS
 *********************************************/

.reveal .float-left {
    float: left;
}

.reveal .float-right {
    float: right;
}

.reveal .left {
    text-align: left;
}

.reveal .center {
    text-align: center;
}

.reveal .right {
    text-align: right;
}

.reveal .small {
    font-size: 0.7em;
}

.reveal .tiny {
    font-size: 0.6em;
}

.reveal .tt {
    font-family: monospace;
}

.reveal .boxed {
    border: 1px solid black;
    padding: 10px;
}

.reveal .w10 { width:10%; }
.reveal .w20 { width:20%; }
.reveal .w30 { width:30%; }
.reveal .w40 { width:40%; }
.reveal .w50 { width:50%; }
.reveal .w60 { width:60%; }
.reveal .w70 { width:70%; }
.reveal .w80 { width:80%; }
.reveal .w90 { width:90%; }

.reveal .col10 { float:left; width:10%; }
.reveal .col20 { float:left; width:20%; }
.reveal .col30 { float:left; width:30%; }
.reveal .col40 { float:left; width:40%; }
.reveal .col50 { float:left; width:50%; }
.reveal .col60 { float:left; width:60%; }
.reveal .col70 { float:left; width:70%; }
.reveal .col80 { float:left; width:80%; }
.reveal .col90 { float:left; width:90%; }


/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: normal;
  text-shadow: none;
  word-wrap: break-word;
  text-align: center;
}

.reveal h1 {
    margin-bottom: 40px;
    font-size: 1.50em;
}

.reveal h2 {
  font-size: 1.3em; }

.reveal h3 {
  font-size: 1.1em; }

.reveal h4 {
  font-size: 1em; }

.reveal h1 {
  text-shadow: none; }

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%; }

.reveal strong {
    font-weight: bold;
}

.reveal .boldblue {
    font-weight: bold;
	color: #2a9ddf;
}

.reveal b {
    font-weight: bold; }

.reveal em {
  font-style: italic; }

.reveal del {
	color: red;
}

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin-bottom: 1em;
}

.reveal ol li,
.reveal dl li,
.reveal ul li {
    margin-bottom: 0.5em;
    margin-left: 40px;
}

.reveal ol {
  list-style-type: decimal; }

.reveal ul {
  list-style-type: disc; }

.reveal ul ul,
.reveal ol ul {
    list-style-type: circle;
}

.reveal ol ol {
    list-style-type: lower-roman;
}

.reveal ul ul ul,
.reveal ul ul ol,
.reveal ul ol ul,
.reveal ul ol ol,
.reveal ol ul ul,
.reveal ol ul ol,
.reveal ol ol ul,
.reveal ol ol ol {
    font-size: 0.9em;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
    display:     block;
    margin-top:  0.3em;
    font-size:   0.8em;
    margin-left: 10px; 
}

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 40px; }

.reveal q,
.reveal blockquote {
  quotes: none; }

.reveal blockquote {
  display: block;
  text-align: left;
  font-size: 0.9em;
  position: relative;
  width: 70%;
  margin: 20px auto;
  padding: 0px 15px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q {
  font-style: italic; }


/*********************************************
 * CODE
 *********************************************/

/* box around block of code */
.reveal pre {
  display: block;
  position: relative;
  width: 100%;
  margin: 10px auto;
  text-align: center;
}

/* inline code */
.reveal code {
    display: inline;
    padding: 0.2em;
    text-align: left;
    font-size: 85%;
    font-family: monospace;
    word-wrap: normal;
    background-color: #f7f7f7;
}

/* block of code (has to override above inline code)*/
.reveal pre code {
    display: block;
    margin: 10px;
    text-align: left;
    font-size: 0.5em;
    font-family: monospace;
    line-height: 1.45em;
    padding:  16px;
    overflow: auto;
    max-height: 550px;
    word-wrap: normal;
    background-color: #f7f7f7;
}

.reveal pre code.small {
    font-size: 0.4em;
}


/*********************************************
 * TABLES
 *********************************************/

.reveal table {
    margin: auto;
    border-collapse: collapse;
    border-spacing: 2px;
    //border-top:    2px solid black;
    //border-bottom: 2px solid black;
    text-align: center;
}

.reveal table th {
  font-weight: bold; }

.reveal table th {
    border-bottom: 1px solid;
}

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
}

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right; }

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none; }

.reveal sup {
    vertical-align: super;
    font-size: 0.7em;
}

.reveal sub {
    vertical-align: sub;
    font-size: 0.7em;
}

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top; }

.reveal small * {
  vertical-align: top; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #2a76dd;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  -moz-transition: color .15s ease;
  transition: color .15s ease; }

.reveal a:hover {
  color: #6ca0e8;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #1a53a1; }

/*********************************************
 * IMAGES
 *********************************************/
/*
.reveal section img {
  margin: 15px 0px;
  background: rgba(255, 255, 255, 0.12);
  border: 4px solid #222;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
*/

.reveal section img {
  /*margin: 15px 0px;*/
  margin-bottom: 15px;
  border: 0;
  box-shadow: none; }

.reveal section img.plain {
  border: 0;
  box-shadow: none; }

.reveal a img {
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  transition: all .15s linear; }

.reveal a:hover img {
  background: rgba(255, 255, 255, 0.2);
  border-color: #2a76dd;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }


.reveal figure {
    display: inline-block;
//    vertical-align: top;
}

.reveal figure img {
  margin: 5px 0px 0px 0px;
  border: 0;
  box-shadow: none;
}

.reveal figure figcaption {
  margin: 0px;
  line-height: 1.2;
  font-style: italic; 
  font-size: 0.6em;
  text-align: center;
}


/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
  border-right-color: #2a76dd; }

.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
  border-left-color: #2a76dd; }

.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
  border-bottom-color: #2a76dd; }

.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
  border-top-color: #2a76dd; }

.reveal .controls .navigate-left.enabled:hover {
  border-right-color: #6ca0e8; }

.reveal .controls .navigate-right.enabled:hover {
  border-left-color: #6ca0e8; }

.reveal .controls .navigate-up.enabled:hover {
  border-bottom-color: #6ca0e8; }

.reveal .controls .navigate-down.enabled:hover {
  border-top-color: #6ca0e8; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2); }

.reveal .progress span {
  background: #2a9ddf;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }



/*********************************************
 * MARIO: TITLE SLIDE
 *********************************************/

.white-on-blue {
    color: #ffffff;
    background-color: #2a9ddf;
}

.reveal .title {
    margin:      30px 0 0 0;
    font-weight: bold;
    font-style:  normal;
    font-size:   1.5em;
    text-align:  center;
}

.reveal .subtitle {
    margin:      10px 0 0 0;
    font-weight: normal;
    font-style:  italic;
    font-size:   1.3em; 
    text-align:  center;
}

.reveal .author {
    margin:      50px 0 0 0;
    font-weight: normal;
    font-style:  normal;
    font-size:   1.0em; 
    text-align:  center;
}

.reveal .affiliation {
    margin:      10px 0 30px 0;
    font-weight: normal;
    font-style:  normal;
    font-size:   1.0em; 
    text-align:  center;
}


/*********************************************
 * MARIO: SECTIONS
 *********************************************/

.reveal .section-title h1 {
    /* white on blue */
    color: #ffffff;
    background-color: #2a9ddf;

    /* large top margin -> vertical centering */
    margin:      100px auto;
    padding:      50px;
    
    /* large bold font */
    font-weight: bold;
    font-style:  normal;
    font-size:   1.5em; 
}


/*********************************************
 * MARIO: FRAGMENT ANIMATION
 *********************************************/

.fragment.current-visible.visible:not(.current-fragment) {
    display: none;
    height:0px;
    line-height: 0px;
    font-size: 0px;
}


/*********************************************
 * MARIO: WER WIRD MILLIONAER
 *********************************************/

.reveal .slides > section {
  counter-reset: wwm-counter;
}

.reveal .answer {
    display:  inline-block;
    position: relative;
    width:    400px;
    text-align: left;
    margin:   20px;
    border:   3px solid #2a9ddf;
    border-radius: 20px;
    padding:  20px;
    font-weight: normal;
    color:    black;
}

.reveal .answer:before {
  content: counter(wwm-counter, upper-latin) ": ";
  counter-increment: wwm-counter;
  margin-right: 0.5em;
  font-weight: bold;
}

.reveal .tooltip {
    visibility: hidden;
    max-width: 390px;
    top:        100%;
    background-color: grey;
    color:      #ffffff;
    text-align: center;
    padding:    5px;
    border-radius: 6px;    
    position:   absolute;
    z-index: 1;
    font-size: 0.5em;
}

.reveal .show-wrong {
    background-color: #ffaaaa;
    border: 3px solid red;
}

.reveal .show-right {
    background-color: #aaffaa;
    border: 3px solid green;
}

.reveal .show-wrong:hover .tooltip, .reveal .show-right:hover .tooltip {
    visibility: visible;
}



/*********************************************
 * MARIO: COMMENT BUBBLES
 *********************************************/

.reveal .bubble {
    color: #ffffff;
    background-color: #2a9ddf;
    padding:10px;
    border-radius:5px;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
}

.reveal .comment {
    color: #ffffff;
    background-color: #2a9ddf;
    position:absolute;
    padding:10px;
    border-radius:5px;
    font-size: 0.5em;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
}

.reveal .comment-left {
    color: #ffffff;
    background-color: #2a9ddf;
    position:absolute;
    padding:5px;
    font-size: 80%;
    border-radius:20px 20px 0px 20px;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
}

.reveal .comment-right {
    color: #ffffff;
    background-color: #2a9ddf;
    position:absolute;
    padding:5px;
    font-size: 80%;
    border-radius:20px 20px 20px 0px;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
}

.reveal .comment-big {
    color: #ffffff;
    background-color: #2a9ddf;
    padding:10px;
    border-radius:5px;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
}


/*********************************************
 * MARIO: FOOTER COMMENTS
 *********************************************/

.reveal footer {
    position: absolute;
    text-align: center;
	margin: auto;
    padding: 5px;
    font-size: 0.5em;
    left:  200px;
    width: 624px;
    top:   750px;
}

/*********************************************
 * MARIO: GENERIC HIGHLIGHT
 *********************************************/

.reveal .highlight {
    background-color: #fdfbaa;
}

/*********************************************
 * MARIO: margin: auto
 *********************************************/

.reveal .automargin {
    margin: 10px auto;
}

/*********************************************
 * MARIO: ADD SHADOWS (e.g. to images)
 *********************************************/

.reveal .shadow {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
}

.reveal table p {
    margin: 0px;
}

.reveal .neg80 {
    margin-top: -80px;
}

.reveal .neg60 {
    margin-top: -60px;
}

/* class for aligning divs in a row */
.reveal .ilb {
    display: inline-block;
    vertical-align: top;
}

/*********************************************
 * MARIO: MathJax equation should get some
   vertical distance to text before them
 *********************************************/

.reveal .MathJax_Display {
    margin-top: 0.5em;
}


/*********************************************
 * Stefan: small helper class for doing
 * a clear: both; after columns.
 *********************************************/

.reveal .clearFloat {
  clear:both;
}