/* --------------------------------------------/ 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-image:url(../new-images/bg.jpg);
	background-repeat:repeat-x;
	background-color:#05453e; 
	}
.menuhdr{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color : #B3B7BB;
	color : White;
	font-size : x-small;
	font-weight : bold;
	padding : 3px 5px;
	text-align : left;
}

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




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

	.box { position:relative; float:left; width:100px; height:100px; margin:10px; background-color:#000; overflow:hidden; }
	
	.top-box{ position:relative; float:left; left:5px; background-image:url(../new-images/top-content.jpg); width:795px; height:15px; background-repeat:no-repeat;}
	
	.middle-box{ position:relative; float:left; left:5px;  background-image:url(../new-images/middle-content.jpg); width:795px; }
	
		.shop-box{position:relative; float:left; color:#000033; margin:5px 5px 5px 5px; left:15px; width:752px; background-color:#EEE; border:1px solid #CCCCCC;}

		.middle-box h1{ color:#0000CC; font-size:20px; padding:0px 5px 0px 22px; margin-top:5px;}
		
		.middle-box h2{ color:#0066CC; font-size:14px; padding:5px 18px 5px 22px; margin-top:10px;}
h2.picheader { /* Heading style for headings with picture, e.g. shopcustomer.asp */
	background-position:1% 50%;
	background-repeat:no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight : bold;
	color:#333;
	font-size:12px;
	border-top:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	background-color:white;
	text-align:left;
	padding:10px 5px 10px 50px;
	margin:0px;
}
		
		.middle-box h3{ color:#0066CC; font-size:14px; padding-bottom:5px; margin-top:10px;}
		
		.middle-box h4{ color:#006633; font-size:12px; margin-bottom:10px;}
		
		.middle-box h5{ color:#333; font-size:11px; padding-left:22px;}
		
		.gray-box{position:relative; float:left; color:#000033; margin:15px 0px 0px 0px; left:22px; width:752px; background-color:#EEE; border:1px solid #CCCCCC;}
		
		
		.middle-box p{ color:#000033; font-size:11px; padding:0px 18px 10px 22px; margin-top:5px; line-height:16px;} 
		
		.restaurants-p{ color:#000033; font-size:11px; padding:0px 10px 10px 0px; margin-top:5px; line-height:16px; height:180px; width:400px; position:relative; float:left;}
		
		.middle-box ul{ color:#000033; font-size:11px; padding:0px 18px 0px 22px; margin-top:5px; line-height:16px;}
		.middle-box li{ color:#000033; font-size:12px; padding:0px 18px 0px 22px; margin-top:5px; line-height:16px;}
	
	.bottom-box{ position:relative; float:left; left:5px;  background-image:url(../new-images/bottom-content.jpg); width:795px; height:30px;}

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


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

	#container_header { width:100%; height:100%; margin-top:10px; }
		
		#header { 
		position:relative; 
		width:1004px;
		height:122px;
		margin:auto;
		background-image:url(../new-images/header2.jpg);
		 
		}
		
		#top-nav{position:relative; padding-top:6px; font-size:11px; font-weight:bold;  }
		
		#top-nav a{ color:#FFFFFF; text-decoration:none;}
		
		#top-nav a:hover{ text-decoration:underline;}
		
		#top-nav li{display:inline;}

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


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

#container_nav { width:100%; height:100%; }
	
	#nav { 
	position:relative;
	width:1004px;
	height:40px;
	margin:auto;
	}
	
		#nav li { position:relative; float:left;  }
		
		#nav ul { position:relative; float:left; top: 39px;  }

		/*  
		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 { display:block; font-weight:bold; font-size:14px; width:107px; height:19px; text-align:center; text-decoration:none; color:#003399;  }
		
		#nav a:hover { color:#FFFFFF;}

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

/* --------------------------------------------/ dropdown \-------------------------------------------- */		



/* ######### Style for Drop Down Menu ######### */

	.dropmenudiv{
		position:absolute;
		top: 0;
		border: 1px solid #BBB; /*THEME CHANGE HERE*/
		border-bottom-width: 0;
		font:normal 12px Verdana;
		line-height:18px;
		z-index:500;
		background-color:#5b83be;
		width: 200px;
		visibility: hidden;
		/*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); Add Shadow in IE. Remove if desired*/
		}
		
		
	.dropmenudiv a{
		width: auto;
		display: block;
		text-indent: 3px;
		border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
		padding: 2px 0;
		text-decoration: none;
		color:#fff;
		}
		
	* html .dropmenudiv a{ /*IE only hack*/
		width: 100%;
		}
		
	.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
	 	background-color:#0066CC;
		}


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

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

#container_content { width:100%; }

	#content { 
		position:relative;  
		width:1004px;
		height:100%;
		margin:auto;
		background-image:url(../new-images/body-bg.jpg); 
		}

		#top-shadow { 
		position:relative; 
		float:left; 
		width:1004px; /* (#content width) - (2 * (#middle-content padding) */
		height:11px;
		margin:auto;
		background-image:url(../new-images/shadow.jpg);
		background-repeat:no-repeat;
		}
		
		#left-content { 
		position:relative; 
		float:left; 
		width:620px; /* (#content width) - (2 * (#middle-content padding) */
		height:100%;
		margin:auto;
		}

		#right-content { 
		position:relative; 
		float:left;
		width:382px; /* (#content width) - (2 * (#middle-content padding) */
		height:100%;
		margin:auto;
		}
		
		#sub-left-content { 
		position:relative; 
		float:left; 
		width:190px; /* (#content width) - (2 * (#middle-content padding) */
		height:100%;
		margin:auto;
		}
		
		#sub-content-left{ position:relative; float:left; width:190px; left:5px; height:100%; }
	
		#sub-content-left h2{ font-size:14px;  margin:15px 10px 0 6px;}
		
		#sub-content-left ul{ position:relative; font-size:11px; margin-top:5px; left:18px;}
		
		#sub-content-left li{ }
		
		#left-nav{ width:156px; font-size:13px; height:20px; border-bottom:1px solid #FFFFFF; background-color:#003366; text-align:center; padding-top:3px; font-weight:bold;}
		
		#sub-content-left a{ display:block; color:#FFFFFF; width:154px; height:17px; border-right:1px solid #FFFFFF; border-left:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; text-align:center; text-decoration:none; padding-top:3px; font-weight:bold;}
		
		#sub-content-left a:hover{ background-color:#00CC00;}

		#sub-right-content { 
		position:relative; 
		float:left;
		width:804px; /* (#content width) - (2 * (#middle-content padding) */
		height:100%;
		margin:auto;
		}
		
			

			.min-holder { float:left; width:1px; height:600px;  }
	
			.clear {clear:both; height:1px; overflow:hidden; background-image:url(../new-images/footer.gif); }

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




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

#container_footer { clear:both; width:100%; height:100%; }
	
	#footer { 
	position:relative; 
	width:1004px;
	height:42px;
	margin:auto;
	background-image:url(../new-images/footer.gif);
	color:#CCC;
	}

		#footer ul { position:relative; float:left; margin-top:12px; left:10px; }

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

		

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

		/*  
		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 
		*/

		#footer a { font-weight:bold; font-size:12px; height:19px; padding:5px 25px;  text-align:center; text-decoration:none; color:#003399;  }
		
		

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




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

#container_jseLink { width:100%; height:100%; }
	
	#jseLink { 
	position:relative; 
	width:1000px;
	height:40px;
	margin:auto;
	margin-top:5px;
	margin-bottom:20px; 
	}
	
	#jseLink ul { position:relative; float:left;}

		#jseLink li { position:relative; float:left; margin-left:10px; }
		
		#jseLink a{ color:#FFFFFF;}
	
		

/* --------------------------------------------*/
		
			
		#right-content-bottom { 
		position:relative; 
		float:left;
		width:730px;
		height:100%;
		margin:auto;
		left:30px;
		background-color:#FFF;
 }
		
			#right-content-bottom h2 { border:1px solid #F0F0F0; font-family:"Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, sans-serif; width:725px; margin:20px 0 5px 0; color:#666; font-size:16px; background-color:#F5F5F5; padding-bottom:10px; padding-top:10px; padding-left:10px; }

			#right-content-bottom .blog-container { border-bottom:1px solid #DDD; height:158px; width:715px; margin-bottom:10px; margin-top:20px; }

				#right-content-bottom .blog-container  h3 { font-size:12px; text-align:center; margin-top:3px; color:#888; }

				#right-content-bottom .blog-container  h4 { font-size:24px; text-align:center; margin-top:1px; color:#999999;  margin-bottom:0px; }

			#right-content-bottom .blog-date { position:relative; float:left; height:100%; width:80px;  }

			#right-content-bottom .blog-entry-container { position:relative; float:left; height:100%; width:624px; }

				#right-content-bottom .blog-entry { position:relative; float:left; left:14px; height:100%; width:624px;  }

					#right-content-bottom .blog-entry a { color:#436fbf;  }

					#right-content-bottom .blog-entry .blog-text { height:99px; overflow:hidden; font-family:Verdana, Arial, sans-serif; font-size:.9em; line-height:16px; }

					#right-content-bottom .blog-text { margin-top:10px; margin-bottom:5px; }

					 a.blog-title, a.blog-title:visited { width:430px; font-weight:bold; font-size:12px; display:inline;  font-family:Verdana, Arial, sans-serif; color:#436fbf; }



			.blog-individual-container { width:529px; height:100%; margin-bottom:10px; margin-top:20px; }

			.blog-individual-entry { position:relative; float:left; left:10px; height:100%; width:509px;  }

				.blog-individual-entry a { color:#436fbf;  }

			.blog-individual-title { font-weight:bold; font-size:14px; display:block; margin-bottom:10px; font-family:Verdana, Arial, sans-serif; color:#436fbf; }

			.blog-individual-text { font-family:Verdana, Arial, sans-serif; font-size:.9em; line-height:16px; margin-bottom:10px; border-bottom:1px solid #EEE; padding-bottom:20px; }