body{margin:0px auto;  text-align:center; background:#003399; width:974px; font-family:Verdana;font-size:11px;color:#5E5E5E; }
#maincontainer{width:974px; text-align:center; height:auto;}
.header{height:61px; text-align:center;}
#tabs{width:974px; height:23px; text-align:center;}
#tabs ul{margin:0px; padding:0px; list-style-type:none;}
#tabs li {float:left;}
#tabs li a{display:block; padding:0px; margin:0px; text-decoration:none; background:url(images/btn1.gif); width:121px; height:23px;}
#tabs li a.media{background:url(images/btn2.gif); width:160px; height:23px;}
#tabs li a.event{background:url(images/btn3.gif); width:160px; height:23px;}
#tabs li a.match{background:url(images/btn4.gif); width:160px; height:23px;}
#tabs li a.cate{background:url(images/btn5.gif); width:160px; height:23px;}
#tabs li a.moreinfo{background:url(images/btn6.gif); width:213px; height:23px;}
/*drop*/
#tabs div {position:absolute; visibility: hidden; width:150px; margin: 0px;padding:0px; background: #000000; z-index:100; }
#tabs div  a  {
	position: relative;
	display: block;
	margin: 0px;
	padding: 1px 10px 1px 20px;
	width:auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background:#000000;
	color:#CCCCCC;
	font: 11px arial;
	}
	
#tabs div  a:hover
	{
	background:#666666;
	color: #CCC;
	
}
/*drop*/


#midle-bg{width:974px; height:auto; background:url(images/middle-bg.gif) repeat-y left top; }
.content{ margin:20px 20px 10px 20px;}
.right-side{width:406px; height:100px; float:right; background:#666666; }
.caption{height:50px;}
.left-side{margin:15px 7px 10px 40px;}
h1{font-family:Arial, Helvetica, sans-serif; font-size:15px;  font-weight:600; color:#000000; padding:0px; margin:5px 0px 0px 0px;}
h1 span{font-family:Arial, Helvetica, sans-serif; font-size:15px;  font-weight:600; padding:0px; margin:5px 0px 0px 0px; color:#5D5D5D;}
#t-b{ border-top:2px solid #BFBEBE; border-bottom:2px solid #BFBEBE;} 
b{ color:#042E9E;}
.gap{line-height:22px; color:#5E5E5E; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:600;}
.para{left:60px; top:25px; position:relative;}
.para ul{line-height:22px; color:#5E5E5E; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:600;}
#location{ margin-top:30px; line-height:20px; color:#5E5E5E; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:600;}
strong{line-height:22px; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:13px; margin-top:28px; font-style:italic; }
h2{font-family:Arial, Helvetica, sans-serif; font-size:15px;  font-weight:600; color:#FFF; padding:0px; margin:5px 0px 0px 0px;}

/*scroll bar*/

div#wn	{ 
	position:relative;
	width:530px; height:400px; 
	overflow:hidden;	
	margin-top:25px;
	}
div.content { /* hide content to be swapped in */
	position:absolute; visibility:hidden;
	left:0px; top:0px; 
	width:480px;
	}
div#lyr1 { /* show first div */
    visibility:visible;
    }

/* Set small font-size or size/position of div's will be off in some browsers  */
div#scrollbar { 
  position:relative;
  width:11px; height:158px; 
  margin-top:35px;
  background:url(images/scroll-line.gif) no-repeat 55% 8%;
  /* font-size:1px;  img display block is the solution, but people remove it then ask for help! */
  }
#track {
		position:relative;
		width: 11px;
		height: 350px;
	}
div#dragBar {
  position:absolute; left:1px; top:1px;
  width:9px; height:20px;
    
  }  

#scroll_controls, #scrollbar { 
    display:block; /* initially display:none; to hide from incapable */
    }
div#scrollbar img {
    display:block; /* so no gap or misplacement due to image vertical alignment */
    } 
    
/* for safari, to prevent selection problem for clutzy draggers */
div#scrollbar, div#track, div#dragBar, div#up, div#down {
    -moz-user-select: none;
    -khtml-user-select: none;
}

/* scrollbars*/