/********************************************************
	MLA style sheet
	v1.1
	
	LAYOUT:
	
	CONTAINER
   -----------------------------------------------
  |HEADER                                         |
  |-----------------------------------------------|
  |MENU     |BREADCRUMBS                          |
  |         |CONTENT                              |
  |         |                                     |
  |         |                                     |
  |         |                                     |
  |         |                                     |
  |         |                                     |
  |         |                                     |
  |-----------------------------------------------|
  |FOOTER                                         |
   -----------------------------------------------
  
  Container: a div with id "LAYOUT-CONTAINER" must contain
  the header, menu, content and footer divs
  
  Header: a div with id "LAYOUT-HEADER" should contain the 
  header content
  
  Menu: a div with id "LAYOUT-MENU" should contain the menu 
  content.
  
  The menus should be specified using <UL> and <LI> tags. 
  Each link should be contained within <A> and </A> tags.
  The id for each <A> tag should be "MENU-#item#" where 
  #item# is a unique name for the link.
  The id for each submenu <UL> tag should be 
  "MENU-#item#-SUBMENU" where #item# is the same as the 
  parent menu item.
  Inactive links should have class "inactive" attributed
  to the <A> tag.
  The selected link should have class "selected" attributed
  to the <A> tag.
  
  Content: a div with id "LAYOUT-CONTENT" should contain the
  main content of the webpage.
  
  For each menu item, a div with id "CONTENT-#item#" where
  #item# is the unique name used in the menu <A> id.
  
  Footer: a div with id "LAYOUT-FOOTER" should contain the 
  footer content. The default font size for footer content is
  8pt.
  
  Implementation of the menu system and corresponding 
  content is contained in the menu-functions.js file.
  
********************************************************/

/***** generic types ****/
* {
  	font-family: verdana, sans-serif;
  	font-size: 10pt;
  	}


body {
   height: 100%;
	background: url( default-bg1.gif ) repeat-y;
   background-position: 210px;
   }

h1 {	
	font-weight: bold;
   font-size: 14pt;
	color: #000066
   }

h2 {	
	font-weight: bold;
   font-size: 12pt;
   color: #0099FF
   }

h3 {	
	font-weight: bold;
	display: inline;
   }

input, textarea, select {
	font-size: 8pt;
}


ul.home {margin-top: 1px; padding-top: 1px;}


/***** custom types ****/
body.sub {
	height: auto;
	background: none;
}

.link {
	cursor: pointer;
}

a.links {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
  }

a.hyperlink {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	color: #0000FF;
	text-decoration: underline;
  }

img.link {
	cursor: pointer;
	vertical-align: bottom;
  }

/***** layout table ****/
#LAYOUT-CONTAINER {

	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%; 

}

#LAYOUT-HEADER {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100px;
	clear: both;
	
	padding-right: 3px;
		
	background-color: #A7A7F9;
	background-image: url( default-header-bg1.gif );
	background-repeat: no-repeat;
	background-position:  left top;

}

#LAYOUT-HEADER div.LOGO {
	position: absolute;
	left: 5px;
	top: 5px;
	
	float:left;

	vertical-align: middle;
	text-align: left;

}

#LAYOUT-HEADER div.LOGIN {
	vertical-align: top;
	text-align: right;

	position: absolute;
	right: 5px;
	top: 5px;
	
	float:right;

}

#LAYOUT-HEADER div.TITLE {
	position: absolute;
	left: 0px;
	top: 70px;
	
	width: 100%;

	padding: 3px 0px 3px 3px;

	border-style: none;
	background-color: #000066;
	font-weight: bold;
	font-size: 16pt;
	text-align: left;
	color: #FFFFFF;
}

#LAYOUT-HEADER div.COMMENT {
	position: absolute;
	right: 10px;
	top: 74px;
	
	width: 100%;

	padding: 3px;

	text-align: right;
	color: #FFFFFF;	
}

#LAYOUT-HEADER div.COMMENT a {
	color: #FFFFFF;	
}

#LAYOUT-MENU {
   position: absolute;

	top: 110px;
	left: 5px;
	float: left;

	width: 200px;

}

#LAYOUT-MENU ul{
	margin-left: 0;
	list-style-type: none;
	padding: 0;
	border: none;
}

#LAYOUT-MENU ul li a{
	font-weight: bold;
	text-decoration: none;
	color: #000066;
	cursor: pointer;	
}

#LAYOUT-MENU ul li a.selected{
	font-weight: bold;
	color: #FF3333;
	cursor: pointer;	
}

#LAYOUT-MENU ul li a.inactive{
	font-weight: bold;
	cursor: default;
	color: #666666;
}

#LAYOUT-MENU ul li ul {
	position: relative;
	left: 10px;
}

#LAYOUT-MENU ul li ul li a{
	font-weight: bold;
	color: #0099FF;
	cursor: pointer;	
}

#LAYOUT-MENU ul li ul li a.selected{
	font-weight: bold;
	color: #FF3333;
	cursor: pointer;	
}

#LAYOUT-MENU ul li ul li a.inactive{
	font-weight: bold;
	color: #666666;
	cursor: default;	
}

#LAYOUT-MENU ul li ul li a.inactive{
	color: #666666;
}

#LAYOUT-MENU ul li ul li ul{
	position: relative;
	left: 15px;
}

#LAYOUT-MENU ul li ul li ul li a{
	font-weight: bold;
	color: #000000;
	cursor: pointer;	
}

#LAYOUT-MENU ul li ul li ul li a.selected{
	font-weight: bold;
	color: #FF3333;
	cursor: pointer;	
}

#LAYOUT-MENU ul li ul li ul li a.inactive{
	font-weight: bold;
	color: #666666;
	cursor: default;	
}

#LAYOUT-BREADCRUMBS {
	position: absolute;
	top: 110px;
	left: 250px;
	padding-left: 5px;
		
	text-align: left;
}

#LAYOUT-CONTENT {
   position: static;
	
	vertical-align: top;

   margin-top: 130px;
	margin-left: 240px;
	padding-left: 5px;

	background-color: transparent;
	background-image: none;
}

#LAYOUT-CONTENT-CENTRE {
   position: static;
	
	vertical-align: top;

   margin-top: 140px;
	margin-left: auto;
	margin-right: auto;

	background-color: transparent;
	background-image: none;
}


#LAYOUT-FOOTER {
   position: relative;
   margin-top:30px;
	margin-left: 240px;

	padding-top: 10px;
	padding-bottom: 3px;
	text-align: center;
	font-size: 8pt;
	color: gray;
	
	background-color: #FFFFFF;
	border-top: 1px solid #A7A7F9;
}

/***** display layout ****/

body div.DISPLAY-HEADER {
	width: 99%;
}

body div.DISPLAY-HEADER div.LOGO {
	text-align: left;
	vertical-align: middle;
	float: left;
}

body div.DISPLAY-HEADER div.TITLE {
	font-weight: bold;
	font-size: 16pt;
	color: #000066;
	
	text-align: left;
	vertical-align: middle;
}

body div.DISPLAY-CENTRE {
	float: left;
	width: 67%;
	margin-left: 5px;
}

body div.DISPLAY-RIGHT {
	margin-left: 70%;
	margin-right: 5px;
}

body div.DISPLAY-RIGHT h3 {
   color: #0099FF;
}


/***** popup box ****/
div.popup1 {
	display:none;
	position: absolute;
	top:0;
	left:0;
	width: 250px;
	border-style: solid;
	border-width: 1px;
	border-color: #0099FF;
	background-color: #C4E8FF;
	font-size: 8pt;
	z-index: 9999;
	padding: 5px;
	color: #000066;
	overflow: scroll;
}


/***** tables ****/
table.title {
   width: 99%;
}

table.title td{
   border-style: none;
   background-color: #000066;
   font-weight: bold;
   font-size: 16pt;
   font-family: Verdana, sans-serif;
   text-align: left;
   color: #FFFFFF;
}

table.invisible {
	width:99%;
   border-style: none;
   border-spacing: 0;
	text-align: left;
   }

table.invisible td {
	border-style: none;
	margin: 0;
   padding: 0;
   vertical-align: top;
}

table.standard {
	border-style: none;
	width: 99%;
   }

table.standard th {
	border-style: none;
	background-color: #B2E0FF;
	font-weight: normal;
	text-align: left;
	color: #000066
   }

table.standard td {
	border-style: none;
	vertical-align: top;
   }

table.tab {
	width: 99%;
	border-style: none;
}

table.tab th {
	background-color: #000066;
	text-align: center;
	font-weight: bold;
	font-size: 10pt;
	color: #FFFFFF;
	padding: 2px;
}

table.tab th.active {
	background-color: #B2E0FF;
	color: #000066;
}

table.tab th.end {
	width: 99%;
}

table.border th, td {
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	border-spacing: 0px;
	padding: 2px;
}

table.border th {
	font-weight: bold;
}