@charset "utf-8";
/* CSS Document */

body {
margin:0px;
font-family: 'Trebuchet MS', Verdana, Tahoma, sans-serif;
font-size: 13px;
background-color:#F3F6F3;
}

#header {
height:133px;
background-color:#F3F6F3;
}

#sheader {
background-image:url('speedbarre.png');
background-repeat:repeat-x;
height:42px;
}

#openid
{
width:240px; 
height:190px; 
margin-top:-130px; 
border:0px solid black; 
float:left; 
margin-right:10px;
background-color:#ffffff;
background-image:url('openid.png');	
background-repeat:no-repeat;
}

#logo {
margin-top:-10px;
margin-left:230px;
}

.lh3 {
background-color:#BED8BE;
-webkit-border-radius:7px;
color:white;
padding:3px;
padding-left:8px; padding-right:8px;
margin-left:2px;
}

#bouton {
margin-right:1px;	
}

#spheader {
width:1004px; 
padding-top:10px; 
padding-left:15px;
padding-right:35px;
}

#content { 
background-color:#F3F6F3;
padding-bottom:10px;
}

#footer { 
padding-bottom:35px;
}

h1 { font-size:18px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:4px; }
h2 { font-size:16px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:4px; }
h3 { font-size:14px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:4px; }
h4 { font-size:12px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:4px; }
h5 { font-size:11px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:4px; }
h6 { font-size:10px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:4px; }

.mcontent {
width:191px;
background-color:#F3F6F3;
text-aling:justify;
padding-left:10px;
padding-top:15px;
padding-bottom:15px;
}

.ul-c {
margin:0px;
padding:0px;
}

.li-c {
list-style:square;
margin:0px;
padding-top:5px;
margin-left:20px;
}

.openid { 
height:74px; 
width:238px;
border:0px solid black; 
background-image:url('openid.png');
float:left;
margin-top:10px; margin-right:-80px;
}

.openbarre{ 
height:49px; 
width:986px;
border:0px solid black; 
background-image:url('openbarre.png');
}

h1 { font-size:19px; }
h2 { font-size:18px; }
h3 { font-size:17px; }
h4 { font-size:16px; }
h5 { font-size:15px; }
h6 { font-size:14px; }

#h3code {display: block; font-size: 1.17em; font-weight: bold; margin: 1em 0px; background:transparent; color:#E8A22B; font-size: 1.5em; font-weight: bold;margin: 0px 0px 0px 20px; margin-left: 20px;}
#h4code {display: block; font-weight: bold; margin: 1.33em 0px; color: #1877D5; font-size: 1.2em; font-style: italic; font-weight: bold; margin: 0px 0px 0px 50px; margin-left: 50px;}

a { color:black; text-decoration:none; }
a:href { color:black; text-decoration:none; }
a:hover { color:#3E5CA2; text-decoration:none; }

#middlebar{
	font-size:11px;
	color:black;
	font-weight:bold;
	padding:5px;
	padding-right:4px;
}
	#middlebar .menu li {
		background:url(lm.png) left top no-repeat;
		height:30px;
		float:left;
		margin-right:10px;
	}
	#middlebar .menu li a{
		color:black;
		text-decoration:none;
		padding:0 10px;
		height:30px;
		line-height:30px;
		display:block;
		float:left;
		padding:0 26px 0 10px;
		background:url(rm.png) right top no-repeat;
	}
	#middlebar .menu li a:hover{
		color:#E0307B;
	}
#middlebar ul .submenu {
	border:solid 1px #c9dea1;
	border-top:none;
	background:#FFFFFF;
	position: relative;
	top: 4px;
	width:100px;
	padding:6px 0;
	clear:both;
	z-index:2;
	display:none;
}
	#middlebar ul .submenu li{
		background:none;
		display:block;
		float:none;
		margin:0 6px;
		border:0;
		height:auto;
		line-height:normal;
		border-top:solid 1px #DEDEDE;
	}
	#middlebar .submenu li a{
		background:none;
		display:block;
		float:none;
		padding:6px 6px;
		margin:0;
		border:0;
		height:auto;
		color:black;
		line-height:normal;
	}
	#middlebar .submenu li a:hover{
		background:#e3edef;
	}
	
	#middlebar ul, li{margin:0; border:0; padding:0; list-style:none;}

input { margin:1px; padding:0px; }
select { margin:1px; padding:0px; }

.tabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.tabs li{
display: inline;
margin: 0;
}

.tabs li a{
text-decoration: none;
padding: 7px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
}

.tabs li a:visited{
color: #2d2b2b;
}

.tabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.tabs li.selected{
position: relative;
}

.tabs li.selected a{ /*selected main tab style */
background-color:#cccccc;
}

.tabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.contentstyle{
border: 0px solid gray;
width: 891px;
margin-top:10px;
}

#erreur
{
 width:700px;
 text-align:center;
 background-color:#DDEEF6;
 color: black;
 font-size: 13px;
 margin-top:5px;
 margin-bottom:5px;
 padding:15px;
 font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

.inscription-mod {
margin-top:8px;
margin-bottom:8px;
margin-left:8px;
padding:15px;
width:360px;
height:253px;
float:left;
background-image:url('img-modules.png');
}

* {outline: none;}
#footpanel { position:fixed; bottom:0; left:0; z-index:9999; background:#e3e2e2; border:1px solid #c3c3c3; 
border-bottom:none; width:100%; margin:0; }
  
*html #footpanel { margin-top:-1px; position:absolute;
	top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
 
#footpanel ul { padding: 0; margin: 0;
	float: left;
	width:96%;
	list-style: none;
	padding-top:0px;
	padding-left:2%;
	border-top: 0px solid #fff; /*--Gives the bevel feel on the panel--*/
	font-size:11px;
}
#footpanel ul li{
	padding: 0; margin: 0;
	float: left;
	position: relative;
}
#footpanel ul li a{
	padding: 4px;
	float: left;
	text-indent: -9999px;
	height: 16px; width: 16px;
	text-decoration: none;
	color: #333;
	position: relative;
}
html #footpanel ul li a:hover{	background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when subpanel is open--*/
	background-color: #fff;
	height: 17px;
	margin-top: -2px; /*--Push it up 2px to attach the active button to subpanel--*/
	border-top: none;
	z-index: 200; /*--Keeps the active area on top of the subpanel--*/
	position: relative;
}
 
 
#footpanel a.home{	
	background: url(footer/home.png) no-repeat 15px center;
	width: 50px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent--*/
}
a.profile{	background: url(footer/user.png) no-repeat center center;  }
a.contacts{	background: url(footer/address_book.png) no-repeat center center; }
a.playlist{	background: url(footer/document_music_playlist.png) no-repeat center center; }
a.videos{	background: url(footer/film.png) no-repeat center center; }
a.messages{	background: url(footer/mail.png) no-repeat center center; }
a.editprofile{	background: url(footer/wrench_screwdriver.png) no-repeat center center; }
#footpanel a.chat{	
	background: url(footer/balloon.png) no-repeat 15px center;
	width: 126px;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	padding-left: 40px;
	text-indent: 0; /*--Reset text indent--*/
}
a.alerts{	background: url(footer/newspaper.png) no-repeat center center;	 }
 
#footpanel li#chatpanel, #footpanel li#alertpanel {	float: right; }  /*--Right align the chat and alert panels--*/
 
#footpanel a small {  /*--panel tool tip styles--*/
	text-align: center;
	width: 70px;
	background: url(footer/pop_arrow.gif) no-repeat center bottom;
	padding: 5px 5px 11px;
	display: none; /*--Hide by default--*/
	color: #fff;
	font-size: 1em;
	text-indent: 0;
}
#footpanel a:hover small{
	display: block; /*--Show on hover--*/
	position: absolute;
	top: -35px; /*--Position tooltip 35px above the list item--*/
	left: 50%; 
	margin-left: -40px; /*--Center the tooltip--*/
	z-index: 9999;
}
 
 
 
 
 
#footpanel ul li div a { /*--Reset link style for subpanel links--*/
	text-indent: 0;
	width: auto;
	height: auto;
	padding: 0;
	float: none;
	color: #00629a;
	position: static;
}
#footpanel ul li div a:hover {	text-decoration: underline; } /*--Reset link style for subpanel links--*/
 
#footpanel .subpanel {
	position: absolute;
	left: 0; bottom: 30px;
	display: none;	/*--Hide by default--*/
	width: 170px;
	border: 1px solid #c3c3c3;
	background: #fff;
	overflow: hidden;
	padding-bottom: 0px;
}
#footpanel h3 {
	background: #526ea6;
	padding: 5px 10px;
	margin-top:0px;
	color: #fff;
	font-size: 1.1em;
	cursor: pointer;
}
#footpanel h3 span { 
	font-size: 1.5em;
	float: right;
	line-height: 0.6em;	
	font-weight: normal;
}
#footpanel .subpanel ul{
	padding: -10; margin: 0;
	background: #fff;
	width: 100%;
	overflow: auto;
}
#footpanel .subpanel li{ 
	float: none; /*--Reset float--*/
	display: block;
	padding: 0; margin: 0;
	overflow: hidden;
	clear: both;
	background: #fff; 
	position: static;  /*--Reset relative positioning--*/
}
 
#chatpanel .subpanel li { background: url(footer/dash.gif) repeat-x left center; } 
#chatpanel .subpanel li span {
	background: #fff;
	color: #777;
	float: left;
}
#chatpanel .subpanel li a img {
	float: left;
	margin:2px;
}
#chatpanel .subpanel li a{
	padding: 0px 0;	margin: 0;
	background: #fff;
	display: block;
}
#chatpanel .subpanel li a:hover {
	background: #3b5998;
	color: #fff;
}
 
 
#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
	border-top: 1px solid #f0f0f0;
	display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
	background: url(footer/delete_x.gif) no-repeat;
	float: right;
	
	margin: 5px;
	text-indent: -9999px;
	visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
	text-align: right;
	padding: 4px 10px 5px 0;
}

.table { background-color:#F3F6F3; border:0px solid black; margin:10px; }
.tab { border:0px solid black; padding:10px; text-align:center;  }
.tab2 { border:0px solid black; background-color:#E2E2E2; }
.tabt { border-top:2px solid #E3E3E3; border-bottom:2px solid #E3E3E3; background-color:#F9FBF9; padding:7px; text-align:center; }

.mn-haut { 
height:10px; 
width:220px;
background-image:url('mn-haut.png');
}

.mn-content { 
width:200px;
padding-left:10px;
padding-right:10px;
text-align:justify;
background-color:#EEEEEE;
}

.mn-bas { 
height:10px; 
width:220px;
background-image:url('mn-bas.png');
margin-bottom:5px;
}

.module-0 {
width:714px;
height:367px;
}

.module-1 {
width:257px;
height:367px;
float:left;
background-image:url('module-1.png');
}

.module-2 {
width:440px;
height:367px;
float:right;
background-image:url('module-2.png');
}

.footer-0 { 
margin-top:10px;
margin-left:11px;
width:980px;
height:121px;
font-size:12px;
background-image:url('footer.png');
padding-left:15px;
padding-top:10px;
}


.bleu-haut {
width:745px;
height:17px;
background-image:url('cache/bleu-haut.png');
margin-top:5px;
}

.bleu-content {
width:715px;
padding:10px;
padding-right:20px;
text-align:justify;
background-color:#DDEEF6;
}

.bleu-bas {
width:745px;
height:17px;
background-image:url('cache/bleu-bas.png');
margin-bottom:10px;
}

.m-haut { 
width:232px;
height:29px;
background-image:url('m-haut.png');
background-repeat:no-repeat;
}

.m-bas { 
width:232px;
height:12px;
background-image:url('m-bas.png');
background-repeat:no-repeat;
}

.m-content { 
width:232px;
padding-top:10px;
padding-bottom:10px;
background-image:url('m-content.png');
background-repeat:repeat-y;
}

.m2-haut { 
width:766px;
height:29px;
margin-top:7px;
background-image:url('m2-haut.png');
background-repeat:no-repeat;
}

.m2-bas { 
width:766px;
height:12px;
}

.m2-content { 
width:766px;
padding-top:10px;
padding-bottom:10px;
background-image:url('m2-content.png');
background-repeat:repeat-y;
}

.h-bleu { 
width:200px;
height:45px;
background-image:url('haut-bleu.png');
}

.b-bleu { 
width:200px;
background-color:#F5F5F5;
padding-top:10px;
padding-bottom:10px;
}

.lh {
background-color:#79A0C4;
-webkit-border-radius:7px;
color:white;
padding:3px;
padding-left:8px; padding-right:8px;
margin-left:2px;
}

.lh2 {
background-color:#ECB7A8;
-webkit-border-radius:7px;
color:black;
padding:3px;
padding-left:8px; padding-right:8px;
}

.lh3 {
background-color:#BED8BE;
-webkit-border-radius:7px;
color:black;
padding:3px;
padding-left:8px; padding-right:8px;
}

.links a	{
	display: inline-block;
	padding: 2px;
	outline: 0;
	color: black;
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	-o-transition-duration: 0.25s;
	transition-duration: 0.25s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
	-webkit-transform: scale(1) rotate(0);
	-moz-transform: scale(1) rotate(0);
	-o-transform: scale(1) rotate(0);
	transform: scale(1) rotate(0);
}
.links a:hover {
	background: #3a599d;
	text-decoration: none;
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-transform: scale(1.05) rotate(-1deg);
	-moz-transform: scale(1.05) rotate(-1deg);
	-o-transform: scale(1.05) rotate(-1deg);
	transform: scale(1.05) rotate(-1deg);
}
.links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

.links2 a	{
	display: inline-block;
	padding: 4px;
	outline: 0;
	color: black;
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	-o-transition-duration: 0.25s;
	transition-duration: 0.25s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
	-webkit-transform: scale(1) rotate(0);
	-moz-transform: scale(1) rotate(0);
	-o-transform: scale(1) rotate(0);
	transform: scale(1) rotate(0);
}
.links2 a:hover {
	background:#BED8BE;
	text-decoration: none;
	color: #333;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-transform: scale(1.05) rotate(-1deg);
	-moz-transform: scale(1.05) rotate(-1deg);
	-o-transform: scale(1.05) rotate(-1deg);
	transform: scale(1.05) rotate(-1deg);
}
.links2 a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}