* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    color:#000000;
    margin:0px;
    background-color: #d0d0d0;
}



#sauvegarde{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: none;
	background-color: rgba(0,0,0,0.8);
	z-index: 20500;
}


#nomFichier{
	width: 400px;
	margin: auto;
	margin-top: 200px;
	background-color: rgb(235,235,235);
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
	border-top: solid 20px black;
}



#textareaContainer{
	position: absolute;
	top: 50px;
	left: 20px;
	width: calc(40%);
	height: 90%;

}



#textareaCode {

	width: 100%;
	background-color: #f0f0f0;
   font-family: consolas,"courier new",monospace;
   font-size:200%;
   height:100%;;
  
   padding:8px;
   resize: none;
   border:none;
   box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    
}

#resultats{
	position: absolute;
	top: 50px;
	right: 10px;
	height: 700px;
	width: 400px;
	background-color: #ffffff;
	overflow-y: auto;
	padding: 10px;
	border: solid 0px black;
	box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
	font-size: 100%;
}



.cadre{
	padding: 2px;
	border: solid 1px black;
	background-color: #ffffff;
	cursor:pointer;
	}

button{
	border: solid 1px rgb(150,150,150);
	width: 70px;
}

.boutonR{
	background-color: #ff0000;
	cursor:pointer;
	}
.boutonV{
	background-color: #31B404;
	cursor:pointer;
	}
.boutonB{
	background-color: #2E2EFE;
	cursor:pointer;
	}
.boutonBlanc{
	background-color: #ffffff;
	overflow: hidden;
	cursor:pointer;
	padding: 5px;
	width: 70px;
	}

.boutonBlanc:hover{
	background-color: #c0c0c0;
	color: #ffffff;	
	}

.boutonBlancRouge{
	background-color: #ffffff;
	color: #ff0000;
	font-weight: bold;
	cursor:pointer;
	}
.boutonUnderline{
	text-decoration: : underline;
	background-color: #ffffff;
	cursor:pointer;
	}
.boutonGras{
	font-weight: bold;
	background-color: #ffffff;
	cursor:pointer;
	}
.boutonIt{
	font-style: italic;
	background-color: #ffffff;
	cursor:pointer;
	}
.boutonMaths{
	background-color:#81BEF7;	
	cursor:pointer;
	}
.boutonJaune{
	background-color: #F2F5A9;
	cursor:pointer;
	}
.boutonRose{
	background-color: #F781F3;
	cursor:pointer;
	}


#boutonNoir{
	background-color: #ffffff;
	color: #707070;
	font-weight: bolder;
	position: fixed;
	bottom: 0px;
	left: 50%;
	z-index: 300;
	cursor:pointer;
	}

#canvas {
	border:10px solid #999; 
	border-radius:20px; 
	margin:0 auto 20px auto; 
	display:block; 
	background:#fff; 
	cursor:crosshair
}






.caseBlanche{
	background-color: #ffffff;
	text-align: center;
	margin: auto;
}


	
	





#menu{
	position: fixed;
	top: -10px;
	left: 10px;
	display: flex;
	text-align: center;
	z-index: 500;
	width: 100%;	
}

#menu2{
	position: fixed;
	top: -10px;
	left: 10px;
	display: flex;
	text-align: center;
	z-index: 500;
	width: 100%;	
}

.boutonBlanc2{
	background-color: #ffffff;
	overflow: hidden;
	cursor:pointer;
	padding: 5px;
	width: 100%;
	visibility: hidden;
	z-index: 0;
	}




.entrees{
	padding: 2px;
	background-color: rgba(255,255,255,0);
}

.entrees li{
	visibility: hidden;
	list-style:none;
	background-color: rgba(255,255,255,0.9);
}

.entrees li:hover{
	background-color: #c0c0c0;
	color: #ffffff;	
}

.entrees:hover li{
	visibility: visible;
}

.encadre:hover{
	background-color: #c0c0c0;
	color: #ffffff;	
	}


.encadre{
	border: solid 1px black;
	padding: 5px;
	background-color: rgba(255,255,255,0.95);
	border-radius: 3px;
}


.filename{
	padding: 5px;
}


#result{
	padding: 5px;
}







.seeResult {
    padding: 5px;
    %font-size:15px;
    background-color:#555555;
    color:#ffffff;
    
    width:auto;
	 cursor:pointer;  
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  
    
    
}
.seeResult:hover {
    background-color:#c0c0c0;
    color:#000000;
}
.seeResult:active {
    background-color:#f1f1f1;
}

















#menu-demo2 li:hover{
	box-shadow: 1px 1px 3px rgb(150,150,150);
	z-index: 10000;
	
}

#menu-demo2 li ul{
	box-shadow: 1px 1px 3px rgb(150,150,150);
}


#menu-demo2, #menu-demo2 ul{
	position: fixed;
	top: 0px;
	left: 0px;
	padding:0;
	margin:0;
	list-style:none;
	text-align:center;
	z-index: 1000;
}

#menu-demo2 li{
	display: inline-table;
	position:relative;
	border-radius:0px 0px 0px 0px;
	margin-right: -4px;
	
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 0px 0px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
top: 33px;
overflow: hidden;
//-moz-transition: .8s all .3s;
//-webkit-transition: .8s all .3s;
//transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
	max-height:45em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
	background-color: rgb(220,220,220);
//background-color: #65537A;
//background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
//background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
	background-color: rgb(220,220,220);
//background-color: #729EBF;
//background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
//background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
	background-color: rgb(220,220,220);
//background-color: #F6AD1A;
//background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
//background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}

#menu-demo2 li:nth-child(4){
	background-color: rgb(220,220,220);
//background-color: #CFFF6A;
//background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
//background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}

#menu-demo2 li:nth-child(5){
	background-color: rgb(220,220,220);
//background-color: #800080;
//background-image:-webkit-linear-gradient(top, #9683EC 0%, #800080 100%);
//background-image:linear-gradient(to bottom, #9683EC 0%, #800080 100%);
}

#menu-demo2 li:nth-child(6){
	background-color: rgb(220,220,220);
//background-color: #288276;
//background-image:-webkit-linear-gradient(top, #65C0B4 0%, #288276 100%);
//background-image:linear-gradient(to bottom, #65C0B4 0%, #288276 100%);
}

#menu-demo2 li:nth-child(7){
	background-color: rgb(220,220,220);
//background-color: #729EBF;
//background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
//background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}

#menu-demo2 li:last-child{
	background-color: rgb(220,220,220);
//background-color: #000000;
//background-image:-webkit-linear-gradient(top, #aaa 0%, #444 100%);
//background-image:linear-gradient(to bottom, #aaa 0%, #444 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
	background-color: rgb(220,220,220);
//background:#2A2333;
}
#menu-demo2 li:nth-child(2) li{
	background-color: rgb(220,220,220);
//background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
	background-color: rgb(220,220,220);
//background:#9F391A;
}

#menu-demo2 li:nth-child(4) li{
	background-color: rgb(220,220,220);
//background:#677F35;
}

#menu-demo2 li:nth-child(5) li{
	background-color: rgb(220,220,220);
//background:#800080;
}

#menu-demo2 li:nth-child(6) li{
	background-color: rgb(220,220,220);
//background:#288276;
}

#menu-demo2 li:nth-child(7) li{
	background-color: rgb(220,220,220);
//background:#729EBF;
}


#menu-demo2 li:last-child li{
	
	background-color: rgb(220,220,220);
//background:#777;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
	background-color: rgb(180,180,180);
//background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
	background-color: rgb(180,180,180);
//background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
	background-color: rgb(180,180,180);
//background:#F6AD1A;
}

#menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(4) li:hover{
	background-color: rgb(180,180,180);
//background:#CFFF6A;
}

#menu-demo2 li:nth-child(5):hover, #menu-demo2 li:nth-child(5) li:hover{
	background-color: rgb(180,180,180);
//background:#9683EC;
}

#menu-demo2 li:nth-child(6):hover, #menu-demo2 li:nth-child(6) li:hover{
	background-color: rgb(180,180,180);
//background:#65C0B4;
}

#menu-demo2 li:nth-child(7):hover, #menu-demo2 li:nth-child(7) li:hover{
	background-color: rgb(180,180,180);
//background:#729EBF;
}

#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
	background-color: rgb(180,180,180);
//background:#aaa;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 20px;
color:rgb(100,100,100);
font-family:arial;
	

}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:rgb(100,100,100);
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}