@import "elements";
@import "commons";
@import "fonts";


/** time line */
#timeline-loader{
  max-width:700px; .m(0 auto);
  .fs-artist-event-timeline;
  // .bb(1px, #000);
  .progress{
    border-top: 4px solid #999; width:0;
/*    .transition(width 4s linear);*/
      transition: width 3s linear;
      -moz-transition: width 3s linear;
      -o-transition: width 3s linear;
      -webkit-transition: width 3s linear;
		&.complete{
/*      .transition(width 0.1s linear);*/
        transition: width 0.1s linear;
        -moz-transition: width 0.1s linear;
        -o-transition: width 0.1s linear;
        -webkit-transition: width 0.1s linear;
    } 
  }
}

#timeline{
  height:65%;
  .mt(25px);
  h3.title{
    cursor:pointer;
    .fs-region-title(); color:@timeline-lighten-color;
  }
}

#timeline-container{
  width:100%; height:98%; .bt(2px, @timeline-lighten-color); overflow:hidden;
  
  .bgc(@timeline-juicy-color);
  
  .timeline-frame{
      border: 0 solid #999; 
  }
  
  .timeline-navigation{
    top:0; right:0; height:20px;
    border: 0 solid transparent; background-color: #fff;
    div{ 
      .p(2px 0 0 10px);
      &.timeline-navigation-zoom-in{background-image: url('../images/btns_zoomin.png');}
      &.timeline-navigation-zoom-out{background-image: url('../images/btns_zoomout.png');}
      &.timeline-navigation-move-left{background-image: url('../images/btns_moveleft.png');}
      &.timeline-navigation-move-right{background-image: url('../images/btns_moveright.png');}
    }

  }

  .timeline-axis-text{
    .fs-region-title(); color:@timeline-lighten-color;
  }
  
  .timeline-event{
    .rounded(0); border: 0 solid transparent; // background-color: #fff;
    &.timeline-event-range{ background-color:#fff;}
    /*
      TODO move events with css3
    */
  }
  


  .timeline-event-content{
    .m(0);
    div.date{
      //border-left: 3px solid @timeline-grey; 
      display:block; text-decoration: none; text-align:left; cursor:pointer;
      .p(4px 0);
      .text-content{
        .p(0 5px); .mb(4px); 
        .bl(3px, @timeline-lighten-color);  
        // max-width:145px; // pourquoi le texte ne va pas a la ligne avec le max-width ???
      }
      
      &:hover{
        .text-content{
          .bl(3px, @timeline-color);
        }
      }
      
      h4, h5{.m(0); color:@timeline-lighten-color;}
      h4{.fs-titre-event-timeline();}
      h5{.fs-artist-event-timeline();}
      
      body.view-mode-dot &{
        .p(0);
        .text-content{
          min-height:15px;
        }
        h4, h5, img{display:none;}
      }

      body.view-mode-titles &{
        background-color:#fff;
        h4, h5{display:block;}
        img{display:none;}
      }

      body.view-mode-thumbnails &{
        h4, h5, img{display:block;}
        img{max-width:145px;height:auto;}
      }

      body.view-mode-images &{
        h4, h5, img{display:block;}
      }
      
    }
    
  }

  .timeline-event-selected{
    background-color: transparent;
    .timeline-event-content{
      div.date{
        .text-content{
          .bl(3px, @timeline-color);
        }
        h4, h5{color:@timeline-color;}
      }
    }
  }
  
}

.timeline-modal{
  width:150px; min-height:30px; //margin-right: -75px;
  padding:5px;
  background-color:#fff;
  position:absolute; z-index:99999;
  display:none;

  h4, h5{.m(0); color:@timeline-color;}
      h4{.fs-titre-event-timeline();}
      h5{.fs-artist-event-timeline();}
}