/*
::-moz-selection {
    background-color: rgba(255, 255, 255, 0);
}

::selection {
    background-color: rgba(255, 255, 255, 0);
}
*/
body {
    font-family: verdana;
    margin: 0;
    padding: 0;
    /* pour emp^echer la surbriallance de la sélection */
    /*
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    */
}

li{
    margin-top:5px;
    margin-bottom:5px;
}

body.suj1 {
    background: #3f7526;
    background: -webkit-linear-gradient(top, #3f7526 0%, #8f4831 100%);
    background: linear-gradient(180deg, #3f7526 0%, #8f4831 100%);
    background: -webkit-linear-gradient(180deg, #3f7526 0%, #8f4831 100%);
    background: -moz-linear-gradient(180deg, #3f7526 0%, #8f4831 100%);
}

body.suj2 {
    background: #27518f;
    background: -webkit-linear-gradient(269deg, #27518f 0%, #aad9fa 100%);
    background: linear-gradient(181deg, #27518f 0%, #aad9fa 100%);
    background: -webkit-linear-gradient(181deg, #27518f 0%, #aad9fa 100%);
    background: -moz-linear-gradient(181deg, #27518f 0%, #aad9fa 100%);
}

h1 {
    text-align: center;
    padding: 20px;
    margin-top: 0px;
    border-bottom: #FFFFCC 2px solid;
    box-shadow: 1px 7px 8px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 1px 7px 8px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 7px 8px 0px rgba(0, 0, 0, 0.75);
}

p.img {
    text-align: center;
}

p.img img {
    border: 1px solid;
}

video{
    width:90%;
    margin-left:5%;
    border:1px solid ;
    border-radius:10px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

#s2 + section p.img {
    background-color: white;
}

body.suj1 h1 {
    background-color: #264517;
    color: #FFFFCC;
}

body.suj2 h1 {
    background-color: rgb(250, 222, 104);
    color: #24488d;
}

section {
    max-height: 0px;
    padding: 0;
    border: none;
    overflow: hidden;
    border-radius: 20px;
    width: 960px;
    margin: auto;
    margin-bottom: 40px;
    box-shadow: 6px 7px 8px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 6px 7px 8px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 6px 7px 8px 0px rgba(0, 0, 0, 0.75);
    -webkit-transition-property: max-height;
    transition-property: max-height;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
}

ol ul {
    margin-bottom: 20px;
}

body.suj1 section {
    background-color: #daebcf;
}

body.suj2 section {
    background-color: #daf0f7;
}

a:target+section {
    max-height: 1500px;
    padding: 10px;
    border: 1px solid;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

section h2 {
    text-align: center;
}

nav {
    text-align: center;
}

nav a {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    width: 50px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 6px 7px 8px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 6px 7px 8px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 6px 7px 8px 0px rgba(0, 0, 0, 0.75);
    margin: 10px;
}

body.suj1 nav a {
    color: #3f7526;
    background-color: #b0cba3;
    border: 2px solid #264517;
}

body.suj2 nav a {
    color: #263875;
    background-color: #a3bdcb;
    border: 2px solid #264517;
}

body.suj1 nav a:hover,
body.suj1 nav a.actif {
    background-color: #fdb004;
    border: 1px solid red;
    box-shadow: 6px 7px 8px 0px rgba(150, 150, 0, 0.75);
    -webkit-box-shadow: 6px 7px 8px 0px rgba(150, 150, 0, 0.75);
    -moz-box-shadow: 6px 7px 8px 0px rgba(150, 150, 0, 0.75);
    border: 2px solid #264517;
    color: #315d1b;
}

body.suj2 nav a:hover,
body.suj2 nav a.actif {
    background-color: rgb(250, 222, 104);
    border: 1px solid red;
    box-shadow: 6px 7px 8px 0px rgba(200, 100, 100, 0.75);
    -webkit-box-shadow: 6px 7px 8px 0px rgba(200, 100, 100, 0.75);
    -moz-box-shadow: 6px 7px 8px 0px rgba(200, 100, 100, 0.75);
    border: 2px solid #264517;
    color: #f80000;
}


/**************/

div.code.html{
    background-color:white;
    display:inline-block;
    padding:20px;
    border:1px solid;
    border-radius:10px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

div.code.html div div {
    margin-left: 30px;
}
span.sel {
    color: #ff9300;
    font-weight: bold;
}

span.prop {
    color: #5d3c7e;
    padding-left: 30px;
}

span.propval {
    color: #829f6a;
}

span.val {
    color: #577e36;
}

.bal {
    color: blue;
}

.att {
    color: #ff7600;
}

.val {
    color: #9d9b99;
}