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

* {margin: 0; padding: 0;}

html, body {height: 100%;}

body {background:url(../images/bg-accueil.jpg) top center no-repeat #000;}

img {border:0}

#menutop { height: 56px; background-color: #000; font-family: Arial, Helvetica, sans-serif;} 
#menutop-inner {width: 960px; margin: 0 auto; font-size: 16px; color: 930909; line-height: 56px; text-transform: uppercase; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
#menutop a { color: #00abc2; text-decoration: none; font-family: Arial, Helvetica, sans-serif;}
#menutop a:hover {color: #fff; font-family: Arial, Helvetica, sans-serif;}

#wrapper {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -252px; background: url(../images/bg-pagelayout.png) top center repeat-y;}

#header {width: 960px; height: 435px;}
#logo { width: 313px; height: 333px; float: left;}
#carousel { width: 647px; height: 333px; float: right;}

#container { width: 960px; margin: 0 auto;}
#corps { padding: 10px 40px 50px 40px; font-family: Arial, Helvetica, sans-serif;}

#colleft { width: 225px; float: left;}
#colright { width: 605px; float: right; padding-left: 40px;}

#colright .rightcol { width: 280px; float: left;}

#footer, #push { height: 252px;}
#footer { width: 960px; background-color: #000; margin: 0 auto;}
#footer .btn-footer { float: left; display: block; height: 80px; text-indent: -9999px;}
#footer #inscription { width: 481px; background:url(../images/footer-btn1.jpg) top left no-repeat;}
#footer #inscription:hover { background-position: -481px;}
#footer #membre { width: 479px; background:url(../images/footer-btn2.jpg) top left no-repeat;}
#footer #membre:hover { background-position: -479px;}

#footer #menubas { font: 14px Arial, Helvetica, sans-serif;}
#menubas a{ color: #fff; text-decoration: none;}
#menubas a:hover { color: #999;}
#menubas div {float: left; padding: 50px 50px 0 50px;}

#footer a#hq { background:url(../images/hq.png) no-repeat; width: 165px; height: 53px; display: block; float: left; text-indent: -9999px;}
#footer a#hq:hover { background-position: -165px;}

.clear { clear: both;}

#menutop, ul#topnav li.liSub a, ul#topnav li a, #breadcrumbs, h1, h2, .bouton, .content-item .annee, .formular label, #travail-bj td.num div, .formular .submit {font-family: Arial, Helvetica, sans-serif;}

/*********************** STANDARDS GLOBAUX **********************/

h1 { font-size: 28px; color: #0096c1; margin-bottom: 40px; text-transform: uppercase; font-weight: normal; line-height: 28px;}
h2 { font-size: 20px; color: #0096c1; margin-bottom: 8px; font-weight: normal;}

p { font: 13px Arial, Helvetica, sans-serif; color: #52585a; line-height: 18px; margin-bottom: 30px; text-align: justify;}

ul {font: 13px Arial, Helvetica, sans-serif; color: #52585a; line-height: 18px; margin-bottom: 30px; text-align: left; padding-left: 40px; list-style-image: url(../images/dot.gif);}

#colright a, #colleft a { color: #000; background-color: #d8faff; text-decoration: none;}
#colright a:hover, #colleft a:hover { color: #fff; background-color: #039bc0;}

.bouton { width: 280px; height: 40px; line-height: 40px; color: #000; background-color: #EAEAEA !important; display: block; float:left; text-decoration: none; text-align: center; margin-right: 20px; margin-bottom: 30px;}
.bouton:hover {background-color: #bfeaf1 !important; color: #000 !important;}

#breadcrumbs { text-transform: uppercase; font-size: 14px; color: #c2bfbf; margin-bottom: 30px;}
#breadcrumbs a { color: #c2bfbf; text-decoration: none;}
#breadcrumbs a:hover { color: #000;}

#bluesquare { width: 180px; background-color: #4db8d4; border: 6px solid #8cd1e3; padding: 20px; color: #fff; font-size: 14px;}
#bluesquare span { text-transform: uppercase; font-weight: bold;}
#bluesquare a { color: #fff; text-decoration: underline; background-color: transparent;}
#bluesquare a:hover { color: #fff; text-decoration: none; background-color: transparent;}

#contentbox {-moz-box-shadow: 0px 0px 5px #ccc; -webkit-box-shadow: 0px 0px 5px #ccc; box-shadow: 0px 0px 5px #ccc; border: 6px solid #98c9d7; background:url(../images/bg-contentbox.jpg) top left repeat-y #0096c1; color: #fff; font-size: 14px; padding: 15px; margin-bottom: 30px;}
#contentbox th { text-transform: uppercase; font-weight: bold; text-align: left; vertical-align: top; width: 130px; padding: 2px 6px;}
#contentbox td { padding: 2px 6px;}

/*********************** ACCUEIL **********************/

.triptique { width: 320px; float: left;}
.triptique img { padding: 8px; box-shadow:0px 0px 10px #d1d1d1; -moz-box-shadow:0px 0px 10px #d1d1d1; -webkit-box-shadow:0px 0px 10px #d1d1d1; margin-left: 28px;}
.triptique p { margin: 20px 30px 40px 30px; text-align: left;}

/*********************** CAROUSEL **********************/

#slideshow { margin: 0; position: relative;}
#nav { z-index: 50; position: absolute; bottom: 20px; left: 20px;}
#nav a { width: 20px; height: 20px; background:url(../images/carousel/nav1.png) no-repeat; display: block; float: left; text-indent: -9999px;}
#nav a.activeSlide { background-position: -20px;}
#nav a:focus { outline: none; }


/*********************** HISTORY SLIDER **********************/

#content-slider {
  width: 810px;
  height: 30px;
  margin: 10px 0 20px 30px;
  background:  url(../images/timeline/bar.gif) top right no-repeat;
  position: relative;
}

#content-slider a { background-color: transparent !important;}
#content-slider a:hover, #content-slider a:focus, #content-slider a:active { background-color: transparent !important; outline: 0;}

.ui-slider-handle {
  width: 52px;
  height: 30px;
  position: absolute;
  top: -6px;
  margin-left: -25px;
  background: url(../images/timeline/poignee.png) top left no-repeat;
}

.ui-slider-handle:hover { background-position: -52px; /* cursor:w-resize; */ cursor: pointer;}

#content-scroll {
  width: 870px;
  height: 560px;
  margin-top: 10px;
  overflow: hidden;
}

#content-holder {
  width: 9900px;
  height: 560px;
}

.content-item {
  width: 220px;
  height: 560px;
  padding: 0;
  float: left;
  background:url(../images/timeline/bg-item.gif) left repeat-y;
}

.content-item img { width: 220px; height: 216px;}
.content-item .annee { width: 220px; height: 25px; text-align: center; color: #fff; font-size: 21px; padding-top: 15px; background:url(../images/timeline/bg-annee.png) top left no-repeat; margin-top: -10px; position: relative; z-index: 99;}
.content-item p { font-size: 13px; line-height: 16px; text-align: left; padding: 10px;}

/*********************** GALERIE PHOTOS **********************/

.jcarousel-skin-tango .jcarousel-direction-rtl {
	direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 515px;
    padding: 20px 25px;
	margin: 0 0 30px 10px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  510px;
    height: 150px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 143px;
    height: 124px;
	background-color: #fff; 
	-moz-box-shadow: 0px 0px 5px #ccc;
	-webkit-box-shadow: 0px 0px 5px #ccc;
	box-shadow: 0px 0px 5px #ccc;
	padding: 6px;
}

.jcarousel-skin-tango .jcarousel-item:hover {
	-moz-box-shadow: 0px 0px 5px #00789a;
	-webkit-box-shadow: 0px 0px 5px #00789a;
	box-shadow: 0px 0px 5px #00789a;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
	margin: 8px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
	margin: 8px;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 76px;
    right: 0px;
    width: 25px;
    height: 40px;
    cursor: pointer;
    background: transparent url(../images/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 76px;
    left: 0px;
    width: 25px;
    height: 40px;
    cursor: pointer;
    background: transparent url(../images/prev-horizontal.png) no-repeat 0 0;
}


/*********************** MENU **********************/

#menu { width: 999px; height: 98px; margin-left: -20px; background: url(../images/bg-menu.png) top left no-repeat;}

ul#topnav {
	margin: 0; padding: 0;
	list-style: none;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative;
}

ul#topnav li.liSub a, ul#topnav li a {
	color: white;
	float: left;
	height: 79px;
	width: 333px;
	font-weight: bold;
	font-size: 22px;
	line-height: 79px;
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 200;
	cursor: default;
}

ul#topnav li.liSub a:hover, ul#topnav li a:hover { background-position: -333px;}

ul#topnav li .sub {
	position: absolute;	
	top: 79px; left: 28px;
	background:url(../images/bg-submenu.png);
	border-top: 6px solid #1e93a2;
	float: left;
	display: none;
	z-index: 1;
}

ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 278px;
	float: left;
}
ul#topnav .sub ul li {
	width: 100%;
	color: #fff;
	background: none;
}

ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0;
	background-image: none;
	height: 30px;
	width: 248px;
	padding: 3px 6px;
	margin: 0 10px;
	display: block;
	text-decoration: none;
	font-size:18px;
	font-weight: normal;
	text-align: left;
	text-transform: none;
	line-height:27px;
	cursor: pointer;
	border-bottom: 1px solid #7dd4e0;
}
ul#topnav .sub ul li a:hover {
	color: #aaf6ff;
	text-decoration: none;
}

span.dd_action {
	height:6px;
	width:9px;
}

span.single_wrapper {
	float:left;
}

span.single_wrapper:hover, li.current a span.single_wrapper {
	
	color: #a7f5ff;
}

span.single_wrapper:active {
		
	color: #a7f5ff;
}

span.dd_wrapper {
	background:url(../images/bg-mainmenu.jpg) top left no-repeat;
	cursor: default;
	width: 333px; height: 79px; display: block;
}

li.liSub a:hover span.dd_wrapper, li.liSub:hover a span.dd_wrapper {
	background-position: -333px;
	z-index:      100;
	color: #CCC;
}

/*********************** FORMULAIRES **********************/

form.formular {
	font-size: 13px;
	margin: 0 auto;
	width: 560px;
}

.formular label { font-size: 16px; font-weight: bold;}

.formular label span {
	color: #C00;
}

.formular input, .formular select, .formular textarea {
	display : block;
	margin-bottom: 5px;
}

.formular .radio {display: inline-block;}

.formular .text-input {
	font-family: Arial, Helvetica, sans-serif;
	color: #555;
	padding: 4px;
	border: 0;
	border-top: 1px solid #bfc1c2;
	border-left: 1px solid #bfc1c2;
	background-color: #eff2f3;
	font-size: 13px;
	margin-top: 4px;
	margin-bottom: 10px;
	width: 240px;
	
}

.formular .half-form { width: 250px;}

.formular .text-input:focus, .formular textarea:focus { background-color: #eafaff;}

.formular textarea {
	font-family:Arial, Helvetica, sans-serif;	
}
.formular .infos {
	background: #FFF;
	color: #333;
	font-size: 12px;
	padding: 10px;
	margin-bottom: 10px;
}

.formular span.checkbox, .formular .checkbox {
	display: inline;
}

.formular .submit {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	padding: 4px;
	margin-top: 20px;
	float: right;
	text-decoration: none;
	cursor:pointer;
	background-color: #006191;
	color: #fff;
	border: 0;
}

.formular .submit:hover { background-color: #009bbe;}

.formular hr {
	clear: both;
	visibility: hidden;
}

.formular .fc-error {
	width: 350px;
	color: 555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 12px;
	margin-bottom: 15px;
	background: #FFEAEA;
}

.formError {
	position:absolute;
	top:300px; left:300px;
	width:150px;
	padding-bottom:15px;
	display:block;
	z-index:5000;
}

.formError .formErrorContent {
	font-family: Arial, Helvetica, sans-serif;
	width:100%; 
	background:#c10000;
	color:#fff;
	font-size:10px;
	box-shadow: 0px 0px 6px #000;
	-moz-box-shadow: 0px 0px 6px #000;
	-webkit-box-shadow: 0px 0px 6px #000;
	padding:4px 10px 4px 10px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
.formError .formErrorArrow{
	position:absolute;
	bottom:0;left:20px;
	width:15px; height:15px;

}
.formError .formErrorArrow div{
	box-shadow: 0px 0px 6px #000;
	-moz-box-shadow: 0px 0px 6px #000;
	-webkit-box-shadow: 0px 0px 6px #000;
	font-size:0px; 
}

.formError .formErrorArrow .line10{width:15px;height:1px; background:#c10000;margin:0 auto; font-size:0px; display:block;} 
.formError .formErrorArrow .line9{width:13px;height:1px; background:#c10000;margin:0 auto;display:block;} 
.formError .formErrorArrow .line8{width:11px;height:1px; background:#c10000;margin:0 auto;display:block;} 
.formError .formErrorArrow .line7{width:9px;height:1px; background:#c10000;margin:0 auto;display:block;} 
.formError .formErrorArrow .line6{width:7px;height:1px; background:#c10000;margin:0 auto;display:block;} 
.formError .formErrorArrow .line5{width:5px;height:1px; background:#c10000;margin:0 auto;display:block;} 
.formError .formErrorArrow .line4{width:3px;height:1px; background:#c10000;margin:0 auto;display:block;} 
.formError .formErrorArrow .line3{width:1px;height:1px; background:#c10000;margin:0 auto;display:block;} 


#travail-bj { margin: 15px 0;}
#travail-bj th {}
#travail-bj td.num { width: 30px;}
#travail-bj td.num div { width: 25px; height: 25px; background-color: #4db8d4; line-height: 25px; color: #fff; text-align: center; font-size: 18px; margin-top: -6px;}
#travail-bj input.travail { width: 115px; margin-left: 8px;}



/*********************** TABS **********************/

.ui-tabs { position: relative; padding: 0; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { font-size: 13px; float: left; padding: 2px 5px; text-decoration: none; font-weight: bold;}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: default; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important;}

#tabs div {} 
#tabs div ul { padding-left: 10px; margin-top: 20px;}