/* Home CSS Document */

#top{
  float: left;
  width: 752px;
  height: 242px;
  margin: 0px 0px 5px 0px;
  padding: 4px;
/*  background: url(../images/css/background_top.jpg) no-repeat;*/
  background: #fff;
  position: relative;
}

#home_images{
  width: 500px;
  height: 242px;
	float: left;
}

#welcome{
  float: left;
  width: 245px;
	height: 148px;
	padding: 82px 5px 20px 110px;
	text-align: right;
	color: white;
	background: url(../images/css/background_welcome.png) no-repeat scroll top right;
	z-index: 9999;
	position: absolute;
	right: 0;
	top: 0;
}

#welcome .scroll{
  width: 235px;
  padding: 0px 12px 0px 0px;
  height: 167px;
	overflow: auto;
}

#features{
  float: left;
  width: 492px;
  height: 242px;
  border: 4px solid white;
  background: url(../images/css/background_features.jpg) no-repeat;
}

#recent_programs{
  /*
	float: right;
  width: 239px;
  height: 209px;
  border: 4px solid white;
  padding: 33px 0px 0px 7px;
  background: url(../images/css/background_recent_programs.jpg) no-repeat;
	*/
	margin: 0px 0px 0px 5px;
	display: inline;
	float: left;
	padding: 32px 0px 0px;
	width: 247px;
	height: 210px;
	background: url(../images/css/background_recent_programs.jpg) no-repeat;
	border: 4px solid white;
}

#recent_programs .container{
  float: left;
  width: 232px;
  height: 102px;
  margin: 0px 0px 2px 0px;
  overflow: auto;
}

#recent_programs .container div {
	padding: 0 0 0 10px;
}

#recent_programs .container .name,
#recent_programs .container .name a{
  float: left;
  width: 90%;
  font: bold 16px "Times New Roman", Times, serif;
  color: white;
  padding: 2px 0px 0px 5px;
  clear: both;
}

#recent_programs .container .date{
  float: left;
  font: 10px Verdana, Arial, Helvetica, sans-serif;
  color: #60C4FF;
  margin: 0px 5px 0px 0px;
}

#recent_programs .container .author{
  float: left;
  font: bold 10px Verdana, Arial, Helvetica, sans-serif;
  color: #60C4FF;
}

#recent_programs .container .intro{
  float: left;
  width: 90%;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
  color: #DFDFDF;
  line-height: 14px;
  margin: 2px 0px 0px;
  clear: both;
}


/* UNIVERSAL LIST STYLES FOR FEATURES */

#features {
	padding: 0;
    float: left;
	position: relative;
}

#features.features {
    display: block;
    overflow: hidden;
	padding: 0;
    float: left;
}

#features.features ul {
	clear: both;
	list-style: none;
    margin: 0;
	padding: 0;
	position: absolute;
}

#features.features li {
    list-style: none;
}


/* MAIN FEATURES AREA AND INDIVIDUAL FEATURES */
#features.features ul.main li {
    display: none;
    margin: 37px 0 0 5px;
    padding: 0;
    position: absolute;
    visibility: visible;
    z-index: 1;
	border: none;
	height: 200px;
	width: 482px;
}

#features.features .main,
#features.features .feature {
	margin: 0;
	overflow:hidden;
	padding: 0;
	z-index: 1;
	float: left;
}

#features.features ul.main li.shown {
    z-index: 2;
    visibility: visible;
    position: relative;
}

#features.features ul.main li.shown a {
    z-index: 99;
}

#features .feature img {
	position:absolute;
	width: 192px;
    height: 192px;
	border: 4px solid white;
}

#features .feature div {
    color: #000;
    height: auto;
    padding: 10px;
	width: 258px;
	float: right;
}

#features .feature h2 {
	font: normal 16px "Times New Roman",Times,serif;
	background: url(../images/css/background_sidenav_divider2.png) repeat-x scroll bottom left transparent;
	margin: -3px 0 10px;
	padding: 0 0 10px;
	color: #004473;
}

#features .feature p {
    margin: 0;
    padding: 0;
}

#features .feature div.image {
	border: none;
}

a.readmore {
	background: url(../images/css/background_more.png) no-repeat scroll top left;
	display: block;
	width: 142px;
	height: 22px;
	text-indent: -9999px;
	overflow: hidden;
	margin: 15px 0 0;
}

/* PREVIOUS NEXT CONTROLS */
.pnControl {
	display: block;
	margin: 326px 3px 0;
	position: absolute;
	width: 414px;
	z-index: 100;
}

.pnControl a {
	display: block;
	float: left;
    text-indent: -9999px;
    overflow: hidden;
	height: 22px;
	width: 22px;
	z-index: 100;
}

#features.features ul.count {
	right: 7px;
	top: 5px;
}

#features.features ul.count li {
	float: left;
	background: url(../images/css/inactive.png) no-repeat scroll top left;
	width: 19px;
	height: 20px;
	display: block;
	text-align: center;
	margin: 0 0 0 4px;
}

#features.features ul.count li.shown {
	background: url(../images/css/active.png) no-repeat scroll top left;
}

#features.features ul.count li a {
	color: #fff;
	display: block;
	width: 19px;
	height: 20px;
	padding: 2px 0 0;
	position: relative;
	z-index: 99999;
	font-weight: normal;
}
.count li a:hover {
	text-decoration: none;
}

/* PAUSE PLAY CONTROLS */
.pbControl {
	color: #000;
	position: absolute;
	z-index: 101;
    display: none;
}