/********************************************************************/
/*                        Import du fichier CSS                     */
/*   <link href="fichier.css" rel="stylesheet" type="text/css" />   */
/********************************************************************/

body {
	margin:0;
	padding:0;
	text-align: center;
	font-family:Trebuchet MS,Trebuchet,Verdana,Arial,Sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFFFF;
}

#page {
	position:relative;
	text-align: left;
	width: 100%;
	min-height:550px;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
}

#page_frame {
	position:relative;
	text-align: left;
	width: 100%;
	min-height:350px;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
}


a {
	color:#000000;
	text-decoration:none;
}

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

h1 {
	color:#e57b03;
}

h2 {
	color:#e57b03;
}

hr {
	border-top:solid 1px #b0b0b0;
	border-bottom:none;
	border-right:none;
	border-left:none;
}

/*
input[type=text] {
	background-color:#FFFFFF;
	width:300px;
	height:15px;
	border:none;
	font-size:10px;
}

textarea {
	background-color:#FFFFFF;
	width:300px;
	height:50px;
	border:none;
	font-size:12px;
	font-family:Trebuchet MS,Trebuchet,Verdana,Arial,Sans-serif;
}
*/

.erreur {
	color:#FF0000;
}

.gris {
	color:#b0b0b0;
}

.orange {
	color:#e57b03;
}

.orange_internet {
	color:#f8b358;
}

.vert_photo {
	color:#b3a750;
}

.bleu_edition {
	color:#66a2c0;
}

.gris_identite {
	color:#868688;
}

div .clear {
	clear:both;
}

/*****************/
/* OFFRE DU MOIS */
/*****************/
#lien_offre {
	display:block;
	position:absolute;
	top:-10px;
	left:0;
	z-index:99;
}


/********/
/* HAUT */
/********/
#haut {
	display:block;
	position:relative;
	width:100%;
	min-height:180px;
	height:auto;
	background-position:top left;
	background-repeat:no-repeat;
}

#haut_contenu {
	display:block;
	position:relative;
	width:770px;
	min-height:180px;
	height:auto;
	margin:0 auto;
	background-position:top left;
	background-repeat:no-repeat;
}

p.titre {
	position:absolute;
	display:block;
	top:63px;
	left:380px;
	font-size:14px;
	font-style:italic;
	color:#000000;
}

a.logo_aa {
	position:absolute;
	display:block;
	top:25px;
	left:550px;
	z-index:99;
	
}

#logo_flash {
	position:absolute;
	display:block;
	top:27px;
	left:555px;
	width:219px;
	height:102px;
	z-index:1;
}

ul.menu1 {
	display:block;
	position:absolute;
	margin:0;
	padding:0;
	list-style:none;
	top:85px;
	left:0px;
	width:500px;
	height:25px;
	z-index:99;
}

ul.menu1 li {
	display:block;
	position:relative;
	float:left;
	margin:0 20px 0 0px;
	padding:0;
	text-align:center;
	font-size:10px;
	color:#b0b0b0;
}

ul.menu1 li a {
	font-size:10px;
	color:#b0b0b0;
	text-decoration:none;
}

ul.menu1 li a.on,
ul.menu1 li a.hover,
ul.menu1 li a:hover {
	font-size:10px;
	color:#e57b03;
	text-decoration:none;
}


ul.menu2 {
	display:block;
	position:absolute;
	margin:0;
	padding:10px 0 0 0;
	list-style:none;
	top:105px;
	left:0px;
	width:600px;
	height:30px;
	border-top:solid 1px #b0b0b0;
	z-index:99;
}

ul.menu2 li {
	display:block;
	position:relative;
	float:left;
	margin:0 13px 0 0;
	padding:0;
	font-size:12px;
	color:#b0b0b0;
}

ul.menu2 li a {
	font-size:12px;
	color:#b0b0b0;
	text-decoration:none;
}

ul.menu2 li a.on,
ul.menu2 li a.hover,
ul.menu2 li a:hover {
	font-size:12px;
	color:#e57b03;
	text-decoration:none;
}



.menu_edition,
.menu_internet,
.menu_photographie,
.menu_identite,
.menu_actualites,
.menu_qui
{
	position:relative;
	display:block;
	float:left;
	height:20px;
	text-align:left;
}


#conteneur_edition {
	width:40px;
	overflow:hidden;
}

#slide_edition {
	display:block;
	position:relative;
	width:80px;
}

.menu_edition {
	width:40px;
}

#conteneur_edition a.on, #conteneur_edition a:hover {
	color:#66a2c0;
}

#conteneur_internet {
	width:50px;
	overflow:hidden;
}

#slide_internet {
	display:block;
	position:relative;
	width:100px;
}

.menu_internet {
	width:50px;
}

#conteneur_internet a.on, #conteneur_internet a:hover {
	color:#f8b358;
}


#conteneur_photographie {
	width:75px;
	overflow:hidden;
}

#slide_photographie {
	display:block;
	position:relative;
	width:150px;
}

.menu_photographie {
	width:75px;
}

#conteneur_photographie a.on, #conteneur_photographie a:hover {
	color:#b3a750;
}


#conteneur_identite {
	width:92px;
	overflow:hidden;
}

#slide_identite {
	display:block;
	position:relative;
	width:184px;
}

.menu_identite {
	width:92px;
}

#conteneur_identite a.on, #conteneur_identite a:hover {
	color:#5c5c5c;
}


#conteneur_actualites {
	width:60px;
	overflow:hidden;
}

#slide_actualites {
	display:block;
	position:relative;
	width:120px;
}

.menu_actualites {
	width:60px;
}


#conteneur_qui {
	width:105px;
	overflow:hidden;
}

#slide_qui {
	display:block;
	position:relative;
	width:210px;
}

.menu_qui {
	width:105px;
}

/*
#menu_edition_texte,
#menu_internet_texte,
#menu_photographie_texte,
#menu_identite_texte,
#menu_actualites_texte,
#menu_qui_texte
{
	position:absolute; 
	z-index:3;
}

#menu_edition_texte span:first-child,
#menu_internet_texte span:first-child,
#menu_photographie_texte span:first-child,
#menu_identite_texte span:first-child,
#menu_actualites_texte span:first-child,
#menu_qui_texte span:first-child
{ text-transform: uppercase; }

#menu_edition_texte.on,
#menu_internet_texte.on,
#menu_photographie_texte.on,
#menu_identite_texte.on,
#menu_actualites_texte.on,
#menu_qui_texte.on
{ color: #e57b03; }
*/


#cube_intro_rubrique {
	display:block;
	position:relative;
	float:left;
	margin:165px 0 0 0;
	padding:0;
	width:100px;
	height:110px;
	background:url(../images/ombre_cube_mini.jpg) top left no-repeat;
}

#texte_intro_rubrique {
	display:block;
	position:relative;
	float:left;
	margin:165px 0 0 0;
	width:630px;
	min-height:110px;
	font-size:12px;
	/*color:#424242;*/
	color:#b0b0b0;
	text-align:justify;
	/*line-height:22px;*/
}

#texte_intro_rubrique strong {
	font-weight:normal;
}

#texte_intro_rubrique h2 {
	display:inline;
	font-weight:normal;
}

#texte_intro_rubrique a {
	font-size:11px;
	color:#e57b03;
}

/***********/
/* CONTENU */
/***********/
#centre {
	display:block;
	position:relative;
	width:100%;
	min-height:350px;
}

#centre_contenu, #centre_contenu_frame {
	display:block;
	position:relative;
	width:770px;
	min-height:350px;
	margin:0 auto;
}

#contenu_gauche {
	display:block;
	position:relative;
	width:390px;
	min-height:400px;
	float:left;
	
}

#contenu_droite, #contenu_droite_edition {
	display:block;
	position:relative;
	width:300px;
	min-height:400px;
	float:left;
	padding:0 60px 0 20px;
	text-align:justify;
}

#contenu_droite p, #contenu_droite_edition p {
	color:#000000;
}

#contenu_droite p.orange, #contenu_droite_edition p.orange {
	color:#e57b03;
}

#contenu_droite_edition strong {
	font-weight:normal;
	color:#e57b03;
}

#contenu_droite a.gris {
	color:#b0b0b0;
}

#contenu_droite a.orange {
	color:#e57b03;
}

a.popup {
	color:#b0b0b0;
	text-decoration:none;
}

a.popup:hover {
	color:#e57b03;
	text-decoration:none;
}




#makeMeScrollable
{
	position: relative;
	float:left;
	min-height: 350px;
	width: 100%;
	overflow: hidden;
	text-align:center;
}

/*
#makeMeScrollable div.scrollableArea *
{
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}
*/


/*	Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* 	The hotspots have a minimum width of 100 pixels 
	and if there is room the will grow and occupy 15% 
	of the scrollable area (30% combined). Adjust it 
	to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/*	There is a big background image and it's used 
		to solve some problems I experienced
		with Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/*	Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	/*background-image: url(../images/arrow_left.gif);*/
	background-image: url(../images/FLECHEGAUCHE.png);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.85; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.85; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 85); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	/*background-image: url(../images/arrow_right.gif);*/
	background-image: url(../images/FLECHEDROITE.png);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.85;
	filter: alpha(opacity = 85);
	-moz-opacity: 0.85;
	zoom: 1;
}

/*	The scroll wrapper is always the same width and 
	height as the containing element (div). Overflow 
	is hidden because you don't want to show all of 
	the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
	float: left;
	margin: 0;
	padding: 0;
}



ul.liste_realisations {
	display: block;
	min-height: 350px;
	/* max width here, for users without javascript */	
	/*width: 50000px;	*/
	padding: 0; 
	margin: 0;
	list-style: none;
}
.liste_realisations li {
	display: block;
	float: left;	
	margin:10px;
	text-align:left;
	width:320px;
	line-height:20px;
}

.liste_realisations a {
	display: block;
	text-decoration: none;
}

.liste_realisations a.iframe {
	display: inline;
	text-decoration: none;
	/*color:#a7a7a7;*/
	color:#e57b03;
	font-size:10px;
	font-style:italic;
}

.liste_realisations .image {
	border: 3px #fff solid;	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}


/*
#accueil_gauche {
	display:block;
	position:relative;
	float:left;
	width:110px;
	height:auto;
	color:#b0b0b0;
	font-size:25px;
	text-align:right;
	padding:0 10px 0 0;
}

#accueil_droite {
	display:block;
	position:relative;
	float:left;
	width:170px;
	padding:0 0 0 10px;
	height:auto;
	color:#b0b0b0;
	font-size:11px;
	text-align:left;
	border-left:solid 1px #b0b0b0;
}

#accueil_droite a {
	display:inline;
	color:#ff6300;
	font-size:11px;
}
*/




/***********/
/* ACCUEIL */
/***********/
ul.accueil_cube {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	/*width:660px;*/
	clear:left;
	list-style:none;
	margin:0 auto;
}
ul.accueil_cube li {
	display:block;
	position:relative;
	float:left;
	/*
	margin:0 15px 0 0;
	width:150px;
	*/
	height:200px;
	background:url(../images/fond_cube.jpg) top left no-repeat;
	padding:0;
	color:#6f6f6f;
	font-size:12px;
}

ul.accueil {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	clear:left;
	list-style:none;
}

ul.accueil li {
	display:block;
	position:relative;
	float:left;
	padding:0;
	color:#6f6f6f;
	font-size:12px;
}

li.accueil_edition {
	width:185px;
	margin:0 22px 0 0;
}

li.accueil_internet {
	width:165px;
	margin:0 22px 0 0;
}

li.accueil_photo {
	width:200px;
	margin:0 22px 0 0;
}

li.accueil_identite {
	width:150px;
	margin:0 0 0 0;
}


ul.accueil li p {
	color:#6f6f6f;
	font-size:12px;
	margin:0;
	padding:0;
}

ul.accueil li a {
	color:#bc6400;
	font-size:12px;
}

ul.accueil li a:hover {
	text-decoration:none;
}

ul.accueil h1 {
	font-size:28px;
	font-weight:normal;
	display:inline;
	line-height:28px;
}

ul.accueil h2 {
	font-size:12px;
	color:#050505;
	font-weight:normal;
	display:block;
	padding:0;
	margin:5px 0 5px 0;
}


/********/
/* ACTU */
/********/
ul.actu {
	display:block;
	clear:left;
	margin:0;
	padding:0;
	list-style:none;
	width:770px;
}

ul.actu li.gauche {
	display:block;
	position:relative;
	width:390px;
	height:auto;
	float:left;
}

ul.actu li.droite {
	display:block;
	position:relative;
	width:300px;
	height:auto;
	float:left;
	padding:0 60px 0 20px;
	text-align:justify;
}


/***********/
/*  QSN    */
/***********/
ul.qsn {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	list-style:none;
	clear:left;
}

ul.qsn li {
	display:block;
	position:relative;
	width:97px;
	height:183px;
	margin:0;
	padding:0;
	float:left;
}

.qsn_details {
	display:block;
	position:absolute;
	z-index:99;
	top:0;
	left:0;
	background-color:#000000;
	width:77px;
	height:163px;
	padding:10px;
	text-align:center;
	color:#FFFFFF;
	font-size:11px;
	
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
}


/***********/
/* CONTACT */
/***********/
#contact_gauche {
	display:block;
	position:relative;
	float:left;
	width:220px;
	height:auto;
}

#contact_droite {
	display:block;
	position:relative;
	float:left;
	width:500px;
	height:auto;
	padding:0 20px;
}

ul.menu_contact {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	height:70px;
	list-style:none;
	border-bottom:solid 1px #e3e3e3;
}

ul.menu_contact li {
	display:block;
	position:relative;
	float:left;
	padding:0;
	margin:0;
	width:165px;
	height:65px;
}

ul.menu_contact li a {
	display:block;
	position:relative;
	padding:45px 0 0 0;
	margin:0;
	width:165px;
	height:20px;
	font-size:13px;
	color:#858585;
	text-decoration:none;
}

ul.menu_contact li a:hover, ul.menu_contact li a.devis_on, ul.menu_contact li a.recrutement_on, ul.menu_contact li a.message_on  {
	display:block;
	position:relative;
	padding:45px 0 0 0;
	margin:0;
	width:165px;
	height:20px;
	font-size:13px;
	color:#e57b03;
	text-decoration:none;
}

a.devis {
	background:url(../images/contact-devis-off.jpg) top left no-repeat;
}

a.devis:hover, a.devis_on {
	background:url(../images/contact-devis-on.jpg) top left no-repeat;
}

a.recrutement {
	background:url(../images/contact-recrutement-off.jpg) top left no-repeat;
}

a.recrutement:hover, a.recrutement_on {
	background:url(../images/contact-recrutement-on.jpg) top left no-repeat;
}

a.message {
	background:url(../images/contact-message-off.jpg) top left no-repeat;
}

a.message:hover, a.message_on {
	background:url(../images/contact-message-on.jpg) top left no-repeat;
}


/**************/
/* PARRAINAGE */
/**************/
ul.menu_parrainage {
	display:block;
	position:relative;
	margin:0 auto;
	padding:0;
	width:770px;
	height:34px;
	list-style:none;
}

ul.menu_parrainage li {
	display:block;
	position:relative;
	float:left;
	padding:0;
	margin:0 30px 0 0;
	width:94px;
	height:34px;
}

ul.menu_parrainage li a {
	display:block;
	position:relative;
	padding:0;
	margin:0;
	width:94px;
	height:34px;
	font-size:13px;
	color:#858585;
	text-decoration:none;
}

ul.menu_parrainage li a:hover  {
	display:block;
	position:relative;
	padding:0;
	margin:0;
	width:94px;
	height:34px;
	font-size:13px;
	color:#e57b03;
	text-decoration:none;
}



/*******/
/* BAS */
/*******/

#bas {

margin-left:auto;
margin-right:auto;
width:960px;
}

#bas ul {
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}

#bas li {
font-size:9px;
display:inline;
color:#b0b0b0;
}

#bas li a {
font-size:9px;
text-decoration:none;
color:#b0b0b0;
}

#bas li a:hover {
color:#e57b03;
text-decoration:none;
}