html{
	word-spacing: 3px;
	font-family: "Century Gothic","Trebuchet MS","Lucida Grande",Lucida, Calibri, Verdana, Arial, serif; /*toujours terminer par serif, autres options : "Times New Roman", Georiga ...*/
    /* "Century Gothic","Trebuchet MS","Lucida Grande",Lucida,Arial,sans-serif */
	/*background : url("./Joel/44.jpg") repeat scroll;*/
	padding:0px; /*marge intérieure nulle*/
}
body{
	width : 100%;
	margin: 0px; /*marge ext nulle*/
    padding:0px;
	background : url("./Joel/body.png") repeat-y center scroll;
}
/*************************************************************************************************************************/
#content-header{
	display:none;
	margin: 0px; /*marge ext nulle*/
    background : url("./Joel/ciel07.JPG") no-repeat scroll;
	width: 900px; 
	margin: auto;
	height : 200px; /*l'image affichée est paramètrable dans la balise html*/
	/*border-bottom: solid 1px #000000;*/
}
/*************************************************************************************************************************/
#perso{	
  background : scroll #000000;  
  height:165px; /*130 + 35*/
}
#perso a{
color:#ffffff;
text-decoration:none;
}
#topofthetop{
width: 1160px;/* 900 + 2x130 */
height:130px;
margin:auto;
}
#logo{
height:130px;
float:left;
}
#logo img{
width:130px;
height:130px;
}
#showcase{
width: 900px;
}
#jojo{
clear: both; /*enlève l'effet float du bloc supérieur*/
width: 1160px;/* 900 + 2x130 */
height:35px;
margin:auto;

}
#icones{
width:130px;
height:35px;
margin-right: 0px;
float:left;
/*display : inline;*/
}
#facebook, #twitter, #rss{
width:35px;
height:35px;
}
/* 	ANCIEN MENU : NE RIEN MODIFIER
#my-menu-1{
	text-decoration : none;
    color: #ffffff; 

	padding-top : 5px;
    padding-bottom : 5px;
    padding-left : 0px;
    
	width: 900px;
    margin :0px;
}
ul.menu{
  list-style: none; 
}
#my-menu-1 li{
	text-transform : uppercase;
    color: #ffffff; 
}
#ac{
margin-left : 5px;
}
#ap{
width:50px;
display:inline; 
}
.large{
 float:left;
 margin-right : 10px;
}
*/
.menu li a:visited{
color: #ffffff;
}

/*************************************************************************************************************************/
#content-body{
	clear: both;
	width: 890px; /*900*/
	background : #ffffff; /*#eeeeee*/
	
	padding : 5px; /*cela augmente aussi la taille du block : largeur totale = width + 2 x padding*/
	/*margin-left: 219px; /*219px c'est tout bon*/
	
	margin-top : 0px;
	margin-bottom : 0px;
	margin : auto;
    /*
	border-right: solid 1px #000000;
	border-left: solid 1px #000000;
    */
}
#content-footer{
	
    height : 100%;
	
    background : url("./Joel/footer.jpg") scroll repeat-x;

	font-size: 80%;
	
	margin-top: 0px;
	margin-bottom: 0px;	
	
	padding-top:5px;
    padding-bottom:5px;
}
.texte-footer{
    width :900px;
    margin:auto;
}
.browser{
    height:30px;
    width:30px;
}
h1{
	text-align: center; /* autres options : left, right, justify*/
	margin : auto;
	font-weight: bold; /* autre option : normal */
    width : 900px;
	/*font-transform: uppercase; autres options : lowercase, capitalize, none*/
}
a{
	text-decoration: underline; /*autres options : underline, overline,line through, blink, none*/
	color: #000000;
}
#content-body a:visited{
	color: #999999;
}
/* permet de gérer un changement de présentation du contenu d'une balise lorsque la souris passe dessus */
a:active/*hover (lorsqu'on passe la souris dessus), active (pour le moment du clic), focus (lorsque le lien est sélectionné), visited (lorsque le lien a déjà été visité)*/{
	background-color: #000000;
	color: #ffffff;	
}
a#up img{
	width:30px;
}
a#up:active{
	background : none;
}
a img /*les balises img se trouvant dans une balise a*/{
	border : none;
}
.flote{
	float: left;
}
.article{
	/*border : 2px solid #111111;*/
	border : 0 none;
	/*width : 95%;*/
	background : #eeeeee; /*#ffffff;*/
	/*height: 300px;
	text-align : justify;
	overflow: auto; /*permet de mettre une barre de défilement sur le coté, visible, hidden, scroll, auto*/
	padding: 5px; /* marge intérieure des blocks*/
	margin-top: 5px;  /*marge extérieure */
}

/* une classe que j'ai "inventée" et placée dans un balise unverselle <span> */
.lesson{
	font-size: 1.2em;	
}
.petit{
	height : 500px;
	
}
table{
	border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    
	width : 100%;
}
tr{
    border-bottom: 1px solid #000000;
}
.detail td{
	border : none;
}
.even {
  background-color:#9999FF;
}
.odd {
  background-color:#eeeeee;
}
.detail {
  display:none;
}
#mowdewiwe{
    display:none;
}
#linkedin img,#viadeo img{
    width:171px;
    height:50px;
}
/*************************************************************************************************************************/ 
/*
 * jQuery Nivo Slider v1.9
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}
/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height: 41px;
	/*width: 900px;*/
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 25px;/**/
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
    z-index: 9;
}
div#menu li:hover>ul {
    left: 0;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    color: #ffffff;
    
    border: 1px solid #ffffff;/*#171717;*/
    margin-top: 1px;
    border-bottom: none;
}
div#menu.ie6 a {
    border-color: #171717;
    filter: chroma(color=#171717);
}
div#menu li:hover>a {
    border: 1px solid #fff;
    border-bottom-color: #fff;/*#eee;*/
    background: #fff;/*#eee;*/
}
div#menu li:hover>a span {
    color: #000;/*#222;*/
}
div#menu a:hover {
    color: #000;/*#222;*/
    border: 1px solid #fff;
    border-bottom-color: #fff;/*#eee;*/
    background: #fff;/*#eee;*/
}
div#menu.js-active a:hover {
    border: 1px solid #ffffff; /*#171717;*/
    border-bottom-color: #fff;/*#eee;*/
    background: #fff;/*#eee;*/
}
div#menu.js-active a:hover span {
    color: #ffffff/*rgb(150,150,150);*/
}
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}
div#menu ul ul a.parent span {
    background-position: 95% 8px;
    background-image: url(images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(images/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 24px;
    height: 54px;
}
div#menu span {
    margin-top: 5px;
    color: #ffffff;/*rgb(150,150,150);*/
    /*font: normal 22px Helvetica, Arial, sans-serif;*/
}
div#menu li { }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li {
    background: none;
    padding: 0;
    border-bottom: 0;
}
div#menu ul ul li,
div#menu ul ul li a {
    z-index: auto;
}
div#menu ul ul li ul {
    z-index: 20;
}
div#menu ul ul {
    display: block;
    position: absolute;
    top: 55px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: #eee;
    border: 1px solid #fff;
    margin-top: 1px;
}
div#menu ul ul a {
    padding: 0;
    height: 30px;
    float: none;
    display: block;
    line-height: 26px;
    font-size: 18px;
    border: 0;
    z-index: -1;
    white-space: nowrap;
}
div#menu ul ul a span {
    font-size: 18px;
    line-height: 26px;
    color: #222;
}
div#menu ul ul li:hover>a {
    border: 0;
}
div#menu ul ul a:hover {
    border: 0;
    background: #fff;
}
div#menu ul ul a:hover span {
    color: #000;
}
div#menu ul ul span {
    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
    text-indent: 15px;
}

/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -54px 0 0 160px !important;
    margin-left: 160px;
}

/** menu::subtext */
div#menu span.subtext {
    display: block;
    font-size: 12px;
    color: #9ba1ac;
    line-height: 16px;
    margin: 0;
    padding: 0;
}
div#menu li:hover>a span.subtext {
    color: #9ba1ac;
}

/* lava lamp */
div#menu li.back {
    position: absolute;
    width: 10px;
    height: 57px;
    z-index: 8;
    margin-top: 1px;
}
div#menu li.back .left {
    height: 57px;
    border: 1px solid #fff;
    border-bottom: none;
    margin-right: 5px;
    background: #fff/*#eee;*/
}