/*
 * 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
 */

/*
 * http://css-tricks.com/snippets/html/responsive-meta-tag/
 */
@-ms-viewport{
	width: device-width;
}

*,
*: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: 1280px; margin: 0 auto; padding: 0 100px; }
	.no-mediaqueries .contentWrap       { min-width: 700px; } /* Styles desktop IE8 */
	.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
================================================== */

    /* Self Clearing Goodness */
    .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;
    }



/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */
@media only screen and (max-width: 1023px) {
	


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

/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	.container { width: 100%; }
	.container .column { margin: 0 3%; }
	
	.contentWrap {
		padding-left:20px;
		padding-right:20px;
	}

	.container .g1.column,
	.container .g2.column,
	.container .g3.column,
	.container .g4.column,
	.container .g5.column,
	.container .g6.column,
	.container .g7.column,
	.container .g8.column,
	.container .g9.column,
	.container .g10.column,
	.container .g11.column,
	.container .g12.column,
	.container .g13.column,
	.container .g14.column,
	.container .g15.column,
	.container .g16.column,
	.container .g1-3.column,
	.container .g2-3.column  { width: 94%; }

	/* Offsets */
	.container .offset-by-1,
	.container .offset-by-2,
	.container .offset-by-3,
	.container .offset-by-4,
	.container .offset-by-5,
	.container .offset-by-6,
	.container .offset-by-7,
	.container .offset-by-8,
	.container .offset-by-9,
	.container .offset-by-10,
	.container .offset-by-11,
	.container .offset-by-12,
	.container .offset-by-13,
	.container .offset-by-14,
	.container .offset-by-15 { padding-left: 0; }
	
	
	
	/* #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%;  }
	
	
	
	
}


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
}