/*-----------------------------------------------
// File : sheet_Scrollbar.css
// By   : ELT
// date :
//   - 25/10/14 created 
//-----------------------------------------------*/
/*---------- colors used ----------------------------------
    #283d5c : bleu nuit (body)
    #ca090c : rouge - fond col1
    #345079 : bleu - form
    #91a8c7 : bleu ciel
    #eeead8 : gris clair (contact)
    #cfcdbe : gris foncé (contact)
---------------------------------------------------------*/
/*****************************************************/
/**/
 
/********************************************************/
/*  Aera for the title of the slide 			*/
.info_image {
    width:798px;
    height:30px;
    float :left;
    text-align:center;
    background-color:black;
    color:white;
    cursor:default;
    padding-left:10px;
 /*   filter : alpha(opacity=70); /*IE*/
 /*   opacity : 0.8; */
    font-family:Calibri,Times New Roman,Arial, Helvetica, sans-serif;
    font-size:16px;
    font-style:italic;
    /*border-left:1px solid white;*/
    border-top:1px solid white;
    /*border-bottom:1px solid white;
    
    
    border-top: 1px solid white;
    border-left:1px solid white;
    border-right:1px solid white;
    */
    }
/********************************************************/
/*  Aera for the slide's counter 			*/
#imageCounter{
    width:200px;
    height:25px;
    color:white;
    position:absolute;
    cursor:default;
    top:600px;
    padding-left:10px;
    font-family:Calibri, Times New Roman,Arial, Helvetica, sans-serif;
    font-size:12px;
    filter : alpha(opacity=70); /*IE*/
    opacity : 0.7; 
    /*border-top: 1px solid red;
    border-bottom:1px solid red;
    border-left:1px solid red;
    border-right:1px solid red;*/
}
/****************************************************/
/* scrollbar - position & dimension		    */	
.scrollable {
    position:relative;
    overflow:hidden;
    float:left;	
    width: 720px; /* 680px;*/
    height:100px;
    background-color: black;
    text-align:center;
    margin-top: 0px;
        /*
    border-right:1px solid white;
    border-top: 1px solid white;
    border-bottom:1px solid white;
    border-left:1px solid white;*/
    }
  
/****************************************************************************
 root element for scrollable items. Must be absolutely positioned
 and it should have a extremely large width to accomodate scrollable items.
 it's enough that you set the width and height for the root element and
 not for this element.
/*****************************************************************************/
.scrollable .items {
    width:20000em; /* this cannot be too large */
    position:absolute;
    clear:both;
    }
    
/************************************************************************/
/* img = slide display to scrollbar					*/
/* position, dimension and event					*/
.scrollable img {
    float:left;
    /*margin:20px 5px 20px 21px;
    margin:10px 5px 20px 21px;*/
    margin-bottom:0px;
    margin-left:0px;
    margin-right:20px;
    margin-top:1px;
    background-color:white;
    padding:2px;
    border:1px solid black;
    cursor:pointer;
    height:85px;
    width:80px;/*auto;*/
    filter : alpha(opacity=70); /*IE*/
    opacity : 0.7;        
    /* passe pas sur internet exploreur
    -moz-border-radius:4px;
    -webkit-border-radius:4px;*/
    /*border-right:1px solid red;
    border-top: 1px solid red;
    border-bottom:1px solid red;
    border-left:1px solid red;*/
    }
.scrollable img:hover {
    filter : alpha(opacity=100); 
    opacity : 1;
    /*margin-top:0px;
    height:90px;
    width:95px;*/
    }

/****************************************/
/* active item 				*/
.scrollable .active {
    filter : alpha(opacity=100);
    opacity : 1;     
    z-index:9999;
    position:relative;
    }
/********************************************************/
/* prevPage(page_left) and nextPage(page_right) buttons	*/
/* position, dimensions and event of the navigator 	*/
a.browse {
    background:url(../Pictures/navigation_scroll_1.png) no-repeat;
    display:block;
    width:20px;
    height:20px;
    float:left;
    margin:40px 15px 0px 15px;
    cursor:pointer;
    font-size:1px;
    /*border-right:1px solid red;
    border-top: 1px solid red;
    border-bottom:1px solid red;
    border-left:1px solid red;*/
    }
a.page_right 	{
    background-position: 0 -20px;
    clear:right;
    margin-right: 0px;
    filter : alpha(opacity=80); 
    opacity : 0.8;    
    }
a.page_right:hover, a.right:active 	{
    filter : alpha(opacity=100); 
    opacity : 1;
    } 
a.page_left	{
    margin-left: 5px;
    filter : alpha(opacity=80); 
    opacity : 0.8;
    } 
a.page_left:hover, a.left:active  {
    filter : alpha(opacity=100); 
    opacity : 1;
    }
a.disabled { opacity: .2;
    filter: alpha(opacity=20);
    cursor: default;   }
    
 a.disabled:hover {opacity: .2;
    filter: alpha(opacity=20);
    background-color: transparent; }
    
 /********************************************************/
/* prev(left) & next(right buttons			*/
/* position and dimensions of the navigator 		*/
.navi {
    width:5px;
    height:5px;
    /*border-top: 1px solid red;
    border-bottom:1px solid red;
    border-left:1px solid red;
    border-right:1px solid red;*/
    }
/* items inside navigator */
.navi a {
    width:25px;
    height:100px;
    position:absolute;
    top:60%;
    background-color: transparent;
    
    background-image: url(../Pictures/navigation_scroll_2.png);
    background-repeat: no-repeat;
    display:block;
    cursor: pointer;
    /*border-right:1px solid green;
    border-top: 1px solid green;
    border-bottom:1px solid green;
    border-left:1px solid green;*/
    }
/********************************************************/
/* active state (current page state) 			*/
.navi a.active {
    background-position:0 -16px;     
    }
/********************************************************/
/*  prev = left	- dimesion, hover & active		*/
.navi a.left { 
    background-position: 0 0;
    left:220px;
    margin-left:5px;
    opacity : 0.5;
    filter : alpha(opacity=50); /*IE*/
    }
.navi a.left:hover,.navi a.left:active  	{
    opacity : 1;
    filter : alpha(opacity=100); /*IE*/
    }    
/********************************************************/
/*  next = right - dimension, hover & active		*/  
.navi a.right	{ 
    background-position: -21px 0px;
    left: 850px;
    /*right: 5px;*/
    opacity : 0.5;
    filter : alpha(opacity=50); /*IE*/
    }    
.navi a.right:hover,.navi a.right:active {
    opacity : 1;
    filter : alpha(opacity=100); /*IE*/
    }