/* This is the main body configuration */

body {
	background-color: #ccc;
	color: #0000cc;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.9em;}

	
	
	
	/* This the whole page layout */

#container 	{
				background-color:#fff;
				margin: 5px auto;
				line-height: 1.25em;
				}
				
				
	
	/* This is the header section*/

#header 		{
				padding: .5em;
				}
	
#header h1 	{
				font-size:1.2em;
				color:#0000cc;
				text-align:center;
				}
	
				
	
#header img	{
				display: block;
				margin-left: auto;
				margin-right: auto
				}
	
	
#header p		{font-family: Verdana, Helvetica, Arial, sans-serif;
				font-size: .5em;
				font-weight:bolder;
				color:#0000cc;
				text-align:center;
				}
	

/* This is the very exciting top menu layout section*/

#centeredmenu 		{
  						float:left;
  						width:100%;
   						background:#fff;
   						border-bottom:4px solid #0000cc;
   						overflow:hidden;
   						position:relative;
						}
						
#centeredmenu ul 		{
   						clear:left;
   						float:left;
   						list-style:none;
   						margin:0;
   						padding:0;
   						position:relative;
   						left:50%;
   						text-align:center;
						}


#centeredmenu ul li 		{
						display:block;
						float:left;
						list-style:none;
						margin:0;
						padding:0;
						position:relative;
						right:50%;
						font-size: 1em;
						font-weight:bold;
						}
						
						
#centeredmenu ul li a 		{
						display:block;
						margin:0 0 0 2px;
						padding:3px 10px;
						color:#fff;
						background:#0000cc;
						text-decoration:none;
						line-height:1.3em;
						}
						
						
						
#centeredmenu ul li a:hover 	{
							color:#ff0000;
							}
							
							
							
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover 	{
									color:#fff;
									background:#000;
									font-weight:bold;
									}



	
	/* This is the main content element and includes all decorative formatting*/

#content 			{
					padding: 1em;
					border-style:solid;
					border-color:#000;
					border-width:2px;
					}




#content h1 	{
				font-family: Verdana, Helvetica, Arial, sans-serif;
				font-size: 1.6em;
				color: #ff0000;
				line-height: 1.6em;
				text-align: center;
				}
				
			

#content h2		{
				font-family: Verdana, Helvetica, Arial, sans-serif;
				font-size:1.4em;
				color: #0000cc;
				line-height: 1.2em;
				text-align: center;
				}	


#content h3		{
				font-size:1.2em;
				font-weight:bolder;
				color:#ff0000;
				}


#content h3.centered		{
				font-size:1.2em;
				font-weight:bolder;
				color:#ff0000;
				text-align:center;
				}



#content h4 	{
				clear:both;
				font-size:1em;
				text-align: center;
				font-weight:bolder;
				color:#ff0000;
				}


#content h5 	{
				font-size:1em;
				font-weight:bolder;
				}



#frontpage	{background-color:#fff;
					margin: 5px auto;
					line-height: 1.25em;
					}



.advert			{
				font-size: 1.1em;
				font-weight:bold;
				color:#0000CC;
				text-align:center;
				padding:15px;
				margin-left:15%;
				margin-right:15%;
				border-style:double;
				border-color:#ff0000;
				border-width:5px;
				}


				
				
				

a.top:link, a.top:visited 	{
							color:#0000ff;
							float: right;
							margin-top: 1.5em;
							}


a.page:link, a.page:visited		{
								color:#0000ff;
								}



a.pagenav:link, a.pagenav:visited
									{
									font-size:.8em;
									font-weight:bold;
									color: #ff0000;
									float:right;
									text-decoration: none;
									}

a.pagenav:hover, a.pagenav:active
									{
									color: #00ff00;
									background:#1E90FF;
									}





.imgcenter		{
				display:block;
				margin:0 auto;
				text-align:center;
				}

.imageleft		{
				clear:both;
				float:left;
				margin: 0 15px 15px 0;	
				}
				
.imageright		{
				clear:both;
				 float:right; margin: 0 0 15px 15px; }
		


.imagealignleft		{
					float:left;
					margin: 0 15px 15px 0;	
					}
				
.imagealignright
					{
					float:right;
					margin: 0 0 15px 15px; 
					}


	

.frame 			{padding: 5px;
				 border: 1px solid #aaa;
				  } 


.caption_image_right	{
						text-align:right;
						}



.caption_image_left		{
						text-align:left;
						}




.contact		{
				font-size:100%;
				font-family:Arial, Helvetica, sans-serif;
				font-weight:bold;
				color:#0000CC;
				margin-right:2em;
				}
				
				
.contact.fax	{
				font-size:100%;
				font-family:Arial, Helvetica, sans-serif;
				font-weight:bold;
				color:#0000cc;
				margin-right:5em;
				}				

.contact.phone		{
				font-size:100%;
				font-family:Arial, Helvetica, sans-serif;
				font-weight:bold;
				color:#0000CC;
				margin-right:4em;
				}


.contact.email, .contact.online, .contact.postal	{
				font-size:100%;
				font-family:Arial, Helvetica, sans-serif;
				font-weight:bold;
				color:#0000CC;
				margin-right:4em;
				}






	
/* This is to emphasis the first line only of a paragraph, 
put a line break after the emphasesed text*/

	
.first line emphasis	{
					font-size:100%;
					font-family:Arial, Helvetica, sans-serif;
					font-weight:bold;
					color:#0000CC
					}

		
		
p.centered		{
				text-align:center;
				font-size:100%;
				font-family:Arial, Helvetica, sans-serif;
				color:#0000CC
				}
	
			
				
p.indent		{
				margin-left:10%;
				}		





p.padding {
			padding:25px 25px;
			border-style:solid;
			border-width:5px;
			}

p.red		{
			color:#ff0000;
			text-align:center;
			}


p.red_left 	{
			color:#ff0000;
			text-align:left;
			margin-bottom:-1em;
			}



p.guidance	{text-align:center;
			}


p.emphasise	{
			font-weight:bold;
			padding: 0;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0.5em;
			margin-left: 0;
			}

p.navigation	{
				text-align:center;
				}





dt 			{
    		font-size: 1.2em;
			}
			
dd			{
			margin-bottom:1.5em; 
			}


ul.padding	{
			padding:25px 25px;
			border-style:solid;
			border-width:5px;
			}

		
ol li 		{line-height: 1.5em;
			}
		
ul li		{
			line-height: 1.5em;
			}
			
		
ul.nobullets { 
			list-style-type: none;
			}
			


			
#column_left		{
					float: left;
					width: 40%;
					margin: 0;
					padding: 1em;
					}
			
#column_right		{
					margin-left: 40%;
					padding:1em;
					max-width: 36em;
					}		
	


#column_left li {color:#f00;
							}
		
			
#column_left ul  		{ 
					list-style-type: none; 
					}

					
#column_right ul 		{
					list-style-type: none;
					}		
			

	
	
	
/* This is the footer layout*/

#footer 				{
					clear: both;
					margin: 0em;
					padding: 1em 0em 2em;
					border-top: 1px #ff0000 solid;
					}


#footer p			 {
					font-family: Verdana, Helvetica, Arial, sans-serif;
					font-size: 0.8em;
					color: #0000cc;
					padding:0em;
					text-align: center;
					}


#footer h1			{
					font-family: Verdana, Helvetica, Arial, sans-serif;
					font-size:1.8em;
					color:#000;
					text-align:center;
					}

	

#footer ul 			{

					list-style-type:none;
					margin: 0em;
					padding: 0em;
					font-family: Verdana, Helvetica, Arial, sans-serif;
					font-size: .6em;
					font-weight: bolder;
					text-decoration: none;
					text-align: center;
					}

#footer li 			{
					display: inline;
					list-style-type: none;
					padding-right: 20px;
					}



#footer li a:visited		{
						color:#0000cc;
						}


				
				
.emailfooter	 		a:visited		{
						color:#0000cc;
						}


/* The box table class lets us better present tabular data*/

.box-table			{
					margin: 5%;
					width: 90%;
					text-align: left;
					border-collapse: collapse;
					}
					

.box-table caption  	{
						font-size: 1.2em;
						color:#00c;
						text-align: left;
						padding: 0.5em 0;
						}


.box-table th
					{
					font-size: 1em;
					padding:0.5em;
					font-weight: bold;
					padding: 8px;
					/*background: #b9c9fe;*/
					border-top: 2px solid #ff0000;
					border-bottom: 1px solid #fff;
					}
					
					
.box-table td		{
					padding: 0.5em;
					background: #e8edff; 
					border-bottom: 1px solid #fff;
					color: #0000cc;
					border-top: 1px solid transparent;
					vertical-align: top;
					text-align: left
					}
					
					
.box-table tr:hover td			{
								background: #d0dafd;
								color: #339;
								}


.box-table ul		{
					list-style-type:none
					}		
  	
						
						
						
						


.imagefloat
{
position:absolute;
left:10%;
top:50%;
z-index:-1
}


/* table division to allow formatting of course table */


#tabcourse		{ 
				}


#mytable {
	width: 95%;
	padding: 3em;
	margin: 1em;
	
}

#tabcourse caption 		{
						padding: 0 0 5px 0;
						font-family: Verdana, Helvetica, Arial, sans-serif;
	 					font-size: 1.5em;
	 					text-align: right;
						}

#tabcourse td 			{
						border-right: 1px solid #C1DAD7;
						border-bottom: 1px solid #C1DAD7;
						background: #fff;
						padding: 3px 3px 3px 6px;
						color: #4f6b72;
						width:5%;
						}


#tabcourse td.alt	{background:#f5fafa;
					color:#4f6b72;
					width:5%;
					}




#tabcourse td.date	{
		background:#cccccc;
		color:#f00;
		font-size:1.2em;
		border:1px solid #0000cc;
		width:5%;
		
		}



#tabcourse th 		{
					font-family: Verdana, Helvetica, Arial, sans-serif;
					color: #0000cc;
					border-right: 1px solid #C1DAD7;
					border-bottom: 1px solid #C1DAD7;
					border-top: 1px solid #C1DAD7;
					text-align: left;
					padding: 3px 3px 3px 6px;
					background: #CAE8EA;
					height:4em;
					width:5%;
					}



#tabcourse th.nobg 	{
					width:21%;
					height:4em;
					border-top: 0;
					border-left: 0;
					border-right: 1px solid #C1DAD7;
					background: none;
					}



#tabcourse th.spec {
					width:21%;
					height:4em;
					border-left: 1px solid #C1DAD7;
					border-top: 0;
					background: #fff;
					font-family: Verdana, Helvetica, Arial, sans-serif;
					font-size:0.9em;
					}
					
					

#tabcourse th.specalt {
						width:21%;
						height:4em;
						border-left: 1px solid #C1DAD7;
						border-top: 0;
						background: #f5fafa;
						font-family: Verdana, Helvetica, Arial, sans-serif;
						font-size:0.9em;
						}
						
						
						
						
						
a.button 	{
    		/* 	Sliding right image */
    			background: transparent url('images/button_right_06a.png') no-repeat scroll top right; 
				display: block;
				float: left;
				height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
				margin-right: 6px;
				padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
				
				/* FONT PROPERTIES */
				text-decoration: none;
				color: #ffffff;
				font-family: Arial, Helvetica, sans-serif;
				font-size:1.1em;
				font-weight:bold;
				text-align:center;


								}
								
								
a.button span 	{
				/* Background left image */ 
				background: transparent url('images/button_left_06a.png') no-repeat; 
				display: block;
				line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
				padding: 7px 0 5px 18px;
				} 
				
				
a.button:hover span	{
					text-decoration:underline;
					color:#ff0000;
					}
					
					

/* a division to allow centered hover buttons on pages */

				
#pagebuttons 		{
  						float:left;
  						width:100%;
   						background:#fff;
   						overflow:hidden;
   						position:relative;
						}
						
#pagebuttons ul 		{
   						clear:left;
   						float:left;
   						list-style:none;
   						margin:0;
   						padding:0;
   						position:relative;
   						left:50%;
   						text-align:center;
						}


#pagebuttons ul li 		{
						display:block;
						float:left;
						list-style:none;
						margin:0;
						padding:0;
						position:relative;
						right:50%;
						font-size: 1em;
						font-weight:bold;
						}
						
						
#pagebuttons ul li a 		{
						display:block;
						margin:0 0 0 2px;
						padding:3px 10px;
						color:#fff;
						background:#0000cc;
						text-decoration:none;
						line-height:1.3em;
						}
						
						
						
#pagebuttons ul li a:hover 	{
							color:#ff0000;
							}
							
							
							
#pagebuttons ul li a.active,
#pagebuttons ul li a.active:hover 	{
									color:#fff;
									background:#000;
									font-weight:bold;
									}
									
									
/* Another table layout*/

.new-table			{
					width:95%;
					border-collapse: collapse;
					}


.new-table caption  	{
						font-size: 1em;
						color:#000;
						text-align: left;	
						}


					
					
.new-table tr		{
					border:1px solid #00c;
					}
					
					
.new-table td		{
					border:1px solid #00c;
					}
					
					
.new-table th		{
					font-size: 1em;
					color:#000;
					text-align: left;
					padding: 0.2em;
					border:1px solid #0000cc;
					}
					
					
					
					
/* Trial form using css and no tables*/


fieldset		{
				border:4px solid #666666;
				background-color:#cccccc;
				}
				
fieldset legend		{
					font-size: 1.4em;
					color:#f00;
					}
					
input:focus			{
					background-color: #ffffcc;
					color:#000000;S
					}