body { margin:0; padding:0; font-family: Verdana, Arial, sans-serif; }
a { color:#0054a6; }

.content { width:990px; margin:0 auto; padding:40px; }
.content.int { padding:0px; }
#header .content { padding-bottom:0; }

#header { background:url('images/bg-top.png') center top repeat-x; height:221px; z-index:100; position:relative; }
#header .logo { float:left; border:0; }
#header .accroche { background:url('images/artop.png') left top no-repeat; float:left; padding-left:60px; color:#8f8f90; font-size:15px; margin-left:20px; letter-spacing:0.5px; }
#header .accroche span {  font-family: 'CoolCrayon'; color:#ff0007; text-transform:uppercase; font-size:20px; letter-spacing:0.5px;  }
#header #menu { font-family: 'CoolCrayon'; color:#fff; text-transform:uppercase; font-size:14px; /* letter-spacing:0.1em; AVEC EN */ letter-spacing:0.2em; margin-top:32px;}
#header #menu div { display:inline; position:relative; }
#header #menu a { color:#fff; text-decoration:none; padding:10px 2px; /* padding:10px 6px; */}
#header #menu a:hover, #header #menu a.on { color:#ff0007; background:url('images/menu-o.png') center bottom no-repeat; z-index:100; }
#header #menu span.menu2 { color:#898989; font-family: Verdana, Arial, sans-serif; }
#header #menu span.menu2 a { color:#898989; }
#header #menu span.menu2 a:hover { color:#ff0007; background:none; }
#header #menu .sm { display:none; }
#header #menu .sm.on { display:inline; /*margin-top:-12px; padding-top:38px;*/ margin-top:10px; padding-top:20px; left:0; top:14px; position:absolute; width:350px; z-index:90; } 
#header #menu .sm.on a, #header #menu .sm.on a:hover { display:block; background:url('images/sepsm.jpg') top left repeat-x #181816; padding:16px 10px 5px 10px; font-family: 'CoolCrayon'; color:#fff; text-transform:uppercase; font-size:12px; letter-spacing:0.1em; text-decoration:none; }
#header #menu .sm.on a:hover { color:#ff0007; }
#header #menu .sm.on a:last-child { padding-bottom:12px; } 

#main { padding-bottom:100px; }
#main .intro { text-align:center; font-size:16px; letter-spacing:0.5px; line-height:1.6em; }
h4 { font-size:26px; color:#0054a6; font-weight:normal; }

.infos { text-align:center; }
.zone-info { text-align:center; width:273px; height:227px; padding:20px; float:left; background:url('images/bg-carre.jpg') left top no-repeat; margin:24px 24px 0 0; }
.zone-info.last { margin-right:0; }
.zone-info h4 { margin:0; }
.zone-info h4 a { font-family: 'CoolCrayon'; color:#ff0007; text-transform:uppercase; text-decoration:none; font-size:25px; }
.zone-info .contenu { width:263px; display:block; text-align:center; margin:0 auto; }

.zone-info span.endroit { font-size:20px; color:#0072bc; font-family: 'CoolCrayon'; line-height:1.5em; letter-spacing:0.5px; text-transform:uppercase; display:block; padding-top:50px;}
.zone-info:hover span.endroit, .zone-info span.envers { visibility:hidden; display:none; }
.zone-info:hover span.envers span { font-family: 'Open Sans Condensed', sans-serif; color:#0072bc; text-transform:uppercase; font-size:14px; font-weight:700; display:block; margin-bottom:-10px; }
.zone-info:hover span.envers a { text-align:center; }
.zone-info:hover span.envers { font-family: 'Open Sans Condensed', sans-serif; font-weight:300; font-size:16px; line-height:18px; visibility:visible; display:block; display:block; text-align:left; text-align:center;  }
.zone-info span.envers span.suite { text-align:center; width:100%; display:block; text-transform:none; font-family: Verdana, Arial, sans-serif; font-size:16px; }
.zone-info span.envers span.suite a {  font-family: 'Open Sans Condensed', sans-serif; text-transform:none; font-size:14px; font-weight:700; color:#ff0007; text-decoration:none; }

.accueil .zone-info .contenu { width:240px; height:160px; display:block; text-align:center; margin:0 auto; }
.accueil .zone-info .contenu span { visibility:hidden; display:none; padding-top:30px; font-size:14px; font-weight:bold; }
.accueil .zone-info .contenu span a { color:#ff0007; text-decoration:none; }
.accueil .zone-info .contenu span a:hover { text-decoration:underline; }
.accueil .zone-info .contenu.info1 { background:url('images/v-statut.jpg') center center no-repeat; }
.en .accueil .zone-info .contenu.info1 { background:url('images/v-statut-en.jpg') center center no-repeat; }
.accueil .zone-info .contenu.info2 { background:url('images/v-chronologie.jpg') center center no-repeat; }
.accueil .zone-info .contenu.info3 { background:url('images/v-syndicat.jpg') center center no-repeat; }
.accueil .zone-info .contenu.info4 { background:url('images/v-gains.jpg') center center no-repeat; }
.accueil .zone-info .contenu.info5 { background:url('images/v-participation.jpg') center center no-repeat; }
.accueil .zone-info:hover .contenu, .en .accueil .zone-info:hover .contenu { background:none; }
.accueil .zone-info:hover .contenu span { visibility:visible; display:block; }
.mini-zone-info { text-align:center; width:175px; height:146px; padding:20px; float:left; background:url('images/bg-petit-carre.jpg') left top no-repeat; margin:24px 24px 0 395px; font-weight:bold; }
.mini-zone-info span.endroit { font-size:17px; color:#ff0007; font-family: 'CoolCrayon'; text-transform:uppercase; display:block; padding-top:50px;}
.mini-zone-info:hover span.endroit, .mini-zone-info span.envers { visibility:hidden; display:none; }
.mini-zone-info:hover span.envers { font-size:13px; visibility:visible; display:block; display:block; padding-top:30px; }
.mini-zone-info span.envers a { color:#ff0007; text-decoration:none; }

#main .content .titre { width:100%; text-align:center; margin:0px 0 40px 0;}
#main .content h2 { font-family: 'CoolCrayon'; color:#ff0007; text-transform:uppercase; font-size:32px;  }
#main .content .titre h4 { color:#ff0007; text-transform:none; font-weight:bold; font-size:16px; margin-top:0px;}
#main .content .titre h4 a { color:#ff0007; }
#main .content.statut .titre { margin-top:80px; }
#main .content.statut h2 { background:url('images/illu-statut.jpg') no-repeat left top; padding:102px 0 14px 132px; display:inline; }
.en #main .content.statut h2 { background:url('images/illu-statut-en.jpg') no-repeat left top; padding:96px 0 14px 142px; display:inline; }
#main .content.chrono .titre { margin-top:40px; }
#main .content.chrono h2 { background:url('images/illu-chrono.png') no-repeat left top; padding:50px 0 34px 182px; display:inline; margin:-140px 0 0 -40px; }
#main .content.syndicat .titre { margin-top:60px; }
#main .content.syndicat h2 { background:url('images/illu-syndicat.png') no-repeat left top; padding:80px 0 0px 182px; display:inline; margin:-100px 0 0 -180px; }
#main .content.gains .titre { margin-top:40px; }
#main .content.gains h2 { background:url('images/illu-gains.png') no-repeat left top; padding:50px 0 34px 182px; display:inline; margin:-140px 0 0 -40px; }
#main .content.participation .titre { margin:40px 0 60px 0; }
#main .content.participation h2 { background:url('images/illu-participation.png') no-repeat left top; padding:70px 0 64px 222px; display:inline; margin:-140px 0 0 -40px; }

#main .topgris { background-color:#f3f3f3; margin:-5px 0 40px 0; padding:40px 0 0 0; text-align:center; line-height:1.5em; }
#main .topgris h2 { color:#0054a6; margin:0; font-size:28px; font-weight:normal; }
#main .content .topblanc { background-color:#fff; margin-bottom:50px; padding:0; text-align:left; line-height:1.5em; }
#main .content .topblanc h3 { font-family:Verdana, Arial, sans-serif; color:#ff0007; font-size:18px; }

#main .content .colset { background:url('images/pointille.png') 87px top repeat-y; padding-bottom:40px; }
#main .content .colgauche { width:264px; margin:0px 0 0 0px; float:left; }
#main .content .colgauche h3 { margin:0; font-weight:normal; font-family: 'CoolCrayon'; color:#ff0007; text-transform:uppercase; font-size:24px; width:190px; padding:10px 94px 0 0; background:url('images/fl.png') #fff right 16px no-repeat; text-align:center; }
#main .content .coldroite { width:665px; float:left; padding:0 0px 0 50px; margin-top:14px; font-size:14px;  line-height:1.5em;}
#main .content .coldroite > :first-child { margin-top:0; }
#main .content .coldroite a { color:#0054a6; font-weight:normal; }
#main .content .coldroite .sml { font-size:12px; }
#main .content .coldroite.gris { background:url('images/bg-gris.png') 20px bottom repeat-y; }
#main .content .coldroite .gris > :first-child, #main .content .coldroite.gris > :first-child { margin-top:14px; }
#main .content .coldroite .gris { background:url('images/bg-gris.png') 0px bottom repeat-y; margin-left:-30px; margin-top:36px; padding:1px 30px;}
#main .content .coldroite p { margin:10px 0; }
#main .content .coldroite h4 { color:#0054a6; font-weight:bold; font-size:14px; margin:26px 0 0 0; }
#main .content .coldroite ul li span { color:#0054a6; font-size:14px; }
#main .content .coldroite ul { list-style-type:none; }
#main .content .coldroite ul { padding-left:10px; }
#main .content .coldroite ol { padding-left:24px; }
#main .content .coldroite ul li {  text-indent: -1em; margin-bottom:14px; }
#main .content .coldroite ol li { margin-bottom:14px; }
#main .content .coldroite ul li:before { content: "• "; color: #0054a6; }
#main .content .coldroite .collapse h4 { cursor:pointer; margin:0; }
#main .content .coldroite .collapse h4:before { content: "[+] "; color: #000; }
#main .content .coldroite .collapse.ouvert h4:before { content: "[—] "; color: #000; }
#main .content .coldroite .collapse.ouvert h4 { margin-bottom:20px; }
#main .content .coldroite .collapse div { visibility:hidden; display:none; }
#main .content .coldroite .collapse.ouvert div { visibility:visible; display:block; margin-bottom:40px; }
#main .content .coldroite table { margin:40px 40px 40px 0; border:1px solid #000; }
#main .content .coldroite table, #main .content .coldroite th, #main .content .coldroite td { border:1px solid #000; border-collapse: collapse; border-top:0; border-left:0; }
#main .content .coldroite th, #main .content .coldroite td { text-align:left; padding:10px;}
#main .content .coldroite th { color:#0054a6; text-transform:uppercase; font-size:14px; border-bottom:4px solid #000; padding-bottom:5px; border-top:0; }
#main .content .coldroite table td.bggris { background-color:#f3f3f3; }

#footer { background:url('images/bg-footer.png') repeat-x center bottom; height:177px; }
#footer .left { background:url('images/fl-bot.png') no-repeat left top; float:left; width:400px; font-size:14px; padding:10px 0 0 50px; margin-top:8px; color:#fff; line-height:1.5em; }
#footer .left span { color:#6dcff6; }
#footer .left a { color:#fff; text-decoration:underline; }
#footer .right { color:#fff; float:right; text-align:right; margin-bottom:0px; }
#footer .right .texte { margin:20px 0 0 30px; font-size:10px; float:left; width:140px; text-align:left; }
#footer .right .texte p { margin:0; float:none; display:block; }
#footer .right .texte img { float:left; margin:0 0px 20px 0; }
#footer a img { border:0; }
#footer .logo-afpc { float:right; margin-left:0px; }

#popup { background:url('images/bg-tableau.jpg') center top; width:991px; margin:0; color:#fff; float:left; font-size:14px; padding-bottom:20px; }
#popup .contenu { background:url('images/plus.png') 380px 50px no-repeat; }
#popup h4 { font-family: 'CoolCrayon'; text-align:center; font-weight:normal; font-size:20px; margin:40px auto 0 auto; line-height:0.9em; text-transform:uppercase; color:#00aeef; }
#popup ul { list-style-type:none; }
#popup .zone1 { background:url('images/cercle-1.png') no-repeat left top; width:332px; float:left; margin:40px 0 0 40px; padding-left:70px; }
#popup .zone1 p { background:url('images/fl-popup.png') left bottom no-repeat; padding:0 0 55px 20px; margin:7px 0 7px -10px; line-height:1.4em; }
#popup .zone1 ul { padding-left:30px; margin:-30px 0 40px 0; list-style-type:none; line-height:2em; }
#popup .zone2 { background:url('images/cercle-2.png') no-repeat left top; width:450px; float:left; margin:40px 0 0 25px; } 
#popup .zone2 p.fl { line-height:1.8em; background:url('images/fl-popup.png') left bottom no-repeat; padding:0 0 55px 30px; margin-left:45px; line-height:1.4em; }
#popup .zone2 li { margin-bottom:8px; }
#popup .zone2 ul, #popup.uqam-uqar ul { padding-left:10px; line-height:1.5em; }
#popup .zone2 ul li, #popup.uqam-uqar ul li {  text-indent: -.7em; }
#popup .zone2 ul li:before, #popup.uqam-uqar ul li:before { content: "• "; color: #00aeef; }
#popup .zone2 div { margin:-36px 0 0 80px; }
#popup .zone3 { padding:30px 60px; }
#popup .zone3 h4, #popup.bourse .zone3 h4 { text-align:left; color:#00aeef; margin:0; }
#popup .zone3 p, #popup.bourse .zone3 p { line-height:1.4em; margin:0;}

#popup.bourse { background:url('images/bg-tableau2.jpg') center top; width:914px; margin:0; color:#fff; float:left; font-size:14px; padding-bottom:20px; line-height:1em; }
#popup.bourse ul { list-style-type:disc; }
#popup.bourse h4 { font-family: 'CoolCrayon';  text-transform:uppercase; text-align:center; width:500px; font-weight:bold; font-size:23px; font-weight:normal; margin:24px auto 11px auto; line-height:0.9em;}
#popup.bourse table { margin:27px 0 0 45px; float:left; border:0; line-height:1.1em; }
#popup.bourse table tr td { vertical-align:top; padding:9px 8px; min-width:80px; text-align:center; border:0; }
#popup.bourse table tr td:first-child { text-align:right; }
#popup.bourse .zonetexte { /*background:url('images/fond-transparent.png') repeat;*/ font-size:12px; padding:8px; float:left; }
#popup.bourse .zonetexte.bleu { color:#098cbf; width:167px; margin:80px 0 0 90px; }
#popup.bourse .zonetexte.bleu a { color:#098cbf; }
#popup.bourse .zonetexte.rouge { color:#ed1c24; width:250px; margin:45px 0 0 20px; }
#popup.bourse .zonetexte.vert { color:#80c342; width:230px; margin:45px 0 0 280px; }
#popup.bourse .zonetexte p, #popup.bourse .zonetexte ul, #popup.bourse .zonetexte li { margin:0; padding:0; }
#popup.bourse .zonetexte li { margin:0 0 8px 18px; }
#popup.bourse .zone3 h4 { margin-top:20px; }

#popup.syndicat a { color:#fff; }
#popup.syndicat table { margin:40px; border-bottom:1px solid #fff; width:450px; }
#popup.syndicat table, #popup th, #popup td { border-bottom:1px solid #fff; border-collapse: collapse; }
#popup.syndicat th, #popup td { text-align:left; padding:10px;}
#popup.syndicat th { font-family: 'CoolCrayon'; color:#00aeef; text-transform:uppercase; font-size:18px; border-bottom:4px solid #fff; padding-bottom:5px; }
#popup.syndicat tr > :first-child { border-right:1px solid #fff; }

#popup.uqam-uqar { padding:40px; width:400px; }
#popup.uqam-uqar a { color:#fff; font-weight:bold; }
#popup.uqam-uqar ul li:before { content: "• "; color: #fff; }

.clear:after, .colset:after { content:''; display:block; clear: both; }