@charset "utf-8";
/* CSS Document */
body{
	background:url(../images/bg.png) repeat;
}

#global
{
	width:854px;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	font-family:Arial, Helvetica, sans-serif;
}
/**************************************************************************************************************************************
 _______________________________________POSITIONNEMENT ELEMENTS BLOCS _________________________________________________
 *************************************************************************************************************************************/
 
 /*________LES LOGO_________________________________________________________________________________________________________________*/
 
 
#accueil a{
	position:absolute;
	width:150px;
	height:50px;
	margin-top:85px;
	z-index:1;
	
}
#accueil a:hover{
	position:absolute;
	width:150px;
	height:50px;
	margin-top:84px;
	z-index:1;
	
}
#logo
{
	position:absolute;
	width:358px;
	height:60px;
	background-image:url(../images/logo.png);
	z-index:2;
}
#logo_contact
{
	position:absolute;
	width:358px;
	height:60px;
	background-image:url(../images/logo_contact.png);
	z-index:2;
}
#logo_references
{
	position:absolute;
	width:358px;
	height:60px;
	background-image:url(../images/logo_references.png);
	z-index:2;
}
#logo_packs
{
	position:absolute;
	width:358px;
	height:60px;
	background-image:url(../images/logo_packs.png);
	z-index:2;
}
#logo_portfolio
{
	position:absolute;
	width:358px;
	height:60px;
	background-image:url(../images/logo_portfolio.png);
	z-index:2;
}

 /*________LES BANNIERES___________________________________________________________________________________________________________*/
#banniere
{
	position:absolute;
	margin-left:358px;
	width:496px;
	height:60px;
	background-image:url(../images/banniere.png);
	z-index:2;
}
#banniere_contact
{
	position:absolute;
	margin-left:358px;
	width:496px;
	height:60px;
	background-image:url(../images/banniere_contact.png);
	z-index:2;
}
#banniere_references
{
	position:absolute;
	margin-left:358px;
	width:496px;
	height:60px;
	background-image:url(../images/banniere_references.png);
	z-index:2;
}
#banniere_packs
{
	position:absolute;
	margin-left:358px;
	width:496px;
	height:60px;
	background-image:url(../images/banniere_packs.png);
	z-index:2;
}
#banniere_portfolio
{
	position:absolute;
	margin-left:358px;
	width:496px;
	height:60px;
	background-image:url(../images/banniere_portfolio.png);
	z-index:2;
}

 /*________CONTENEUR________________________________________________________________________________________________________________*/
 
#conteneur
{
	position:absolute;
	margin-top:105px;
	width:854px;
	z-index:2;
}

 /*________TOP IMAGES________________________________________________________________________________________________________________*/
 
#topimage
{
	position:absolute;
	width:580px;
	height:24px;
	background-image:url(../images/top_banniere.jpg);
	z-index:2;
}

 /*________CONTENT___________________________________________________________________________________________________________________*/
 
#content
{
	position:absolute;
	width:580px;
	height:388px;
	background-image:url(../images/content.jpg);
	margin-top:24px;
	z-index:2;
}

 /*________CONTENU INDEX______________________________________________________________________________________________*/
#presentation{
	position:relative;
	width:550px;
	height:150px;
	margin-top:20px;
	margin-left:10px;
}
#galerie{
	position:relative;
	width:550px;
	height:350px;
	margin-left:35px;
}
#servicespro{
	position:relative;
	width:550px;
	height:200px;
	margin-left:10px;
}
#bas_content{
	position:absolute;
	width:580px;
	height:134px;
	margin-top:412px;
	background-image:url(../images/bas_content_index.png);	
}
#bas_content_vierge{
	position:absolute;
	width:580px;
	height:134px;
	margin-top:412px;
	background-image:url(../images/bas_content_vierge.png);	
}
/*________BLOCS CONTACT_____________________________________________________________________________________________________________*/
#devis{
	position:absolute;
	width:140px;
	height:197px;
	background:url(../images/image_devis.png);
	margin-left:390px;
	margin-top:240px;
}
#avantages{
	position:absolute;
	width:280px;
	height:100px;
	margin-top:24px;
	margin-left:14px;
}
 /*________BLOCS COMPTE CLIENT______________________________________________________________________________________________________*/
#compteclient{
	position:absolute;
	width:260px;
	height:34px;
	margin-top:27px;
	margin-left:310px;
}
#connexion{
	position:absolute;
	width:260px;
	height:34px;
	margin-top:64px;
	margin-left:310px;
}
 /*________COTE DE LA PAGE__________________________________________________________________________________________________________*/
#top_cote{
	position:absolute;
	margin-left:580px;
	width:244px;
	height:53px;
	background-image:url(../images/top_cote.png);
	z-index:2;
}
#topmedium_cote{
	position:absolute;
	margin-left:580px;
	width:244px;
	height:169px;
	margin-top:53px;
	background-image:url(../images/topmedium_cote.jpg);	
}
#logo_min{
	position:absolute;
	width:49px;
	height:42px;
	margin-top:10px;
	margin-left:85px;
	background-image:url(../images/logo_min.png);		
}
#medium_cote{
	position:absolute;
	margin-left:580px;
	width:244px;
	height:199px;
	margin-top:222px;
	background-image:url(../images/medium_cote.jpg);	
}
#bottom_cote{
	position:absolute;
	margin-left:580px;
	width:244px;
	height:125px;
	margin-top:421px;
	background-image:url(../images/bottom_cote.png);	
}
 /*________BANNIERE COTE____________________________________________________________________________________________________________*/
#banniere_cote{
	position:absolute;
	margin-left:824px;
	width:30px;
	height:546px;
	background-image:url(../images/banniere_cote.png);	
}
#banniere_cote_contact{
	position:absolute;
	margin-left:824px;
	width:30px;
	height:546px;
	background-image:url(../images/bannierecote_contact.png);	
}
#banniere_cote_references{
	position:absolute;
	margin-left:824px;
	width:30px;
	height:546px;
	background-image:url(../images/bannierecote_references.png);	
}
#banniere_cote_packs{
	position:absolute;
	margin-left:824px;
	width:30px;
	height:546px;
	background-image:url(../images/bannierecote_packs.png);	
}
#banniere_cote_portfolio{
	position:absolute;
	margin-left:824px;
	width:30px;
	height:546px;
	background-image:url(../images/bannierecote_portfolio.png);	
}
 /*________BAS DE LA PAGE___________________________________________________________________________________________________________*/
#footer_first{
	position:absolute;
	width:300px;
	height:89px;
	background-image:url(../images/footer_first.png);
	background-color:#666;
	margin-top:655px;
}
#footer_second{
	position:absolute;
	width:280px;
	height:89px;
	background-image:url(../images/footer_second.png);
	background-color:#666;
	margin-top:655px;
	margin-left:300px;
}
#footer_third{
	position:absolute;
	width:273px;
	height:89px;
	background:url(../images/footer_third.png) no-repeat;
	background-color:#666;
	margin-top:655px;
	margin-left:580px;
}
#footer{
	position:absolute;
	width:850px;
	height:30px;
	margin-top:750px;
	color:#666;
	font-size:9px;
}
 /*________LIENS DU BAS - PARTENAIRES - LIENS_______________________________________________________________________________________*/
#partenaires{
	position:absolute;
	width:273px;
	height:70px;
	margin-left:10px;
	margin-top:10px;
	color:#CCC;
	font-size:13px;
}
	
#liens{
	position:absolute;
	width:255px;
	height:70px;
	margin-left:10px;
	margin-top:10px;
	color:#CCC;
	font-size:13px;
}
#divers{
	position:absolute;
	width:250px;
	height:70px;
	margin-left:10px;
	margin-top:10px;
	color:#CCC;
	font-size:13px;
}
 /*________ACTUALITES________________________________________________________________________________________________________________*/
#bloc_actu{
	position:absolute;
	width:216px;
	height:153px;
	margin-left:12px;
	background-image:url(../images/bloc_actu.png);
}
#content_actu{
	position:absolute;
	width:195px;
	height:100px;
	margin-top:30px;
	margin-left:10px;
}
 /*________SERVICES_________________________________________________________________________________________________________________*/
#bloc_services{
	position:absolute;
	width:216px;
	height:153px;
	margin-left:12px;
	background-image:url(../images/bloc_services.png);
}
#content_services{
	position:absolute;
	width:195px;
	height:120px;
	margin-top:30px;
	margin-left:10px;
}
#content_images{
	position:absolute;
	width:250px;
	height:145px;
	margin-left:10px;
}
#content_images2{
	position:absolute;
	width:250px;
	height:145px;
	margin-left:280px;
	margin-top:30px;
}
#content_images3{
	position:absolute;
	width:180px;
	height:250px;
	margin-left:350px;
}
#content_images4{
	position:absolute;
	margin-left:50px;
}
#content_images5{
	position:absolute;
	margin-top:30px;
	margin-left:300px;
}
 /*________NJ CREATION______________________________________________________________________________________________________________*/
#bloc_nj{
	position:absolute;
	width:216px;
	height:153px;
	margin-left:12px;
	background-image:url(../images/bloc_njcreation.png);
}
#content_nomsite{
	position:relative;
	width:195px;
	height:30px;
	margin-top:30px;
	margin-left:10px;
}
#content_numero{
	position:relative;
	width:195px;
	height:30px;
	margin-top:10px;
	margin-left:10px;
	color:#e3519b;
	font-size:13px;
}
 /*________MENTIONS LEGALES__________________________________________________________________________________________________________*/
#bloc_mentions{
	position:absolute;
	width:216px;
	height:153px;
	margin-left:12px;
	margin-top:20px;
	background-image:url(../images/bloc_mentionlegales.png);
}
#content_mentions{
	position:absolute;
	width:210px;
	height:40px;
	margin-top:33px;
	margin-left:4px;
}
#content_siret{
	position:absolute;
	width:210px;
	height:20px;
	margin-top:90px;
	margin-left:4px;
}
 /*________REALISATIONS_____________________________________________________________________________________________________________*/
#bloc_realisations{
	position:absolute;
	width:216px;
	height:153px;
	margin-left:12px;
	margin-top:20px;
	background-image:url(../images/bloc_rea.png);
}
#content_realisations{
	position:absolute;
	width:160px;
	height:120px;
	margin-top:33px;
	margin-left:26px;
}
#btn_prev{
	position:absolute;
	width:18px;
	height:45px;
	margin-top:65px;
	background-image:url(../images/btn_prev.png);
}
#btn_next{
	position:absolute;
	width:17px;
	height:45px;
	margin-top:65px;
	margin-left:199px;
	background-image:url(../images/btn_next.png);
}
 /*________PAGE PACKS ______________________________________________________________________________________________________________*/
 #bloc_packs{
	position:absolute;
	width:216px;
	height:301px;
	margin-left:595px;
	margin-top:80px;
	background-image:url(../images/blocspacks.png);
	z-index:3;
}
#content_packs{
	position:absolute;
	width:195px;
	height:250px;
	margin-top:30px;
	margin-left:10px;
}
.titre_packs{
	font-size:16px;
	font-weight:bold;
	color:#F90;
	font-family:Arial, Helvetica, sans-serif;
}
#siteinternet{
	position:relative;
	width:380px;
	height:230px;
	top:15px;
	left:10px;
}
#hebergement{
	position:absolute;
	width:560px;
	height:130px;
	top:250px;
	left:10px;
}
#referencement{
	position:absolute;
	width:560px;
	height:130px;
	top:360px;
	left:10px;
}
#img_packs{
	position:absolute;
	width:170px;
	margin-top:10px;
	margin-left:420px;
}

 /*________PORTFOLIO_________________________________________________________________________________________________________________*/
 #bloc_portfolio{
	position:absolute;
	width:216px;
	height:153px;
	margin-left:12px;
	background-image:url(../images/bloc_portfolio.png);
}
#content_portfolio{
	position:absolute;
	width:195px;
	height:120px;
	margin-top:30px;
	margin-left:10px;
}
 
/************************************************************************************************************************************____________________________________________________ LES TITRES_____________________________________________________________________
 *************************************************************************************************************************************/
 .titrepresentationnj{
	 color:#3098c4;
	 font-weight:bold;
	 font-family:MicroMieps;
	 font-size:14px;
}
 .titrepresentationcreation{
	 color:#f3be31;
	 font-family:MicroMieps;
	 font-size:14px;
}
.titre_partenaire{
	color:#F90;
	 font-family:Calibri, arial;
	 text-indent:30px;
	 font-size:16px;
	 font-weight:bold;
}
.titre_liens{
	color:#a3c131;
	 font-family:Calibri, arial;
	 text-indent:30px;
	 font-size:16px;
	 font-weight:bold;
}
.titre_divers{
	color:#39F;
	 font-family:Calibri, arial;
	 text-indent:30px;
	 font-size:16px;
	 font-weight:bold;
}
.titre_contact{
	 color:#ef9d25;
	 font-family:MicroMieps;
	 font-size:10px;
	 font-weight:bold;
}
.titre_form{
	 color:#ef9d25;
	 font-family:Arial, Helvetica, sans-serif;
	 font-size:13px;
	 font-weight:bold;
}
.titrenews{
	color:#999;
	font-size:11px;
}
.titreformation{
	color:#CCC;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
.formation_activite{
	color:#999;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	font-style:italic;
}
.commentaires{
	 color:#f3be31;
	 font-size:12px;
	 font-style:italic;
}
.texte_packs{
	font-size:12px;
	color:#CCC;
}
.titre_packs{
	font-size:13px;
	color:#F90;
	text-decoration:underline;
}
.rouge{
	color:#FC0;
	font-weight:bold;
}
.rougecontact{
	color:#F00;
	font-weight:bold;
}
.vertcontact{
	color:#3F0;
	font-weight:bold;
}
#presentation h2{
	color:#f3be31;
	font-size:12px;
	font-style:italic;
}
/**************************************************************************************************************************************
 ____________________________________________________ LES TEXTES ______________________________________________________________________
 *************************************************************************************************************************************/
.texte{
	 color:#d5d4d2;
	 font-family:Calibri, arial;
	 text-indent:30px;
	 margin-left:20px;
	 font-size:12px;
}
#presentation h1{
	 color:#d5d4d2;
	 font-family:Calibri, arial;
	 text-indent:30px;
	 margin-left:20px;
	 font-size:13px;	
}
.titre_etapes{
	color:#F90;
	 font-family:Calibri, arial;
	 font-size:15px;
}
.texte_etapes{
	color:#FFF;
	 font-family:Calibri, arial;
	 font-size:13px;
}
.citation{
	 color:#d5d4d2;
	 font-family: arial;
	 font-size:10px;
	 font-style:italic;
}
.contact{
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
.tableau{
	 color:#d5d4d2;
	 font-family:Calibri, arial;
	 font-size:12px;
}
.texte_compteclient{
	 color:#a3c131;
	 font-family:Arial, Helvetica, sans-serif;
	 font-size:12px;
}

.orange{
	 color:#f3be31;
	 font-style:italic;
}
.date{
	color:#F90;
	font-size:12px;
}
.news{
	color:#CCC;
	font-size:10px;
}
.nom_site{
	color:#F90;
	font-size:14px;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
}
.nom_activite{
	color:#CCC;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
.nom_services{
	color:#FFF;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
.titre_services{
	padding-left:50px;
	color:#09F;
	/*font-weight:bold;*/
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
}
.soustitre_services{
	padding-left:50px;
	color:#999;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
.tableau_services{
	margin-left:45px;
}
.titre_partenaires{
	color:#F90;
}
/**************************************************************************************************************************************
 ____________________________________________________ LIENS ______________________________________________________________________
 *************************************************************************************************************************************/
#bloc_services a{
	color:#CCC;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
#servicespro a{
	color:#CCC;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:underline;
}
#servicespro a:hover{
	color:#CCC;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:underline;
}
#bloc_services a:hover{
	color:#F90;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
}
#siteinternet a{
	color:#F90;
}
#siteinternet a:hover{
	text-decoration:none;
}
#bloc_portfolio a{
	color:#CCC;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
#bloc_portfolio a:hover{
	color:#F90;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
}
#bloc_packs a{
	color:#CCC;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
#bloc_packs a:hover{
	color:#F90;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
}

/**************************************************************************************************************************************
 ____________________________________________________ ELEMENTS ______________________________________________________________________
 *************************************************************************************************************************************/
 
 .bouton
{
background-color:#F90;
border:0;
width:100px;
color:#333;
}
 
 
/**************************************************************************************************************************************
 ____________________________________________________ FORMULAIRE ______________________________________________________________________
 *************************************************************************************************************************************/
input, textarea, select {font:12px/12px Arial, Helvetica, sans-serif; color:#000; padding:0;}
fieldset.action {background:#9da2a6; border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; margin-top:-20px;}
/*Text inputs*/
.NFText {border:none; vertical-align:middle; font:12px/15px Arial, Helvetica, sans-serif; background:none;}
.NFTextCenter {height:15px; background:url(images/input.png) repeat-x 0 0; padding:3px 0; margin:0; float:left; line-height:15px;}
.NFTextLeft, .NFTextRight {width:7px; height:21px; vertical-align:middle; float:left;}
.NFTextLeft {background:url(images/input-left.png) no-repeat 0 0;}
.NFTextRight {background:url(images/input-right.png) no-repeat 0 0;}

/*Textareas*/
.NFTextareaTop {background:url(images/textarea-tr.png) no-repeat 100% 0;}
.NFTextareaBottom {background:url(images/textarea-br.png) no-repeat 100% 0; margin-bottom:5px;}
.NFTextareaTopLeft {background:#f2f2e6 url(images/textarea-tl.png) no-repeat 0 0;}
.NFTextareaBottomLeft {background:#f2f2e6 url(images/textarea-bl.png) no-repeat 0 0;}
.NFTextareaLeft, .NFTextareaRight, .NFTextareaLeftH, .NFTextareaRightH {float:left; padding-bottom:5px;}
.NFTextareaLeft, .NFTextareaLeftH {width:5px;}
.NFTextareaLeft {background:url(images/textarea-l-off.png) repeat-y 0 0;}
.NFTextareaLeftH {background:url(images/textarea-l-over.png) repeat-y 0 0;}
.NFTextareaRight, .NFTextareaRightH {padding-right:5px; padding-bottom:0;}
.NFTextareaRight {background:url(images/textarea-r-off.png) repeat-y 100% 0;}
.NFTextareaRightH {background:url(images/textarea-r-over.png) repeat-y 100% 100%;}

/**************************************************************************************************************************************
 ____________________________________________________ DERNIERES REALISATIONS ________________________________________________________
 *************************************************************************************************************************************/
#slider {
  /* You MUST specify the width and height */
  width:160px;
  height:100px;
  position:relative;	
  overflow:hidden;
  border:#CCC solid 2px;
}
#mask-gallery {
  overflow:hidden;	
}
#gallery {
  /* Clear the list style */
  list-style:none;
  margin:0;
  padding:0;  
  z-index:0;  
  /* width = total items multiply with #mask gallery width */
  width:900px;
  overflow:hidden;
}
#gallery li { 
	/* float left, so that the items are arrangged horizontally */
	float:left;
}

#mask-excerpt {	
	/* Set the position */
	position:absolute;	
	top:0;
	left:0;
	z-index:500px;
	height:20px;
	padding-left:10px;
	/* width should be lesser than #slider width */
	width:160px;
	overflow:hidden;	
}	
#excerpt {
	list-style:none;
	/* Set the position */
	z-index:10;
	position:absolute;
	/* Set the style */
	width:160px;
	overflow:hidden;
	font-family:arial;
	font-size:10px;
	color:#fff;	
}
#excerpt li {
	padding:2px;
	color:#000;
}
.clear {
  clear:both;	
}
/**************************************************************************************************************************************
 ____________________________________________________ PORTFOLIO WEBDESIGN ________________________________________________________
 *************************************************************************************************************************************/
 .hr{
	 margin-left:130px;
 }
 #slideshow {
	width:580px;
	height:263px;

	position:relative;
}
#slideshow #slidesContainer {
	margin-left:25px;
  width:550px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:40px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index:5;
}
#leftControl {
  top:270px;
  left:100px;
  background:transparent url(../img_website/left.png) no-repeat 0 0;
}
#rightControl {
  top:270px;
  right:100px;
  background:transparent url(../img_website/right.png) no-repeat 0 0;
}
#precedent{
	position:absolute;
	width:200px;
	height:20px;
	margin-top:235px;
	margin-left:50px;
	font-weight:bold;
	color:#F90;
}
#suivant{
	position:absolute;
	width:200px;
	height:20px;
	margin-top:235px;
	margin-left:360px;
	font-weight:bold;
	color:#F90;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;
  font:normal 11px Verdana, Geneva, sans-serif;
  color:#ccc;
}
#pageContainer {
  margin:0 auto;
  width:580px;
}
.img{
	border: 5px solid #666;
}
.slide h2 {
	color:#F90;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-size:16px;
	font-weight:bold;
}
.slide img {
  float:right;
  margin:0 15px;
}
#footer_portfolio {
  height:100px;
}
#footer_portfolio p {
  margin:30px auto 0 auto;
  display:block;
  width:560px;
  height:40px;
}
/**************************************************************************************************************************************
 ____________________________________________________ PORTFOLIO PRINT ________________________________________________________
 *************************************************************************************************************************************/
#galerie h1{
	font-size:180%;
	font-weight:normal;
	color:#555;
}
#galerie h2{
	clear:both;
	font-size:160%;
	font-weight:normal;
	color:#F90;
	margin:0;
	padding:.5em 0;
	text-align:center;
}
/*a{
	text-decoration:none;
	color:#f30;	
}*/
p{
	clear:both;
	margin:0;
	padding:.5em 0;
}
pre{
	display:block;
	font:100% "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	overflow:auto;
	width:800px;
}

img{border:none;}
#galerie ul,li{
	margin-left:10px;
	margin-top:5px;
	padding:0;
}
#galerie li{
	list-style:none;
	float:left;
	display:inline;
	margin-right:10px;
}



/*  */

#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	z-index:10;
	}