#cal {color:#FFF; background-color:#FFF; border: 1px solid #1a4551;font: 10px Verdana, Arial, Helvetica, sans-serif; }
#cal td, td.free_Cell { text-align:center; width: 22px;height:18px; background-color: #72b4e4; color:white;}
#cal td.Clicked_Cell {background-color : #b8ecff;}

#cal td.reserved_Cell, td.reserved_Cell  {background-color : red; color : white; text-align:center}
tr#days-of-week td { background-color: #bbb;padding:2px;}
#cal thead td {background-color: #4380bf; font-size: 12px; font-weight: bold;}
#cal thead a{ color: #FFF;}
#cal a{color: #ff0000; text-decoration:none;}
#cal .cal-prev-month-day, #cal .cal-next-month-day {color: #215f27;}
#cal-current-day {background-color: black !important;}

/* the name of the month in the monthly calendar */
#cal-header {color:white; padding:2px;}

TABLE.Weekly_Calendar {
  Border-Collapse: Collapse;
  padding:0px;
  background : white;
}

/* the general div for placing the calendar in the page */
DIV.ConteneurCalendar {
   position : relative;
   clear : both;     
   padding:12px;
   margin:0px;       
}

/* the plannings title */
DIV.Planning_Title {
   position : absolute;
   padding : 0px;
   color : blue;
   font-size : 19px;
   width : 100px;
   height : 20px;   
   top : -30px;
}

/* the weekly and monthly navigating divs */
.Planning_Navigator {
   position : absolute;    
   padding :0px;
   border : 0px solid red;
   width : 60px;
   Height : 20px;
   top : 0px;
   font-size:12px;
   font-weight:bold;
   text-align:center;
  
}

.Planning_Navigator div.Previous {
   position : absolute;  
   left : 30px; 
   width:25px;
   background-color : blue;
   border : 1px solid white;
}

.Planning_Navigator div.Next {
   position : absolute;   
   left : 0px;
   width: 25px;  
   background-color : blue;
   border : 1px solid white;
}

.Planning_Navigator A {color:white;}

/* the navigator links into the weekly calendar */
.Week_Navigator {
   position : absolute;    
   padding :0px;
   border : 0px solid red;
   width : 60px;
   Height : 20px;
   top : 0px;
   font-size:12px;
   font-weight:bold;
   text-align:center;
}

.Week_Navigator div.Next {
   position : absolute;   
   left : 75px;
   top : -20px; 
   width: 25px;  
   background-color : blue;
   border : 1px solid white;
}

.Week_Navigator div.Previous {
   position : absolute;   
   left : 45px;
   top : -20px; 
   width: 25px;  
   background-color : blue;
   border : 1px solid white;
}

.Week_Navigator A { color : white;}

.Week_Title {
   position : absolute;
   padding : 0px;
   color : blue;
   font-size : 19px;
   width : 680px;
   border : 0px solid white;
   height : 20px;   
   top : -65px; 
   Left : -170px;
   text-align:right;
   
}



/* the line width the day numbers */
.Header_Day {
  font-face : tahoma, helvetica, arial;
  font-size : 12px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : darkgray; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;   
  float:left;
  margin:0px;
}


.Header_Day_Planning {
  position:relative;
 font-face : tahoma, helvetica, arial;
  font-size : 8px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : darkgray; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;   
  float:left;
  margin:0px;
}

.Header_DayEnd {
  font-face : tahoma, helvetica, arial;
  font-size : 12px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : darkgray; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;   
  float:left;
  margin:0px;
  border-right:1px solid white;
}

.Header_DayEnd_Planning {
  position:relative;
  font-face : tahoma, helvetica, arial;
  font-size : 8px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : darkgray; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;   
  float:left;
  margin:0px;
  border-right:1px solid white;
}

/* the line width the day names */
.Header_DayNames {
  font-face : tahoma, helvetica, arial;
  font-size : 12px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : gray; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;  
  border-top : 1px solid white;
  float:left;
  margin:0px;  
}

.Header_DayNamesEnd {
  
font-face : tahoma, helvetica, arial;
  font-size : 12px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : gray; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;  
  border-top : 1px solid white;
  border-right:1px solid white;
  float:left;
  margin:0px;  
}

.Header_Hours { 
  vertical-align=top;
  font-face : tahoma, helvetica, arial;
  color:white;
  float:left;    
  margin:0px;
  padding:0px;
 
}

/* the line with the hour numbers */
/* the line with the hour numbers */
.TimeLine {
  position:relative;
  vertical-align=top;
  font-face : tahoma, helvetica, arial;
  font-size:9px;
  color:white;
  float:left;  
  background:#b2b2b2;  
  margin:0px;
  padding:0px;
   
}

/* the line for the hour line */

.DayLineFirst {
  font-face : tahoma, helvetica, arial;
  font-size : 1px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : #D3D3D3; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;   
  float:left;
  margin:0px; 
  padding :0px; 
  
 
}

.DayLineFirstEnd {
  font-face : tahoma, helvetica, arial;
  font-size : 1px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : #D3D3D3; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;  
  border-right:1px solid white;
  float:left;
  margin:0px;  
  }

/* the line for the inside hour lines */
.DayLineSecond {
  font-face : tahoma, helvetica, arial;
  font-size : 1px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : #D3D3D3; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;  
  border-top : 0px solid white;
  float:left;
  margin:0px;  
  padding:0px;
  
}

.DayLineSecondEnd {
  font-face : tahoma, helvetica, arial;
  font-size : 1px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : #D3D3D3; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;  
  border-top : 0px solid white;
  float:left;
  margin:0px;  
  border-right:1px solid white; 
  padding:0px;
}
/* the line for the last line */
.DayLineLast {
  font-face : tahoma, helvetica, arial;
  font-size : 1px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : #D3D3D3; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;  
  float:left;
  margin:0px;  
  

}

.DayLineLastEnd {
  font-face : tahoma, helvetica, arial;
  font-size : 1px;
  font-weight : bold;
  text-align : center;
  color : white;
  background-color : #D3D3D3; 
  border-left : 1px solid white; 
  border-bottom : 1px solid white;   
  float:left;
  margin:0px;  
  border-right:1px solid white;

}

/* the color of the events in the calendar */
DIV.Event {
  position : absolute;
  border : 0px solid darkgray;
  background-color : yellow;  
  cursor : pointer;
  padding:0px;
  margin:0px;
  
    
}


DIV.Event_Planning {
  position : absolute;
 
  background-color : yellow;  
  cursor : pointer;
  padding:0px;
  margin:0px;
  z-index :70000;
    
}


DIV.erase_Cell { float:right; 
                 margin:0px; 
                 margin-right:1px;
                 margin-top:1px;                                              
                 background-color:black;                 
                 width:7px;
                 padding:0px;                
                 cursor : pointer;
}