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