/* 
Feuille de style Imerys toiture 
Date creation : le 16/08/2007
Sommaire
1 - ELEMENTS HTML
2 - CLASSES UTILES
3 - STRUCTURE
	3.1 - gabarit 1 (gab1)
	3.2 - gabarit 2 (gab2)
	3.3 - gabarit 3 (home)

*/

/* 
1 - ELEMENTS HTML
Styler ici les elements HTML qui doivent 
avoir la meme apparence sur l ensemble du site
*/

html {
	font-size: 62%;
	line-height: 1.2;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #333;
}
html, body, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.3;
	font-family: "Trebuchet MS", "Times New Roman", Times, sans-serif;
	color: #49519a;
	font-weight: normal;
}
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4, h5, h6 { font-size: 1.4em; }
a {
	text-decoration: none;
	color: #333;
}
img { border: 0 none; }

.home  a:hover  {
background-color: transparent;
}
dl, ol, ul, p, blockquote, pre, table, form {
	margin: 0.7em 0;
	padding: 0;
	font-size: 1.2em;
}
ol, ul, dd, blockquote {
	margin-left: 20px;
	margin-right: 20px;
}
dt {
	font-weight: bold;
}
ol, ul {
	list-style-position: inside;
}
blockquote {
	font-style: italic;
	font-size: 1em;
}
blockquote p {
	margin: 0.2em 0;
}

/* Liens 
Modifier ici les styles des liens selon leur état.
En l'etat actuel, la couleur des liens suit la couleur specifiee dans le body (#333)
*/
a:link {

}
a:visited {

}
a:focus {

}
a:hover {
	background-color: #ff4900;
	color: #fff;
}
a:active {
	
}

/* Lien plan du site */
a.sitemap:link {
	color: #fff;

}
a.sitemap:hover {
	background-color: #11204b;
	color: #fff;
}
a.sitemap:visited {
	background-color: #11204b;
	color: #fff;
}
/*



/* Lien tuile pv */
a.pv:link {
	
background-color: transparent;
}
a.pv:hover {
background-color: transparent;
}
a.pv:visited {
	background-color: transparent;
}
/* 

 
2 - CLASSES UTILES
Styler certains elements selon le contexte :

- "clearer" sert à rétablir le flux apres les flottements a gauche ou a droite.
- "puce" a mettre les chevrons devant les listes
- "zero" a supprimer les marges et retraits des liste dites de presentation.

Les listes comprises dans le contenu s'utilisent normalement sans classe ni identifiant.
*/
.clearer {
	overflow: hidden;
	height: 1%;
}
ul.puces, ul.zero {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.puces li { /* lteie6 */
	padding-left: 17px;
	background: transparent url(/img/puces.png) no-repeat 0 5px;
}
.left {
	float: left;
}
.right {
	float: right;
}
.center {
	text-align: center;
}
/* 
3 - STRUCTURE
Les pages partagent des elements qui possedent des valeurs communes
et d'autres qui sont specifiques a un gabarit.

*/

/* Elements communs */
#wrapper {
	position: relative;
	width: 955px;
	height: 690px;
	margin: 0 auto;
	border: 1px solid #11204b;
}
	#content {
	position: absolute;
	top: 190px;
	background-color: #112349;
	}
/* /Elements communs */

	/*
	3.1 - gabarit 1 (gab1)
	*/
		/* colonne gauche */
		.gab1 #colLeft {
			width: 475px;
			float: left;
			padding-left: 57px;
			padding-right: 23px;
		}
			.gab1 #colLeft .imgTitle {
				float: left;
				margin-right: 20px;
			}
			.gab1 #colLeft .textTitle {
				float: left;
				margin-top: 20px;
			}
		.gab1 #colLeft ul.puces {
			margin-top: 3em;
		}
		
		/* colonne droite */
		.gab1 #colRight {
			width: 399px;
			float: right;
		}
			.gab1 #colRight #coloris { /* ul */
				margin-top: 4px;
				margin-bottom: 1em;
			}
			.gab1 #colRight #coloris li {
				width: 95px;
				float: left;
				text-align: center;
				margin: 0 4px 8px 0;
			}
				.gab1 #colRight #coloris li img {
					display: block;
					margin: 0 0 4px 0;
				}
				.gab1 #colRight #coloris li span {
					display: block;
					font-size: 0.8em;
					line-height: 1;
				}
			.gab1 #colRight #realisations { /* ul */
				margin: 4px 0 0 0;
			}
			.gab1 #colRight #realisations li {
				width: 195px;
				float: left;
				margin: 0 4px 8px 0;
			}

	/*
	3.2 - gabarit 2 (gab2)
	*/
		/* colonne gauche */
		.gab2 #colLeft {
			width: 600px;
			float: left;
			padding-left: 57px;
			padding-right: 15px;
		}
		
		/* colonne droite */
		.gab2 #colRight {
			width: 275px;
			float: right;
			clear: right;
		}
			.gab2 #colRight ul.puces {
				margin-top: 3em;
			}
			
	/*
	3.3 - gabarit 3 (home)
	*/
		#wrapper-home { /* lteie6 */
			position: relative;
			width: 955px;
			height: 632px;
			margin: 0 auto;
			border: 1px solid #11204b;
		}
		.home { 
			margin-top: -14px; 
		}
		.home #colLeft, 
		.home #colCenter, 
		.home #colRight { 
			margin: 0;
			padding: 0;
		}
		
		/* colonne gauche */
		.home #colLeft {
	width: 185px;
	height: 414px;
	position: absolute;
	top: 30;
	left: 0;
	background: url(img/bgColLeft.jpg) no-repeat;
		}
		
				.home #colLeftcanals {
	width: 185px;
	height: 530px;
	position: absolute;
	top: 1px;
	left: 0;
	background: url(img/bgColLeft_canals.jpg) no-repeat;
	/*background-image: url(img/bgColLeft_canals.jpg) no-repeat;*/
		}
		
		
			.home #colLeft #actualites {
	width: 185px;
	height: 200px;
	background: url(img/actualite_wardrecques.jpg) no-repeat;
	background-position:0px 50px;
	position: absolute;
	bottom: 7px;
	left: 2px;
	background-image: url(img/actualite_wardrecques.jpg);
		}
			
		/* colonne centre */
		.home #colCenter {
	width: 770px;
	height: 414px;
	position: absolute;
	top: 30;
	left: 185px;
	visibility: visible;
		}
		
	   .home #colCentercanals {
	width: 770px;
	height: 530px;
	position: absolute;
	top: 1px;
	left: 185px;
	visibility: visible;
		}
		
		
			.home #colCenter #nouveautes {
	width: 267px;
	height: 150px;
	background-color: transparent;
	position: absolute;
	bottom: 130px;
	padding-left: 60px;
	left: 1px;
			}
				.home #colCenter #nouveautes h3 {
					color: #000;
					text-transform: uppercase;
					font-weight: bold;
					line-height: 1;
				}
				.home #colCenter #nouveautes p {
					margin: 0.5em 0;
					line-height: 1.2;
				}
				.home #colCenter #nouveautes .savoirPlus {
				padding-left: 70px
				}
				
		/* colonne droite */
		.home #colRight {
	height: 414px;
	position: absolute;
	top: 19px;
	left: 539px;
	background-image: url(img/bgCoRight.jpg);
		}
			.home #colRight .etapes {
	padding-top: 7px;
	padding-left: 155px;
			}
			.home #colRight .etapes h3 {
				margin-left: -3px;
				font-size: 1.3em;
				line-height: 1;
				font-weight: bold;
				color: #fff;
				text-transform: uppercase;
			}
			.home #colRight .etapes p {
	width: 200px;
	font-size: 1.1em;
	line-height: 1.3;
			}
			.home #colRight .etapes p.etapesplus {
				position: absolute;
				bottom: 6px;
				right: 55px;
				text-transform: uppercase;
				font-weight: bold;
				font-size: 0.9em;
			}
				.home #colRight .etapes a,
				.home #colRight .etapes a:link,
				.home #colRight .etapes a:visited {
					color: #fff;
				}
				.home #colRight .etapes a:focus,
				.home #colRight .etapes a:hover,
				.home #colRight .etapes a:active {
					color: #ff4900;
					background-color: transparent;
				}
			.home #colRight .etapes_canalS {
	padding-top: 7px;
			}							
			.home #colRight .etapes_canalS h3 {
				margin-left: -3px;
				font-size: 1.3em;
				line-height: 1;
				font-weight: bold;
				color: #fff;
				text-transform: uppercase;
			}
			.home #colRight .etapes_canalS p {
				width: 200px;
				font-size: 1.1em;
				line-height: 1.3;
			}
			.home #colRight .etapes_canalS p.etapesplus {
				position: absolute;
				bottom: 6px;
				right: 55px;
				text-transform: uppercase;
				font-weight: bold;
				font-size: 0.9em;
			}
				.home #colRight .etapes_canalS a,
				.home #colRight .etapes_canalS a:link,
				.home #colRight .etapes_canalS a:visited {
					color: #fff;
				}
				.home #colRight .etapes_canalS a:focus,
				.home #colRight .etapes_canalS a:hover,
				.home #colRight .etapes_canalS a:active {
					color: #ff4900;
					background-color: transparent;
				}
			.home #colRight #etape1 {
	position: absolute;
	width: 372px;
	height: 124px;
	top: 20px;
	left: 35px;
	color: #fff;
	background: url(img/etape1.jpg) no-repeat;
			}
			.home #colRight #etape2 {
				position: absolute;
				width: 372px;
				height: 124px;
				top: 144px;
				left: 35px;
				color: #fff;
				background: url(img/etape2.jpg) no-repeat;
			}
			.home #colRight #etape3 {
				position: absolute;
				width: 372px;
				height: 124px;
				top: 268px;
				left: 35px;
				color: #fff;
				background: url(img/etape3.jpg) no-repeat;
			}
	
	/* Elements communs */
	#footer {
		width: 955px;
		height: 18px;
		background-color: #11204b;
		position: absolute;
		bottom: 0;
	}
	
		#footer p {
			margin: 0;
			color: #fff;
			line-height: 16px;
			text-align: center;
		}
		

	
		#footercanals p {
			margin: 0;
			color: #fff;
			line-height: 16px;
			text-align: center;
		}	
		
		
		
		
	#header {
		width: 955px;
		height: 176px;
		position: absolute;
		top: 1px;
		left: 1px;
		/*background: url(img/flash.jpg) no-repeat 0 0;*/
	}
	/* /Elements communs */
	
.h1titrehome {
	font-size: 1.3em;
	color: white;
}

#nouveautes {
	font-size: 1.4em;
	color: white;
}

a.info_bulle span
{								   
  display          : none; /* Rend invisible tout notre bloc span */
} 
 
a.info_bulle
{				
  color           : #2F368A;
  
  text-decoration : none; 
width:180px;
height:180px;
    
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
  z-index        : 1000;
}  
 
a.info_bulle:hover 
{
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
} 

a.info_bulle:hover span
{				
  display        :  block;    /* Rend visible notre bloc span */
  position       :  absolute; /* Sort notre bloc de son conteneur afin de le positionner */
  
  background     : #DDEEFF;   /* Définition du fond, sinon on a le même que notre lien */
  border         : 1px solid #6699FF; /* Définition des bordures */
  
  padding        : 6px;       /* Définition des marges intérieures */	  
  font-size      : 12px;
  
  width          : 150px;     /* On fixe une largeur par défaut */
  
  color          : #000;      /* Réinitialisation de la couleur du texte */
  
  text-align     : justify;   /* Justification du texte */	
  
  cursor         : default;   /* Réinitialisation de notre curseur, sinon par défaut on a le même que notre lien */
  
  /* Positionnement de notre info-bulle */
  top            : 1.8em;     
  left           : 1px;
  
  z-index        : 1000; /* Positionne au premier plan l'info-bulle en cas de chevauchement */
}            
                
				
				a.info_bulle2 span
{								   
  display          : none; /* Rend invisible tout notre bloc span */
} 
 
a.info_bulle2
{				
  color           : #2F368A;
  
  text-decoration : none; 


    
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
  z-index        : 0;
}  
 
a.info_bulle2:hover 
{
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
} 

a.info_bulle2:hover span
{				
  display        :  block;    /* Rend visible notre bloc span */
  position       :  absolute; /* Sort notre bloc de son conteneur afin de le positionner */
  
  background     : #DDEEFF;   /* Définition du fond, sinon on a le même que notre lien */
  border         : 1px solid #6699FF; /* Définition des bordures */
  
  padding        : 6px;       /* Définition des marges intérieures */	  
  font-size      : 12px;
  
  width          : 150px;     /* On fixe une largeur par défaut */
  
  color          : #000;      /* Réinitialisation de la couleur du texte */
  
  text-align     : justify;   /* Justification du texte */	
  
  cursor         : default;   /* Réinitialisation de notre curseur, sinon par défaut on a le même que notre lien */
  
  /* Positionnement de notre info-bulle */
  top            : 1.8em;     
  right          : 10px;
  
  z-index        : 1000; /* Positionne au premier plan l'info-bulle en cas de chevauchement */
}            
                
/* Tuiles diamant */
/* Home */
#tuile_diamant {
width:100%;
height:414px;
background:url(tuile_diamant/bg_tuile_diamant.jpg) no-repeat;
margin-top:8px;
padding:175px 0 0 30px;
font-size:16px;
color:#07274E;
font-family:Arial, Helvetica, Verdana, sans-serif;
}

#tuile_diamant a{
background:url(tuile_diamant/btn.png) no-repeat;
padding-left:40px;
}

#tuile_diamant a:hover{
text-decoration:underline;
color:#004878;
background:url(tuile_diamant/btn.png) no-repeat 0 -22px;
}

#tinymenu {
margin:80px 0 0 -30px;
}

#tinymenu  a{
background:none;
font-size:12px;
color:#004878;
text-decoration:underline;
}

#tinymenu  a:hover{
background:none;
text-decoration:none;
}


/* Pages */
#tuile_diamant_p {
margin-top:8px;
width:770px;
height:414px;
background:url(tuile_diamant/bg_p.jpg) no-repeat;
font-family:Arial, Helvetica, Verdana, sans-serif;
}

#t_d_t {
float:left;
width:555px;
font-size:22px;
text-transform:uppercase;
padding:10px 0 10px 25px;
}

#t_d_menu{
float:right;
width:170px;
padding:10px;
text-align:right;
height:75px;
}
#t_d_menu a{
color:#fff;
text-decoration:underline;
}

#t_d_menu a:hover{
font-weight:bold;
text-decoration:none;
color:#FF9900;
}

#t_d_lc {
float:left;
width:170px;
margin-left:25px;
}

#t_d_content {
float:left;
width:320px;
margin-left:10px;
text-align:justify;
}

.content_link a {
color:#fff;
text-decoration:underline;
}

.content_link a:hover {
text-decoration:none;
color:#ffcc00;
}


#t_d_content .quote {
font-style:italic;
}

#t_d_rc {
float:right;
margin-right:10px;
}

#t_d_rc_sub {
border : 1px solid #fff;
width:150px;
padding:5px;
}

#t_d_rc_sub a {
background:url(tuile_diamant/subm_puce.png) no-repeat 0 -1px;
padding-left:25px;
color:#fff;
line-height:20px;
}

#t_d_rc_sub a:hover {
font-weight:bold;
}

/* Carac */
#t_d_carac {
float:left;
width:500px;
margin-left:25px;
margin-top:-10px;
}

#t_d_carac .carac {
border-bottom:1px solid #fff;
display:block;
width:320px;
line-height:15px;
padding:3px;
margin-bottom:-15px;
}

.highlight {
color:#ffcc00;
}

/* Innovations */
.innos_list_t {
font-weight:bold;
font-size:12px;
color:#ffcc00;
}

/* 3 OUi */
#t_d_content_3h {
float:left;
width:500px;
margin-left:30px;
}

#t_d_content_3h a {
font-weight:bold;
color:#fff;
}

#t_d_content_3h a:hover {
text-decoration:underline;
}

#main_r a {
font-size:22px;
font-weight:bold;
color:#fff;
text-decoration:bold;
}

#main_r a:hover {
text-decoration:underline;
}