@charset "UTF-8";

/*
Name: Common Objects
URL: http://github.com/Darklg/CSSCommon
Version: 2.2
License: MIT
*/

/* ----------------------------------------------------------
  Image replacement
---------------------------------------------------------- */

.ir-children a,
.cssc-btn-px,
.cssc-btn,
.ir {
    display: inline-block;
    z-index: 1;
    position: relative;
    overflow: hidden;
    direction: ltr;
    text-align: left;
    text-indent: -9999px;
    white-space: nowrap;
    background: transparent no-repeat top left;
    *text-indent: 0;
    *color: transparent;
    *font-size: 1px;
    *line-height: 0;
    *display: inline;
    *zoom: 1;
}

.cssc-btn-px {
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
}

/* ----------------------------------------------------------
  Image button
---------------------------------------------------------- */

/* Reset */

.cssc-btn {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

/* :Hover */

.cssc-btn:focus,
.cssc-btn:hover {
    opacity: 0.50;
    filter: alpha(opacity=50);
}

/* ----------------------------------------------------------
  Clearfix
---------------------------------------------------------- */

.clearfix,
.cssc-grid:before,
.cssc-grid:after,
.clearfix:after,
.subfloat:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    max-height: 0;
    overflow: hidden;
}

hr.clearfix {
    height: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

/* ----------------------------------------------------------
  Automatic ellipsis "..." if content is more than one line
---------------------------------------------------------- */

.cssc-oneline {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

/* ----------------------------------------------------------
  Removing an element
---------------------------------------------------------- */

.cssc-remove-element-children > *,
.cssc-remove-element {
    z-index: 0;
    position: absolute;
    top: -9999px;
    left: -9999px;
    font-size: 1px;
    color: transparent;
    opacity: 0.001;
}

/* ----------------------------------------------------------
  Drawer : Submenu, etc
---------------------------------------------------------- */

.wdrw {
    z-index: 2;
    position: relative;
}

.wdrw > a {
    display: block;
    height: 100%;
    line-height: inherit;
}

.wdrw .submenu {
    visibility: hidden;
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
    line-height: 1;
    opacity: 0;
    background-color: #fff;
}

.wdrw .submenu-r {
    right: 0;
    left: auto;
}

.wdrw:hover {
    z-index: 1000;
}

.wdrw > a:focus + .submenu,
.wdrw:hover .submenu {
    visibility: visible;
    z-index: 999;
    opacity: 1;
}

/* ----------------------------------------------------------
  Block Media : Floating block
  By @Stubbornella : http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
---------------------------------------------------------- */

.bmedia,
.bmedia-right,
.bm-cont {
    display: block;
    z-index: 1;
    position: relative;
    zoom: 1;
    overflow: hidden;
}

.bmedia >:first-child {
    float: left;
    margin-right: 10px;
}

.bmedia-right >:first-child {
    float: right;
    margin-left: 10px;
}

.bmedia-right > .bm-cont:first-child,
.bmedia > .bm-cont:first-child {
    float: none;
    margin-right: 0;
    margin-left: 0;
}

/* ----------------------------------------------------------
  Progress bar
---------------------------------------------------------- */

.progress-bar {
    display: block;
    z-index: 1;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.progress-bar .bar,
.progress-bar:before {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.progress-bar:before {
    content: '';
    z-index: 9;
}

.progress-bar .bar {
    width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-indent: -9999px;
    background: rgba(0,0,0,0) no-repeat 0 0;
    background-image: -moz-linear-gradient(top,rgba(0,0,0,0), rgba(0,0,0,0.2) );
    background-image: -o-linear-gradient(top,rgba(0,0,0,0), rgba(0,0,0,0.2) );
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0) ), color-stop(1,rgba(0,0,0,0.2) ) );
    background-image: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2) );
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2) );
}

/* Theme
-------------------------- */

.progress-bar {
    height: 15px;
    margin: 3px;
}

.progress-bar:before {
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 2px solid #333;
}

.progress-bar:before,
.progress-bar .bar {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
}

.progress-bar .bar {
    background-color: #369;
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2);
}

/* ----------------------------------------------------------
  Code presentation
---------------------------------------------------------- */

tt,
pre,
code,
kbd,
samp,
.cssc-label {
    display: inline-block;
    padding: 3px;
    border: 1px solid #ddd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 1px 1px 0 rgb(255,255,255);
    font: 11px/1.2 'Lucida Console',Monospace;
    vertical-align: middle;
    color: #333;
    background: #f5f5f5;
    *display: inline;
    *zoom: 1;
}

tt:hover,
tt:focus,
pre:hover,
pre:focus,
code:hover,
code:focus,
kbd:hover,
kbd:focus,
samp:hover,
samp:focus,
.cssc-label:hover,
.cssc-label:focus {
    border: 1px solid #aaa;
    color: #000;
    background-color: #fff;
}

pre {
    display: block;
    margin-bottom: 12px;
    max-width: 100%;
    overflow: auto;
}

/* ----------------------------------------------------------
  Gallery
---------------------------------------------------------- */

.subfloat {
    position: relative;
}

.subfloat > * {
    float: left;
}

/* margin-right = 0-marge droite d'un élément */

.sf_100_20 {
    margin-right: -20px;
}

.sf_100_20 > * {
    width: 100px;
    margin: 0 20px 20px 0;
}

/* ----------------------------------------------------------
  Tooltips
---------------------------------------------------------- */

.tooltip {
    z-index: 2;
    position: relative;
}

.tooltip-bubble {
    visibility: hidden;
    z-index: 1;
    position: absolute;
    bottom: 100%;
    left: 0;
    opacity: 0;
}

.tooltip:hover .tooltip-bubble {
    visibility: visible;
    opacity: 0.99;
}

/* Directions
-------------------------- */

.tooltip--bottom .tooltip-bubble {
    top: 100%;
    bottom: auto;
}

/* Base tooltip theme
-------------------------- */

.tooltip-bubble {
    width: 150px;
    margin-bottom: 5px;
    padding: 10px;
    color: #333;
    background-color: #e0e0e0;
}

/* Triangle bubble */

.tooltip-bubble:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 25px;
    width: 0;
    height: 0;
    margin-left: -5px;
    border-top: 5px solid #e0e0e0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

/* Theme direction
-------------------------- */

.tooltip--bottom .tooltip-bubble {
    margin-top: 5px;
    margin-bottom: 0;
}

.tooltip--bottom .tooltip-bubble:after {
    top: auto;
    bottom: 100%;
    border-top: 0;
    border-bottom: 5px solid #e0e0e0;
}

/* ----------------------------------------------------------
  Panel
---------------------------------------------------------- */

.cssc-panel {
    padding: 10px;
    border: 1px solid #e0e0e0;
    background-color: #f0f0f0;
}

/* ----------------------------------------------------------
  Messages
---------------------------------------------------------- */

.cssc-messages a {
    display: block;
    margin-bottom: 5px;
    padding: 7px;
    border: 1px solid #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #333;
    background: #fff;
    -webkit-background-clip: padding-box;
}

.cssc-messages .error {
    border-color: #C66;
    color: #800;
    background-color: #FEE;
}

.cssc-messages .notice {
    border-color: #66C;
    color: #008;
    background-color: #EEF;
}

.cssc-messages .success {
    border-color: #6C6;
    color: #080;
    background-color: #EFE;
}

.cssc-messages .warning {
    border-color: #CC6;
    color: #880;
    background-color: #FFE;
}

/* ----------------------------------------------------------
  Tags
---------------------------------------------------------- */

.cssc-tags a,
.cssc-tag {
    display: inline-block;
    z-index: 1;
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
}

.cssc-tags a:before,
.cssc-tag:before {
    margin-right: 3px;
    vertical-align: baseline;
}

/* Theme
-------------------------- */

.cssc-tags a,
.cssc-tag {
    margin-right: 1px;
    margin-bottom: 5px;
    padding: 1px 4px;
    border: 1px solid #e0e0e0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #333;
}

.cssc-tags a:before,
.cssc-tag:before {
    content: '✔';
    color: #676767;
}

/* ----------------------------------------------------------
  Stars
---------------------------------------------------------- */

.cssc-stars {
    z-index: 1;
    position: relative;
    overflow: hidden;
}

.cssc-stars-list {
    float: left;
}

.cssc-stars label {
    float: right;
    cursor: pointer;
}

.cssc-stars input {
    z-index: 1;
    position: absolute;
    top: -100px;
    left: -100px;
}

/* Theme
-------------------------- */

.cssc-stars label {
    padding: 2px;
    font-size: 20px;
    cursor: pointer;
}

.cssc-stars .current ~ label,
.cssc-stars input:checked ~ label {
    color: #F99;
}

.cssc-stars label:hover,
.cssc-stars input:checked ~ label:hover,
.cssc-stars label:hover ~ label {
    color: #F33;
}

/* ----------------------------------------------------------
  Vertical center
---------------------------------------------------------- */

.vertical-center {
    z-index: 1;
    position: relative;
    overflow: hidden;
}

.vertical-center__wrapper {
    z-index: 1;
    position: absolute;
    top: 50%;
}

.vertical-center__centered {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
}

/* Personalization
-------------------------- */

/* This block can be of any height, but bigger than the centered element */

.vertical-center {
    height: 100px;
}

/*
 * Arbitrary height (way bigger than the parent if possible)
 * margin-top should be 0-(height/2)
 * line-height should be equal to height
 */

.vertical-center__wrapper {
    height: 400px;
    margin-top: -200px;
    line-height: 400px;
}

/* Theme
-------------------------- */

.vertical-center {
    background-color: #f0f0f0;
}

.vertical-center p {
    padding: 0 10px;
    font-size: 12px;
}

/* ----------------------------------------------------------
  Separators
---------------------------------------------------------- */

.cssc-sep {
    z-index: 1;
    position: relative;
}

.cssc-sep-before:before,
.cssc-sep-after:after {
    content: '';
    z-index: 1;
    position: absolute;
    left: 50%;
}

.cssc-sep-before:before {
    top: 0;
}

.cssc-sep-after:after {
    bottom: 0;
}

/* Theme
-------------------------- */

.cssc-sep {
    text-align: center;
}

.cssc-sep:before,
.cssc-sep:after {
    border-radius: 10px;
    width: 20px;
    height: 5px;
    margin-left: -10px;
    background-color: #BDF;
}

/* Before */

.cssc-sep-before {
    padding-top: 15px;
}

/* After */

.cssc-sep-after {
    padding-bottom: 15px;
}