/*============================   slides.css  ===============================
 * Brigitte Bigi                                                           
 * Style to be used with markdown+pandoc with dzslides option              
 * -------------------------------------------------------------------------
 * 
 * This style expect the following files to be available...
 *
 * Fonts:
 *  - etc/font/Jura-DemiBold.ttf
 *  - etc/font/MavenPro-Regular.ttf
 *  - etc/font/data-latin.ttf
 *
 * Images:
 *  - etc/img/background-motif.png
 *  - etc/img/background-motif.png
 *
 *==========================================================================*/



/* ===========================  DEFINITIONS  ===============================*/

@font-face {
    font-family: TitleFont;
    src: url(../../etc/font/HandOfSean.ttf);
}

@font-face {
    font-family: NormalFont;
    src: url(../../etc/font/MavenPro.ttf);
}


:root{
    --bg-color:rgba(255,255,255,0.9);
    --text-color:rgba(20,20,20,0.8);
    --main-color:rgba(216,129,69,0.7);
    }

/*===========================  MAIN PAGE  =================================*/

* {
	outline: none;
	margin:  0;
	padding: 0;
}

html { 
    background-color: rgb(80,80,100);
}

body {
    background-color: rgb(250,250,245);

    font-family:     NormalFont, "Maven Pro", serif;
    font-size:       18pt;
    font-weight:     normal;
    font-style:      normal;
    font-variant:    normal;
    line-height:     110%;
    color:           rgb(28,22,22);
    
    border-radius:   10px;
    counter-reset:   body;
}

    
/*=============================  SLIDE  ==================================*/

/* A section is a slide. */
/* It's size is 800x600, and this will never change */
section {
    }

/* Add page number at footer */
section:before {
    font-family:       FooterFont, cursive;
    font-size:         50%; 
    content:           "SPPAS - Multi-Lingual approaches to the automatic annotation of speech --- --- Page " counter(body) " --- --- Brigitte Bigi";
    counter-increment: body;  
    margin-top:        580px;
    margin-left:       10%;
    position:          fixed;    
}

    
/*=============================  TITLES  ==================================*/

h1, h2, h3 {
    font-family:    HeaderFont, cursive;
    text-align:     center;
    background-clip:content-box;
    transition:     border-color 0.3s;
}

/* Titlepage */

section.title { 
    background:     url('../../etc/img/background-header.png') repeat-x center;

    margin-top:    100px;
    margin-right:   auto;
    margin-left:    20px;
    padding-top:     0px;
    padding-right:  40px;
    padding-bottom:  0px;
    padding-left:   15px;
}

section.title h1 {
    color:          rgb(120,20,20);
    padding-bottom: 40px;
    margin-bottom:  40px;
    line-height:    180%;
    font-family:    TitleFont, serif;
    font-size:      150%;
    font-weight:    bold;
}

section.title h2 {
    font-family:    TitleFont, serif;
    font-weight:    bold;
    font-size:      120%; 
    color:          rgb(60,60,120);
    padding-bottom: 30px;
    margin-bottom:  30px;
}

section.title h3 {
    font-size:      90%;
    font-weight: normal;
}

/* Main title of a section: only the title at the center of the slide */

section.level1 h1 {
    font-family:    TitleFont, serif;
    font-weight:    normal;
    font-style:     normal;
    font-variant:   normal;
    font-size:      140%; 
    text-align:     left;
    letter-spacing: 2px;
    margin-top:     200px;
    margin-right:   20px;
    margin-left:    20px;
    padding-top:    20px;
    padding-right:  15px;
    padding-bottom: 20px;
    padding-left:   15px;
    color:          rgb(120,20,20);
    border-bottom:  2px solid rgb(120,20,20);
    /*box-shadow:     0 0 12px rgba(205,38,38,0.8), inset 0 0 12px rgba(205,38,38,0.8); /* red */
}

/* Title at the top of each slide */
section.level2 h1 { 
    font-family:    TitleFont, serif;
    font-weight:    normal;
    font-style:     normal;
    font-variant:   normal;
    font-size:      130%; 
    text-align:     left;
    letter-spacing: 1px;
    margin-top:     10px;
    margin-right:   20px;
    margin-left:    20px;
    margin-bottom:  10px;
    padding-top:    15px;
    padding-right:  15px;
    padding-bottom: 15px;
    padding-left:   15px;
    border-bottom:  2px solid rgb(60,60,120);
    color:          rgb(60,60,120);
}

/* Sub-Title at the top of the slide */
section.level2 h3 { 
    font-family:    TitleFont, serif;
    font-weight:    normal;
    font-style:     normal;
    font-variant:   normal;
    font-size:      120%;
    text-align:     left;
    letter-spacing: 1px;
    margin-top:     10px;
    margin-right:   20px;
    margin-left:    20px;
    margin-bottom:  15px;
    padding-top:    15px;
    padding-right:  15px;
    padding-bottom: 15px;
    padding-left:   15px;
    border-bottom:  2px solid rgb(60,160,60);
    color:          rgb(60,160,60);
}

a {
    color: rgb(28,28,208);
    text-decoration:none;
    -webkit-transition-property:color;
    -moz-transition-property:color;
    -ms-transition-property:color;
    -o-transition-property:color;
    transition-property:color;
    -webkit-transition-duration:0.2s;
    -moz-transition-duration:0.2s;
    -ms-transition-duration:0.2s;
    -o-transition-duration:0.2s;
    transition-duration:0.2s
}

a:hover{
    color: rgb(120,20,20);
}


/*=============================  OTHERS  ==================================*/

address, blockquote, dl, fieldset, form, hr, ol, table, ul, dl { 
    padding: 5px 10px 5px 10px; 
}

p {
    padding: 2px 10px 2px 10px; 
}

li , li p{ font-size: 100%; }
li li, li li p  { font-size: 90%; }
li li li, li li li p  { font-size: 85%; }


ul, ol {
    margin-top:    10px;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-left: 50px;
  }

q { quotes: "“" "”" "‘" "’"; }


blockquote {
    background-color:  rgb(200,200,200);

    margin-left:   40px;
    margin-right:  40px;
    margin-top:    10px;
    margin-bottom: 15px;

    padding-top:    5px;
    padding-right:  0px;
    padding-bottom: 5px;
    padding-left:   0px;

    clear:          none;
    text-align:     justify;
    vertical-align: middle;
    font-family:    TitleFont;
    font-size:      80%;
    line-height:    180%;

    -moz-border-radius: 10px; /* Firefox */
    border-radius:      10px;
    border-collapse:    collapse;
    border:             1px solid rgb(100,100,100);
}


/*=============================  MEDIA  ==================================*/

/* Figures are displayed full-page, with the caption on bottom of the image. */
figure {
    display:    block;
    text-align: center;
}

/* remove center align (from <figure>) inside <li> */
figure li, figure p { text-align: left; }
li figure { text-align: left; }

/* class right-image for floating image at right side */
.right-image img { float: right; margin: 0 10px 0 5px;}
.left-image img { float: left; margin: 0 10px 0 5px;}

/* class text-top for image aligned with text top */
.text-top img { vertical-align:text-top;}

/* classes to resize the image heigth */
.h-75px img { height:75px;}
.h-60px img { height:60px;}
.h-50px img { height:50px;}

#allen tr { border-bottom: 1px solid black;}
#allen td.rel-img { border-right: 1px solid black; }

#references ~ section p { margin: 10px 20px; }

audio, video, img {
    image-rendering:  optimize-quality;
    background-color: transparent;
    border-width:     0; 
    border-style:     none;
    margin:           0 auto;
    max-width:        90%; 
    max-height:       80%;
    position:         relative;
    }

figcaption {
    position:       relative;
    font-size:      60%;
	padding-bottom: 10px;
}
 

/*=============================  FOOTER  ==================================*/

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 40px;
    text-align: right;
    background-color: #F3F4F8;
    border-top: 1px solid #CCC;
  }


/*=============================  EFFECTS  ==================================*/

/* Transition effect */
/* Feel free to change the transition effect for original animations. See here:
 https://developer.mozilla.org/en/CSS/CSS_transitions
 How to use CSS3 Transitions: */
section {
  -moz-transition:    left 400ms linear 0s;
  -webkit-transition: left 400ms linear 0s;
  -ms-transition:     left 400ms linear 0s;
  transition:         left 400ms linear 0s;
}

/* Before */
section { left: -150%; }

/* Now */
section[aria-selected] { left: 0; }

/* After */
section[aria-selected] ~ section { left: +150%; }



/* Incremental elements */

/* By default, visible */
.incremental > * { opacity: 1; }

/* The current item */
.incremental > *[aria-selected] { color: red; opacity: 1; }

/* The items to-be-selected */
.incremental > *[aria-selected] ~ * { opacity: 0.2; }
  

/* ------- Computers -------- */

pre {
    background-color: rgb(200,200,200);
    margin-left:   40px;
    margin-right:  40px;
    margin-top:    10px;
    margin-bottom: 15px;
    padding-top:    5px;
    padding-right:  5px;
    padding-bottom: 5px;
    padding-left:   5px;

    min-height:    24px;
    max-width: 95%;

    border: 1px dotted gray;
    font-size: 50%;
}

dt code {
        font-weight: bold;
}
dd p {
        margin-top: 0;
}

code {
    font-family: MonoFont, monospace;
}