/*
Theme Name: EDU 1020-v2
Author: Annick Desmeules 
Description: Thème relatif au cours EDU 1020 - Stratégies d'intervention éducative auprès des adultes
Version: 1.0
*/

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@font-face {
	font-family: 'Charis';
	src: url('fonts/Charis-SIL/CharisSIL.eot'); 
	src: url('fonts/Charis-SIL/CharisSIL.eot?#iefix') format('embedded-opentype'), 
	     url('fonts/Charis-SIL/CharisSIL.svg#CharisReg') format('svg'),
	     url('fonts/Charis-SIL/CharisSIL.woff') format('woff'), 
	     url('fonts/Charis-SIL/CharisSILR.ttf')  format('truetype');
	font-weight: 400;
	font-style:regular;
}
@font-face {
	font-family: 'Charis';
	src: url('fonts/Charis-SIL/CharisSIL-Italic.eot'); 
	src: url('fonts/Charis-SIL/CharisSIL-Italic.eot?#iefix') format('embedded-opentype'), 
	     url('fonts/Charis-SIL/CharisSIL-Italic.svg#CharisSILI') format('svg'),
	     url('fonts/Charis-SIL/CharisSIL-Italic.woff') format('woff'), 
	     url('fonts/Charis-SIL/CharisSILI.ttf')  format('truetype');
	font-weight: 400;
	font-style:italic;
}
@font-face {
	font-family: 'Charis';
	src: url('fonts/Charis-SIL/CharisSIL-Bold.eot'); 
	src: url('fonts/Charis-SIL/CharisSIL-Bold.eot?#iefix') format('embedded-opentype'), 
	     url('fonts/Charis-SIL/CharisSIL-Bold.svg#CharisBold') format('svg'),
	     url('fonts/Charis-SIL/CharisSIL-Bold.woff') format('woff'), 
	     url('fonts/Charis-SIL/CharisSILB.ttf')  format('truetype');
	font-weight: 700;
	font-style:normal;
}
@font-face {
	font-family: 'Charis';
	src: url('fonts/Charis-SIL/CharisSIL-BoldItalic.eot'); 
	src: url('fonts/Charis-SIL/CharisSIL-BoldItalic.eot?#iefix') format('embedded-opentype'), 
	     url('fonts/Charis-SIL/CharisSIL-BoldItalic.svg#CharisBoldItalic') format('svg'),
	     url('fonts/Charis-SIL/CharisSIL-BoldItalic.woff') format('woff'), 
	     url('fonts/Charis-SIL/CharisSILBI.ttf')  format('truetype');
	font-weight: 700;
	font-style:italic;
}
@font-face {
	font-family: 'Kreon';
	src : url('fonts/kreon/Kreon-Regular.eot'); 
	src: url('fonts/kreon/Kreon-Regular.eot?#iefix') format('eot'),
		url('fonts/kreon/Kreon-Regular.woff') format('woff'), 
		url('fonts/kreon/Kreon-Regular.ttf')  format('truetype'),
		url('fonts/kreon/Kreon-Regular.svg#Kreon-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'Kreon';
		src: url('fonts/kreon/Kreon-Regular.svg#Kreon-Regular') format('svg');
	}
}
@font-face {
	font-family: 'Kreon';
	src : url('fonts/kreon/Kreon-Bold.eot'); 
	src: url('fonts/kreon/Kreon-Bold.eot?#iefix') format('eot'),
		url('fonts/kreon/Kreon-Bold.woff') format('woff'), 
		url('fonts/kreon/Kreon-Bold.ttf')  format('truetype'),
		url('fonts/kreon/Kreon-Bold.svg#Kreon-Bold') format('svg');
	font-weight: 700;
	font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'Kreon';
		src: url('fonts/kreon/Kreon-Bold.svg#Kreon-Bold') format('svg');
	}
}

html, body {
	height: 100%;
}
html{text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;}

body {width:100%;background: #D9CEBB;color:#4D4D4D;margin: 0 auto;padding: 0;font:100% Arial, Helvetica, sans-serif;}

#zoneLogo {width:100%;height: 60px;padding: 0;background: #30100A;}
#zoneLogo #logo{width: 960px;margin: 0 auto;text-align: right;}
#zoneLogo img{margin-top: 4px;margin-right: 10px;}

#page {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -28px;width: 910px;padding:0 25px;
}
header {width: 960px;position:relative;}
header img{vertical-align: top;}/*Colle l'image dans le haut et empêche un espace après*/

header nav {width: 910px;background:#BFCBC0;}
header nav ul{font-size: .875em;list-style-type:none;margin:0 auto;padding:0;height:31px;
    /* border-bottom: 7px solid #4D4D4D; */
}
/*header nav ul:after{content:"";border-bottom: 7px solid #4D4D4D;display: block;padding-top: 33px;}*/
@-moz-document url-prefix() {
	header nav ul{height:32px;}
}
header nav ul li {/*display:none;*/float: left;text-transform:uppercase;	color: #4D4D4D;position:relative;}
header nav ul li:before{content: ": :";float: left;font-weight:700;margin-top: 8px;padding-bottom: 7px;border-bottom: 7px solid #4D4D4D;border:0\9;}
header nav ul li:last-child{ width: 158px;}
.firefox-mac header nav ul li:before{padding-bottom: 8px;}

header nav ul li:first-child:before{content:"";}
header nav ul li#menu-item-80{float:right!important;}

header nav ul li a:link, header nav ul li a:visited{font-family:"Kreon", Arial, Helvetica, sans-serif!important;display: block;text-decoration: none;margin:0;padding:8px 35px 5px;font-weight:700;border-bottom:7px solid #4D4D4D;color: #4D4D4D;}

header nav ul li a:active, header nav ul li a:hover, header nav ul li a:focus,header nav ul li.current_page_item>a, header nav ul li.current-menu-item>a,  header nav ul li.current-page-ancestor>a{color:#602618!important;border-bottom:7px solid #CC6008!important;}

header> a:link, header> a:visited{position:absolute;top:10px;right:60px;font-size:.9285em;font-family:"Kreon", Arial, Helvetica, sans-serif!important;color: #4D4D4D;text-decoration: none;}
header> a:active, header> a:hover, header> a:focus{text-decoration: underline;}

/**/
#content{background:url(images/edu1020-sectionBG.jpg) repeat-y;min-height:500px;padding-bottom:20px;}
/**/
#left{width:195px;height:100%;float:left;display:block;}
#left nav{margin-top: 40px;font-family:"Kreon", Arial, Helvetica, sans-serif;}

#left ul{margin: 0;padding: 0;list-style-type:none;}
#left ul ul {margin-left:25px;list-style-image:url(images/edu1020_puce.gif);}
#left ul ul li {margin: 10px .5em 10px 0;}

#left ul ul li a,#left ul ul li a:link, #left ul ul li a:visited,#left ul ul li a.lien_parent:active,#left ul ul li a.lien_parent:hover,#left ul ul li a.lien_parent:focus{color:#868686;text-decoration:none;}
#left ul ul li a:active, #left ul ul li a:hover, #left ul ul li a:focus, #left ul ul li.current_page_item>a{color:#000;}

#left ul ul ul{list-style-image:url(images/edu1020_puce_moins.jpg);margin-left: 10px;}
#left ul ul ul li{margin:0;font-size:.875em;}
#left ul ul ul li a:link{font-style:italic;}

/**/
section{font-family:"Charis", Arial, Helvetica, sans-serif;margin:0 0 0 205px;display:block;width: 660px;padding:45px 20px 10px;font-size:.875em;/*14/16*/}

section h1{font-family:"Kreon", Arial, Helvetica, sans-serif;text-transform:uppercase;font-size:1.428em;/*20/14*/color:#4A2324;}
section h2{font-size:1.285em;/*18/14*/color:#000;margin-bottom: -3px;}
section h2+h3{margin-top:10px;}
section h3{font-style:italic;font-size:1.142em;color:#1D1D1B;margin-bottom:0;}
section h3+p{margin-top:0;}
section #respond h3, section h4{margin-bottom: 0;color:#1D1D1B;font-size:1em;font-style:normal;}
section h4+p{margin-top:5px;}
section h5{margin-bottom: 0;margin-top: 20px;color:#1D1D1B;font-size:1em;}
section h5+p{margin-top:0;}


section a:link,section a:visited, a.lien_top:link, a.lien_top:visited{color: #009F98;text-decoration:none;word-break: break-word;}
section a:active, section a:hover, section a:focus, a.lien_top:active, a.lien_top:hover, a.lien_top:focus {color:#0B7A78;text-decoration:underline;}

a.lien_top{margin-right:25px;display:block;text-align:right;font-size:.87em;}

section ul {list-style-image:url(images/edu1020_puce.gif);}

section ul.icones{list-style-image:none;list-style-type:none;}
section ul.icones>li{padding-left:75px;position:relative;word-wrap: break-word;}
section ul.icones ol{margin-bottom:15px;}

section ul.icones li.apprentissage:before,section ul.icones li.info:before,section ul.icones li.experimentation:before,section ul.icones li.contact:before,section ul.icones li.reflexion:before,section ul.icones li.bloc:before,section ul.icones li.partage:before,section ul.icones li.redaction:before{
	content:"";background:url(images/edu1020-icones.png) no-repeat; width:63px;height:55px;position:absolute;;left:0;top:0;}
	
div.apprentissage,div.info,div.experimentation,div.contact,div.reflexion,div.bloc,div.partage,div.redaction{background:url(images/edu1020-icones.png) no-repeat;width:63px;height:55px;}
section ul.icones li.apprentissage:before, div.apprentissage{background-position: 10px 0;}
section ul.icones li.info:before, div.info{background-position:-77px 0;}
section ul.icones li.experimentation:before, div.experimentation{background-position:-173px 0;}
section ul.icones li.contact:before, div.contact{background-position:-262px 0;}
section ul.icones li.reflexion:before, div.reflexion{background-position:-330px 0;}
section ul.icones li.bloc:before, div.bloc{background-position:-401px 0;}
section ul.icones li.partage:before, div.partage{background-position:-496px 0;}
section ul.icones li.redaction:before, div.redaction{background-position:-570px 0;}

dt{float:left;}
dd{margin-left:75px;margin-bottom: 20px;}

section .note{margin-top: 50px;margin-bottom: 30px;font-size: smaller;padding-left: 20px;text-indent: -15px;border-top: 1px solid #999;}
section .encadre{border:1px solid #602618;padding: 10px 20px;margin: 20px;}
section .biblio{margin-top:10px;padding-left:30px;background:url(images/fleche.png) no-repeat -1px 6px;}


/****************LISTE avec parentese******************************/
section ol.alpha {counter-reset: list;}
section ol.alpha > li {list-style: none;padding-left: 10px;}
section ol.alpha > li:before {content: counter(list, lower-alpha) ") ";counter-increment: list;margin-left: -1.5em;float:left;}


/* QUESTIONNAIRE */
ol.listeAlpha {counter-reset: list;}

ol.listeAlpha > li {list-style: none;padding-left: 10px;}

ol.listeAlpha > li:before {content: "a) ";margin-left: -1.5em;float:left;}

ol.listeAlpha.b > li:before{content: "b) ";}
ol.listeAlpha.c > li:before{content: "c) ";}
ol.listeAlpha.d > li:before{content: "d) ";}


#graph{background:url(images/Partager_resultat.jpg) no-repeat;width:622px;height:559px;margin:50px auto;position:relative;}
.user_coord,.coord{width:11px;height:11px;background:url(images/point.png);position:absolute;}
.coord{background:#C09;}

#chart, #chartData { border: 1px solid #333; background: #ebedf2 url("images/gradient.png") repeat-x 0 0;}
#chart { display: block; margin: 0 0 20px 0;}
#chartData { margin: 0 40px 0 0; border-collapse: collapse; box-shadow: 0 0 1em rgba(0, 0, 0, .5); -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);background-position: 0 -100px;}
#chartData th, #chartData td {padding: .5em;border: 1px dotted #666;text-align: left;}
#chartData th {border-bottom: 2px solid #333;text-transform: uppercase;}
#chartData td {cursor: pointer;}
#chartData td:nth-of-type(even){text-align:center;}
#chartData td.highlight {background: #e8e8e8;}
#chartData tr:hover td {background: #f0f0f0;}

#legend{font-size:.875em;clear:both;}
#legend span{display: inline-block;margin: 0 10px 20px;}
#legend span:before{content: "";width: 10px;height: 10px;background: #EF5323;float: left;display: block;margin-top: 4px;margin-right: 5px;border: 1px solid #666;}
#legend span.intuitif_ref:before{background: #EF5323;}
#legend span.metho_ref:before{background: #819C3B;}
#legend span.intuitif_prag:before{background: #A66824;}
#legend span.metho_prag:before{background: #47B095;}

#questionnaire td,#questionnaire th{text-align:center;}
#questionnaire td:first-child,#questionnaire th:first-child{text-align:left;}

.mask {position:absolute;left:0;top:0;z-index:9000;background-color:rgba(0,0,0,.7);display:none;width: 100%;height:100%;}
.mask p{width:50%;margin:100px auto;color:#fff;-webkit-border-radius: 5px;border-radius: 5px;background-color:#333;padding:10px 20px;}

.errors{color:#900;font-size:1em;}
.errors a{color:inherit;}
.errors a:active,.errors a:hover,.errors a:focus{color:#000;}
.error{border:2px solid #900}

.img_warning{background:url(images/warning.gif) no-repeat; width:20px;height:20px;position:absolute;}

.alignright{float:right;margin-left: 20px;margin-bottom: 20px;}

/*Note de bas de page */
p.note{font-size:.8571em;}

/*Details*/
summary::-webkit-details-marker {display:none;}
details> summary:before{content:""!important;}

summary:after {content: ""; float:right;background:url("images/plus_moins.gif") no-repeat;width:13px;height: 13px;margin-top: 4px;}
details[open]> summary:after, details.open> summary:after {background-position:0 -13px;}

details> summary{background-color: #00a099;color: #FFF;text-transform: uppercase;padding:2px 10px;}

details ol {counter-reset: list;margin: 0;padding:0;}
details ol > li:nth-child(even){background-color: rgb(255, 255, 255);}
details ol > li:nth-child(odd){background-color: rgb(245, 245, 245);}
details ol > li:before{content: counter(list) ". ";counter-increment: list;margin-left: -1.5em;float:left;}
details ol > li{border: 1px solid #c6c6c5;border-top:none;padding: 5px 10px 5px 30px;list-style: none;}

details#intro{margin-top:20px;}

details#corps> summary{background-color: #cd6109;}
details#corps> details> summary{background-color: #dc9053;text-transform:none;}
details#conclusion> summary{background-color: #b8a047;}

details#corps ol > li{border: 1px solid #c6c6c5;border-top:none;padding: 5px 10px 5px 40px;list-style: none;}
details#corps ol > li:before{counter-increment: list;margin-left: -2.2em;padding-right: 5px;float:left;}

details .intro{border-right: 1px solid #c6c6c5;border-left: 1px solid #c6c6c5;border-bottom: 1px solid #c6c6c5;padding: 5px 10px;background-color: #e7e7e7;}
details .intro h4{margin: 0;}

details#corps1 ol > li:before{content: "1."counter(list)". ";}
details#corps2 ol > li:before{content: "2."counter(list)". ";}
details#corps3 ol > li:before{content: "3."counter(list)". ";}

details a.intervenant, details a.intervenant:link,details a.intervenant:visited{color:#000!important; text-decoration:none;display:block;clear:both;margin-top:20px;}
details a.intervenant:active,details a.intervenant:hover,details a.intervenant:focus{color:#00a099!important; text-decoration:none;}
details a.intervenant:before{content:"";background:url("images/bulle.gif") no-repeat;width: 20px;height: 13px;float: left;margin-top: 6px;}
details a.intervenant:active:before,details a.intervenant:hover:before,details a.intervenant:focus:before{background-position:0 -15px;}

details p{word-wrap: break-word;}
/* * Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}

/**/
.clearfix{clear:both;}

table {margin:10px auto;}
table caption{display:none;}
table th, table td{
	border: 1px solid #c6c6c5;
	text-align: left;
	vertical-align: top;
	padding: 5px;
	background-color: #f5f5f5;
}
table td ul{padding-left: 0;margin-left: 30px;margin-right: 40px;}
table+table{margin-top:20px;}

table.froute td.fond{background-color: #009F98;}
table.froute td.fond_remise{background-color: #CC6008;}
table.froute td.fond_partiel{background-color: #CCC;}

/*figure*/
.wp-caption.aligncenter{margin:0 auto;}
.wp-caption-text{font-size:small;}

.image-80{
    display: inherit;
    margin: 0 auto;	
    text-align: center;
	width: 80%;
}



#page>ul{font-family:"Charis", Arial, Helvetica, sans-serif;font-size:.875em;height: 35px;list-style-type:none;margin:0;text-align: center;padding:0;padding-top: 25px;}
#page>ul li{display: inline-block;padding:0 15px;}

#page>ul li a:link,#page>ul li a:visited{color:#30100A;text-decoration:none;}
#page>ul li a:active,#page>ul li a:hover,#page>ul li a:focus{color:#000;}

/**/
.push {height:28px; /* .push must be the same height as .footer */}
footer{font-family:"Charis", Arial, Helvetica, sans-serif;color:#FFF;text-align:center;font-size:.875em;height:28px;background: #30100A;padding-top:12px;color:#FFF; margin-top:25px;}


@media all and (device-width: 768px) and (device-height: 1024px){
	header nav ul li:before{padding-bottom: 6px;}
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
	footer, body{width:758px;}
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
	footer, body{width:1024px;}
}
.audio{border-top: thin dashed;margin-top: 12px!important;padding: 10px 0;}
.fermer {width: 15px;height: 20px;float: right;background: url(images/fermer.gif) no-repeat right top;cursor:pointer;}

.page-template-page-accueil-php #jwplayer-0_wrapper{margin:0 auto;}
.page-template-page-accueil-php small{font-size:small;display:block;margin-bottom:2em;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: .5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}