*
{
	box-sizing: border-box;
}

body
{
	padding : 0px 0px 0px 0px;
	margin : 10px 0px 0px 0px;
	font-family: arial, helvetica, sans-serif;
	background: #eee url("/_img/header_outer.jpg") repeat-x;
	color : #333;
}

#principal
{
	height : 85%;
	margin-top : 0px;
	margin-bottom : 0px;
	margin-left : 50%;
	display : block;
}

#secondaire
{
	width : 850px;
	height : 100%;
	margin-top : 0px;
	margin-bottom : 0px;
	margin-left : -425px;
	border : 0px solid #000;
	display : block;
	background-color : #FFF;
}

#header
{
	width : 100%;
	height : 100px;
	margin : 0px 0px 0px 0px;
	padding : 10px;
/*	background-image : url("/_img/Silhouettes.png"); */
	background-repeat : no-repeat;
	background-position : bottom right;
	background-color : #EEE;
	border : 0px solid #555;
}

#accroche
{
	border : 0px solid #FFF;
	width : 600px;
	height : 80px;
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	background-image : url("/_img/LogoCSEEEA.png");
	background-position : center left;
	background-repeat : no-repeat;
	background-color : #EEE;
	color : #333;
	font-weight : bold;
	line-height : 63px;
	vertical-align : bottom;
	padding-left : 150px;
	padding-top : 20px;
	letter-spacing : 4px;
}

#articles
{
	height : 100%;
	background-color : #FFF;
	margin-bottom : 20px;
}

#articles a
{
	color : #7ba428;
	font-weight : bold;
	margin-top : 5px;
	text-decoration : none;
	padding-left : 10px;
}

#articles a:hover
{
	background-color : #7ba428;
	color : #FFF;
}

#articles h1
{
	padding-top : 0px;
	font-size : 1.8em;
	border-top : 1px dotted #555;
	color : #7ba428;
	padding-left : 50px;
	background-color : #EEE;
}

#articles form
{
	margin-top : 10px;
	padding-left : 50px;
	padding-right : 50px;
	width : 100%;
	display : block;
	float : left;
	clear : both;
}

#articles form label
{
	display : block;
	float : left;
	width : 200px;
	font-weight : bold;
	border-bottom : 1px dotted #555;
}

#articles form input, #articles form select
{
	display : block;
	float : left;
	width : 550px;
}

#articles form input.cb
{
	width : 10px;
}

#articles form input.bouton
{
	display : block;
	float : left;
	width : 750px;
}

#articles form textarea
{
	display : block;
	float : left;
	width : 550px;
	height : 100px;
}

#articles form br
{
	display : block;
	float : left;
	clear : both;
}

#articles .motdoux
{
	display : block;
	width : 100%;
	padding-left : 50px;
	padding-right : 50px;
}

#articles .motdoux .intro
{
	display : block;
	width : 100%;
	border-top : 1px dotted #555;
	font-weight : bold;
	padding-top : 5px;
}

#articles #messages
{
	width : 100%;
	height : 100%;
	overflow-y : scroll;
	scrollbar-color : #7ba428 #555;
	scrollbar-width : 10px;
	background-color : #FFF;
	font-size : 0.8em;
}

#menu 
{
	border-right : 1px dotted #555;
	margin : 0px 0px 0px 0px;
	padding-top : 10px;
	padding-left : 10px;
	display : block;
	float : left;
	width : 250px;
	list-style : none;
}

#menu li
{
	font-size : 0.8em;
}

#menu li.cat, #menu li.cat a
{
	font-size : 1em;
	font-weight : bold;
	color : #7ba428;
	padding-left : 0px;
}

#menu li a
{
	line-height : 30px;
	color : #555;
	margin-top : 5px;
	font-weight : bold;
	text-decoration : none;
}

#menu li a:hover
{
	background-color : #7ba428;
	color : #FFF;
}

#contenu
{
	border : 0px solid #0F0;
	display : block;
	padding-top : 10px;
	padding-left : 10px;
	padding-right : 10px;
	background-color : #FFF;
	height : 100%;
	overflow-y : scroll;
	scrollbar-color : #7ba428 #555;
	scrollbar-width : 10px;
}

#articles .categorie
{
	font-size : 1.3em;
	font-weight : bold;
	border-bottom : 2px solid #333;
}

#articles div.article
{
	display : box;
	float : left;
	width : 100%;
	margin-bottom : 20px;
	font-size : 0.9em;
	background-color : #FFF;
}

#articles div.article h1
{
	padding-top : 0px;
	font-size : 1.3em;
	border-top : 1px solid #555;
	border-bottom : 1px dotted #555;
	color : #7ba428;
	padding-left : 0px;
}

#articles div.article img#principale
{
	width : 100%;
	padding-top : 5px;
}

#articles div.article a
{
	color : #7ba428;
	text-decoration : underline;
	margin-top : 0px;
	padding-left : 0px;
}

#articles div.article a:hover
{
	background-color : #7ba428;
	color : #FFF;
	padding-left : 0px;
}

#articles div.epingle h1
{
	background-image : url("/_img/Epingle.png");
	background-position : center right;
	background-repeat : no-repeat;
}

h1 a img.action, .motdoux .intro a img.action
{
	width : 16px;
	line-height : 30px;
	vertical-align : middle;
	margin-right : 10px;
	margin-left : 10px;
}

div.g-recaptcha
{
	display : block;
	clear : both;
	width : 400px;
	margin-left : 325px;
	margin-bottom : 10px;
}

table.trombi
{
}

table.trombi tr
{
}

table.trombi th
{
	border-top : 1px dotted #666;
	border-left : 1px dotted #666;
	border-right : 1px dotted #666;
	border-bottom : none;
	padding : 2px;
	background-color : #EEE;
}

table.trombi td
{
	border-top : none;
	border-left : 1px dotted #666;
	border-right : 1px dotted #666;
	border-bottom : 1px dotted #666;
	padding : 5px;
	text-align : center;
}

table.trombi td div
{
	display : block;
	float : left;
	margin-left : auto;
	margin-right : auto;
	padding : 5px;
	height : 180px;
}

table.trombi td.vig3 div
{
	width : 33%;
}

table.trombi td.vig2 div
{
	width : 50%;
}

table.trombi td.vig1 div
{
	width : 100%;
}

div.CR_CSE img
{
	width : 50px;	
	padding : 0px;
}

div.CR_CSE div.CR
{
	display : block;
	text-align : center;
	float : left;
	width : 20%;
	height : 180px;
	border : 1px dotted #666;
	background-color : #EEE;
}

div.CR_CSE div.petit
{
	height : 100px;
	width : 14.28%;
}

div.CR_CSE div.CR:hover
{
	background-color : #7ba428;
}

div.CR_CSE div.CR a
{
	display : block;
	width : 100%;
	height : 100%;
	background-color : #FFF;
	padding : 10px;
	margin-top : 0px;
}

div.CR_CSE br
{
	display : block;
	clear : both;
}

@media (max-width: 640px) 
{
	* 
	{
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body 
	{
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video 
	{
		max-width: 100%;
	}
	
	/* conserver le ratio des images */
	img 
	{
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp 
	{
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp 
	{
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 
	{
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile 
	{          
		display: block;          
		display: revert !important; /* affichage des éléments */        
	}        
	
	.u-no-mobile 
	{          
		display: none !important; /* masquage des éléments */        
	}
	
	/* Un message personnalisé */

	body:before 
	{
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}

#discussions table
{
	width : 100%;
	border-collapse: collapse;
	border : 1px solid #333;
}

#discussions table th
{
	background-color : #EEE;
	border : none;
}

#discussions table td
{
	border : none;
	border-bottom : 1px dotted #333;
	font-size : 0.8em;
}

#discussions div.auteur
{
	display : block;
	width : 100%;
	text-align : right;
	font-size : 0.6em;
	color : #333;
	font-weight : normal;
}

#discussions a.action
{
	display : block;
	width : 100%;
	text-align : center;
	margin-top : 5px;
}

#discussions form
{
	padding : 0px;
}

#discussions form label
{
	width : 100%;
	border : none;
}

#discussions form input, #discussions form select
{
	width : 100%;
}

#discussions form input.bouton
{
	width : 100%;
}

#discussions form textarea
{
	width : 100%;
	height : 100px;
}