﻿

/* MODIFICATION
––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––
	UPDATED: 31 juillet 2008 10:32
	AUTHOR: Joel Lachance
	UPDATES: Dernières corrections
––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––*/


/* LEGEND -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_

1.0 --- WEBSITE SPECIFICATION
2.0 --- RESET STYLESHEET 
3.0 --- GENERIC HTML
4.0 --- COMMONLY USED
5.0 --- SECTION
	5.1 --- Header
	5.2 --- Content
		5.2.1 --- Content styles
	5.3 --- Footer
	5.4 --- Mobile
6.0 --- TEMPORARY

--------------------------------------------------------------------------- 
---------------------------------------------------------------------------*/


/* 1.0  WEBSITE SPECIFICATION
--------------------------------------------------------------------------- 
---------------------------------------------------------------------------*/


/* 2.0  RESET STYLESHEET 
--------------------------------------------------------------------------- 
---------------------------------------------------------------------------*/

td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

th {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

tr {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

thead {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

tfoot {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

tbody {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

caption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

table {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

label {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

form {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ul {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ol {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

dd {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

dt {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

dl {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

center {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

i {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

u {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

b {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

var {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

tt {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

sup {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

sub {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

strong {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

strike {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

small {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

samp {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

s {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

q {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

kbd {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ins {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

img {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

font {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

em {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

dfn {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

del {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

code {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

cite {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

big {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

address {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

acronym {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

abbr {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

a {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

pre {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

p {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

h6 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

h5 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

h4 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

h3 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

h2 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

h1 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

iframe {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

object {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

applet {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

span {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

div {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

html {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
ol {
	list-style: none;
}
q {
	quotes: none;
}
blockquote {
	quotes: none;
}
q:after {
	content: '';
	content: none;
}

q:before {
	content: '';
	content: none;
}

blockquote:after {
	content: '';
	content: none;
}

blockquote:before {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* 3.0 GENERIC HTML
--------------------------------------------------------------------------- 
---------------------------------------------------------------------------*/

body {
background: #FFF;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 100%;
line-height: 18px;
text-align: center;
margin: 15px 0 0 0;
padding: 0;
}

h1 {
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 18px 0;
line-height: 100%;
}

#white h1 {
color: #757575;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 18px 0;
line-height: 100%;
}

h2{
font-size : 14px;
color: #FFF;
text-transform: uppercase;
margin: 0 0 10px 0;
padding: 6px 0 0 0;
}

#white h2 {  
font-size : 14px;
color: #757575;
text-transform: uppercase;
margin: 0 0 10px 0;
padding: 0 0 0 28px;
}

h3{
background: url('images/yellow-spacer.gif') no-repeat;
display: block;
width: 550px; 
height: 40px;
margin: 24px 0 16px 17px;
font-size : 16px; 
color: #005288;
line-height: 40px;
padding: 0px;
font-weight: normal;	
}

p {
font-size: 12px;
}

a {
outline: none;
color: #003861;
}
a:hover{
	color: #cf8425;
	text-decoration: underline;
}
img {
border: 0;
}

hr{
visibility: hidden;
height: 10px;
display: block;
clear: both;
}

ul{
margin: 0 0 0 35px;
}

li{
color: #003861;
font-size: 14px;
color: #757575;
margin: 0 0 0 10px;
list-style-type: none;
/*list-style-image: url('../../images/bullet-square.gif');*/
background: transparent url('../../images/bullet-square.gif') no-repeat 0 3px;
padding: 0 0 0 12px;
}

ul li ul li{
	padding: 0 0 0 0;
	margin-bottom: 0;
}

table{	
font-size: 14px;
font-family: arial, helvetica, verdana, sans-serif;
color: #FFFFFF;
}

	table a{
	color: #FFF;
	text-decoration: underline;
	}
	
	table a:hover{
	color: #FFF;
	text-decoration: none;
	}

th{
height: 25px;
background: #cde1e6;
vertical-align: bottom;
border-right: 1px dotted #7fa9bf;
padding: 5px;
}

td{
padding: 0;
}

/* 4.0 COMMONLY USED
--------------------------------------------------------------------------- 
---------------------------------------------------------------------------*/

.hide
{
display: none;
}

.fl
{
float: left;
}

.fr
{
float: right;
}

.block
{
display: block;	
}

.upcase{
text-transform: uppercase;
font-weight: bold;	
}

.cb{
clear: both;	
}

.nb{
	border: none;
}

.sub-content{
	padding:0 0 0 25px;
	margin-bottom:20px;
}

.sc-top{
	margin-top:18px;
}

#center .realisations ul li.note{
	font-size: 11px;
}

.bgRed{
	background: #ee1c24 url('../../images/left-back-red-stripes.gif');
}

.bgStripes{
	background: #FFF url('../../images/left-back-stripes.gif');
}

/* 5.0 SECTION
--------------------------------------------------------------------------- 
---------------------------------------------------------------------------*/

#global{
 position:absolute;
 left: 50%; 
 top: 50%;
 width: 812px;
 height: 562px;
 margin-top: -281px; /* moitié de la hauteur */
 margin-left: -406px; /* moitié de la largeur */
}

#container{
width: 812px;
margin: 0 auto;
text-align: left;
}


	/* 5.1 HEADER
	--------------------------------------------------------------------------- 
	---------------------------------------------------------------------------*/
	
	#top{
	}
	
		#top .logo{
		margin: 0 0 3px 0;
		}
	
		#top .nav{
		}

			#top .nav img{
			display: block;
			float: left;
			}
			
		#top .spacer{
		background: #FFF url('../../images/spacer-top-back.gif');
		width: 100%;
		height: 29px;
		margin: 0 0 2px 0;
		clear: both;
		}
		
		#top .sub-bottom{
		width: 100%;
		height: 5px;
		background: #cccccc;
		font-size: 0;
		}

	
	/* 5.2  CONTENT
	--------------------------------------------------------------------------- 
	---------------------------------------------------------------------------*/
	
	#content{
	width: 812px;
	position: relative;
	}
		
	
		/* 5.2.1  CONTENT STYLES
		--------------------------------------------------------------------------- 
		---------------------------------------------------------------------------*/
		
		#content .left{
		width: 177px;
		float: left;
		padding: 127px 0 0 0;
		margin: 0;
		font-size: 0;
		position: relative;
		}
				
			#content .left img.spacer{
			margin: 9px 0;
			}
			
				#b-construction{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				}
				
				#b-construction-over{
				width: 177px;
				height: 144px;
				background: #FFF;
				position: absolute;
				top: -17px;
				left: 0;
				z-index: 1;
				}
						
		#content .right{
		width: 635px;
		float: right;
		}
		
			#content .right .top{
			background: #FFF url('../../images/right-top-back.gif');
			height: 28px;
			}
			
				#content .right .top img{
				margin: 8px 0 0 20px;
				}
				
			#content .right .content{
			background: #FFF;
			height: 290px;
			}
			
			#content .right .content-red{
			background: #ee1c24;
			height: 290px;
			overflow: auto;
			}
			
			#content .right .block-scroll{
			width: 100%;
			height: 25px;
			background: #e21720;
			display: block;
			clear: both;
			margin: 0;
			padding: 0;
			font-size: 0;
			line-height: 0;
			}
			
				#content .right .scroll-pane p{
				color: #FFF;
				font-size: 14px;
				margin: 0 0 8px 0;
				padding: 0 28px;
				text-align: justify;
				}
				
				#content .right .scroll-pane table{
				margin: 0 0 0 28px;
				}
				
					#content .right .scroll-pane table td{
					padding: 2px 0;
					}

			#white #content .right .block-scroll{
			width: 100%;
			height: 25px;
			background: #FFF;
			display: block;
			clear: both;
			margin: 0;
			padding: 0;
			font-size: 0;
			line-height: 0;
			}
			
			#white #content .right .block-scroll-realisations{
			width: 100%;
			height: 12px;
			background: #FFF;
			display: block;
			clear: both;
			margin: 0;
			padding: 0;
			font-size: 0;
			line-height: 0;
			}
			
			#white #content .right .content-realisations{
			width: 100%;
			height: 225px;
			background: #FFF;
			}

			#white #content .right .scroll-pane p{
			color: #757575;
			font-size: 14px;
			margin: 0 0 8px 0;
			padding: 0 28px;
			text-align: justify;
			}

			
			#content .right .content-red p{
			color: #FFF;
			font-size: 12px;
			margin: 0 0 12px 0;
			}
			
			#content .right .bottom-onglet{
			background: #dcdcdc url('../../images/right-onglet-bottom.gif') no-repeat top left;
			width: 100%;
			height: 68px;
			clear: both;
			}
			
			#white #content .right .bottom-onglet{
			background: #dcdcdc url('../../images/right-onglet-bottom-white.gif') no-repeat top left;
			width: 100%;
			height: 108px;
			clear: both;
			position: relative;
			}
			
				#white #content .right .bottom-onglet .rea-box{
				overflow: auto;
				height: 1;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 15;
				}
			
				#white #content .right .bottom-onglet .realisations{
				position: absolute;
				top: 5px;
				right: 20px;
				font-size: 12px;
				font-weight: bold;
				text-transform: uppercase;
				color: #ed1c24;
				display: block;
				z-index: 50;
				}
				
					#white #content .right .bottom-onglet .realisations a{color: #ea1d23; text-decoration: none;}
						#white #content .right .bottom-onglet .realisations a:hover{color: #6d6d6d; text-decoration: none;}
				
			.prev{
			float: left;
			margin: 55px 0 0 28px;
			}
			
			.next{
			float: left;
			margin: 55px 0 0 16px;
			}
						
			#content .right .sub-bottom{
			background: #FFF url('../../images/right-pattern-bottom.gif');
			width: 100%;
			height: 12px;
			font-size: 0;
			clear: both;
			}
			
			.googleMap{
			float: left;
			text-align: center;
			padding: 0 15px 0 0;
			margin: 0 0 0 28px;
			clear: both;
			}
			
			table.white{
			color: #757575;
			}
			
				table.white ul{
				margin: 0 0 0 10px;
				}
				
				table.white td{
				
				}
				
			.divIframe{
			margin: 25px 0 0 15px;
			float: left;
			}
			
			.gallery{
			text-align: left;
			overflow: auto;
			margin: 0;
			padding: 0;
			}
				
			.iframe-gallery{
			background : #dcdcdc;
			margin: 0;
			padding: 0;
			}
				
				ul.gallery{
				background : #dcdcdc;
				width: 5000px;
				}
				
					ul.gallery li{
					list-style-image: none;
					display: block;
					float: left;
					margin: 0;
					padding: 0 10px 0 0;
					background: transparent;
					}
					
						ul.gallery li img{
						list-style-image: none;
						display: block;
						float: left;
						margin: 0 10px 0 0;
						}
															
			.saf_hack{
			width: 25px;
			height: 280px;
			background: #FFF;
			position: absolute;
			top: 28px;
			right: -25px;
			z-index: 100;
			}
			
			.content-realisations table p{
			color: #757575;
			position: static;
			display: block;
			}
			
			.content-realisations table img{
			margin: 0 0 0 23px;
			padding: 0 20px 0 0;
			}
			
			.content-realisations table td{
			vertical-align: top;
			}
			.content-realisations table td.description{
			vertical-align: bottom;
			}


			
			
			




		
	/* 5.3  FOOTER
	--------------------------------------------------------------------------- 
	---------------------------------------------------------------------------*/
	
	#footer{
	clear: both;
	}
	
		#footer .contact{
		width: 100%;
		height: 25px;
		background: #FFF url('../../images/footer-back-contact.gif') repeat-x;
		}
		
		#footer .langue{
		width: 100%;
		height: 20px;
		background: #FFF url('../../images/footer-pattern-bottom.gif');
		}



	
/* 6.0 TEMPORARY --> use it to make quick test
--------------------------------------------------------------------------- 
---------------------------------------------------------------------------*/

.jcarousel-container{
	/*width: 492px;*/
	width: 200px;
}


.tablesep{
	border-right: 1px dotted #cf8425;
	border-bottom: 1px dotted #cf8425;
}

/*img, #subMenu-info img { behavior: url(/iepngfix.htc); }*/



#center #top-menu .select-noborder{
background: #dcedf4;
border: none;
}

#center #top-menu .select-noborder a:hover{
display: block;
height: 37px;
border: none;
}
#center .noborder{
border: none;
}

h2 a{
color: #8dbed4;
text-decoration: none;
}

.iframe-gallery ul.gallery li a:hover img{
filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85;}
