/*=========================================== GENERALITES ==========================================*/
html {
	background: transparent url('../design/html.png') 50% 0 repeat;
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	font-family: Verdana, Arial, Lucida, Tahoma, Helvetica, Sans-Serif;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
	height: 100%;
	text-align: left;	
	color: #fff;
}
a {
	text-decoration: none;
}
b {
	color: #595352;
}
img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
table {
	margin: 0;
	padding: 0;
}

/*=====================================================================================================*/






/*===================================================== POPUP CSS ========================================================*/
#popupCss {
	display: none;
	background-color: #000;
	position: absolute;
	top: 50px;
	left: 50%;
	margin: 0 0 0 -320px;
	padding: 10px;
	width: 640px;
	text-align: center;
	border: 3px double #f4b239;
	z-index: 100000;
}
#popupCss p {
	text-align: center;
	margin: 0;
	padding: 3px 0;
	color: #fff;
}
#popupCss a {
	font-size: 12px;
	color: #a1a49d;
}
#popupCss a:hover {
	color: #f7c059;
}
/*=====================================================================================================*/







/*============================================== GLOBAL ===============================================*/
#global {
	background: transparent url('../design/global.png') 1px 0 repeat-y;
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 990px;
}
/*=====================================================================================================*/






/*============================================= HEADER ==============================================*/
#header {
	background: transparent url('../design/header.png') top left no-repeat;
	margin: 0;
	padding: 0;
	width: 990px;
	height: 188px;
	border: none;
	z-index: 0;
}
#headerRight{
	display: block;
	position: absolute;
	top: 0;
	left: 755px;
	margin: 0;
	padding: 0;
	width: 196px;
	height: 159px;
	z-index: 100;
}
/*=====================================================================================================*/





/*=============================================== MENU ===============================================*/
#menuCSS {
	background: transparent url('../design/menu.png') top left no-repeat;
	position: relative;
	width: 990px;
	height: 109px;
}
#menuCSS ul {
	position: absolute;
	top: 0;
	left: 398px;
	margin: 0;
	padding: 0;
}
#menuCSS li {
	list-style-type: none;
	float: left;
	margin: 0;
	padding: 0;
}
#menuCSS li a{
	display: block;
	margin: 0;
	padding: 0;
	height: 109px;
}
#menuCSS li.accueil a {
	width: 107px;
	background: transparent url('../design/boutons/accueil.png') top left no-repeat;
}
#menuCSS li.infographie a {
	width: 111px;
	background: transparent url('../design/boutons/infographie.png') top left no-repeat;
}
#menuCSS li.internet a {
	width: 109px;
	background: transparent url('../design/boutons/internet.png') top left no-repeat;
}
#menuCSS li.creation a {
	width: 116px;
	background: transparent url('../design/boutons/creation.png') top left no-repeat;
}
#menuCSS li.contact a {
	width: 107px;
	background: transparent url('../design/boutons/contact.png') top left no-repeat;
}
#menuCSS li a:hover {
	background-position: bottom left;
}
/*============================================= / MENU ===============================================*/








/*============================================= CENTRE ==============================================*/
#centre {
	position: relative;
	margin: 0;
	padding: 0 0 50px 0;
	overflow: auto;
	width: 100%;
}
/*=====================================================================================================*/






/*============================================ CONTENU RIGHT ==============================================*/
#contenuRight {
	position: relative;
	margin: 0 0 0 376px;
	padding: 10px 60px 0 10px;
	text-align: justify;
	color: #000;
	line-height: 1.5em;
	font-size: 12px;
}
#contenuRight h1 {
	position: relative;
	background: transparent url('../design/h1.png') 0 0 no-repeat;
	margin: 0;
	padding: 5px 0 15px 40px;
	font-size: 15px;
	color: #b1c16a;
	font-variant: small-caps;
	text-decoration: underline;
}
#contenuRight h2 {
	position: relative;
	background: transparent url('../design/h2.png') 0 80% no-repeat;
	margin: 0;
	padding: 10px 0 0 27px;
	font-size: 14px;
	color: #e65a1a;
	border-bottom: 3px double #e65a1a;
}
#contenuRight h2 span {
	margin-left: 5px;
	font-weight: normal;
	font-size: 11px;
	color: #b1c16a;
}
#contenuRight h2 span b {
	color: #e65a1a;
}
#contenuRight p {
	margin: 0;
	padding: 0;
}
#contenuRight a {
	color: #ed9046;
}
#contenuRight a:hover {
	color: #a2a97f;
	text-decoration: underline;
}

/*================= MINI GALERIE ACCUEIL ===================*/
#fondu {
	float: left;
	margin: 10px 0 0 25px;
	padding: 0;
	width: 500px;
	height: 350px;
	border: 3px solid #b5c858;
	text-align: center;
	background-color: #fff;
}
#contenuRight ul#galerieMini {
	position: relative;
	margin: 11px 0 0 26px;
	padding: 0;
	list-style-type: none;
	width: 500px;
	list-style-type: none;
}
#contenuRight ul#galerieMini li {
	list-style-type: none;
	margin: 8px 0 0 8px;
	float: left;
	padding: 0;	
	width: 154px;
	height: 108px;
	list-style-type: none;
	display: inline;
}
#contenuRight ul#galerieMini li.infodiv  {
	background: transparent url('../design/capture_info.png') top left no-repeat;
}
#contenuRight ul#galerieMini li.webdiv  {
	background: transparent url('../design/capture_web.png') top left no-repeat;
}
#contenuRight ul#galerieMini li.creadiv  {
	background: transparent url('../design/capture_crea.png') top left no-repeat;
}
#contenuRight ul#galerieMini li.infodiv a, #contenuRight ul#galerieMini li.webdiv a, #contenuRight ul#galerieMini li.creadiv a {
	display: block;
	margin: 0;
	padding: 23px 0 0 26px;
	width: 107px;
	height: 70px;
}
#contenuRight ul#galerieMini a span {
	display: none;
}
#contenuRight ul#galerieMini a:hover {
	margin: 0;
	padding: 0;
	z-index: 100;
}
#contenuRight ul#galerieMini a:hover span {
	position: absolute;
	top: 2px;
	left: 2px;
	margin: 0;
	display: block;
	width: 500px;
	height: 350px;
	z-index: 200;
}
/*======================= / MINI GALERIE ====================*/


#contenuRight ul li{
	list-style-type: none;
}
#contenuRight ul {
	margin: 5px 0 10px 20px;
	padding: 0 0 0 20px;
}
#contenuRight li {
	list-style-image: url('../design/puceLi.jpg');
}

#contenuRight div.galTravaux {
	margin: 5px 0 0 3px;
	float: left;
	padding: 0;	
	width: 133px;
	height: 93px;
	background: transparent url('../design/fondMinis.png') top left no-repeat;
}
#contenuRight div.galTravaux a {
	display: block;
	margin: 0;
	padding: 11px 0 0 13px;
	width: 107px;
	height: 70px;
}
/*=====================================================================================================*/






/*============================================ CONTENU LEFT ==============================================*/
#contenuLeft {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url('../design/contenu_left.png') top left no-repeat;
	margin: 0;
	padding: 60px 20px 0 70px;
	width: 270px;
	min-height: 85px;
	text-align: justify;
	color: #555;
	line-height: 1.3em;
	font-size: 12px;
}
#contenuLeft h2 {
	position: relative;
	background: transparent url('../design/h2.png') 0 0 no-repeat;
	margin: 0;
	padding: 0 0 5px 20px;
	font-size: 13px;
	color: #e65a1a;
	border-bottom: 3px double #e65a1a;
}
#contenuLeft a {
	color: #e65a1a;
	font-weight: bold;
}
#contenuLeft a:visited {
	color: #efae52;
	font-weight: bold;
}
#contenuLeft a:hover {
	color: #000;
	text-decoration: underline;
}
#contenuLeft ul {
	margin: 0;
	padding: 0;
}
#contenuLeft ul#travaux li{
	margin: 4px 0 0 0;
	padding: 0;
}
#contenuLeft ul li {
	position: relative;
	list-style-type: none;
	padding: 3px 0 4px 0;
}
#contenuLeft ul li span.newsPdf {
	position: absolute;
	top: 4px;
	right: 5px;
	font-size: 10px;
}
#contenuLeft ul li span.newsPdf a {
	color: #555;
}
#contenuLeft ul li span.newsPdf a:hover {
	color: #888;
	text-decoration: underline;
}
#contenuLeft span.icone {
	position: absolute;
	top: 0;
	left: -30px;
}
#contenuLeft ul.exemple {
	padding: 0 0 0 30px;
}
#contenuLeft ul.exemple li {
	position: relative;
	margin: 5px 0 0 0;
	list-style-image: url('../design/puceLeft.jpg');
}
/*=====================================================================================================*/







/*============================================= FOOTER ===============================================*/
#footer {
	position: relative;
	background: transparent url('../design/footer.png') top left no-repeat;
	margin: 0;
	padding: 0;
	width: 990px;
	height: 175px;
	text-align: center;
	font-size: 0.7em;
	color: #ddd;
}
#footer p{
	/*display: block;*/
	position: relative;
	padding: 10px 0 0 0;
	z-index: 1000;
	color: #555;
}
#footer a{
	color: #dbe1e7;
}
#footer a:hover{
	color: #334f75;
}
#footer a.sign {
	display: block;
	background: transparent url('../design/boutons/kristof.png') top left no-repeat;
	position: absolute;
	top: 40px;
	left: 152px;
	margin: 0;
	padding: 0;
	width: 151px;
	height: 56px;
}
#footer a:hover.sign {
	background-position: bottom left;
}
#footer p.basPage {
	position: absolute;
	bottom: 40px;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;	
}
#footer p.basPage a {
	color: #666;	
}
#footer p.basPage a:hover {
	color: #000;
text-decoration: underline;	
}
#footer p#ref {
	position: absolute;
	top: 140px;
	left: 50%;
	margin: 10px 0 0 -495px;
	padding: 0;
	width: 100%;
	color: #555;
	font-size: 11px;
	text-align: center;
}
#footer p#ref a{
	color: #888;
	text-align: center;
}
#footer p#ref a:hover, #footer p#ref a:visited {
	color: #555;
}
/*=====================================================================================================*/

 




/*========================================== LES CLASSES =============================================*/
.spacer {
	margin: 0;
	padding: 0;
	clear: both;
}
.detail {
	margin: 0;
	padding: 0;
	font-size: 11px;
	color: #555;
	font-weight: normal;
}
.bouton a {
	background: transparent url('../design/boutons/bouton.png') top left no-repeat;
	display: block;
	padding: 2px 0 0 0;
	width: 131px;
	height: 26px;
	text-decoration: none !important;
	color: #fa913c;
	font-size: 12px;
}
.bouton a:hover {
	background-position: bottom left;
	color: #9ea773;
}





#references {
	font-size: 14px;
	font-variant: small-caps;
}
#references a{
	color: #000;
	font-weight: normal;
}
.titreImage {
	font-size: 18px;
	font-weight: bold;
	color: #c86312;
	font-family: "Trebuchet MS", Arial;
}
.spanLeft {
	display: block;
	float: left;
	width: 35%;
	height: 15px;
	font-weight: bold;
	color: #777;
}
/*========================================= / LES CLASSES =============================================*/