themes/baggy/css/ratatouille.css

   1 /*
   2   Ratatouille mini Framework css by Thomas LEBEAU
   3   Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations
   4   and normalize.css
   5 */
   6
   7 * {
   8   -webkit-box-sizing: border-box;
   9      -moz-box-sizing: border-box;
  10           box-sizing: border-box;
  11 }
  12
  13 html {
  14   font-family: sans-serif; /* 1 */
  15   -ms-text-size-adjust: 100%; /* 2 */
  16   -webkit-text-size-adjust: 100%; /* 2 */
  17 }
  18
  19 body {
  20   font-size: 1em;
  21   line-height:1.5;
  22   margin: 0;
  23 }
  24
  25 /* ==========================================================================
  26    Mise en forme
  27    ========================================================================== */
  28
  29 h1:first-child,
  30 h2:first-child,
  31 h3:first-child,
  32 h4:first-child,
  33 h5:first-child,
  34 h6:first-child,
  35 p:first-child,
  36 ul:first-child,
  37 ol:first-child,
  38 dl:first-child{
  39   margin-top: 0;
  40 }
  41
  42 code,
  43 kbd,
  44 pre,
  45 samp {
  46     font-family: monospace, serif;
  47 }
  48
  49 pre {
  50     white-space: pre-wrap;
  51 }
  52
  53
  54 .upper {
  55   text-transform: uppercase;
  56 }
  57
  58 .bold {
  59   font-weight: bold;
  60 }
  61
  62 .inner {
  63   margin: 0 auto;
  64   max-width: 61.25em;/*980px*/
  65 }
  66
  67 table, img {
  68   max-width: 100%;
  69   height :auto;
  70 }
  71
  72 iframe {
  73   max-width: 100%;
  74 }
  75
  76 .fl {
  77   float: left;
  78 }
  79
  80 .fr {
  81   float: right;
  82 }
  83
  84 table {
  85   border-collapse: collapse;
  86 }
  87
  88 figure {
  89   margin: 0;
  90 }
  91
  92 button,
  93 input,
  94 select,
  95 textarea {
  96     font-family: inherit;
  97     font-size: 100%;
  98     margin: 0;
  99 }
 100
 101 input[type="search"] {
 102     -webkit-appearance: textfield;
 103 }
 104
 105 /* ==========================================================================
 106    Mise en page
 107    ========================================================================== */
 108
 109 .dib {
 110   display: inline-block;
 111   vertical-align: middle;
 112 }
 113
 114 .dnone {
 115   display: none;
 116 }
 117
 118 .dtable { display:table }
 119
 120   .dtable > * { display:table-row; }
 121
 122     .dtable > * > * { display:table-cell; }
 123
 124 .element-invisible {
 125   border: 0;
 126   clip: rect(0 0 0 0);
 127   height: 1px;
 128   margin: -1px;
 129   overflow: hidden;
 130   padding: 0;
 131   position: absolute;
 132   width: 1px;
 133 }
 134
 135 .small {
 136   font-size:0.8em;
 137 }
 138
 139 .big {
 140   font-size: 1.2em;
 141 }
 142
 143 /*Width*/
 144
 145 .w100 { width:100%; }
 146 .w90 { width:90%; }
 147 .w80 { width:80%; }
 148 .w70 { width:70%; }
 149 .w60 { width:60%; }
 150 .w50 { width:50%; }
 151 .w40 { width:40%; }
 152 .w30 { width:30%; }
 153 .w20 { width:20%; }
 154 .w10 { width:10%; }
 155
 156
 157 /* ==========================================================================
 158    Internet Explorer
 159    ========================================================================== */
 160
 161 /*IE8 and IE9*/
 162
 163 article,
 164 aside,
 165 details,
 166 figcaption,
 167 figure,
 168 footer,
 169 header,
 170 hgroup,
 171 main,
 172 nav,
 173 section,
 174 summary {
 175     display: block;
 176 }
 177
 178 /*IE8 and IE9*/
 179
 180 audio,
 181 canvas,
 182 video {
 183     display: inline-block;
 184 }
 185
 186 @media screen and (-webkit-min-device-pixel-ratio:0){
 187   select{
 188     -webkit-appearance: none;
 189     border-radius: 0;
 190   }
 191 }
 192
 193 /* ==========================================================================
 194    Medias Queries
 195    ========================================================================== */
 196
 197 /*Desktop 1080px*/
 198
 199 @media screen and (max-width: 67.50em) {
 200 }
 201
 202 /*Tablet 800px*/
 203
 204 @media screen and (max-width: 50em) {
 205 }
 206
 207 /*Mobile 640px*/
 208
 209 @media screen and (max-width: 40em) {
 210 }
 211