/* ##################################################################################################

                           FEUILLE DE STYLE DU SITE HTTP://WWW.THIEBAUTS.COM
                        feuille de style n 4 - couleurs fraiches, tonalite vert/gris

################################################################################################## */

/*****************************************************************************
      general
*****************************************************************************/
body {
	margin:0;
	padding:0;
	font:normal 12px Tahoma, Verdana, sans-serif;
	color:#4f4f4f;
	background:transparent url(../imgs/style4/bg_body.gif) 0 0 repeat;
}

img {
	margin:0;
	padding:0;
	border:0;
}

#page {/* div conteneur de tout le site */
	margin:0 auto;
	padding:10px;
	width:778px;/* 798 */
	background-color:#fff;
}

/* pour FF qui a la mauvaise habitude d'entourer les liens avec des pointilles pendant le clic */
a {outline: none;}

/* class definissant un margin avant l'element */
.first {margin-top:10px !important;}


/*****************************************************************************
      header
*****************************************************************************/
#header {
	height:60px;
	width:778px;
	background:transparent url(../imgs/style4/bandeau_haut.gif) 0 0 no-repeat;
}

	#header h1 {
		margin:0;
		text-indent:-2000px;
	}
	
	#header h2 {
		margin:0;
		text-indent:-2000px;
	}


/*****************************************************************************
      quicklinks
*****************************************************************************/
#quicklinks {
	margin:20px 0 5px 0;
	height:14px;
	width:778px;
}

	a#lnk_home {
		float:left;
		display:block;
		height:15px;
		width:37px;
		text-indent:-2000px;
		background:transparent url(../imgs/style4/bt_home.gif) 0 0 no-repeat;
	}
		a#lnk_home:hover {background-position:0 -14px;}

	a#lnk_downloadcv {
		float:right;
		display:block;
		height:14px;
		width:155px;
		text-indent:-2000px;
		background-image:url(../imgs/style4/bt_telechargement_cv.gif);
	}
		a#lnk_downloadcv:hover {background-position:0 -14px;}


/*****************************************************************************
      bloc image / infos
*****************************************************************************/
#img_infos {
	height:160px;
	width:778px;
}

	#image {
		float:left;
		margin:0;
		height:152px;/* 160 */
		background-color:#f0f0f0;
	}
		.home {
			padding:4px 8px;
			width:762px;/* 778 */
		}
		.rea {
			padding:4px;
			width:562px;/* 570 */
		}
		#image img {border:1px solid #fff !important;}
	
	#infos {
		float:right;
		margin:0;
		height:160px;
		width:198px;
		background-color:#f0f0f0;
	}
		#titleInfos {
			display:block;
			margin:0;
			padding:0;
			height:19px;
			width:198px;
			text-indent:-2000px;
			background-image:url(../imgs/style4/titre_infos.gif);
		}
		
		#infosLiens {margin-top:18px;/margin-top:15px;}
		
		#infos h1 {
			margin:0;
			padding:2px 5px;
			font-size:12px;
		}
		
		#infos h2 {
			margin:0;
			padding:0 5px;
			font-weight:normal;
			font-size:12px;
		}
		
		#infos p {
			margin:15px 0;
			padding:5px;
			height:35px;
			font-size:11px;
		}
		
		#infos a {
			margin:0;
			padding:0 19px;
			font-size:11px;
			color:#4F4F4F;
			text-decoration:none;
			background:transparent url(../imgs/style4/symbole.gif) 5px 3px no-repeat;
		}
		#infos a:hover {text-decoration:underline;}


/*****************************************************************************
      menu
*****************************************************************************/
#menu {
	float:left;
	margin:0;
	width:148px;
	font:normal 12px Tahoma, Verdana, sans-serif;
	background-color:#f0f0f0;
}

	#menu span#titleMenu {
		display:block;
		margin:0;
		padding:0;
		height:19px;
		width:148px;
		text-indent:-2000px;
		background:transparent url(../imgs/style4/titre_menu.gif) 0 0 no-repeat;
	}
	
	#menu ul {
		margin:0;
		padding:0;
	}
	
	#menu li {
		display:block;
		margin:0;
		font:normal 12px/18px Tahoma, Verdana, sans-serif;
		color:#4f4f4f;
		list-style:none;
		border-bottom:1px #fff solid;
	}
	
	#menu li.nolink {
		padding:0 0 0 7px;
		border-left:3px #9ae02b solid;
	}
	
	#menu li a {
		display:block;
		padding:0 0 0 10px;
		color:#4f4f4f;
		text-decoration:none;
	}
		#menu li a:hover {
			padding:0 0 0 7px;
			background-color:#fff;
			border-left:3px #9ae02b solid;
		}


/*****************************************************************************
      sous-menu
*****************************************************************************/
#sousmenu {
	float:right;
	margin:0;
	width:198px;
	font:normal 12px Tahoma, Verdana, sans-serif;
	background-color:#f0f0f0;
}

	#sousmenu a, #sousmenu a img {margin:0; padding:0;}

	#sousmenu ul {
		margin:0;
		padding:0;
	}
	
	#sousmenu li {
		display:block;
		margin:0;
		padding:0;
		font:normal 12px/18px Tahoma, Verdana, sans-serif;
		color:#4f4f4f;
		list-style:none;
		border-bottom:1px #fff solid;
	}
	
	#sousmenu li.nolink {
		padding:0 0 0 7px;
		border-left:3px #9ae02b solid;
	}
	
	#sousmenu li a {
		display:block;
		margin:0;
		padding:0 0 0 10px;
		color:#4f4f4f;
		text-decoration:none;
	}
		#sousmenu li a:hover {
			padding:0 0 0 7px;
			background-color:#fff;
			border-left:3px #9ae02b solid;
		}

	#sousmenu .spacer {
		margin:0;
		padding:0;
		height:5px;
		width:198px;
		font-size:1px;
		line-height:1em;
	}

/*-- afficahge des titres du sous menu --*/
a.titleSitesWeb, a.titleCdRom, a.titleDvd, a.titleAnimFlash {
	display:block;
	height:19px;
	width:198px;
}
a.titleSitesWeb {background:#bababa url(http://www.thiebauts.com/imgs/style4/titre_sitesweb.gif) 0 0 no-repeat;}
a.titleCdRom {background:#bababa url(http://www.thiebauts.com/imgs/style4/titre_cdrom.gif) 0 0 no-repeat;}
a.titleDvd {background:#bababa url(http://www.thiebauts.com/imgs/style4/titre_dvd.gif) 0 0 no-repeat;}
a.titleAnimFlash {background:#bababa url(http://www.thiebauts.com/imgs/style4/titre_animflash.gif) 0 0 no-repeat;}

	a.titleSitesWeb span, a.titleCdRom span, a.titleDvd span, a.titleAnimFlash span {
		display:block;
		float:left;
		height:19px;
		width:177px;
		text-indent:-2000px;
	}

	a.titleSitesWeb img, a.titleCdRom img, a.titleDvd img, a.titleAnimFlash img {float:right;}
	a.titleSitesWeb span.openClose, a.titleCdRom span.openClose, a.titleDvd span.openClose, a.titleAnimFlash span.openClose {
		display:block;
		float:right;
		height:19px;
		width:21px;
		text-indent:-2000px;
	}
/*-- --*/


/*****************************************************************************
      contenu
*****************************************************************************/
/* div englobant le texte du contenu (#texte_contenu) le menu (#menu) et le sous-menu (#sousmenu) */
#content {
	margin-top:10px;
	width:778px;
}

/* definit le fond du div contenu pour les realisations (la bordure gauche du bloc sousmenu)
.realisation {}    ==> PAS BESOIN POUR CE DESIGN
*/
/* spacer du bas */
.spacerContentRealisation {
	margin:0;
	padding:0;
	height:1px;
	font-size:1px;
	line-height:1px;
}


/*-- TEXTE --*/
#text {/* div conteneur */
	float:left;
	margin-left:10px;
}
.text_heading {width:618px;}/* partie rubriques */
.text_realisation {width:410px;}/* partie realisations */

/*****     commun aux parties rubriques et realisations     *****/
/*-- les titres --*/
#text h1, #text h2, #text h3, #text h4, #text h1, #text h5, #text h6 {
	margin:0;
	padding:0;
	color:#9c3;
}
#text h1 {margin-bottom:2px; padding-bottom:1px; font-size:16px; border-bottom:1px solid #f0f0f0;}
#text h2 {font-size:15px;}
#text h3 {font-size:14px;}
#text h4 {font-size:14px; color:#4f4f4f;}
#text h5 {font-size:12px;}
#text h6 {font-size:12px; color:#4f4f4f;}
/*-- --*/

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

#text a {color:#8abc26;}
	#text a:hover {
		color:#668503;
		text-decoration:none;
	}

#text ul {
	margin:20px 0 0 0;
	padding:0;
}

#text li {
	margin:0;
	padding:0 0 0 12px;
	list-style:none;
	color:#4f4f4f;
}
	#text ul.listType1 li {background:transparent url(../imgs/style4/symbole.gif) 0 4px no-repeat;}
	#text ul.listType2 li {background:transparent url(../imgs/style4/symbole_2.gif) 0 4px no-repeat;}

/*-- pour la page "competences" --*/
span.titleCompetences {
	display:block;
	margin:0 0 0 10px;
	padding:0 0 1px 12px;
	width:420px;
	background:url(../imgs/style4/symbole_2.gif) 0 4px no-repeat;
}
	span.titleCompetences img {float:right;}

#text ul.listCompetences {margin:0 0 10px 30px;}
	#text ul.listCompetences li {padding:1px 0 1px 12px; width:400px;}
		#text ul.listCompetences li span {display:none;}
		#text ul.listCompetences li:hover {background-color:#f0f0f0;}
	
	label.lvl_1, label.lvl_2, label.lvl_3, label.lvl_4, label.lvl_5 {
		display:block;
		float:right;
		height:16px;
		width:72px;
	}
	label.lvl_1 {background:transparent url(../imgs/style4/level_1.gif) 0 0 no-repeat;}
	label.lvl_2 {background:transparent url(../imgs/style4/level_2.gif) 0 0 no-repeat;}
	label.lvl_3 {background:transparent url(../imgs/style4/level_3.gif) 0 0 no-repeat;}
	label.lvl_4 {background:transparent url(../imgs/style4/level_4.gif) 0 0 no-repeat;}
	label.lvl_5 {background:transparent url(../imgs/style4/level_5.gif) 0 0 no-repeat;}
/*-- --*/


/*****************************************************************************
      footer
*****************************************************************************/
#footer {
	margin:5px 0 0 0;
	padding:0;
	width: 778px;
}

	#footer p {
		margin:5px 0;
		padding:0;
		font-size:10px;
		color:#4f4f4f;
	}
	
	#footer a {color:#000;}
		#footer a:hover {
			color:#8abc26;
			text-decoration: none;
		}


/*****************************************************************************
      elements de decoration / mise en page
*****************************************************************************/
.barHoriz {
	clear:both;
	margin:0;
	padding:0;
	height:1px;
	width:778px;
	font-size:1px;
	line-height:1em;
	background-color:#fff;
}
	.barTop{}/* barre du haut, entre quicklink et image/info */
	.barMiddle{}/* barre du milieu, entre image/info et contenu */
	.barBottom{/* barre du bas, entre contenu et footer */
		margin-top:10px;
		height:2px;
		background-color:#f0f0f0;
	}

.spacer {
	clear:both;
	margin:0;
	padding:0;
	height:1px;
	font-size:1px;
	line-height:1em;
}

/*****************************************************************************
      elements de formulaire
*****************************************************************************/
.input {
	margin:0;
	padding:0;
	border:1px solid #49657e;
	width:140px;
	height:16px;
	font:normal 12px Tahoma, Verdana sans-serif;
	color:#49657e;
}

.textarea {
	margin:0;
	padding:0;
	border:1px solid #49657e;
	height:100px;
	width:350px;
	font:normal 12px Tahoma, Verdana, sans-serif;
	color:#49657e;
}

.select {
	margin:0;
	padding:0;
	border:1px solid #49657e;
	width:140px;
	height:16px;
	font:normal 12px Tahoma, Verdana, sans-serif;
	color:#49657e;
}


/*****************************************************************************
      popup realisations
*****************************************************************************/
body#popup {padding-top:5px;}

#popupRea {
	position:relative;
	margin:0 5px;
	padding:5px 10px;
	width:580px;/* 600 */
	background-color:#fff;
}
	#popupRea img {float:left;}

	#popupRea span {
		position:absolute;
		right:0;
		bottom:5px;
		padding:0 10px 0 0;
		width:140px;
	}
	
	a#btnClose {
		float:right;
		display:block;
		margin:5px 10px;
		height:18px;
		width:56px;
		background:transparent url(../imgs/style4/bt_fermer.gif) 0 0 repeat-y;
	}
		a#btnClose span {
			display:block;
			text-indent:-2000px;
		}