css/habillage.css

   1 @charset "UTF-8";
   2 html, body, div, span, applet, object, iframe,
   3 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   4 a, abbr, acronym, address, big, cite, code,
   5 del, dfn, em, img, ins, kbd, q, s, samp,
   6 small, strike, strong, sub, sup, tt, var,
   7 b, u, i, center,
   8 dl, dt, dd, ol, ul, li,
   9 fieldset, form, label, legend,
  10 table, caption, tbody, tfoot, thead, tr, th, td,
  11 article, aside, canvas, details, embed,
  12 figure, figcaption, footer, header, hgroup,
  13 menu, nav, output, ruby, section, summary,
  14 time, mark, audio, video {
  15   margin: 0;
  16   padding: 0;
  17   border: 0;
  18   font: inherit;
  19   font-size: 100%;
  20   vertical-align: baseline;
  21   font-family: sans-serif;
  22   color: #1a0583;
  23   text-align: left; }
  24
  25 html, body, span, applet, object, iframe,
  26 blockquote, pre,
  27 abbr, acronym, address, big, cite, code,
  28 del, dfn, em, ins, kbd, q, s, samp,
  29 small, strike, strong, sub, sup, tt, var,
  30 dl, dt, dd, ol, ul, li,
  31 fieldset, form, label, legend,
  32 table, caption, tbody, tfoot, thead, tr, th, td,
  33 article, aside, canvas, details, embed,
  34 figure, figcaption, hgroup,
  35 menu, nav, output, ruby, summary, mark, audio, video {
  36   background-color: #ffffff; }
  37
  38 html {
  39   line-height: 1; }
  40
  41 ol, ul {
  42   list-style: none; }
  43
  44 table {
  45   border-collapse: collapse;
  46   border-spacing: 0; }
  47
  48 caption, th, td {
  49   text-align: left;
  50   font-weight: normal;
  51   vertical-align: middle; }
  52
  53 q, blockquote {
  54   quotes: none; }
  55
  56 q:before, q:after, blockquote:before, blockquote:after {
  57   content: "";
  58   content: none; }
  59
  60 a img {
  61   border: none; }
  62
  63 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  64   display: block; }
  65
  66 * {
  67   -moz-box-sizing: border-box;
  68   -webkit-box-sizing: border-box;
  69   box-sizing: border-box; }
  70
  71 body {
  72   margin: 0;
  73   padding: 0; }
  74
  75 header {
  76   margin: 0 auto;
  77   width: 100%; }
  78
  79 header img {
  80   margin-left: 120px; }
  81
  82 #wrap {
  83   padding-top: 20px;
  84   width: 1100px;
  85   margin: 0 auto; }
  86
  87 a {
  88   text-decoration: none; }
  89
  90 a:focus, a:hover, a:active {
  91   background: none;
  92   color: #1a0583; }
  93
  94 h1 {
  95   margin: 0;
  96   padding: 0;
  97   padding-top: 15px;
  98   padding-left: 15px;
  99   font-size: 1.9em;
 100   display: inline-block; }
 101
 102 h2 {
 103   margin: 15px 15px;
 104   font-size: 1.3em;
 105   display: inline-block; }
 106
 107 h3 {
 108   margin: 15px;
 109   display: inline-block; }
 110
 111 p {
 112   margin: 0 15px;
 113   text-decoration: none;
 114   text-align: justify; }
 115
 116 /*1ERE COLONNE*/
 117 #ateliers {
 118   margin: 0 10px; }
 119
 120 #ateliers:after {
 121   content: "";
 122   /* Important, sinon l'élément n'est pas généré. */
 123   display: table;
 124   clear: both; }
 125
 126 #ateliers ul {
 127   padding: 0;
 128   margin: 0;
 129   list-style-type: none; }
 130
 131 #ateliers ul li {
 132   height: 300px;
 133   margin-bottom: 15px;
 134   background-color: #2bc7cd; }
 135
 136 #ateliers p {
 137   margin: 15px 15px 0 15px;
 138   font-size: 1.3em;
 139   font-weight: bold;
 140   text-align: left; }
 141
 142 #ateliers p:nth-child(2) {
 143   margin: 0px 15px 15px 15px; }
 144
 145 /*2EME COLONNE*/
 146 #news {
 147   margin: 0 10px 10px 10px;
 148   overflow: hidden; }
 149
 150 #news img {
 151   height: 350px; }
 152
 153 .article {
 154   background-color: #ffaa7f; }
 155
 156 /*3EME COLONNE*/
 157 .map {
 158   background-color: #6059d2;
 159   height: 300px;
 160   margin: 0 0 15px 10px; }
 161
 162 .agenda {
 163   background-color: #3ee88d;
 164   height: 500px;
 165   margin: 0 0 0px 10px;
 166   padding-right: 10px; }
 167
 168 .agenda p {
 169   line-height: 120%; }
 170
 171 .agenda ul {
 172   list-style-type: none;
 173   padding: 0;
 174   margin: 0;
 175   padding-top: 15px; }
 176
 177 .date {
 178   float: left;
 179   font-size: 1.7em; }
 180
 181 /*RESPONSIVE*/
 182 .col-2,
 183 .col-4,
 184 .col-6,
 185 .col-8,
 186 .col-10,
 187 .col-12 {
 188   float: left;
 189   position: relative; }
 190
 191 .row:before, .row:after {
 192   content: "";
 193   display: table; }
 194
 195 .row:after {
 196   clear: both; }
 197
 198 .row {
 199   margin: 0 -10px;
 200   zoom: 1; }
 201
 202 .col-1 {
 203   width: 8.33333%; }
 204
 205 .col-2 {
 206   width: 16.66667%; }
 207
 208 .col-3 {
 209   width: 25%; }
 210
 211 .col-4 {
 212   width: 33.33333%; }
 213
 214 .col-5 {
 215   width: 41.66667%; }
 216
 217 .col-6 {
 218   width: 50%; }
 219
 220 .col-7 {
 221   width: 58.33333%; }
 222
 223 .col-8 {
 224   width: 66.66666%; }
 225
 226 .col-9 {
 227   width: 75%; }
 228
 229 .col-10 {
 230   width: 83.33333%; }
 231
 232 .col-11 {
 233   width: 91.66667%; }
 234
 235 .col-12 {
 236   width: 100%; }
 237
 238 @media only screen and (min-width: 640px) {
 239   .col-m-1 {
 240     width: 8.33333%; }
 241
 242   .col-m-2 {
 243     width: 16.66667%; }
 244
 245   .col-m-3 {
 246     width: 25%; }
 247
 248   .col-m-4 {
 249     width: 33.33333%; }
 250
 251   .col-m-5 {
 252     width: 41.66667%; }
 253
 254   .col-m-6 {
 255     width: 50%; }
 256
 257   .col-m-7 {
 258     width: 58.33333%; }
 259
 260   .col-m-8 {
 261     width: 66.66666%; }
 262
 263   .col-m-9 {
 264     width: 75%; }
 265
 266   .col-m-10 {
 267     width: 83.33333%; }
 268
 269   .col-m-11 {
 270     width: 91.66667%; }
 271
 272   .col-m-12 {
 273     width: 100%; } }
 274 @media only screen and (min-width: 1024px) {
 275   .col-l-1 {
 276     width: 8.33333%; }
 277
 278   .col-l-2 {
 279     width: 16.66667%; }
 280
 281   .col-l-3 {
 282     width: 25%; }
 283
 284   .col-l-4 {
 285     width: 33.33333%; }
 286
 287   .col-l-5 {
 288     width: 41.66667%; }
 289
 290   .col-l-6 {
 291     width: 50%; }
 292
 293   .col-l-7 {
 294     width: 58.33333%; }
 295
 296   .col-l-8 {
 297     width: 66.66666%; }
 298
 299   .col-l-9 {
 300     width: 75%; }
 301
 302   .col-l-10 {
 303     width: 83.33333%; }
 304
 305   .col-l-11 {
 306     width: 91.66667%; }
 307
 308   .col-l-12 {
 309     width: 100%; } }
 310 /*FOOTER*/
 311 footer {
 312   clear: both;
 313   height: 200px;
 314   width: 100%;
 315   background-color: #ffaa7f; }
 316
 317 footer ul {
 318   padding: 0;
 319   margin: 0;
 320   list-style-type: none;
 321   padding-top: 70px;
 322   margin-left: 100px; }
 323
 324 footer li {
 325   margin-left: 2px;
 326   float: left;
 327   /*pour IE*/ }
 328
 329 footer ul li a {
 330   display: block;
 331   float: left;
 332   text-decoration: none; }
 333
 334 footer ul li a:hover {
 335   border-bottom: solid #1d0b78; }
 336
 337 /*# sourceMappingURL=habillage.css.map */