/*
 * Layout.css
 * CSS du site de la TÉLUQ 2016
 * Styles de menus, positionnements, footer, etc.
 * Programmeur : Andy Harvey
 */

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries */

/* #Site Styles
================================================== */
* { background-repeat:no-repeat; }
body { background-color:#fff; }

/*
 * Menu du haut et plan du site
 */
/*
 * Menu du haut site TÉLUQ
 */
.bgLogoHeader {
	background-color:#000;
	border-bottom:7px solid #fff;
}
.bgLogoHeader > .contentWrap {
	display:table;
	width:100%;
	max-width:960px;
	margin:0 auto;
}
#LogoTeluq {
	display:table-cell;
	width:137px;
	height:81px; /* Plus haut que l'image */
	z-index:150;
	margin:0;
	padding-left:15px;
	vertical-align:middle;
}
#LogoTeluq a:focus {
	display:block;
	outline:1px dotted #fff;
}
#TopNav {
	display:table-cell;
	vertical-align:middle;
	text-align:right;
	padding:5px 15px 5px 0;
	font-size:16px;
	font-weight:600;
}
#TopNav, 
#TopNav a { color:#fff; text-decoration:none; margin-left:30px; outline:0; }
#TopNav a:first-child { margin-left:0; }
#TopNav a:focus,
#TopNav a:hover { text-decoration:underline; }



/* Slide Entete */
.page_wrapper.entete {
	background:url(../../img/bg_entete.jpg) no-repeat #000;
	background-size:cover;
}

.page_wrapper.entete .content {
	text-align:center;
	padding-top:100px;
	padding-bottom:100px;
}
.titrePage {
	display:inline-block;
	text-indent:-99999em;
	background-image:url(../../img/collation-grades.svg);
	width:205px;
	height:133px;
	color:#fff;
	margin:0;
}


#Page {
	
}
#Page > .contentWrap  {
	background-color:#fff;
	position:relative;
	padding-bottom:50px;
}
#Page > .contentWrap.sansBas  {
	padding-bottom:0;
}

.titreFormulaire {
	font-weight:600;
	margin-top:50px;
}



/* Footer des pages */
#Copyrights {
	padding:20px 0;
	font-size:0.85em;
	line-height:1.5em;
	background-color:#424242;
}
#Copyrights ul, 
#Copyrights p, 
#Copyrights a {
	color:#fff;
}


@media only screen and (max-width: 767px) {
	#Page > .contentWrap  {
		padding-bottom:25px;
	}
	.titreFormulaire {
		margin-top:25px;
	}
}

@media only screen and (max-width: 480px) {
	.page_wrapper.entete .content {
		padding-top:60px;
		padding-bottom:60px;
	}
	
	.titrePage {
		width:135px; /* 205px */
		height:139px; /* 210px */
		background-size:cover;
	}
}


@media only screen and (min-width: 1600px) {
	.page_wrapper.entete .content {
		padding-top:160px;
		padding-bottom:160px;
	}
}


/* Styles d'impression */
@media print {
	/* Black prints faster: h5bp.com/s */
	* { background: transparent !important; color: black !important; border-color:black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
	
	/* Liens */
	a, a:visited { text-decoration: underline !important; }
	a[href]:after { content: " (http://www.teluq.ca" attr(href) ")"; }
	a[href^="http://"]:after, a[href^="https://"]:after, a[href^="mailto:"]:after  { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	
	/* Don't show links for images, or javascript/internal links, ni les liens avec la classe "nlp" */
	.ir a:after, a.nlp:after, 
	a[href^="javascript:"]:after, 
	a[href^="#"]:after, 
	#LogoHeader a:after,
	#FilAriane a:after,
	#Copyrights a:after { content: "" !important; }
	
	/* Liens avec un background-image retiré pour l'impression */
	a.pdf, a.pdf2, a.doc, a.web { padding-right:0; background-image:none; }
	.ico_pdf, .ico_pdf2, .ico_doc, .ico_web { width:auto; height:auto; display:inline; }
	.ico_pdf:before, .ico_pdf2:before { content: "PDF"; }
	.ico_doc:before { content: "Word"; }
	.ico_web:before { content: "Web"; }
	
	/* Contenu */
	blockquote { border: 1px solid #000; margin:10px 0; width:auto; page-break-inside: avoid; }
	fieldset { border: 1px solid #000; margin:10px 0; width:auto; }
	thead { display: table-header-group; }
	tr, img { page-break-inside: avoid; }
	img { max-width:100% !important; }
	@page { margin: 1cm; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
	h2 { padding:0; background-color:transparent; }
	
	/* Ajustements du layout/contenu */
	#Page { width:auto; margin:0; padding:0; }
	#LogoHeader { padding-left:10px; }
	#Page > .contentWrap > header { width:100%; }
	.bgLogoHeader { border-bottom:0; }
	#Copyrights { border-top:1px solid #000; }
	
	
	/* On cache les zones non importantes à l'impression */
	#NavPrincipal,	#LiensFooter, 
	#ZoneMenuPrincipal, .navFooter {display:none!important;}
	
	/* Grid Layout ajustements */
	.container, .row, .column { float:none !important; display:block !important; width:100% !important; margin-left:0; margin-right:0 }
	.container .columnf { padding-left: 2%; padding-right: 2%; }
	.print_only { display:block!important; visibility:visible!important; }
	.screen_only { display:none!important; }
	
	hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
}