@charset "utf-8";
/* CSS Document */

body {
	background:url(../img/bg.gif) repeat-x #818181;
	margin:auto;
	font-family:Verdana, 'Arial', Helvetica, sans-serif;
	font-size:12px;
	}
	
img {
	border:0px;
	}

/*Logo Start*/
.logobg {
	background:url(../img/logo-bg.png) no-repeat;
	width:320px;
	height:215px;
	}
	
.logobg img {
	margin:77px 0 0 60px;
	}
	
	
/*Header ber Start*/
.header-bar-l {
	background:url(../img/header-bar-l.png) no-repeat;
	width:6px;
	height:29px;
	float:left;
	}
	
.header-bar-m {
	background:url(../img/header-bar-m.png) repeat-x;
	width:988px;
	height:29px;
	float:left;
	margin:0 0 0 12px;
	}
	
.header-bar-r {
	background:url(../img/header-bar-r.png) no-repeat;
	width:6px;
	height:29px;
	float:right;
	}

.header-button {
	margin:7px 0 0 25px;
	color: #666666;
	}

.header-button a {
	color:#ababab;
	text-decoration:none;
	margin:0 10px 0 10px;
	}

.header-button a:hover {
	color:#FFFFFF;
	}

.featured-album {
	height:180px; 
	margin:30px 0 0 12px;
	}


/*Main Body Start*/
.mainbody {
	background:#acc0c7;
	width:987px;
	height:auto;
	margin:2px 0 0 12px;
	}
	
.mainbody-footer {
	background:url(../img/mainbody-footer.png) no-repeat;
	height:9px;
	width:1002px;
	margin:0 0 15px 0;
	}

/*A-Z menu Start*/
.az-menu {
	background:#dfe5e6;
	border-bottom:1px solid #51626f;
	border-top:1px solid #51626f;
	height:22px;
	padding:5px 0 0 0;
	}

.az-menu a {
	padding:3px 6px 3px 5px;
	color:#51626f;
	text-decoration:none;
	font-size:14px;
	}
	
.az-menu a:hover {
	background:#005c84;
	color:#FFFFFF;
	}

.search {	
	float:right;
	margin:-2px 5px 0 0;
	}

.search-text {
	border:1px solid #3c3c3c;
	background:#acc0c7;
	}
	
.search-text:hover {
	background:#dce4e7;
	}
	
/*left menu*/
	
.left-menu {
	border-right:1px solid #8ca9b3;
	width:180px;
	float:left;
	padding:10px 5px 5px 10px;
	}

.text {
	width:480px;
	padding:10px 0 0 10px;
	float:left;
	}	

.right-menu {
	border-left:1px solid #8ca9b3;
	width:270px;
	float:right;
	padding:10px 5px 5px 10px;
	}
	
/*Footer Area*/

.footer-area-l {
	background: url(../img/footer-l.png) no-repeat;
	width:11px;
	height:106px;
	float:left;
	}
	
.footer-area-m {
	background: url(../img/footer-m.png) repeat-x;
	width:987px;
	height:106px;
	float:left;
	margin:0px 0px 15px 12px;
	}
	
.footer-area-r {
	background: url(../img/footer-r.png) no-repeat;
	width:10px;
	height:106px;
	float:right;
	}
	
.footer-area {
	padding:5px 0 3px 0;
	color:#FFFFFF;
	}

.footer-area h2 {
	font-size:14px;
	line-height:0px;
	}

.footer-area li {
	list-style-type: square;
	}


.footer-area a {
	color:#FFFFFF;
	text-decoration: none;
	}
	
.footer-area a:hover {
	text-decoration: underline;
	}

.footer-area-logo {
	width:200px;
	border-right:1px solid #001f35;
	float:left;
	padding-left:8px;
	}

.footer-area-resource {
	width:240px;
	border-right:1px solid #001f35;
	float:left;
	padding-left:8px;
	}
	

	
.footer {
	width:980px;
	float:left;
	margin:0 0 30px 12px;
	text-align:center;
	color:#333333;
	text-decoration:none;
	font-size:10px;
	}
	
.footer a {
	color:#333333;
	text-decoration:none;
	font-size:10px;
	}
	
.footer a:hover {
	color:#fff;
	}




	
/*Header Slid Show*/
	
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 980px; /*Width of Carousel Viewer itself*/
height: 175px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 10px -10px 10px; /*margin around each panel*/
width: 165px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}