/* HTML elements  */		

	h1, h2, h3, h4, h5, h6{
		font-weight:normal;
		margin:0;
		line-height:1em;
		}	
@media (max-width: 800px) {
    .hide-on-mobile {
      display: none;
    }
}
@media (max-width: 800px) {
  .reduce-on-mobile tr th:first-child,
  .reduce-on-mobile tr td:first-child {
    display: none;
  }
}

}

	h1{font-size:2em;margin-bottom:.5em;}
	.aide h1{color:#006666; font-size:15px; font-weight:bold;}
	h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;}	
	h3{font-size:1.7em;margin-bottom:.7em;padding-top:.3em; color:#006666; font-weight:bold;}
	h4{font-size:1.3em;margin-bottom:.4em; color:#006666; font-weight:bold;}
	h5,h6{font-size:1.1em;margin-bottom:.5em;font-weight:bold; color:#006666;}
	
	p, blockquote, ol, dl, form, pre{line-height:inherit;margin:0 0 1.4em 0;}
	/*ul, ol, dl{padding:0;}*/
	ul ul, ul ol, ol ol, ol ul, dd{margin-top : 0px;}
	li{margin:0 0 0 0;padding:0;display:list-item;list-style-position:outside;outline: none;}
	blockquote, dd{padding:0 0 0 2em;}
	pre, code, samp, kbd, var{font:100% mono-space,monospace;}
	pre{overflow:auto;}
	abbr, acronym{
		text-transform:uppercase;
		border-bottom:1px dotted #000;
		letter-spacing:1px;
		}
	abbr[title], acronym[title]{cursor:help;}
	small{font-size:.9em;}
	sup, sub{font-size:.8em;}
	em, cite, q{font-style:italic;}
	img{border:none;}			
	hr{display:none;}	
	/*table{width:100%;}*/
	th,caption{text-align:left;}
	form div{margin:.5em 0;clear:both;}
	label{display:block;}
	fieldset{margin:0;padding:0;border:none;}
	legend{font-weight:bold;}
	input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}
	div, input{outline: none;}

/* //  HTML elements */				

/* base */
	
	body, table, input, textarea, select, button{
		font:1.2em Arial, Helvetica, Sans-Serif;
		line-height:1.5em;
		color:#333;
		}
	body{
		font-size:13px;
		/*background:#013334 url(../images/interface/body.jpg) center top no-repeat;*/
		background:#013334 url(../images/l/body_bg2.png) center top no-repeat;
		/*background: #023435 url(../images/l/body_bg.png) repeat-x scroll left top;*/
		margin:0;
		padding:0;
		text-align:center;
		}	
		
	a, a:visited{
		text-decoration:none;
		color:#1273eb; /* ex-color cc1144*/
		outline: none;
		}
	a:hover{color:#999;}
	ins{text-decoration:none;color:#900;font-style:italic;}
	code{color:#555;}
	pre{
		margin-left:2em;
		padding-left:2em;
		border-left:1px solid #ccc;
		}
	blockquote{
		margin-left:2em;
		border-left:1px solid #ccc;
		font-style:italic;
		}	
	dt{font-weight:bold;}
	
	/* Tables */
	table{
		border-spacing:0;
		}
		
	th, td{padding:.5em 1em;line-height:1.5em; font-weight:normal; font-size:12px;}		
	th form{
		margin:0;
		padding:10px;
		}
	td{/*border-bottom:1px solid #eee; border-left:#eee 1px solid;*/ background:#FFF; font-size:12px;}
	
	/* //Tables */
	
	caption{font-style:italic;color:#777;margin:.5em 0;}	
	fieldset{
		border:1px solid #ccc;
		padding:1em 2em;
		margin:0 0 1.5em 0;
		}
	legend{padding:2px 5px;}	

/* base */

/* layout */

	#container{	
	    background:#FFF;
		margin:0 auto;
		width:980px;
		text-align:left;
		position:relative;
		}
		
	.inner{
		position:relative;
		}
	#headerWithCanvas{
		position:relative;
		/*background:url(../images/interface/header.png) no-repeat center bottom;*/
		height:190px;
		}
	#headerWithoutCanvas{
		position:relative;
		/*background:url(../images/interface/header.png) no-repeat center bottom;*/
		height:120px;
	}
		
		
	#footer{
		position:relative;
		clear:both;
		/*background:url(../images/interface/footer.png) no-repeat center top;*/
		}

/* navigation *//************************************************************************************************************************************/
	
		/*#nav,*/ #nav ul, #nav li{
			margin:0;
			list-style:none;
			}
			
		#nav {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    padding: 0;
		}
				
		#nav ul{}
		#nav li{
			float:left;
			display:inline;
			position:relative;
			line-height:44px;
			height:44px;
			background:url(../images/interface/nav.png) no-repeat center top;
			font-size:13px;
			}
			
		#nav li:hover{
			background-position:center bottom;
			}
			
		#nav li.first {
			background-position:top left;
			}
			
		#nav li.first:hover {
			background-position:bottom left;
			}
			
		#nav li.last {
			background-position:top right;
			}
			
		#nav li.last:hover {
			background-position:bottom right;
			}
		
		
		#nav li.active {
			background-position:center bottom;
			}
			
		#nav li.active.first {
			background-position:bottom left;
			}
			
		#nav li.active.last {
			background-position:bottom right;
			}
				
		#nav a{
			display:block;
			height:44px;
			line-height:44px;
			color:white;
			background:url(../images/interface/nav_divider.png) no-repeat center right;
			padding-left:14.0px;
			padding-right:14.0px;
			text-align:center;
			font-weight:bold;
			}
			
		#nav li.last a {
			background:none;
		}
		

		
		/****************************************************************************NEW***************************************************************************/
		#myCanvas{
			position:relative;
			margin-top:30px;
			border-radius : 5px;
			box-shadow: 0px 0px 5px #023435;
		}

		input{
			padding-left : 3px;
			border-radius : 5px;
		}

		input:required {
			background: white url(../images/l/redAsterisk.png) 98% center no-repeat;
		}
		input:valid{
			background-image : none;
		}
		input:focus{
			outline:none; /*virer la bordure dorée sous chrome*/
		}

		input:focus:invalid{
			border : 1px groove red;
			box-shadow: 0 0 5px #d45252;
			background-image : none;
		}
		input:focus:valid{
			border: 1px groove #56c93f;
			box-shadow: 0 0 5px #56c93f;
			background-image : none;
		}
		/*.erreur{
			display : none;
			color : red;
			font-weight : bold;
			font-size : 13px;
		}
		input:focus:invalid + span{
			display : inline;
		}*/
		/*.submit{
			border : 1px solid #87bee1;
			margin-top : 5px;
			background-color : #666;
			border-radius : 8px;
			box-shadow: 0 0 3px #87bee1;
			color : #87bee1;
			padding-left : 6px;
			cursor : pointer;
		}
		.submit:hover{
			border : 1px solid #f6e95a;
			color : #f6e95a;
			box-shadow: 0 0 3px #f6e95a;
			background-color : #333;
		}*/

		#scroll{
			width : 80px;
			position : fixed;
			bottom : 65px;
			right : 60px;
			height : 50px;
			opacity : 0.5;
			text-align :center;
		}
		
		#scroll a{
			display : block;
			height : 50px;
			width :80px;
			background : black;
			color : white;
			font-family :Arial;
			border-radius :10px;
			font-weight : bold;
			line-height :50px;
		}
		
		
		/*NEWS*/
	
	.btn{
		position : relative;
		top : 2px;
		left : 2px;
		margin-left : 3px;
	}
	
	.news{
		padding : 2px 0 0 5px;
		border:#CCC 1px solid;
		background: url(../images/l/coinbleu.png) right top no-repeat;
		margin-bottom : 10px;
		border-radius : 5px;
		box-shadow: 0 0 5px #CCC;
	}
	div.wrap li {
		font:1.0em Arial, Helvetica, Sans-Serif;
		line-height:1.5em;
		color:#333;
	}
	div.news li {
		font: 1.0em Arial, Helvetica, Sans-Serif;
		line-height:1.5em;
		color:#333;
	}

	
	.evtTitle{
		font-size:1.3em;
		color:#CC0066; /*CC0066*/
		font-weight:bold;
	}

	.evtDate a{
		font-size:1.1em;
	}
	.evtDate {
		height: 31px;
    		margin: 5px 0 0 3px;
    		padding-left: 41px;
		padding-top: 5px;
	}	

	.TH p.evtDate {
		background: url("../images/classement.jpg") no-repeat scroll left top;
	}
	.AnaCr p.evtDate {
		background: url("../images/anacrois.gif") no-repeat scroll left top;
	}
	.ScrPrep p.evtDate {
		background: url("../images/scrabble4.gif") no-repeat scroll left top;
	}
	.ScrPret p.evtDate {
		background: url("../images/scrabble1.gif") no-repeat scroll left top;
	}
	.Tirages p.evtDate {
		background: url("../images/T.gif") no-repeat scroll left top;
	}
	.autres p.evtDate {
		background: url("../images/l/i1.gif") no-repeat scroll left top;
	}
	
	.wrap{
		padding : 5px 5px 5px 5px;
		border:#CCC 1px solid;
		margin-bottom : 10px;
		border-radius : 5px;
		box-shadow: 0 0 5px #CCC;
	}	
	
	ul{
		list-style-image:url('../images/l/arrow_right1.png');
	}
	ul.list_level_2{
		margin-left : 0px;
		list-style-image:url('../images/l/arrow_right2.png');
	}
	#annees{
		margin-top : 10px;
		margin-bottom : 20px;
		font: 1.2em Arial,Helvetica,sans-serif;
	}
	
	.faq_title:hover{
		cursor : pointer;
		color : grey;
	}

/* conjugueur */

	#form_conjugueur label{
		display : inline;
	}
	
	#form_conjugueur input{
		padding-left : 3px;
		border-radius : 5px;
	}

	#form_conjugueur input:required {
		background-image: none;
	}

	#form_conjugueur input:valid{
		background-image : none;
	}

	#form_conjugueur input:focus{
		/*outline:none;*/ /*virer la bordure dorée sous chrome*/
	}

	#form_conjugueur input:focus:invalid{
		border : inset;
		box-shadow: none;
	}
	#form_conjugueur input:focus:valid{
		border : inset;
		box-shadow: none;
	}

	#conjugaisons h3{
		background-color : #023435;
		padding : 2px;
		padding-left : 10px;
		color : white;
		font-size : 22px;
		border-radius : 10px;
		margin-bottom : 5px;
	}
	#conjugaisons h4{
		color : #CC0095;
		font-size : 18px;
		margin-bottom : 5px;
	}
	.mode{
		display : block;
		width : 100%;
		padding : 1px;
		margin-bottom : 10px;
		border-radius : 5px;
	}
	.temps{
		display : inline-block;
		width : 49.85%;
		text-align : center;
		margin-bottom : 5px;
	}

	#new-logo{
		z-index: 1000;
		position: relative;
		top:-60px;
		left:30px;
	}

		/************************************************************************************************************/
/* header */

	#header h1{
		line-height:3em;
		height:3em;
		margin:0;
		}
	#header h1 a{		
		}
		
		#header h1{
		position:absolute;
		top:5px;
		}
		
/* footer */

#footer{
    color:white;
    padding-top:10px;
    text-align:center;
	margin-left:16%;
    margin-bottom:20px;
}

#footer a, #footer a:visited{
    text-decoration:none;
    color:white;
}

#footer a:hover{
    text-decoration:underline;
}

#footer ul{
    list-style:none;
    height:25px;
}


#footer li{
	list-style:none;
    float:left;
    color:#888;
    margin:0 0 0 15px;
    padding-left:0;
    }
#footer li:first{
	margin :0;
}
	
/* // footer */

  .THClassmnt1  {background: #83AAD7; font-family: Arial; font-size: 16px;}
  .TDClassmnt1  {background: #A3CAF7; font-family: Arial; font-size: 14px;}
  .THIndex1  {background: #83AAD7; font-family: Arial; font-size: 12px;}
  ul.inTab { background: #A3CAF7; font-family: Arial; font-size: 10px;}

  .TDHidden  {color:#ffffff; font-family:  "Courrier new", Courier, mono; font-size: 16px; text-align: left}
  .TDVisible  {color:black; font-family:  "Courrier new", Courier, mono; font-size: 16px; text-align: left}
  .TDBad  {color:red; font-family: "Courrier new", Courier, italic, mono; font-size: 14px;; text-decoration:line-through; text-align: center}
  .TDVisibleDef  {color:black; font-family: "Courrier new", Courier, mono; font-size: 16px}

  .TDForm {background: #008000; font-family: Arial, helvetica; font-size: 14px; }

  .courrier option {font-family: "Courrier new", Courier, mono; }
  
  .table_selection_color td{
	background-color:#80D0A0;
  }

.courrierUL {
  display: inline-block;
  margin: 0;
  padding: 0;
  padding-right: 18px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #a9a9a9;

  overflow-y: auto;
  /* permet d'activer la scrollbar si hauteur liste > max-height de l'élément, tu peux mettre scroll comme valeur pour que la scrollbar soit toujours présente */
  max-height: 300px;
  /* max-height mobile, la max-height desktop se trouve plus bas */
}
.courrierULSol {
}

@media (min-width: 800px) {
  .courrierUL {
    max-height: 615px;
  }
}

.courrierUL li {
  padding: 0px 2px 1px;
  cursor: pointer;
}

.courrierUL li.selected {
  background-color: #1e90ff;
  color: #fff;
}

#courrierULOp button {
        background-color: white;
        border: none;
        text-align: left;
}
#courrierULOp button.selectedButton {
  background-color: #1e90ff;
  text-align: center;
  color: #fff;
}

.TDHiddenNo {
  color: #006666;
  font-weight: bold;
}

.TDHiddenNo button, button[name="voir_tout"] {
  border: none;
  padding: 2px 6px;
  background-color: #006666;
  color:  #fff ;
  border-radius: 2px;
}

.TDHiddenNo button {
  letter-spacing: 1px;
}