/*******************************************************************************
/* Styles communs pour les sujets de TP
/*******************************************************************************

/***********************************************************
  GENERAL RULES
***********************************************************/

body {
    font-family: 'Lato', Verdana, Arial, Sans-Serif;
    color: #444;
    margin: 0px;
    padding-top: 0px;
}

/* Color scheme
- Orange:
  - rgb(199, 142, 91)
  - hex: #c78e5b
- Blue: 
  - rgb(90, 147, 196)
  - hex: #5a93c4
- Darker Blue:
  - #4e7fa8
*/

h1{
    color: #5a93c4;
}

h2{
    color: #5a93c4;
}

h3{
    color: #c78e5b;
}

h4 {
    padding: 10px;
    margin-bottom:20px ;
    text-align: left;
    font-size: 20px;
    color: black;
}

.span-collapse {
    color: #5a93c4;
    cursor: pointer;
}

.span-collapse::after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.tutorial .note {
    background-color: #ddd;
    color: #666;
    padding: 10px;
}

.tutorial .note a {
    color: #5a93c4;
}

.tutorial figure img {
    margin: auto;
}
/***********************************************************
  CODE, SCHEMA
***********************************************************/

code {
    color: rgb(199, 142, 91);
    border-radius: 2px;
}


.tutorial div.schema {
    text-align: center;
    padding: 10px;
}

.tutorial pre {
    border: none;
    padding: 10px;
    margin: 10px 0px;
    background: inherit;
    border-radius: 2px;
}

.tutorial code {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 1.0em; /*10pt;*/
}

/*
.tutorial pre.java {
    background-color: rgba(90, 147, 196, 0.2);
    border-left: 5px solid rgba(90, 147, 196, 0.8);			  
}

.tutorial code.java {
    background-color: rgba(90, 147, 196, 0.2)
}

.tutorial pre.java code.java {
    background-color: transparent;
}
*/
.tutorial pre.sql {
    background-color: black; /*rgba(90, 147, 196, 0.2);*/
    border-left: 5px solid rgba(90, 147, 196, 0.8);			  
}
/*
.tutorial code.sql {
    background-color: rgba(90, 147, 196, 0.2)
}
*/
/*
.tutorial pre.sql code.sql {
    background-color: transparent;
}
*/
/*
.tutorial code.bash {
    background-color: rgba(128, 128, 128, 0.2)
}
*/
/*
.tutorial pre.bash {
    background-color: rgba(128, 128, 128, 0.2);
    border-left: 5px solid rgba(128, 128, 128, 0.8);			  
}
*/
/*
.tutorial pre.bash code.bash {
    background-color: transparent;    
}
*/
/*
.tutorial pre.javascript {
    background-color: #DEE9F3;
    border-left: 5px solid rgb(90, 147, 196, 0.8);			  
}
*/

/*
.tutorial code.javascript {
    background-color: #DEE9F3;
}

*/


/***********************************************************
  HEADER
***********************************************************/

.tutorial .header {
    background-color: #5a93c4;
    background-image: linear-gradient(to bottom,#5a93c4 0,#4e7fa8 100%);
    background-repeat: repeat-x;
    text-shadow: 0 1px 0 rgba(0,0,0,.1);
    padding: 35px;
    font-size: 24px;
    color: white;
    margin-bottom: 40px;
}


.tutorial header {
    margin: 0px;
}

.tutorial .navbar {
    background-color: #343a40;
    border: 0px;
    border-radius: 0px;
    margin: 0px;
    line-height: 100px;
    min-height: 72px;
}

.tutorial .navbar-header {
    min-height: 72px;
}

.tutorial .navbar-toggle {
    height: 50px;
}

.tutorial .navbar-brand {
    color: #fff;
}

.tutorial .navbar-nav li a {
    color: #eee;
    line-height: 42px;
    transition: all .2s linear;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover,
.tutorial .navbar-default .navbar-nav li .open a,
.tutorial .navbar-default .navbar-nav li .open a:hover,
.tutorial .navbar-default .navbar-nav li .open a:focus,
.tutorial .navbar-nav li a:active,
.tutorial .navbar-nav li a:focus,
.tutorial .navbar-nav li a:hover {
    color: #fff;
    line-height: 42px;
    background-color: #666;
    transition: all .2s linear;
}

.tutorial .navbar-nav .dropdown-menu {
    background-color: #eee;
    color: #444;
    line-height: 22px;
    transition: all .2s linear;
}



.tutorial .navbar-nav .dropdown-menu li a {
    background-color: #eee;
    color: #444;
}

.tutorial .navbar-nav .dropdown-menu li a:hover {
    background-color: #eee;
    color: #c78e5b;
    transition: all .2s linear;
}


.tutorial .header .title {
    font-size:45px; 
}
.tutorial .header .menu-button {
    color:#fff;
    line-height: 100px;
}

.tutorial article header h1 {
    text-align: center;
}

.tutorial ol li {
    font-size:inherit; 
}

/* footer: just the licence for now */
.tutorial footer {
    margin-top:10px;
    padding-top:40px;
    border-top: 1px solid #e5e5e5;
    line-height: 40px;
    color: #767676;
}
.tutorial footer p {
    text-align:center; 
}

/* Utilities */
.tutorial .vcenter {
    display: flex;
    align-items: center;
}


/* Articles */
.tutorial section {
    line-height:1.5;
    margin-left:auto;
    margin-right:auto;
    /*width:1200px;*/
}

.tutorial p {
    text-align: justify;
    line-height: 1.5;
    font-size: 12pt;
}

.tutorial ul {
    font-size: 12pt;
    line-height: 1.5;
}

.tutorial ol {
    font-size: 12pt;
    line-height: 1.5;
}


.tutorial .note-header {
    font-weight: bold;
}

.tutorial-img {
    margin: 25px;
}





.tutorial .btn {
    margin-top: 10px;
    margin-bottom: 10px;
}
/*
.tutorial .bash {
    background-color:lightgray;
}
*/
.tutorial .cpp {
    background-color:lightblue;
}

.tutorial .glsl {
    background-color:lightgreen;
}

table {
    font-size: 12pt;
    width:100%;
}

td {
    border-spacing: 0px;
    padding: 0px;
}

th {
    text-align: center;
}

caption {
    display: table-caption;
    text-align: center;
}


/***********************************************************
  PAGE NAVIGATION
***********************************************************/

.tutorial body {
    position: relative;
}

.tutorial #page-nav.affix-top {
    width: 100%;
}

.tutorial #page-nav.affix-bottom {
    width: 100%;
}

.tutorial #page-nav.affix {
    top: 20px;
    width: 100%;
    z-index: 10;
}

.tutorial #page-nav .to-top {
    text-align: left;  
}

.tutorial #page-nav .nav {
    background-color: #eee;
}

.tutorial #page-nav .nav li {
    display: block;
}

.tutorial #page-nav .nav a {
    color: #4e7fa8;
}

.tutorial #page-nav .nav li a:hover,
.tutorial #page-nav .nav li a:focus {
    background: #f5f5f5;
}

.tutorial #page-nav .nav .active {
    font-weight: bold;
    background: #f5f5f5;
}

.tutorial #page-nav .nav .nav {
    display: none;
    padding-left: 20px;
}

.tutorial #page-nav .nav .active .nav {
    display: block;
}

.tutorial #page-nav .nav .nav a {
    font-weight: normal;
    font-size: .85em;
}

.tutorial #page-nav .nav .nav .active a,
.tutorial #page-nav .nav .nav .active:hover a,
.tutorial #page-nav .nav .nav .active:focus a {
    font-weight: bold;
    /*padding-left: 30px;*/
    /*border-left: 5px solid black;*/
}


.tutorial #page-nav .nav .nav span {
    margin: 0 5px 0 2px;
}


.tutorial #page-nav .nav .nav .active span,
.tutorial #page-nav .nav .nav .active:hover span,
.tutorial #page-nav .nav .nav .active:focus span {
    display: none;
}


/***********************************************************
  SYNTAX HIGHLIGHTING
***********************************************************/
/*
code {
    color: #333;
}

.hljs {
    color: #333;
}

.hljs-keyword {
    color: #4e7fa8;
}

.hljs-title {
    color: #c78e5b;
}

.hljs-string {
    color: #86ba47;
}

.hljs-number {
    color: #ba4786;
}


*/
.lang-html mark, .lang-css mark {
    background-color: green
}
/***********************************************************
  FOLDER TREE
***********************************************************/


ul.folder-tree {
    list-style: none;
    padding-left: 0px;
}

ul.folder-tree ul {
    list-style: none;
    padding-left: 0px;
}

ul.folder-tree li.folder {
    background: url('../images/folder.svg') top left no-repeat;
    padding-left: 24px;
}

ul.folder-tree li .file {
    background: url('../images/file.svg') top left no-repeat;
    padding-left: 24px;
}

/* custom rules */
figure{
    margin-bottom: 1em;
    text-align:center;
}
figcaption {
    font-size: 0.8em;
    text-align: center;
}

.todo {
    background-color: beige;
    padding-top:10px;
    padding-left: 10px;
    padding-right: 10px;
    border: solid 2px darkgreen;
    margin-bottom: 10px;
}

.todo h3 {
    margin:0px;
    padding-bottom:5px;
}

video {
    display: block;
    margin: 0 auto;
}


.alert a {
    text-decoration: underline;
}
figure { margin: 5px; }

.img-responsive { margin: 0 auto;}

a.navbar-brand {
    padding: 0px;
}

/**/

.derModif {
    font-style: italic;
    font-size: 0.75em;
}

.derModif > a {
    color: white;
}

.alert-info a {
    color: navy;
}


a[href ^= 'https://www.w3.org']{
    color: cornflowerblue;
    background: transparent url('../images/w3c.png') no-repeat center right;
    padding-right: 30px; 
    text-decoration: none;
} 


a[href ^= 'https://www.w3schools']{
    color:#8eb818;
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAATCAYAAAB/TkaLAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAScwAAEnMBjCK5BwAABLdJREFUOE91kwtQVGUYho+XpMRLOlJqaeNo5GRNTt4zjZpGzdIuo9ZYSRqNFzAwCBsCkWBMQcUU8D6IWoLc3WUBF2TZBUFkcbmziASCXBTiogLCLk//HsYlx+mbeeec85//f//3+97vG4IISY5+qaUnUXpgKpHM/f2Sydwn9Zl6BR5Z0Svee009A+gbWLes9Ynvnr4u6c2XNkhLZ/pKkoXUEh2Pcqi+70NV+y7KW70oanZHf8eF3Ns/oLu1gTTjl6hKPyOxcAXRegf+zF1EeNZsjl6ZwWH1FIJTJxOYNJ7KJhVW0qauKIxtnpS1/EJh00/k33Hmaq0TmVXfoK5YS1LJahIMy7iY/x7ncxZwQmPPsQx7zugWczpzPkEqO7xjJLIr9w+S3nlwnuJ7rhia3Lhev5Xsmk1oqr7mcvkalMWfEH/jQ6LylnDu6jxBNoOEgvXU/5NDr6lL4CG1LVpOaRaTWe4/SHq7IwJ9w2by6raQ9fdGMm6uJ7XsCxRFK4kt+IDIvHc5e3UuxzNe5eK1VfT0ddDfb6a47oJApFzC+90NVDb+J/2q1jCyatajq3YkvfIrUso+J6FwuSBbyPnc+URkz+Fk5iwOXZ5ESf1fMkmSwQUfkbIl7STDdnnNcpG1ptWtZ9HeckRtXCsM+ZS4AgdUxSLFNh2pxZuFIdMJTZ/BweSJKG9sRWvcQ3DKNAISRrE7bjhH02ZjMj+Sia2k5v4eQZBGvMGBGP1SwrNnioM75U03ao4LZ0cLjGOfcjxVzWrudZYTcnkWvnHD8I0dSlqJl0Xnk6SPW0tfGyRUruSSYR13O4sGatXTSGTuKo6o7dGU7ZbX6lpz+C3elvj8jdS06DCbex9TDCqtbI7kgThsiT5zl3VDQe0pOrrr5G+L05Zo77otO+0dMwSdcZ+oo8m6/4n0tZUexOpXYKg7Rk2rmvLGKJKKnAhUjSVcu4i86hCMjUrRMgGEqGfhFz+CvYrxBCVNJlT9BvqaU08rzTR6CjOmEJryAgcTxrAnygbfiKH4nLbBPVTCM1wS6doIjBDm2ArDprJXOYE9l56Xa3ow+RU6ugYyshqVUeFKQMxU1vm/wzKvj1iycw1z3L9jppsLk5z9+fa4IweSbIVREyitj6H67hUOqF6WFfsJ9w+optD+sPZJUk35JracXYjknIXkqmWIa7p4XkNyuc6zngZOavdzUsy5X/xwKhoS5cPZlUEymUV1zs1gec1SX6vSZFG/AIUd3x+di4PXx4z6MRLJLVdckseCwADOaF7nj9Tp+Cc8R5joSUtLWaK7t02gXX6vb71GSV3UIKlS78jPYRLLvB2wcUlktEcsdh4nhGIt287NY79ymFy/fYoJgnikuMCeK6U+snkVjQrSSr3k0mgez775YSeHL7gzedt2pC35vBZwmI1hbzHG9RzT/YIJUowUTo/ld0E6gHGy4t2i8f3inpGxK1bi12hJjHA0UmdbC4EX1Izbrma4Wz6rj+0gJNUWp/D3kbbl4hSxnCOpY8Q0TRTt8zQClS8KhXbi3yQxzp6ix7uR8m81Y7sjk7cDdZzOCiWrwoW0Ymeir3tzKD0YlWEHKYWuJBe6/S9UBldSizwwNijk+f8XEO6Zo+39qoQAAAAASUVORK5CYII=') no-repeat center right;
    padding-right: 20px; 
    text-decoration: underline;
}

a[href ^= 'https://developer.mozilla.org'] {
    color:cornflowerblue;
    background: transparent url('../images/MDN.png') no-repeat center right;
    padding-right: 22px; 
    text-decoration: underline;
}

a[href ^= 'https://getbootstrap.com'] {
    color:#563d7c;
    background: transparent url('../images/bootstrap.png') no-repeat center right;
    padding-right: 22px; 
    text-decoration: underline;
}
a.link {
    background: transparent url('../images/link.png') no-repeat center right;
    padding-right: 30px; 
}

/**
 * pour les dialogues modals affichant les solutions
 */

.modal-header {
    background-color: #f2dede;
    /* height:250px;
      overflow:auto;
    */
}
.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

/* ###############################
banière de titre  de la page
##################################*/
        .titreCours {
            color: white;
            margin: 0px;
            padding-left:10px;
            padding-top:10px;
            padding-bottom:10px;
        }
        .titreCours span {
            font-size: 1.5rem;
        }