css/habillage.scss

   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
  26 html, body, span, applet, object, iframe,
  27 blockquote, pre,
  28 abbr, acronym, address, big, cite, code,
  29 del, dfn, em, ins, kbd, q, s, samp,
  30 small, strike, strong, sub, sup, tt, var,
  31 dl, dt, dd, ol, ul, li,
  32 fieldset, form, label, legend,
  33 table, caption, tbody, tfoot, thead, tr, th, td,
  34 article, aside, canvas, details, embed,
  35 figure, figcaption,hgroup,
  36 menu, nav, output, ruby, summary, mark, audio, video {
  37         background-color: #ffffff;
  38 }
  39
  40 html {
  41   line-height: 1;
  42 }
  43
  44 ol, ul {
  45   list-style: none;
  46 }
  47
  48 table {
  49   border-collapse: collapse;
  50   border-spacing: 0;
  51 }
  52
  53 caption, th, td {
  54   text-align: left;
  55   font-weight: normal;
  56   vertical-align: middle;
  57 }
  58
  59 q, blockquote {
  60   quotes: none;
  61 }
  62 q:before, q:after, blockquote:before, blockquote:after {
  63   content: "";
  64   content: none;
  65 }
  66
  67 a img {
  68   border: none;
  69 }
  70
  71 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  72   display: block;
  73 }
  74
  75 *{
  76         -moz-box-sizing: border-box;
  77         -webkit-box-sizing: border-box;
  78         box-sizing:border-box;
  79 }
  80
  81 body{
  82         margin:0;
  83         padding:0;
  84 }
  85
  86 header{
  87         margin:0 auto;
  88         width:100%;
  89 }
  90
  91 header img{
  92         margin-left:120px;
  93 }
  94
  95 #wrap{
  96         padding-top:20px;
  97         width:1100px;
  98         margin:0 auto;
  99 }
 100 a{
 101         text-decoration:none;
 102 }
 103
 104 a:focus, a:hover, a:active{
 105         background:none;
 106         color:#1a0583;
 107 }
 108
 109 h1{
 110         margin: 0;
 111         padding:0;
 112         padding-top:15px;
 113         padding-left:15px;
 114         font-size:1.9em;
 115         display:inline-block;
 116 }
 117
 118 h2{
 119         margin: 15px 15px;
 120         font-size:1.3em;
 121         display:inline-block;
 122 }
 123
 124 h3{
 125         margin:15px;
 126         display:inline-block;
 127 }
 128
 129 p{
 130         margin:0 15px;
 131         text-decoration:none;
 132         text-align: justify;
 133 }
 134
 135 /*1ERE COLONNE*/
 136
 137
 138 #ateliers{
 139         margin:0 10px;
 140 }
 141
 142 #ateliers:after {
 143         content: ""; /* Important, sinon l'élément n'est pas généré. */
 144         display: table;
 145         clear: both;
 146 }
 147
 148 #ateliers ul{
 149         padding:0;
 150         margin:0;
 151         list-style-type:none;
 152 }
 153
 154 #ateliers ul li{
 155         height: 300px;
 156         margin-bottom:15px;
 157         background-color: #2bc7cd;
 158 }
 159
 160 #ateliers p{
 161         margin: 15px 15px 0 15px;
 162         font-size:1.3em;
 163         font-weight: bold;
 164         text-align: left;
 165 }
 166
 167 #ateliers p:nth-child(2){
 168         margin:0px 15px 15px 15px;
 169 }
 170
 171
 172 /*2EME COLONNE*/
 173
 174
 175 #news{
 176         margin:0 10px 10px 10px;
 177         overflow: hidden;
 178 }
 179
 180 #news img{
 181         height:350px;
 182 }
 183
 184 .article{
 185         background-color:#ffaa7f;
 186
 187 }
 188
 189
 190
 191
 192 /*3EME COLONNE*/
 193
 194
 195
 196 .map{
 197         background-color:#6059d2;
 198         height: 300px;
 199         margin:0 0 15px 10px;
 200 }
 201
 202 .agenda{
 203         background-color: #3ee88d;
 204         height:500px;
 205         margin:0 0 0px 10px;
 206         padding-right: 10px;
 207 }
 208
 209 .agenda p{
 210         line-height: 120%;
 211 }
 212
 213 .agenda ul{
 214         list-style-type:none;
 215         padding:0;
 216         margin:0;
 217         padding-top:15px;
 218 }
 219
 220 .date{
 221         float:left;
 222         font-size: 1.7em;
 223
 224 }
 225
 226 /*RESPONSIVE*/
 227
 228 .col-2,
 229 .col-4,
 230 .col-6,
 231 .col-8,
 232 .col-10,
 233 .col-12{
 234         float:left;
 235         position:relative;
 236
 237
 238 }
 239
 240 .row:before, .row:after{
 241         content: "";
 242         display:table;
 243 }
 244
 245 .row:after{
 246         clear:both;
 247 }
 248
 249
 250 .row{
 251         margin: 0 -10px;
 252         zoom: 1;
 253 }
 254
 255
 256
 257 .col-1{
 258         width:8.33333%;
 259 }
 260
 261 .col-2{
 262         width:16.66667%;
 263 }
 264
 265 .col-3{
 266         width:25%;
 267 }
 268
 269
 270 .col-4{
 271         width:33.33333%;
 272 }
 273
 274 .col-5{
 275         width:41.66667%;
 276 }
 277
 278 .col-6{
 279         width:50%;
 280 }
 281
 282 .col-7{
 283         width:58.33333%;
 284 }
 285
 286 .col-8{
 287         width:66.66666%;
 288 }
 289
 290 .col-9{
 291         width:75%;
 292 }
 293
 294 .col-10{
 295         width:83.33333%;
 296 }
 297
 298 .col-11{
 299         width:91.66667%;
 300 }
 301
 302 .col-12{
 303         width:100%;
 304 }
 305
 306
 307
 308
 309 @media only screen and (min-width:640px) {
 310
 311 .col-m-1{
 312         width:8.33333%;
 313 }
 314
 315 .col-m-2{
 316         width:16.66667%;
 317 }
 318
 319 .col-m-3{
 320         width:25%;
 321 }
 322
 323
 324 .col-m-4{
 325         width:33.33333%;
 326 }
 327
 328 .col-m-5{
 329         width:41.66667%;
 330 }
 331
 332 .col-m-6{
 333         width:50%;
 334 }
 335
 336 .col-m-7{
 337         width:58.33333%;
 338 }
 339
 340 .col-m-8{
 341         width:66.66666%;
 342 }
 343
 344 .col-m-9{
 345         width:75%;
 346 }
 347
 348 .col-m-10{
 349         width:83.33333%;
 350 }
 351
 352 .col-m-11{
 353         width:91.66667%;
 354 }
 355
 356 .col-m-12{
 357         width:100%;
 358 }
 359
 360 }
 361
 362
 363
 364
 365
 366
 367 @media only screen and (min-width:1024px) {
 368
 369 .col-l-1{
 370         width:8.33333%;
 371 }
 372
 373 .col-l-2{
 374         width:16.66667%;
 375 }
 376
 377 .col-l-3{
 378         width:25%;
 379 }
 380
 381
 382 .col-l-4{
 383         width:33.33333%;
 384 }
 385
 386 .col-l-5{
 387         width:41.66667%;
 388 }
 389
 390 .col-l-6{
 391         width:50%;
 392 }
 393
 394 .col-l-7{
 395         width:58.33333%;
 396 }
 397
 398 .col-l-8{
 399         width:66.66666%;
 400 }
 401
 402 .col-l-9{
 403         width:75%;
 404 }
 405
 406 .col-l-10{
 407         width:83.33333%;
 408 }
 409
 410 .col-l-11{
 411         width:91.66667%;
 412 }
 413
 414 .col-l-12{
 415         width:100%;
 416 }
 417 }
 418
 419 /*FOOTER*/
 420
 421 footer{
 422         clear:both;
 423         height:200px;
 424         width:100%;
 425         background-color: #ffaa7f;
 426
 427 }
 428
 429 footer ul {
 430         padding:0;
 431         margin:0;
 432         list-style-type:none;
 433         padding-top:70px;
 434         margin-left:100px;
 435
 436 }
 437 footer li {
 438         margin-left:2px;
 439         float:left; /*pour IE*/
 440 }
 441 footer ul li a {
 442         display:block;
 443         float:left;
 444         text-decoration:none;
 445 }
 446 footer ul li a:hover {
 447         border-bottom: solid #1d0b78;
 448 }
 449