.calendar table {
  border-top: 1px solid #669900;
  border-right: 1px solid #669900;
  border-bottom: 1px solid #669900;
  border-left: 1px solid #669900;
  color: #000;
  cursor: default;
  background: #eeeeee;
  font-family: verdana;
  font-size: 13px;
}

.calendar thead .title { /* This holds the current "month, year" */

  background: #669900;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  background: #669900;
  color: #ffffff;
  text-align: center;
  padding: 0px;
  
}

.calendar thead .name { /* Cells <TD> containing the day names */
  text-align: center;
  background: #00cc66;
  font-size: 11px;
  color: #ffffff;
  padding: 4px;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  font-size: 11px;
  color: #ffffff;
  background: #00cc66;
  padding: 4px;
}

.calendar tbody .day { /* Cells <TD> containing month days dates */
  font-size: 10px;
  width: 2em;
  text-align: center;
  padding: 4px;
}

.calendar tbody .weekend { /* Cells <TD> containing month days dates */
  font-size: 10px;
  width: 2em;
  text-align: center;
  padding: 4px;
  color: #e66426;
}

.calendar tbody .today { /* Cells <TD> containing month days dates */
  background: #00cc66;
  font-size: 10px;
  width: 2em;
  text-align: center;
  padding: 4px;
  color: #000000;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
  color: #000000;
  background-color: #00cc66;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  padding: 0px;
  color: #ffffff;
  background-color: #148b4f;
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #fef3ec;
  color: #000;
  text-align: left;
  font-family: Verdana;
  font-size: 0px;
  color: #00cc66;
}

.calendar table .wn {
  background: #00cc66;
  color: ButtonText;
}

.special { 
  background-color: #ec9c3f; 
  color: #000000; 
}

.iconPosition {
      position : relative;
	  top: 3px;
}