/*
Auteur:Tony Archambeau
Licence: copyright
* Orange : e3602c
*/

/* 1. RESET
----------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, /*sub, sup,*/ tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}


/* 2. ROOT
----------------------------------------------------------------------------------------*/
html{overflow-y:scroll}
img, embed, object, video{max-width:100%}
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video{width:100%}


/* 3. CORE TYPOGRAPHY
----------------------------------------------------------------------------------------*/
body{
margin:0;
font-family:Arial, Tahoma, Verdana, "Times New Roman", sherif;
font-size:0.96em;
line-height:1em;
background:#FFF;
color:#333;
}
img{border:none}
acronym:hover{cursor:help}


/**** title *****/
h1{
font-size:1.55em;
line-height:1.3em;
margin:18px 0 12px;
text-align:center;
}
h2{
margin:16px 0 10px;
font-size:1.3em;
color:#555;
}
h3{
font-size:1.1em;
color:#555;
margin:8px 0 5px 8px;
}
h4{
margin:4px 0 2px;
padding-left:18px
}

p, ul, ol, dl, blockquote{
font-size:1em;
line-height:1.4em;
margin-top:.3em;
margin-bottom:.9em;
}
/*p + ul, ul + p{margin-top:-1em;}*/

ul{list-style-type:disc}
ol{list-style-type:decimal}
ul,ol{margin-left:1.618em}
ul ul{margin-bottom:0}
b,strong{font-weight:bold}
i,em{font-style:italic}
small{font-size:80%}
label{font-weight:bold}

/**** table *****/
table{
margin:auto;
border-collapse:collapse;
width:99.9999%;
}
th{
padding:3px 5px;
border: 1px solid #999;
background:#ddd;
}
td{
border:1px solid silver;
padding:3px 5px;
}
.odd td{background-color:#f0f0ff;}
.tr-first{background-color:#ffffb2;}

/* form */
input[type="text"],
textarea{
	border:1px solid #999;
}

/* 4. LINKS
----------------------------------------------------------------------------------------*/

a{color:#002996}
a:hover{
color:#fd6004;
text-decoration:underline;
}


/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
----------------------------------------------------------------------------------------*/
.p_marge{margin-left:30px}
.p_marge_2{margin-left:70px}
.texte_souligne{text-decoration:underline}
.souligne{text-decoration:underline}
.souligne_dessus{text-decoration:overline}
.centrer{text-align:center}
.align_droite{text-align:right}
.centrer_bloc{margin:auto}
.align_droite{text-align:right}
.floatLeft{float:left; position:relative}
.flotant_droit{float:right; position:relative}
.clignotant{text-decoration:blink}
.barre75pourcent{width:75%}
.clean{clear:right}
.space{clear:both}
.couleurRouge{color:red}
.couleurBleu{color:blue}
.couleurVert{color:green}

.col{float:left;}
.col-2{width:49.999%;}
.col-3{width:33.333%;}
.col-4{width:25%;}

.primary-button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 12px;
	font-weight: bold;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(top,#97d640 0%,#7dbb36 49%,#64ab22 50%,#4b9d15 75%,#146600);
	background: -webkit-gradient(linear, left top, left bottom, from(#97d640),color-stop(0.49, #7dbb36),color-stop(0.50, #64ab22),color-stop(0.75, #4b9d15),to(#146600));
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #d6ffb0;
	-moz-box-shadow:0px 1px 2px rgba(000,000,000,0.4),inset 1px 1px 2px rgba(192,224,103,1);
	-webkit-box-shadow:	0px 1px 2px rgba(000,000,000,0.4),inset 1px 1px 2px rgba(192,224,103,1);
	box-shadow:0px 1px 2px rgba(000,000,000,0.4),inset 1px 1px 2px rgba(192,224,103,1);
	text-shadow:0px 1px 0px rgba(047,077,037,0.7),0px 1px 0px rgba(255,255,255,0.3);
	text-decoration:none;
	cursor:pointer;
}
.primary-button:hover {
	background: -moz-linear-gradient(bottom,#7dbb36 0%,#4b9d15);
	background: -webkit-gradient(linear, left top,left bottom,from(#4b9d15),to(#7dbb36));
}
.primary-button:active {
	position:relative;
	top:1px;
}


.secondary-button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 17px;
	font-weight: bold;
	color: #050505;
	padding:3px 16px;
	background: -moz-linear-gradient(top,#ffffff 0%,#ebebeb 50%,#dbdbdb 50%,#b5b5b5);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff),color-stop(0.50, #ebebeb),color-stop(0.50, #dbdbdb),to(#b5b5b5));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 4px;
	border: 1px solid #949494;
	-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:0px -1px 0px rgba(102,028,102,0.2),0px 1px 0px rgba(255,255,255,1);
	text-decoration:none;
	cursor:pointer;
	margin: 2px 0 10px;
	display: inline-block;
}
.secondary-button:hover {
	background: -moz-linear-gradient(bottom,#ebebeb 0%,#b5b5b5);
	background: -webkit-gradient(linear, left top,left bottom,from(#b5b5b5),to(#ebebeb));
	text-decoration:none;
	color:#000;
}
.secondary-button:active {
	position:relative;
	top:1px;
}


.label-input-text{
	display:block;
}
.form-field {
	margin: 8px 0;
}



/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
----------------------------------------------------------------------------------------*/

#page{
width:990px;
margin:auto;
padding: 10px 0 0;
}



/* 7. BROWSER AND NON-SEMANTIC STYLING
----------------------------------------------------------------------------------------*/
.cf:before, .cf:after{content:"";display:block;}
.cf:after{clear:both}
.ie6 .cf{zoom:1}

/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
----------------------------------------------------------------------------------------*/


/*** banniere / header ***/
#banniere{
margin:0 0 10px;
padding-left:150px;
}
#banniere a{
font-size:32px;
font-weight:bold;
text-decoration:none;
color:#222222;
text-shadow:2px 2px 2px #999999;
}
#banniere a span{
display:block;
font-size:20px;
color:#555555;
}

/* message dans le header du site (juste sous le header) */
.message_header{
	margin:0 auto 10px;
	padding:2px 4px;
}
.message_header.success{
	background:#88ea8f;
	border:1px solid #0f0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}


/*** menu gauche ***/
#menu-gauche{
	float:left;
	position:relative;
	width:194px;
	margin-bottom:20px;
}
#menu-gauche h3{
	display:block;
	text-align:center;
	margin:0;
	padding:0;
}
.menu-gauche-sub{
margin-bottom:10px;
padding:0;
}
.menu-gauche-sub ul{
list-style-type:none;
margin:0;
padding:0;
}
.menu-gauche-sub ul li{
margin:0 0 5px;
padding:0;
}
.menu-gauche-sub ul li.first{
margin-top:0;
}
.menu-gauche-sub ul li a{
display:block;
height:30px;
line-height:30px;
margin:0;
padding-left:6px;
border:1px solid #b8b8b8;
font-size:1.10em;
font-weight:bold;
text-decoration:none;
background:#f5f5f5 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oCARECDJtpRgIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAALUlEQVQI153JuREAMBCDQEH/vWquAwd+CnBAsmRmTPJVWxVBgZdg8LxrGiLbFwOABg4/G6llAAAAAElFTkSuQmCC) repeat-x;
color:#3d3d3d;
}
.menu-gauche-sub ul a:hover{
background-color:#f5f5f5;
color:#000;
border:1px solid #000;
}

/*** Menu horizontal ***/
#menu_horizontal{
float:right;
width:804px;
height:30px;
margin-bottom:5px;
padding:1px 9px;
background:#ddd;
}
#menu_horizontal ul{
list-style-type:none;
margin:0;
padding:0;
}
#menu_horizontal li{
padding:0 0.5em;
height:30px;
line-height:30px;
}
#menu_horizontal li.bouton_gauche{
float:left;
background-position:right;
padding-right:20px;
padding-left:0;
}
#menu_horizontal li.bouton_droite{
float:right;
padding-left:20px;
padding-right:0;
}
#menu_horizontal a{
text-decoration:none;
padding:0 0.5em;
font:0.8em "Trebuchet MS";
}
#menu_horizontal a:hover{
color:#000;
text-decoration:underline;
}
#menu_horizontal a img{
border:none;
padding:0 0.3em;
}

/*** Content ***/
#content{
float:right;
width:804px;
margin-bottom:20px;
padding:8px;
border:1px solid #ccc;
background-color:#fdfdfd;
}

/*** footer ***/
#footer{
clear:both;
background-color:#f1f1f1;
border:1px solid #888;
border-bottom:0;
}
#footer .col{
float:left;
position:relative;
width:32%;
margin-top:8px;
margin-bottom:10px;
padding-left:1.322%;
line-height:1.3em;
}
#footer ul{
list-style-type:none;
margin:3px 0;
padding:0;
}
#footer .bottom{
clear:left;
padding:2px;
font-size:0.75em;
border-top:1px solid #999;
background-color:#aaa;
color:#fff;
}
#footer strong{
color:#555;
}
#footer a{
text-decoration:none;
color:#777;
}
#footer a:hover{
text-decoration:underline;
color:#fbb006;
}
#footer .social_link{
display:block;
float:left;
margin-top:10px;
margin-right:10px;
}

/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
----------------------------------------------------------------------------------------*/


/*** divers boite ***/
.breadcrumb{
font-size:0.8em;
}
.icone{
vertical-align:middle;
border:none;
text-decoration:none;
}


.pictureleft{float:left; position:relative}
.pictureright{float:right; position:relative}
.picture{margin:auto}
.pictureleft, .pictureright{border:1px solid silver}
.pictureleft, .pictureright, .picture{
margin:4px;
padding:2px;
font-size:0.8em;
font-style:italic;
text-align:center;
}

/*** 4 images principales ***/
.rmq{/* Style des remarques:valide, danger, erreur, information // <div class="rmq valide"> */
	margin:14px 0;
	padding:6px;
	padding-left:54px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	min-height:50px; /* On fixe la hauteur, que IE interprète comme une "hauteur minimale" soit 30px*/
	text-align:left;
}
.valide{
	background:#88ea8f url('../img/4_principaux/valide_50x50.png') no-repeat 0 center;
	border:1px solid #0f0;
}
.danger{
	color:#b6a815;
	background:url('../img/4_principaux/erreur_50x50.png') no-repeat 0 center;
	border:1px solid #b6a815;
}
.erreur{
	color:#f00;
	background:#ffd6d6 url('../img/4_principaux/erreur_50x50.png') no-repeat 0 center;
	border:1px solid #f00;
}
.information{
	color:#00f;
	background:url('../img/4_principaux/information_50x50.png') no-repeat 0 center;
	border:1px solid #00f;
}

/*** 3 div différents ***/
.InfoBien,.InfoMoyen,.InfoMediocre {
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:4px 0 1.618em;
padding:2px 8px;
}

.InfoBien {
border:1px solid #5CFF5C;
background-color:#C2FFC2;
}

.InfoMoyen {
border:1px solid #ebeb1c;
background-color:#ffffa8;
}

.InfoMediocre {
border:1px solid #F00;
background-color:#FDE8E8;
}

/* 9.bis FORUM
----------------------------------------------------------------------------------------*/

/* gestion forum (affichage des forums ou des listes) */
.forum_icon{
	width:30px;
}
.forum_auteur {
	font-size: .85em;
	text-align:right;
	color:#777;
}
.forum_auteur a {
	color:#777;
}
.forum_th th{
	font-size:.9em;
}
.forum_description{
	font-size: .9em;
	line-height: 1.4em;
}

/* Gestion et affichage des messages (forum, com news, com fiches) */
.p_author {
	width: 120px;
}
.p_author_name {
	text-align: center;
}
.p_avatar {
	text-align: center;
}
.p_author_rank{
	font-size:.8em;
	color:#999;
}
.p_msg_head{
	height: 27px;
	font-size:.8em;
	color:#999;
}
.p_msg_head a{
	color:#999;
}
.p_msg_edit{
	display:none;
}
.t_post:hover .p_msg_edit,
.p_post:hover .p_msg_edit{
	display:block;
}
.p_message {
	max-width: 660px;
	overflow:auto;
	clear:both;
}
.p_last_modif{
	padding: 10px 6px 6px;
	font-size: .7em;
	color: #666;
}
.p_last_modif_span{
	padding-top: 3px;
	border-top:1px solid #aaa;
}
.p_signature {
	margin-top: 10px;
	max-height:52px;
	line-height:26px;
	overflow:hidden;
	font-size:.8em;
	border-top:1px solid #dedede;
	color:#666;
}
.p_signature a{
	color:#666;
}


/* commentaire (formulaire forum) */
.forum-form-new #titre{
	padding:2px;
}

#suivi_commentaire {
	margin-top: 10px;
}
#suivi_commentaire legend {
	font-weight:bold;
}
#suivi_commentaire label{
	font-weight:normal;
}

/* preview (before to submit) */
.preview{
	border: 2px solid #ccc;
	padding: 5px;
	background: #fff;
}


/* ARTICLE
----------------------------------------------------------------------------------------*/

.titre_news, .news, .commentaires_questions{
margin-left:140px;
margin:auto;
padding:5px;
}
.titre_news, .news, .commentaires_questions{width:98%;}
.news, .commentaires_questions{
margin-bottom:10px;
}
.titre_news, .news{text-indent:9px;}
.titre_news{
clear:right;
line-height:1.3em;
border:1px solid #DEDEDE;
border-bottom:0;
}
.news{
border:1px solid #DEDEDE;
border-top:0;
}
.commentaires_questions{border:2px outset #000;}
.news img{
margin:5px;
border:1px solid silver;
padding:1px;
}
.news img:hover{border:1px solid #000;}



/* MESSAGERIE
----------------------------------------------------------------------------------------*/

/*** MP ***/
.case_mp{
border:1px dashed black;
/*background-color:rgb(255, 255, 215);*/
margin:5px;
padding:4px;
}
.gros_cadre{
margin:auto;
width:98%;
padding:5px;
}
.messagerie_menu_left{
float:left;
width:200px;
/*background-color:rgb(250, 250, 165);*/
border:1px solid black;
}
.messagerie_content a,
.messagerie_menu_left a{
text-decoration:none;
margin:4px;
}
.messagerie_content a:hover,
.messagerie_menu_left a:hover{
text-decoration:none;
color:#fbb006;
}
.messagerie_content{
margin-left:207px;
border:1px solid black;
/*background-color:rgb(250, 250, 165);*/
padding:4px;
}
.messagerie_content td{background-color:rgb(255, 255, 215);}

/*** messagerie ***/
#form_messagerie_send label{
	display:block;
}

/* PAGE PROFIL
----------------------------------------------------------------------------------------*/

/*** cadre fiche membre ***/
#profil_cadre{
	padding:10px;
}
.membre-field {
	margin: 4px 0;
}

.profil-social{
	padding:0 0 0 50px;
	background-repeat: no-repeat;
	font-weight:bold;
	display:block;
	height:40px;
	line-height:40px;
}
.profil-social.profil-twitter{
	background-image:url(../img/icones/icon-twitter-40);
}
.profil-social.profil-facebook{
	background-image:url(../img/icones/icon-facebook-40.png);

}
.profil-social.profil-googlep{
	background-image:url(../img/icones/icon-google-plus-40);

}
.profil-social.profil-linkedin{
	background-image:url(../img/icones/icon-linkedin-40);

}
.profil-social.profil-viadeo{
	background-image:url(../img/icones/icon-viadeo-40);
}



/* CONTACT
----------------------------------------------------------------------------------------*/

.form-contact label{
	display:block;
}
.form-contact .form-field{
	margin:6px 0;
}



/* 
----------------------------------------------------------------------------------------*/


.formules{
margin:10px 4px;
padding:4px;
}
.formule{
font-weight:bold;
font-size:1.3em;
border:1px dashed #000;
padding:4px;
background-color:#fff;
}
.CodePourBanniere{
background-color:rgb(230, 210, 210);
border:1px dashed #000;
padding:3px;
font-family:Cumberland, Arial, "Times New Roman", sherif;
overflow:auto;
}
.CodePourBanniere:hover{background-color:rgb(255, 240, 240);}
.code_langage_c{
background-color:#fff;
border:1px dashed #000;
padding:4px;
font-family:Cumberland, Arial, "Times New Roman", sherif;
}
.affichage_exe{
color:#fff;
background-color:#000;
border:2px ridge #000;
padding:3px;
font-family:Cumberland, Arial, "Times New Roman", sherif;
}
.PageMembre a{text-decoration:none;}
.touche{
border:1px outset #000;
background-color:#fff;
padding:1px;
}
.boiteIntro{
float:right;
width:350px;
background-color:#fefed3;
border:1px solid #000;
padding:4px;
margin:4px;
}
.photo_flotte_gauche{
float:left;
margin-right:4px;
}

/*** Tutoriel ***/
.CoursBoite{
min-height:80px;
margin-left:20px;
margin-top:20px;
}
.CoursBoite p{
margin-left:70px;
margin-top:10px;
}
.CoursImage{float:left; position:relative}
.CoursImage img{
margin:4px;
border:2px inset silver;
}
.boite_pub_droite{
float:right;
background-color:#fff;
border:1px solid #ccc;
width:200px;
padding:4px;
margin:4px;
}

/*** Page inscription ***/
#form_inscription {
	width: 300px;
	margin: 0 auto;
}
.inscription-label{
	display:block;
}
.inscription-input{
	width: 80%;
	padding:2px 3px;
	border:1px solid #ccc;
	background:#fff;
}
.inscription-input:focus{
	border:1px solid #de8888;
	outline:0;
	background:#fafafa;
}

/*** Page connexion ***/
#form_connexion {
	width: 300px;
	margin: 0 auto;
}
#form_connexion .label-input-text{
	display:block;
}
#form_connexion input[type="text"],
#form_connexion input[type="password"]{
	width: 80%;
	padding:2px 3px;
	border:1px solid #ccc;
	background:#fff;
}
#form_connexion input[type="text"]:focus,
#form_connexion input[type="password"]:focus{
	border:1px solid #de8888;
	outline:0;
	background:#fafafa;
}



/* 9. RESPONSIVE
----------------------------------------------------------------------------------------*/

/* DESIGN FOR A DOUBLE COLUMN ASIDE (NORMAL SIZE) */
@media screen and (min-width:990px){
	#page{width:1020px;}
}

/* DESIGN FOR A SINGLE COLUMN ASIDE (SMALL SCREEN) */
@media screen and (min-width:800px) and (max-width:990px){
	#page{width:780px;}
	#menu_horizontal{width:590px;}
	#content{width:590px;}
	.menu-gauche-sub ul li a{font-size:1em;}
}

/* DESIGN WITH A SINGLE COLUMN AND A SMALL CONTENT (iPad?) */
/* MINIMAL DESIGN WITHOUT SIDEBAR (MOBILE) */
@media screen and (max-width:800px){
	body{
		font-size:0.8em;
		line-height:.9em;
	}
	#page{width:100%;}
	#banniere{padding:0}
	.menu-gauche-sub ul li {
		width: 50%;
		float: left;
	}
	.menu-gauche-sub ul li a{
		margin: 0 2px;
	}
	#menu-gauche {
		width: 98%;
		margin: 0 auto;
		float: none;
	}
	#menu_horizontal {
		width: 98%;
		margin: 0 auto 20px;
		float: none;
		padding:0;
	}
	#content {
		clear: both;
		width: 98%;
		margin: 0 auto 20px;
		float: none;
		border:0;
		padding-left:0;
		padding-right:0;
	}
	#footer {
		width: 98%;
		margin: 0 auto;
	}
	#sidebar_ad{
		display:none;
	}
	/* pages */
	#form_connexion{
		width:100%;
	}
	#form_inscription{
		width:100%;
	}
	.CoursBoite{
		margin-left:0;
	}
	.p_marge{
		margin-left:0;
	}
	.p_author {
		width:80px;
	}
	.p_author .p_avatar img{
		height:initial;
	}
}


/* Design for print */
@media print {
	#banniere{display:none}
	#menu-gauche{display:none}
	#menu_horizontal{display:none}
	#footer{display:none}
}