/* radio*/
	[type="radio"]:not(:checked),
	[type="radio"]:checked {
		position: absolute;
		left: -9999px;
	}
	[type="radio"]:not(:checked) + label,
	[type="radio"]:checked + label {
		position: relative;
		padding-left: 25px;
		cursor: pointer;
	}
	/* radio*/
	[type="radio"]:not(:checked) + label:before,
	[type="radio"]:checked + label:before {
		content: '';
		position: absolute;
		left:2px; top: 0px; right:2px;
		width: 17px; height: 17px;
		border: 1px solid #aaa;
		background: #f8f8f8;
		border-radius: 3px;
		box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
	}
	/* Active le radio*/
	[type="radio"]:not(:checked) + label:after,
	[type="radio"]:checked + label:after {
		content: '';
		position: absolute;
		top: 4px; left: 6px;
		font-size: 14px;
		color: #333;
		line-height: 1.30;
		width: 11px; height: 11px;
		/*background: #006ABC;*/
			border-radius: 3px;
		box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}
	/* Change le bouton radio */
	[type="radio"]:not(:checked) + label:after {
		opacity: 0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	}
	[type="radio"]:checked + label:after {
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
	/* disabled checkbox */
	[type="radio"]:disabled:not(:checked) + label:before,
	[type="radio"]:disabled:checked + label:before {
		box-shadow: none;
		border-color: #bbb;
		background-color: #ddd;
	}
	[type="radio"]:disabled:checked + label:after {
		color: #999;
	}
	[type="radio"]:disabled + label {
		color: #aaa;
	}
	/* accessib */
	[type="radio"]:checked:focus + label:before,
	[type="radio"]:not(:checked):focus + label:before {
		border: 1px dotted blue;
	}
		/* checkbox */
	[type="checkbox"]:not(:checked),
	[type="checkbox"]:checked {
		position: absolute;
		left: -9999px;
	}
	[type="checkbox"]:not(:checked) + label,
	[type="checkbox"]:checked + label {
		position: relative;
		padding-left: 25px;
		cursor: pointer;
	}
	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before {
		content: '';
		position: absolute;
		left:0; top: 0px;
		width: 17px; height: 17px;
		border: 1px solid #aaa;
		background: #f8f8f8;
		border-radius: 3px;
		box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
	}
	/* checkbox actif */
	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		content: '';
		position: absolute;
		top: 4px; left: 4px;
		font-size: 14px;
		color: #333;
		line-height: 1.30;
		width: 11px; height: 11px;
		/*background: #<!--#4DIF vCaseacoche#""--><!--#4DVAR vCaseacoche-->;<!--#4DELSE-->006ABC;<!--#4DENDIF-->*/
		border-radius: 3px;
		box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}
	/* checkbox la checkbox */
	[type="checkbox"]:not(:checked) + label:after {
		opacity: 0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	}
	[type="checkbox"]:checked + label:after {
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
	/* dEsactive checkbox */
	[type="checkbox"]:disabled:not(:checked) + label:before,
	[type="checkbox"]:disabled:checked + label:before {
		box-shadow: none;
		border-color: #bbb;
		background-color: #ddd;
	}
	[type="checkbox"]:disabled:checked + label:after {
		color: #999;
	}
	[type="checkbox"]:disabled + label {
		color: #aaa;
	}
.container	{
	width:100%;
	max-width:974px;
	min-width:0;
	background-color:#f1f1f1;
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin:auto;
    left:0;
    right:0;
    height:auto;
    bottom:auto;
	display:none;
	color:#000;
}

#conteneur{
	color:#333; line-height:20px;
}
#contenu td{
	color:#333; line-height:20px;
}
#contenu{
	color:#333; line-height:20px;
}
#contenu a {
	color: #333;
	font: 1.1em "Arial", Verdana, sans-serif; line-height:20px;
}

#contenu a:hover {
	color: #ff0000;
	font: 1.1em "Arial", Verdana, sans-serif; line-height:20px;
}
.formulaire{
	color:#000;
}
legend{
font: bold 0.9em Arial, Helvetica, sans-serif;
border-radius: 5px;
color: #fff;
background: #333;
border-top: 1px solid #333;
border-right: 1px outset #fff;
border-bottom: 1px outset #fff;
border-left: 1px solid #333;
border-radius: 3px;
text-align: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow:0 0 3px #111;     
-moz-box-shadow:0 0 3px #111;     
box-shadow:0 0 3px #111;

}
.submit {
color:#FFF;
font: bold 0.9em Arial, Helvetica, sans-serif;
background: #333;
border-top: 1px solid #333;
border-right: 1px outset #333;
border-bottom: 1px outset #333;
border-left: 1px solid #333;
border-radius: 3px;
text-align: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow:0 0 3px #111;     
-moz-box-shadow:0 0 3px #111;     
box-shadow:0 0 3px #111;
Letter-Spacing:0pt;	
padding: 2px 2px 2px 2px;

}
.submit_bas {
color:#333;
font: bold 0.9em Arial, Helvetica, sans-serif;
background: #fff;
text-align: center;
border-top: 1px inset #ccc;
border-right: 1px solid #E8E8E8;
border-bottom: 1px solid #E8E8E8;
border-left: 1px inset #ccc;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow:0 0 3px #111;     
-moz-box-shadow:0 0 3px #111;     
box-shadow:0 0 3px #111;
Letter-Spacing:0pt;	
padding: 2px 2px 2px 2px;
}
#codecontainer {
    width:50%;
    float:left;
}
.codecontainer .radio {
	line-height:2;
}
.resultcontainer {
    width:48%;
    float:left;
}
.playit {
    background-color:#ffffff;
    padding:15px;
    margin:15px;
    margin-top:0;
    font-family:Arial,'Courier New', Courier, monospace;
    font-size:16px;
}
#enlargecssprop	{
	font-weight:bold;
	color:#000;
}
#demoDIV {
	margin-left:10px;
	margin-top:3px;
	margin-right:15px;
	background-color:#ffffff;
	border:1px solid #c3c3c3;
	height:280px;
}
    pre#t1 {
    tab-size: 8;
}	
#styleDIV {
	font-family:Arial,Courier new;
	font-size:14px;
	margin-left:10px;
	margin-right:15px;
	background-color:#ffffff;
	padding:10px;
	color:#222222;
	text-align:left;
	}
div.demoHeader {
	font-size:24px;
	margin-top:15px;
	margin-left:15px;
	margin-bottom:15px;
	color:#555555;
}
div.playitFooter {
	font-size:14px;
	color:#555555;
	padding:15px;
}
#pfooter {
	margin:15px;
}
@media screen and (max-width: 728px) {
    .codecontainer {
        width:100%;
        text-align:center;
    }
    .resultcontainer {
        width:100%;
        text-align:center;
    }
    .playitFooter {
	    display:none;
    }
    .container {
	    top:60px;
    }
}	

body{}
h1 {	
	font-size: 1.0em;
	color: #333;
	margin-bottom: 0em;
	}
#contenu h1 {color: #000;}

#contenuindex
	{
	font-size:1.1em
	}
	#tableau {
    font-family: "Arial", "Lucida Grande", Sans-Serif;
    font-size: 11px;
    margin: 0px 0;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
	font-weight: 10px;
}
#tableau thead tr th {
    height:100%;
    font-size: 17px;
    color: #fff;	
    text-align:center;
}
#tableau th {
    font-size: 13px;
    font-weight: normal;
    padding: 1px;
    background: #b9c9fe url('/htm/img/gradhead.png') repeat-x;
    border-top: 0px solid #d3ddff;
    border-bottom: 0px solid #ccc;
    color: #039;
}
#tableau tr{
}
#tableau td {
    padding: 8px;
   width: 10%;
    color: #669;
    border-top: 0px solid #ccc;
    background: #fff;
	
}
#tableau tfoot tr td {
    background: #e8edff;
    font-size: 16px;
    color: #99c;
    text-align:center;
	 height:9px;
}
#tableau a:hover {
    text-decoration:underline;
}
textareaa:hover {
    text-decoration:underline;
}
.champ{width: 20%;}	

.formulaire{
background: #fff;
line-height:0.5em;
}
.onglet
	{
		display:inline-block;
		margin-left:1px;
		margin-right:1px;
		padding:3px;
		border:0px solid black;
		cursor:pointer;
		/*COLOR:#003300;*/
		color: #000;

	}
.onglet_0
	{
		background:#fff;
		border-bottom:0px solid #fff;
		border-radius: 5px 5px 0px 0px;   
		border-bottom:3px solid #006ABC;
        padding-bottom:2px;
		
		
	}
.onglet_1
	{
    color:#000;
	font: bold 0.9em Arial, Helvetica, sans-serif;
	/*background-image: url("/htm/img/242681_seryj_-goluboj_-lenta_1680x1050_www.Gde-Fon.com.jpg");*/
	background-image:-moz-linear-gradient(left, white, #C8C8C8);
    background-image:linear-gradient(to right, white, #C8C8C8);
	border-radius: 5px 5px 0px 0px;
	-webkit-box-shadow:0 0 3px #111;     
	-moz-box-shadow:0 0 3px #111;     
	box-shadow:0 0 3px #111; 
	border-bottom:0.1px solid #fff;

	
	}
.contenu_onglet
	{
		/*background-color:#F1F4FD;*/
		background-image:-moz-linear-gradient(left, white, #C8C8C8);
		background-image:linear-gradient(to right, white, #C8C8C8);
	/*	background-image: url("/htm/img/242681_seryj_-goluboj_-lenta_1680x1050_www.Gde-Fon.com.jpg");*/
		border:0px solid black;
		margin-top:-1px;
		padding:1px;
		display:none;
		border-left: 2px solid rgba(63,148,148, 0.1);
		box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 0 3px 3px 3px;
		-moz-border-radius: 3px;
     	-webkit-border-radius: 3px;
	    -webkit-box-shadow:0 0 3px #111;     
	    -moz-box-shadow:0 0 3px #111;     
	    box-shadow:0 0 3px #111; 
		
		
		
	}
ul
	{
		margin-top:0px;
		margin-bottom:0px;
		margin-left:-10px
	}
	h1
	{
		font-size: 0.8em;
		margin:0px;
		padding:0px;
	}
	h2
	{
	/*	font-size: 1.1em;*/
		margin:0px;
		padding:0px;
	/*	COLOR:#000;*/
	}
	.clear-shadow {
    background: #5ba4a4;
	position: relative;
	top: 0;
    height: 10px;
	margin-bottom: -10px;
    clear: both;
	z-index: -2;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2);
    border-radius: 3px;
}
.liens{
	width: auto;
	text-align: left;
	border-left: 0px solid #ccc;
	margin: 0.5em;
	padding: 0.5em;
	font-size: 0.95em;
	font-family: "Trebuchet MS";
}	
.date{
font-size: 0.8em;
}	
.focus {
	background: #F3F3F3;
	width: 64%;
	color: #006ABC;
	font-style: italic;
	margin: 0px;
	padding: 0px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-webkit-box-shadow:0 0 3px #111;     
	-moz-box-shadow:0 0 3px #111;     
	box-shadow:0 0 3px #111;
}
.focus2 { /* idem mais pour les zones des dates */
	background: #F3F3F3;
	width: 15%;
	font-style: italic;
	color: #333;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-webkit-box-shadow:0 0 2px #111;     
	-moz-box-shadow:0 0 2px #111;     
	box-shadow:0 0 2px #111;
}

.Champ_{
width: 50px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 text-align: center;
}
.Champ_select{
background: #f5f5f5;
color: #333;
width: 50px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #333;
text-transform: uppercase;
 text-align: center;
}
.Champ_saisie{
background: #fff;
color: #333;
width: 50px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 text-align: center;
}
.police{
width: 60%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #fff;
color: #333;
}
.police_select{
width: 60%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #d8e3ef;
color: #ccc;
}
select{
width: 20px;
background: #f1f4fd;
color: #333;
}
.tab_service{
 color:#000;
  font: 1em Arial, Helvetica, sans-serif;
  line-height:13px
}
.champ_couleur{
width: 150px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 text-align: center;
}
.champ_couleur_select{
width: 150px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 text-align: center;
}
.Champ_style{
width: 150px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 text-align: center;
}
.Champ_select_style{
color: #333;
width: 150px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #333;
text-align: center;
border-style: solid;
}
input:focus {
background-color: #FFF0F5;
}
/*message d'alerte de modification*/
  #bsaHolder{right: 25px;position: fixed;bottom: 20px;min-width: 200px;min-height: 10px;z-index: 10;}
  #bsaHolder span{text-shadow:1px 1px 0 #fff;background-color:#00ff00;}
  #bsap_aplink,
  #bsap_aplink:visited{bottom: 10px;color: #aaa;font: 11px arial, sans-serif;position: absolute;right: 14px;border:none;}
  #bsaHolder .bsa_it_p{display:none;}
  .bsap{
  color:#000;
  font: bold 0.7em arial, Helvetica, sans-serif;
  text-align: left;
  background: -moz-linear-gradient(#fff, #fff, #fff) repeat scroll 0 0 transparent;
  background: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(0, #f3f3f3),color-stop(0.5, #fff),color-stop(1, #f3f3f3)); 
  background-color:#fff;
  border-color: #00ff00;
  overflow: hidden;
  padding: 5px;
  box-shadow: 0 0 7px #00ff00;
  border-radius: 7px;
  }
  #bsaHolder img{display:block;border:0;}
  #bsa_closeAd{width:15px;height:15px;overflow:hidden;position:absolute;top:10px;right:11px;border:none !important;z-index:1;}
ul{margin-top:0px;margin-bottom:0px;margin-left:-10px}
h1{font-size: 0.5em;margin:0px;padding:0px;}
h2{font-size: 1.1em;margin:0px;padding:0px;COLOR:#000;}
.clear-shadow {background: #5ba4a4;position: relative;top: 0;height: 10px;margin-bottom: -10px;clear: both;z-index: -2;box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2);border-radius: 3px;}
.liens{width: auto;text-align: left;border-left: 0px solid #ccc;margin: 0.5em;padding: 0.5em;font-size: 0.95em;font-family: "Trebuchet MS";}	
.date{font-size: 0.8em;}	
.btn a:hover {color: #333;}
.message {margin:0 auto;padding:10px;border:2px dashed #ca0000;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.submit{font-size: 0.8em;width:190px;text-align: center;color: #FFF;padding: 3px 3px 3px 3px;Letter-Spacing: 0pt;}
.submit_bas {font-size: 0.8em;width:190px;color: #000;text-align: center;padding: 3px 3px 3px 3px;Letter-Spacing: 0pt;}
#black tr:nth-child(odd){background-color:#FFF;color: #fff;}
#demo tr:nth-child(odd){background-color:#FFF;color: #fff;}
.affich{color: #006ABC;background-color:#FFF;border-left: 0px solid #ccc;border-top: 0px solid #ccc;border-right: 0px solid #ccc;border-bottom: 0px solid #ccc;font-size: 1em;}
.w3-disabled,.w3-btn:disabled,.w3-btn-floating:disabled,.w3-btn-floating-large:disabled{cursor:not-allowed;opacity:0.3}
.w3-btn.w3-disabled *,.w3-btn-block.w3-disabled,.w3-btn-floating.w3-disabled *,.w3-btn:disabled *,.w3-btn-floating:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn-block.w3-disabled:hover,.w3-btn:disabled:hover,.w3-btn-floating.w3-disabled:hover,.w3-btn-floating:disabled:hover,
.w3-btn-floating-large.w3-disabled:hover,.w3-btn-floating-large:disabled:hover{box-shadow:none}
.w3-btn:hover,.w3-btn-block:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{box-shadow:0 5px 5px 0 rgba(0,0,0,0.2),0 0px 0px 0 rgba(0,0,0,0.19)}
.w3-btn-block{width:100%}
.w3-btn,.w3-btn-floating,.w3-btn-floating-large,.w3-closenav,.w3-opennav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn-floating,.w3-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:12px;cursor:pointer;font-size:24px}
.w3-btn-floating{width:60px;height:60px;line-height:70px}
.w3-btn-floating-large{width:60px;height:65px;line-height:60px}
.w3-btn-group .w3-btn{float:left}
.w3-btn-bar .w3-btn{box-shadow:none;background-color:inherit;color:inherit;float:left}
.w3-btn-bar .w3-btn:hover{background-color:#ccc;height:40px}
.w3-example{background-color:#f1f1f1;padding:0.01em 16px}
.w3-code{font-family:Consolas,"courier new";font-size:16px;line-height:1.4;width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #009688;word-wrap:break-word}
.w3-example,.w3-code,.w3-reference{margin:20px 0}
.w3-btn, .w3-btn:link, .w3-btn:visited {color:#FFFFFF;border-radius:4px;background-color:#FFFFFF;background-color:#FFFFFF;  box-shadow: 0 0px 0px rgba(0,0,0,0.12), 0 0px 0px rgba(0,0,0,0.24);}
.w3-btn:hover, .w3-btn:active {background-color:#ffffff;color:#73AD21;color:#4CAF50;box-shadow:0 1px 6px 0 rgba(0,0,0,0.2),0 1px 6px 0 rgba(0,0,0,0.19);}
a.w3-btn[href*="exercise.asp"] {margin:10px 5px 0 0;}