@CHARSET "UTF-8";
/********************************* CSS RESET START */
/* 
	CSS Reset
	http://meyerweb.com/eric/tools/css/reset/index.html
	v1.0 | 20080212 
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	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;
}
/********************************* CSS RESET END */

body{
	background: url('../graphics/layout/motif.gif');
	font-family: helvetica,sans-serif;
	font-size: 0.9em;
	margin-bottom: 10px;
}

#header{
	margin: 0 auto;
	background: #1F1E0A url('../graphics/layout/header.gif') bottom center no-repeat;
	height: 84px;
	width: 990px;
}
#header h1{
	float: left; 
	background: url('../graphics/layout/logoNaonedSystemes.gif') top left no-repeat;
}
#header h1 a {
	display: block;
	width: 184px;
	height: 70px;
}
#header h1 a span{
	display: none;
}
#header ul{
	margin-left: 250px;
	padding-top: 51px;
}
#header ul li{
	float: left; 
	display: block;
	width: 100px;
	height: 24px;
	margin-left: 16px;
	text-align: center;
}
#header ul li a{
	width: 100px;
	height: 24px;
	color: #fff;
	text-decoration: none;
	font-weight: normal;
	vertical-align: middle;
	display: block;
	font-size: 0.9em;
	padding-top: 5px;
	background: url('../graphics/layout/menu-off.gif') top left no-repeat;
}
#header ul li a:hover{
	background: url('../graphics/layout/menu-over.gif') top left no-repeat;
}
#header ul li.actif a, #header ul li:hover .actif a{
	background: url('../graphics/layout/menu-on.gif') top left no-repeat;
}
/**********************************************************************************************/
 /* CONTENT SETUP */
#content{
	margin: 0 auto;
	background: #fff url('../graphics/layout/content-bottom.gif') bottom center no-repeat;
	min-height: 200px;
	width: 955px;
	padding-top: 40px;
	padding-left: 35px;
}
.contentProducts{
	padding-right: 35px;
	width: 920px !important;
}
#content h1{
	color: #86AD02;
	font-size: 27px;
	font-weight: normal;
	padding-bottom: 20px;
	padding-top: 20px;
	/*text-transform: uppercase;
	font-size: 23px;
	width: 600px;*/
	width: 720px;
}
#content-main h2{
	line-height: 90%;
	margin-top: 10px;
	padding-bottom: 8px;
	/*text-transform: uppercase;*/
	color: #000;
}
#content-right{
	float: right;
	width: 220px;
 }
#content-left{
	float: left;
	width: 250px;
	margin-left: -35px;
}
#content-main{
	display: block;
	background: url('../graphics/layout/content.gif') no-repeat top left;
	min-height: 300px;
	width: 690px;
}
#content-main p{
	line-height: 15px;
	font-size: 12px;
	margin-top: 1em;
	color: #4F4A4A;
	letter-spacing: 1px;
}
#content-main .boxMainContent ul{
	padding-left: 20px;
}
#content-main .boxMainContent ul li{
	line-height: 15px;
	font-size: 12px;
	color: #4F4A4A;
}
#content-main .boxMainContent li{
	color: #4F4A4A;
	display : list-item;
	list-style-image : url('../graphics/layout/puce-main.jpg');
	background-position: 0 0.32em;
	padding-left: 12px;
	margin-top: 5px;
	margin-bottom: 5px;
	letter-spacing: 1px;
}
.boxMainContent{
	margin-left: 215px;
}
/**********************************************************************************************/
 /* CONTENT IMG LEFT */
.box_img_left{
	float: left;
}
 /**********************************************************************************************/
 /* SUB MENU */
 ul#submenu{
	width: 160px;
	text-align: right;
	margin-left: 15px;
 }
 ul#submenu li{
	cursor: pointer;
	text-transform: uppercase;
	color: #969696;
	margin-top: 10px;
 }
 ul#submenu li.opened{
	color: #8E9900;
}
 ul#submenu li ul li{
	display: none;
	text-transform: lowercase;
	color: #4F4F4F;
 }
 ul#submenu li ul li.current{
	font-weight: bold;
	color: #000;
}
/**********************************************************************************************/
 /* NO SUB MENU */
div#nosubmenu{
	margin-left: 215px;
 }
/**********************************************************************************************/
 /* LIENS */
.boxMainContent a, .box-content a, #loupe-content a{
	background: url('../graphics/layout/link-naoned-systemes.gif') no-repeat top left;
	padding-left: 10px;
	color: #86AD02;
	/*font-weight: bold;*/
	text-decoration: none;
}
 /**********************************************************************************************/
 /* BOX */
.box{
	width: 200px;
	background: url('../graphics/layout/box-top.gif') no-repeat top center;
	padding: 0;
	padding-top: 10px;
}
.box-content{
	background: url('../graphics/layout/box-content.gif') no-repeat bottom center;
	padding: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	width: 180px;
}
.box-content h6{
	color: #000;
	margin-bottom: 15px;
	font-size: 14px;
}
.box-content p{
	color: #656565;
	font-size: 11px;
	line-height: 15px;
	margin-bottom: 10px;
}
.box-content p a{
	color: #86AD02;
	text-decoration: none;
}
.box-content p.lien-box{
	margin-top: 5px;
}
.box-content p.lien-box a{
	background:transparent url(../graphics/layout/link-naoned-systemes.gif) no-repeat scroll left center !important;
	padding-left: 10px !important;
}
.box-content div.img_box_left img{
	float: left;
	/*margin: 15px;*/
	margin-left: 0;
	border: 1px solid #969696;
	
}
.box-content div.img_box_right img{
	float: right;
	/*margin: 15px;*/
	margin-right: 0;
	border: 1px solid #969696;
}
.box-content div.img_box_centre{
	text-align: center;
}
.box-content div.img_box_centre img{
	clear: both;
	margin: 0px;
	text-align: center;
	border: 1px solid #969696;
}
/*** THUMB ***/
.box-content div.img_box_thumb_left img{
	float: left;
	/*margin: 15px;*/
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	border: 1px solid #969696;
	
}
.box-content div.img_box_thumb_right img{
	float: right;
	margin-left: 5px;
	margin-bottom: 5px;
	margin-right: 0;
	border: 1px solid #969696;
}
.box-content div.img_box_centre{
	margin-bottom: 5px;
	text-align: center;
}
.box-content div.img_box_thumb_centre img{
	clear: both;
	margin: 0px;
	text-align: center;
	border: 1px solid #969696;
}
/**********************************************************************************************/
/* FORM (CONTACT) */
label{
	float: left;
	width: 130px;
	display: block;
	padding: 0 10px;
	margin: 5px 0;
	text-align: right;

	color:#4F4A4A;
	font-size:0.9em;
	line-height:125%;
}
label em , p.champsObligatoire em{
	color: #f00;
}
input, textarea{
	border: 1px solid #505050;
	margin: 5px;
	width: 250px;
}
input.btn_ok, input.btn_annul{
	width: auto !important;
}
textarea{
	height: 90px;
	width: 250px !important;
}
input:focus{
	background: url(../img/pencil.png) right center no-repeat;
}

form .submit{
	background: #cecece;
	margin-top: 20px;
	margin-left: 360px;
	width: auto;
}
input.btn_ok{
	margin-left: 156px;
}
p.champsObligatoire{
	margin-left: 48px;
}
 /**********************************************************************************************/
 /* VARIOUS */
 .clear{
	clear: both;
	height: 1px;
 }
/**********************************************************************************************/
 /* BOX PRODUCTS */
#box-product-archive, #box-product-portail{
	width: 922px;
	height: 180px;
	margin: 0 auto;
}
#box-product-archive-container, #box-product-portail-container{
	padding-bottom: 3px;
	_padding-bottom: 0px; /* IE6 hack */
	height: 177px;
	width: 922px;
	padding-top: 3px;
}
#box-product-archive-content, #box-product-portail-content{
	height: 174px;
	width: 922px;	
}
#box-product-archive{
	background: url('../graphics/layout/box-product-archive-bottom.gif') no-repeat bottom left;
} 
#box-product-portail{
	background: url('../graphics/layout/box-product-portail-bottom.gif') no-repeat bottom left;
}
#box-product-archive-container{
	background: url('../graphics/layout/box-product-archive-top.gif') no-repeat top left;
}
#box-product-portail-container{
	background: url('../graphics/layout/box-product-portail-top.gif') no-repeat top left;
}
#box-product-archive-content{
	background-color: #A3AD00;
	height: 154px;
	padding-left: 35px;
	padding-top: 20px;
	width:887px;
}
#box-product-portail-content{
	background-color: #850157;	
	height: 154px;
	padding-left: 35px;
	padding-top: 20px;
	width:887px;
}
/**********************************************************************************************/
 /* BOX ARCHIVE */
 #box-product-archive-content #logo-archive{
	background: url('../graphics/layout/separator-archives-produit.gif') no-repeat right center;
	height: 110px;
	width: 217px;
	float: left;
	margin-top: 20px;
 }
 #logo-archive a{
	background: url('../graphics/layout/logo-mnesys-archives-produit.jpg') no-repeat left center;
	height: 110px;
	width: 210px;
	display: block;
 }
 #logo-archive a span{
	display: none;
 }
 #description-archive{
	color: #fff;
	width: 398px;
	float: left;
	padding-left: 17px;
	padding-right: 17px;
	height: 90px;
	padding-top: 4px;
 }
 #description-archive h2{
	text-transform: uppercase;
	color: #fff;
 }
#description-archive p{
	font-size: 12px;
	line-height: 15px;
	margin-top:1em;
	text-align: justify;
}
#actus-archive{
	color: #fff;
	float: left;
	padding-left: 17px;
	padding-right: 17px;
	height: 140px;
	margin-top: 0px;
	width: 194px;
	background: url('../graphics/layout/separator-archives-produit.gif') no-repeat left center;
 }
#actus-archive h2{
	background: url('../graphics/layout/a_la_une_archives.jpg') no-repeat left top;
	height: 30px;
	width: 150px;
	display: block;
}
#actus-archive h2 span{
	display: none;
}
#actus-archive h3{
	text-transform: uppercase;
	color: #E11D11;
	margin-bottom: 2px;
	margin-top: 2px;
}
#actus-archive p {
	font-size: 11px;
	line-height: 11px;
	text-align: justify;
}
#actus-archive a{
	background: url('../graphics/layout/puce-produit-mnesys-arch.gif') no-repeat center left;
	padding-left: 10px;
	color: #E11D11;
	/*font-weight: bold;*/
	text-decoration: none;
	font-size: 11px;
	line-height: 11px;
	margin-top: 1em;
}
 /**********************************************************************************************/
 /* BOX PORTAIL */
#box-product-portail-content #logo-portail{
	background: url('../graphics/layout/separator-portail-produit.gif') no-repeat right center;
	height: 110px;
	width: 217px;
	float: left;
	margin-top: 20px;
}
#logo-portail a{
	background: url('../graphics/layout/logo-mnesys-portail-produit.jpg') no-repeat left center;
	height: 110px;
	width: 210px;
	display: block;
}
#logo-portail a span{
	display: none;
}
#description-portail{
	color: #fff;
	width: 398px;
	float: left;
	padding-left: 17px;
	padding-right: 17px;
	height: 90px;
	padding-top: 4px;
}
#description-portail h2{
	text-transform: uppercase;
	color: #fff;
}
#description-portail p{
	font-size: 12px;
	line-height: 15px;
	margin-top:1em;
	text-align: justify;
}
#actus-portail{
	color: #fff;
	float: left;
	padding-left: 17px;
	padding-right: 17px;
	height: 140px;
	margin-top: 0px;
	width: 194px;
	background: url('../graphics/layout/separator-portail-produit.gif') no-repeat left center;
}
#actus-portail h2{
	background: url('../graphics/layout/a_la_une_portail.jpg') no-repeat left top;
	height: 30px;
	width: 150px;
	display: block;
}
#actus-portail h2 span{
	display: none;
}
#actus-portail h3{
	text-transform: uppercase;
	color: #F28D01;
	margin-bottom: 2px;
	margin-top: 2px;
}
#actus-portail p {
	font-size: 11px;
	line-height: 11px;
	text-align: justify;
}
#actus-portail a{
	background: url('../graphics/layout/puce-produit-mnesys-port.gif') no-repeat center left;
	padding-left: 10px;
	color: #F28D01;
	/*font-weight: bold;*/
	text-decoration: none;
	font-size: 11px;
	line-height: 11px;
	margin-top: 1em;
}
 /**********************************************************************************************/

/**********************************************************************************************/
 /* REFERENCES */
/****************************************************************/
/*					References Container    */
/****************************************************************/
#reference-container{
	padding: 20px;
	position:relative;
}
/****************************************************************/
/*					References Description  */
/****************************************************************/
#loupe-container{
	width: 666px;
	height: 210px;
	background: #e6e6e6 url('../graphics/layout/loupe-bottom.gif') bottom left no-repeat;
	padding-bottom: 19px;
}
#carousselControl{
	margin-top: 10px;
	height: 24px;
	width: 350px;
	margin-left: 298px;
}
/****************************************************************/
/*						 Bouton suivant */
/****************************************************************/
.jcarousel-skin-tango .jcarousel-next-horizontal{
	float: left;
	height: 24px;
	width: 24px;
	margin-left: 10px;
	background: url('../graphics/layout/right-on.gif') top left no-repeat;
	cursor: pointer;
	display: block;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
	background: url('../graphics/layout/right-on.gif') top left no-repeat;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
	background: url('../graphics/layout/right-on.gif') top left no-repeat;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background: url('../graphics/layout/right-off.gif') top left no-repeat;
}
/****************************************************************/
/*					       Bouton précédent */
/****************************************************************/
.jcarousel-skin-tango .jcarousel-prev-horizontal{
	float: left;
	height: 24px;
	width: 24px;
	margin-left: 10px;
	background: url('../graphics/layout/left-on.gif') top left no-repeat;
	cursor: pointer;
	display: block;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
	background: url('../graphics/layout/left-on.gif') top left no-repeat;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
	background: url('../graphics/layout/left-on.gif') top left no-repeat;
}


.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background: url('../graphics/layout/left-off.gif') top left no-repeat;
}

#carousselControl span{display: none;}
#references-caroussel ul li.selected{
	background: url('../graphics/layout/background.gif') top left no-repeat;
}
/******************************************************************/
/*						     plugin style */
/******************************************************************/
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
	position: relative;
}

.jcarousel-clip {
	z-index: 2;
	padding: 0;
	margin: 0;
	overflow: hidden;
	position: relative;
	margin-bottom: 10px;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 8px;
    margin: 0;
    padding: 0;
}

.jcarousel-item {
	float: left;
	list-style: none;
	width: 75px;
	height: 75px;
	text-align: center;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}
/******************************************************************/
/*						      plugin skin */
/******************************************************************/
.jcarousel-skin-tango.jcarousel-container-horizontal {
	width: 666px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
	width:  666px;
	height: 80px;
}


.jcarousel-skin-tango .jcarousel-item {
	width: 70px;
	height: 70px;
	padding: 5px;
	margin-right: 16px;
	cursor: pointer;
}
.jcarousel-skin-tango .jcarousel-item div{
	display: none;
}
/******************************************************************/
/*						    content style */
/******************************************************************/
div#loupe-content{
	padding: 21px;
	font-size:0.9em;
	line-height:125%;
	width: 623px;
	height: 191px;
	background: url('../graphics/layout/loupe-top.gif') top left no-repeat;
	overflow: hidden;
}
#loupe-content img{
	float: right;
	border: 1px solid black;
}
.loupeDescription{
	width: 375px;
}
.loupeDescription p {
	font-size: 11px !important;
	margin-bottom: 8px;
}
div#loupe-content h4 {
	color: #8E9900;
	font-size: 1em;
	font-weight: bold;
}
div#loupe-content a{
	font-size:0.9em;
	font-weight: bold;
	letter-spacing: 1px;
	color:#8E9900;
	text-decoration: none;
}
/**********************************************************************************************/
/* VARIOUS */
 .clear{
	clear: both;
	height: 1px;
 }

div.info, div.success, div.warning, div.error, div.validation, div.message {
	border: 1px solid;
	margin: 10px 0px;
	padding:15px 10px 15px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
}
div.success, div.message {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image:url('../graphics/layout/info/success.png');
}
div.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('../graphics/layout/info/warning.png');
}
div.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('../graphics/layout/info/error.png');
}