/* < blank > */ /* Nicolas Taffin */ /* http://polylogue.com */ /* licence CC: BY-NC-SA */ /* Cette css contient des outils de base Blank - des outils de positionnement fins sont disponibles dans blank-gridTools.css - des éléments spécifiquements CSS3 sont dans blank-css3.css */ /****************************************/ /* generalités */ /****************************************/ /* reset / remise à zéro */ * { margin: 0em 0em 0em 0em; padding: 0em 0em 0em 0em; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, object, iframe, video, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0em 0em 0em 0em; padding: 0em 0em 0em 0em; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } html { height:100%; } body { height:100%; } a { color: inherit; text-decoration: none; } a:active, a:focus { outline:0 !important; } img { border: none; } img, object, embed { max-width: 100%; } a img { border: none; } sup, sub {line-height: 0em;} ul { list-style-type: none; } /* usuels */ .teou {border: 2px solid rgba(255,0,0,0.4);} .noBreaks, .insecable { white-space:nowrap; } .break, .cesure, .forceWrap { -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } /* clearfix */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /* or clearer */ .clearer, .nettoyeur, .cleaner { display: block; clear: both; height: 0em; line-height: 0em; overflow: hidden; } .spacer5, .espaceur5 { display: block; clear: both; height: 0.5em; line-height: 0em; overflow: hidden; } .spacer10, spacer, .espaceur10, .espaceur { display: block; clear: both; height: 1em; line-height: 0em; overflow: hidden; } .spacer20, .espaceur20 { display: block; clear: both; height: 2em; line-height: 0em; overflow: hidden; } .spacer25, .espaceur25 { display: block; clear: both; height: 2.5em; line-height: 0em; overflow: hidden; } .spacer30, .espaceur30 { display: block; clear: both; height: 3em; line-height: 0em; overflow: hidden; } .clearerRight, .cleanerRight, .nettoyeurDroite { display: block; clear: right; height: 0em; line-height: 0em; font-size: 0em; } .clearerLeft, .cleanerLeft, .nettoyeurGauche { display: block; clear: left; height: 0em; line-height: 0em; font-size: 0em; } .accessibilite, .accessibility { display: none; } .none { display: none; } .screenOnly { display: block; } .printOnly, .handHeldOnly { display: none; } /****************************************/ /* construction générale */ /****************************************/ html, body { height: 100%; } .wrapper, .enveloppe { float: left; } .content, .contenu { display: block; margin: 0em 0em 0em 0em; padding: 0em 0em 0em 0em; } body #page, body .page { display: block; } header, #header, #tete, .header, .tete { display: block; } footer, #footer, #pied, .footer, .pied { display: block; } #main, #ventre, .main, .ventre { display: block; /* position: relative; pour pouvoir y insérer des clearers */ } #headerWrapper, #enveloppeTete, .headerWrapper, .enveloppeTete { display: block; } #footerWrapper, #enveloppePied, .footerWrapper, .enveloppePied { display: block; } /* html5 */ nav {} /* navigation element */ aside {} /* highlight element */ section {} /* section element */ article {} /* article element */ hgroup {} /* header and subheader element */ figure {} figcaption {} mark {} /* interactive highlight element */ canvas {} video {} audio {} article, aside, figure, figcaption, footer, header, hgroup, menu, nav, section { display: block; } /****************************************/ /* modules */ /****************************************/ .banner, .banniere { display: block; } .block, .bloc { display: block; } .left, .gauche { float: left; } .right, .droite { float: right; } .center, .centre { margin-left: auto; margin-right: auto; } .left.margins, .gauche.marge { margin-top: 0.5em; margin-bottom: 0.7em; margin-right: 1em; } .right.margins, .droite.marge { margin-top: 0.5em; margin-bottom: 0.7em; margin-left: 1em; } .textLeft, .ferGauche { text-align: left; } .textRight, .ferDroite { text-align: right; } .textCenter, texteCentre { text-align: center; } .textJustify, texteJustifie { text-align: justify; } .auto { width: auto; height: auto; } .relative { position: relative; } .absolute { position: absolute; } .absoluteRight { position: absolute; right: 0em; } .absoluteRightMore { position: absolute; right: -20em; } .absoluteLeftMore { position: absolute; left: -20em; } .absoluteTopMore { position: absolute; top: -20em; } .absoluteBottomMore { position: absolute; bottom: -20em; } .fixed, .fixe { position: fixed; } .static, .statique { position: static; } .zzTop, .parDessus { z-index: 10000; } .tableLike { display: table; height: 100%; width: 100%; } .inlineTableLike { display: inline-table; height: 100%; width: 100%; } .rowLike { display: table-row; height: 100%; width: 100%; } .cellLike { display: table-cell; text-align: center; vertical-align: middle; } /***********************************/ /* for PHP developpers */ /***********************************/ pre.xdebug-var-dump { text-align: left; } /* Trois systèmes de positionement : 1. grosso modo grid : des parts comme pour un gateau 2. 12 grid : une vraie grille 12 colonnes qui s'adapte 3. à l'ancienne grid, en pixels, oui... */ /****************************************/ /* grosso modo grid */ /****************************************/ .full { width: 100%; } .pseudoFull { width: 99%; } .large { width: 70%; } .antiLarge { width: 28%; } .medium, .half, .moitie { width: 50%; } .antiMedium, .antiHalf, .antiMoitie { width: 48%; } .third, .tiers { width: 33%; } .antiThird, .antiTiers { width: 65%; } .quarter, .quart { width: 25%; } .antiQuarter, .antiQuart { width: 73%; } .small, petit { width: 20%; } .antiSmall, .antiPetit { width: 78%; } .tiny, toutPetit { width: 10%; } .antiTiny, antiToutPetit { width: 88%; } /****************************************/ /* fluid 12 grid */ /****************************************/ .grid { display: block; width: 100%; float: left; } .gridGuides { background: transparent url(2de7eac1add7b45daf4cb43bc5e4dfd30ef609c2.png)  0em 0em repeat-y; background-size: 100%; float: left; width: 100%; } .grid > * { display: block; float: left; margin-right: 2%; text-align: left; min-height: 2em; margin-bottom: 2em; } .grid > div:last-child, .grid .last { margin-right: 0; } /* cheating for safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { .grid > div:last-child, .grid .last { float: right; } } /* grid Width */ /* calculation rounding bug in safari and ie */ .grid .col1 { width: 6.5%; } .grid .col2 { width: 15%; } .grid .col3 { width: 23.5%; } .grid .col4 { width: 32%; } .grid .col5 { width: 40.5%; } .grid .col6 { width: 49%; } .grid .col7 { width: 57.5%; } .grid .col8 { width: 66%; } .grid .col9 { width: 74.5%; } .grid .col10 { width: 83%; } .grid .col11 { width: 91.5%; } .grid .col12 { width:100%; margin-right: 0%; margin-left: 0%; float: none; } /****************************************/ /* à l'ancienne grid */ /****************************************/ .width10, .taille10 { width: 10px; } .width20, .taille20 { width: 20px; } .width30, .taille30 { width: 30px; } .width40, .taille40 { width: 40px; } .width50, .taille50 { width: 50px; } .width60, .taille60 { width: 60px; } .width70, .taille70 { width: 70px; } .width80, .taille80 { width: 80px; } .width90, .taille90 { width: 90px; } .width100, .taille100 { width: 100px; } .width110, .taille110 { width: 110px; } .width120, .taille120 { width: 120px; } .width130, .taille130 { width: 130px; } .width140, .taille140 { width: 140px; } .width150, .taille150 { width: 150px; } .width160, .taille160 { width: 160px; } .width170, .taille170 { width: 170px; } .width180, .taille180 { width: 180px; } .width190, .taille190 { width: 190px; } .width200, .taille200 { width: 200px; } .width250, .taille250 { width: 250px; } .width300, .taille300 { width: 300px; } .width350, .taille350 { width: 350px; } .width400, .taille400 { width: 400px; } .width450, .taille450 { width: 450px; } .width500, .taille500 { width: 500px; } .width550, .taille550 { width: 550px; } .width600, .taille600 { width: 600px; } .width650, .taille650 { width: 650px; } .width700, .taille700 { width: 700px; } .width750, .taille750 { width: 750px; } .width800, .taille800 { width: 800px; } .width850, .taille850 { width: 850px; } .width900, .taille900 { width: 900px; } .width950, .taille950 { width: 950px; } .height10, .haut10 { height: 10px; } .height20, .haut20 { height: 20px; } .height30, .haut30 { height: 30px; } .height40, .haut40 { height: 40px; } .height50, .haut50 { height: 50px; } .height60, .haut60 { height: 60px; } .height70, .haut70 { height: 70px; } .height80, .haut80 { height: 80px; } .height90, .haut90 { height: 90px; } .height100, .haut100 { height: 100px; } .height110, .haut110 { height: 110px; } .height120, .haut120 { height: 120px; } .height130, .haut130 { height: 130px; } .height140, .haut140 { height: 140px; } .height150, .haut150 { height: 150px; } .height200, .haut200 { height: 200px; } .height250, .haut250 { height: 250px; } .height300, .haut300 { height: 300px; } .height350, .haut350 { height: 350px; } .height400, .haut400 { height: 400px; } .height500, .haut500 { height: 500px; } .height600, .haut600 { height: 600px; } .height700, .haut700 { height: 700px; } .height800, .haut800 { height: 800px; } .height900, .haut900 { height: 900px; }