/* ====================================================================
   This style sheet is for all browsers.
   REVISION HISTORY
   == September 2008 ==
   1. Added vertical-align for tables
   2. Added class for breadcrumbs
   == February 2007 - JJC ==
   1. Added numbered style for ol li.
   == April 2006 - JJC ==
   1. Updated stylesheet to create 'new' look and add in new logo.
   2. Tables removed in menu and replaced with lists - hence new list
   styles. Menu also now has a white background.
   3. Removed nested tables where tabular data displayed, and changed
   class to 'tbl'.
   == May 2006 - JJC ==
   1. Added background for H1, changed color of H2.
   2. Changed relevant margins and padding.
   3. Body now has Tahoma as first selected font.
   4. Create new div for "new" block on front page.

   == IE fixes ==
   IE doesn't correctly render fonts smaller than 1.0em, so the trick
   is to set font-sizes to 1.0em or larger, and then set the % in the
   body to reduce it in a scalable fashion.
==================================================================== */

/* ====================================================================
   Main styles
==================================================================== */

body 	{
	font-family: Tahoma, Arial, sans-serif;
	font-size: 80%;
	margin: 0px;
	background-color: #FFFFFF;
	color: #333366;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 10px;
	}


h1	{
	font-family: Arial, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFFFCC; /* #CC0033;        /* Previous colour: #333399 */
	background-color:#000066;
	}

/* Fix for IE: IE believes that there is an element that contains the
root element. By creating a selector for this, we force the width of
h1 to what we want in IE, but it is ignored in Mozilla/Firefox */
* html h1 {width: 100%;}

h2	{
	font-family: Arial, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	color: #CC0033;
	}


h3, h3 a {
	color: #000066;
	font-weight: bold;
	font-size: 1.2em;
	}

td, p,ul, ol, dl {
   font-size: 1.0em;
   line-height: 1.4em;
   }

li {
	list-style-type: square;
	padding-top: 3px;
	}

ul {
	margin-top: 0px;
	}

ol li {
   list-style-type: decimal;
   }

dt {
   color:#000000;
   font-weight:bold;
   }

td ul, td h3 {
	margin-top: 0px;
	}

a img	{
   border-style: none;
   }

/* Horizontal rule is at the bottom of the page, before the footer */
hr {
  background-color:#333399;
  color:#333399; 
  width:100%;
  height:1px;
}

/* ====================================================================
   The following styles are for the menu in the included files
==================================================================== */
div#logo {
  padding: 5px;
  background-color: #FFFFFF;
  }


/* The cell with a class of menu is the cell that contains the menu lists */
td.menu {
  text-align:left;
  height: 100%;
  width: 20%;
  border: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-right: 1px solid #000099;
  background-color:#EEEEFF;
}


/* Div with a class of topic contains the heading for a set of links  */
div.topic, div.topic a:link, div.topic a:visited, div.topic a:active {
	display:block;
   font-family: Arial, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	color: #FFFF99;
	text-align: left;
   margin-left: 0px;
   padding: 3px;
   padding-right: 5px;
   background-color: #000066;
   text-decoration: none;
	}

div.topic {
   border-bottom: 1px solid #EEEEFF;
   border-top: 1px solid #EEEEFF;
}
div.topic a:hover {text-decoration:underline;}

/* The lists with a class of item contain the
individual links to various pages */

ul.item {
   padding-left: 0px;
   margin-left: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   padding-bottom: 3px;
   background-color:#EEEEFF;
   }

/* Lists with a class of 'item' contain the individual activities for
the area of activity */

ul.item li {
   display:block;
   list-style-type: none;
   margin-left: 0px;
   padding-left: 15px ;
   font-size: 1.0em;
   line-height: 1.3em;
   padding-top:2px;

   }

ul.item li a, ul.item li a:active, ul.item li a:link, ul.item li a:visited {
   font-weight: normal;
	color: #000066;
	text-decoration: none;
   }

ul.item li a:hover {
   text-decoration:underline;
   color: #990000;
   }

/* The coursegrp class is for the mnuCrs file. Courses are grouped together
for ease of use. Each group is in a div, but cannot look the same as a 
div for a menu item. */
div.coursegrp {
   font-weight:bold;
   padding-left:5px;
   /*border-bottom: 1px solid red;*/
   color: #CC0033;
   padding-top:3px;
}

/* ====================================================================
   The following styles are for the main text areas on the pages
==================================================================== */

td.bdy {
   padding-left:10px;
   padding-top: 10px;
   }

table, td, th, td p	{
	background-color: #FFFFFF;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 1.0em;
	line-height: 130%;
	color: #333366;
	text-align: left;
	vertical-align: top;
   }
   
table.crsdetails td, .crsdetails th {
  padding-left: 10px;
  }


td a:link, td a:active {
  text-decoration:underline;
  color: #000099;
  }
  
td a:visited {
  text-decoration:underline;
  color: #660033;
  }

/* For course list */
dt.crs a:visited {
  color: #660066;
  }
}
  
/* ====================================================================
   The following table style is for where borders are required i.e.
   the table contains tabular data. The table in the HTML must be
   set up with cellspacing = 1 so that the background-colour can
   form the border.
==================================================================== */

table.tbl {
   background-color: #999999;
   clear: both;

   }
table.tbl th {
   background-color: #CCCCCC;
   text-align: center;
   vertical-align: top;
   }

table.tbl tr {
   vertical-align: top;
   }

table.tbl td {
   background-color: #FFFFFF;
   vertical-align: top;
   }


/* ====================================================================
   Miscellaneous Styles
==================================================================== */

/* Blockquote element is used for testimonials */
blockquote {
   text-align:left;
   color: black;
   padding-bottom: 0px;
   margin-bottom: 0px;
   margin-left: 5px;
}

/* P with a class of author is used for the delegate who gave the
testimonial */
p.author {
   text-indent:50px;
   font-style:italic;
   padding-top: 0px;
   margin-top: 0px;
}


/* The crs class if for the DT element in the course list */
.crs {
   padding-top: 10px;
   font-weight: bold;
}

/* The crstopic class is for the DT element in the course contents  */

.crstopic {
	font-weight: bold;
	}

/* The emphasis class is used to highlight certain info by not only
   making it bold, but also red. Used e.g. for names of directors */

.emphasis {
	color: #CC0033;
	font-weight: bold;	    /* font-size:9pt; */
	}

/* Bookmark class is for links at the bottom of the page */

.bookmark, .bookmark li {
   padding-top: 10px;
	font-family: Arial, sans-serif;
	font-size: 100%;
	font-style: italic;
	text-align: center;
	list-style-position: outside;
	}
/* Breadcrumb class is for the "breadcumb" navigation at the top of
each page */
div.breadcrumb {
   font-size: 90%;
   }

/* This is for the "news" block on the main menu */
div.news {
   padding: 5px 5px 5px 5px ;
   background-color: #FFFFCC;
   font-size: 1.0em;
   margin-left: 5px;
   margin-right: 5px;
   border: 1px solid #000066;
   }

.news h2 {
   color: #000066;
   font-size: 1.3em;
   background-color: transparent;
   padding: 0px;
   text-align: center;
   margin-top:0px;
   }

.news p {
   background-color: transparent;
   }

table#glance {
   background-color: transparent;
   width: 98%;
   margin: 0px;
}

table#glance td {
  background-color: #FFFFCC;
  padding: 0px 2px;
}