/* This is, mostly, the original shower file */
@import url("screen.css");

/* Playing with fonts, just for the sake of it...*/
@font-face {
    font-family: "myfont";
    src: url(fonts/PTSans.woff) format('woff');
    font-weight: normal;
}

@font-face {
    font-family: "myfont";
    src: url(fonts/PTSans.Bold.woff) format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "myfont";
    src: url(fonts/PTSans.Bold.Italic.woff) format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont"; 
    src: url(fonts/PTSans.Italic.woff) format('woff');
    font-style: italic;
}

/* --------------------- */
/* Generic setups        */
/* --------------------- */

body {
    font-family: myfont;
    /* line-height: 2.8em; */
    line-height: 1.25;
    font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures;
}

ul ul li, ol ul li {
    font-size: 80% !important
}

ul li, ol li    { 
    padding-bottom: 0.3em !important
}

li, blockquote, td {
    /* This does not work in Chrome, 'cause it does not do hyphenation. Without
    hyphenation, on the other hand, justification can look very ugly.
    Ie, this should be switched on only if the hyphenate.js is also used 
    as a polyfill */
    -webkit-hyphens: auto; 
       -moz-hyphens: auto; 
        -ms-hyphens: auto;
            hyphens: auto; 

    text-align: justify;
}

/* Header part (in toc mode) */
header a {
    color: khaki !important;
}

header p, header h1, header h2, header h3   {
    color: snow;
}


.caption {
    font-size: 22pt;
}

.caption a {
    text-shadow: 0 -1px 1px #005a9c;
    background: 0 0;
}

.caption a:hover {
    color: #5e93c8;
}

/* ----------------------- */
/*  Styles for slides      */
/* ----------------------- */
.slide {
    background: #add9e4;
    background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
    background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
    background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
    background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
    background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
    background-color: #f7fbfc; 

    font-family: myfont;
    font-size: 30px;
    color: #333333; 
}

.slide:after {
    position: absolute;
    top: 0;
    right: 119px;
    padding: 50px 0 0;
    width: 60px;
    height: 100px;
    background: url(../images/ribbon_w3c.svg) no-repeat;
    color: #FFF;
    counter-increment: slide;
    content: counter(slide);
    text-align: center;
    font-size: 20px;
}

.slide h1, .slide h2, .slide h3, .slide h4, .slide li, .slide p, 
.slide td, .slide th, .slide blockquote, .slide dt, .slide dd,
.slide figcaption {
    cursor: default;
}

.slide h1, .slide h2, .slide h3, .slide h4 { 
    margin: 0 0 0px;
    padding-bottom: 2.2px;
    border-bottom:  2px solid #004480;
    color: #004480;
    -webkit-hyphens: none; 
       -moz-hyphens: none; 
        -ms-hyphens: none;
            hyphens: none; 
    text-align: center;
    font-weight: normal;
    /* text-transform: uppercase; */
    line-height: 0.9em;
    padding-right: 1.6em;
    padding-left: 1.6em;
}

.slide h2 {
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.slide ol ol,.slide ol ul,.slide ul ol,.slide ul ul {
    margin: 0 0 0 0.5em;
}

.slide h2 {
    font-size: 1.5em;
    text-shadow: 0 1px 1px black; /* #ffff; */ 
}

.slide h3 { 
    font-size: 1.1em 
}

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

.slide h1.title {
    font-size:      2.8em;
    padding-top:    2em;
    padding-bottom: 2.2px;
    border-bottom:  none !important;
    text-align: center;

}

.slide .notitle {
    margin-top:3em
}

.slide.shout h2, .slide.shout h3 {
    text-shadow: 0 1px 1px black; /* #ffff; */ 
    border-bottom: none;
    width: 100%;
}

.slide.shout h3 {
    font-size: 3em;
    margin-top: 1em;
    text-align: center;
    line-height: 1;
    padding-right: 0em;
    padding-left: 0em;       
}

.slide.shout h2 {
    font-size: 2.8em;
    margin-top: -1em;
    text-align: left;
    line-height: 1;
}


.slide a {
    background: transparent;
    transition-property: background;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.slide a:hover {
    background: hsla(60, 96%, 55%, 0.7);
    border-radius: 5px;
}

.slide a:visited {
    background: transparent;
    border: none;
}

.slide kbd,.slide code,.slide samp {
    background: transparent;
    color: inherit;
}

.slide pre {
    font-family: monospace;
    font-size: 80%;
    line-height: 1.1em;    
    white-space: pre !important;
    color: green;
}

.slide code {
    font-family: monospace;
    font-size: 80%; 
    color: green;
}

.slide em {
    /* text-decoration: underline; */
    
    /* A Lea Verou trick for a nicer underline...*/
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.15em;

}

.slide ol li:before, .slide ul li:before {
    display: inline-block;
    width: 2em;
    color: #333333; 
    text-align: right;
}

.slide table  { 
    border-collapse: separate;
    border-spacing: 0.1em 
    border: none !important;
}

.slide table td {
    border: 1px solid #CCC; 
    padding:0.3em
}

.slide table.striped tr:nth-child(even) {
    background: hsl(160, 96%, 91%);
}

.slide table.striped td {
    border-top: none;
    border-bottom: none;
}

.slide table.striped tr td:first-child {
    border-left: none;
}
.slide table.striped tr td:last-child {
    border-right: none;
}

.slide table th.headertop {
    text-align: center;
    border-left: 1px solid #CCC; 
    border-right: 1px solid #CCC; 
}

.slide table th.headerleft {
    padding-right: 1em; 
    text-align:right
    border-top: 1px solid #CCC; 
    border-bottom: 1px solid #CCC; 
}

.slide table td {
    padding-right:0.5em;
}


.slide table.comparison th {
    text-align: center;
}
.slide table.comparison td {
    padding: 0.3em;
}
.slide table.comparison {
    padding-left: 0em !important;
    margin: 0em !important;
    margin-bottom: 0.5em !important;
    font-size: 90%;
    table-layout: fixed;
}

.slide.shout h3 {
    margin-top: 1.5em;
    font-size: 2em;
}

.slide.shout h2 {
    -webkit-transform: translateY(25%);
        -ms-transform: translateY(25%);
            transform: translateY(25%);
}

.slide.shout div {
    display: -webkit-box;  /* Old Safari, iOS, Android */
    display: -moz-box;     /* Old firefox */
    display: -ms-flexbox;  /* IE 10 */
    display: -webkit-flex; /* Chrome 21-28, Safari 6.1+ */
    display: flex;         /* IE 11, Chrome 29+, */                                
    -webkit-box-align: flex-start;
       -moz-box-align: flex-start;
       -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
            align-items: flex-start;
    -webkit-box-pack: center;
       -moz-box-pack: center;
       -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}

.slide.cover img {
    width: 100%;
}

/* Stamp */
.slide .stamp {
    font-size: 5em;
    letter-spacing: 0.1em;
    position:absolute;
    top: 1.2em;
    left: 30%;
    -webkit-transform:rotate(-20deg);
       -moz-transform:rotate(-20deg);
        -ms-transform:rotate(-20deg);
         -o-transform:rotate(-20deg);
            transform:rotate(-20deg);
    color: hsla(0, 100%, 55%, 1.0);
    background: hsla(0,0%,100%,0.6);
    border-width: 0.1em;
    border-style: solid;
    border-radius: 0.2em;
    padding-left: 0.07em;
    padding-right: 0.07em;
    box-shadow: 0.05em 0.05em 0.05em #888; 
    /* box-shadow: 0.05em 0.05em 0.05em #888, 0 0 0 50vmax hsla(0,0%,0%,0.2); */
    text-shadow: 0.05em 0.05em 0.05em gray;
    -webkit-filter: none;
            filter: none;
}

.slide .stamp.small {
    font-size:2.5em; 
    letter-spacing: 0.1em;
    position:absolute;
    top: 3.3em;
    left: 15%;
    filter: none;
}

.slide.stamped h2, .slide.stamped ul, .slide.stamped ol, .slide.stamped::after,
.slide.stamped figure, .slide.stamped p:not(.stamp) {
    -webkit-filter: blur(2px) contrast(.8) brightness(.8); 
            filter: blur(2px) contrast(.8) brightness(.8); 
}


/* The first, "title" page */
.titlepage h1, .titlepage h2, .titlepage h3, .titlepage h4 {
    border-bottom:  none !important;
    text-align: center;
}

.slide.titlepage h2 {
    font-size: 2em;
    margin-top:2em;
    text-shadow: 0 1px 1px black; /* #ffff; */ 
}

.titlepage h3 {
    font-size: 1em;
    text-transform: none;
    margin-bottom:0.1em;
}

.titlepage h4 {
    font-size: 0.8em;
    margin-bottom:0.15em;
    text-transform: none;
}

.titlepage p {
    font-size: 0.5em;
}

.titlepage p.copyright {
    position: absolute;
    bottom: 0.3em;
    right: 10em;
    left: 15em;
    margin-bottom: 0;
    font-size: 35%;
    line-height: 1.3em;
}

/* -------------- */

dt { font-weight: bold;}
dd { padding-left: 1.5em;}

dl.plain dt { font-weight: inherit !important;}

div.doublelist {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count : 2;
}

div.doublelist ul li {
    list-style: none !important;
}

div.doublelist ul li:before {
    content: "" !important ;
}

p.copyright {font-size:70%}

ul ul li {padding-bottom: 0em !important}

figure.center, figure.centre {
    text-align: center;
}

figure.right {
    float:       right; 
    margin-left: 1em; 
    max-width: 250px;
}

figure.right img {
    max-width: inherit;
    width: 250px;    
    border: 1px solid #CCC; 
    border-radius: 10px; 
    box-shadow: 7px 7px 5px #888; 
}

figure.right img.noborder {
    border: 0px solid #CCC !important; 
    border-radius: 0px !important; 
    box-shadow: 0px 0px 0px #888 !important; 
}

figure > figcaption {
    font-size: 30%;
    padding-top:0;
    margin-top:0;
    padding-left:1em;
}

.credit::before {
    content: "Credit: ";
}

.slide.cover .credit {
    margin-top: 3em;
    margin-bottom: 0px;
    padding-bottom: 15px;
    font-size: 23%;
    position: absolute;
    left: 5px;
    bottom: 0px;
    color:snow;
}

.slide.cover h3 {
    background: hsla(181, 9%, 78%, 0.5);
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
    border-radius: 10px;        

}


@media print {
    figure.right img {
        border: 0px solid #CCC !important; 
        border-radius: 0px !important; 
        box-shadow: 0px 0px 0px #888 !important; 
    }
    .slide .stamp {
        box-shadow: 0em 0em 0em #888; 
        text-shadow: 0em 0em 0em #888;
    }
}