@charset "utf-8";

html {font-size:62.5%}

body {
	background-image: background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6rem;
	line-height: 150%;
	color: #58595b;
	text-align:left;
	background-color: #FFF;
	width: 100%;
	margin:0;
	padding:0;
	}

	/* Main title in the page */
	h1 {
		text-align: center;
		font-weight: bold;
		font-size:2.5rem;
		color: #91000D;
		margin: 1rem;
		font-variant: small-caps;
		}
		
	/* subtitle in the page */	
	h2 {
		text-align: center;
		font-weight: bold;
		font-size:2rem;
		color: #3681BA;
		font-variant: small-caps;
		}
		
	/* Title of items */	
	h3 {
		text-align: left;
		font-weight: bold;
		font-size:1.6rem;
		color: #91000D;
		margin: 0;
		}
	/* Subitle of items */	
	h4 {
		text-align: left;
		font-weight: normal;
		font-size:1.6rem;
		color: #3681BA;
		margin: 0;
		}

			
	p 	{
		margin:5px;
		padding:0;
		}

	a 	{
		text-decoration:none;
		font-weight: bold;
		color: #5859Fb;
		cursor: pointer;
		}
		
	.selected {
		color:#91000D;
		font-weight: bold;
		}
	
	a:hover {color:#91000D;}
	
.center {text-align: center;}

.right {text-align: right;}

strong {color:#BE000C; font-size : 1.3rem;}

.small {font-size : 1.2rem;}

.small_remark {font-size : 1.2rem; color:#91000D;}

.large {font-size : 1.5rem; font-weight: bold;}

.small_image {width: 5rem;}

.no_border {border: none;}

.let_go {display: none;}


	
/* STRUCTURE CSS */

#page {
	margin:1rem auto;
	width:104rem;
	min-height: 100rem;
}

/* ---- Header including menu --- */

	header {
		width:104rem; 
		height: 18rem;
		background-image:url("013_images_structure/bg-header_1040px.png"); 
		background-color: #FFFFFF;
		margin:0 auto;
		
	}
	
	header #login {
			position : absolute;
			margin-top: 1.5rem;
			margin-left: 5rem;
			text-align: left;
			font-size: 1.4rem;
			font-weight: bold;
			color: #91000D;
			}
			
	header nav {
		position : absolute;
		margin-top: 12rem;
		margin-right: 12rem;
		width:100rem;
		text-align: right;
	}
	
	header #subnav	{
		position : absolute;
		margin-top: 2.3rem;
		margin-right: 9rem;
		width:100rem;
		text-align: right;
	}
	
	header nav a
		 {
		width: 5rem;
		font-size:1.8rem;
		padding-right: 0.5rem;
		padding-left: 0.5rem;
		border-right: 2px solid #91000D;
		text-decoration: none;
		color: #414143;
		font-variant: small-caps;
		font-weight: bold;
	}
	
	header nav a:hover
		 {
		color: #91000D;
	}
	
	

#page_content{
	width:104rem;
	min-height:50rem;
	background-repeat:repeat-y;
	background-image:url("013_images_structure/bg_page_content.jpg");
	margin: 0 auto;
	padding-top: 2rem;
	}
	
	/* Structure left column = aside */
	
	aside {
		display : inline-block;
		margin-left : 5rem;
		vertical-align : top;
		width: 23rem;
		}
		
		aside div {
			background: #CC1C0D; /* For browsers that do not support gradients */
			background: -webkit-linear-gradient(top, #91000D , #CC1C0D); /* For Safari 5.1 to 6.0 */
			background: -o-linear-gradient(bottom, #91000D , #CC1C0D); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(bottom, #91000D , #CC1C0D); /* For Firefox 3.6 to 15 */
			background: linear-gradient(to bottom, #91000D , #CC1C0D); /* Standard syntax */
			color: #FFF;	
			text-align: center;
			font-size: 1rem;
			padding: 1rem; margin-bottom : 3rem;
		}
		
		/* title in aside */
		H5 {
		text-align: center;
		font-weight: bold;
		font-size: 1.6rem;
		color: #FFF;
		margin: 0;
		}		
		
		/* subtitle in aside */
		h6 {
			text-align: center;
			font-weight: bold;
			font-size:1.5rem;
			color: #FFF;
			margin: 0;
			}
		
		aside div p {
			font-size: 1.3rem;
			font-weight: normal;
			}
			
		aside div p.message {
			text-align: justify; 
			}
			
		aside div a {
			font-size: 1.6rem;
			font-weight: bold;
			color: #0000AA;
			}
		
		aside div a:hover {
			color: #FFFFFF;
			}
		
	/* Structure rigth column = section */
		
	section {
		display : inline-block;
		margin-left: 3rem;
		width:65rem;
		vertical-align : top;
		}
		
		
		
		.description {
			border : 2px outset #91000D;
			padding: 1rem;
		}
		
/*********************Tableau**************/
table {
	margin: 10px 0;
	border : 2px outset #91000D;
	width: 100%;
	padding: 1rem;
}

tr:nth-child(even) {background: #DDD}
tr:nth-child(odd) {background: #FFF}

th{
	vertical-align: top; 
	text-align: left;
	font-weight:bold;
	font-size: 1.4rem;
	border: none;
	text-transform:uppercase;
	padding:0.2rem;
}
	
td{
	vertical-align: top; 
	text-align: left;
	font-size: 1.6rem;
	border: 0;
	padding: 0.2rem;
}


		
/* CSS for the description - Show more / show less */
	
	.read_more_state {
	  display: none;
	  visibility : hidden;
	}
	.read_more_target {
	  opacity: 0;
	  max-height: 0;
	  font-size: 0;
	  transition: .25s ease;
	}
		
	.read_more_state:checked ~  .read_more_target {
	  opacity: 1;
	  font-size: inherit;
	  max-height: 999em;
	}
	
	.read_more_state ~  .read_more_trigger:before {
	  content: 'Show description';
	}
	
	.read_more_state:checked ~  .read_more_trigger:before {
	  content: 'Mask description';
	}
	
	
	.read_more_trigger {
	  cursor: pointer;
	  color: #5859Fb;
	}
	
	
		
/* ---------------------- */
/* CSS for the Form       */	
/* ---------------------- */

.selection {
	border: 0.1rem solid #3681BA;
	background-color: #b0d9f9;
	text-align: center;
	padding: 0.1rem;
	width: 100%;
	font-size: 1.6rem;
	font-weight: bold;
	}
	
.with_border {border: 1px solid black; width: 100%; padding: 0.3rem;}

.for_label {
	width: 17rem;
	}

label {
	font-variant: small-caps;
	font-weight: bold;
	font-size:1.6rem;
	color: #3681BA;
	width: 33%;
}

input, textarea {
	font-size:1.5rem;
	width: 25rem;
	padding: 0.2rem;
	display: inline;
}

.short_input {width: 15rem;}

#login input { width: 10rem; padding: 0.1rem;}

input:invalid {border: 0.1rem #BE000C solid;}

input:valid {border: 0.1rem green solid;}

textarea {width: 50rem; height: 20rem;}

textarea:invalid {border: 0.1rem #BE000C solid;}

textarea:valid {border: 0.1rem green solid;}

/* textarea:empty {border: 0.2rem red solid;} */

input[type="submit"], .like_button {
	border: 0;
	background : #3681BA;
	color: #FFFFFF;
	text-decoration:none;
	font-size: 1.3rem;
	font-weight: bold;
	padding: 0.2rem 0.2rem;
	text-align: center;
	display: inline;
}

input[type="submit"]:hover, .like_button:hover {
	background : #91000D;
	color: #FFFFFF;
	}

.long {
	width: 50rem; 
}

.short {
	width: 12rem;
}

/**************** Alert oe message ************************/

#alert {
		width: 100%;
		border : 0.1rem outset blue;
		background-color: #FFE; 
		border-radius : 2rem;
		
		position: fixed;
		top: 30rem;
		left: 50rem;
		width: 35rem;
		display: block;
		z-index:auto; /* les elements de la liste passent au premier plan */
		z-index:1000; /* idem mais pour IE6 */
		}
		
			
#alert p{
	font-size: 1.5rem; 
	color: #bd0007; 
	margin: 0; 
	padding: 0.3rem; 
	text-align: center;		
}	


#alert a{
	font-size: 1.5rem;
	color: blue;
	text-decoration:none;
	font-weight: bold;
	padding: 0.2rem;
	text-align: right;
	width: 29rem;
	display: block;
}
	
#alert a:hover{
	color:#bd0007;
}
		
/* Footer */

footer {
	background-image:url("013_images_structure/bg-footer_1040px.png");
	margin: 0 auto;
	width: 104rem;
	height : 6.8rem;
	padding-top: 2rem;
	text-align: center;
}

footer p {
	font-size: 1rem;
}