@charset "utf-8";
/* CSS Document */

*{

	font-family:Verdana, Arial, Helvetica, sans-serif;
}

body{
	background:url(/images/fd_body.jpg) repeat-x;
}

textarea{
	font-size:10px;
	color:#666666;
}

.clear {
	clear:both;
	height:0;
}


#conteneur{
	margin:0 auto;
	width:950px;
}

div.outer {
	margin:0 10px;
	background: #CCCCCC;
}
div.inner {
	padding:5px 10px 30px 10px;
	background:#FFF url(../images/fd_menu_active.jpg) bottom repeat-x;
}

ul {
	margin:0;
	padding:0;
}

#anim{
	margin-left:10px;
}

#entete{
	height:86px;
	position:relative;
}
	#url_site {
		position:absolute;
		right:30px;
		bottom:-10px;
		color:#999999;
		font-size:10px;
	}
	#contact_tel {
		position:absolute;
		right:80px;
		bottom:-13px;
	}

	#entete a#logo {
		display:block;
		height:100px;
		width:250px;
		background:url(/images/logo.png) no-repeat;
	}

	ul#menu{
		position:absolute;
		right:20px;
		top:14px;
		background:url(/images/li_middle.png) repeat-x;
		margin:0;
		padding:0;
	}
	
	ul#menu li{
		float:left;
		height:38px;
		text-align:right;
		list-style:none;
		font-size:14px;
	}
		
		
	ul#menu li.first {
		background:url(/images/li_first.png) left no-repeat;
		width:12px;
	}
	ul#menu li.last {
		background:url(/images/li_last.png) right no-repeat;
		width:12px;
	}
	
	ul#menu li a{
		display:block;
		height:38px;
		line-height:38px;
		padding:0 10px;
		text-decoration:none;
		color:#747273;
		font-weight:bold;
	}
	
	ul#menu li a:hover{
		color:#000000;
		background: url(/images/fd_menu_active.jpg) repeat-x;
	}
	ul#menu li a.menu_active{
		color:#000000;
		background: url(/images/fd_menu_active.jpg) repeat-x;
	}
	
		
	
#contenu{
	
}

		#ariane {
			margin-left:20px;
			font-size:10px;
			color:#666666;
			padding-bottom:10px;
		}
		#ariane a{
			color:#666666;
		}
		#ariane a:hover{
			color:#000;
		}

		#contenu img.imgspace {
			margin:0 30px;
		}			
		#contenu label {
			font-size:11px;
			width:190px;
			display:inline-block;
			color:#666666;
			text-align:right;
		}	

		#contenu h2 {
			font-size : 18px;
			text-align:right;
			color:#666666;
			padding-right:40px;
			margin-bottom:20px;
			height:28px;
			line-height:28px;
			background:url(/images/logo_pict.png) no-repeat right;
		}
		#contenu h2 span {
			color:#77ab00;
		}
		#contenu h3 {
			font-size : 14px;
			color:#666666;
			margin-bottom:10px;
			padding-left:30px;
			height:20px;
			line-height:20px;
			background:url(/images/logo2_pict2.gif) no-repeat left;
			clear:both;
		}
		#contenu h4 {
			margin:0 0 5px 0;
			color:#666666;
			padding:1px 15px;
			font-size:12px;
			font-weight:normal;
			border:1px solid #fff;
			border-bottom:1px solid #ddd;
			cursor:pointer;		
			margin-top:10px;
			cursor:default;
		}
	
		#contenu ul li {
			color:#666666;
			font-size:11px;
			list-style-position:inside;
			text-align:justify;
		}
			#contenu ul li ul li {
				margin-left:20px;
			}
			
		#contenu p {
			color:#666666;
			margin-top:15px;
			font-size:11px;
			text-align:justify;
		}
		
		#contenu p.form_erreur{
			margin:0;
			padding:0;
			border-left:3px solid #FF9900;
			padding-left:30px;
		}
		
		#contenu a {
			text-decoration:underline;
			color:#666666;
			font-weight:normal;
		}
		#triggers a img{
			border:1px solid #CCC;
		}
		#triggers2 a img{
			border:1px solid #CCC;
		}
		#contenu p strong {
			color:#5196b1;
		}
		#contenu hr {
			margin:10px 0;
			border:none;
			border-top:1px solid #e4e4e4;
		}
		
		#contenu table {
			
		}
		#contenu table th {
			font-size:12px;
			color:#666666;
			text-align:left;
			font-weight:normal
		}
		#contenu table td {
			font-size:12px;
			color:#666666;
			text-align:left;
			width:118px;
			text-align:center;
		}

	#col_centre {
		margin:20px 10px;
	}
	
	
	
	#col_gauche {
		float:left;
		width:600px;
		padding:20px 10px;
	}
	
	
	#col_droite{
		float:left;
		width:300px;
		padding:20px 10px;
	}
	
		#plan_datacenter {
			text-align:right;
		}
		#col_droite h3 {
			color:#FF9900;
			font-size:11px;
		}
		#col_droite p {
			color:#666666;
			margin-top:5px;
			font-size:11px;
			text-align:right;
		}		
		#col_droite p span{
			color:#5196b1;		
			font-weight:bold;
		}
		#col_droite a {
			text-decoration:underline;
			color:#666666;
			font-weight:normal;
		}


#pied{
	clear:both;
	height:96px;
	background:url(/images/fd_pied.jpg) no-repeat;
	position:relative;
	padding-top:5px;
	margin-left:8px;
}

#pied ul#lienext {
	margin-left:20px;
	float:left;
}
#pied ul#lienext2 {
	margin-left:100px;
	float:left;
}

#engag_vert {
	position:absolute;
	top:8px;
	right:15px;
	color:#77ab00;
	font-size:10px;
	background:#FFF;
}
	#engag_vert a {
		font-weight:bold;
		color:#336600;
	}
	#engag_vert strong {
		font-weight:bold;
		color:#77ab00;
	}


#pied ul#liensite {
	position:absolute;
	bottom:10px;
	right:20px;
}
#pied ul#liensite li{
	float:left;
	padding:0 10px;
	border-right:1px dashed #CCCCCC;
}
#pied ul li {
	list-style:none;
	color:#666666;
}
#pied ul#liensite a {
	font-size:12px;
	color:#333333;
}
#pied ul li a{
	text-decoration:none;
	font-size:9px;
	color:#999999;
}
#pied ul li a:hover{
	color:#333333;
}


/***********************/
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	width: 580px;
}

/* accordion header */
#accordion h4 {
	margin:0;
	color:#666666;
	padding:1px 15px 0 20px;
	font-size:12px;
	font-weight:normal;
	border:1px solid #fff;
	border-bottom:1px solid #ddd;
	cursor:pointer;	
	background: url(/images/flech_bas.gif) no-repeat;
}
#accordion h4:hover {
	background:#e4e4e4  url(/images/flech_bas.gif) no-repeat;
	color:#333333;
}

/* currently active header */
#accordion h4.current {
	cursor:default;
	background-color:#c0e5f5;
	background-image:none;
}

/* accordion pane */
#accordion div.pane {
	border-width:0 2px;
	display:none;
	padding:15px;
	font-size:12px;
}

/*****************************/
/* the large image. we use a gray border around it */
#img {
	border:1px solid #ccc;
}

/* "next image" and "prev image" links */
#gallery .next, #gallery .prev {
	
	/* absolute positioning relative to the overlay */
	position:absolute;
	top:40%;	
	border:1px solid #666;	
	cursor:pointer;
	display:block;
	padding:10px 20px;
	color:#fff;
	font-size:11px;
	
	/* upcoming CSS3 features */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

#gallery .prev {
	left:0;
	border-left:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;
}

#gallery .next {
	right:0;
	border-right:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;	
}

#gallery .next:hover,#gallery .prev:hover {
	text-decoration:underline;
	background-color:#000;
}

/* when there is no next or previous link available this class is added */
#gallery .disabled {
	visibility:hidden;		
}

/* the "information box" */
#gallery .info {
	position:absolute;
	bottom:0;
	left:0;	
	padding:10px 15px;
	color:#fff;
	font-size:11px;
	border-top:1px solid #666;
}

#gallery .info strong {
	display:block;	
}

/* progress indicator (animated gif). should be initially hidden */
#gallery .progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
#gallery .next, #gallery .prev, #gallery .info {
	background:#333 !important;		
}

#gallery .close { 
    background-image:url(/images/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}


/*9***************************/
/* container for slides */
#slideshow .images {
	position:relative;	
	height:207px;
	
	width:905px;
	float:left;	
	cursor:pointer;
	
	/* CSS3 tweaks for modern browsers */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow:0 0 25px #666;
	-webkit-box-shadow:0 0 25px #666;	
}

/* single slide */

#slideshow {
	margin-top:20px;
	margin-left:10px;
}
#slideshow .images div {
	display:none;
	position:absolute;
	top:0;
	left:0;		
}

/* header */
#slideshow .images h3 {
	font-size:22px;
	font-weight:normal;
	margin:0 0 20px 0;
	color:#456;
}

/* tabs (those little circles below slides) */
#slideshow .tabs {
	clear:both;
	margin-left:330px;
}

/* single tab */
#slideshow .tabs a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	display:block;
	font-size:1px;		
}

/* mouseover state */
#slideshow .tabs a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
#slideshow .tabs a.current {
	background-position:0 -16px;     
} 	


/* prev and next buttons */
#slideshow .forward, #slideshow .backward {
	float:left;
	margin-top:140px;
	display:block;
	width:30px;
	height:30px;
	cursor:pointer;
	font-size:1px;
	text-indent:-9999em;	
}

/* next */
#slideshow .forward 				{ background-position: 0 -30px; clear:right; }
#slideshow .forward:hover 		{ background-position:-30px -30px; }
#slideshow .forward:active 	 	{ background-position:-60px -30px; } 


/* prev */
#slideshow .backward:hover  		{ background-position:-30px 0; }
#slideshow .backward:active  	{ background-position:-60px 0; }

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
#slideshow .disabled {
	visibility:hidden !important;		
}

/* IE6 css fixer v0.4: Tue, 22 Sep 2009 20:25:04 +0200 */

/* ============================================= */
/* safe settings                                 */

/* add display:inline to floated elements */
* html ul#menu li,
* html #col_gauche,
* html #col_droite,
* html #pied ul#lienext,
* html #pied ul#lienext2,
* html #pied ul#liensite li,
* html #slideshow .images,
* html #slideshow .tabs a,
* html #slideshow .forward, * html #slideshow .backward {display:inline;}

/* add zoom:1 to pos:relative elements */
* html #entete,
* html #pied,
* html #slideshow .images {zoom:1;}