/* --------------------------------------------------------------
   grid.css - mirror version of src/grid.css
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 830px;
  margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(grid.png); 
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {
  float: left;
  margin-right: 10px;
}

/* la dernière colonne d'une rangée doit contenir cette classe. */
.last, div.last { margin-right: 0; }

/* Utiliser ces classes pour paramétrer la largeur des colonnes. */
.span-1 {width: 30px;}
.span-2 {width: 70px;}
.span-3 {width: 110px;}
.span-4 {width: 150px;}
.span-5 {width: 190px;}
.span-6 {width: 230px;}
.span-7 {width: 270px;}
.span-8 {width: 310px;}
.span-9 {width: 350px;}
.span-10 {width: 390px;}
.span-11 {width: 430px;}
.span-12 {width: 470px;}
.span-13 {width: 510px;}
.span-14 {width: 550px;}
.span-15 {width: 590px;}
.span-16 {width: 630px;}
.span-17 {width: 670px;}
.span-18 {width: 710px;}
.span-19 {width: 750px;}
.span-20 {width: 790px;}
.span-21 {width: 830px;}
.span-22 {width: 870px;}
.span-23 {width: 910px;}
.span-24 { width:950px;}
.span-25 { width:990px;}
.span-26, div.span-26 { width:1030px; margin:0; }

/* Utiliser ces class pour parmamétrer la case input (champs de saisie) dans un formulaire. */
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {
  border-left-width: 1px!important;
  border-right-width: 1px!important;
  padding-left: 5px!important;
  padding-right: 5px!important;
}

input.span-1, textarea.span-1 { width: 18px!important; }
input.span-2, textarea.span-2 { width: 58px!important; }
input.span-3, textarea.span-3 { width: 98px!important; }
input.span-4, textarea.span-4 { width: 138px!important; }
input.span-5, textarea.span-5 { width: 178px!important; }
input.span-6, textarea.span-6 { width: 218px!important; }
input.span-7, textarea.span-7 { width: 258px!important; }
input.span-8, textarea.span-8 { width: 298px!important; }
input.span-9, textarea.span-9 { width: 338px!important; }
input.span-10, textarea.span-10 { width: 378px!important; }
input.span-11, textarea.span-11 { width: 418px!important; }
input.span-12, textarea.span-12 { width: 458px!important; }
input.span-13, textarea.span-13 { width: 498px!important; }
input.span-14, textarea.span-14 { width: 538px!important; }
input.span-15, textarea.span-15 { width: 578px!important; }
input.span-16, textarea.span-16 { width: 618px!important; }
input.span-17, textarea.span-17 { width: 658px!important; }
input.span-18, textarea.span-18 { width: 698px!important; }
input.span-19, textarea.span-19 { width: 738px!important; }
input.span-20, textarea.span-20 { width: 778px!important; }
input.span-21, textarea.span-21 { width: 818px!important; }
input.span-22, textarea.span-22 { width: 858px!important; }
input.span-23, textarea.span-23 { width: 898px!important; }
input.span-24, textarea.span-24 { width: 938px!important; }
input.span-25, textarea.span-25 { width: 978px!important; }
input.span-26, textarea.span-26 { width: 1018px!important; }

/* Ajouter ces classes à une colonne pour ajouter une colonne vide à gauche. */

.append-1 { padding-right: 40px;}
.append-2 { padding-right: 80px;}
.append-3 { padding-right: 120px;}
.append-4 { padding-right: 160px;}
.append-5 { padding-right: 200px;}
.append-6 { padding-right: 240px;}
.append-7 { padding-right: 280px;}
.append-8 { padding-right: 320px;}
.append-9 { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}
.append-24 { padding-right: 960px;}
.append-25 { padding-right: 1000px;}

/* Ajouter ces classes à une colonne pour ajouter une colonne vide à gauche. */

.prepend-1 { padding-left: 40px;}
.prepend-2 { padding-left: 80px;}
.prepend-3 { padding-left: 120px;}
.prepend-4 { padding-left: 160px;}
.prepend-5 { padding-left: 200px;}
.prepend-6 { padding-left: 240px;}
.prepend-7 { padding-left: 280px;}
.prepend-8 { padding-left: 320px;}
.prepend-9 { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}
.prepend-24{ padding-left: 960px;}
.prepend-25 { padding-left: 1000px;}


/* Bordure (filet) à droite d'une colonne. Border on right hand side of a column. */
div.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Un filet avec un espace plus grand. Border with more whitespace, spans one column. */
div.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}


/* Utiliser ces classes pour chevaucher ou tirer une colonne vers une autre colonne. Use these classes on an element to push it into the 
next column, or to pull it into the previous column.  */


.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
.pull-6 { margin-left: -240px; }
.pull-7 { margin-left: -280px; }
.pull-8 { margin-left: -320px; }
.pull-9 { margin-left: -360px; }
.pull-10 { margin-left: -400px; }
.pull-11 { margin-left: -440px; }
.pull-12 { margin-left: -480px; }
.pull-13 { margin-left: -520px; }
.pull-14 { margin-left: -560px; }
.pull-15 { margin-left: -600px; }
.pull-16 { margin-left: -640px; }
.pull-17 { margin-left: -680px; }
.pull-18 { margin-left: -720px; }
.pull-19 { margin-left: -760px; }
.pull-20 { margin-left: -800px; }
.pull-21 { margin-left: -840px; }
.pull-22 { margin-left: -880px; }
.pull-23 { margin-left: -920px; }
.pull-24 { margin-left: -960px; }
.pull-25 { margin-left: -1000px; }
.pull-26 { margin-left: -1040px; }

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}


.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 { margin: 0 -240px 1.5em 240px; }
.push-7 { margin: 0 -280px 1.5em 280px; }
.push-8 { margin: 0 -320px 1.5em 320px; }
.push-9 { margin: 0 -360px 1.5em 360px; }
.push-10 { margin: 0 -400px 1.5em 400px; }
.push-11 { margin: 0 -440px 1.5em 440px; }
.push-12 { margin: 0 -480px 1.5em 480px; }
.push-13 { margin: 0 -520px 1.5em 520px; }
.push-14 { margin: 0 -560px 1.5em 560px; }
.push-15 { margin: 0 -600px 1.5em 600px; }
.push-16 { margin: 0 -640px 1.5em 640px; }
.push-17 { margin: 0 -680px 1.5em 680px; }
.push-18 { margin: 0 -720px 1.5em 720px; }
.push-19 { margin: 0 -760px 1.5em 760px; }
.push-20 { margin: 0 -800px 1.5em 800px; }
.push-21 { margin: 0 -840px 1.5em 840px; }
.push-22 { margin: 0 -880px 1.5em 880px; }
.push-23 { margin: 0 -920px 1.5em 920px; }
.push-24 { margin: 0 -960px 1.5em 960px; }
.push-25 { margin: 0 -1000px 1.5em 1000px; }
.push-26 { margin: 0 -1040px 1.5em 1000px; }

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: right; position:relative;}


/* Diverses classes et éléments. Misc classes and elements
-------------------------------------------------------------- */

/* Au cas ou vous avez besoin d'une gouttière (un espace) au-dessus ou au-dessous d'un élément. In case you need to add a gutter above/below an element */
.prepend-top { 
  margin-top:1.5em; 
}
.append-bottom { 
  margin-bottom:1.5em; 
}

/* Utiliser la classe .box pour créer une "padded box" à l'intérieure d'une colonne. Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

/* Utiliser cette balise pour créer un filet horizontale dans une colonne. Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
  overflow:hidden; 
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }