Added class .line

Added class .line

.line may be used in some cases to build grids with easily-collapsing borders (table-layout, yes yes, as tables, it is the principle)

To be used like this:

```
<div class="row w100">
 <div class="line">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
 </div>
 <div class="line">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
 </div>
</div>
```

Note: .line is NOT mandatory, it must be used only if needed in some particular cases.

@charset "UTF-8";
/* UTF-8 before doing anything */

/**
 * ROCSSTI : a CSS base by Nicolas Hoffmann http://rocssti.net/
 * inspired by http://www.knacss.com/
 *
 * ROCSSTI is under CC-BY licence : http://creativecommons.org/licenses/by/3.0/
 *
 * this CSS is provided "as is", without any warranty of any type,
 * author can't be responsible of anything you might do with RÖCSSTI
 *
 * convention (adapt if needed)
 *  .parent
 *  .parent__child
 *  .parent--modifier
 *
 * RTL = Right To Left =>
 * to adapt a website in a language that is written from right to left
 * designed for multilingual websites with LTR et RTL
 * set @rtl_option to true in 00 -- LESS to activate
 *
 *
 * summary
 * 00 -- LESS
 * 01 -- reset
 * 02 -- webfonts + Hx structure
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 * 04 -- links + icons
 * 05 -- layout & modules
 * 06 -- structure (page / skip links / header / main content / footer)
 * 07 -- forms
 * 08 -- inside content
 * 09 -- minor breakpoints between desktop and tablets
 * 10 -- tablets - major breakpoint
 * 11 -- minor breakpoints between tablets and mobile
 * 12 -- mobile - major breakpoint
 * 13 -- minor breakpoints for very small mobiles
 * 14 -- print
 * 15 -- fix viewport
 * 16 -- state classes
 * 17 -- bonus : Fixes IE
 */

/*
 *****************************************************************
 * 00 -- LESS
 *****************************************************************
 */

// LESS values : adapt them to your designs
@basefont : 14; // if "14" then 1em = 14px
@l-h : 1.5; // equiv line-height 1.5

// fonts
@font-family : 'Arial, sans-serif';

// colors
@color-links : #2573be;
@color-hover : #000;
@hr : #000;
@hr-height : 1px;
@color-alert : #bf0000;

// widths
@input-defaut-size : 250px;

// RTL
@rtl_option : false;

// hyphens
@hyphenation_default : false;

// LESS functions : don't touch ;)

.pxtoem (@fontsize) {font-size: (@fontsize / @basefont) + 0em;}

.line (@fontsize) {line-height: @l-h *2 / (@fontsize / @basefont) + 0em}

.grid (@number) {width: (100%-(@gutter*(@number - 1))) / @number;}

/* based on http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil */

// rounding value is for number of digits after comma => 10000 => 1.6667 ; 100000 => 1.13374
.flow_hx(@font-size, @base-font: @basefont, @base-height: @l-h, @rounding-value: 10000) {

  @coef: ceil(1 / (@base-height * @base-font / @font-size));
  @other_coef: ceil(@base-height * @base-font / @font-size);
  @size: (@font-size / @base-font) + 0em;
  @height: (@base-font * @base-height / @font-size);
  @mar-top: (@height * @coef );

font-size: round(@size * @rounding-value) / @rounding-value;
line-height: round(@height * @coef * @rounding-value) / @rounding-value;
margin: ( round(@mar-top*@rounding-value)/@rounding-value * @other_coef + 0em) 0 (round(@mar-top*@rounding-value)/@rounding-value/2 * @other_coef + 0em) 0;

}

// for smaller, bigger, etc. classes
.flow_other(@font-size, @base-font: @basefont, @base-height: @l-h, @rounding-value: 10000) {

  @coef: ceil(1 / (@base-height * @base-font / @font-size));
  @other_coef: ceil(@base-height * @base-font / @font-size);
  @size: (@font-size / @base-font) + 0em;
  @height: (@base-font * @base-height / @font-size);
  @mar-top: (@height * @coef );

font-size: round(@size * @rounding-value) / @rounding-value;
line-height: round(@height * @coef * @rounding-value) / @rounding-value;
margin: ( round(@mar-top*@rounding-value)/@rounding-value + 0em) 0;

}

/*
 *****************************************************************
 * 1 -- reset
 *****************************************************************
 */

/* for HTML 5 */
article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
audio, canvas, progress, video { display: inline-block; }
abbr, eventsource, mark, meter, time, output, bb { display: inline; }

/* to comment/fallback if you care about IE<8 */
html { box-sizing: border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}

/* reset minimum */
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
button { border: 0; }
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
  font-size: 1em;
  line-height: @l-h;
  margin: (@l-h + 0em) 0;
}

/* fix display img/iframe */
img,
iframe { vertical-align: middle; }

ul, ol { padding-left: 2em; }

.unstyled {
  padding-left: 0;
  list-style-type: none;
}

[dir="rtl"] {
  & ol when (@rtl_option) {
  /* RTL */
  padding-left: 0;
  padding-right: 2em;
  }
  & ul when (@rtl_option) {
  /* RTL */
  padding-left: 0;
  padding-right: 2em;
  }
}

/* base font size at 10px */
html {
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
  /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */
  font-size: calc(1em * 0.625);
}
body {
  background: #fff;
  color: #333;
  font-family: @font-family;
  font-size: (@basefont / 10) + 0em;
  line-height: @l-h;
}

/*
 *****************************************************************
 * 02 -- webfonts + Hx structure
 *****************************************************************
 */

/* here the font faces */

/*@font-face {

}*/

h1,
.h1 {
  display: block;
  .flow_hx(26); // equiv 26px
  font-weight: normal;
}
h2,
.h2 {
  display: block;
  .flow_hx(24); // equiv 24px
  font-weight: normal;
}
h3,
.h3 {
  display: block;
  .flow_hx(22); // equiv 22px
  font-weight: normal;
}
h4,
.h4 {
  display: block;
  .flow_hx(20); // equiv 20px
  font-weight: normal;
}
h5,
.h5 {
  display: block;
  .flow_hx(18); // equiv 18px
  font-weight: normal;
}
h6,
.h6 {
  display: block;
  .flow_hx(16); // equiv 16px
  font-weight: normal;
}

.uppercase {
  text-transform: uppercase;
}

/* other useful classes */
.smaller {
  .flow_other(10); // equiv 10px
}
.small {
  .flow_other(12); // equiv 12px
}
.big {
  .flow_other(16); // equiv 16px
}
.bigger {
  .flow_other(18); // equiv 18px
}
.biggest {
  .flow_other(20); // equiv 20px
}

/*
 *****************************************************************
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 *****************************************************************
 */

.noborder,
iframe { border: 0; }

table {
  table-layout: fixed;
}

/*
 * taken from http://tinytypo.tetue.net/ made by @tetue
 * tuned with the help of http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 *
 * see http://en.wikipedia.org/wiki/International_variation_in_quotation_marks for reference
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(es) > q {
  quotes: "\00AB" "\00BB" "\201C" "\201D";
}
:lang(it) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
}
:lang(de) > q {
  quotes: "\201e" "\201c" "\201a" "\2018";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

/* avoid ugly line-height */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

/* avoid margin problems */
h1:first-child,.h1:first-child,
h2:first-child,.h2:first-child,
h3:first-child,.h3:first-child,
h4:first-child,.h4:first-child,
h5:first-child,.h5:first-child,
h6:first-child,.h6:first-child {
  margin-top: 0;
}
/* remove bottom margin on last child */
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
table:last-child {
  margin-bottom: 0;
}

/* avoid margin on nested elements */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}

/* Thou shalt not pass (Moïse or Gandalf, don't remember) */
& when (@hyphenation_default) {
textarea, table, td, th, code, pre, samp, div, p {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
}
.cut when not (@hyphenation_default) {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

/* remove hyphenation if needed */
.nocut {
  word-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

code,
pre,
samp {
  white-space: pre-wrap;
}
code {
  line-height: 1;
}
kbd {
  border: solid 1px;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  padding: 0 .25em;
}
table {
  margin-bottom: 1.5em;
}
/* important, abbr are good */
/* only those with a title are shown */
abbr[title] {
  border-bottom: dotted 1px;
  cursor: help;
  /* color inherited from text */
}

/* text aligns */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }
.alignmiddle { vertical-align: middle; }

[dir="rtl"] {
  & .alignright when (@rtl_option) {
    /* RTL */
    text-align: left;
  }
  & .alignleft when (@rtl_option) {
    /* RTL */
    text-align: right;
  }
}

/*
 *****************************************************************
 * 04 -- links + icons
 *****************************************************************
 */

/* links */
/* remember focus */
a {
  color: @color-links;
  cursor: pointer;

  &:focus,
  &:hover,
  &:active {
    color: @color-hover;
  }
}

/* avoid border on images in links + fix border image IE */
a:link img,
a:visited img,
img {
  border-style: none;
}

/* links with icons, may use DATA-URI */

/* external links */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* if full URL of the website in an internal link, remove icon */
/*a[href^="http://www.mydomain.com"] {

}*/
/* contact, mailto links */
/*.mail,
a[href^="mailto:"] {

}*/
/* if URL ends with .pdf or whatever */
/*a[href$=".pdf"] {

}*/

/* facto icons */
/*[class*=icon-30] {
display: inline-block;
width: 30px;
height: 30px;
}*/

/*
 *****************************************************************
 * 05 -- layout & modules
 *****************************************************************
 */

/**
 * layout
 */

/* it depends, it exceeds (french joke) */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
svg {
  height: auto;
  max-width: 100%;
}
/* no reset on embed, object & video, some players don't like */

/* useful to manage floats */
/* containing floats */
.mod {
  overflow: auto;
}
.mod--hidden {
  overflow: hidden;
}

/* some floattings */
.left {
  float: left;
}
.right {
  float: right;
}

/* clear floats */
.clear {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearhidden {
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

[dir="rtl"] {
  & .left when (@rtl_option) {
    /* RTL */
    float: right;
  }
  & .right when (@rtl_option) {
    /* RTL */
    float: left;
  }

  & .clearleft when (@rtl_option) {
    /* RTL */
    clear: right;
  }
  & .clearright when (@rtl_option) {
    /* RTL */
    clear: left;
  }
}

/* gut : "spacing" empty div */
.gut {
  height: 1px;
}

/* table-design in CSS */
.row {
  display: table;
  table-layout: fixed;
}
.line {
  display: table-row;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}

/* block */
.bl {
  display: block;
}

/* inline-block, useful for grids, and not only */
.inbl,
.grid {
  display: inline-block;
}

/* grid = element of inline-grid */
.grid {
  vertical-align: top;
}

/* to relativize */
.relative {
  position: relative;
}

/* centered block */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* hardware-acceleration activation */
.hardware-accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* block widths */
.w1   { width: 1%; }
.w2   { width: 2%; }
.w3   { width: 3%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w33  { width: 33.333%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.w60  { width: 60%; }
.w66  { width: 66.666%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

/* here you may add em widths */
/*.w960e { width: 60em; }*/

/* here you may add pixel widths */
/*.w500p { width: 500px; }*/

/* here you may add em max-widths */
/*.mw960e { max-width: 60em; }*/

/* here you may add pixel max-widths */
/*.mw960p { max-width: 960px; }*/

/* margins */
.mt0 { margin-top: 0; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.m0  { margin: 0; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }

[dir="rtl"] {
  & .mr0 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-left: 0;
  }
  & .mr1 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-right: inherit; margin-left: 1em;
  }
  & .mr2 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-right: inherit; margin-left: 2em;
  }
  & .ml0 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-right: 0;
  }
  & .ml1 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-left: inherit; margin-right: 1em;
  }
  & .ml2 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-left: inherit; margin-right: 2em;
  }
}

/* paddings */
.pt0 { padding-top: 0; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.p0  { padding: 0; }
.p1  { padding: 1em; }
.p2  { padding: 2em; }

[dir="rtl"] {
  & .pr0 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-left: 0;
  }
  & .pr1 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-right: inherit; padding-left: 1em;
  }
  & .pr2 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-right: inherit; padding-left: 2em;
  }
  & .pl0 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-right: 0;
  }
  & .pl1 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-left: inherit; padding-right: 1em;
  }
  & .pl2 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-left: inherit; padding-right: 2em;
  }
}

/* for 1px-high hr */
hr {
  background-color: @hr;
  border: 0;
  color: @hr;
  height: @hr-height;
  margin: 0 0 1em;
  padding: 0;
}

/* to hide text with accessibility… a11y */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hidden    { display: none; } /* hidden everywhere */
.nodesktop { display: none; } /* hidden on desktop */
/*.noprint   {} /* hidden on print */
/*.notablet  {} /* hidden on tablets */
/*.nomobile  {} /* hidden on mobile */

/**
 * modules
 */

/*
 *****************************************************************
 * 06 -- structure (page / skip links / header / main content / footer)
 *****************************************************************
 */

/* === page === */
#page {
  margin: 0 auto;
  position: relative;
}

/* === skip links === */
.skip {

}
/* .skip__link = 1 skip link  */
/* they should be visible not only on focus */
.skip__link {

  &:focus,
  &:hover,
  &:active {
  /* anyway remember making them visible on focus */

  }

}

/* === header === */
.header {

}
.logo {

}
.navigation {

}

/* === main content === */
.main {

}

/* === footer === */
.footer {

}

/*
 *****************************************************************
 * 07 -- forms
 *****************************************************************
 */

/* makes you want to click on */
label,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* avoid dummy resize */
textarea {
  resize: vertical;
}

label,
button,
input,
select {
  vertical-align: middle;
}

/* to adapt to your design */
input,
select,
textarea {
  border: 1px solid #000;
  border-radius: 5px;
  padding: .5em;
  width: @input-defaut-size;
  /** fix typo inputs **/
  font-family: inherit;
  font-size: 1em;
}

/* for field texts */
.label {
  display: inline-block;
}

/* to adapt to your design */
.button {
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px #ddd;
  box-shadow: 1px 1px 1px #ddd;
  color: #000;
}

/*
 * avoids dimensioning for radio, checkboxes and images
 * and a different display on IE
 */
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: transparent;
  border: 0;
  width: auto;
}

/* to cancel input sizing or other if needed */
.auto {
  width: auto;
}

/* error or confirmation messages */
.alert,
.alert input,
.alert textarea,
.alert select {
  color: @color-alert;
  font-weight: bold;
}
/* .redborder is only used to debug */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid @color-alert;
}
.alert img {
  border: 0;
}
/*.ok {

}*/

/*
 * can be completed with HTML5 required attribute
 * example with a color, remember not only displaying information with it
 */
/*select:required:invalid,
input:required:invalid,
input:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid {
  background: #fef6f6;
  -moz-box-shadow: none;
}

input:focus:required:valid,
textarea:focus:required:valid,
select:focus:required:valid {
  background: #efe;
  -moz-box-shadow: none;
}*/

/*
 *****************************************************************
 * 08 -- inside content (other styles for pages)
 *****************************************************************
 */

/* home */

/*
 *****************************************************************
 * 09 -- minor breakpoints between desktop and tablets
 *****************************************************************
 */

/*
 *****************************************************************
 * 10 -- tablets - major breakpoint
 *****************************************************************
 */

@media (max-width: 48em) { /* equiv 768px */

  /**
   * layout/modules
   */

  /* display elements */
  .nodesktop { display: block; }

  /* hide unnecessary elements */
  .notablet { display: none; }

  /* linearization of floating content/table-layout */
  .autotablet {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */

  /**
   * inside content (other styles for pages)
   */

}

/*
 *****************************************************************
 * 11 -- minor breakpoints between tablets and mobile
 *****************************************************************
 */

/*
 *****************************************************************
 * 12 -- mobile - major breakpoint
 *****************************************************************
 */

@media (max-width: 40em) { /* equiv 640px */

  /**
   * layout/modules
   */

  /* display elements */
  .notablet { display: block; }

  /* hide unnecessary elements */
  .nomobile { display: none; }

  /* linearization of floating content/table-layout */
  .automobile {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */

  /**
   * inside content (other styles for pages)
   */

}

/*
 *****************************************************************
 * 13 -- minor breakpoints for very small mobiles
 *****************************************************************
 */

/*
 *****************************************************************
 * 14 -- print
 *****************************************************************
 */

@media print {

  /**
   * add in this all elements which need to be hardly reseted for print
   */
  body,
  html,
  #page,
  .reset4print {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: auto;
    padding: 0;
    position: static;
    width: auto;
  }

  body {
    padding: .5em;
  }

  /* hide unnecessary elements */
  .noprint {
    display: none;
  }

  /* display specific elements for print */
  .onprint {
    display: block;
  }

  /* avoid problematic page break */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }

  /* display links, except for those containing images */
  /* warning, remember checking the result & think to limitate
   * this option only for inside content links */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* fix particular properties */

} /* end print */

/*
 *****************************************************************
 * 15 -- fix viewport
 *****************************************************************
 */

/* fix viewport for Win8 (snap mode) and preparing day
 * when viewport will be supported by all render engines
 *
 * Examples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 * width=device-width => width: device-width;
 * height=device-height => height: device-height;
 * initial-scale=2 => zoom: 2;
 * maximum-scale=2 => max-zoom: 2;
 * minimum-scale=0.5 => min-zoom: 0.5;
 * user-scalable=no => user-zoom: fixed;
 *
 * for Win8 snap mode => only width: device-width; works for the moment
 */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

/*
 *****************************************************************
 * 16 -- state classes
 *****************************************************************
 */

/*
 * State classes = put here to take priority on all classes
 *
 */

/*
.is-hidden,
[aria-hidden=true] {
  display: none;
}
*/

/*
 *****************************************************************
 * 17 -- bonus : Fixes IE
 *****************************************************************
 */

/*
 * based on conditional classes on HTML element
 *
 * to be used only if there are not to many fixes &
 * small impact on webperfs for other browsers
 *
 */

/* less than IE 9 */
.oldies .nooldies {
  display: none;
}

.ie6 .noie6 {
  display: none;
}
.ie7 .noie7 {
  display: none;
}
.ie8 .noie8 {
  display: none;
}
.ie9 .noie9 {
  display: none;
}

.ie7 .col,
.ie7 .col-noalign,
.ie6 .col,
.ie6 .col-noalign {
  float: left;
}
.ie7 .row,
.ie6 .row {
  overflow: auto;
}

[dir="rtl"] {
  & .ie7 .col  when (@rtl_option) {
    /* RTL */
    float: right;
  }
  & .ie7 .col-noalign  when (@rtl_option) {
    /* RTL */
    float: right;
  }
  & .ie6 .col  when (@rtl_option) {
    /* RTL */
    float: right;
  }
  & .ie6 .col-noalign  when (@rtl_option) {
    /* RTL */
    float: right;
  }
}

@charset "UTF-8";
/* UTF-8 before doing anything */

/**
 * ROCSSTI : a CSS base by Nicolas Hoffmann http://rocssti.net/
 * inspired by http://www.knacss.com/
 *
 * ROCSSTI is under CC-BY licence : http://creativecommons.org/licenses/by/3.0/
 *
 * this CSS is provided "as is", without any warranty of any type,
 * author can't be responsible of anything you might do with RÖCSSTI
 *
 * convention (adapt if needed)
 *  .parent
 *  .parent__child
 *  .parent--modifier
 *
 * RTL = Right To Left =>
 * to adapt a website in a language that is written from right to left
 * designed for multilingual websites with LTR et RTL
 * set @rtl_option to true in 00 -- LESS to activate
 *
 *
 * summary
 * 00 -- LESS
 * 01 -- reset
 * 02 -- webfonts + Hx structure
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 * 04 -- links + icons
 * 05 -- layout & modules
 * 06 -- structure (page / skip links / header / main content / footer)
 * 07 -- forms
 * 08 -- inside content
 * 09 -- minor breakpoints between desktop and tablets
 * 10 -- tablets - major breakpoint
 * 11 -- minor breakpoints between tablets and mobile
 * 12 -- mobile - major breakpoint
 * 13 -- minor breakpoints for very small mobiles
 * 14 -- print
 * 15 -- fix viewport
 * 16 -- state classes
 * 17 -- bonus : Fixes IE
 */

/*
 *****************************************************************
 * 00 -- LESS
 *****************************************************************
 */

// LESS values : adapt them to your designs
@basefont : 14; // if "14" then 1em = 14px
@l-h : 1.5; // equiv line-height 1.5

// fonts
@font-family : 'Arial, sans-serif';

// colors
@color-links : #2573be;
@color-hover : #000;
@hr : #000;
@hr-height : 1px;
@color-alert : #bf0000;

// widths
@input-defaut-size : 250px;

// RTL
@rtl_option : false;

// hyphens
@hyphenation_default : false;

// LESS functions : don't touch ;)

.pxtoem (@fontsize) {font-size: (@fontsize / @basefont) + 0em;}

.line (@fontsize) {line-height: @l-h *2 / (@fontsize / @basefont) + 0em}

.grid (@number) {width: (100%-(@gutter*(@number - 1))) / @number;}

/* based on http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil */

// rounding value is for number of digits after comma => 10000 => 1.6667 ; 100000 => 1.13374
.flow_hx(@font-size, @base-font: @basefont, @base-height: @l-h, @rounding-value: 10000) {

  @coef: ceil(1 / (@base-height * @base-font / @font-size));
  @other_coef: ceil(@base-height * @base-font / @font-size);
  @size: (@font-size / @base-font) + 0em;
  @height: (@base-font * @base-height / @font-size);
  @mar-top: (@height * @coef );

font-size: round(@size * @rounding-value) / @rounding-value;
line-height: round(@height * @coef * @rounding-value) / @rounding-value;
margin: ( round(@mar-top*@rounding-value)/@rounding-value * @other_coef + 0em) 0 (round(@mar-top*@rounding-value)/@rounding-value/2 * @other_coef + 0em) 0;

}

// for smaller, bigger, etc. classes
.flow_other(@font-size, @base-font: @basefont, @base-height: @l-h, @rounding-value: 10000) {

  @coef: ceil(1 / (@base-height * @base-font / @font-size));
  @other_coef: ceil(@base-height * @base-font / @font-size);
  @size: (@font-size / @base-font) + 0em;
  @height: (@base-font * @base-height / @font-size);
  @mar-top: (@height * @coef );

font-size: round(@size * @rounding-value) / @rounding-value;
line-height: round(@height * @coef * @rounding-value) / @rounding-value;
margin: ( round(@mar-top*@rounding-value)/@rounding-value + 0em) 0;

}

/*
 *****************************************************************
 * 1 -- reset
 *****************************************************************
 */

/* for HTML 5 */
article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
audio, canvas, progress, video { display: inline-block; }
abbr, eventsource, mark, meter, time, output, bb { display: inline; }

/* to comment/fallback if you care about IE<8 */
html { box-sizing: border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}

/* reset minimum */
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
button { border: 0; }
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
  font-size: 1em;
  line-height: @l-h;
  margin: (@l-h + 0em) 0;
}

/* fix display img/iframe */
img,
iframe { vertical-align: middle; }

ul, ol { padding-left: 2em; }

.unstyled {
  padding-left: 0;
  list-style-type: none;
}

[dir="rtl"] {
  & ol when (@rtl_option) {
  /* RTL */
  padding-left: 0;
  padding-right: 2em;
  }
  & ul when (@rtl_option) {
  /* RTL */
  padding-left: 0;
  padding-right: 2em;
  }
}

/* base font size at 10px */
html {
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
  /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */
  font-size: calc(1em * 0.625);
}
body {
  background: #fff;
  color: #333;
  font-family: @font-family;
  font-size: (@basefont / 10) + 0em;
  line-height: @l-h;
}

/*
 *****************************************************************
 * 02 -- webfonts + Hx structure
 *****************************************************************
 */

/* here the font faces */

/*@font-face {

}*/

h1,
.h1 {
  display: block;
  .flow_hx(26); // equiv 26px
  font-weight: normal;
}
h2,
.h2 {
  display: block;
  .flow_hx(24); // equiv 24px
  font-weight: normal;
}
h3,
.h3 {
  display: block;
  .flow_hx(22); // equiv 22px
  font-weight: normal;
}
h4,
.h4 {
  display: block;
  .flow_hx(20); // equiv 20px
  font-weight: normal;
}
h5,
.h5 {
  display: block;
  .flow_hx(18); // equiv 18px
  font-weight: normal;
}
h6,
.h6 {
  display: block;
  .flow_hx(16); // equiv 16px
  font-weight: normal;
}

.uppercase {
  text-transform: uppercase;
}

/* other useful classes */
.smaller {
  .flow_other(10); // equiv 10px
}
.small {
  .flow_other(12); // equiv 12px
}
.big {
  .flow_other(16); // equiv 16px
}
.bigger {
  .flow_other(18); // equiv 18px
}
.biggest {
  .flow_other(20); // equiv 20px
}

/*
 *****************************************************************
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 *****************************************************************
 */

.noborder,
iframe { border: 0; }

table {
  table-layout: fixed;
}

/*
 * taken from http://tinytypo.tetue.net/ made by @tetue
 * tuned with the help of http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 *
 * see http://en.wikipedia.org/wiki/International_variation_in_quotation_marks for reference
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(es) > q {
  quotes: "\00AB" "\00BB" "\201C" "\201D";
}
:lang(it) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
}
:lang(de) > q {
  quotes: "\201e" "\201c" "\201a" "\2018";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

/* avoid ugly line-height */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

/* avoid margin problems */
h1:first-child,.h1:first-child,
h2:first-child,.h2:first-child,
h3:first-child,.h3:first-child,
h4:first-child,.h4:first-child,
h5:first-child,.h5:first-child,
h6:first-child,.h6:first-child {
  margin-top: 0;
}
/* remove bottom margin on last child */
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
table:last-child {
  margin-bottom: 0;
}

/* avoid margin on nested elements */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}

/* Thou shalt not pass (Moïse or Gandalf, don't remember) */
& when (@hyphenation_default) {
textarea, table, td, th, code, pre, samp, div, p {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
}
.cut when not (@hyphenation_default) {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

/* remove hyphenation if needed */
.nocut {
  word-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

code,
pre,
samp {
  white-space: pre-wrap;
}
code {
  line-height: 1;
}
kbd {
  border: solid 1px;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  padding: 0 .25em;
}
table {
  margin-bottom: 1.5em;
}
/* important, abbr are good */
/* only those with a title are shown */
abbr[title] {
  border-bottom: dotted 1px;
  cursor: help;
  /* color inherited from text */
}

/* text aligns */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }
.alignmiddle { vertical-align: middle; }

[dir="rtl"] {
  & .alignright when (@rtl_option) {
    /* RTL */
    text-align: left;
  }
  & .alignleft when (@rtl_option) {
    /* RTL */
    text-align: right;
  }
}

/*
 *****************************************************************
 * 04 -- links + icons
 *****************************************************************
 */

/* links */
/* remember focus */
a {
  color: @color-links;
  cursor: pointer;

  &:focus,
  &:hover,
  &:active {
    color: @color-hover;
  }
}

/* avoid border on images in links + fix border image IE */
a:link img,
a:visited img,
img {
  border-style: none;
}

/* links with icons, may use DATA-URI */

/* external links */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* if full URL of the website in an internal link, remove icon */
/*a[href^="http://www.mydomain.com"] {

}*/
/* contact, mailto links */
/*.mail,
a[href^="mailto:"] {

}*/
/* if URL ends with .pdf or whatever */
/*a[href$=".pdf"] {

}*/

/* facto icons */
/*[class*=icon-30] {
display: inline-block;
width: 30px;
height: 30px;
}*/

/*
 *****************************************************************
 * 05 -- layout & modules
 *****************************************************************
 */

/**
 * layout
 */

/* it depends, it exceeds (french joke) */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
svg {
  height: auto;
  max-width: 100%;
}
/* no reset on embed, object & video, some players don't like */

/* useful to manage floats */
/* containing floats */
.mod {
  overflow: auto;
}
.mod--hidden {
  overflow: hidden;
}

/* some floattings */
.left {
  float: left;
}
.right {
  float: right;
}

/* clear floats */
.clear {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearhidden {
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

[dir="rtl"] {
  & .left when (@rtl_option) {
    /* RTL */
    float: right;
  }
  & .right when (@rtl_option) {
    /* RTL */
    float: left;
  }

  & .clearleft when (@rtl_option) {
    /* RTL */
    clear: right;
  }
  & .clearright when (@rtl_option) {
    /* RTL */
    clear: left;
  }
}

/* gut : "spacing" empty div */
.gut {
  height: 1px;
}

/* table-design in CSS */
.row {
  display: table;
  table-layout: fixed;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}

/* block */
.bl {
  display: block;
}

/* inline-block, useful for grids, and not only */
.inbl,
.grid {
  display: inline-block;
}

/* grid = element of inline-grid */
.grid {
  vertical-align: top;
}

/* to relativize */
.relative {
  position: relative;
}

/* centered block */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* hardware-acceleration activation */
.hardware-accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* block widths */
.w1   { width: 1%; }
.w2   { width: 2%; }
.w3   { width: 3%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w33  { width: 33.333%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.w60  { width: 60%; }
.w66  { width: 66.666%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

/* here you may add em widths */
/*.w960e { width: 60em; }*/

/* here you may add pixel widths */
/*.w500p { width: 500px; }*/

/* here you may add em max-widths */
/*.mw960e { max-width: 60em; }*/

/* here you may add pixel max-widths */
/*.mw960p { max-width: 960px; }*/

/* margins */
.mt0 { margin-top: 0; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.m0  { margin: 0; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }

[dir="rtl"] {
  & .mr0 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-left: 0;
  }
  & .mr1 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-right: inherit; margin-left: 1em;
  }
  & .mr2 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-right: inherit; margin-left: 2em;
  }
  & .ml0 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-right: 0;
  }
  & .ml1 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-left: inherit; margin-right: 1em;
  }
  & .ml2 when (@rtl_option) {
    /* RTL = warning, use with caution */
    margin-left: inherit; margin-right: 2em;
  }
}

/* paddings */
.pt0 { padding-top: 0; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.p0  { padding: 0; }
.p1  { padding: 1em; }
.p2  { padding: 2em; }

[dir="rtl"] {
  & .pr0 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-left: 0;
  }
  & .pr1 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-right: inherit; padding-left: 1em;
  }
  & .pr2 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-right: inherit; padding-left: 2em;
  }
  & .pl0 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-right: 0;
  }
  & .pl1 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-left: inherit; padding-right: 1em;
  }
  & .pl2 when (@rtl_option) {
    /* RTL = warning, use with caution */
    padding-left: inherit; padding-right: 2em;
  }
}

/* for 1px-high hr */
hr {
  background-color: @hr;
  border: 0;
  color: @hr;
  height: @hr-height;
  margin: 0 0 1em;
  padding: 0;
}

/* to hide text with accessibility… a11y */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hidden    { display: none; } /* hidden everywhere */
.nodesktop { display: none; } /* hidden on desktop */
/*.noprint   {} /* hidden on print */
/*.notablet  {} /* hidden on tablets */
/*.nomobile  {} /* hidden on mobile */

/**
 * modules
 */

/*
 *****************************************************************
 * 06 -- structure (page / skip links / header / main content / footer)
 *****************************************************************
 */

/* === page === */
#page {
  margin: 0 auto;
  position: relative;
}

/* === skip links === */
.skip {

}
/* .skip__link = 1 skip link  */
/* they should be visible not only on focus */
.skip__link {

  &:focus,
  &:hover,
  &:active {
  /* anyway remember making them visible on focus */

  }

}

/* === header === */
.header {

}
.logo {

}
.navigation {

}

/* === main content === */
.main {

}

/* === footer === */
.footer {

}

/*
 *****************************************************************
 * 07 -- forms
 *****************************************************************
 */

/* makes you want to click on */
label,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* avoid dummy resize */
textarea {
  resize: vertical;
}

label,
button,
input,
select {
  vertical-align: middle;
}

/* to adapt to your design */
input,
select,
textarea {
  border: 1px solid #000;
  border-radius: 5px;
  padding: .5em;
  width: @input-defaut-size;
  /** fix typo inputs **/
  font-family: inherit;
  font-size: 1em;
}

/* for field texts */
.label {
  display: inline-block;
}

/* to adapt to your design */
.button {
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px #ddd;
  box-shadow: 1px 1px 1px #ddd;
  color: #000;
}

/*
 * avoids dimensioning for radio, checkboxes and images
 * and a different display on IE
 */
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: transparent;
  border: 0;
  width: auto;
}

/* to cancel input sizing or other if needed */
.auto {
  width: auto;
}

/* error or confirmation messages */
.alert,
.alert input,
.alert textarea,
.alert select {
  color: @color-alert;
  font-weight: bold;
}
/* .redborder is only used to debug */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid @color-alert;
}
.alert img {
  border: 0;
}
/*.ok {

}*/

/*
 * can be completed with HTML5 required attribute
 * example with a color, remember not only displaying information with it
 */
/*select:required:invalid,
input:required:invalid,
input:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid {
  background: #fef6f6;
  -moz-box-shadow: none;
}

input:focus:required:valid,
textarea:focus:required:valid,
select:focus:required:valid {
  background: #efe;
  -moz-box-shadow: none;
}*/

/*
 *****************************************************************
 * 08 -- inside content (other styles for pages)
 *****************************************************************
 */

/* home */

/*
 *****************************************************************
 * 09 -- minor breakpoints between desktop and tablets
 *****************************************************************
 */

/*
 *****************************************************************
 * 10 -- tablets - major breakpoint
 *****************************************************************
 */

@media (max-width: 48em) { /* equiv 768px */

  /**
   * layout/modules
   */

  /* display elements */
  .nodesktop { display: block; }

  /* hide unnecessary elements */
  .notablet { display: none; }

  /* linearization of floating content/table-layout */
  .autotablet {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */

  /**
   * inside content (other styles for pages)
   */

}

/*
 *****************************************************************
 * 11 -- minor breakpoints between tablets and mobile
 *****************************************************************
 */

/*
 *****************************************************************
 * 12 -- mobile - major breakpoint
 *****************************************************************
 */

@media (max-width: 40em) { /* equiv 640px */

  /**
   * layout/modules
   */

  /* display elements */
  .notablet { display: block; }

  /* hide unnecessary elements */
  .nomobile { display: none; }

  /* linearization of floating content/table-layout */
  .automobile {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */

  /**
   * inside content (other styles for pages)
   */

}

/*
 *****************************************************************
 * 13 -- minor breakpoints for very small mobiles
 *****************************************************************
 */

/*
 *****************************************************************
 * 14 -- print
 *****************************************************************
 */

@media print {

  /**
   * add in this all elements which need to be hardly reseted for print
   */
  body,
  html,
  #page,
  .reset4print {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: auto;
    padding: 0;
    position: static;
    width: auto;
  }

  body {
    padding: .5em;
  }

  /* hide unnecessary elements */
  .noprint {
    display: none;
  }

  /* display specific elements for print */
  .onprint {
    display: block;
  }

  /* avoid problematic page break */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }

  /* display links, except for those containing images */
  /* warning, remember checking the result & think to limitate
   * this option only for inside content links */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* fix particular properties */

} /* end print */

/*
 *****************************************************************
 * 15 -- fix viewport
 *****************************************************************
 */

/* fix viewport for Win8 (snap mode) and preparing day
 * when viewport will be supported by all render engines
 *
 * Examples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 * width=device-width => width: device-width;
 * height=device-height => height: device-height;
 * initial-scale=2 => zoom: 2;
 * maximum-scale=2 => max-zoom: 2;
 * minimum-scale=0.5 => min-zoom: 0.5;
 * user-scalable=no => user-zoom: fixed;
 *
 * for Win8 snap mode => only width: device-width; works for the moment
 */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

/*
 *****************************************************************
 * 16 -- state classes
 *****************************************************************
 */

/*
 * State classes = put here to take priority on all classes
 *
 */

/*
.is-hidden,
[aria-hidden=true] {
  display: none;
}
*/

/*
 *****************************************************************
 * 17 -- bonus : Fixes IE
 *****************************************************************
 */

/*
 * based on conditional classes on HTML element
 *
 * to be used only if there are not to many fixes &
 * small impact on webperfs for other browsers
 *
 */

/* less than IE 9 */
.oldies .nooldies {
  display: none;
}

.ie6 .noie6 {
  display: none;
}
.ie7 .noie7 {
  display: none;
}
.ie8 .noie8 {
  display: none;
}
.ie9 .noie9 {
  display: none;
}

.ie7 .col,
.ie7 .col-noalign,
.ie6 .col,
.ie6 .col-noalign {
  float: left;
}
.ie7 .row,
.ie6 .row {
  overflow: auto;
}

[dir="rtl"] {
  & .ie7 .col  when (@rtl_option) {
    /* RTL */
    float: right;
  }
  & .ie7 .col-noalign  when (@rtl_option) {
    /* RTL */
    float: right;
  }
  & .ie6 .col  when (@rtl_option) {
    /* RTL */
    float: right;
  }
  & .ie6 .col-noalign  when (@rtl_option) {
    /* RTL */
    float: right;
  }
}


add height to mobile grid

add height to mobile grid

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Thinkful/ui.git/'


Fixes CSS of sorted list item

Fixes CSS of sorted list item

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/MenesesEvandro/WCF.git/'


fix select width om multi search page

fix select width om multi search page

fatal: unable to access 'https://github.com/bmesuere/uni-test.git/': The requested URL returned error: 403


Increase bottom padding of leading segments

fatal: unable to access 'https://github.com/cgvt/website.git/': The requested URL returned error: 403


updated border radius for buttons

updated border radius for buttons

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/amazingBastard/sva-accreditation.git/'


Create rocssti-fr.less

Create rocssti-fr.less

@charset "UTF-8";
/* UTF-8 déclaré avant toute chose */

/******************************************************************
 * ROCSSTI : une base CSS par Nicolas Hoffmann http://rocssti.nicolas-hoffmann.net/
 * inspiré par http://www.knacss.com/
 *
 * ROCSSTI est sous licence CC-BY : http://creativecommons.org/licenses/by/3.0/fr/
 *
 * cette CSS est fournie telle quelle, sans aucune garantie d'aucun type,
 * l'auteur ne saurait être tenu responsable de quoi que ce soit pour
 * l'utilisation de RÖCSSTI.
 *
 * résumé
 * 00 -- LESS
 * 01 -- reset
 * 02 -- webfonts  + structure Hx
 * 03 -- classes utilitaires + fix typos + styles "balises fixes"
 * 04 -- liens + icônes
 * 05 -- layout et modules
 * 06 -- structure (page / menuaccess / header / main content / footer)
 * 07 -- forms
 * 08 -- dans le contenu
 * 09 -- breakpoints mineurs entre desktop et tablettes
 * 10 -- tablettes - breakpoint majeur
 * 11 -- breakpoints mineurs entre tablettes et mobile
 * 12 -- mobile - breakpoint majeur
 * 13 -- breakpoints mineurs tout petit mobile
 * 14 -- print
 * 15 -- fix viewport
 * 16 -- bonus : Fixes IE
 */

/*
 *****************************************************************
 * 00 -- LESS
 *****************************************************************
 */

// LESS values : adaptez-les à vos designs
@basefont : 14; // si "14" alors 1em = 14px
@l-h : 1.5; // equiv line-height 1.5em

// couleurs
@color-links : #2573be;
@color-hover : #000;
@hr : #000;
@hr-height : 1px;
@color-alert : #bf0000;

// largeurs
@input-defaut-size : 250px;

// LESS functions : pas touche ;)

.pxtoem (@fontsize) {font-size: (@fontsize / @basefont) + 0em;}

.line (@fontsize) {line-height: @l-h *2 / (@fontsize / @basefont) + 0em}

.grid (@number) {width: (100%-(@gutter*(@number - 1))) / @number;}

/* calculées via http://soqr.fr/vertical-rhythm/ merci @goetter & @eQRoeil */

// rounding value is for number of digits after comma => 10000 => 1.6667 ; 100000 => 1.13374
.flow_hx(@font-size, @base-font: @basefont, @base-height: @l-h, @rounding-value: 10000) {

  @coef: ceil(1 / (@base-height * @base-font / @font-size));
  @other_coef: ceil(@base-height * @base-font / @font-size);
  @size: (@font-size / @base-font) + 0em;
  @height: (@base-font * @base-height / @font-size) + 0em;
  @mar-top: (@height * @coef );

font-size: round(@size * @rounding-value) / @rounding-value;
line-height: round(@height * @coef * @rounding-value) / @rounding-value;
margin: ( round(@mar-top*@rounding-value)/@rounding-value * @other_coef + 0em) 0 (round(@mar-top*@rounding-value)/@rounding-value/2 * @other_coef + 0em) 0;

}

.flow_other(@font-size, @base-font: @basefont, @base-height: @l-h, @rounding-value: 10000) {

  @coef: ceil(1 / (@base-height * @base-font / @font-size));
  @other_coef: ceil(@base-height * @base-font / @font-size);
  @size: (@font-size / @base-font) + 0em;
  @height: (@base-font * @base-height / @font-size) + 0em;
  @mar-top: (@height * @coef );

font-size: round(@size * @rounding-value) / @rounding-value;
line-height: round(@height * @coef * @rounding-value) / @rounding-value;
margin: ( round(@mar-top*@rounding-value)/@rounding-value + 0em) 0;

}

/*
 *****************************************************************
 * 1 -- reset
 *****************************************************************
 */

/* spécial HTML 5 */
article, aside, audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section, video { display: block; }
abbr, eventsource, mark, meter, time, progress, output, bb { display: inline; }

/* reset minimum */
html, body, blockquote, ul, ol, form { margin: 0; padding: 0; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 2em; }

/* la base correspond à 10px */
html { font-size: 62.5%; }
body {
  background: #fff;
  color: #333;
  font-family: Arial, helvetica, sans-serif;
  font-size: (@basefont / 10) + 0em;
  line-height: @l-h; /* à corriger si besoin est */
}

/*
 *****************************************************************
 * 02 -- webfonts  + structure Hx
 *****************************************************************
 */
// here the font faces

@font-face {

}

h1,
.h1 {
  .flow_hx(26); // equiv 26px
  font-weight: normal;
}
h2,
.h2 {
  .flow_hx(24); // equiv 24px
  font-weight: normal;
}
h3,
.h3 {
  .flow_hx(22); // equiv 22px
  font-weight: normal;
}
h4,
.h4 {
  .flow_hx(20); // equiv 20px
  font-weight: normal;
}
h5,
.h5 {
  .flow_hx(18); // equiv 18px
  font-weight: normal;
}
h6,
.h6 {
  .flow_hx(16); // equiv 16px
  font-weight: normal;
}

.uppercase {
  text-transform: uppercase;
}

/* autres classes utiles */
.smaller {
  .flow_other(10); // equiv 10px
}
.small {
  .flow_other(12); // equiv 12px
}
.big {
  .flow_other(16); // equiv 16px
}
.bigger {
  .flow_other(18); // equiv 18px
}
.biggest {
  .flow_other(20); // equiv 20px
}

/*
 *****************************************************************
 * 03 -- classes utilitaires + fix typos + styles "balises fixes"
 *****************************************************************
 */

.nomargin    { margin: 0; }
.nomargintop { margin-top: 0; }
.nopadding   { padding: 0; }
.noborder,
iframe { border: 0; }

/* éviter interlignage disgracieux */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

/* éviter problèmes de margin */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}
/* virer marge basse sur dernier enfant */
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
table:last-child {
  margin-bottom: 0;
}

/* éviter marges supplémentaires sur éléments imbriqués */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}
/* Activation de la césure */
textarea,
table,
td,
th,
code,
pre,
samp,
div,
p {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
/* pour supprimer la césure si besoin */
.nocut {
  word-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

code,
pre,
samp {
  white-space: pre-wrap;
}
code {
  line-height: 1em;
}
kbd {
  border: solid 1px;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  padding: 0 .25em;
}
table {
  margin-bottom: 1.5em;
}
/* Abbréviations, sigles, etc. */
/* seuls ceux ayant un title sont signalés */
abbr[title] {
  border-bottom: dotted 1px;
  cursor: help;
  /* couleur héritée du texte */
}

/* alignements de textes */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }

/*
 *****************************************************************
 * 04 -- liens + icônes
 *****************************************************************
 */

/* Liens */
a {
  color: @color-links;
  cursor: pointer;
}
/* penser au focus */
a:hover,
a:active,
a:focus {
  color: @color-hover;
}
/* éviter la bordure sur une image comprise dans un lien + fix bordure image IE */
a:link img,
a:visited img,
img {
  border-style: none;
}

/* liens avec icônes, on peut utiliser les DATA-URI */

/* pour signaler liens externes */
a[href^="http://"],
a[href^="https://"] {

}
/* si URL complète sur un lien interne, virer signalement liens externes */
a[href^="http://www.mondomaine.com"] {

}
/* contact, liens mailto */
.mail,
a[href^="mailto:"] {

}
/* dont l'URL se termine par .pdf ou ce que vous voulez comme extension */
a[href$=".pdf"] {

}

/*
 *****************************************************************
 * 05 -- layout et modules
 *****************************************************************
 */

/* éviter les dépassements */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input {
  height: auto;
  max-width: 100%;
}
/* pas de reset sur embed, object et video, certains players n'aiment pas */

/* utile pour gérer les floattants */
/* contient des floats */
.mod {
  overflow: auto;
}

/* quelques floattants */
.left {
  float: left;
}
.right {
  float: right;
}

/* clearer les floats */
.clear {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearhidden {
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* gouttière */
.gut {
  height: 1px;
}

/* gestion du table-design en CSS */
.row {
  display: table;
}
.col {
  display: table-cell;
  vertical-align: top;
}

/* bloc centré */
.margesauto {
  margin-left: auto;
  margin-right: auto;
}

/* largeurs de blocks */
.w1   { width: 1%; }
.w2   { width: 2%; }
.w3   { width: 3%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w33  { width: 33.333%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.w60  { width: 60%; }
.w66  { width: 66.666%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

/* ici ajouter les largeurs en pixels */
.w500p { width: 500px; }

/* ici ajouter les largeurs max en pixels */
.mw960p { max-width: 960px; }

/* margins */
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }

/* paddings */
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.p1  { padding: 1em; }
.p2  { padding: 2em; }

/* spécial hr de 1px de haut */
hr {
  background-color: @hr;
  border: 0;
  color: @hr;
  height: @hr-height;
  margin: 0 0 1em;
  padding: 0;
}

/* pour cacher du texte de manière accessible… toussââââ */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hidden    { display: none; } /* caché partout */
.nodesktop { display: none; } /* caché sur desktop */
.noprint   {} /* caché sur print */
.notablet  {} /* caché sur tablettes */
.nomobile  {} /* caché sur mobile */

/*
 *****************************************************************
 * 06 -- structure globale
 *      (page / menuaccess / header / contenu principal / footer)
 *****************************************************************
 */

/* === page === */
#page {
  margin: 0 auto;
  position: relative;
  width: 960px;
}

/* === menuaccess = liens d'évitement === */
#menuaccess {

}
/* idéalement mettez-les visibles pas uniquement au focus */
#menuaccess a {

}
/* sinon pensez à les rendre visibles au focus */
#menuaccess a:hover,
#menuaccess a:active,
#menuaccess a:focus {

}

/* === header === */
#header {

}
#logo {

}
#navigation {

}

/* === contenu principal === */
#main {

}

/* === footer === */
#footer {

}

/* Réseaux Sociaux Addthis et Leurs Copains : souvent dans footer */
.rsalc {

}

/*
 *****************************************************************
 * 07 -- forms
 *****************************************************************
 */

/* donne envie de cliquer sur un bouton */
label,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* évite un resize qui déborde */
textarea {
  resize: vertical;
}

label,
button,
input,
select {
  vertical-align: middle;
}

/* à adapter selon le design voulu */
input,
select,
textarea {
  border: 1px solid #000;
  border-radius: 5px;
  padding: .5em;
  width: @input-defaut-size;
}

/* à adapter selon le design voulu */
.button {
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px #ddd;
  box-shadow: 1px 1px 1px #ddd;
  color: #000;
}

/*
 * évite dimensionnement des radios, checkboxes et images
 * et un affichage différent sous IE
 */
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: none;
  border: 0;
  width: auto;
}

/* pour annuler la taille des inputs ou autres */
.auto {
  width: auto;
}

/* messages d'erreur ou de confirmation */
.alert,
.alert input,
.alert textarea,
.alert select {
  color: @color-alert;
  font-weight: bold;
}
/* .redborder sert à débugger uniquement */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid @color-alert;
}
.alert img {
  border: 0;
}
.ok {

}

/*
 * peut être complété par les attributs HTML5 required
 * exemple avec une couleur, penser à ne pas uniquement transmettre l'info ainsi
 */
select:required:invalid,
input:required:invalid,
input:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid {
  background: #fef6f6;
  -moz-box-shadow: none;
}

input:focus:required:valid,
textarea:focus:required:valid,
select:focus:required:valid {
  background: #efe;
  -moz-box-shadow: none;
}

/*
 *****************************************************************
 * 08 -- dans le contenu (contenus spécifiques aux pages)
 *****************************************************************
 */

/* home */

/*
 *****************************************************************
 * 09 -- breakpoints mineurs entre desktop et tablettes
 *****************************************************************
 */

/*
 *****************************************************************
 * 10 -- tablettes - breakpoint majeur
 *****************************************************************
 */

@media (max-width: 768px) {

  /* affichage des éléments */
  .nodesktop { display: block; }

  /* cachage des éléments inutiles ! */
  .notablet { display: none; }

  /* linéarisation contenus flottants */
  .autotablet {
    float: none;
    width: auto;
  }

  /**
   * adaptation structure globale (page / menuaccess / header / contenu principal / footer)
   */

  /**
   * dans le contenu (contenus spécifiques aux pages)
   */

}

/*
 *****************************************************************
 * 11 -- breakpoints mineurs entre tablettes et mobile
 *****************************************************************
 */

/*
 *****************************************************************
 * 12 -- mobile - breakpoint majeur
 *****************************************************************
 */

@media (max-width: 640px) {

  /* affichage des éléments */
  .notablet { display: block; }

  /* cachage des éléments inutiles ! */
  .nomobile { display: none; }

  /* linéarisation contenus flottants */
  .automobile {
    float: none;
    width: auto;
  }

  /**
   * adaptation structure globale (page / menuaccess / header / contenu principal / footer)
   */

  /**
   * dans le contenu (contenus spécifiques aux pages)
   */

}

/*
 *****************************************************************
 * 13 -- breakpoints mineurs tout petit mobile
 *****************************************************************
 */

/*
 *****************************************************************
 * 14 -- print
 *****************************************************************
 */

@media print {
  /* ajouter là-dedans les éléments qui ont besoin d'être
   * totalement resetés pour le print
   */
  body,
  html,
  #page {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    min-height: auto;
    padding: 0;
    position: static;
    width: auto;
  }

  body {
    padding: .5em;
  }

  /* cachage des éléments inutiles ! */
  .noprint {
    display: none;
  }

  /* affichage éléments spécifiques au print */
  .onprint {
    display: block;
  }

  /* éviter saut de page hasardeux */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }

  /* affichage des liens, sauf pour image contenue */
  /* attention, penser à vérifier le résultat et penser
   * à limiter cette possibilité aux liens dans le contenu */
  a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }

  /* ici fix propriétés particulières */

} /* end print */

/*
 *****************************************************************
 * 15 -- fix viewport
 *****************************************************************
 */

/* fix viewport pour Win8 (snap mode) et préparer le jour
 * où le viewport sera supporté par tous les moteurs
 *
 * Exemples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 * width=device-width   => width: device-width;
 * height=device-height => height: device-height;
 * initial-scale=2      => zoom: 2;
 * maximum-scale=2      => max-zoom: 2;
 * minimum-scale=0.5    => min-zoom: 0.5;
 * user-scalable=no     => user-zoom: fixed;
 *
 * pour le snap mode de Win8 => seul width: device-width; fonctionne pour l'instant
 */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

/*
 *****************************************************************
 * 16 -- Bonus : Fixes IE
 *****************************************************************
 */

/*
 * basé sur les classes conditionnelles sur l'élément HTML
 *
 * à utiliser seulement si peu de corrections et
 * pas d'impact sur les perfs sur les autres navigateurs
 *
 */

/* less than IE 9 */
.oldies .nooldies {
  display: none;
}

.ie6 .noie6 {
  display: none;
}
.ie7 .noie7 {
  display: none;
}
.ie8 .noie8 {
  display: none;
}
.ie9 .noie9 {
  display: none;
}

.ie7 .col,
.ie6 .col {
  float: left;
}

error: pathspec 'rocssti-fr.less' did not match any file(s) known to git


update drag width icon

update drag width icon

fatal: remote error: upload-pack: not our ref 25eb1213e2fa07ee38dcff35192c3ea23663960f
fatal: the remote end hung up unexpectedly


Debug IE6

Debug IE6

fatal: unable to access 'https://github.com/smallsmallwolf/Zonda.git/': The requested URL returned error: 403


Remove transform

Remove transform

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/theworkers/HLTheme.git/'


Update core.less

Update core.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Projectbird/Robin-less.git/'


Config TAB spacing fixed

Config TAB spacing fixed

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/wUFr/LUI.git/'


css: code block, large h3

css: code block, large h3

remote: Repository unavailable due to DMCA takedown.
remote: See the takedown notice for more details:
remote:   https://github.com/github/dmca/blob/master/2022/01/2022-01-27-jetbrains-2.md.
fatal: unable to access 'https://github.com/qbbr/source.qbbr.github.io.git/': The requested URL returned error: 403


added less media

added less media

/* mmi-form/form.css */

/*	html5-boilerplate
 ******************************************************************************/
input, select { vertical-align: middle; }
select, input, textarea, button { font: 99% sans-serif; }
select, input, textarea { color: #333; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
/*
input:valid, textarea:valid {}
input:invalid, textarea:invalid
{
	  border-radius: 1px;
	-moz-box-shadow: 0px 0px 5px red;
 -webkit-box-shadow: 0px 0px 5px red;
		 box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid { background-color: #f0dddd; }
*/
button { overflow: visible; width: auto; }

/*	status
 ******************************************************************************/
#mmi_frm_status
{
	color: #333;
	display: none;
	border: 2px solid #666;
	font-size: 1.25em;
	font-weight: bold;
	padding: 20px;
	margin-bottom: 20px;
}

#mmi_frm_status.error
{
	background: #FDD;
	border-color: #C00;
	color: #900;
	display: block;
}

#mmi_frm_status.success
{
	background: #BEB;
	border-color: #090;
	color: #060;
	display: block;
}

/*	field div
 ******************************************************************************/
form.mmi div.captcha,
form.mmi div.mmi
{
	clear: both;
	float: left;
	margin-bottom: 20px;
}

/*	labels
 ******************************************************************************/
form.mmi .mmi label
{
	float: left;
}

form.mmi .mmi label.error,
form.mmi .mmi label.success
{
	font-weight: bold;
	margin: 4px 0 0 10px;
}

form.mmi .checkable label.error,
form.mmi .textarea label.error,
form.mmi .checkable label.success,
form.mmi .textarea label.success
{
	margin-top: 0;
}

form.mmi .mmi label.error
{
	color: #C00;
}

/*	inputs
 ******************************************************************************/
button.mmi,
input.mmi,
select.mmi,
textarea.mmi
{
	border: 2px solid #999;
	clear: both;
	float: left;
	padding: 4px;
}

select.mmi
{
	padding: 0;
}

input.mmi.checkable
{
	margin: 3px 5px 0 0;
}

.ie6 input.mmi.checkable,
.ie7 input.mmi.checkable,
.ie8 input.mmi.checkable
{
	border-width: 0;
	margin: 1px 5px 0 0;
}

/*	input error styles
 ******************************************************************************/
button.mmi.error,
input.mmi.error,
select.mmi.error,
textarea.mmi.error
{
	background: #FDD;
	border-color: #C00;
}

/*	input focus styles
 ******************************************************************************/
input.mmi:focus,
select.mmi:focus,
textarea.mmi:focus,
input.mmi.error:focus,
select.mmi.error:focus,
textarea.mmi.error:focus
{
	border-color: #666;
	outline-width: 0;
	z-index: 1;
	box-shadow: #09F 0 0 5px;
	-moz-box-shadow: #09F 0 0 5px;
	-webkit-box-shadow: #09F 0 0 5px;
}

/*	button styles
 ******************************************************************************/
button.mmi,
input.mmi.btn,
{
	float: left;
	display: block
}

input.mmi.btn.minimal,
form.mmi .submitting
{
	background: #E3E3E3;
	border: 2px solid #CCC;
	padding: 4px 10px;
	text-align: center;
	text-shadow: 0 1px 0 #FFF;
	box-shadow: inset 0 0 1px 1px #F6F6F6;
	-moz-box-shadow: inset 0 0 1px 1px #F6F6F6;
	-webkit-box-shadow: inset 0 0 1px 1px #F6F6F6;
}

input.mmi.btn.minimal:hover,
button.mmi.minimal:hover
{
	background: #D9D9D9;
	color: #222;
	box-shadow: inset 0 0 1px 1px #EAEAEA;
	-moz-box-shadow: inset 0 0 1px 1px #EAEAEA;
	-webkit-box-shadow: inset 0 0 1px 1px #EAEAEA;
}

input.mmi.btn.minimal:active,
button.mmi.minimal:active
{
	background: #D0D0D0;
	color: #000;
	box-shadow: inset 0 0 1px 1px #E3E3E3;
	-moz-box-shadow: inset 0 0 1px 1px #E3E3E3;
	-webkit-box-shadow: inset 0 0 1px 1px #E3E3E3;
}

/*	submitting styles
 ******************************************************************************/
form.mmi .submitting
{
	color: #333;
	clear: both;
	float: left;
	font: 99% sans-serif;
	margin-bottom: 20px;
	padding: 5px 10px 4px 10px;
	text-align: right;
}

.ie6 form.mmi .submitting,
.ie7 form.mmi .submitting,
.ie8 form.mmi .submitting
{
	padding-bottom: 5px;
}

form.mmi .submitting img
{
	float: left;
	margin-right: 10px;
}

.ie6 form.mmi .submitting img
{
	background: url('../../img/animated/loading16x16_frame_0025.gif') no-repeat 0 0;
}

error: pathspec 'media/less/form.less' did not match any file(s) known to git


Add style for panel with empty table

Add style for panel with empty table

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sonatra/sonatra-theme-gluon.git/'


Add test.less

Add test.less

fatal: unable to access 'https://github.com/ArloL/dotfiles.git/': The requested URL returned error: 403


[fix bug 916833] Fix centering for profile image.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/akarki15/mozillians.git/'


Create bordered-pulled.less

Create bordered-pulled.less

// Bordered & Pulled
// -------------------------

.@{fa-css-prefix}-border {
  padding: .2em .25em .15em;
  border: solid .08em @fa-border-color;
  border-radius: .1em;
}

.pull-right { float: right; }
.pull-left { float: left; }

.@{fa-css-prefix} {
  &.pull-left { margin-right: .3em; }
  &.pull-right { margin-left: .3em; }
}

error: pathspec 'less/font-awesome/bordered-pulled.less' did not match any file(s) known to git


less (taken from accounts-entry)

less (taken from accounts-entry)

fatal: unable to access 'https://github.com/kevb/bootstrap.git/': The requested URL returned error: 403


Delete fixed-width.less

Delete fixed-width.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/micklosm/ConstellationGallery-.git/'


app.less correction

app.less correction

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/CRGTMobile/18f-agile-bpa.git/'


Create core.less

Create core.less

// Base Class Definition
// -------------------------

.@{fa-css-prefix} {
  display: inline-block;
  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

error: pathspec 'public/css/font-awesome/less/core.less' did not match any file(s) known to git


Fix border radius on first/last column sections.

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.room-alert {
  padding: 5px;
  text-align: center;

  &:empty {
    display: none;
  }
}

.fixed-column {
  padding: 0;
  height: 850px;

  #previews, #dj-list {
    overflow: auto;
    max-height: 550px;
  }

  @height_iterations: 1000px;
  @height_difference: 180px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: 768px) and (max-height: @index) {
      height: @index - @height_difference;
      #previews, #dj-list {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: 768px) {
    min-height: 400px;
    #preview {
      max-height: 200px;
    }
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    background-color: @color-grey-background;
    border: solid 1px @color-grey-border;
    border-radius: @site-border-radius;
    -webkit-box-shadow: @site-box-shadow;
    box-shadow: @site-box-shadow;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        @section-header-bg: darken(@color-grey-background, 5%);
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 3%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        &.section-header {
          background-color: @section-header-bg;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: @section-header-bg;
          padding: 8px;
          position: relative;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover:not(.disabled) {
              color: darken(@color-grey-background, 70%);
            }

            &.disabled {
              color: darken(@color-grey-background, 30%);
            }
          }

          .error {
            color: darken(red, 10%);
            font-size: 12px;
            font-weight: bold;
            margin-top: 3px;
            display: none;
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          li {
            @padding: 5px;
            background-color: @color-grey-background;
            border-bottom: solid 1px lighten(@color-grey-border, 8%);
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);;
              opacity: 0.1;
              z-index: 0;
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
            }

            .error-message {
              margin: auto -@padding;
              padding: @padding;
              color: red;

              &:empty {
                display: none;
              }
            }
          }
        }
      }

      .section-empty {
        font-style: italic;
        color: darken(@color-grey-background, 40%);
        margin-top: @section-padding;

        &.center {
          @height: 160px;

          text-align: center;
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 10px;
          margin: -@section-padding;
          height: @height;
          margin-top: -@height/2;
          font-size: 19px;
          font-style: normal;
          font-weight: 200;
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @site-border-radius - 1px;
          border-top-right-radius: @site-border-radius - 1px;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @site-border-radius - 1px;
          border-bottom-right-radius: @site-border-radius - 1px;
        }
      }

      #queue-section {
        li {
          @height: 40px;
          @inner-height: @height - 10px;

          position: relative;
          height: @height;

          .artwork {
            width: @inner-height;
            height: @inner-height;
            background-color: darken(@color-grey-background, 10%);
            background-image: url('/images/unknown_song.png');
            background-size: contain;
            display: inline-block;
            border-radius: 3px;
          }

          .fg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: inline-block;
            margin-left: @height;
            line-height: 18px;
            font-size: 13px;

            .title {
              display: block;
              font-weight: 300;
              color: darken(@color-grey-background, 60%);
            }

            .artist, .album {
              font-weight: 200;
              color: darken(@color-grey-background, 30%);
            }
          }

          &.playing {
            background-color: @color-purple;
            @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.2);
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;

            .fg {
              .title, .artist, .album {
                color: white;
              }
            }
          }
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: 767px) {
    height: 400px;
    margin: 10px;
  }
}

.navbar .playback-placeholder {
  line-height: @navbar-height;
  color: #777;
}

.navbar .playback {
  @playback-height: @navbar-height;
  @timeline-height: 18px;
  @timeline-padding: 3px;
  @info-height: @playback-height - @timeline-height;
  @info-padding: @timeline-padding;

  .info {
    @inner-height: @info-height - @info-padding;
    @font-color: darken(@color-grey-background, 60%);
    /*outline: solid 1px aqua;*/

    height: @info-height;
    padding: @info-padding;
    font-size: 12px;
    line-height: @inner-height / 2;
    text-align: left;
    overflow: hidden;
    cursor: default;

    .artwork {
      @size: @inner-height;
      width: @size;
      height: @size;
      float: left;
      background-size: contain;
      margin-right: @info-padding;
      border-radius: 3px;

      &.no-artwork {
        background-image: url('/images/unknown_song.png');
      }
    }

    .title {
      /*outline: solid 1px red;*/
      color: @font-color;
      font-weight: bold;
    }

    .artist, .album {
      /*outline: solid 1px green;*/
      display: inline-block;
      color: lighten(@font-color, 20%);
    }
  }

  .timeline {
    @inner-height: @timeline-height - (@timeline-padding * 2);
    height: @inner-height;
    margin: @timeline-padding;
    background-color: darken(@color-grey-background, 12%);
    position: relative;
    border-radius: @site-border-radius;
    cursor: default;

    .left, .right {
      position: absolute;
      font-size: 10px;
      line-height: @inner-height;
      /*font-weight: bold;*/
      color: darken(@color-grey-background, 60%);
      padding-bottom: 1px;
    }

    .left {
      left: 5px;
    }

    .right {
      right: 4px;
    }

    .played-container {
      background-color: darken(@color-grey-background, 5%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 30px;
      @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.05);
      -webkit-box-shadow: @box-shadow;
      box-shadow: @box-shadow;

      .played {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        background-color: @color-purple;
        @box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.4);
        -webkit-box-shadow: @box-shadow;
        box-shadow: @box-shadow;
      }
    }
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

#btn-begin-dj, #btn-end-dj {
  display: none;
}

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.room-alert {
  padding: 5px;
  text-align: center;

  &:empty {
    display: none;
  }
}

.fixed-column {
  padding: 0;
  height: 850px;

  #previews, #dj-list {
    overflow: auto;
    max-height: 550px;
  }

  @height_iterations: 1000px;
  @height_difference: 180px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: 768px) and (max-height: @index) {
      height: @index - @height_difference;
      #previews, #dj-list {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: 768px) {
    min-height: 400px;
    #preview {
      max-height: 200px;
    }
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    background-color: @color-grey-background;
    border: solid 1px @color-grey-border;
    border-radius: @site-border-radius;
    -webkit-box-shadow: @site-box-shadow;
    box-shadow: @site-box-shadow;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        @section-header-bg: darken(@color-grey-background, 5%);
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 3%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        &.section-header {
          background-color: @section-header-bg;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: @section-header-bg;
          padding: 8px;
          position: relative;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover:not(.disabled) {
              color: darken(@color-grey-background, 70%);
            }

            &.disabled {
              color: darken(@color-grey-background, 30%);
            }
          }

          .error {
            color: darken(red, 10%);
            font-size: 12px;
            font-weight: bold;
            margin-top: 3px;
            display: none;
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          li {
            @padding: 5px;
            background-color: @color-grey-background;
            border-bottom: solid 1px lighten(@color-grey-border, 8%);
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);;
              opacity: 0.1;
              z-index: 0;
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
            }

            .error-message {
              margin: auto -@padding;
              padding: @padding;
              color: red;

              &:empty {
                display: none;
              }
            }
          }
        }
      }

      .section-empty {
        font-style: italic;
        color: darken(@color-grey-background, 40%);
        margin-top: @section-padding;

        &.center {
          @height: 160px;

          text-align: center;
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 10px;
          margin: -@section-padding;
          height: @height;
          margin-top: -@height/2;
          font-size: 19px;
          font-style: normal;
          font-weight: 200;
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          /*border-top-left-radius: @column-border-radius;*/
          /*border-top-right-radius: @column-border-radius;*/
        }
      }

      &:last-child {
        .column-section, h1 {
          /*border-bottom-left-radius: @column-border-radius;*/
          /*border-bottom-right-radius: @column-border-radius;*/
        }
      }

      #queue-section {
        li {
          @height: 40px;
          @inner-height: @height - 10px;

          position: relative;
          height: @height;

          .artwork {
            width: @inner-height;
            height: @inner-height;
            background-color: darken(@color-grey-background, 10%);
            background-image: url('/images/unknown_song.png');
            background-size: contain;
            display: inline-block;
            border-radius: 3px;
          }

          .fg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: inline-block;
            margin-left: @height;
            line-height: 18px;
            font-size: 13px;

            .title {
              display: block;
              font-weight: 300;
              color: darken(@color-grey-background, 60%);
            }

            .artist, .album {
              font-weight: 200;
              color: darken(@color-grey-background, 30%);
            }
          }

          &.playing {
            background-color: @color-purple;
            @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.2);
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;

            .fg {
              .title, .artist, .album {
                color: white;
              }
            }
          }
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: 767px) {
    height: 400px;
    margin: 10px;
  }
}

.navbar .playback-placeholder {
  line-height: @navbar-height;
  color: #777;
}

.navbar .playback {
  @playback-height: @navbar-height;
  @timeline-height: 18px;
  @timeline-padding: 3px;
  @info-height: @playback-height - @timeline-height;
  @info-padding: @timeline-padding;

  .info {
    @inner-height: @info-height - @info-padding;
    @font-color: darken(@color-grey-background, 60%);
    /*outline: solid 1px aqua;*/

    height: @info-height;
    padding: @info-padding;
    font-size: 12px;
    line-height: @inner-height / 2;
    text-align: left;
    overflow: hidden;
    cursor: default;

    .artwork {
      @size: @inner-height;
      width: @size;
      height: @size;
      float: left;
      background-size: contain;
      margin-right: @info-padding;
      border-radius: 3px;

      &.no-artwork {
        background-image: url('/images/unknown_song.png');
      }
    }

    .title {
      /*outline: solid 1px red;*/
      color: @font-color;
      font-weight: bold;
    }

    .artist, .album {
      /*outline: solid 1px green;*/
      display: inline-block;
      color: lighten(@font-color, 20%);
    }
  }

  .timeline {
    @inner-height: @timeline-height - (@timeline-padding * 2);
    height: @inner-height;
    margin: @timeline-padding;
    background-color: darken(@color-grey-background, 12%);
    position: relative;
    border-radius: @site-border-radius;
    cursor: default;

    .left, .right {
      position: absolute;
      font-size: 10px;
      line-height: @inner-height;
      /*font-weight: bold;*/
      color: darken(@color-grey-background, 60%);
      padding-bottom: 1px;
    }

    .left {
      left: 5px;
    }

    .right {
      right: 4px;
    }

    .played-container {
      background-color: darken(@color-grey-background, 5%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 30px;
      @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.05);
      -webkit-box-shadow: @box-shadow;
      box-shadow: @box-shadow;

      .played {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        background-color: @color-purple;
        @box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.4);
        -webkit-box-shadow: @box-shadow;
        box-shadow: @box-shadow;
      }
    }
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

#btn-begin-dj, #btn-end-dj {
  display: none;
}


added arrow to footer item active state

added arrow to footer item active state

fatal: unable to access 'https://github.com/amazingBastard/sva-accreditation.git/': The requested URL returned error: 403