.navbar {
    width: 1100px;
}
.navbar td {
    color: black;
    font-size: 14px;
    font-family: arial, serif;
    font-weight: bold;
    background-color: #FFFFFF;
    color: black;
    border: 0px; 
}
.navbar td#prev {
    color: black;
    font-size: 12px;
    font-family: arial, serif;
    font-weight: bold;
    background-color: #FFFFFF;
    border: 1px solid #242; 
    border-color: #BBB #EEE #EEE #BBB;
    color: black;
    border: 0px; 
}
.calendar a {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif; 
    text-decoration: none;
    /* display: block; */
    margin: 0;
}
.calendar a:link {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: black;
}
.calendar a:visited {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: black;
}
.calendar a:hover {
    color: #3399FF;
    background-color: #CCCCCC;
}

.calendar tr.days {
    color: #CCE; 
    background-color: #224;
    font-weight: bold;
    text-align: center;
    padding: 1px 0.33em;
}
.calendar tr.title{
    color: black;
    font-size: 12px;
    font-family: arial, serif;
	background-color: #CCCCCC;
    color: black;
    border: 1px solid #242; 
}
.calendar tr.navbar {
    color: black;
    font-size: 12px;
    font-family: arial, serif;
    background-color: #FFFFFF;
    border: 0px; 
}
.calendar td.navleft {
    color: black;
    width: 95px;
    font-size: 12px;
    font-family: arial, serif;
    background-color: #FFFFFF;
    border: 1px solid gray; 
    border-width: 1px 0 0 1px; /*top right bottom left*/
    text-align: left;
}
.calendar td.navcenter {
    color: navy;
    width: 910px;
    font-size: 12px;
    font-family: arial, serif;
    background-color: #FFFFFF;
    border: 1px solid gray; 
    border-width: 1px 0 0 0;
    text-align: center;
}
.calendar td.navright {
    color: black;
    width: 95px;
    font-size: 12px;
    font-family: arial, serif;
    background-color: #FFFFFF;
    border: 1px solid gray; 
    border-width: 1px 1px 0 0;
    text-align: right;
}
.calendar th {
    width: 157px;
    color: black;
    font-size: 12px;
    font-family: arial, serif;
    background-color: #FFFFFF;
    color: black;
    border: 1px solid #242; 
    border-color: #BBB #EEE #EEE #BBB;
}
.calendar td {
    width: 157px;
    color: black;
    text-align: left;
    vertical-align: text-top;
    font-size: 10px;
    font-family: arial, serif;
    background-color: #FFFFFF;
    color: black;
    border: 1px solid #242; 
    border-color: #BBB #EEE #EEE #BBB;
}
.calendar td.dayview {
    width: 1100px;
    color: black;
    text-align: left;
    vertical-align: text-top;
    font-size: 12px;
    font-family: arial, serif;
    background-color: #FFFFFF;
    color: black;
    border: 1px solid #242; 
    border-color: #BBB #EEE #EEE #BBB;
}
.calendar td.sat, table#calendar td.sun {
    background-color: #CCCCCC;
}
.calendar td.holiday {
    background-color: #FFFF99;
}
.calendar td.today {
    background-color: #FFFF99;
}
.calendar td.weekend {
    background-color: #FFFFFF;
}
.calendar td.normal {
    background-color: #FFFFFF;
}
.calendar td.pmonth {
    background-color: #DCDCDC;
}
.calendar td.nmonth {
    background-color: #DCDCDC;
}
div.date {
	float: right;
	align: top;
	top: 0px;
	border: 1px solid gray;
	border-width: 0 0 1px 1px;
	padding: 0.125em 0.25em 0 0.25em;
	margin: 0;
	background: #F3F3F3;
	width: 12px;
}
td.sat div.date, td.sun div.date {
    border-width: 0;
    color: gray; 
    background: transparent;
}
td.jun div.date, td.aug div.date {
    border-width: 0;
    color: gray; 
    background: transparent;
}

span.tool {
  position: relative;   /* this is key */
  cursor: help;
}
 
span.tool span.tip {
  display: none;        /* so is this */
}

/* tooltip will display on :hover event */
span.tool:hover span.tip {
  display: block;
  z-index: 100;
  position: absolute;
  top: 2.5em;
  left: 25px;
  top: 15px;
  /* width: auto; */
  width: 300px;
  line-height: 1.2em;
  padding: 3px 7px 4px 6px;
  border: 1px solid #336;
  background-color: #f7f7ee;
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #000;
  text-align: left;
}

#content span.tool::after {
  padding-left: 2px;            /* eye candy */
  content: url(/img/bubble.gif);
}