/* -----------------------------   base   -------------------- */

#fond{
			
	background : #FFF url(img/fd-html.jpg) repeat-x center top;
	height : 158px;
	margin-top : 62px;
		
}

body{
	background : #FFF url(img/fd.jpg) repeat-y center top;
	text-align : center;
	margin : 0;
	padding : 0;
	font-family : Arial , Verdana , Sans-serif;
	font-size : 0.8em;
}

#page{
	width : 982px;
	position: relative;
	height : 100%;
	margin : -220px auto 0 auto;
	text-align : left;
}
/* -----------------------------   styles communs   -------------------- */
.spacer {
	clear : both;
}

a {
	color : #2368a2;
}

.links{
}

h1, h2, h3, h4{
	font-family: "Trebuchet MS" , Arial , Verdana , Sans-serif;
}

/* -----------------------------   header + logo   -------------------- */
#header {
	background-image : url(img/logo.jpg) ;
	background-repeat : no-repeat;
	background-position: 40px top;

}


#header h1{
	text-indent: -100em;
	overflow: hidden;
	width: 363px;
	height: 62px;
	padding: 0;
	margin: 0 0 0 40px;

}
#header h1 a{
	display: block;
	width: 70%;
	height: 100%;
	text-decoration: none;
	background : transparent url(img/logo.jpg) no-repeat ;

}



/* -----------------------------   navigation du site   -------------------- */
#bloc_menu{
	position: absolute;
	top: 0;
	right: 0;
	background-color : #DDD;
	height : 62px;
	text-align : right;
	background : transparent url(img/fd-collab.jpg) no-repeat top right;
	
}


#bloc_menu #acces{
	font-size : 85%;
	padding : 2px 8px;
	
}
#bloc_menu #acces a{
	color : #747474;
	text-decoration : none;
	
}

#bloc_menu .menu{
	list-style-type : none;
	width : 670px;
	margin : 10px 0 0 20px;
	padding : 0;
	
}
#bloc_menu .menu li{
	margin : 0px 0px 0 2px;
	padding: 0;
	display : block;
	float : left;
}

#bloc_menu .menu .active{
	/* fond gris */
	background-color : #DDD;
	background : transparent url(img/ongletfonce.gif) no-repeat top center;
}

#bloc_menu .menu li a{
	width : 93px;
	height : 35px;
	display : block;
	text-align:center;
	padding-top : 7px;
	font-family: "Trebuchet MS" , Arial , Verdana , Sans-serif;
	color : #0e5491;
	font-size : 1.1em;
	font-weight: bold;
	text-decoration:none;
	
}
#bloc_menu .menu li a:hover{
	background : transparent url(img/onglet.gif) no-repeat top center;
}

#bloc_menu .menu  .active a:hover{
	background : transparent url(img/onglet-fonce.gif) no-repeat top center;
}

/* -----------------------------   accroche  -------------------- */
#accroche{
	top: 62px;
	left: 0;
	position: absolute;
	height : 158px;
	width : 703px;
	background : #376dc0 url(img/fd-accroche.jpg) no-repeat;
	text-align : right;
	

	
}
#accroche  h2 {
color : #FFF;
margin : 5px 100px 5px 20px;
font-size : 110%;
padding-top :70px;
}

#accroche  p{
color : #FFF;
margin : 5px 100px 5px 20px;
font-size : 85%;
}

#accroche a{
	color : #fff;
}


/* -----------------------------   encart produit   -------------------- */

#encart{
	top: 62px;
	right: 0;
	position: absolute;
	width : 279px;
	background :  url(img/fd-produits.jpg) no-repeat;


	
}
#encart div{
	padding : 30px 35px 20px 35px;
}
#encart div h3{
	margin : 10px 0px;
	color : #ec6400;
	font-size: 1.2em;
}

#encart div p{
	margin : 10px 0px;
	font-size : 85%;
	line-height : 1.5em;
}

#encart ul{
	list-style-type:none;
	margin : 0;
	padding : 10px 0 ;
}
#encart ul a{
	color : #000;
	text-decoration : none;
}

#encart ul a:hover{
	color : #000;
	text-decoration : underline;
}

#encart li{
	margin : 7px 0;
	padding : 0;

}

#encart #photo_produit{
	float : right;
	border : 0;
}

/* -----------------------------    contenu   -------------------- */
#accueil {
	top: 220px;
	left: 5px;
	position: absolute;
	height : 283px;
	width : 680px;
	padding : 15px 20px;
	line-height : 1.6em;

}

#accueil h2{
	color : #ec6400;
	font-size: 1.3em;
}

#accueil dl{
	background-color : #DDD;
}
#accueil dt{
	display : block;
	float : left;
	width : 25%;
	text-align : center;
}
#accueil dd{
	display : none;
}


#accueil #appliweb, #accueil #logicielbureau, #accueil #outilssaisie , #accueil #bornes{
	display:block;
	padding-top : 72px;
	text-decoration : none;
	color : #414141;
	font-weight : bold;
	margin-top : 12px;
}


#accueil #appliweb{
	background : transparent url(img/logoappliweb.jpg) no-repeat top center;
}

#accueil #logicielbureau{
	background : transparent url(img/logobureau.jpg) no-repeat top center;
}

#accueil #outilssaisie{
	background : transparent url(img/logomobile.jpg) no-repeat top center;
}

#accueil #bornes{
	background : transparent url(img/logobornes.jpg) no-repeat top center;
}



/* -----------------------------  4 blocs   -------------------- */
#infos{
	top: 504px;
	height : 200px;
	position: absolute;
	width : 982px;
	overflow : hidden;
}

#infos #bloc1 , #infos #bloc2 , #infos #bloc3 {
	width : 245px;
	float : left;
	padding : 10px 0px;
	background : #eee url(img/degr-eee.jpg) repeat-y;
	height : 200px;
}
#infos #bloc4{
	width : 247px;
	float: right;
	padding : 10px 0px;
	background : #eee url(img/degr-eee.jpg) repeat-y;
	height : 200px;
	
}

#infos div p{
	margin :10px 20px;
	line-height : 1.6em;
}

#infos div h3 {
	color : #2368a2;
	font-size : 1.2em;
	margin : 12px 20px;
}



/* -----------------------------   footer   -------------------- */
#footer{
	top: 704px;
	left: 0;
	position: absolute;
	background-color : #d8d8d8;
	width : 982px;
	font-size : 90%;
	color : #545454;
	font-weight : bold;
	line-height : 1.5em;
}

#footer img{
border : 0;
margin : 0 5px;
	
}

#footer #coordonnees{
		float : left;
		width : 225px;
		padding : 20px 0 20px 20px;
}

#footer #partenaires{
		float : left;
		width : 490px;
		text-align:center;
		padding : 20px 0 ;
}

#footer #mentions{
		float : right;
		width : 225px;
		padding : 20px 20px 20px 0;
		text-align : right;
}