.calendar 
{
    padding: 0pt;
}

.calendar li
{
	background-image: none;
}

#monthly 
{
	margin-left: 45px;
	margin-right: 45px;
}

#monthly.public
{		
	margin-left: 0;			/* in the public calendar we don't need a left margin, because we have the menu bar to float over */
	margin-right: 35px;		/* and we can have a smaller right margin, because the cells are smaller                          */
}


.calendar th
{
    border: none;
    text-align: center;
}

.calendar td
{
    font-size: 7pt;
    border: 1px solid black;
}

#yearly td
{    
	width:  70px;	
	height: 17px;
}

#monthly td
{
    padding: 1px;
    width:  90px;
    height: 90px;	
}

#monthly.public td	/* make the cells narrower in the public calendar, because we have the menu bar to fit in */
{
    width:  75px;
	height: 75px;
}

#yearly td.rt,  /*the leftmost and rightmost columns */
#yearly td.bl 	/*the gaps at the corners of the table */
{
	width: 15px;
}


/* Student holidays */
.calendar td.sh    {   background-color: #ccc;}

/* Student exams */
.calendar td.se    {   background-color: #fcc;}

/* Bank holidays */
.calendar td.bh    {   background-color: #aaa;   color: white; }

/* Weekends */
.calendar td.we,
.calendar tr.we td    {   background-color: #ff7;}

/* Today */
.calendar td.today		{  background-color: #cfc;				}

/*Is On Trip - maybe a background image would be better for yearly? */ 
/*Is Relevant Lecture - maybe a background image would be better for yearly? */ 
.calendar td div ul li.is_on_trip h4,
.calendar td.is_on_trip,
.calendar tr.we td.is_on_trip,
.calendar td div ul li.is_relevant_lecture h4,
.calendar td.is_relevant_lecture,
.calendar tr.we td.is_relevant_lecture
{
	background-color: #aef;
	text-decoration: underline;
}

/* Is Personal */
.calendar td div ul li.is_personal h4,
.calendar td.is_personal,
.calendar tr.we td.is_personal
{
	background-color: #fb5;
	text-decoration: underline;
}


/* these must come below the above colourings so that they take precedence under the 
   'the last highest weight rule wins'  */
.calendar td:hover,
.calendar td.sfhover,
.calendar tr.we td:hover,	/* need to add these separately, because the tr.we gives the earlier rule priority */
.calendar tr.we td.sfhover
{
    cursor: pointer;
    border: 1px solid #00f;
    background-color: #ccf;
    color: black;
}

/*  S M T etc - the leftmost and rightmost columns */
.calendar td.rt,
.calendar tr.we td.rt,
.calendar td.bl 	/*the gaps at the corners of the table */
{
  border: none;
  font-size: 10pt;
  background-color: white;
  cursor: auto;
}

.calendar tr.we td.rt  
{
  background-color: #ff7;
}

 /* Non month days */
.calendar td.nmd
{
  background-color: white !important;
  border: 1px solid white;
  cursor: auto !important;
  color: #ccc;
}

#monthly td.nmd a
{
    color: #aaa;
    border-bottom: 1px solid #ccc;
}
#monthly td.nmd a:hover
{
    color: black;
    border-bottom: 1px solid black;
}

.calendar span
{
    padding: 2px;
    margin: 0;
    border: 0;
}
.calendar span.cl { background-color: #f66;  color: black; }
.calendar span.ct { background-color: #fb0;  color: black;}
.calendar span.cp { background-color: #4dd;  color: black;}
.calendar span.cc { background-color: #090;  color: white; }
.calendar span.cs { background-color: #88f;  color: white; }
.calendar span.co { background-color: #ddd;  color: black; }

/*  Define how the cell content looks now  : */

/* by default, hide all the content of a yearly cell.  :hover will give us more info */
#yearly td div.cell	{  display: none;	}

/* for the cells in monthly mode, we basically hide all of the detail leaving only the title, time, and flag icons.      */
/* But because the cell is quite small, quite often it won't all fit in, so on hover we give a popup, which is the same  */
/* details but in a larger cell.  To get the full details, the cell must be clicked.                                     */
#content table.calendar td div.cell div.date h3,
#content table.calendar td div.cell ul li h4,
#content table.calendar td div.cell div
{
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 7pt;
  color: black;
}

.calendar td div.cell ul,
.calendar td div.cell ul li 
{
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: transparent;
	color: black;
}

#monthly td div.cell ul,
#monthly div.cell ul li 
{
	width: 90px;
}

#monthly.public td div.cell ul,
#monthly.public div.cell ul li 
{
	width: 75px;
}


/* These links here are for when JS is disabled, as far as possible we want them to be invisible when JS is enabled */
/* by making these only display different when hovered over it will make them appear normal most of the time.       */
.calendar td div.cell ul li h4 a,
.calendar td div.cell ul li h4 a:hover
{
  font-weight: normal;
  font-size: 7pt;
  border-bottom: none;  
  color: black;
}
.calendar td div.cell ul li h4 a:hover
{
  border-bottom: 1px solid black;
}

.calendar td div.cell div.date span.month_year,
.calendar td div.cell div.date a,
.calendar td div.cell ul li p,
.calendar td div.cell ul li.create_new,
.calendar td div.cell ul li.no_entries,
.calendar td div.cell h5
{
  display: none;
}

/*cell hover - in monthly we just expand the view, taking it out of the flow
			   in yearly we are displaying it for the first time, explicitly state that (we need the #yearly to make selectivity high enough )
*/
.calendar td:hover div.cell,
.calendar td.sfhover div.cell
{
	position: absolute;
	font-size: 9pt;
	width: 180px;
    height: 180px;
	background-color: #eef;
    border: 1px solid black;
	z-index: 10000;
}

#yearly td:hover div.cell,
#yearly td.sfhover div.cell
{
	display: block;
    margin-left: 25px;
    margin-top:  25px;
}

.calendar td:hover div.cell,
.calendar td.sfhover div.cell
{
    margin-left: -46px;
    margin-top: -46px;
}

.calendar td:hover div.cell div.date,
.calendar td.sfhover div.cell div.date
{
	background-color: #ccf;
	color: black;
	width: 100%;
	margin-top: 1px;
}

.calendar td:hover div.cell div.date h3 span.month_year,
.calendar td.sfhover div.cell div.date h3 span.month_year
{
	display: inline;
}

.calendar td:hover div.cell ul li h4,
.calendar td.sfhover div.cell ul li h4
{
	margin: 0.25em 0;
	font-size: 8pt;
    width: 100%;
}

#monthly.public td:hover div.cell ul li,		/* we need a bit more specificity here, to override the #monthly.public width we set to make it smaller */
#monthly.public td.sfhover div.cell ul li,
#monthly.public td:hover div.cell ul,
#monthly.public td.sfhover div.cell ul,
#content .calendar td:hover div.cell ul li,
#content .calendar td.sfhover div.cell ul li,
#content .calendar td:hover div.cell ul,
#content .calendar td.sfhover div.cell ul
{
	width: 100%;
}

.calendar td:hover div.cell ul li.no_entries,
.calendar td.sfhover div.cell ul li.no_entries
{
    font-size: 8pt;
    display: block;
}

#monthly td:hover div.cell ul li.create_new,
#monthly td.sfhover div.cell ul li.create_new
{
    font-size: 8pt;
    display: block;
    margin-top: 1em;
}

/* finally control what happens when a cell has been clicked, */

.calendar td div.cell_sticky
{
   position: absolute;
   left: auto;
   background-color: white;
   padding: 0;
   font-size: 10pt;
   border: 2px solid #bbf;
   cursor: auto;
   width: 21em;
   z-index: 4;
}

#monthly td div.cell_sticky		/* in monthly mode, so we can easily overlap previous cells without causing a problem (cos they're big)*/
{
   margin-left: -45px;
   margin-top: -31px;
}

#yearly td div.cell_sticky	/* in yearly mode, we must take care not to overlap previous cells, as hovering will become impossible*/
{
   margin-left: 25px;
   margin-top: 25px;
}

.calendar td div.cell_sticky div.date
{
    width: 21em;
    padding: 0;
    margin: 0;
    height: 18px;
    background-color: #D4D0C8;
}

.calendar td div.cell_sticky div.date h3
{
    margin: 0;
    font-size: 10pt;
    width: 80%;
    height: 18px;
    float: left;
}

/* These links here are for when JS is disabled, as far as possible we want them to be invisible when JS is enabled   */
/* a cell can only go sticky when JS is enabled, OR expand_date has been set, either way we want these links disabled */
.calendar yearly td div.cell_sticky ul li h4 a,
.calendar yearly td div.cell_sticky ul li h4 a:hover
{
  font-weight: normal;
  font-size: 9pt;
  border-bottom: none !important;  
  cursor: default !important;
  color: black;
}

.calendar td div.cell_sticky div.date a
{
    display: block;
    background: #D4D0C8 url(../images/close.gif) right 0px no-repeat;
    text-indent: 16px;
    overflow: hidden;
    width: 16px;
    height: 16px;
    margin: 1px;
    float: right;
    border: 0;
}

.calendar td div.cell_sticky div.date a:hover
{
    background-position: right -16px;
    border: 0;
}

.calendar td div.cell_sticky div.cell_content
{
    padding: 0.25em;    
}

.calendar td div.cell_sticky ul
{
    background-color: white;
    width: 19.5em;
    list-style: none;
    padding: 0;
    margin: 0;
}

.calendar td div.cell_sticky ul li
{
    width: 19.2em;
    padding: 0.25em;
    margin: 0;
}    

.calendar td div.cell_sticky ul li p
{
    width: 19em;
    padding: 0;
    margin: 0;
    text-align: left;
}

.calendar td div.cell_sticky ul li p.links
{
    text-align: right;
}

.calendar td div.cell_sticky ul li p.links a
{
    margin-left: 2em;
}

.calendar td div.cell_sticky ul li.create_new
{
    text-align: right;
    margin-top: 1em;
}

/* style the drop down month/year selectors */

#drop_downs
{
	width: 100%;
	height: 1em;
	margin: 0 auto;
	text-align: center;
}

#drop_downs #previous_month
{
	float: left;
	font-size: 150%;
}

#drop_downs #next_month
{
	float: right;
	font-size: 150%;
}

#drop_downs div.dropdown_nav,
#drop_downs div.dropdown_nav_inactive,
#drop_downs div.dropdown_nav_active
{
	margin-left: 4em;
	margin-top: 0.5em;
	float: left;
}

/* format the help legend */
#help table.legend,
#content table.legend 
{
	margin-left: 45px;
    background-color: white;
}

#help table.legend tr td,
#content table.legend tr td,
#help table.legend tr td span
#content table.legend tr td span
{
	cursor: auto !important;
    font-size: 8pt;
    padding: 2px;
}