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;
  71   font-size: 1em;
  72   -webkit-margin-before: 1em;
  73   -webkit-margin-after: 1em;
  74   -webkit-margin-start: 0px;
  75   -webkit-margin-end: 0px;
  76   font-weight: bold; }
  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 .suite {
  90   text-align: right;
  91   padding-bottom: 20px; }
  92
  93 /*3EME COLONNE*/
  94 .map {
  95   background-color: #6059d2;
  96   height: 300px;
  97   margin: 0 0 15px 10px; }
  98
  99 .agenda {
 100   background-color: #3ee88d;
 101   height: 500px;
 102   margin: 0 0 0px 10px;
 103   padding-right: 10px; }
 104
 105 .agenda p {
 106   line-height: 120%; }
 107
 108 .agenda ul {
 109   list-style-type: none;
 110   padding: 0;
 111   margin: 0;
 112   padding-top: 15px; }
 113
 114 .date {
 115   float: left;
 116   font-size: 1.7em; }
 117
 118 /*RESPONSIVE*/
 119 .col-2,
 120 .col-4,
 121 .col-6,
 122 .col-8,
 123 .col-10,
 124 .col-12 {
 125   float: left;
 126   position: relative; }
 127
 128 .row:before, .row:after {
 129   content: "";
 130   display: table; }
 131
 132 .row:after {
 133   clear: both; }
 134
 135 .row {
 136   margin: 0 -10px;
 137   zoom: 1; }
 138
 139 .col-1 {
 140   width: 8.33333%; }
 141
 142 .col-2 {
 143   width: 16.66667%; }
 144
 145 .col-3 {
 146   width: 25%; }
 147
 148 .col-4 {
 149   width: 33.33333%; }
 150
 151 .col-5 {
 152   width: 41.66667%; }
 153
 154 .col-6 {
 155   width: 50%; }
 156
 157 .col-7 {
 158   width: 58.33333%; }
 159
 160 .col-8 {
 161   width: 66.66666%; }
 162
 163 .col-9 {
 164   width: 75%; }
 165
 166 .col-10 {
 167   width: 83.33333%; }
 168
 169 .col-11 {
 170   width: 91.66667%; }
 171
 172 .col-12 {
 173   width: 100%; }
 174
 175 @media only screen and (min-width: 640px) {
 176   .col-m-1 {
 177     width: 8.33333%; }
 178
 179   .col-m-2 {
 180     width: 16.66667%; }
 181
 182   .col-m-3 {
 183     width: 25%; }
 184
 185   .col-m-4 {
 186     width: 33.33333%; }
 187
 188   .col-m-5 {
 189     width: 41.66667%; }
 190
 191   .col-m-6 {
 192     width: 50%; }
 193
 194   .col-m-7 {
 195     width: 58.33333%; }
 196
 197   .col-m-8 {
 198     width: 66.66666%; }
 199
 200   .col-m-9 {
 201     width: 75%; }
 202
 203   .col-m-10 {
 204     width: 83.33333%; }
 205
 206   .col-m-11 {
 207     width: 91.66667%; }
 208
 209   .col-m-12 {
 210     width: 100%; } }
 211 @media only screen and (min-width: 1024px) {
 212   .col-l-1 {
 213     width: 8.33333%; }
 214
 215   .col-l-2 {
 216     width: 16.66667%; }
 217
 218   .col-l-3 {
 219     width: 25%; }
 220
 221   .col-l-4 {
 222     width: 33.33333%; }
 223
 224   .col-l-5 {
 225     width: 41.66667%; }
 226
 227   .col-l-6 {
 228     width: 50%; }
 229
 230   .col-l-7 {
 231     width: 58.33333%; }
 232
 233   .col-l-8 {
 234     width: 66.66666%; }
 235
 236   .col-l-9 {
 237     width: 75%; }
 238
 239   .col-l-10 {
 240     width: 83.33333%; }
 241
 242   .col-l-11 {
 243     width: 91.66667%; }
 244
 245   .col-l-12 {
 246     width: 100%; } }
 247 /*FOOTER*/
 248 footer {
 249   clear: both;
 250   height: 200px;
 251   width: 100%;
 252   background-color: #ffaa7f; }
 253
 254 footer ul {
 255   padding: 0;
 256   margin: 0;
 257   list-style-type: none;
 258   padding-top: 70px;
 259   margin-left: 100px; }
 260
 261 footer li {
 262   margin-left: 2px;
 263   float: left;
 264   /*pour IE*/ }
 265
 266 footer ul li a {
 267   display: block;
 268   float: left;
 269   text-decoration: none; }
 270
 271 footer ul li a:hover {
 272   border-bottom: solid #1d0b78; }
 273
 274 /*# sourceMappingURL=habillage.css.map */