//:root {
//  --fondcol: brown;
//  --tdcoul1: lightgrey ; // sombre
//  --tdcoul2: white ; // clair
//  --tdcolor: navy ;
//  --thcoul1: darkslateblue ; // sombre
//  --thcoul2: lightsteelblue; //clair
//  --thcolor: yellow;
//}



body   {  max-width:1024px; max-height:1024px; background-repeat:no-repeat;  background-position:center top; font-family: Verdana; font-size:10px;  }
#wrapper { position: absolute; background-repeat: no-repeat; width: 1024px; margin-left: -512px; left: 50%; height: 850px; margin-top: 2px; }
#bottom { position:absolute; width: 1024px; height: 41px; top:860px; margin-left: -512px; left:50%; text-align:center; color:#592a01;  }
#bottom p { font-family: Arial, Helvetica, sans-serif; font-style:normal; font-weight:normal; font-size:100%; padding-top:15px;   }
#bottom h2 { font-family: Arial, Helvetica, sans-serif; font-style:normal; font-weight:bold; font-size:120%;  padding-top:15px; }



h1 {	margin-top: 0px;	font-weight: bold;	font-size: 110%; }
h2 { 	margin-top: 0px;  font-weight: bold; 	font-size: 120%; }
h3 {	margin-top: 0px;  font-weight: bold;   font-size: 80%; }
h4 {	margin-top: 0px; 	font-weight: normal; 	font-size: 130%; }
h5 {  margin:.2em .5em; padding:0.1em .5em;border:2px solid black;font-weight:bold;background-color: red;color:yellow; font-size:120%; }
h6 {	margin-top: 0px; 	font-weight: normal; 	font-size: 200%; }

ul.auto-list{ display: none; position: absolute; top: 0px;left: 0px; border: 1px solid green;	background-color: lightyellow; padding: 0; margin:0; list-style:none; }
ul.auto-list > li:hover,
ul.auto-list > li[data-selected=true]{ 	background-color: peru; }
ul.auto-list > li{ border: 1px solid gray; cursor: default; padding: 2px; }
mark { font-weight: bold; }


form    {   padding:10px;    }
fieldset  {  padding:0 20px 20px 20px;  margin-bottom:10px;  border:1px solid #DF3F3F;  }
legend    {  color:#DF3F3F;  font-weight:bold  }
label     {  margin-top:10px;  display:block;  }
label.inline   { display:inline;  margin-right:50px;  }
input, textarea, select, option   { background-color:beige; }
input, textarea, select  {  padding:3px;  border:1px solid black;  border-radius:5px;  box-shadow:1px 1px 2px grey inset;  }
select { margin-top:0px; }
input[type='radio']  { background-color:transparent;  border:none; }
input[type='text']   { background-color: ivory;  font-size: 120%; color: midnightblue   ;  }

.sample { margin:0px;padding:0px; box-shadow: 10px 10px 5px #888888; border:1px solid #000000; 
         -moz-border-radius-bottomleft:8px; -webkit-border-bottom-left-radius:8px; border-bottom-left-radius:8px;
	       -moz-border-radius-bottomright:8px;  -webkit-border-bottom-right-radius:8px; border-bottom-right-radius:8px;
	       -moz-border-radius-topright:8px; -webkit-border-top-right-radius:8px; border-top-right-radius:8px;
	       -moz-border-radius-topleft:8px; -webkit-border-top-left-radius:8px; 	border-top-left-radius:8px; }
        
.sample th {font-size:100%;background-color:darkslateblue;color:yellow;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:center;}
.sample tr {background: -o-linear-gradient(top,lightgrey,var(--tdcoul2));background:-moz-linear-gradient( center top, lightgrey 5%, var(--tdcoul2) 100% );}
.sample td {background: -o-linear-gradient(top,lightgrey,var(--tdcoul2));
            background:-moz-linear-gradient( center top, lightgrey 5%, white 100% );
            color:darkslateblue; font-size:100%;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
.sample tr:hover {background-color:#ffffff;}


.button { color: yellow; padding: 3px 3px 5px; background-color:darkslateblue ; border: none; font-style:italic; font-size:110%; font-weight:normal; margin-right: 5px; position: relative;
	       -webkit-user-select: none; -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
	       -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
	       box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);  -webkit-border-radius: 3px;  -moz-border-radius: 3px;
	       border-radius: 3px; -webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);  -moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);    }
.button:hover { 
         color: darkslateblue; padding: 3px 3px 5px; background-color:lightsteelblue; border: none; font-size:110%; font-style:normal; font-weight: normal; margin-right: 5px; position: relative;
	       -webkit-user-select: none; -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
	       -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
	       box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;
	       -webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);  -moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);   }
.button:active
        {
          font-size:120%; position: relative; top: 3px; -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
         -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
          box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	      }
.button:after { content: ''; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }