@charset "utf-8";
/******************************************************
BASE STYLES
*******************************************************/
html { 
	font-size: 100%;
} 

body { 
	margin: 0; 
	padding: 0; 
	font-family: Arial, Verdana, Helvetica, sans-serif; 
	font-size: 12px;
	line-height:15px; 
	color: #525456;
	background: #fff url(../images/fond.gif) repeat left top; 
} 

h1, h2, h3, h4, h5, h6 { 
	padding:0;
	font-weight: bold; 
	font-style: normal; 
} 
h1 { 
	margin:14px 0 7px 0; 
	font-size:26px; 
	line-height:29px; 
} 
h2 { 
	margin:12px 0 6px 0; 
	font-size:21px; 
	line-height:24px; 
} 
h3 { 
	margin:10px 0 5px 0; 
	font-size:18px; 
	line-height:21px;
	font-weight:normal;
} 
h4 {
	margin:8px 0 4px 0; 
	font-size:15px; 
	line-height:18px; 
	font-weight:normal;
}
h5 {
	margin:6px 0 3px 0; 
	font-size:13px; 
	line-height:16px; 
}
h6 {
	margin:4px 0 2px 0; 
	font-size:12px; 
	line-height:15px; 
}

ul, ol {
	margin:8px 0 8px 32px;
	padding:0;
}

p {
	padding:0;
	margin:8px 0;
}

address {
	margin:8px 0;
	font-style:normal;
}

a {
	outline: none;
}
a:link, a:visited {
	text-decoration: none;
	color: #8e9091;
}
a:hover, a:active {
	text-decoration: underline;
	color: #525456;
}

a img {
	border: none;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

form, fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

input, button, select {
	vertical-align: middle; 
}

abbr[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

blockquote {
	margin:8px 0 8px 20px; 
	padding: 0 0 0 10px; 
	border-left: solid 2px #ddd; 
} 
q, cite { 
	font-style: italic; 
} 

q cite, q q { 
	font-style: normal 
} 

q { 
	quotes: none; 
} 

q:before, q:after { 
	content: "";
} 

blockquote p, li p { 
	margin:5px 0; 
} 

dl { 
	margin:8px 0; 
} 

dt { 
	margin:8px 0 0 0; 
	font-weight:bold; 
} 

dd { 
	margin:3px 0 3px 32px; 
} 

table { 
	margin: 0; 
	border: 1px solid gray; 
	border-collapse: collapse; 
	border-spacing: 0; 
} 

table td, table th { 
	padding: 4px; 
	border: 1px solid #ccc; 
	vertical-align: top; 
} 

/******************************************************
  CLEAR
*******************************************************/
*html .clear {
	height: 1%;
	overflow: visible;
}

*+html .clear {
	min-height: 1%;
}

.clear:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/******************************************************
  TYPO3 SPECIFIC STYLES
*******************************************************/
.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

.align-right {
	text-align: right;
}

.align-justify {
	text-align: justify;
}
.csc-textpic-caption {
	padding:3px;
}

/******************************************************
  LAYOUT
*******************************************************/
#container {
	width: 986px;
	margin: 50px 0 0 50px;
}

#content {
	width: 986px;
	height: 637px;
	background: transparent url(../images/bgcontent.gif) repeat-y left top;
	position: relative;
}


#contentRight {
	width: 480px;
	float: right;
	padding: 50px 0;
}

/******************************************************
  CONTENT LEFT
*******************************************************/
#contentLeft {
	width:480px;
	float:left;
	padding:60px 0;
	text-align:right;
}
#contentLeft h1 {
	width:446px;
	height:36px;
	margin:0;
	padding:6px 34px 0 0;
}
#contentLeft h1 a {
	display:block;
	width:446px;
	height:36px;
	background:#fff url(../images/logoxjc.gif) right top no-repeat;
	margin:0;
}
#contentLeft h1 a span {
	display: none;
}

#contentLeft h2 {
	display:block;
	width:184px;
	height:24px;
	margin:28px 34px 0 260px;
	padding:0;
	background:url(../images/slogan.gif) right 5px no-repeat;
}
#contentLeft h2 span {
	display:none;
}

#contentLeft ul.menu {
	margin:119px 0 0 0;
	padding:0 34px 0 0;
	list-style:none;
}
#contentLeft ul.menu li {
	margin:0;
	padding:0 0 1px 0;
	font-size:13px;
	font-weight:bold;
	color:#b4b6b8;
	text-transform:uppercase;
}
#contentLeft ul.menu li.last {
	margin-top:33px;
}
#contentLeft ul.menu li a:link, #contentLeft ul.menu li a:visited {
	color:#b4b6b8;
	text-decoration:none;
}
#contentLeft ul.menu li a:hover, #contentLeft ul.menu li a:active {
	color:#525456;
	text-decoration:none;
}
#contentLeft ul.menu li.actif a:link, #contentLeft ul.menu li.actif a:visited {
	color:#525456;
}
#contentLeft ul.menu li.actif a:hover, #contentLeft ul.menu li.actif a:active {
	color:#525456;
}





#contentLeft ul.menu10th {
	margin:159px 0 0 0;
	padding:0 34px 0 0;
	list-style:none;
}
#contentLeft ul.menu10th li {
	margin:0;
	padding:0 0 1px 0;
	font-size:13px;
	font-weight:bold;
	color:#b4b6b8;
	text-transform:uppercase;
}

#contentLeft ul.menu10th li a:link, #contentLeft ul.menu10th li a:visited,
#contentLeft ul.menu10th li a:hover, #contentLeft ul.menu10th li a:active {
	background: url(../images/upArrow.gif) no-repeat left center;
  padding: 0 0 0 18px;
}

#contentLeft ul.menu10th li a:link, #contentLeft ul.menu10th li a:visited {
	color:#b4b6b8;
	text-decoration:none;
}
#contentLeft ul.menu10th li a:hover, #contentLeft ul.menu10th li a:active {
	color:#525456;
	text-decoration:none;
}
#contentLeft ul.menu10th li.actif a:link, #contentLeft ul.menu10th li.actif a:visited {
	color:#525456;
}
#contentLeft ul.menu10th li.actif a:hover, #contentLeft ul.menu10th li.actif a:active {
	color:#525456;
}

/******************************************************
  CONTENT RIGHT
*******************************************************/
#contentRight {
	width: 480px;
	float: right;
	padding: 50px 0;
	color:#525456;
	font-size:12px;
	line-height:16px;
}
#contentRight .contentWrap {
	position: relative;
	padding:87px 34px 50px 34px;
}
#contentRight .greyContent {
	background:#f1f1f1;
	height:100%;
}

/******************************************************
* Images Array
*******************************************************/
#imagesArray {
	width:411px;
	height:411px;
	margin:0;
	overflow:hidden;
}
#imagesArray .box {
	width:135px;
	height:135px;
	float:left;
	margin:0 3px 3px 0;
	background:#f1f1f1;
}
#imagesArray .c3 {
	margin-right:0;
}
#imagesArray .l3 {
	margin-bottom:0;
}

/******************************************************
* Images Array
*******************************************************/
#homeMozaicContainer {
	position:relative;
}
#homeMozaicContainer .masque {
	position:absolute;
	top:0;
	left:0;
	width:411px;
	height:411px;
	background:url(../images/trans.gif) left top repeat;
}

#galleryContainer {
	position:relative;
	width:411px;
	height:436px;
	font-size:11px;
	font-weight:bold;
}
#galleryContainer #imagesArray .box {
	width:100px;
	height:100px;
	float:left;
	margin:0 3px 3px 0;
	background:#f1f1f1;
}
#galleryContainer #imagesArray .c4 {
	margin-right:0;
}
#galleryContainer #imagesArray .l4 {
	margin-bottom:0;
}
#galleryContainer .photographe {
	position:absolute;
	left:0;
	bottom:0;
	text-align:left;
	color:#B4B6B8;
	font-weight:normal;
}
#galleryContainer .random {
	position:absolute;
	right:0;
	bottom:0;
	text-align:right;
}
#galleryContainer .random a:link, #galleryContainer .random a:visited {
	color:#525456;
	text-decoration:none;
}
#galleryContainer .random a:hover, #galleryContainer .random a:active {
	color:#525456;
	text-decoration:underline;
}

/******************************************************
* Box scroll
*******************************************************/
#scrollBox {
	width: 412px;
  margin-bottom: 30px;
  background: url(../images/bg_white_90.png);  
  position: absolute;
  top: 30px;
  z-index: 30;
}
#scrollBox .scrollIn {
	overflow: hidden;
	height: 152px;
}
#scrollBox #readmore {
	display: block;
	width: 410px;
	text-align: right;
	padding: 5px 0;
}


/******************************************************
* Press
*******************************************************/
#flexpress {
	position:relative;
	height:410px;
	padding:0 19px 0 0;
	overflow:auto;
}
#flexpress .box {
	min-height:80px;
	margin:0 0 4px 0;
	padding:15px;
	background:#f1f1f1;
}
#flexpress .box .image {
	float:left;
	width:110px;
	margin:0 15px 0 0;
}
#flexpress .box .texte {
	float:left;
}
#flexpress .box .texte h4 {
	font-size:13px;
	text-transform:uppercase;
	font-weight:bold;
	margin:0;
}
#flexpress .box .texte h5 {
	font-size:11px;
	font-weight:normal;
	margin:0 0 4px 0;
}
#flexpress .box .texte a.pdf {
	bottom:15px;
	display:block;
	height:16px;
	padding:0 0 0 21px;
	background:url(../images/file_pdf.png) -1px 0 no-repeat;
}
#flexpress .box .texte a.pdf:link, #flexpress .box .texte a.pdf:visited {
	background-position:-1px 0;
}
#flexpress .box .texte a.pdf:hover, #flexpress .box .texte a.pdf:active {
	background-position:-1px -16px;
}

/******************************************************
* Contenu flexible - Team
*******************************************************/
.flexteam {
	position:relative;
	width:166px;
	height:202px;
	margin:0 auto 8px auto;
	overflow:hidden;
	cursor:default;
}
.flexteam .photo {
	position:absolute;
	top:0;
	left:0;
	z-index:80;
}
.flexteam .signature {
	position:absolute;
	top:120px;
	left:4px;
	width:158px;
	height:78px;
	overflow:hidden;
	z-index:90;
	text-align:right;
}
.flexteam .signature .wrap {
	display:block;
	width:158px;
	height:80px;
	margin-top:40px;
	background:url(../images/bg_team_sign.png);
}
.flexteam .signature .wrap h3 {
	display:block;
	margin:0;
	padding:9px 6px 11px 0;
	font-size:12px;
	font-weight:bold;
	text-align:right;
	text-transform:uppercase;
}
.flexteam .signature .wrap p {
	display:block;
	height:12px;
	font-size:11px;
	line-height:12px;
	margin:0;
	padding:0 9px 0 0;
	text-align:right;
}


/******************************************************
* Contenu flexible - Gris
*******************************************************/
.flexgris {
	background:#F0EFEF;
}
.flexgris .in {
	padding:7px 15px;
}
.flexgris .in p {
	margin:6px 0;
}

/******************************************************
* Contenu flexible - 2 colonnes
*******************************************************/
.flex2cols {
	width:100%;
}
.flex2cols .col1, .flex2cols .col2 {
	width: 50%;
	float: left;
	overflow:hidden;
}
.flex2cols .col1 .in {
	padding-right:10px;
}
.flex2cols .col2 .in {
	padding-left:10px;
}

.flex3cols {
	width:100%;
}
.flex3cols .col1, .flex3cols .col2, .flex3cols .col3 {
	width: 33%;
	float: left;
	overflow:hidden;
}
.flex3cols .col1 .in {
	padding-right:10px;
}
.flex3cols .col2 .in {
	padding-left:10px;
	padding-right:10px;
}
.flex3cols .col3 .in {
	padding-left:10px;
}


/******************************************************
* Mooscroll
*******************************************************/
.scrollControlsY{
	display:block;
	position: absolute;
	top:0;
	right:0;
	height:100%;
	width:15px;
}

.upBtn{
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:15px;
	height:15px;
	background: url(../images/upBtn.gif) no-repeat 0 0;
	cursor:pointer;
}

.upBtn:hover{
	background: url(../images/upBtn.gif) no-repeat 0 -15px;
}

.upBtn-Active, .upBtn-Active:hover{
	background: url(../images/upBtn.gif) no-repeat 0 -30px;
}

.downBtn{
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	width:15px;
	height:15px;
	background: url(../images/downBtn.gif) no-repeat 0 -30px;
	cursor:pointer;
}

.downBtn:hover{
	background: url(../images/downBtn.gif) no-repeat 0 -15px;
}

.downBtn-Active, .downBtn-Active:hover{
	background: url(../images/downBtn.gif) no-repeat 0 0;
}

.scrollBar{
	display:block;
	position: absolute;
	top:15px;
	right:0;
	bottom:15px;
	width:15px;
	background: url(../images/scrollBar.gif) repeat-y center top;
}

.scrollHandle{
	display:block;
	position:absolute;
	top:0px;
	right:0;
	width:15px;
	height:35px;
	min-height:13px;
	cursor: pointer;
	padding:11px 0;
}

.scrollHandleBG{
	display:block;
	position: relative;
	height:100%;
	width:15px;
	background: url(../images/scrollHandleBG.gif) repeat-y 0 0 ;
}

.scrollHandle .scrollHandleBG:hover, .scrollHandle:hover .scrollHandleBG{
	background: url(../images/scrollHandleBG.gif) repeat-y -15px 0;
}

.scrollHandle-Active .scrollHandleBG:hover, .scrollHandle-Active:hover .scrollHandleBG, .scrollHandle-Active .scrollHandleBG{
	background: url(../images/scrollHandleBG.gif) repeat-y -30px 0;
}

.scrollHandleMiddle{
	display:block;
	position: absolute;
	width:15px;
	height:13px;
	background: url(../images/scrollHandleMiddle.gif) no-repeat 0 0  ;
	top:50%;
	margin:-5px 0 0 0;
}

.scrollHandle .scrollHandleMiddle:hover, .scrollHandle:hover .scrollHandleMiddle{
}

.scrollHandle-Active .scrollHandleMiddle:hover, .scrollHandle-Active:hover .scrollHandleMiddle, .scrollHandle-Active .scrollHandleMiddle{
}

.scrollHandleTop{
	display:block;
	position:absolute;
	width:15px;
	height:11px;
	background: url(../images/scrollHandleTop.gif) no-repeat 0 0;
	top:0;
	margin:0 0 0 0;
}

.scrollHandle .scrollHandleTop:hover, .scrollHandle:hover .scrollHandleTop{
	background: url(../images/scrollHandleTop.gif) no-repeat -15px 0;
}

.scrollHandle-Active .scrollHandleTop:hover, .scrollHandle-Active:hover .scrollHandleTop, .scrollHandle-Active .scrollHandleTop{
	background: url(../images/scrollHandleTop.gif) no-repeat -30px 0;
}

.scrollHandleBottom{
	display:block;
	position:absolute;
	width:15px;
	height:11px;
	background: url(../images/scrollHandleBottom.gif) no-repeat -30px 0 ;
	bottom:0;
	margin:0 0 0 0;
}

.scrollHandle .scrollHandleBottom:hover, .scrollHandle:hover .scrollHandleBottom{
	background: url(../images/scrollHandleBottom.gif) no-repeat -15px 0;
}

.scrollHandle-Active .scrollHandleBottom:hover, .scrollHandle-Active:hover .scrollHandleBottom, .scrollHandle-Active .scrollHandleBottom{
	background: url(../images/scrollHandleBottom.gif) no-repeat 0 0 ;
}