/**
* Style du semainier
*
* CSS3
*
* @category CSS
* @package  Style
* @author   AMIOT Romain
* @license  http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

#organizer{
    position:           relative;
    width:              100%;
    height:             auto;
    margin:             auto;
}

/********* Affichage de la semaine en cours et des fleches de deplacement *********/
#organizer-week{
    text-align:         center;
    margin:             10px 0px 20px 0px;
    font-size:          16pt;
    border-bottom:      1px #dddfdf solid;
    height:             60px;
}

#organizer-week a{
    width:              32px;
    height:             32px;
    display:            inline-block;
    vertical-align:     -8px;
    background:         url(../objets/ico/Sprite32.png) -128px 0px no-repeat;
    font-size:          8pt;
    color:              #000;
    font-weight:        bold;

}

#organizer-week a.next{
    background:         url(../objets/ico/Sprite32.png) -128px -32px no-repeat;
}

#organizer-week span{
    margin:             0px 30px 0px 30px;
}

#organizer-week a.year-button{
    background:         url(../objets/ico/Sprite32.png) -160px 0px no-repeat;
}

#organizer-week a.year-button-next{
    background:         url(../objets/ico/Sprite32.png) -160px -32px no-repeat;
}

/********* En-tête haute (jours de la semaine) *********/
#organizer-days{
    text-align:         right;
    background:         #fff;
    position:           absolute;
    padding-left:       59px;
    z-index:            10;
}

#organizer-days.floatable{
    position:           fixed;
    top:                0px;
    border-bottom:      1px #dddfdf solid;
    z-index:            12;
}

#organizer-days div{
    position:           relative;
    display:            inline-block;
    width:              186px;  /* /!\ Doit être égale à width des cellules du tableau */
    height:             50px;
    margin-top:         20px;
}

#organizer-days div:nth-child(6){
    border:             none; 
}

#organizer-days div span{
    position:           absolute;
}

#organizer-days div span:nth-child(1){    /* Nom du jour */
    font-size:          14pt;
    bottom:             22px;
    left:               22px;
}

#organizer-days div span:nth-child(2){    /* Numéro du jour */
    font-size:          26pt;
    right:              20px;
    bottom:             0px;
    font-weight:        bold;
}

#organizer-days div span:nth-child(3){    /* Mois et année */
    font-size:          10pt;
    bottom:             7px;
    left:               22px;
    font-style:         italic;
}

/********* En-tête gauche (plages horaires) *********/
#organizer-left-header{
    display:            inline-block;
    width:              5%;
    margin-top:         85px;
}

#organizer-left-header div{
    text-align:         center;
    padding-top:        5px;
    color:              #829ba0;
}

#organizer-left-header div:nth-child(4n+1){
    padding-top:        0px;
    font-size:          18pt;
    font-weight:        bold;
    color:              #000000;
}

/********* Affichage du tableau *********/
#organizer-table{
    margin-top:         100px;
    width:              95%;
    height:             100%;
    display:            inline-block;
    vertical-align:     top;
    background:         #ffffff;
}

#organizer-table .columns{
    width:              186px;          /* Doit etre égale à la width du header du tableau */
    display:            inline-block;
    border-left:        1px #778383 solid;
}

#organizer-table .columns:nth-child(6){
    border-right:       1px #778383 solid;
}

#organizer-table .lines{
    width:              100%;
    display:            inline-block;
}

.lines:hover{
    background:         #bdbdbd;
    cursor:             pointer;
    opacity:            0.5;
}

#organizer-table .lines:nth-child(1){
    border-top:         1px #778383 solid;
}

#organizer-table .lines:nth-child(2n+2){
    border-bottom:      1px #778383 solid;
}

/********* Affichage des évènements *********/
#organizer-events{
    position:           absolute;
    top:                180px;
    right:              0px;
    width:              95%;
}

#organizer-events .columns{
    width:              186px;              /* Doit etre égale à la width des cellules du tableau */
    display:            inline-block;
}

#organizer-events .lines{
    width:              100%;
    display:            inline-block;
}

#organizer-events .events{
    display:            inline-block;
    position:           relative;
    width:              96%;
    margin:             4px 4px 4px 4px;
    padding:            2px 5px 5px 5px;
    background-color:   #b8da8d;
    overflow:           hidden;
    border-radius:      2px;
    color:              #fff;
}

#organizer-events .events:hover{
    cursor:             pointer;
}

#organizer-events .events div{
    width:              82%;
    font-weight:        bold;
    margin:             0px 0px 5px 0px;
}

#organizer-events .events p{
    font-size:          9pt;
}

#organizer-events .events-info-box{
    width:              auto;
    height:             42px;
    background:         #ecf0f1;
    position:           absolute;
    margin-left:        -30px;
    margin-top:         -45px;
    z-index:            11;
    display:            none;
    padding:            5px;
    -moz-box-shadow:    1px 1px 8px 1px #778383;
    -webkit-box-shadow: 1px 1px 8px 1px #778383;
    -o-box-shadow:      1px 1px 8px 1px #778383;
    box-shadow:         1px 1px 8px 1px #778383;
    border-radius:      2px;
}

#organizer-events .events-info-box:after {
    top:                100%;
    left:               50%;
    border:             solid transparent;
    content:            " ";
    height:             0;
    width:              0;
    position:           absolute;
    pointer-events:     none;
    border-color:       rgba(136, 183, 213, 0);
    border-top-color:   #ecf0f1;
    border-width:       10px;
    margin-left:        -30px;
}

#organizer-events .events-info-box a{
    width:              32px;
    height:             32px;
    display:            inline-block;
    -moz-transition:    all 0.1s ease-in-out 0s;
    -webkit-transition: all 0.1s ease-in-out 0s;
    -o-transition:      all 0.1s ease-in-out 0s;
    -ms-transition:     all 0.1s ease-in-out 0s;
    transition:         all 0.1s ease-in-out 0s;
    margin-left:        20px;
}

#organizer-events .events-info-box a:first-child{
    margin-left:        0px;
}

#organizer-events .events-info-box a:hover{
    transform:          scale(1.2);
}

#organizer-events #events-edit{background:   url(../objets/ico/Sprite32.png) -64px 0px no-repeat;}
#organizer-events #events-delete{background: url(../objets/ico/Sprite32.png) 0px 0px no-repeat;}
#organizer-events #events-cancel{background: url(../objets/ico/Sprite32.png) -96px 0px no-repeat; opacity: 0.2}
#organizer-events #events-valid{background:  url(../objets/ico/Sprite32.png) -96px 0px no-repeat;}
#organizer-events #events-paid{background:   url(../objets/ico/Sprite32.png) -32px 0px no-repeat; opacity: 0.2}
#organizer-events #events-unpaid{background: url(../objets/ico/Sprite32.png) -32px 0px no-repeat;}