body 
{
    margin:10px auto;
    padding:0px;
     width: 967px; 
    text-align:center;
    font-family: Arial, helvetica, sans-serif;
    font-size:90%;
    background-color:#141F1F;
    min-height:967px;
    height:auto;
}


#container
{
	margin-bottom: 20px auto;
    margin-top: 0px auto;
    min-height:967px;
    height:auto;
	background: -webkit-linear-gradient(0deg, #E8F2FA, #E6F0FA); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(0deg, #E8F2FA, #E6F0FA); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(0deg, #E8F2FA, #E6F0FA); /* For Firefox 3.6 to 15 */
    background: linear-gradient(0deg, #E8F2FA, #E6F0FA); /* Standard syntax (must be last) */
	border:1px solid lightgray;
	text-align:left;
    overflow:auto;
    position:relative;
}

#container::-webkit-scrollbar
{ 
    display: none; 
}

#titre 
{
    width: 60%; 
    top: 0; 
    left: 20%; 
    height:193.4px;
    min-height: 193.4px; 
    font-size: 80%; 
    position:absolute;
    overflow: hidden;
}

#nameTitle 
{
    width: 100%; 
    top: 13%; 
    left: 0; 
    background: -webkit-linear-gradient(left top, #4DDBFF, #005266); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #4DDBFF, #005266); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #4DDBFF, #005266); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #4DDBFF, #005266); /* Standard syntax (must be last) */
    color: white;
    height:43%;
    font-size: 90%; 
    position:absolute;
    overflow: hidden;
}

#mainMenu 
{
    width: 99%;
    position: absolute;
    top:7px;
    left: 0;
    height: auto;
}

#leftBar 
{
    width: 20%;
    position: absolute;
    top: 198.4px;
    left: 0;
    min-height: 637px;
    height: auto;
}

#pubs 
{
    width: 20%; 
    position: absolute; 
    top: 198.4px; 
    left: 80%; 
    min-height: 70%; 
    height: auto;
     
}

#pub1 
{
    margin: 5px;
    padding:10px;
    width: 80%; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 200px; 
    background-color: #F5FBFF;  
    overflow: hidden;
    text-align:center;
    border-radius:20px;
    border:5px solid #19A3FF;
    box-shadow:3px 7px 3px 0px #4D4F52;
}

#pub2 
{
    margin: 10px;
    padding:10px;
    width: 80%; 
    position: absolute; 
    top: 250px; 
    left: 0%; 
    height: 200px; 
    background-color: #E6F0FA;  
    overflow: hidden;
    text-align:center;
    border-radius:20px;
    border:0px solid lightgray;
}

#pub2Legends 
{
    margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    height: 0%; 
    overflow: hidden;
}


#announcement 
{
    margin: 0;
    padding:8px;
    width: 100%; 
    position: absolute; 
    top: 65%; 
    left: 20%; 
    height: 10%; 
    left: 20%; 
    background-color: white;  
    overflow: hidden;
    text-align:left;
    font-size:150%;
    color:black;
    font-weight:100; 
}

#announcementPatch 
{
    margin: 0;
    padding:8px;
    width: 20%; 
    position: absolute; 
    top: 65%; 
    left: 0%; 
    height: 10%; 
    background-color: white;  
    overflow: hidden;
}

#myWorksRightArrow 
{
    margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 67%; 
    left: 15%; 
    height: 0%;  
    line-height: 0; 
    border-top: 13px solid white;
    border-bottom: 13px solid white;
    border-left: 25px solid red;
    border-right: none;
}

#myWorksLeftArrow 
{
    margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 67%; 
    left: 0%; 
    height: 0%; 
    line-height: 0; 
    border-top: 13px solid lightblue;
    border-bottom: 13px solid lightblue;
    border-left: none;
    border-right: 17px solid lightblue;
}

#touristicPicturesRightArrow 
{
    margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 32%; 
    left: 80%; 
    height: 5%;   
    line-height: 0; 
    border-top: 12px solid  #66A3E0;
    border-bottom: 12px solid  #5C93CA;
    border-left: 24px solid white;
    border-right: none;
}


#myWorksText 
{
    margin: 0;
    padding:0px;
    width: 10%; 
    position:absolute; 
    top: 67.45%; 
    left: 5%; 
    height: 13%; 
    background-color: red;  
    overflow: visible;
    text-align:center;
    font-size:75%;
    color:white;
    font-weight:bolder;
    /*border-right: 1px solid lightblue;*/
    display: table-cell;
    vertical-align: middle;
}

#rightArrowDiaporama
{
    margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 32%; 
    left: 50%; 
    height: 0%;  
    line-height: 0; 
    border-top: 12px solid #66A3E0;
    border-bottom: 12px solid #5C93CA;
    border-left: 24px solid white;
    border-right: none;
}

#rightArrowSeparator 
{
    margin: 0;
    padding:0;
    width: 0;    
    height: 0%; 
    top: 15%; 
    line-height: 0; 
    position:absolute;
    border-top: 5px solid #333B54;
    border-bottom: 5px solid #333B54;
    border-left: 10px solid red;
    border-right: none;
    vertical-align:middle;
}

#separator 
{
    width: 63.6%; 
    top: 198.4px; 
    left: 18%; 
    height:20px; 
    background-color: #333B54; 
    position:absolute;
    overflow: hidden;
    font-size: 75%;
    font-weight: 900;
    color: red;
    padding-left:5px;
}

#separator a 
{
    text-decoration:none;
    color: red;
}

#shadowRubanLeft
{
    margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 218.4px; 
    left: 18%; 
    height: 0%;  
    line-height: 0; 
    border-top: 5px solid #000A29;
    border-bottom: 5px solid #EEF4FC;
    border-left: 10px solid #EEF4FC;
    border-right: 10px solid #000A29;
}

#welcomeDecorator
{
    margin: 0;
    padding:0;
    width: 0%; 
    position: absolute; 
    top: 87%;
    left: 91.4%; 
    height: 0%;  
    line-height: 0; 
    border-top: 20px solid #000A29;
    border-bottom: 20px solid #E8F2FA;
    border-left: 20px solid #000A29;
    border-right: 20px solid #E8F2FA;
}

#welcomeDecoratorShadow
{
    margin: 0;
    padding:0;
    width: 0%; 
    position: absolute; 
    top: 87%; 
    left: 83%; 
    height: 0%;  
    line-height: 0; 
    border-top: 20px solid #337585;
    border-bottom: 20px solid #295E6A;
    border-left: 20px solid #337585;
    border-right: 20px solid #295E6A;
}

#coloringPatchLeft 
{
    width: 20%; 
    top: 193.4px; 
    left: 0%; 
    height:40px; 
    background-color: white; 
    position:absolute;
}

#coloringPatchRight 
{
    width: 20%; 
    top: 193.4px; 
    left: 80%; 
    height:40px; 
    background-color: white; 
    position:absolute;
}

#shadowRubanRight
{
    margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 218.4px; 
    left: 80%; 
    height: 0%;  
    line-height: 0; 
    border-top: 5px solid #000A29;
    border-bottom: 5px solid #EEF4FC;
    border-left: 10px solid #000A29;
    border-right: 10px solid #EEF4FC;
}

#verticalDiaporamaColor
{
     margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 32%; 
    left: 47%; 
    height: 0%;  
    line-height: 0; 
    border-top: 12px solid white;
    border-bottom: 12px solid white;
    border-left: 5px solid white;
    border-right: 5px solid white;
}

#touristicPicturesLeftArrow 
{
    margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 32%; 
    left: 15%; 
    height: 5%; 
    line-height: 0; 
    border-top: 12px solid  #66A3E0;
    border-bottom: 12px solid  #5C93CA;
    border-left: none;
    border-right: 24px solid white;
}

#verticalDiaporamaBackgroundColor
{
     margin: 0;
    padding:0;
    width: 0; 
    position: absolute; 
    top: 32%; 
    left: 49%; 
    height: 0%;  
    line-height: 0; 
    border-top: 12px solid #66A3E0;
    border-bottom: 12px solid #5C93CA;
    border-left: 0px solid #5C93CA;
    border-right: 0px solid #5C93CA;
}

#page 
{
    width: 56%; 
    position:absolute; 
    top: 198.4px; 
    left: 20%; 
    min-height: 70%;
    height: auto; 
    padding: 20px;
    overflow: hidden;
}

#pied 
{
    width: 100%; 
    position: absolute; 
    top: 80%; 
    left: 0; 
    height: 10%;  
    overflow: auto; 
    font-size: 70%;
    color:#FFFFFF;
    font:900;
    background: -webkit-linear-gradient(left top, #005266, #4DDBFF); /* For Safari 5.1 to 6.0 */
    background: -o-linea
        r-gradient(bottom right, #005266, #4DDBFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #005266, #4DDBFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #005266, #4DDBFF); /* Standard syntax (must be last) */
}

#titre, #pied 
{
    text-align: center; 
    vertical-align:middle;
}

#booksAndMoviesIllustrationTable 
{
    /*border:thin solid gray;*/
    border-collapse:separate;
    color: black;
}

#booksAndMoviesIllustrationTable th, #booksAndMoviesIllustrationTable td 
{
    /*border:thin solid gray;*/
    text-align:center;
    background-color: #F5FBFF;
    vertical-align:top;
}

#booksAndMoviesIllustrationTable a
{
    color: #000A29;
}


#booksAndMoviesIllustrationTable a:hover
{
    color: #FF0000;
}

#booksTable 
{
    border:1px solid black;
    border-collapse:collapse;
    width: 90%; 
    position: absolute; 
    top: 120px; 
    left: 5%; 
    height: 1500px;  
    color: black;
}

#booksTable th, #booksTable td 
{
    border:1px solid black;
    text-align:center;
}

#moviesTable 
{
    border:1px solid black;
    border-collapse:collapse;
    width: 90%; 
    position: absolute; 
    top: 120px; 
    left: 5%; 
    height: 500px;  
    color: black;
}

#moviesTable th, #moviesTable td 
{
    border:1px solid black;
    text-align:center;
}

#CVTablePro td
{
    vertical-align:text-top;
    /*border:0px solid black;*/
    /*border-collapse:collapse;*/
}

#CVTable td
{
    vertical-align:text-top;
    /*border:0px solid black;*/
    /*border-collapse:collapse;*/
}

table#CVTableQual th
{
    width: 85px;
}


#linksTable   
{
    border:1px solid black;
    border-collapse: collapse;
    width: 80%; 
    position: absolute; 
    top: 10%; 
    left: 10%;
    height: 500px; 
    /*background-color: white;*/
   /*color: black;*/ 
}

#linksTable th, #linksTable td 
{
    border:1px solid black;
    text-align:center;
}

#cameroonIllustrationTable 
{
    /*border:thin solid gray;*/
    border-collapse:separate;
    color: black;
}

#cameroonIllustrationTable th, #cameroonIllustrationTable td 
{
    /*border:thin solid gray;*/
    text-align:center;
    background-color: #F5FBFF;
    vertical-align:top;
}

#cameroonIllustrationTable a
{
    color: #000A29;
}


#cameroonIllustrationTable a:hover
{
    color: #FF0000;
}

#musicTable 
{
    /*border:thin solid gray;*/
    border-collapse:separate;
    color: black;
}

#musicTable th, #musicTable td 
{
    /*border:thin solid gray;*/
    text-align:center;
    background-color: #F5FBFF;
    vertical-align:top;
}

#musicTable a
{
    color: #000A29;
}


#musicTable a:hover
{
    color: #FF0000;
}

#whiteCercle 
{
    padding: 0px; 
    background: #FFFFFF;
    width: 0px;
    font-size:0;
    line-height:0;
    border-radius: 25px;
    border: 3px solid #FFFFFF;
    vertical-align:middle;
}

#menuPrincipal
{
    list-style-type:none; /* On enlève la puce */ 
    margin: 0; /* On retire les marges intérieures et extérieures */
    padding:1px; 
    width:  98%;  /* J'ai mis une largeur pour ne pas prendre toute la largeur de l'écran */
    border : solid 1px grey;  /* On applique des bordures à la balise ul */
    border-bottom: none; /* …et on retire celle du bas */
    text-align:left;
}

#menuPrincipal li
{
    margin: 0; /* On retire les marges intérieures et extérieures */
    padding: 1px; 
    border-bottom: 1px solid grey;  /* Ici, on affiche une bordure uniquement en bas */
}

#menuPrincipal a
{
    text-decoration:none;  /* On enlève le soulignement */
    color:purple; 
    display:block;   /* C'est ici qu'il faut bien comprendre (j'explique plus bas) */
    padding-left:1.5em;  /* Une marge intérieure gauche juste pour l'esthétique */
}
/*Explication : display:block

J'en reviens à la seconde difficulté : élément bloc, élément en ligne. 
Le souci ici est que a est un élément en ligne. Si donc je lui applique 
un fond qui s'affiche au survol, ce fond n'encadrera que l'espace
nécessaire au texte du lien. Les éléments en ligne n'ont pas de dimensions propres
*/

#menuPrincipal a:hover
{
    background-color:orange; 
    color:purple; 
}

#menuSecondaire 
{
    list-style-type:circle;  /*On enlève la puce  */
    border : none;
    border-top: none;
    border-bottom: 1px solid grey; /* …et on retire celle du bas */
    
}

/*#menuSecondaire li 
{
    border :  none;
    border-left : none;
    border-right : none;
    border-bottom: none;
    
}*/

#menuSecondaire a
{
    display:block;   /* C'est ici qu'il faut bien comprendre (j'explique plus bas) */
}


#submitButtonRegister 
{
    margin: 10px;
    padding: 5px;
    width:35%;
    font-size: 150%;
    color:#FFFFFF;
    border:hidden;
    font:900;
    background: -webkit-linear-gradient(left top, #005266, #4DDBFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #005266, #4DDBFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #005266, #4DDBFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #005266, #4DDBFF); /* Standard syntax (must be last) */
}

#submitButtonSignIn 
{
    margin: 10px;
    padding: 5px;
    width:35%;
    font-size: 150%;
    color:#FFFFFF;
    border:hidden;
    font:900;
    background: -webkit-linear-gradient(left top, #005266, #4DDBFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #005266, #4DDBFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #005266, #4DDBFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #005266, #4DDBFF); /* Standard syntax (must be last) */
}

#postCommentButton 
{
    margin: 10px;
    padding: 5px;
    width:35%;
    font-size: 150%;
    color:#FFFFFF;
    border:hidden;
    font:900;
    background: -webkit-linear-gradient(left top, #005266, #4DDBFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #005266, #4DDBFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #005266, #4DDBFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #005266, #4DDBFF); /* Standard syntax (must be last) */
}

#postCommentButton:hover 
{
    background:#004252;
}


#submitButtonRegister:hover 
{
    background:#004252;
}

#submitButtonSignIn:hover 
{
    background:#004252;
}

#buttonWrapper 
{
    text-align:center;
}

#logInLogOutID 
{
    margin: 0px;
    padding-top: 2px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 1px;
    width:35%;
    font-size: x-small;
    color:#FFFFFF;
    border:hidden;
    font:900;
    background: #000066;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    vertical-align: middle;
    text-decoration: none
}

#logInLogOutID:hover 
{
    color: #000066;
    background:#CCE0F5;
}

#registForum 
{
    margin: 0px;
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 1px;
    width:35%;
    font-size: x-small;
    color:#FFFFFF;
    border:hidden;
    font:900;
    background: #000066;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    vertical-align: middle;
    text-decoration: none
}

#registForum:hover 
{
    color: #000066;
    background:#CCE0F5;
}

#showWindow
{
    clear:both; 
    width:520px; 
    height:550px; 
    background:#131310; 
    overflow:hidden; 
    position:relative;
    margin:10px auto 10px auto;
    float:left; 
    display:inline;
    padding:0;
}
 
#slideshow
{
    width:1560px; 
    height:1650px; 
    overflow:hidden; 
    position:relative;
    float:left; 
    display:inline;
    padding:0;
    margin:0;
}
    
#slideshow li
{
    width:520px; 
    height:550px;
    float:left; 
    display:inline;
}

#chevronLeft {
  position: absolute;
  top: 15px;
  left:10px;
  text-align: center;
  padding: 2px;
  /*margin-bottom: 4px;*/
  height: 8px;
  width: 15px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

#chevronLeft:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: white;
  -webkit-transform: skew(0deg, 45deg);
  -moz-transform: skew(0deg, 45deg);
  -ms-transform: skew(0deg, 45deg);
  -o-transform: skew(0deg, 45deg);
  transform: skew(0deg, 45deg);
}

#chevronLeft:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: white;
  -webkit-transform: skew(0deg, -45deg);
  -moz-transform: skew(0deg, -45deg);
  -ms-transform: skew(0deg, -45deg);
  -o-transform: skew(0deg, -45deg);
  transform: skew(0deg, -45deg);
}

#chevronRight {
  position: absolute;
  top: 15px;
  right:10px;
  text-align: center;
  padding: 2px;
  /*margin-bottom: 4px;*/
  height: 8px;
  width: 15px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#chevronRight:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: white;
  -webkit-transform: skew(0deg, 45deg);
  -moz-transform: skew(0deg, 45deg);
  -ms-transform: skew(0deg, 45deg);
  -o-transform: skew(0deg, 45deg);
  transform: skew(0deg, 45deg);
}

#chevronRight:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: white;
  -webkit-transform: skew(0deg, -45deg);
  -moz-transform: skew(0deg, -45deg);
  -ms-transform: skew(0deg, -45deg);
  -o-transform: skew(0deg, -45deg);
  transform: skew(0deg, -45deg);
}

#_play {
  position: absolute;
  top: 10px;
  left:10px;
  border-top:10px solid transparent;
  border-left:20px solid white;
  border-bottom:10px solid transparent;
  visibility:hidden;
}

#pauseLeft {
  position: absolute;
  top: 10px;
  left:10px;
  height: 20px;
  border-left:9px solid white;
  visibility:visible;
}

#pauseMid {
  position: absolute;
  top: 10px;
  left:19px;
  height: 20px;
  border-left:2px solid transparent;
  visibility:visible;
}

#pauseRight {
  position: absolute;
  top: 10px;
  left:21px;
  height: 20px;
  border-left:9px solid white;
  visibility:visible;
}

#chevronLeftWrapper 
{
    position: absolute;
    top: 215px;
    left: 10px;
    height: 40px;
    width: 40px;
    background: #18191A;
    border-radius: 5px;
}

#chevronRightWrapper 
{
    position: absolute;
    top: 215px;
    right: 10px;
    height: 40px;
    width: 40px;
    background: #18191A;
    border-radius: 5px;
}

#chevronMidWrapper 
{
    position: absolute;
    top: 215px;
    left:260px;
    height: 40px;
    width: 40px;
    background: #18191A;
    border-radius: 5px;
}