123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277 |
- /*
- Ratatouille mini Framework css by Thomas LEBEAU
- Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations
- and normalize.css
- */
- /* ==========================================================================
- Sommaire
- 1 = Mise en Forme
- 2 = Mise en Page
- 3 = Internet Explorer
- 4 = Responsives elements
- ========================================================================== */
- /* ==========================================================================
- 1 = Mise en forme
- ========================================================================== */
- * {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- html {
- font-family: sans-serif; /* 1 */
- -ms-text-size-adjust: 100%; /* 2 */
- -webkit-text-size-adjust: 100%; /* 2 */
- }
- body {
- font-size: 1em;
- line-height:1.5;
- margin: 0;
- }
- h1:first-child,
- h2:first-child,
- h3:first-child,
- h4:first-child,
- h5:first-child,
- h6:first-child,
- p:first-child,
- ul:first-child,
- ol:first-child,
- dl:first-child{
- margin-top: 0;
- }
- code,
- kbd,
- pre,
- samp {
- font-family: monospace, serif;
- }
- pre {
- white-space: pre-wrap;
- }
- .upper {
- text-transform: uppercase;
- }
- .bold {
- font-weight: bold;
- }
- .inner {
- margin: 0 auto;
- max-width: 61.25em;/*980px*/
- }
- table, img {
- max-width: 100%;
- height :auto;
- }
- iframe {
- max-width: 100%;
- }
- .fl {
- float: left;
- }
- .fr {
- float: right;
- }
- table {
- border-collapse: collapse;
- }
- figure {
- margin: 0;
- }
- button,
- input,
- select,
- textarea {
- font-family: inherit;
- font-size: 100%;
- margin: 0;
- }
- input[type="search"] {
- -webkit-appearance: textfield;
- }
- input::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
- @media screen and (-webkit-min-device-pixel-ratio:0){
- select{
- -webkit-appearance: none;
- border-radius: 0;
- }
- }
- /* ==========================================================================
- 2 = Mise en page
- ========================================================================== */
- .ul-reset {
- margin: 0;
- padding: 0;
- }
- .ul-reset li {
- list-style: none;
- }
- .dib {
- display: inline-block;
- vertical-align: middle;
- }
- .dblock { display: block; }
- .dnone { display: none; }
- .dtable { display:table }
- .dtable > * { display:table-row; }
- .dtable > * > * { display:table-cell; }
- .element-invisible {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- }
- .x-text-small { font-size:x-small; }
- .text-small { font-size:small; }
- .text-large { font-size:large; }
- .x-text-large { font-size:x-large; }
- h1,
- .h1 {
- font-size: 2.5em;
- }
- h2,
- .h2 {
- font-size: 1.8em;
- }
- h3,
- .h3 {
- font-size: 1.4em;
- }
- h4,
- .h4 {
- font-size: 1.2em;
- }
- h5,
- .h5 {
- font-size: 1em;
- }
- h6,
- .h6 {
- font-size: 0.8em;
- }
- /*Table*/
- table {
- color: #999;
- min-width: 100%;
- text-align: left;
- }
- table thead {
- background: #CCC;
- }
- table td, table th {
- padding: 0.5em;
- color: #333;
- border-color: #999;
- }
- .box {
- padding: 1.5em;
- }
- code {
- background: #EEE;
- color: #666;
- padding: 0.4em;
- }
- /* ==========================================================================
- 3 = Internet Explorer
- ========================================================================== */
- /*IE8 and IE9*/
- article,
- aside,
- details,
- figcaption,
- figure,
- footer,
- header,
- hgroup,
- main,
- nav,
- section,
- summary {
- display: block;
- }
- /*IE8 and IE9*/
- audio,
- canvas,
- video {
- display: inline-block;
- }
- img {
- border: 0;
- }
- /* ==========================================================================
- 4 = Responsives Elements
- ========================================================================== */
- @media screen and (max-width: 61.25em) {
- .responsiveTable {
- overflow-x: scroll;
- -webkit-overflow-scrolling: touch;
- }
- }
- *[data-width] {
- width: attr(data-width);
- }
|