css/habillage.css

   1 * {
   2   -moz-box-sizing: border-box;
   3   -webkit-box-sizing: border-box;
   4   box-sizing: border-box; }
   5
   6 body {
   7   margin: 0;
   8   padding: 0;
   9   font-family: sans-serif;
  10   color: #1a0583; }
  11
  12 header {
  13   margin: 0 auto;
  14   width: 100%; }
  15
  16 header img {
  17   margin-left: 120px; }
  18
  19 #wrap {
  20   padding-top: 20px;
  21   width: 1100px;
  22   margin: 0 auto; }
  23
  24 a {
  25   text-decoration: none; }
  26
  27 h1 {
  28   margin: 0;
  29   padding: 0;
  30   padding-top: 15px;
  31   padding-left: 15px;
  32   font-size: 1.9em;
  33   display: inline-block; }
  34
  35 h2 {
  36   margin: 15px 15px;
  37   font-size: 1.3em;
  38   display: inline-block; }
  39
  40 h3 {
  41   margin: 15px;
  42   display: inline-block; }
  43
  44 p {
  45   margin: 0 15px;
  46   text-decoration: none;
  47   text-align: justify; }
  48
  49 /*1ERE COLONNE*/
  50 #ateliers {
  51   margin: 0 10px; }
  52
  53 #ateliers:after {
  54   content: "";
  55   /* Important, sinon l'élément n'est pas généré. */
  56   display: table;
  57   clear: both; }
  58
  59 #ateliers ul {
  60   padding: 0;
  61   margin: 0;
  62   list-style-type: none; }
  63
  64 #ateliers ul li {
  65   height: 300px;
  66   margin-bottom: 15px;
  67   background-color: #2bc7cd; }
  68
  69 #ateliers p {
  70   margin: 15px 15px 0 15px;
  71   font-size: 1.3em;
  72   font-weight: bold;
  73   text-align: left; }
  74
  75 #ateliers p:nth-child(2) {
  76   margin: 0px 15px 15px 15px; }
  77
  78 /*2EME COLONNE*/
  79 #news {
  80   margin: 0 10px 10px 10px;
  81   overflow: hidden; }
  82
  83 #news img {
  84   height: 350px; }
  85
  86 .article {
  87   background-color: #ffaa7f; }
  88
  89 /*3EME COLONNE*/
  90 .map {
  91   background-color: #6059d2;
  92   height: 300px;
  93   margin: 0 0 15px 10px; }
  94
  95 .agenda {
  96   background-color: #3ee88d;
  97   height: 500px;
  98   margin: 0 0 0px 10px;
  99   padding-right: 10px; }
 100
 101 .agenda p {
 102   line-height: 120%; }
 103
 104 .agenda ul {
 105   list-style-type: none;
 106   padding: 0;
 107   margin: 0;
 108   padding-top: 15px; }
 109
 110 .date {
 111   float: left;
 112   font-size: 1.7em; }
 113
 114 /*RESPONSIVE*/
 115 .col-2,
 116 .col-4,
 117 .col-6,
 118 .col-8,
 119 .col-10,
 120 .col-12 {
 121   float: left;
 122   position: relative; }
 123
 124 .row:before, .row:after {
 125   content: "";
 126   display: table; }
 127
 128 .row:after {
 129   clear: both; }
 130
 131 .row {
 132   margin: 0 -10px;
 133   zoom: 1; }
 134
 135 .col-1 {
 136   width: 8.33333%; }
 137
 138 .col-2 {
 139   width: 16.66667%; }
 140
 141 .col-3 {
 142   width: 25%; }
 143
 144 .col-4 {
 145   width: 33.33333%; }
 146
 147 .col-5 {
 148   width: 41.66667%; }
 149
 150 .col-6 {
 151   width: 50%; }
 152
 153 .col-7 {
 154   width: 58.33333%; }
 155
 156 .col-8 {
 157   width: 66.66666%; }
 158
 159 .col-9 {
 160   width: 75%; }
 161
 162 .col-10 {
 163   width: 83.33333%; }
 164
 165 .col-11 {
 166   width: 91.66667%; }
 167
 168 .col-12 {
 169   width: 100%; }
 170
 171 @media only screen and (min-width: 640px) {
 172   .col-m-1 {
 173     width: 8.33333%; }
 174
 175   .col-m-2 {
 176     width: 16.66667%; }
 177
 178   .col-m-3 {
 179     width: 25%; }
 180
 181   .col-m-4 {
 182     width: 33.33333%; }
 183
 184   .col-m-5 {
 185     width: 41.66667%; }
 186
 187   .col-m-6 {
 188     width: 50%; }
 189
 190   .col-m-7 {
 191     width: 58.33333%; }
 192
 193   .col-m-8 {
 194     width: 66.66666%; }
 195
 196   .col-m-9 {
 197     width: 75%; }
 198
 199   .col-m-10 {
 200     width: 83.33333%; }
 201
 202   .col-m-11 {
 203     width: 91.66667%; }
 204
 205   .col-m-12 {
 206     width: 100%; } }
 207 @media only screen and (min-width: 1024px) {
 208   .col-l-1 {
 209     width: 8.33333%; }
 210
 211   .col-l-2 {
 212     width: 16.66667%; }
 213
 214   .col-l-3 {
 215     width: 25%; }
 216
 217   .col-l-4 {
 218     width: 33.33333%; }
 219
 220   .col-l-5 {
 221     width: 41.66667%; }
 222
 223   .col-l-6 {
 224     width: 50%; }
 225
 226   .col-l-7 {
 227     width: 58.33333%; }
 228
 229   .col-l-8 {
 230     width: 66.66666%; }
 231
 232   .col-l-9 {
 233     width: 75%; }
 234
 235   .col-l-10 {
 236     width: 83.33333%; }
 237
 238   .col-l-11 {
 239     width: 91.66667%; }
 240
 241   .col-l-12 {
 242     width: 100%; } }
 243 /*FOOTER*/
 244 footer {
 245   clear: both;
 246   height: 200px;
 247   width: 100%;
 248   background-color: #ffaa7f; }
 249
 250 footer ul {
 251   padding: 0;
 252   margin: 0;
 253   list-style-type: none;
 254   padding-top: 70px;
 255   margin-left: 100px; }
 256
 257 footer li {
 258   margin-left: 2px;
 259   float: left;
 260   /*pour IE*/ }
 261
 262 footer ul li a {
 263   display: block;
 264   float: left;
 265   text-decoration: none; }
 266
 267 footer ul li a:hover {
 268   border-bottom: solid #1d0b78; }
 269
 270 /*# sourceMappingURL=habillage.css.map */