/* RESET ###########################*/
p, h2{margin:0}
.clear{clear:both}
.flat{height:0; line-height: 0; margin:0; padding:0}
a{color:#ccc; text-decoration: none}
a:hover{color:#b90707}
a img{border:none}
ul{margin:0; padding:0}

/* LAYOUT ##########################*/
body{margin:0; padding:0; background:#000000; color:#cccccc; font-family: Georgia,'Times New Roman',times,serif; font-size:17px}

#header{width:1000px; height:420px; margin:0 auto; background:#000000 url(../images/hr.png) no-repeat bottom; position:relative}
#intro{width:1000px; padding:30px 0 50px 0; margin:0 auto; position:relative;}
#intro.grandir{height:826px; padding-bottom:0}
#rhetorique{background:#222222}
#rhetoriqueContenu{width:1000px; padding:66px 0 78px 0; margin:0 auto; position:relative}
#renaissance{width:1000px; margin:50px auto 0; background:#000000 url(../images/renaissance-bg.png) repeat-x top; position:relative}
#reference{width:1000px;  padding:80px 0 90px 0; margin:0 auto; position:relative}
#liensUtiles{width:1000px; padding:80px 0 90px 0; margin:0 auto; position:relative}
#coursAudio{width:1000px; padding:80px 0 90px 0; margin:0 auto; position:relative}
#coursGratuits{width:1000px; padding:80px 0 90px 0; margin:0 auto; position:relative; min-height: 350px}
#contact{background:#222222}
#contactContenu{width:650px; height:270px; padding:45px 0 20px 350px; margin:0 auto; position:relative}
#footer{width:1000px; padding-top:50px; height:76px; margin:0 auto; font-family:Arial; font-size:11px}

/* GENERAL*/
.backTop{position:absolute; bottom:25px; right:0px; color:#fff; font-size:12px; font-style: italic;}
.sep{background:#000000 url(../images/hr.png); height:29px; width:1000px; margin:0 auto}
ul.grise{list-style: none;}
ul.grise{width:620px; margin:0 0 0 30px; float:left}
ul.grise li{margin-bottom:20px; background:transparent url(../images/fleche-grise.png) no-repeat 0 3px; padding-left:30px}

/* HEADER */
#header img{float:left}
#header ul{float:left; width:200px; margin:155px 0 0 0; padding:0; color:#fff; font-size:16px; text-align:right; list-style:none}
#header li{border-top:1px solid #4d4d4d; padding:5px 0 5px 0}
#header li.last{border-bottom:1px solid #4d4d4d;}

/* INTRO */
#intro p{width:650px; margin-top:50px; float:left}
#introVisu{float:right; text-align: right; font-size:12px; color:#666; font-style: italic}
#arbreRhetorique{position:absolute; top:0; left:0; display:none}
#arbreRhetorique img{float:none;}
#fermer{position:absolute; bottom:11px; right:5px; display:none}

/*Q U'EST-CE QUE LA RHETORIQUE */
#rhetoriqueContenuTexte{width:650px}
#rhetoriqueContenuTexte, #rhetoriqueContenu img{float:left}
#rhetoriqueContenuTexte h2{background: transparent url(../images/qu-est-ce-que-la-rhetorique.png) no-repeat top left; text-indent:-9999px; width:453px; height:84px; margin:0 0 40px 0}
#rhetoriqueContenuTexte p{text-indent: -13px}
#rhetoriqueContenuTexte p em{font-size: 20px; color:#ffffff}

/* RENAISSANCE */
#renaissanceContenu, #renaissance img{float:left;}
#renaissanceContenu{width:651px}
#renaissanceContenu h2{background: transparent url(../images/renaissance-enseignement-rhetorique-ecole.png) no-repeat top left; text-indent:-9999px; width:471px; height:134px; margin:64px 0 34px 0}
#renaissanceText{margin:20px 20px 80px 0; display:none; font-size:16px}
#renaissanceText p{margin-bottom:10px; text-align: justify; text-indent:20px}

/* REFERENCE */
#referenceTitre{float:left; width:350px}
#referenceTitre h2{background: transparent url(../images/documents-reference.png) no-repeat top left; text-indent:-9999px; width:350px; height:90px; margin:0 0 25px 0}
#referenceTitre em{display:block; font-size:16px; background: transparent url(../images/pdf.png) no-repeat top left; padding:0 0 0 20px; margin:0 0 25px 0}

/* LIENS UTILES */
#liensUtilesTitre{float:left; width:350px;}
#liensUtilesTitre img{position:absolute; top:150px; left:0; z-index: -10}
#liensUtilesTitre h2{background: transparent url(../images/liens-utiles.png) no-repeat top left; text-indent:-9999px; width:350px; height:90px; margin:0}

/* COURS AUDIO */
#coursAudioTitre{float:left; width:350px;}
#coursAudioTitre img{position:absolute; top:130px; left:0; z-index: -10}
#coursAudioTitre h2{background: transparent url(../images/cours-audio.png) no-repeat top left; text-indent:-9999px; width:350px; height:90px; margin:0}
#coursAudio dl{margin:0; float:left; width:650px}
#coursAudio dt{margin:0 0 5px 0; background:transparent url(../images/fleche-grise.png) no-repeat 0 3px; padding-left:30px}
#coursAudio dd{margin:0 0 15px 0; padding-left:30px}

/* COURS GRATUIT */
#coursGratuitsTitre{float:left; width: 350px}
#coursGratuitsTitre img{position:absolute; top:140px; left:0; z-index: -10}
#coursGratuitsTitre h2{background: transparent url(../images/cours-gratuits.png) no-repeat top left; text-indent:-9999px; width:350px; height:90px; margin:0}
.contenuCoursGratuits{width:620px; margin:0 0 0 30px; float:left}
.flecheRouge{outline:none; background: transparent url(../images/fleche-rouge.png) no-repeat top left; background-position: 0 -60px; padding-left:30px; height: 40px; font-style:italic; font-size:16px; display: block;}
.on{background: transparent url(../images/fleche-rouge.png) no-repeat top left; color:#b90707; }
.coursGratuitsText{margin:0px 20px 80px 0; display:none; font-size:16px}
.coursGratuitsText p{margin-bottom:10px; text-align: justify; text-indent:20px}
.coursGratuitsText ul{margin-left: 15px}

/* CONTACT */
#contact h2{background: transparent url(../images/contact.png) no-repeat top left; text-indent:-9999px; width:500px; height:110px; margin:0 0 30px 0}
#contact p{padding-left:5px; line-height: 25px}
#contact img{position:absolute; top:28px; right:0;}

/* FOOTER */
#footer p.copy{float:left}
#footer p.griffe-kryzalid{float:right}

/*No Flash pour player audio*/
p.no-flash a{color:#b90707}
p.no-flash a:hover{text-decoration: underline}