body
{
    background-color: rgb(255,255,255);
    font-family: Times, "Times New Roman", serif;    
}

#tuto
{
    margin: 50px auto;
    background-color: rgb(255,255,255);

    width:1020px;
    height:auto;
}

#bla
{
    margin: 50px auto;
    width:1000px;
    height:auto;
}

#bla2
{
    margin: 50px auto;
    width:900px;
    height:auto;
}

P { margin-bottom: 0.08in; font-size:125%; text-align:justify;}
P.s { margin-bottom: 0.08in; font-size:110%; text-align:left;}
p.z  { margin-bottom: 0.08in; font-size:110%; text-align:justify; text-indent:0px;}
P.x { margin-bottom: 0.08in; font-size:125%; text-align:center; }
h1 { font-weight:normal ; font-size:160%;}
h4 { font-weight:normal ; font-size:150%;}

p.def { font-family: Verdana, Arial, Helvetica, sans-serif; margin-bottom: 0.08in; font-size:10.1pt; line-height: 16pt; letter-spacing:0.6pt;}
.def a {text-decoration:none; font-weight:normal;}
.def a:link {color:rgb(0, 0, 179);}
.def a:visited {color:rgb(0, 0, 179);}
.def a:hover {text-decoration:underline; color:rgb(0,0,0);}
.def a:active {color:rgb(0, 0, 179);}
.pd {text-align: center;}
.pd a:link {text-decoration: none; color: black; background-color: rgb(240,240,240);}
.pd a:visited {color: black;  background-color: rgb(240,240,240);}
.pd a:hover {color: black;  background-color: rgb(220,220,220);}
.pd a:active {color: black;  background-color: rgb(220,220,220);}


/* responsive css for small "devices" */

@media screen and (max-device-width: 700px) {
    body 
    {
        padding: 10px;
        width: 	    auto;
        margin-left: 6px;
    }
    #tuto{width:auto;height:auto;}
    #bla{width:auto;height:auto;}
    #bla2{width:auto;height:auto;}
    P, P.s, P.z{font-size:110%; text-align:left;}
    P.x {font-size:110%;}
}

/* responsive css for small "browser window" */

@media screen and (max-width: 701px) {
    body 
    {
        padding: 10px;
        width: 	    auto;
        margin-left: 6px;
    }
    #tuto{width:auto;height:auto;}
    #bla{width:auto;height:auto;}
    #bla2{width:auto;height:auto;}
    P, P.s, P.z{font-size:110%; text-align:left;}
    P.x {font-size:110%;}
}

img 
{
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    max-width: 100%;
    height: auto;
}

#downloads 
{
    border-radius: 8px;
    display: grid;
    place-items: center;
    justify-content: center; 
}

.green 
{
    font-family:sans-serif;
    background-color: #4CAF50; /* Green */
    color: white;
    border-radius: 4px;
    border: none;   
    padding: 6px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    /*font-size: 80%;*/	
}
.green:hover {background-color: #83c985;}

#playlist li 
{ 
    padding: 5px; 
    background: #f4f4f4; 
    margin-bottom: 5px; 
    cursor: pointer; 
    border-radius: 4px;
    width:340px;
    font-family:sans-serif;
    font-size: 90%;
}
#playlist li:hover { background: #e0e0e0; }
#playlist li.active{font-weight: bold;}
#playlist li.active::before {content: "► ";}
#playlist {list-style: inside decimal-leading-zero;}
#playlist li::marker {color: grey;}