@import "utils";

@import url('http://fonts.googleapis.com/css?family=Ubuntu:700');


/*** CSS RESET **********************/
body, h1, h2, h3, h4, h5, h6, p,
div#visual-portal-wrapper,
div#visual-padded-portal-wrapper,
div#portal-header,
ul#portal-globalnav,
.pullquote {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	background-image:none;
	background-position: left top;
	background-repeat: repeat;
	left:auto;
	right:auto;
	top:auto;
	bottom:auto;
	width:auto;
	height:auto;	
}

img {
    border: none;
    vertical-align: middle;
}
a, a:active, a:focus, :-moz-any-link:focus, #content a, .qq-upload-button {
    outline-style:none;
    outline: none;
    cursor: pointer;
}
p {
    text-align:justify;
}
strong {
	font-weight: 700;
}

/*** GENERAL ***********************/

body, h1, h2, h3, h4, h5, h6,
div.date-picker, div.date-picker .month-display, div.date-picker .year-display, div.date-picker .today-but,
.ui-timepicker .ui-timepicker-table {
    font: 1em Arial, Helvetica, sans-serif;
    font-weight: 300;
}
body {
    background-color: @mainColor;
    background-image: url("@{theme}/@{backgroundImage}");
    background-position: @headerBgPosX @headerBgPosY;
    background-repeat: no-repeat;
}
h1, h2, h3, h4, h5, h6,
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    clear:both;
    margin: 0;
    margin-bottom: 0.5em;
    padding: 0;
    font-weight: 300;
    background-color: transparent !important;
    border:0 none;
    letter-spacing: 0;
}
h1 {
    font-size: 190%;
    font-weight: bold;
    margin-bottom: 0.5em;
}
h2 {
    font-size: 125%;
    margin-bottom: 0.5em;
}
h3 { font-size: 120%; }
h4 { font-size: 110%; }
h5 { font-size: 105%; }
h6 { font-size: 100%; }

h1, h2, h3, h4, h5, h6, p {
    text-shadow:@white100 0px 1px 1px, @white100 0px 1px 1px;
}

a, a:link, a:active, a:focus, :-moz-any-link:focus,
#content a, #content a:link, #content a:active, #content a:focus, #content :-moz-any-link:focus {
    color: @linkColorNormal;
}
a:hover,
#content a:hover {
    color: @linkColorActive !important;
}


/*** ARRONDIS **********************************************************/

ul.arrondis, #content ul.arrondis,
ul.arrondis li, #content ul.arrondis li,
ol.arrondis, #content ol.arrondis,
ol.arrondis li, #content ol.arrondis li {
    margin: 0;
    margin-bottom: 0.25em;
    padding: 0;
    list-style-image: none;
    list-style: none;
}

.arrondi,
.qq-upload-drop-area, ul.qq-upload-list li,
div.listing_vide,
div.boardComment,
.indicateur,
#message .success, #message .failure, #message .warning,
#message.success, #message.failure, #message.warning {
    position: relative;
    z-index: 1;
    padding: 0.25em;
    background-color: @lightColor;
    border: 1px solid @black10;
    
    .radius(5px);
}

.arrondi.selected {
  background-color:@buttonColor;
  color: @lightColor;
}
.arrondi.off, .arrondi.invisible, .arrondi.invisible_date {
    background-image: url("@{theme}/fond_off.png") !important;
    background-repeat: repeat !important;
    
    /*&.selected {
        background-image: url("@{theme}/fond_off_selected.png") !important;
    }*/
}
.arrondi.field {
	margin-bottom: 1em;
}

.indicateur {
    font-size: 80%;
    font-weight: bold;
    padding: 0.15em 0.75em;
    text-decoration: none;
    text-shadow: 0 0 2px @black75;
    .radius(1em);
    
    &.couleur4 {
        text-shadow: 0 0 2px @white100;
    }
    
    &.iconeseule {
        padding: 0.15em 0.5em;
        
        &:before {
            margin: 0;
            text-align: center;
        }
        span {
            display: none;
        }
    }
}
h1, h2, h3 {
    .indicateur {
        font-size: 70%;
    }
}



/*** COULEURS **********************************************************/

.couleur1 {
  background-color: @buttonColor;
  color: @lightColor;
}
.couleur4 {
  background-color: @lightColor;
  color: @darkColor;
}
.couleur5 {
  background-color: @warningColor;
  color: @lightColor;
}
.couleur6 {
  background-color: @informationColor;
  color: @lightColor;
}
.couleur7 {
	background-color: @importantColor;
	color: @lightColor;
}

.couleur1 , .couleur6 , .couleur7 {
    .formHelp  {
        color: @lightColor;
    }
}


div.loading {
    background-image: url("@{theme}/ajax-loader.gif");
    background-position: center 10px;
    background-repeat: no-repeat;
    padding: 10px !important;
    padding-top: 42px !important;
}

.cours_auteurs, .cours_legende {
    h2, a, span {
        clear: none;
        float: none !important;
        display: inline;
        font-size: 100%;
        line-height: 1.5em;
        margin: 0;
        margin-right: 0.25em;
        padding: 0 !important;
        border-width: 0 !important;
    }
    h2 {
        font-weight: bold;
    }
}
.cours_auteurs {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.cours_legende {
    margin-top: 1em;
    text-align: center;
    .opacity(50);
    &:hover {
        .opacity(100);
    }
    span {
        font-size: 100% !important;
        margin: 0;
    }
    .typeElement {
        padding-right: 0;
        margin-right: 0.5em;
        
        &.disabled {
            display: none;
        }
        
        &.type_Classement, &.type_Mon_Espace, &.type_Activite {
            border-width: 5px !important;
            padding-right: 3px !important;
            margin-right: 1em;
            .typeElementTitre {
                padding-left: 0 !important;
            }
        }
    }
    .typeElementTitre {
        background-size:20px 20px;
        padding-left: 22px !important;
        cursor: pointer;
    }
}
#plan .typeElement {
    .transition(opacity, 0.5s);
}
#plan .typeElement.disabled {
    .opacity(33);
}


a.bouton.important, #content a.bouton.important, .context.important,
input.bouton.important, input.searchButton.important, input.destructive.important, .standalone.important,
.context.important, input.context.important,
#content .qq-upload-list .qq-upload-cancel {
	background-color:@importantColor;
	color: @lightColor;
}

/*** MESSAGES **************************************************************************************/

#message {
    
    div {
        margin-top: 0.5em;
        margin-top: 0.5em;
        .box-shadow(0, 1px, 0, @white25, inset);
    }
    
    &.success, .success {
        background-color: @informationColor;
        color: @lightColor;
    }
    &.warning, .warning {
        background-color: @warningColor;
        color: @lightColor;
    }
    &.failure, .failure {
        background-color: @importantColor;
        color: @lightColor;
    }
        
    &.success::before, &.failure::before, &.warning::before,
     .success::before,  .failure::before,  .warning::before {
        font-weight: normal !important;
        display: inline;
        margin: 0 0.5em;
        content: "\2714";
    }
    &.failure::before, .failure::before,
    &.warning::before, .warning::before {
        content: "\2716";
    }
}


/*** PORTAL TOP *************************************************************************************/

#portal-top {
  voice-family: inherit;
  .gradient(@black50, @black0, ~'!important');
}

