/*
 * Base.css
 * CSS du site de la TÉLUQ 2016
 * Styles de liens, typographies, couleurs, formulaires, accordéons, onglets, etc.
 * Programmeur : Andy Harvey
 */

/* =============================================================================
   Normaliser les styles
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.5; }

::-moz-selection { background: #000; color: #fff; text-shadow: none; }
::selection { background: #000; color: #fff; text-shadow: none; }

a { color:#000; }
a:visited { color:#000; }
a:hover { color:#565859; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; background-color:transparent; }

abbr[title] { border-bottom: 1px dotted; text-decoration:none; }
a > abbr[title] { border-bottom: none; }
b, strong { font-weight:700; }
b.semi, strong.semi { font-weight:600; }
i, em { font-style: italic; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #aaa; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: 700; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 90%; line-height:1.5; }
big { font-size: 125%; }

sub, sup { font-size: 85%; line-height: 0; position: relative; vertical-align: baseline; text-transform:none; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 0 0 10px 0; padding: 0 0 0 25px; list-style-position:outside; }
ul ul, ol ol, ul ol, ol ul { margin-top:0; }
li { margin:4px 0; }
nav ul, nav li { margin:0; padding:0; list-style-image:none; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol, ul.noliste, ul.no_liste { list-style: none; list-style-image: none; margin: 0; padding: 0; }
ul.noliste > li, ul.no_liste > li { display:block; } /* Règle petit prob. d'aff. IE8+ */
.ie8 ul.noliste > li, .ie8 ul.no_liste > li { display:list-item; } /* Annule pour IE8 (cause autre bogue) */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }



/* Coupure des longs mots. Parfait pour les longs URL */
#ContenuPrincipal, .text_cut {
	word-wrap:break-word;
}


/* ===== Primary Styles ========================================================
   Author: Andy Harvey, TÉLUQ
           http://www.teluq.ca/
   ========================================================================== */

html {
	font: 15px/19px 'Open Sans', sans-serif;
	color: #000;
}

/*
 * Typographie
 */
h1, h2, h3, h4, h5, h6 {
	color: #000000;
	font-weight: 700;
}
h4, h5, h6 { font-weight: 400; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { text-transform:none; }

h1 { font-size: 2.142857142857143em; /* 30/14 */ line-height: 1.333333em; margin: 15px 0 10px 0; text-transform:uppercase; }
h2 { font-size: 1.428571428571429em; /* 20/14 */ line-height: 1.285714em; margin: 30px 0 10px 0; }
h3 { font-size: 1.214285714285714em; /* 17/14 */ line-height: 1.285714em; margin: 20px 0 8px 0; color:#2e8804; }
h4 { font-size: 1.285714285714286em; /* 18/14 */ line-height: 1.285714em; margin: 15px 0 5px 0; font-weight:600; }
h5 { font-size: 1.071428571428571em; /* 15/14 */ line-height: 1.285714em; margin: 15px 0 5px 0; text-transform:uppercase; }
h6 { font-size: 1em; line-height: 1.307692em; margin: 10px 0 5px 0; }



/* H2 général */
h2 {
	color:#404041;
	font-size: 1.466666666666667em; /* 22/15 */
	line-height: 1.28571em;
	margin: 40px 0 20px;
}


p { margin: 0 0 10px 0; }
p img { margin: 0; }

.remove-top { margin-top: 0 !important; }
.add-top { margin-top: 10px !important; }		  /* Même valeur que la marge du <p> */
.half-top { margin-top: 5px !important; }
.add-d-top { margin-top: 20px !important; }		  /* Double marge */
.add-t-top { margin-top: 30px !important; }		  /* Triple marge */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 5px !important; }
.add-bottom { margin-bottom: 10px !important; }   /* Même valeur que la marge du <p> */
.add-d-bottom { margin-bottom: 20px !important; } /* Double marge */
.add-t-bottom { margin-bottom: 30px !important; } /* Triple marge */

blockquote { font-size: 1.076923em; /*14px*/ line-height: 1.7em; color: #565859; font-style: italic; }
blockquote { margin: 0 0 20px; /*padding: 9px 20px 0 19px; border-left: 1px solid #ddd;*/ }
blockquote cite { display: block; font-size: 0.85714285em; /*12px/14px*/ color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:link, blockquote cite a:visited { color: #555; }

hr { border: solid #aaa; border-width: 1px 0 0; clear: both; margin: 20px 0; height: 0; }


/*
 * Formulaires
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 0 15px 0;
    padding: 0.5em;
}

form { margin-bottom: 20px; }

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea,
select {
	display: block;
	border:1px solid #9c9ea0;
	border-radius:0;
	padding: 7px;
	outline: none;
	margin: 0 0 15px 0;
	width:100%;
	max-width:300px;
	color:#000;
	background: #eaebec;
	box-shadow:none;
}
input.long,
textarea.long {
	max-width:600px;
}

form input[disabled],
form textarea[disabled],
form select[disabled] { background:#d3d3d3!important; }

label.disabled { font-style:italic; cursor:default; }


input[type="text"].input-inline,
input[type="password"].input-inline,
input[type="tel"].input-inline,
input[type="email"].input-inline,
input[type="search"].input-inline,
textarea.input-inline,
select.input-inline {
	display:inline;
}

input[type="text"].full-width,
input[type="password"].full-width,
input[type="tel"].full-width,
input[type="email"].full-width,
input[type="search"].full-width,
textarea.full-width,
select.full-width {
	width:100%;
	max-width:none;
}
textarea.full-width {
	height:200px;
}


input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus { border: 1px solid #4e4e50; }


input[type="checkbox"]:valid,
input[type="radio"]:valid,
input[type="text"]:valid,
input[type="password"]:valid,
input[type="tel"]:valid,
input[type="email"]:valid,
input[type="search"]:valid,
textarea:valid,
select:valid {  }

input[type="checkbox"]:invalid:focus,
input[type="radio"]:invalid:focus,
input[type="text"]:invalid:focus,
input[type="password"]:invalid:focus,
input[type="tel"]:invalid:focus,
input[type="email"]:invalid:focus,
input[type="search"]:invalid:focus,
textarea:invalid:focus,
select:invalid:focus,
input[type="checkbox"].invalide,
input[type="radio"].invalide,
input[type="text"].invalide,
input[type="password"].invalide,
input[type="tel"].invalide,
input[type="email"].invalide,
input[type="search"].invalide,
textarea.invalide,
select.invalide { border-color:red; color:red; box-shadow: none; }

select {
	text-transform:uppercase;
	display:inline-block;
	width:auto;
	margin-right:10px;
	padding:6px 12px;
}

textarea { min-height: 60px; }
input[type="checkbox"] { display: inline; }
legend, .faux-label, label { font-weight: 400; font-size: 1em; }
.faux-label, label { line-height:1.8; }

label.invalide { color:red; }
legend { font-weight: 700; }
legend span { font-weight: normal; }


/*
 * Boutons radio/checkbox
 */
input[type="radio"],
input[type="checkbox"] {
	/*display:none;*/
	opacity: 0;
	position: absolute;
}
input[type=radio]:focus + label,
input[type="checkbox"]:focus + label {
	outline:thin dotted;
}
input[type=radio] + label:before,
input[type="checkbox"] + label:before {
	content: '';
	height:21px;
	width:21px;
	display: inline-block;
	line-height: 18px;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #9c9ea0;
	background:#eaebec;
	margin-right: 10px;
	margin-top:-2px; /* Pour 'centrer' */
	transition:background-color 0.2s ease;
}
input[type=radio] + label:before {
	border-radius:50%;
}
input[type=radio]:checked + label:before,
input[type="checkbox"]:checked + label:before {
	background: #4e4e50;
	border-color:#4e4e50;
	
	content:'✓';
	color:#fff;
	text-align:center;
}
input[type=radio]:checked + label:before {
	content:'•';
	font-size:30px;
	line-height:19px;
}
input[type=radio][disabled] + label,
input[type="checkbox"][disabled] + label,
input[type=radio][disabled] + label:before,
input[type="checkbox"][disabled] + label:before {
	font-style:italic;
	cursor: default;
}
input[type=radio][disabled] + label:before,
input[type="checkbox"][disabled] + label:before {
	cursor: default;
	font-style:normal;
	background: #d3d3d3 !important;
	border-color:#9c9ea0!important;
	color: #999 !important;
}


/*
 * Tableaux
 */
table {
	border: 0;
	padding: 0;
	margin: 10px 0 15px 0;
	border-collapse: collapse;
	width:100%;
}
th {
	padding: 5px; /* NOTE: th padding must be set explicitly in order to support IE */
	text-align: left;
	line-height: 1.5em;
	background-color: #555;
	color: #FFF;
	text-transform: none;
	font-weight: 700;
}
th a:link, th a:visited, th a:hover { color:#fff; }
tbody td { padding: 5px; }
td p:last-child, th p:last-child { margin-bottom:0; }



.TabData tbody td { border-top: 1px solid #E0E0E0; }
.TabData tbody tr:nth-child(2n) { background-color: #F7F7F7; }
.TabData tbody tr.paid { background-color: #99ff99; }
.TabData tbody tr:hover { background-color: #eee; }

.TabLignesAlt tbody tr:nth-child(2n-1) { background-color: #eee; }
.TabLignesAlt th > p:last-child,
.TabLignesAlt td > p:last-child { margin-bottom:0; }


/* Table sizing */
.t5  { width:5% }
.t10 { width:10% }
.t15 { width:14% }
.t20 { width:20% }
.t25 { width:25% }
.t30 { width:30% }
.t33 { width:33.333% }
.t35 { width:35% }
.t40 { width:40% }
.t45 { width:45% }
.t50 { width:50% }
.t55 { width:55% }
.t60 { width:60% }
.t65 { width:65% }
.t66 { width:66.666% }
.t70 { width:70% }
.t75 { width:75% }
.t80 { width:80% }
.t90 { width:90% }



/*
 * Boutons
 */
a.button,
a.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	transition: background-color 0.2s ease 0s;
	background:#957b37;
	color: #fff;
	border:0;
	border-radius: 0;
	padding: 15px;
	display: block;
	cursor: pointer;
	text-align:center;
	font-weight:700;
	text-transform: uppercase;
	text-decoration:none;
	margin: 30px auto 0;
	padding: 15px;
	width:100%;
	max-width:200px;
}

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	color:#fff;
	background:#636466;
}

.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
	width:100%;
	padding-left:5px !important;
	padding-right:5px !important;
	text-align:center;
}


/* Messages */
.msgInscription {
	margin-bottom:60px;
}
.msgInscription ul {
	padding:10px 20px;
	margin:0;
	list-style:none;
	border:1px solid #636363;
}
.msgInscription li {
	padding:0;
	margin:10px 0;
}
.msgInscription.erreur {
	color:#ff3448;
}
.msgInscription.succes {
	color:#31a3b0;
}



/* Conférences - page Programmation */
a.lienPrgCa:link,
a.lienPrgCa:visited,
a.lienPrgFr:link,
a.lienPrgFr:visited {
	background-color:#e53822;
	border-right:5px solid #e53822;
	font-size:1.2em; /* 18/15 */
	color:#fff;
	font-weight:700;
	display:table;
	padding:2px 5px;
	margin:0 auto;
	text-decoration:none;
	text-transform:uppercase;
	padding-right:22px;
	background-image:url(../img/ico_fleche_prg.png);
	background-position:right center;
}
a.lienPrgFr:link,
a.lienPrgFr:visited {
	background-color:#31a3b0;
	border-right-color:#31a3b0;
}
a.lienPrgCa:focus,
a.lienPrgFr:focus,
a.lienPrgCa:hover,
a.lienPrgFr:hover {
	background-color:#000;
	border-right-color:#000;
}



/* =============================================================================
   Misc Classes
   ========================================================================== */
/* Textes/paragraphes */
.vsmall { font-size: 85%; line-height:1.5; }
.small { font-size: 90%; line-height:1.5; } /* Comme plus haut */
.big { font-size: 125%; } /* Comme plus haut */

.alignerTxtG { text-align:left; }
.alignerTxtD { text-align:right; }
.alignerTxtC { text-align:center; }

.rouge { color:#942428!important; }
.vert { color:#2E8804!important; }
.caps, .ucase { text-transform:uppercase!important; }
.block { display:block; } /* <span> changement de ligne */

/* Images */
img.scale-with-grid { max-width:100%; height:auto; width:auto; }
.alignerImgG { margin-bottom:15px; float:left; margin-right:20px; }
.alignerImgD { margin-bottom:15px; float:right; margin-left:20px; }


/* Floats */
.floatG { float:left!important; }
.floatD { float:right!important; }


/* Boites avec un fond de couleur */
.boite_1 { position:relative; background-color: #F0F0F0; padding:10px; }
.boite_1 > *:first-child { margin-top:0; }
.boite_1 > *:last-child  { margin-bottom:0; }



/* Boites avec icône */
.boite_attention {
	position:relative;
	min-height:40px;
	color:#fff;
	background-color:#737373;
	border:1px solid #737373;
	padding:28px 18px 18px 18px; 
	margin-top:50px;
}
.boite_attention *,
.boite_attention a,
.boite_attention a:visited {
	color:#fff;
}
.boite_attention:after {
	content:url(../img/icones/attention.png);
	position:absolute;
	left:50%;
	top:-35px;
	margin-left:-28px;
}
.boite_attention > *:first-child { margin-top:0; }
.boite_attention > *:last-child  { margin-bottom:0; }


/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */
/* For image replacement */
.ir { background-color:transparent; border:0; overflow:hidden; *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; }

/* Affichage à l'impression seulement */
.print_only { display:none; }

/* 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:before, .clearfix:after { content:" "; display:table; }
.clearfix:after { clear:both; }
.clearfix { *zoom:1; }


/*
 * Skeleton V1.1
 * Skeleton.css
 * CSS du site de la TÉLUQ 2015
 * Grille CSS de base modifiée avec des % (fluide)
 * Programmeur : Andy Harvey
 */

*,
*:before,
*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-repeat: no-repeat;
}


/* #Base 960 Grid
================================================== */
.container                          { position: relative; width: 100%; margin: 0; padding: 0; }
.contentWrap                        { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0; }
.container .column                  { float: left; display: inline; position: relative; margin-left: 1%; margin-right: 1%; }
.row                                { margin-bottom: 10px; }

/* Nested column Classes */
.column.first                       { margin-left: 0; }
.column.last                        { margin-right: 0; }

/* Base Grid */
.container .g1.column               { width: 4.25%;  }
.container .g2.column               { width: 10.5%; }
.container .g3.column               { width: 16.75%; }
.container .g4.column               { width: 23.0%; }
.container .g5.column               { width: 29.25%; }
.container .g6.column               { width: 35.5%; }
.container .g7.column               { width: 41.75%; }
.container .g8.column               { width: 48.0%; }
.container .g9.column               { width: 54.25%; }
.container .g10.column              { width: 60.5%; }
.container .g11.column              { width: 66.75%; }
.container .g12.column              { width: 73.0%; }
.container .g13.column              { width: 79.25%; }
.container .g14.column              { width: 85.5%; }
.container .g15.column              { width: 91.75%; }
.container .g16.column              { width: 98.0%; }

.container .g1-3.column             { width: 31.33333333%; }
.container .g2-3.column             { width: 64.66666666%; }

/* Offsets */
.container .offset-by-1             { padding-left: 60px;  }
.container .offset-by-2             { padding-left: 120px; }
.container .offset-by-3             { padding-left: 180px; }
.container .offset-by-4             { padding-left: 240px; }
.container .offset-by-5             { padding-left: 300px; }
.container .offset-by-6             { padding-left: 360px; }
.container .offset-by-7             { padding-left: 420px; }
.container .offset-by-8             { padding-left: 480px; }
.container .offset-by-9             { padding-left: 540px; }
.container .offset-by-10            { padding-left: 600px; }
.container .offset-by-11            { padding-left: 660px; }
.container .offset-by-12            { padding-left: 720px; }
.container .offset-by-13            { padding-left: 780px; }
.container .offset-by-14            { padding-left: 840px; }
.container .offset-by-15            { padding-left: 900px; }


/* #Fluide 960 Grid
*  http://grids.heroku.com/fluid_grid.css?column_amount=16
*  Et ajustements : IE8+, et les autres supportant le box-sizing
   http://paulirish.com/2012/box-sizing-border-box-ftw/
================================================== */
.container .columnf { 
	float:left;
	display:inline;
	padding-left: 1%;
	padding-right: 1%;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}


.columnf.first { margin-left:0!important; padding-left:0!important; }
.columnf.last  { margin-right:0!important; padding-right:0!important; }

/* Base Grid */
.container .g100.columnf { width: 100.0%;  }
.container .g1-2.columnf { width: 50.0%;  }
.container .g1-3.columnf { width: 33.33%; }
.container .g2-3.columnf { width: 66.66%; }
.container .g1-4.columnf { width: 25.0%;  }
.container .g2-4.columnf { width: 50.0%;  }
.container .g3-4.columnf { width: 75.0%;  }
.container .g1-5.columnf { width: 20.0%;  }
.container .g1-5.columnf { width: 20.0%;  }
.container .g2-5.columnf { width: 40.0%;  }
.container .g3-5.columnf { width: 60.0%;  }
.container .g4-5.columnf { width: 80.0%;  }



/* #Clearing
================================================== */
.container:after,
.contentWrap:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearleft {
  clear: left;
}

/*  #Mobile (Portrait)
================================================== */

@media only screen and (max-width: 990px) {
	.contentWrap {
		max-width: 95%;
	}
}

@media only screen and (max-width: 767px) {
	.container { width: 100%; }
	
	/* #Fluide 960 Grid
	================================================== */
	
	.container .palm100.columnf { width: 100.0%; padding-left: 0; padding-right: 0; }
	.container .palm1-2.columnf { width: 50.0%;  }
	.container .palm1-3.columnf { width: 33.33%; }
	.container .palm2-3.columnf { width: 66.66%; }
	.container .palm1-4.columnf { width: 25.0%;  }
	.container .palm2-4.columnf { width: 50.0%;  }
	.container .palm3-4.columnf { width: 75.0%;  }	
}