css/knacss.css

   1 /*
   2 * www.KNACSS.com V2.6c @author: Raphael Goetter, Alsacreations
   3 * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
   4 */
   5
   6 /* ----------------------------- */
   7 /* ==reset */
   8 /* ----------------------------- */
   9
  10 /* base font-size corresponds to 10px and is adapted to rem unit */
  11 html {
  12         font-size: 62.5%;
  13 }
  14 body {
  15         background-color: #fff;
  16         color: #000;
  17         font-family: "Century Gothic", helvetica, arial, sans-serif;
  18         font-size: 1.4em; /* equiv 14px */
  19         line-height: 1.5; /* adapt to your design */
  20 }
  21
  22 /* font-sizing for content */
  23 /* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
  24 p,
  25 ul,
  26 ol,
  27 dl,
  28 blockquote,
  29 pre,
  30 td,
  31 th,
  32 label,
  33 textarea,
  34 caption,
  35 details,
  36 figure,
  37 hgroup {
  38         font-size: 1em; /* equiv 14px */
  39         line-height: 1.5;
  40         margin: .75em 0 0;
  41 }
  42 h1, .h1-like {
  43         font-size: 1.8571em; /* equiv 26px */
  44         font-weight: normal;
  45         line-height: 1.6154em;
  46         margin: .8077em 0 0 0;
  47 }
  48 h2, .h2-like {
  49         font-size: 1.7143em; /* equiv 24px */
  50         font-weight: normal;
  51         line-height: 1.75em;
  52         margin: .875em 0 0 0;
  53 }
  54 h3, .h3-like {
  55         font-size: 1.5714em; /* equiv 22px */
  56         font-weight: normal;
  57         line-height: 1.909em;
  58         margin: .9545em 0 0 0;
  59 }
  60 h4, .h4-like {
  61         font-size: 1.4286em; /* equiv 20px */
  62         font-weight: normal;
  63         line-height: 1.05em;
  64         margin:  1.05em 0 0 0;
  65 }
  66 h5, .h5-like {
  67         font-size: 1.2857em; /* equiv 18px */
  68         font-weight: normal;
  69         line-height: 1.1667em;
  70         margin:  1.1667em 0 0 0;
  71 }
  72 h6, .h6-like {
  73         font-size: 1.1429em; /* equiv 16px */
  74         font-weight: normal;
  75         line-height: 1.3125em;
  76         margin:  1.3125em 0 0 0;
  77 }
  78
  79 /* alternate font-sizing */
  80 .smaller {
  81         font-size: .7143em; /* equiv 10px */
  82 }
  83 .small {
  84         font-size: .8571em; /* equiv 12px */
  85 }
  86 .big {
  87         font-size: 1.1429em; /* equiv 16px */
  88 }
  89 .bigger {
  90         font-size: 1.2857em; /* equiv 18px */
  91 }
  92 .biggest {
  93         font-size: 1.4286em; /* equiv 20px */
  94 }
  95
  96 /* soft reset */
  97 html,
  98 body,
  99 textarea,
 100 figure,
 101 label {
 102         margin: 0;
 103         padding: 0;
 104 }
 105 ul,
 106 ol {
 107         padding-left: 2em;
 108 }
 109 code,
 110 pre,
 111 samp,
 112 kbd {
 113         white-space: pre-wrap;
 114         font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
 115         line-height: 1em;
 116 }
 117 code, kbd, mark {
 118         border-radius: 2px;
 119 }
 120 em {
 121         font-style: italic;
 122 }
 123 strong {
 124         font-weight: bold;
 125 }
 126 kbd {
 127         padding: 0 2px;
 128         border: 1px solid #999;
 129 }
 130 code {
 131         padding: 2px 4px;
 132         background: rgba(0,0,0,.04);
 133         color: #b11;
 134 }
 135 mark {
 136         padding:2px 4px;
 137         background: #ff0;
 138 }
 139
 140 table { margin-bottom: 1.5em; }
 141
 142 /* avoid top margins on first content element */
 143 p:first-child,
 144 ul:first-child,
 145 ol:first-child,
 146 dl:first-child,
 147 blockquote:first-child,
 148 pre:first-child,
 149 h1:first-child,
 150 h2:first-child,
 151 h3:first-child,
 152 h4:first-child,
 153 h5:first-child,
 154 h6:first-child {
 155         margin-top: 0;
 156 }
 157
 158 /* avoid margins on nested elements */
 159 li p,
 160 li ul,
 161 li ol {
 162         margin-top: 0;
 163         margin-bottom: 0;
 164 }
 165
 166 /* max values */
 167 img, table, td, blockquote, code, pre, textarea, input, video {
 168         max-width: 100%;
 169 }
 170
 171 /* you shall not pass */
 172 div, textarea, table, td, th, code, pre, samp {
 173         word-wrap: break-word;
 174         -webkit-hyphens: auto;
 175         -moz-hyphens: auto;
 176         -ms-hyphens: auto;
 177         -o-hyphens: auto;
 178         hyphens: auto;
 179 }
 180
 181 /* pictures */
 182 img {
 183         height: auto;
 184         vertical-align: middle;
 185 }
 186 /* Gmap3 max-width bug fix on images */
 187 #map_canvas img,
 188 .gmnoprint img {max-width: none;}
 189
 190 a img { border: 0; }
 191
 192 /* scripts */
 193 body > script {display: none !important;}
 194
 195 /* skip-links */
 196 .skip-links {
 197         position: absolute;
 198 }
 199 .skip-links a {
 200         position: absolute;
 201         left: -7000px;
 202         padding: 0.5em;
 203         background: #000;
 204         color:#fff;
 205         text-decoration: none;
 206 }
 207 .skip-links a:focus {
 208         position: static;
 209 }
 210
 211 /* ----------------------------- */
 212 /* ==layout and modules */
 213 /* ----------------------------- */
 214
 215 /* switching box model for all elements */
 216 * {
 217         -webkit-box-sizing: border-box;
 218         -moz-box-sizing: border-box;
 219         box-sizing: border-box;
 220 }
 221
 222 /* float layout */
 223 /* ----------- */
 224
 225 /* module, contains floats (.item is the same) */
 226 .mod, .item {
 227         overflow: hidden;
 228 }
 229
 230 /* table layout */
 231 /* ------------------ */
 232 .row {
 233         display: table;
 234         table-layout: fixed;
 235         width: 100%;
 236 }
 237 .row > *,
 238 .col {
 239         display: table-cell;
 240         vertical-align: top;
 241 }
 242
 243 /* blocks that needs to be placed under floats */
 244 .clear,
 245 .line,
 246 .row {
 247         clear: both;
 248 }
 249
 250 /* blocks that must contain floats */
 251 .clearfix:after,
 252 .line:after,
 253 .mod:after {
 254         content: "";
 255         display: table;
 256         clear: both;
 257 }
 258
 259 /* alignments (blocks and inline) */
 260 /* ------------------------------ */
 261
 262 /* left elements */
 263 .left {
 264         float: left;
 265 }
 266 img.left {
 267         margin-right: 1em;
 268 }
 269
 270 /* right elements */
 271 .right {
 272         float: right;
 273 }
 274 img.right {
 275         margin-left: 1em;
 276 }
 277
 278 img.left, img.right {
 279         margin-bottom: 5px;
 280 }
 281
 282 .center    { margin-left: auto; margin-right: auto; }
 283 .txtleft   { text-align: left; }
 284 .txtright  { text-align: right; }
 285 .txtcenter { text-align: center; }
 286
 287 /* just inline-block */
 288 .inbl {
 289         display: inline-block;
 290         vertical-align: top;
 291         margin-right: -.25em;
 292 }
 293
 294 /* blocks widths (percentage and pixels) */
 295 .w10    { width: 10%; }
 296 .w20    { width: 20%; }
 297 .w25    { width: 25%; }
 298 .w30    { width: 30%; }
 299 .w33    { width: 33.333%; }
 300 .w40    { width: 40%; }
 301 .w50    { width: 50%; }
 302 .w60    { width: 60%; }
 303 .w66    { width: 66.666%; }
 304 .w70    { width: 70%; }
 305 .w75    { width: 75%; }
 306 .w80    { width: 80%; }
 307 .w90    { width: 90%; }
 308 .w100   { width: 100%; }
 309
 310 .w50p   { width: 50px; }
 311 .w100p  { width: 100px; }
 312 .w150p  { width: 150px; }
 313 .w200p  { width: 200px; }
 314 .w300p  { width: 300px; }
 315 .w400p  { width: 400px; }
 316 .w500p  { width: 500px; }
 317 .w600p  { width: 600px; }
 318 .w700p  { width: 700px; }
 319 .w800p  { width: 800px; }
 320 .w960p  { width: 960px; }
 321 .mw960p { max-width: 960px; }
 322
 323 /* spacing helpers
 324 p,m = padding,margin
 325 a,t,r,b,l = all,top,right,bottom,left
 326 s,m,l,n = small(10px),medium(20px),large(30px),none(0)
 327 source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
 328 */
 329 .m-reset, .ma0 { margin: 0 !important; }
 330 .p-reset, .pa0 { padding: 0 !important; }
 331 .ma1, .mas { margin: 10px !important; }
 332 .ma2, .mam { margin: 20px !important; }
 333 .ma3, .mal { margin: 30px !important; }
 334 .pa1, .pas { padding: 10px; }
 335 .pa2, .pam { padding: 20px; }
 336 .pa3, .pal { padding: 30px; }
 337
 338 .mt0, .mtn { margin-top: 0 !important; }
 339 .mt1, .mts { margin-top: 10px !important; }
 340 .mt2, .mtm { margin-top: 20px !important; }
 341 .mt3, .mtl { margin-top: 30px !important; }
 342 .mr0, .mrn { margin-right: 0; }
 343 .mr1, .mrs { margin-right: 10px; }
 344 .mr2, .mrm { margin-right: 20px; }
 345 .mr3, .mrl { margin-right: 30px; }
 346 .mb0, .mbn { margin-bottom: 0 !important; }
 347 .mb1, .mbs { margin-bottom: 10px !important; }
 348 .mb2, .mbm { margin-bottom: 20px !important; }
 349 .mb3, .mbl { margin-bottom: 30px !important; }
 350 .ml0, .mln { margin-left: 0; }
 351 .ml1, .mls { margin-left: 10px; }
 352 .ml2, .mlm { margin-left: 20px; }
 353 .ml3, .mll { margin-left: 30px; }
 354
 355 .pt0, .ptn { padding-top: 0; }
 356 .pt1, .pts { padding-top: 10px; }
 357 .pt2, .ptm { padding-top: 20px; }
 358 .pt3, .ptl { padding-top: 30px; }
 359 .pr0, .prn { padding-right: 0; }
 360 .pr1, .prs { padding-right: 10px; }
 361 .pr2, .prm { padding-right: 20px; }
 362 .pr3, .prl { padding-right: 30px; }
 363 .pb0, .pbn { padding-bottom: 0; }
 364 .pb1, .pbs { padding-bottom: 10px; }
 365 .pb2, .pbm { padding-bottom: 20px; }
 366 .pb3, .pbl { padding-bottom: 30px; }
 367 .pl0, .pln { padding-left: 0; }
 368 .pl1, .pls { padding-left: 10px; }
 369 .pl2, .plm { padding-left: 20px; }
 370 .pl3, .pll { padding-left: 30px; }
 371
 372 /* hiding content */
 373 .visually-hidden {
 374         position: absolute;
 375         left: -7000px;
 376         overflow: hidden;
 377 }
 378 [dir=rtl] .visually-hidden {
 379         left: auto;
 380         right: -7000px;
 381 }
 382
 383 .desktop-hidden { display: none; } /* hidden on desktop */
 384
 385 /* ----------------------------- */
 386 /* ==header */
 387 /* ----------------------------- */
 388
 389 /* ----------------------------- */
 390 /* ==sidebar */
 391 /* ----------------------------- */
 392
 393 /* ----------------------------- */
 394 /* ==footer */
 395 /* ----------------------------- */
 396
 397 /* ----------------------------- */
 398 /* ==forms */
 399 /* ----------------------------- */
 400 form,
 401 fieldset {
 402         border: none;
 403 }
 404 input,
 405 button,
 406 select,
 407 label,
 408 .btn {
 409         vertical-align: middle; /* @bugfix alignment */
 410         font-family: inherit;
 411 }
 412 textarea {
 413         resize: vertical;
 414         font-family: inherit;
 415 }
 416
 417 /* ----------------------------- */
 418 /* ==main */
 419 /* ----------------------------- */
 420
 421 /* ----------------------------- */
 422 /* ==iefix */
 423 /* ----------------------------- */
 424
 425 /* haslayout for IE6/IE7 */
 426 .ie67 .clearfix,
 427 .ie67 .line,
 428 .ie67 .mod,
 429 .ie67 .row,
 430 .ie67 .col {
 431         zoom: 1;
 432 }
 433
 434 /* inline-block and table-cell for IE6/IE7 */
 435 /* warning: .col needs width on IE6/IE7 */
 436 .ie67 .btn,
 437 .ie67 .col,
 438 .ie67 .inbl {
 439         display: inline;
 440         zoom: 1;
 441 }
 442 .ie8 img {
 443         width: auto; /* @bugfix for IE8 */
 444 }
 445
 446 /* Active box-sizing for IE6/IE7 */
 447 /* @source https://github.com/Schepp/box-sizing-polyfill */
 448 /*
 449 .ie67 * {
 450         behavior: url(/js/boxsizing.htc);
 451 }
 452 */
 453
 454 /* ----------------------------- */
 455 /* ==print */
 456 /* ----------------------------- */
 457
 458 /* quick print reset */
 459 @media print {
 460         p,
 461         blockquote {
 462                 orphans: 2;
 463                 widows: 2;
 464         }
 465         blockquote,
 466         ul,
 467         ol {
 468                 page-break-inside: avoid;
 469         }
 470         h1,
 471         h2,
 472         h3,
 473         caption {
 474                 page-break-after: avoid;
 475         }
 476 }
 477
 478 /* orientation iOS font-size fix */
 479 @media (orientation: landscape) and (max-device-width: 768px) {
 480         html,
 481         body {
 482                 -webkit-text-size-adjust: 100%;
 483         }
 484 }
 485 /* ----------------------------- */
 486 /* ==grids                       */
 487 /* ----------------------------- */
 488
 489 /* equal grids with 2% gutter */
 490 [class*=grid] > * {float: left; } /* direct childrens are floating */
 491 [class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */
 492 .grid2 > * { width: 49%; }
 493 .grid3 > * { width: 32%; }
 494 .grid4 > * { width: 23.5%; }
 495 .grid5 > * { width: 18.4%; }
 496 .grid6 > * { width: 15%; }
 497
 498 /* unequal grids (1-2, 2-1, 1-3 and 3-1) */
 499 .grid2-1 > *:first-child,
 500 .grid1-2 > * + * { width: 66%; }
 501 .grid1-2 > *:first-child,
 502 .grid2-1 > * + * { width: 32%; }
 503 .grid1-3 > *:first-child,
 504 .grid3-1 > * + * { width: 23.5%; }
 505 .grid3-1 > *:first-child,
 506 .grid1-3 > * + * { width: 74.5%; }
 507
 508
 509 /* ----------------------------- */
 510 /* ==tables                      */
 511 /* ----------------------------- */
 512
 513 table,
 514 .table {
 515         max-width : 100%;
 516         table-layout: fixed;
 517         border-collapse: collapse;
 518         vertical-align: top;
 519 }
 520 table {
 521         width: 100%;
 522 }
 523 .table {
 524         display: table;
 525 }
 526 caption {
 527         padding: 10px;
 528         color: #555;
 529         font-style: italic;
 530 }
 531 table {
 532         border: 1px solid #ccc;
 533 }
 534 tr > * + * {
 535         border-left: 1px solid #ccc;
 536 }
 537 th,
 538 td {
 539         padding: .3em .8em;
 540         text-align: left;
 541         border-bottom: 1px solid #ccc;
 542 }
 543 td {
 544         color: #333;
 545 }
 546
 547 /* alternate tables */
 548 .alternate { border: 0; }
 549 .alternate tbody {
 550         border: 1px solid #ccc;
 551 }
 552 .alternate thead tr > * + * {
 553         border-left: 0;
 554 }
 555 .alternate tbody tr > * + * {
 556         border-left: 1px solid #ccc;
 557 }
 558
 559 /* alternate-vert tables */
 560 .alternate-vert {
 561         border: 0;
 562         border-right: 1px solid #ccc;
 563 }
 564 .alternate-vert tr > :first-child {
 565         border-bottom: 0;
 566 }
 567 .alternate-vert tr > * + * {
 568         border-top: 1px solid #ccc;
 569 }
 570
 571 /* striped tables */
 572 .striped tbody tr:nth-child(odd) {
 573         background: #eee;
 574         background: rgba(0, 0, 0, .05);
 575 }
 576
 577 /* striped-vert tables */
 578 .striped-vert tr > :first-child {
 579         background: #eee;
 580         background: rgba(0, 0, 0, .05);
 581 }
 582 /* ----------------------------- */
 583 /* ==forms                       */
 584 /* ----------------------------- */
 585
 586 /* thanks to HTML5boilerplate, github.com/nathansmith/formalize and www.sitepen.com */
 587
 588
 589 /* buttons */
 590 .btn { display: inline-block; }
 591
 592 .btn.alternate {}
 593 .btn.highlight {}
 594 .login {}
 595 .logout {}
 596 .primary {}
 597 .warning {}
 598 .error {}
 599 .success {}
 600
 601 /* forms items */
 602 label {
 603         display: inline-block;
 604         vertical-align: middle;
 605         cursor: pointer;
 606 }
 607 legend {
 608         border: 0;
 609         white-space: normal;
 610 }
 611 button,
 612 input,
 613 select {
 614         font-family: "Century Gothic", helvetica, arial, sans-serif;
 615         font-size: 100%;
 616         margin: 0;
 617         vertical-align: middle;
 618 }
 619 textarea {
 620         overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
 621         min-height: 5em;
 622         font-size: 1.75em;
 623         vertical-align: top;
 624         resize: vertical;
 625 }
 626 button,
 627 input[type="button"],
 628 input[type="reset"],
 629 input[type="submit"] {
 630         cursor: pointer;
 631         -webkit-appearance: button; /* clickable input types in iOS */
 632         *overflow: visible; /* Corrects inner spacing displayed oddly in IE7 */
 633 }
 634 input[type="checkbox"],
 635 input[type="radio"] {
 636         padding: 0; /* Corrects excess space around these inputs in IE8/9 */
 637         *width: 13px; *height: 13px; /* Corrects excess space around these inputs in IE7 */
 638 }
 639 input[type="search"] { -webkit-appearance: textfield; }
 640
 641 /* if select styling bugs on WebKit */
 642 /* select { -webkit-appearance: none; } */
 643
 644 /* 'x' appears on right of search input when text is entered. This removes it */
 645 input[type="search"]::-webkit-search-decoration,
 646 input[type="search"]::-webkit-search-cancel-button,
 647 input[type="search"]::-webkit-search-results-button,
 648 input[type="search"]::-webkit-search-results-decoration {
 649         display: none;
 650 }
 651 ::-webkit-input-placeholder { color: #777; }
 652 input:-moz-placeholder,
 653 textarea:-moz-placeholder   { color: #777; }
 654
 655 /* Removes inner padding and border in FF3+ */
 656 button::-moz-focus-inner,
 657 input[type='button']::-moz-focus-inner,
 658 input[type='reset']::-moz-focus-inner,
 659 input[type='submit']::-moz-focus-inner {
 660         border: 0;
 661         padding: 0;
 662 }
 663
 664 /* ----------------------------- */
 665 /* ==icons and bullets           */
 666 /* ----------------------------- */
 667
 668 .icon {display: inline-block;}
 669
 670 .icon:before,
 671 .icon > li:before,
 672 .icon.after:after,
 673 .icon.after > li:after {
 674   content: "";
 675   display: inline-block;
 676   vertical-align: middle;
 677   position: relative; top: -.1em;
 678   margin: 0 0.3em 0 0;
 679   font: 1.4em/1 sans-serif;
 680   color: #000;
 681   text-shadow: 1px 1px 0 rgba(0,0,0,.1);
 682   speak: none;
 683 }
 684
 685 @media (min-device-width: 768px) {
 686   .icon:before,
 687   .icon > li:before,
 688   .icon.after:after,
 689   .icon.after > li:after {
 690   font: 1em/0.6 sans-serif;
 691   -webkit-transform: rotateZ(0.05deg);
 692   }
 693 }
 694
 695 .icon.after:after,
 696 .icon.after > li:after {
 697   margin: 0 0 0 8px;
 698 }
 699
 700 ul.icon {display: block;}
 701 ul.icon > li {list-style: none;}
 702 ul.icon:before,
 703 ul.icon.after:after {content:""}
 704 .icon.after:before,
 705 .icon.after > li:before {content: "" !important}
 706
 707 .icon-rate:before,
 708 .icon-rate > li:before,
 709 .icon-rate.after:after,
 710 .icon-rate.after > li:after {
 711   content: "\2605";
 712 }
 713 .icon-unrate:before,
 714 .icon-unrate > li:before,
 715 .icon-unrate.after:after,
 716 .icon-unrate.after > li:after {
 717   content: "\2606";
 718 }
 719 .icon-check:before,
 720 .icon-check > li:before,
 721 .icon-check.after:after,
 722 .icon-check.after > li:after {
 723   content: "\2713";
 724 }
 725 .icon-uncheck:before,
 726 .icon-uncheck > li:before,
 727 .icon-uncheck.after:after,
 728 .icon-uncheck.after > li:after {
 729   content: "\2717";
 730 }
 731 .icon-cloud:before,
 732 .icon-cloud > li:before,
 733 .icon-cloud.after:after,
 734 .icon-cloud.after > li:after {
 735   content: "\2601";
 736 }
 737 .icon-dl:before,
 738 .icon-dl > li:before,
 739 .icon-dl.after:after,
 740 .icon-dl.after > li:after {
 741   content: "\21E3";
 742   font-weight: bold;
 743 }
 744 .icon-cross:before,
 745 .icon-cross > li:before,
 746 .icon-cross.after:after,
 747 .icon-cross.after > li:after {
 748   content: "\2716";
 749   font-weight: bold;
 750 }
 751 .icon-arrow1:before,
 752 .icon-arrow1 > li:before,
 753 .icon-arrow1.after:after,
 754 .icon-arrow1.after > li:after {
 755   content: "\2192";
 756   position: relative; top: -0.15em;
 757 }
 758 .icon-arrow2:before,
 759 .icon-arrow2 > li:before,
 760 .icon-arrow2.after:after,
 761 .icon-arrow2.after > li:after {
 762   content: "\279E";
 763 }
 764 .icon-arrow3:before,
 765 .icon-arrow3 > li:before,
 766 .icon-arrow3.after:after,
 767 .icon-arrow3.after > li:after {
 768   content: "\279A";
 769 }
 770 .icon-bracket1:before,
 771 .icon-bracket1 > li:before,
 772 .icon-bracket1.after:after,
 773 .icon-bracket1.after > li:after {
 774   content: "\2039";
 775   font-weight: bold;
 776   font-size: 1.6em;
 777   position: relative; top: -0.15em;
 778 }
 779 .icon-bracket2:before,
 780 .icon-bracket2 > li:before,
 781 .icon-bracket2.after:after,
 782 .icon-bracket2.after > li:after {
 783   content: "\203A";
 784   font-weight: bold;
 785   font-size: 1.6em;
 786   position: relative; top: -0.15em;
 787 }
 788 .icon-up:before,
 789 .icon-up > li:before,
 790 .icon-up.after:after,
 791 .icon-up.after > li:after {
 792   content: "\25B2";
 793 }
 794 .icon-down:before,
 795 .icon-down > li:before,
 796 .icon-down.after:after,
 797 .icon-down.after > li:after {
 798   content: "\25BC";
 799 }
 800 .icon-bull:before,
 801 .icon-bull > li:before,
 802 .icon-bull.after:after,
 803 .icon-bull.after > li:after {
 804   content: "\2022";
 805   font-size: 1.2em;
 806   top: -0.05em;
 807 }
 808 .icon-bull2:before,
 809 .icon-bull2 > li:before,
 810 .icon-bull2.after:after,
 811 .icon-bull2.after > li:after {
 812   content: "\25E6";
 813   top: -0.05em;
 814 }
 815 .icon-bull3:before,
 816 .icon-bull3 > li:before,
 817 .icon-bull3.after:after,
 818 .icon-bull3.after > li:after {
 819   content: "\2023";
 820   font-size: 1.6em;
 821   top: -0.05em;
 822 }
 823 .icon-nav:before,
 824 .icon-nav > li:before,
 825 .icon-nav.after:after,
 826 .icon-nav.after > li:after {
 827   content: "\2261";
 828   font-weight: bold;
 829   font-size: 1.6em;
 830 }
 831 .icon-losange:before,
 832 .icon-losange > li:before,
 833 .icon-losange.after:after,
 834 .icon-losange.after > li:after {
 835   content: "\25C6";
 836 }
 837 .icon-asteri:before,
 838 .icon-asteri > li:before,
 839 .icon-asteri.after:after,
 840 .icon-asteri.after > li:after {
 841   content: "\2731";
 842   font-weight: bold;
 843 }
 844 .icon-mail:before,
 845 .icon-mail > li:before,
 846 .icon-mail.after:after,
 847 .icon-mail.after > li:after {
 848   content: "\2709";
 849   font-size: 1.6em;
 850   top: -.05em;
 851 }
 852
 853 ol.styled {counter-reset: styled;}
 854 ol.styled > li {
 855     list-style-type: none;
 856     counter-increment: styled;
 857     margin-bottom: .3em;
 858 }
 859 ol.styled > li:before {
 860     content: counter(styled);
 861     display: inline-block;
 862     width: 1em; height: 1em;
 863     line-height: 1;
 864     padding: 2px;
 865     margin-right: .4em;
 866     vertical-align: middle;
 867     background: rgba(0,0,0,.5);
 868     border-radius: 50%;
 869     font-size: .9em;
 870     text-align: center;
 871     text-indent: -0.1em;
 872     color: white;
 873 }
 874 /* ----------------------------- */
 875 /* ==desktop and retina medias   */
 876 /* ----------------------------- */
 877
 878 @media (min-width: 641px) {
 879 /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
 880 }
 881 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
 882 /* Style adjustments for retina devices */
 883 }
 884
 885 /* ---------------------------------- */
 886 /* ==Responsive large / medium / tiny */
 887 /* ---------------------------------- */
 888
 889 @media (min-width: 1280px) {
 890
 891         /* layouts for large (l) screens */
 892         .large-hidden,
 893         .tablet-hidden { display: none !important; }
 894         .large-visible { display: block !important; }
 895         .large-no-float {float: none; }
 896         .large-inbl {
 897                 display: inline-block;
 898                 float: none;
 899                 vertical-align: top;
 900         }
 901         .large-row {
 902                 display: table;
 903                 table-layout: fixed;
 904                 width: 100% !important;
 905         }
 906         .large-col {
 907                 display: table-cell;
 908                 vertical-align: top;
 909         }
 910
 911         /* widths for large (l) screens */
 912         .large-w25 { width: 25% !important; }
 913         .large-w33 { width: 33.3333% !important; }
 914         .large-w50 { width: 50% !important; }
 915         .large-w66 { width: 66.6666% !important; }
 916         .large-w75 { width: 75% !important; }
 917         .large-w100 {
 918                 display: block !important;
 919                 float: none !important;
 920                 clear: none !important;
 921                 width: auto !important;
 922                 margin-left: 0 !important;
 923                 margin-right: 0 !important;
 924                 border: 0;
 925         }
 926
 927         /* margins for large (l) screens */
 928         .large-ma0,
 929         .large-man { margin: 0 !important; }
 930 }
 931
 932 @media (max-width: 768px) {
 933
 934         /* quick tablet reset */
 935         .w60,
 936         .w66,
 937         .w70,
 938         .w75,
 939         .w80,
 940         .w90,
 941         .w100,
 942         .w600p,
 943         .w700p,
 944         .w800p,
 945         .w960p,
 946         .mw960p,
 947         .medium-wauto { width: auto; }
 948
 949         /* layouts for medium (m) screens */
 950         .medium-hidden,
 951         .tablet-hidden { display: none !important; }
 952         .medium-visible { display: block !important; }
 953         .medium-no-float {float: none; }
 954         .medium-inbl {
 955                 display: inline-block;
 956                 float: none;
 957                 vertical-align: top;
 958         }
 959         .medium-row {
 960                 display: table;
 961                 table-layout: fixed;
 962                 width: 100% !important;
 963         }
 964         .medium-col {
 965                 display: table-cell;
 966                 vertical-align: top;
 967         }
 968
 969         /* widths for medium (m) screens */
 970         .medium-w25 { width: 25% !important; }
 971         .medium-w33 { width: 33.3333% !important; }
 972         .medium-w50 { width: 50% !important; }
 973         .medium-w66 { width: 66.6666% !important; }
 974         .medium-w75 { width: 75% !important; }
 975         .medium-w100 {
 976                 display: block !important;
 977                 float: none !important;
 978                 clear: none !important;
 979                 width: auto !important;
 980                 margin-left: 0 !important;
 981                 margin-right: 0 !important;
 982                 border: 0;
 983         }
 984         /* margins for medium (m) screens */
 985         .medium-ma0,
 986         .medium-man { margin: 0 !important; }
 987
 988         /* Responsive grids */
 989         .grid4 > * {width: 49% !important; }
 990         .grid4 > :first-child + * + * {margin-left: 0 !important;}
 991         .grid6 > * {width: 32% !important; }
 992         .grid6 > :first-child + * + * + * {margin-left: 0 !important;}
 993 }
 994
 995 @media (max-width: 640px) {
 996
 997         /* quick smartphone reset */
 998         .mod,
 999         .item,
1000         .col,
1001         fieldset {
1002                 display: block !important;
1003                 float: none !important;
1004                 clear: none !important;
1005                 width: auto !important;
1006                 margin-left: 0 !important;
1007                 margin-right: 0 !important;
1008                 border: 0;
1009         }
1010         .w30,
1011         .w33,
1012         .w40,
1013         .w50,
1014         .w300p,
1015         .w400p,
1016         .w500p {
1017                 width: auto;
1018         }
1019         .row {
1020                 display: block !important;
1021                 width: 100% !important;
1022         }
1023
1024         /* layouts for tiny (t) screens */
1025         .tiny-hidden,
1026         .phone-hidden { display: none !important; }
1027         .tiny-visible { display: block !important; }
1028         .tiny-no-float {float: none;}
1029         .tiny-inbl {
1030                 display: inline-block;
1031                 float: none;
1032                 vertical-align: top;
1033         }
1034         .tiny-row {
1035                 display: table;
1036                 table-layout: fixed;
1037                 width: 100% !important;
1038         }
1039         .tiny-col {
1040                 display: table-cell;
1041                 vertical-align: top;
1042         }
1043         th,
1044         td {
1045                 display: block !important;
1046                 width: auto !important;
1047                 text-align: left !important;
1048         }
1049         thead { display: none; }
1050
1051         /* widths for tiny (t) screens */
1052         .tiny-w25 { width: 25% !important; }
1053         .tiny-w33 { width: 33.3333% !important; }
1054         .tiny-w50 { width: 50% !important; }
1055         .tiny-w66 { width: 66.6666% !important; }
1056         .tiny-w75 { width: 75% !important; }
1057         .tiny-w100 {
1058                 display: block !important;
1059                 float: none !important;
1060                 clear: none !important;
1061                 width: auto !important;
1062                 margin-left: 0 !important;
1063                 margin-right: 0 !important;
1064                 border: 0;
1065         }
1066         /* margins for tiny (t) screens */
1067         .tiny-ma0,
1068         .tiny-man { margin: 0 !important; }
1069 }
1070