/* --------------------------------------------/ UNIVERSAL CLASSES \-------------------------------------------- */

/* --------------------------------------------*/




/* --------------------------------------------/ BROWSER INITIALIZATION \-------------------------------------------- */

	* { margin : 0; padding : 0; }
	h1,h2,h3,h4,h5,h6 { font-size : 100%; }
	ol,ul { list-style : none; }
	table { border-collapse : collapse; border-spacing : 0; }
	fieldset,img { border : 0; }
	caption,th { text-align : left; }
	
	body { 
	text-align:left; 
	color:#FFF; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; 
	background-color:#FFF; 
	}

/* --------------------------------------------*/




/* --------------------------------------------/ BOX MODEL CLASS \-------------------------------------------- */

	


	.box { position:relative; float:left; width:243px; height:226px; margin:10px 1px 0px 0px; overflow:hidden; }
	
	.box h1 { text-align:center; color:#2f55a2; font-size:16px; padding-top:10px;}
	
	.box h2 { position:relative; float:right; text-align:right; color:#043222; font-size:14px; padding-top:10px;}
	
	.box p { text-align:center;  font-size:12px; padding:10px 20px;}
	
	.box a { color:#777; text-decoration:none; }
	
	.box a:hover {color:#000;}
	
	.box img { padding-left:9px;}
	
	
/* --------------------------------------------*/


/* --------------------------------------------/ HEADER \-------------------------------------------- */

	#container_header { width:100%; height:100%;}
		
		#header { 
		position:relative; 
		width:992px;
		height:201px;
		margin:auto;
		background-image:url(../images/header.jpg); 
		}

/* --------------------------------------------*/


/* --------------------------------------------/ NAV \-------------------------------------------- */

#container_nav { width:100%; height:100%; }
	
	#nav { 
	position:relative;
	width:992px;
	height:50px;
	margin:auto;
	top:90px;
	}
	
		#nav li { position:relative; float:left;   }

		/*  
		To Find "#nav a width" :
			Step 1 - change the "#nav a padding" so that the menu item covers the entire nav area from top to bottom.
			Step 2 - compute the "#nav a width" with the equation below  
			
			  ((#nav width) / (# of menu items)) - (2 * (#nav a padding)) = #nav a width 
			  (    800      /         6        ) - (2 *        13       ) = 107.333 = 107 
		*/

		#nav a { }

		#nav a:hover { color:#fff; }
		
	#nav-top { 
	position:relative;
	width:992px;
	height:50px;
	margin:auto;
	top:10px;
	}
	
		#nav-top li { position:relative; float:left; margin-left:5px;  }

		/*  
		To Find "#nav a width" :
			Step 1 - change the "#nav a padding" so that the menu item covers the entire nav area from top to bottom.
			Step 2 - compute the "#nav a width" with the equation below  
			
			  ((#nav width) / (# of menu items)) - (2 * (#nav a padding)) = #nav a width 
			  (    800      /         6        ) - (2 *        13       ) = 107.333 = 107 
		*/

		#nav-top a { color:#fff; text-decoration:none; }

		#nav-top a:hover { color:#ccc; }

/* --------------------------------------------*/

 
/* --------------------------------------------/ CONTENT \-------------------------------------------- */

#container_content { width:100%; }

	#content { 
		position:relative;  
		width:992px;
		margin:auto;
		background-image:url(../images/content-bg.jpg);
		background-color:#fdd468;
		background-repeat:no-repeat;

		}

		#left-content { 
		position:relative; 
		float:left; 
		width:619px; /* (#content width) - (2 * (#middle-content padding) */
		height:440px;
		margin:auto;
		margin-top:3px;
		background-image:url(../images/left-top.jpg); 
		}

		#right-content { 
		position:relative; 
		float:left;
		width:373px; /* (#content width) - (2 * (#middle-content padding) */
		height:440px;
		margin:auto;
		margin-top:3px;
		background-image:url(../images/right-top.jpg);
		}
		
		#left-content-sub { 
		position:relative; 
		float:left; 
		width:600px; /* (#content width) - (2 * (#middle-content padding) */
		margin:auto;
		margin-top:3px; 
		}

		#right-content-sub { 
		position:relative; 
		float:left;
		width:392px; /* (#content width) - (2 * (#middle-content padding) */
		margin:auto;
		margin-top:3px;
		}
		
		#left-content-sub1 { 
		position:relative; 
		float:left; 
		width:650px; /* (#content width) - (2 * (#middle-content padding) */
		margin:auto;
		margin-top:3px; 
		}

		#right-content-sub1 { 
		position:relative; 
		float:left;
		width:342px; /* (#content width) - (2 * (#middle-content padding) */
		margin:auto;
		margin-top:3px;
		}
		
		#left-content-contact { 
		position:relative; 
		float:left; 
		width:419px; /* (#content width) - (2 * (#middle-content padding) */
		margin:auto;
		margin-top:3px; 
		}

		#right-content-contact { 
		position:relative; 
		float:left;
		width:573px; /* (#content width) - (2 * (#middle-content padding) */
		margin:auto;
		margin-top:3px;
		}
		
		#middle-content{ 
		position:relative; 
		float:left; 
		width:932px; /* (#content width) - (2 * (#middle-content padding) */
		margin:auto;
		margin-top:3px;
		padding-left:30px;
		padding-right:30px; 
		}
		
		#above-bottom{ 
		position:relative;
		float:left;  
		width:992px;
		height:40px;
		margin:auto;
		background-image:url(../images/above-bg.jpg); 
		}
			
			#above-bottom h6{ padding:10px 25px 0 25px; font-size:14px;}
		
		#bottom-content { 
		position:relative;
		float:left;  
		width:992px;
		height:250px;
		margin:auto;
		background-image:url(../images/bottom-content.jpg); 
		}
		
		#do-right-top{ position:relative; float:left; height:41px; width:253px; background-image:url(../images/do-right-top.gif);}
	
		#do-right-middle{ position:relative; float:left; width:253px; background-image:url(../images/do-right-middle.gif);}
		
		#do-right-middle ul{ position:relative; }
		
		#do-right-middle li{ width:253px; }
		
		#do-right-middle a{ font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center; margin-left:10px; text-decoration:none; padding:10px 0; display:block; width:233px; }
		
		#do-right-middle a:hover{ background-color:#3b5c9e; }
		
		#do-right-bottom{ position:relative; float:left; height:18px; width:253px; background-image:url(../images/do-right-bottom.gif);}
		
		#do-holder{ position:relative; float:left; margin:55px 0 0 0; left:50px;}
		
		#left-content-sub h1{ color:#FFF; font-size:16px; margin:40px 0 0 30px; border-bottom:1px solid #fff; width:550px; padding-bottom:4px}
	
		#left-content-sub h2{ color:#000; font-size:14px; margin:20px 0 0 30px;}
		
		#left-content-sub a{ color:#222;}
	
		#left-content-sub a:hover{ color:#2e55a2;}
		
		#left-content-sub img{ border:2px solid #000;}
		
		#left-content-sub1 h1{ color:#FFF; font-size:16px; margin:40px 0 0 30px; border-bottom:1px solid #fff; width:550px; padding-bottom:4px}
	
		#left-content-sub1 h2{ color:#000; font-size:14px; margin:20px 0 0 30px;}
		
		#left-content-sub1 a{ color:#222;}
	
		#left-content-sub1 a:hover{ color:#2e55a2;}
		
		#left-content-sub1 img{ border:2px solid #000;}
		
		
		

			
			
			.min-holder { float:left; width:1px; height:360px;  }
			
			.min-holder-sub { float:left; width:1px; height:570px;  }
	
			.clear {clear:both; height:1px; overflow:hidden;}

/* --------------------------------------------*/




/* --------------------------------------------/ FOOTER \-------------------------------------------- */

#container_footer { clear:both; width:100%; height:100%; }
	
	#footer { 
	position:relative; 
	width:992px;
	height:49px;
	margin:auto;
	background-image:url(../images/footer-bg.jpg);
	color:#CCC; 
	}

		#footer ul { position:relative; float:right; margin-top:18px; right:20px; }

		#footer li { position:relative; float:left; margin-left:10px; }

		#footer a { text-decoration:none; color:#CCC; }

		#footer a:hover { color:#FFF; }

/* --------------------------------------------*/




/* --------------------------------------------/ JSE LINK \-------------------------------------------- */

#container_jseLink { width:100%; height:100%; }
	
	#jseLink { 
	position:relative; 
	width:600px;
	height:40px;
	margin:auto;
	margin-top:20px;
	margin-bottom:20px; 
	}
	
		#RLInk1 { display:block; height:40px; padding:5px 0 0 311px; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; font-size:10px;
			color:#111; background-image:url(../images/jseLink-black.gif); }
		 /* color:#FFF; background-image:url(../images/jseLink-white.gif); } */

		#RLInk2 { display:block; display:none; width:235px; position:absolute; top:0px; left:0px; padding:5px 0 0 365px; height:40px; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; font-size:12px;
			color:#111; background-image:url(../images/jseLink-black-over.gif); }
		 /* color:#FFF; background-image:url(../images/jseLink-white-over.gif); } */


/* --------------------------------------------*/



	#EventContainer
	{	
	position:relative;
	margin:auto;
	clear:both;
	width:930px;
	text-align:center;
	padding-bottom:20px;	
	}	

	#EventSubContainer
	{
	position:relative;	
	width:930px;
	border:none;
	}
	

	#calnav { 
	position:relative; 
	color:#FFFF00; 
	width:100%;
	text-align:center;
	}

		#calnav ul { position:relative; width:912px; margin-top:15px; background-color:#2e55a2;}
		#calnav li { position:relative; float:left;}
		#calnav li a {color:#FFF; display:block; float:left; height:30px; padding:10px 20px; font-weight:bold; }
		#calnav li a:hover { background-color:#000066;}		
		#calnav a { text-decoration:none; color:#FFF; }
		#calnav a:link {color: #FFF;}
		#calnav a:visited {color: #FFF}
		#calnav a:hover {color: #FFF}
		#calnav a:active {color: #FFF; background-color:#000066;}

	#EventBox  { 
	clear:both;
	float:none;
	width:912px;
	padding-top:20px;
	padding-bottom:20px;
	color:#000000;
	border-bottom:#fff solid 1px;
	  }
	  
	#EventBox  h3{ color:#000066; font-size:20px; text-align:right; padding:0 20px; }
	#EventBox  h4{ color:#fff; font-size:13px; text-align:right; padding:0 20px; }
	#EventBox  h5{ color:#000; font-size:11px; text-align:right; padding:5px 20px; }
	#EventDate  {   }
	#EventImage img{ position:relative; float:left; margin:0 20px 20px 20px;}
	#EventBox  p{ color:#000; font-size:11px; text-align:right; padding:5px 20px; line-height:18px; }
	
	#catnav { 
	position:relative; 
	color:#FFFF00; 
	width:912px;
	text-align:center;
	}

		#catnav ul { background-color:#000066; height:25px;}
		#catnav li { float:left;}
		#catnav li a {color:#fff; display:block;  height:20px; text-align:center; padding-top:5px; padding-left:15px; padding-right:15px;}
		#catnav li a:hover { background-color:#fff; color:#000;}		
		#catnav a { text-decoration:none; color:#FFF; }
		#catnav a:link {color: #FFF;}
		#catnav a:visited {color: #FFF;}
		#catnav a:hover {color: #000; background-color:#FFFFFF;}
		#catnav a:active {color: #000; background-color:#FFFFFF;}