@font-face {
	font-family: 'evolapsfont';
	src: url('font/SFProDisplay-Thin.woff2') format('woff2'),
		 url('font/SFProDisplay-Thin.woff') format('woff');
	font-weight: normal;
	font-style: normal;
  }
  /*
  @font-face {
	font-family: 'evolapsfontbold';
	src: url('font/SFProDisplay-Semibold.woff2') format('woff2'),
		 url('font/SFProDisplay-Semibold.woff') format('woff');

  }
  */
html {
	background: #EEE;
	font: 10px evolapsfont;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
}

body {
	background: #EEE;
	font: 14px evolapsfont;
	margin: 0 auto;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
	width: 99%;
	font-weight: lighter;
	font-weight:200;

}

.tutorial {
	width: 100%;
	font: 16px evolapsfont;
	font-style: normal;
	color: #142d39;
	font-weight: lighter;
	text-align:left;
}


#logotitre {
	font-size: 40px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: #336699;
	display: inline;
	vertical-align: top;
	text-align: left;
	opacity: 0.9;

}
#titrelogo {
	font-size: 40px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: #336699;
	display: inline;
	vertical-align: top;
	text-align: left;
	opacity: 0.9;
	font-style: italic;
}


#logotitre2 {
	font-size: 20px;
	font-weight: 400;
	font-family: evolapsfont;
	color:  #D2691E;
	letter-spacing: 2px;
	display: inline;
	vertical-align: top;
	text-align: left;
	opacity: 0.9;
}

.summary {
    font-size:120%;
    color: #808080;
    margin:20px 0px 20px 0px;
    border-left: 5px solid #D2691E;
    padding-left: 10px;
}
.summary:before {
    content: "Summary: ";
    font-weight: bold;
}


.tdfig {
	text-align:left;
	vertical-align: center;
	width:200px;
	background-color : #ADD8E6;
	opacity : 0.5;
	font-weight: 400;
	font-family: evolapsfont;
    }
    
.docimage200 {
    width:200px;
}
.docimage300 {
    width:300px;
}
.docimage400 {
    width:400px;
}
.docimage600 {
    width:600px;
}

.diaplaybloc {
    padding-top: 20px;
    padding-bottom: 20px;
}
.title-main {
    font-size:140%;
    color: #808080;
    margin:00px 0px 20px 0px;
    border-left: 0px solid #ED1951;
    padding-left: 0px;

}

.maintext {
    font-size:110%;
    color: #333;
    margin:20px 0px 20px 0px;
    border-left: 5px solid #D2691E;
    padding-left: 10px;
}

.textmain {
    font-size:120%;
    color: #000;
    margin:0px 0px 20px 0px;
    border-left: 0px solid #556B2F;
    padding-left: 10px;
}

.textfig {
    font-size:100%;
    color: #000;
    margin:0px 0px 20px 0px;
    border-left: 0px solid #556B2F;
    padding-left: 10px;
}
.textfig2 {
    font-size:100%;
    color: #000;
    margin:20px 0px 20px 0px;
    border-left: 5px solid #CCC;
    padding-left: 10px;
}

div#toc ul li {
    margin: 8px 0px 8px 22px;
    font-size: 100%;
    list-style: square;
}
div#toc ul {
    background-color: #BBB;
    opacity: 1;
    padding: 5px;
    border-radius: 5px;
    max-width: 100%;
    color: black;
}

div#toc a:link {
	text-decoration: none;
	color: #336699;
}
/* visited link */
div#toc a:visited {
	text-decoration: none;
	color: #336699;
}
/* mouse over link */
div#toc a:hover {
	text-decoration: none;
	color: #336699;
	font-weight: 400;
}
/* selected link */
div#toc a:active {
	text-decoration: none;
	color: #336699;
}

div#toc ul li ul {
    padding-left:8px;

}

div#toc ul li ul li::before {
    content: "–  ";
}

div#toc >ul::before {
    content: "Table of Contents";
    font-weight: 500;
    color: #555;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:70px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:10px;
}
div#toc ul li ul li {
    list-style-type: none;
    margin: 5px 0px 0px 0px;
}

h2 {color: #444; font-weight:400; font-size:130%; padding-top:30px;}
h3 {color: #666; font-weight:400; font-size:110%;}
h4 {color: #666; font-weight:400; font-size:100%; font-style:italic;}

.nav, .nav ul, .nav li  {
	list-style: none;
	font-family: evolapsfont;
	font-weight: 200;
	width: 250px;
}
.nav ul {
	padding: 0;
	margin: 0 0 0 0px;
}
.nav {
	padding: 4px;
	margin: 0px;
}
.nav > li {
	margin: 4px 0;
}
.nav > li li {
	margin: 2px 0;
}
.nav a {
	color: #333;
	display: block;
	outline: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-decoration: none;
}
.nav li > a > span {
	float: right;
	font-size: 19px;
	font-weight: bolder;
}
.nav li > a:hover > span {
	color:  #5D5D5D;
}
.nav li > a > span:after {
	content: '\25be';
}
.nav li.open > a > span:after {
	content: '\25b4';
}
.nav a:hover, .nav li.active > a {
	background-color: #5D5D5D;
	color: #f5f5f5;
}
.nav > li.active > a  {
	background-color: #29627e;
}
.nav li a {
	font-size: 12px;
	line-height: 18px;
	padding: 2px 2px;
}
.nav > li > a {
	font-size: 14px;
	line-height: 20px;
	padding: 2px 2px;
}
.nav li a:focus {
	background-color: #5D5D5D;
	color: #f5f5f5;
}