@charset "utf-8";
/********************************************************
	CSS Document / Home - Volten par Skalpel.fr
********************************************************/

/* Containers
-----------------------------------------------------------------------------*/
#home { 
	position: relative;
	display: block;
	width: 916px;
}


/* Caroussel
-----------------------------------------------------------------------------*/
#caroussel { 
	position: relative;
	display: block;
	width: 916px; 
	height: 230px;
	margin-bottom: 20px;
}

/* Pages */
#caroussel ul.pages {
	display: block;
	width: 42px;
	height: 229px;
	padding: 1px 0 0 1px;
	background: url(../images/interface/home/caroussel-pages-bg.gif) top left no-repeat;
	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
}
#caroussel ul.pages li {}
#caroussel ul.pages li a:link, #caroussel ul.pages li a:visited {
	display: block;
	width: 27px;
	height: 40px;
	line-height: 40px;
	padding-left: 15px;
	background: url(../images/interface/home/caroussel-pages-a.gif) top left no-repeat;
	font-size: 1.30em;
	color: #84A9C9;
	text-decoration: none;
}
	#caroussel ul.pages li:first-child a { background: none; }
	#caroussel ul.pages li a:hover,
	#caroussel ul.pages li.active a:link, #caroussel ul.pages li.active a:visited, #caroussel ul.pages li.active a:hover { color: #FFFFFF; }
	
/* Diapo */
#caroussel div.diapo {
	position: absolute;
	top: 0;
	left: 43px;
	visibility: hidden;
	display: block;
	width: 871px;
	height: 230px;
}
	#caroussel div.diapo.active { visibility: visible; }
#caroussel div.diapo div.descriptif {
	float: left;
	display: block;
	width: 230px;
	height: 228px;
	margin-right: 10px;
	overflow: hidden;
	background: #FFFFFF url(../images/interface/home/caroussel-descriptif-bg.gif) top left repeat-x;
	border: 1px solid #EEF7FB;
	border-left: none;
}
	#caroussel div.diapo div.descriptif p { margin: 0 13px 7px; font-size: 0.90em; }
	#caroussel div.diapo div.descriptif p.title {
		padding: 12px 0 20px 13px;
		margin: 0;
		background: url(../images/interface/home/caroussel-descriptif-title.gif) 0 19px no-repeat;
		font-size: 1.50em;
		color: #E64414;
	}
#caroussel div.diapo div.visuel { 
	float: left;
	display: block;
	width: 630px;
	height: 230px;
}


/* Produits
-----------------------------------------------------------------------------*/
#produits {
	float: left;
	display: block;
	width: 520px;
	height: 160px;
	margin-right: 10px;
}

/* Head */
#produits div.head {
	display: block;
	width: 520px;
	height: 37px;
	background: url(../images/interface/home/head-bg.gif) top right no-repeat;
}
#produits div.head p.title {
	padding: 6px 0 0 20px;
	margin: 0;
	font-size: 1.40em;
	color: #FEE40B;
}
#produits div.head ul { 
	float: right; 
	display: block; 
	height: 30px;
	margin: 7px 7px 0 0;
}
#produits div.head li {
	float: left;
	display: inline-block;
	height: 30px;
	margin-right: 1px;
}
#produits div.head a:link, #produits div.head a:visited {
	display: block;
	height: 30px;
	line-height: 25px;
	padding-left: 15px;
	background: url(../images/interface/home/head-a.gif) 0 0 no-repeat;
	font-size: 0.85em;
	color: #BCCFE2;
	text-decoration: none;
	/* IE6 */
	width: auto !important;
	width: 0.1em;
	white-space: nowrap;
}
	#produits div.head a:hover,
	#produits div.head li.active a:link, #produits div.head li.active a:visited, #produits div.head li.active a:hover { background-position: 0 -30px; color: #537195; }
#produits div.head a:link span, #produits div.head a:visited span {
	display: block;
	height: 30px;
	padding-right: 15px;
	background: url(../images/interface/home/head-span.gif) 100% 0 no-repeat;
	cursor: pointer;
}
	#produits div.head a:hover span,
	#produits div.head li.active a:link span, #produits div.head li.active  a:visited span, #produits div.head li.active  a:hover span { background-position: 100% -30px; }
	
/* Panel */
#produits div.panel {
	display: none;
	width: 520px;
	height: 107px;
	padding-top: 12px;
	overflow: hidden;
	background: url(../images/interface/home/produits-panel-bg.gif) top left no-repeat;
}
	#produits div.active { display: block; }

/* Produit */
#produits div.produit {
	float: left;
	display: block;
	width: 220px;
	height: 90px;
	padding: 10px 0 0 20px;
	margin-right: 20px;
	background: url(../images/interface/home/produits-panel-sep.gif) top left no-repeat;
	font-size: 0.80em;
	color: #97A0A4;
}
	#produits div.produit:first-child { background: none; }
#produits div.produit p { line-height: 1.10em; margin: 0; }
#produits div.produit div.visuel {
	float: left;
	display:block;
	width: 80px;
	height: 80px;
}
	#produits div.produit div.visuel img { padding: 2px; background-color: #EFF6FA; border: 1px solid #C6D3D9; }
#produits div.produit div.description {
	float: left;
	width: 135px;
}
#produits div.produit p.title { 
	margin-bottom: 3px; 
	font-size: 1.10em; 
	color: #537195; 
	font-weight: bold; 
}
#produits div.produit p.detail {
	display: block;
	width: 73px;
	height: 18px;
	margin-top: 7px;
}
	#produits div.produit p.detail a {
		display: block;
		width: 73px;
		height: 18px;
		background: url(../images/interface/btn-en-savoir-plus.gif) top left no-repeat;
	}


/* Services
-----------------------------------------------------------------------------*/
#services {
	float: left;
	display: block;
	width: 382px;
	height: 160px;
}

/* Head */
#services div.head {
	display: block;
	width: 382px;
	height: 37px;
	background: url(../images/interface/home/head-bg.gif) top right no-repeat;
}
#services div.head p.title {
	padding: 6px 0 0 20px;
	margin: 0;
	font-size: 1.40em;
	color: #FEE40B;
}

/* Ul */
#services ul {
	display: block;
	width: 380px;
	height: 118px;
	overflow: hidden;
	background: #FFFFFF url(../images/interface/home/services-bg.gif) top left repeat-x;
	border: 1px solid #EEF7FB;
	border-top: none;
	font-size: 0.90em;
}
#services li {
	width: 365px;
	height: 28px;
	line-height: 28px;
	padding-left: 15px;
	border-top: 1px solid #CFE1E8;
	color: #537195;
	font-weight: bold;
}
	#services li:first-child { border: none; }
#services span { float: left; display: block; width: 280px; height: 28px; margin: 0; background-color: #999900; }
#services a {
	float: right;
	display: block;
	width: 73px;
	height: 18px;
	margin: 5px 7px 0 10px;
	background: url(../images/interface/btn-en-savoir-plus.gif) top left no-repeat;
}