/**********************************/
/********** CSS général ***********/
/**********************************/
body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size:14px;
margin:auto;
width:800px;
}
ul, p {
  margin:0;
  padding:0;
}
img {
  border:0;
}
a {
  color:#000;
  text-decoration:none;
}
a:hover, a:hover * {
  opacity:0.7;
}
a:focus {
	 outline:none;
}
.blue {
  color:#0070C0;
  background-color:transparent;
  line-height:37px;
}
.red {
  color:#ff0000;
  background-color:transparent;
  line-height:37px;
}
.green {
  color:#003300;
  background-color:transparent;
  line-height:37px;
}
.gray {
  color:#777777;
  background-color:transparent;
  line-height:37px;
}
.lineNarrow {
  line-height:20px;
}
.bold {
  font-weight: bold;
}
.nobold {
  font-weight: normal;
}
.fontBig {
  font-size:18px;
}
.titleGreen {
   width:800px;
   height:33px;
   line-height:33px;
   background:transparent url(../images/bandeau-titre-vert.jpg) top left no-repeat;
   text-align:center;
   color:#FFF;
   text-transform:uppercase;
}
.titleGray {
   width:800px;
   height:33px;
   line-height:33px;
   background:transparent url(../images/bandeau-titre-gris.jpg) top left no-repeat;
   text-align:center;
   color:#FFF;
   text-transform:uppercase;
}
#pageContent p.noPadding,
p.noPadding,
.noPadding {
  padding:0;
}
/* ----------------------------------------------------------------------------$
Styles simples et génériques pour éléments de formulaire
-------------------------------------------------------------------------------$*/
.Input
{
  width: 250px;
}
.smallInput
{
  width: 70px !important;
}
.mediumInput
{
  width: 270px !important;
}
.smalltd
{
  width: 85px;
}
.clearer,
.clear
{
  clear:both;
}
input.Checkbox
{
  width: 15px !important;
  height: 15px !important;
}
textarea
{
  width: 85px;
  height: 85px;
}
div.lineForm
{
  margin: 15px 5px;
}
div.lineForm label
{
  display: inline;
  float: left;
  width: 200px;
  text-align: left;
}


/**********************************/
/******** CSS de la page **********/
/**********************************/
#myBody {
/* width:800px; */
/* margin:auto; */
background-color:#FFF;
border:1px solid #9D9D9D;
}

/**********************************/
/********* Menu du haut ***********/
/**********************************/
#menu {
	background:transparent url('../images/backgrounds/menu.jpg') top left no-repeat;
	height:132px;
	padding-left:128px;
	list-style:none;
}

#menu li {
	float:left;
	height:100%;
}

#menu li a{
	display:block;
	height:95%;
	text-decoration:none;
  width:130px;
}

#menu li a span{
	visibility:hidden;
}

#menu li#accueil a{
	width:127px;
}

#menu li#modules a{
	width:146px;
}

#menu li#dossiers a{
	width:134px;
}

#menu li#confidentialite a{
	width:122px;
}

#logo {
	display:block;
	height:55px;
	width:232px;
	margin:auto;
}


/**********************************/
/********* Menu du bas ***********/
/**********************************/
ul#footerMenu {
}
ul#footerMenu li {
  float:left;
  list-style:none;
  margin-right:20px;
}
ul#footerMenu li a {
  font-size:12px;
  font-weight:bold;
}
/**********************************/
/*********** Homepage *************/
/**********************************/
.teaser {
  margin:0 auto;
  min-height:100px;
  padding:30px 30px 0 30px;
}
.teaser img {
  float:left;
  margin:10px;
}
.teaser span {
  line-height:20px;
  display:block;
}
span.h3like {
  font-size:20px;
  font-weight:bold;
  display:block;
  line-height:50px;
}
h3 {
  color: #00c400;
  background-color:transparent;
}
.teaser ul {
  padding:0 30px;
  font-size:14px;
}
.teaser ul li {
  list-style-type: none;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
#pageContent {
  margin: 50px auto;
/*   font-size: 18px; */
  padding: 0 40px;
}
#pageContent p {
  padding: 0 40px;
  margin-top: 15px;
}
.numParagraphe {
  font-size:22px;
  float:left;
  display:inline;
  height:37px;
  width:39px;
  background: transparent url(/images/backgrounds/bulle-num-question.jpg) no-repeat;
  color:#FFF;
  text-align:center;
  line-height:37px;
}
.libelle {
  color:#0070C0;
  background-color:transparent;
  line-height:37px;
}
.quotation {
  font-style: italic;
}
.highlight {
/*   color: #eeece1; */
  background-color: transparent;
  text-align: center;
}
#pageContent p.Important {
  padding:0 145px;
}
.launchQuizz {
  display: block;
  width: 760px;
  height: 46px;
  line-height: 46px;
  color:#1f497d;
  background:transparent url(/images/launchQuizz.png) no-repeat center center;
  text-align:center;
  font-weight: bold;
}


/**********************************/
/*********** Questions ************/
/**********************************/
.moduleChoice {
  float:left;
  width: 258px;
/*   height: 250px; */
  text-align:center;
  margin-top: 40px;
}
.moduleChoice span {
  margin: 0 auto;
  color: #fff;
  background-color: #777777;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
  display: block;
  width: 176px; /* cf border sur limage */
}
.moduleChoice img {
  margin: 0;
  border:3px solid #777777;
  width:170px;
  height:140px;
}
.nextPage, 
.nextStep {
  background:transparent url(/images/next1.png) no-repeat top right;
  color:#0070C0;
  display:block;
/*   float:right; */
  font-weight:bold;
  padding-right:109px;
}
.nextPage {
  line-height:64px;
  height:64px;
  width:240px;
  float:right;
  padding-right:0;
}
.nextStep {
  background-image:url(/images/next2.png);
  padding-right:42px;
  height: 41px;
  line-height:41px;
  position:absolute;
  bottom:0;
  right:0;
}
.moreInfos {
  position:absolute;
  bottom:0;
  left:50px;
  height: 41px;
  line-height:41px;
}
#questionBody,
#pageBody {
  position:relative;
  /*position:absolute;*/
  margin-top:6px;
  /*width:800px;*/
  min-height:400px;
  margin-right:10px;
  margin-left:10px;
}
#questionBody {
  color:#7f7f7f;
  background-color:#D9D9D9;
}
#questionBody img {
 /* height:460px;*/
  float:left;
 /* width:450px;*/
  background-color:#d9d9d9;
  position:absolute;
}
#MultiBoxContentContainer {
  height:460px;
  width:auto;
}
#savoirPlusContent {
  font-size:18px;
}
#savoirPlusContent p {
  padding-left:20px;
  padding-right:20px;
}
.savoir_plus {
  padding:20px;
}
.savoir_plus img {
  float:left;
  background-color:#d9d9d9;
  margin-right: 40px;
}
.savoir_plus span.header {
  padding:10px;
  margin:0;
  color:#fff;
  background-color:#bfbfbf;
  font-weight:bold;
  font-size:18px;
  margin: 0 20px;
}
.savoir_plus p {
  line-height:22px;
}
#questionBody span {
  margin-left:37px;
  padding:20px 30px;
  display:block;
  font-size:18px;
}
#questionContainer {
  background:#FFF url(/images/bg1.png) top left repeat-y ;
  margin-left:405px;
/*   position:relative; */
  height:405px;
  position:relative !important;
}
#questionContainer form p {
  padding:0 30px;
  font-size:24px;
}
#questionContainer form span {
  padding:0;
}
#questionContainer #libelle {
  color:#0070C0;
  background-color:transparent;
  font-weight: bold;
}
#questionContainer #consigne {
  font-size:10px;
  width:200px;
  position:absolute;
  bottom:0;
  left:0;
  padding:0 30px;
  line-height:14px;
  font-style:italic;
  height:35px;
}
#questionBody span#numQuestion {
  margin:20px 0 0 20px;
  padding:5px 0;
  float:left;
  display:inline;
  height:37px;
  width:39px;
  background: transparent url(/images/backgrounds/bulle-num-question.jpg) no-repeat;
  color:#FFF;
  text-align:center;
}

#questionBody span#goodReponse {
  margin:0;
  padding:0;
  display:inline;
  font-size:12px;
  color:green;
  font-style:italic;
}
.noArrow {
  background:none;
  position:relative;
  padding:0;
  margin:0;
  display:inline;
  line-height:0;
}
span {
  line-height:24px;
}
/**********************************/
/******** Page de r�sultat ********/
/**********************************/
#result {
  float:left;
  width:100%;
/*    margin:auto; */
}
#result p {
   color:#5185A2;
   margin:10px 0;
}

.imgResult {
  float:left;
}
.spanResult {
   font-size:18px;
}
.pResult {
  float:left;
  line-height:48px;
  margin-left:10px;
}
.divResult {
  float:left;
  height:110px;
  line-height:110px;
  font-size:55px;
}
.divResult.good {
   background-color:#5185A2;
   color:#FFF;
   padding:0 45px;
   border:2px solid transparent;
}
.divResult.total {
   color:#00C400;
   border-top:2px solid #00C400;
   border-bottom:2px solid #00C400;
   border-right:2px solid #00C400;
   padding:0 15px;
}

/**********************************/
/******** Custom checkbox *********/
/**********************************/
.styled {
  display:none;
}
span.checkbox {
width: 38px;
height: 45px;
padding: 0 5px 0 0;
background: url(/images/checkbox.gif) no-repeat;
/* display: block; */
/* position:absolute; */
/*clear: left;*/
float: left;
}
span.result {
background: url(/images/checkboxResult.gif) no-repeat;
/* float: right; */
}

label.custom {
  line-height: 53px;

}
#questionContainer form span span {
margin:0;
padding:0;
}
#kesseTitle, #forcesTitle, #principeTitle {
  cursor: pointer;
} 

/*span.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(/images/radio.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.select {
position: absolute;
width: 158px; 
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(/images/select.gif) no-repeat;
overflow: hidden;
}*/

/*The XHTML

The script won't customize checkboxes, radio buttons or select lists unless you declare the styled class. Simply add class="styled" to any checkbox, radio button or option list and the JavaScript and CSS will take over from there.

   1. <input type="checkbox" name="a" checked="checked" class="styled" /> Sexy
   2. <input type="checkbox" name="b" class="styled" /> Boring
   3. <input type="radio" name="c" checked="checked" class="styled" /> Radical
   4. <input type="radio" name="c" class="styled" /> Poor
   5. <select name="d" class="styled">
   6.   <option value="1">Option 1</option>
   7.   <option value="2">Option 2</option>
   8.   <option value="3">Option 3</option>
   9.   <option value="4">Option 4</option>
  10. </select>*/