@charset "UTF-8";

* { 
	outline: none;
	padding:0;
	margin:0;
 } /* remplace this.blur pour les pointillés sur tout les liens images */

* html img, * html div { behavior: url(../scripts/iepngfix.htc) }

body  {
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.625em;
	background-color: #FFF;
	background-image: url(../img/Durmar5.jpg);
	background-repeat: repeat-x;
}

#container {
	width: 880px; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	min-height: 650px;
	_height: 650px;
	/*border: 1px solid #FFF;*/
	margin-top: 100px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	/*background:#FFFFFF*/
	background-image: url(../img/fond_blanc.png);
	_background-color: #FFF;
	background-repeat:repeat;
}

#container_accueil {
	width: 880px; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	min-height: 650px;
	_height: 650px;
	/*border: 1px solid #FFF;*/
	margin-top: 100px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	
}
#sidebar1 {
	float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	width: 450px;
	/*background-color: #FFF;*/
	background-image: url(../img/fond_blanc.png);
	_background-color: #FFF;
	background-repeat:repeat;
	height: 630px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 30px;
}


#mainContent {
	float: left;
	margin: 0;
	padding: 0;
	width: 390px;
	border-right-width: 1px;
	border-right-style: none;
	border-right-color: #FFF;
	height: 650px;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-repeat: no-repeat;
	background-position: right bottom;
} 

#mainContent_accueil {
	float: left;
	margin: 0;
	padding: 0;
	width: 390px;
	border-right-width: 1px;
	border-right-style: none;
	border-right-color: #FFF;
	height: 600px;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-repeat: no-repeat;
	background-position: right bottom;
} 


#sidebar1_projet {
	float: left; 
	width: 210px;
	/*background-color: #FFF;*/
	min-height: 630px;
	_height:630px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 30px;
}
#mainContent_projet {
	float: left;
	margin: 0;
	padding: 0;
	width: 630px;
	border-right-width: 1px;
	border-right-style: none;
	border-right-color: #FFF;
	min-height: 650px;
	_height:650px;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-repeat: no-repeat;
	background-position: right bottom;
	/*background-color: #FFF;*/
} 
#container #mainContent_projet #paragraphe1 {
	padding-left: 0px;
	padding-top: 10px;
	text-align: justify;
	padding-right: 45px;
	font-size:1.1em;
}





.fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément  côté duquel il doit se trouver dans la page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */
	float: left;
}
.clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

h1{
	margin-top:30px;
}

h1 span {
	display: none;
}


/*menu principal*/
#navigation {
	height: 90px;
	width: 100%;
	float: left;
}
#navigation span {
	display: none;
}


#navigation ul {
	margin: 0px;
	padding: 0px;
}

#navigation li {
	display: block;
}

#navigation a {
	display: block;
	height: 20px;
	width: 100px;
	padding-bottom: 3px;
}

#navigation #agence {
	background-image: url(../img/onglet01_agence.jpg);
	background-repeat: no-repeat;
}

#navigation #services {
	background-image: url(../img/onglet02_metier.jpg);
	background-repeat: no-repeat;
}

#navigation #portfolio {
	background-image: url(../img/onglet03_portfolio.jpg);
	background-repeat: no-repeat;
}
#navigation #clients {
	background-image: url(../img/onglet04_clients.jpg);
	background-repeat: no-repeat;
}

#navigation #agence:hover {
	background-image: url(../img/onglet01_agence_roll.jpg);
	background-repeat: no-repeat;
}

#navigation #services:hover {
	background-image: url(../img/onglet02_metier_roll.jpg);
	background-repeat: no-repeat;
}

#navigation #portfolio:hover {
	background-image: url(../img/onglet03_portfolio_roll.jpg);
	background-repeat: no-repeat;
}

#navigation #clients:hover {
	background-image: url(../img/onglet04_clients_roll.jpg);
	background-repeat: no-repeat;
}

#navigation #agence_current {
	background-image: url(../img/onglet01_agence_roll.jpg);
	background-repeat: no-repeat;
}

#navigation #services_current {
	background-image: url(../img/onglet02_metier_roll.jpg);
	background-repeat: no-repeat;
}

#navigation #portfolio_current {
	background-image: url(../img/onglet03_portfolio_roll.jpg);
	background-repeat: no-repeat;
}

#navigation #clients_current {
	background-image: url(../img/onglet04_clients_roll.jpg);
	background-repeat: no-repeat;
}

/*colonne news*/

#sidebar1 #news {
	float: left;
	width: 430px;
	padding-top: 20px;
}
#sidebar1 #titre {
	background-image: url(../img/onglet_actualites.jpg);
	background-repeat: no-repeat;
	height: 20px;
	margin-left: -30px;
	margin-top: 50px;
}
#news h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000;
	font-size: 12px;
}

#sidebar1 #titre h2 span {
	display: none;
}
/*
.news1 {
	padding-top: 10px;
	background-color: #09C;
}
*/

#news #visuel {
	float: left;
	padding-top: 30px;
	padding-left: 30px;
}
#news a  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #bc1856;
	text-decoration: underline;
}
#news p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #333;
	width: 280px;
}
#news #texte {
	float: left;
	width: 300px;
}




/*liste des projets*/

#listeprojets {
	padding-left: 10px;
	padding-top: 30px;
}


#listeprojets ul {
	margin: 0px;
	padding: 0px;
}


#listeprojets li {
	display: block;
	padding-top: 5px;
	text-indent: -10px;
	list-style-type: none;
}
#listeprojets a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #333;
	text-decoration: none;
	font-style: italic;
	
}

#listeprojets a:hover {
	color: #bc1856;
}


#listeprojets a.current {
	color: #bc1856;
	
}

.nomClient {
	font-weight: bold;
	font-style: normal;
}


/* sous menu*/
#sousmenu {
	height: 20px;
	float: left;
	padding-top: 20px;
	width: auto;
	margin-left: -5px;
	margin-bottom:20px;
}


#sousmenu span {
	display: none;
}


#sousmenu ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#sousmenu li {
	display: inline;
}

#sousmenu a {
	display: block;
	height: 20px;
	float: left;
	margin-left: 5px;
}



#sousmenu #culture {
	background-image: url(../img/onglet_culture.jpg);
	width: 73px;
}

#sousmenu #education {
	background-image: url(../img/onglet_education.jpg);
	width: 96px;
}

#sousmenu #formation {
	background-image: url(../img/onglet_formation.jpg);
	width: 96px;
}

#sousmenu #sante {
	background-image: url(../img/onglet_sante.jpg);
	width: 60px;
}
#sousmenu #jeunesse {
	background-image: url(../img/onglet_jeunesse.jpg);
	width: 87px;
}
#sousmenu #institutionnel {
	background-image: url(../img/onglet_institutionnel.jpg);
	width: 120px;
}
#sousmenu #tous {
	background-image: url(../img/onglet_tous.jpg);
	width: 59px;
}

#sousmenu #culture:hover {
	background-image: url(../img/onglet_culture_roll.jpg);
	width: 73px;
}

#sousmenu #education:hover {
	background-image: url(../img/onglet_education_roll.jpg);
	width: 96px;
}

#sousmenu #formation:hover {
	background-image: url(../img/onglet_formation_roll.jpg);
	width: 96px;
}

#sousmenu #sante:hover {
	background-image: url(../img/onglet_sante_roll.jpg);
	width: 60px;
}
#sousmenu #jeunesse:hover {
	background-image: url(../img/onglet_jeunesse_roll.jpg);
	width: 87px;
}
#sousmenu #institutionnel:hover {
	background-image: url(../img/onglet_institutionnel_roll.jpg);
	width: 120px;
}
#sousmenu #tous:hover {
	background-image: url(../img/onglet_tous_roll.jpg);
	width: 59px;
}

#sousmenu #culture_current {
	background-image: url(../img/onglet_culture_roll.jpg);
	width: 73px;
}

#sousmenu #education_current {
	background-image: url(../img/onglet_education_roll.jpg);
	width: 96px;
}

#sousmenu #formation_current {
	background-image: url(../img/onglet_formation_roll.jpg);
	width: 96px;
}

#sousmenu #sante_current {
	background-image: url(../img/onglet_sante_roll.jpg);
	width: 60px;
}
#sousmenu #jeunesse_current {
	background-image: url(../img/onglet_jeunesse_roll.jpg);
	width: 87px;
}
#sousmenu #institutionnel_current {
	background-image: url(../img/onglet_institutionnel_roll.jpg);
	width: 120px;
}
#sousmenu #tous_current {
	background-image: url(../img/onglet_tous_roll.jpg);
	width: 59px;
}

/*presentation du projet*/

#mainContent_projet #projet {
	width: 630px;
	float: left;
	height: auto;
	min-height:400px;
	_height:400px;
}


#projet #titreProjet {
	width: 630px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #333;
}

#projet #visuelProjet {
	float: left;
}

#projet #visuelProjet img{
border:1px solid #ccc;
}

#projet #texteProjet {
	width: 415px;
	float: left;
}


.texteProjet {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #333;
	text-align: justify;
}


.texteProjet a {
	color: #bc1856;
	text-decoration: none;
}
#projet #motsClesProjet {
	float: left;
	width: 175px;
	padding-left: 20px;
}
.motsClesProjet {
	font-size: 1.1em;
	color: #333;
	font-weight: bold;
}


#vignettesProjet{
float: left;
width: 173px;
padding: 20px;
}

#vignettesProjet img{
cursor:pointer;
border:1px solid #ccc;
}

/* vignette projet */


#vignette_projet{
float:left;
margin:6px;
text-align:left;
font-weight:bold;
font-size:11px;
}
#vignette_projet img{
margin-bottom:5px;
border:1px solid #ccc;
}

#vignette_projet a:hover #titre_hover{
filter : alpha(opacity=80);
-moz-opacity : 0.8;
opacity : 0.8; 
}

#titre_hover {
filter : alpha(opacity=0);
-moz-opacity : 0;
opacity : 0; 
height:90px; 
width:138px; 
position:absolute; 
float:left; 
background-color:#000;
border:1px solid #ccc;
cursor:pointer;
text-decoration:none;

}

#titre_hover div{
padding:30px 10px 20px 10px;
color:#FFF;
font-size:13px;
text-align:center;
font-weight:bold;

}

/*menu bas*/

#footer {
	float: right;
	width: 270px;
	position: relative;
	height: 76px;
	background-position: right bottom;
	background-repeat: no-repeat;
	list-style-position: inside;
	background-image: url(../img/onglet08_adresse.jpg);
	margin-bottom: -15px;
}



#footer ul {
	margin: 0px;
	padding: 0px;
	float: right;
}

#footer a {
	display: block;
	width: 100px;
	height: 15px;
	padding-bottom: 2px;
	padding-left: 0px;
}

#footer #telecharger {
	background-image: url(../img/onglet06_telecharger.jpg);
	background-repeat: no-repeat;
	background-position: right;
}

#footer #commander {
	background-image: url(../img/onglet07_commander.jpg);
	background-repeat: no-repeat;
	background-position: right;
}

#footer span {
	display: none;
}

#footer #contact {
	background-image: url(../img/onglet05_contact.jpg);
	background-position: right;
	background-repeat: no-repeat;
}

#footer #contact:hover {
	background-image: url(../img/onglet05_contact_roll.jpg);
}

#footer #telecharger:hover {
	background-image: url(../img/onglet06_telecharger_roll.jpg);
}

#footer #commander:hover {
	background-image: url(../img/onglet07_commander_roll.jpg);
}

.tooltip{ position: absolute; top: 0; left: 0; z-index: 3; display: none; }
#container #mainContent_projet #titre {
	color: #bc1856;
	font-weight: normal;
	font-size: 1.3em;
	text-align: left;
}