/* -------------------------------------------------- typo.css Base typographique (c) 2010-2014 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net ----------------------------------------------------- */ html { font-size: 100.01%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ et http://forum.alsacreations.com/topic-4-54377-1.html [en] http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100 */ body { font-size: 1em; line-height: 1.3; } /* Fonts */ .font1 { font-family: serif; } .font2 { font-family: sans-serif; } .font3 { font-family: monospace; } .font4 { font-family: fantasy; } /* Titraille / Intertitres */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { display: block; margin: 0; padding: 0; font-size: 100%; font-weight: normal; } h1, .h1 { font-size: 2em; line-height: 1.5; margin-bottom: 0.75em; } h2, .h2 { font-size: 1.5em; line-height: 1; margin-bottom: 0.5em; } h3, .h3 { font-size: 1.35em; line-height: 1.2; margin-bottom: 0.2em; font-weight:700; } h4, .h4 { font-size: 1.1em; line-height: 1.364; margin-bottom: 0.2em; } h5, .h5 { font-size: 1em; font-weight: bold; } h6, .h6 { font-size: 1em; font-weight: bold; } h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small { font-size: 60%; line-height: 1; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; margin: 1.5em 0; border: solid; border-width: 1px 0 0; } /* Typographical enhancements */ em, i, .i { font-style: italic; } strong, b, .b { font-weight: bold; } mark, .mark { background: #ff0; color: #000; } .smaller { font-size: 75%; } small, .small { font-size: 80%; } big, .big { font-size: 130%; } .bigger { font-size: 175%; } .biggest { font-size: 200%; } abbr[title], acronym[title] { border-bottom: .1em dotted; cursor: help; } @media print { abbr[title] { border-bottom: 0; } abbr[title]:after { content: " (" attr(title) ")"; } } dfn, .dfn { font-weight: bold; font-style: italic; } s, strike, del, .del { opacity: .5; text-decoration: line-through; } ins, .ins { background-color: rgba(255, 255, 204, 0.5); text-decoration: none; } u, .u { text-decoration: underline; } sup, .sup, sub, .sub { position: relative; font-size: 80%; font-variant: normal; line-height: 0; vertical-align: baseline; } sup, .sup { top: -0.5em; } sub, .sub { bottom: -0.25em; } .lead { font-size: 120%; } .caps { font-variant: small-caps; } .quiet { color: #555555; } /* Alignement */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; text-justify: newspaper; } /* Lists */ ul { list-style-type: disc; } ul ul { list-style-type: circle; } ul ul ul { list-style-type: square; } ol { list-style-type: decimal; } ol ol { list-style-type: lower-alpha; } ol ol ol { list-style-type: lower-greek; } ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; } ol, ul { margin-left: 1em; -webkit-margin-before: 0; -webkit-margin-after: 0; } dt { font-weight: bold; } dd { margin-left: 1em; } .list-none { margin-left: 0; list-style: none; } .list-none li:before { content: ''; } .list-square { margin-left: 1em; list-style: square; } .list-square li:before { content: ''; } .list-disc { margin-left: 1em; list-style: disc; } .list-disc li:before { content: ''; } .list-circle { margin-left: 1em; list-style: circle; } .list-circle li:before { content: ''; } .list-decimal { margin-left: 1em; list-style: decimal; } .list-decimal li:before { content: ''; } .list-inline { margin-left: 0; } .list-inline li { display: inline-block; margin: 0; margin-right: 1em; } .list-inline li:Last-Child { margin-right: 0; } .list-inline.list-inline-sep li { margin-right: 0; } .list-inline.list-inline-sep li:after { content: " | "; } .list-inline.list-inline-sep li:Last-Child:after { content: ''; } .list-inline.list-inline-dash li { margin-right: 0; } .list-inline.list-inline-dash li:after { content: " - "; } .list-inline.list-inline-dash li:Last-Child:after { content: ''; } .list-inline.list-inline-comma li { margin-right: 0; } .list-inline.list-inline-comma li:after { content: ", "; } .list-inline.list-inline-comma li:Last-Child:after { content: ". "; } .list-block li { display: block; margin-right: 0; } /* Tableaux */ table { max-width: 100%; border-collapse: collapse; border-spacing: 0; } .table { width: 100%; } .table caption, table.spip caption, .table th, table.spip th, .table td, table.spip td { padding: 0.375em; } .table caption, table.spip caption { font-weight: bold; text-align: left; border-bottom: 2px solid; } .table th, table.spip th { font-weight: bold; } .table th, table.spip th, .table td, table.spip td { border-bottom: 1px solid; } .table thead th, table.spip thead th { vertical-align: bottom; } .table tbody tr:hover td { background-color: rgba(34, 34, 34, 0.050000000000000044); } .table tfoot { font-style: italic; } .table tfoot td { border-bottom: 0; vertical-align: top; } @media (max-width:640px) { .table-responsive { width: 100%; overflow-y: hidden; overflow-x: scroll; margin-bottom: 1.5em; } .table-responsive table { width: 100%; margin-bottom: 0; } .table-responsive thead, .table-responsive tbody, .table-responsive tfoot, .table-responsive tr, .table-responsive th, .table-responsive td { white-space: nowrap; } } /* Quotes, code et poetry */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } :lang(en) > q { quotes: "\201C" "\201D" "\2018" "\2019"; } :lang(fr) > q { quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019"; } :lang(es) > q { quotes: "\00AB" "\00BB" "\201C" "\201D"; } :lang(it) > q { quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D"; } :lang(de) > q { quotes: "\00BB" "\00AB" "\203A" "\2039"; } :lang(no) > q { quotes: "\00AB\A0" "\A0\00BB" "\2039" "\203A"; } /* [en] http://en.wikipedia.org/wiki/International_variation_in_quotation_marks */ q:before { content: open-quote; } q:after { content: close-quote; } blockquote { position: relative; padding-left: 1.5em; border: solid rgba(34, 34, 34, 0.19999999999999996); border-width: 0 0 0 5px; } blockquote:before { z-index: -1; position: absolute; left: 0; top: 0; content: "\00AB"; line-height: 0; font-size: 10em; color: rgba(34, 34, 34, 0.09999999999999998); } cite, .cite { font-style: italic; } address { font-style: italic; } pre, code, kbd, samp, var, tt { font-family: monospace; font-size: 1em; } pre { white-space: pre-wrap; word-break: break-all; word-wrap: break-word; } kbd { white-space: nowrap; padding: .1em .3em; background-color: #eee; border: 1px solid #aaa; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset; color: #333; } samp { font-weight: bold; } var { font-style: italic; } /* Box */ .box { display: block; margin-bottom: 1.5em; padding: 1.5em 1.5em; padding-bottom: .1em; border: 1px solid; } @media print { .box { border: 1px solid !important; } } @media (min-width:640px) { .box.right { width: 33%; margin-left: 1em; } .box.left { width: 33%; margin-right: 1em; } .box.center { width: 75%; } } /* Paragraphes */ p, .p, ul, ol, dl, dd, blockquote, address, pre, .table, fieldset { margin-bottom: 0.6em; } /* Typographie pour petites ecrans [fr] http://www.alsacreations.com/astuce/lire/1177 */ @media (max-width:640px) { /* Fixer une largeur maximale de 100 % aux elements potentiellement problematiques */ /*img,*//* je suis pas d'accord pour img, au contraire ça fait des soucis avec photoswipe par exemple, juste à cause du !important qui est un peu péremptoire */ table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; } /* Gestion des mots longs */ textarea, table, td, th, pre, code, samp { word-wrap: break-word; /* cesure forcee */ } pre, code, samp { white-space: pre-line; /* Passage a la ligne specifique pour les elements a chasse fixe */ } } /* Orientation iOS5 font-size fix */ @media (orientation:landscape) and (max-device-width:640px) { html, body { -webkit-text-size-adjust: 100%; } } /* Style pour l'impression (HTML5 Boilerplate) Inlined to avoid required HTTP connection: h5bp.com/r */ @media print { pre, blockquote { page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } @page { margin: 2cm .5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* fin */