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.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:100%;
 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         margin-top:15px;
 117         margin-left:15px;
 118         font-size:1.9em;
 119         display:inline-block;
 120         font-weight: bold;
 121 }
 122
 123 h1:hover{
 124         text-decoration: underline;
 125 }
 126
 127 h2{
 128         margin: 15px 15px;
 129         font-size:1.3em;
 130         display:inline-block;
 131 }
 132
 133 h3{
 134         margin:15px;
 135         display:inline-block;
 136 }
 137
 138 p{
 139         margin:0 15px;
 140         padding-bottom:15px;
 141         text-decoration:none;
 142         text-align: justify;
 143 }
 144
 145 /*1ERE COLONNE*/
 146
 147
 148 #ateliers{
 149         margin:0 10px;
 150 }
 151
 152 #ateliers:after {
 153         content: ""; /* Important, sinon l'élément n'est pas généré. */
 154         display: table;
 155         clear: both;
 156 }
 157
 158 #ateliers ul{
 159         padding:0;
 160         margin:0;
 161         list-style-type:none;
 162 }
 163
 164 #ateliers ul li{
 165
 166         margin-bottom:15px;
 167 }
 168
 169 #ateliers p{
 170         margin: 15px 15px 0 0;
 171         font-size:1.0em;
 172         text-align: left;
 173 }
 174
 175 #ateliers p:nth-child(2){
 176         margin:0px 15px 15px 15px;
 177 }
 178
 179
 180 /*2EME COLONNE*/
 181
 182
 183 #news{
 184         overflow: hidden;
 185 }
 186
 187 .article{
 188         background-color:#ffd7b7;
 189         margin:0 10px 15px 10px;
 190 }
 191 .spip_logo{
 192         display:none;
 193 }
 194 .article .spip_logos{
 195         display:none;
 196
 197 }
 198
 199
 200
 201 /*3EME COLONNE*/
 202
 203
 204
 205 .map{
 206         height: 300px;
 207         margin:0 10px 15px 10px;
 208         overflow: hidden;
 209 }
 210
 211 .agenda{
 212         background-color: #a1ffff;
 213         height:500px;
 214         margin:0 10px 0px 10px;
 215         padding-right: 10px;
 216         overflow-y: scroll;
 217 }
 218
 219 .agenda p{
 220         padding: 0;
 221 }
 222
 223 .agenda ul{
 224         list-style-type:none;
 225         padding:0;
 226         margin:0;
 227         padding-top:15px;
 228 }
 229
 230 .date{
 231         float:left;
 232         font-size: 1.7em;
 233         clear: both;
 234 }
 235
 236 .event{
 237         display: block;
 238         margin-bottom: 10px;
 239         padding-top: 5px;
 240 }
 241 .horaire{
 242         font-size: 0.8em;
 243         margin-bottom: 20px;
 244         display: block;
 245 }
 246 .nature{
 247         overflow-y: scroll;
 248         height: 70px;
 249
 250 }
 251
 252
 253 /*RESPONSIVE*/
 254
 255
 256 $columns: 12!default;
 257 $medium:650px;
 258 $large:1200px;
 259
 260 %col{
 261         float:left;
 262         position: relative;
 263 }
 264
 265 @for $i from 1 through $columns{
 266         .col-#{$i}{
 267         @extend %col;
 268         width:$i / $columns * 100%;}
 269         .col-m-#{$i}, .col-l-#{$i}{@extend %col;}
 270 }
 271
 272 @media only screen and (min-width: $medium){
 273         @for $i from 1 through $columns{
 274         .col-m-#{$i}{
 275         width:$i / $columns * 100%;}
 276         }
 277
 278 }
 279 @media only screen and (min-width: $large){
 280         @for $i from 1 through $columns{
 281         .col-l-#{$i}{
 282         width:$i / $columns * 100%;}
 283         }
 284         #wrap{
 285         width:1200px;
 286 }
 287
 288 .wrap{
 289         width: auto;
 290 }
 291 }
 292
 293
 294
 295 .row:before, .row:after{
 296         content: "";
 297         display:table;
 298 }
 299
 300 .row:after{
 301         clear:both;
 302 }
 303
 304
 305 .row{
 306         margin: 0 -10px;
 307         zoom: 1;
 308 }
 309
 310
 311 /*FOOTER*/
 312
 313 footer{
 314         clear:both;
 315         height:200px;
 316         background-color: #ffaa7f;
 317 }
 318
 319 footer ul {
 320         padding:0;
 321         margin:0 auto;
 322         list-style-type:none;
 323         padding-top:70px;
 324 }
 325 .textfooter{
 326         width:500px;
 327         margin:0 auto;
 328 }
 329 footer li {
 330         float:left; /*pour IE*/
 331         text-align: center;
 332 }
 333 footer ul li a {
 334         display:block;
 335         float:left;
 336         text-decoration:none;
 337 }
 338 footer ul li a:hover {
 339         border-bottom: solid #1d0b78;
 340 }
 341