﻿
/*=== SUBJECTS ===*/

#Subjects a {
	display: block;
	float: left;
	margin-bottom: 1px;
	width: 160px;
	height: 92px;
	}

#Subjects a:hover {
	background-position: left -92px;
	}

#Subjects .disaster {
	background: url(Images/Subjects/19.Link.gif);
	}

#Subjects .human {
	background: url(Images/Subjects/23.Link.gif);
	}

#Subjects .science {
	background: url(Images/Subjects/20.Link.gif);
	}

#Subjects .green {
	background: url(Images/Subjects/24.Link.gif);
	}

#Subjects .engineering {
	background: url(Images/Subjects/21.Link.gif);
	margin-bottom: 0;
	}

#Subjects .history {
	background: url(Images/Subjects/22.Link.gif);
	margin-bottom: 0;
	}
#SubjectsModule{
	border-bottom: solid 1px #ffd300;
}
#SubjectsModule a
{
	display: block;
	float: left;
	margin-right: 1px;
	width: 80px;
	height:88px;
}
#SubjectsModule a:hover
{
	background-position: left -88px;
}
#SubjectsModule .disaster
{
	background: url(Images/Subjects/Module/1.jpg);
}
#SubjectsModule .history
{
	background: url(Images/Subjects/Module/2.jpg);
}
#SubjectsModule .science
{
	background: url(Images/Subjects/Module/3.jpg);
	margin-right:0px;
}
#SubjectsModule .engineering
{
	background: url(Images/Subjects/Module/4.jpg);
}
#SubjectsModule .green
{
	background: url(Images/Subjects/Module/5.jpg);
}
#SubjectsModule .human
{
	background: url(Images/Subjects/Module/6.jpg);
	width:83px;
}


/*=== ADVERTISEMENT ===*/

#Advertisement {
	background: #F0F0F0;
	padding: 3px 12px 11px 12px;
	text-align: center;
	color: #909090;
	font-size: 9px;
}

#AdvertisementS {
	background: #F0F0F0;
	padding: 3px 0px 11px 0px;
	text-align: center;
	color: #909090;
	font-size: 9px;
}

#Advertisement div {
	margin-top: 2px;
	height: 250px;
	width: 300px;
}

#AdvertisementFooter {
	text-align: center;
	color: #909090;
	font-size: 9px;
	width: 100%;
}

#AdvertisementFooter div {
	margin-top: 2px;
	margin-bottom: 5px;
}


/*=== MAIN HEADER ===*/

#MainHeader 
{
	float: left;
	width: 816px;
}

#MainHeader .bigHeader 
{
  height: 90px;
	background: url(Images/Programmes/MainHeaderBig.gif) top left no-repeat;
	position: relative;
	z-index:3;
}

#MainHeader .smallHeader 
{
  height: 43px;
	background: url(Images/Programmes/MainHeaderSmall.gif) top left no-repeat;
}

#MainHeader .title {
	position: absolute;	
	top: 11px;
	left: 10px;
	color: #fff;
	font-size: 21px;
}

.sIFR-hasFlash #MainHeader .title {
	visibility: hidden;
	top: 9px;
}

#MainHeader .menu {
	position: absolute;
	padding-left: 10px;
	top: 66px;
}

#MainHeader .menu a {
	display: block;
	float: left;
	margin-right: 15px;
	color: #fff;
	text-decoration: none;
}

#MainHeader .menu a:hover {
	color: #A6A6A6;
}

#MainHeader .menu a.selected {
	height: 20px;
	border-bottom: solid 4px #FFCC00;
}



/*=== MASTER ===*/

#ProgrammesMasterTop {
	float: left;
	width: 806px;
}

#ProgrammesMasterTop.big {
	margin-right: 10px;
}

#ProgrammesMasterTop .small {
	background: url(Images/Programmes/TopBgMSmall.gif) repeat-x;
}

#ProgrammesMasterTop.big .left {
	background: url(Images/Programmes/TopBgL.gif) no-repeat;
	background-position: left top;
}

#ProgrammesMasterTop.small .left {
	background: url(Images/Programmes/TopBgLSMall.gif) top left no-repeat;
}

#ProgrammesMasterTop .right {
	position: relative;
	width: 816px;
}

#ProgrammesMasterTop.big .right {
	height: 90px;
	background: url(Images/Programmes/TopBgR.gif) top right no-repeat;
	margin-right: -10px;
	position: relative;
}

#ProgrammesMasterTop.small .right {
	height: 43px;
	background: url(Images/Programmes/TopBgRSmall.gif) top right no-repeat;
}

#ProgrammesMasterTop .title {
	position: absolute;	
	top: 11px;
	left: 10px;
	color: #fff;
	font-size: 21px;
}

.sIFR-hasFlash #ProgrammesMasterTop .title {
	visibility: hidden;
	top: 9px;
}

#ProgrammesMasterTop .menu {
	position: absolute;
	padding-left: 10px;
	top: 66px;
}

#ProgrammesMasterTop .menu a {
	display: block;
	float: left;
	margin-right: 15px;
	color: #fff;
	text-decoration: none;
}

#ProgrammesMasterTop .menu a:hover {
	color: #A6A6A6;
}

#ProgrammesMasterTop .menu a.selected {
	height: 20px;
	border-bottom: solid 4px #FFCC00;
}

/*=== SHARED ===*/

.ProgrammesSmallH {
	height: 184px;
}

/*=== MAIN ===*/

#ProgrammeMain div.contentTitle {
	background: url(Images/Programmes/SubTitleBg.gif) bottom left repeat-x;
	font-size: 13px;
	background-color: #ffffff;
	min-height:15px;
}

#ProgrammeMain div.titleAgain {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
}
	
#ProgrammeMain div.longDescription {
	padding-bottom: 20px;
	background-color: #ffffff;
}
	
	
/*=== QUOTE ===*/

.ProgrammeQuote {
	background: url(Images/Programmes/QuoteBg.gif) bottom left repeat-x;
}

.ProgrammeQuote div {
	padding: 25px 25px 0 25px;
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
}
	
.ProgrammeQuote span {
	display: block;
	padding: 10px 25px 25px 25px;
}
	
/*=== FACT ===*/

.ProgrammeFact {
	background: #A8A9AD url(Images/Programmes/FactBg.gif) top left repeat-x;
}

.ProgrammeFact .dyk {
	padding: 25px 25px 0 25px;
	font-size: 20px;
	color: #FFCC00;
}

.ProgrammeFact .fact {
	padding: 10px 25px 0 25px;
	font-size: 15px;
	color: #ffffff;
}

.ProgrammeFact .credit {
	padding: 10px 25px 0 25px;
	color: #ffffff;
}
	
.ProgrammeFact a.next {
	display: block;
	width: 57px;
	padding: 25px;
	color: #ffffff;
}

/*=== FEATURED and FEATUREDAZ ===*/

#ProgrammesFeatured img {
	float: left;
	margin-right: 1px;
	width: 90px;
	height: 85px;
}	

#ProgrammesFeatured div.content {
	float: left;
	width: 207px;
	height: 65px;
	background: url(Images/Programmes/FeaturedBg.gif);
	padding: 7px 13px 13px 13px;
}	

#ProgrammesFeatured div.az {
	width: 371px;
	height: 59px;
}	

#ProgrammesFeatured div.content a {
	font-weight: bold;
}	

#ProgrammesFeatured div.content div {
	margin-top: 3px;
}	

#ProgrammesFeatured div.az div {
	width: 360px;
}	
	
/*=== VIEWERS FAVORITE ===*/

#ViewersFavorite div.Bd div {
	padding: 0 10px 8px 10px;
	}
	
#ViewersFavorite div.Bd a {
	margin-left: 9px;
	}	
	
#ViewersFavorite div.Bd div.BgColor {
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	}	
	
#ViewersFavorite div.Medium {
	width: 322px;
	}	
	
#ViewersFavorite div.Small {
	width: 298px;
	}	
	
#ViewersFavorite .Medium .HeaderSection {
	width: 296px;
	}	
	
#ViewersFavorite .Small .HeaderSection {
	width: 292px;
	}	

#ViewersFavorite div.Bd div.BgColor img {
	float: left;
	margin-right: 10px;
	width: 54px;
	height: 51px;
}	

#ViewersFavorite div.Bd div.BgColor b {
	display: block;
	float: left;
	margin-top: 18px;
}	


#ViewersFavorite div.Medium div.Item {
	float: left;
	width: 302px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: solid 1px #E6E6E6;
	}	
	
#ViewersFavorite div.Small div.Item {
	float: left;
	width: 278px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: solid 1px #E6E6E6;
	}	


#ViewersFavorite div.Bd div.Item img {
	float: left;
	margin-right: 10px;
	width: 54px;
	height: 51px;
}	

#ViewersFavorite div.Bd div.Item b {
	display: block;
	float: left;
	margin-top: 18px;
}	
#ViewersFavorite div.Bd div.Item .link 
{
	float: left;
	margin-top: 18px;
}	
	
/*=== PROGRAMMES VIDEOS ===*/

#ProgrammesVideos	div.Bd {
	float: left;
	background-color: #ffffff;
}	

#ProgrammesVideos.MediumW	div.container {
	width: 487px;
	border-width: 0 1px 1px 0;
	background-color: #ffffff;
}	

#ProgrammesVideos.SmallW	div.container {
	border-width: 0;
	background-color: #ffffff;
}	

#ProgrammesVideos	div.item {
	position: relative;
	height: 51px;
	padding: 10px;
}	

#ProgrammesVideos.MediumW div.item {
	width: 222px;
	border-width: 0 0 1px 1px;
}

#ProgrammesVideos.SmallW div.item {
	width: 302px;
	border-width: 0 1px 1px 1px;
}

#ProgrammesVideos	div.item img {
	float: left;
	margin-right: 10px;
	width: 54px;
	height: 51px;
}	

#ProgrammesVideos	div.item .icon {
	position: absolute;
	top: 48px;
	left: 71px;
}
	
	
/*=== PROGRAMME VIDEOS CONTROL ===*/

.ProgrammeVideosItem {
	position: relative;
	z-index: 1;
	height: 51px;
	border-width: 0 1px 1px 1px;
	padding: 10px;
	background-color: #ffffff;
}	
	
.ProgrammeVideosItem img {
	float: left;
	margin-right: 10px;
	width: 54px;
	height: 51px;
}	

.ProgrammeVideosItem .icon {
	position: absolute;
	top: 48px;
	left: 73px;
}

/*=== PHOTO GALLERY CONTROL ===*/

#ProgrammePhotoGalleries div.Bd {
	float: left;
}	

#ProgrammePhotoGalleries.MediumW div.container {
	width: 487px;
	border-width: 0 1px 1px 0;
	background-color: #ffffff;
}	

#ProgrammePhotoGalleries.LeftSmallW div.container {
	border-width: 0;
	background-color: #ffffff;
}

#ProgrammePhotoGalleries div.item {
	position: relative;
	height: 51px;
	padding: 10px;
}	

#ProgrammePhotoGalleries.MediumW div.item {
	width: 222px;
	border-width: 0 0 1px 1px;
}

#ProgrammePhotoGalleries.LeftSmallW div.item {
	width: 278px;   /*       278px;      */
	border-width: 0 1px 1px 1px;
}
#ProgrammePhotoGalleries.RightSmallW div.item {
	width: 300px;   /*       278px;      */
	border-width: 0 1px 1px 1px;
}

#ProgrammePhotoGalleries div.item img {
	float: left;
	margin-right: 10px;
	width: 54px;
	height: 51px;
}	

#ProgrammePhotoGalleries div.item .icon {
	position: absolute;
	top: 48px;
	left: 71px;
}
	
/*=== REMINDER ===*/

.ProgrammeReminder {
	position: relative;
	z-index: 2;
	background: url(Images/Programmes/ReminderBg.jpg);
	padding: 12px 14px 16px 14px;
	width: 296px;
	height: 156px;
}

.ProgrammeReminder div.dontmiss {
	font-size: 20px;
	font-weight: bold;
	color: #838383;
}

.sIFR-hasFlash .ProgrammeReminder div.dontmiss {
	visibility: hidden;
	font-size: 23px;
}

.ProgrammeReminder div.title {
	font-size: 18px;
}

.sIFR-hasFlash .ProgrammeReminder div.title {
	visibility: hidden;
	font-size: 19px;
	letter-spacing: -2px;
}

.ProgrammeReminder div.tx {
	font-size: 16px;
	color: #838383;
}

.sIFR-hasFlash .ProgrammeReminder div.tx {
	visibility: hidden;
	font-size: 18px;
}

.ProgrammeReminder div.icons {
	position: absolute;
	top: 157px;	
}

.ProgrammeReminder div.icons a {
	margin-right: 35px;
}
	
	
/*=== PROGRAMMES A-Z ===*/	


#ProgrammesAZTop {
	float: left;
	width: 806px;
	margin-right: 10px;
}

#ProgrammesAZTop .left {	
	background: url(Images/Programmes/TopBgL.gif) no-repeat;
	background-position: left top;
}

#ProgrammesAZTop .right {
	position: relative;
	width: 816px;
	height: 90px;
	background: url(Images/Programmes/TopBgR.gif) top right no-repeat;
	margin-right: -10px;
}

#ProgrammesAZTop .title {
	position: absolute;	
	top: 11px;
	left: 10px;
	color: #fff;
	font-size: 22px;
}	

.sIFR-hasFlash #ProgrammesAZTop .title {
	visibility: hidden;
	top: 9px;
}

#ProgrammesAZTop .menu {
	position: absolute;
	padding-left: 10px;
	top: 70px;
}

#ProgrammesAZTop .menu a {
	display: block;
	float: left;
	margin-right: 7px;
	color: #fff;
	text-decoration: none;
}

#ProgrammesAZTop .menu a:hover {
	color: #A6A6A6;
}

#ProgrammesAZTop .menu a.selected {
	height: 16px;
	border-bottom: solid 4px #FFCC00;
}

#ProgrammesAZTop .menu a.noLink {
	height: 16px;
	color:#A6A6A6;
}

#ProgrammesFiltered div.Bd {
	width: 486px;
	height: 105px;
}

#ProgrammesFiltered  img {
	float: left;
	width: 90px;
	height: 85px;
	margin: 10px;
}	

#ProgrammesFiltered  div.content 
{
	float: left;
	width: 366px;
	height: 85px;
	padding-top: 20px;
}	

#ProgrammesFiltered  div.content a {
	font-weight: bold;
}	

#ProgrammesFiltered  div.content div {
	margin-top: 3px;
	width: 310px;
}	

/*=== PROGRAMME VIDEO PAGE ===*/

#ProgrammeVideoPlayerDetails	{
	width: 490px;
}			

#ProgrammeVideoPlayerDetails .title	{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 8px;
}			

#ProgrammeVideoPlayerDetails .share	{
	margin-top: 15px;
	border-width: 1px 0 0 0;
	padding: 10px 0 3px 0;
}

/*=== PROGRAMME PHOTO GALLERY ===*/

#ProgrammePhotoGallery {
	width: 512px;
}

#ProgrammePhotoGallery .scrollLeft {
	float: left; 
	width:37px; 
	height:63px; 
	background: url(Images/Programmes/GalleryScrollLeft.gif);
}

#ProgrammePhotoGallery .scrollRight {
	float: left; 
	width:37px; 
	height:63px; 
	background: url(Images/Programmes/GalleryScrollRight.gif);
}

#ScrollContainerDiv {
	position:relative; 
	float: left; 
	width:438px; 
	height:63px; 
	background: url(Images/Programmes/GalleryScrollBg.gif);
	overflow: hidden;
}

#ScrollerDiv {
	position:relative; 
	padding: 0 2px;
	white-space:nowrap;
	width: 60000px;
}

#ScrollerDiv div {
	float: left;
	margin: 4px 2px;
	padding: 1px;
}

#ScrollerDiv img {
	width: 54px;
	height: 51px;
	border: solid 1px #999999;
	cursor: pointer;
}

#ScrollerDiv div.selected, #ScrollerDiv div.selected img {
	padding: 0;
	border: solid 1px #ffffff;
}

#ProgrammePhotoGallery .photo {
	width: 512px;
	height: 288px;
}

#ProgrammePhotoGallery .photoTitle {
	float: left;
	width: 422px;
	height: 22px;
	padding: 8px 0px 0 10px;
	background-color: #474747;
	color: White;
}

#ProgrammePhotoGallery .photoIndex {
	float: left;
	width: 70px;
	height: 22px;
	padding: 8px 10px 0 0;
	background-color: #474747;
	color: White;
	text-align: right;
}

#ProgrammePhotoGallery .details	{
	width: 490px;
}

#ProgrammePhotoGallery .title	{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 8px;
}			

#ProgrammePhotoGallery .share	{
	margin: 15px 0 0 0;
	border-width: 1px 0 0 0;
	padding-top: 5px;
}

#ProgrammePhotoGallery .share	b {
	margin-right:10px;
}

/*=== EPISODE GUIDE ===*/


.SeriesNo
{
	color: #474747;
	text-decoration: none;
}

.SelectedSeriesNo
{
	color: #0187CE;
}

.EpisodeGuide .HeaderSection {
	float: left;
	width: 466px;
}

.EpisodeGuide .HeaderSection select {
	position: relative;
	top: -5px;
}

.EpisodeGuide .thumb {
	float: left;
	width: 90px;
	height: 85px;
	margin-right: 10px;
}

.EpisodeGuide .Bd {
	float: left;
	width: 466px;
	padding: 10px;
}

.EpisodeGuide .details {
	float: left;
	width: 366px;
}

.EpisodeGuide .title {
	font-size: 15px;
	font-weight: bold;
}

.EpisodeGuide .episodeTitle 
{
	padding-bottom: 3px;
	font-weight: bold;
}

.EpisodeGuide .nextShowing {
	padding-bottom: 3px;
}

.EpisodeGuide .nextShowing b {
	color: #aeaeae;
}

.thumb {
	float:left;
	height:85px;
	margin-right:10px;
	width:90px;
}

/*=== TV SCHEDULE ===*/

.TVSchedule .HeaderSection {
	float: left;
	width: 466px;
}

.TVSchedule .HeaderSection select {
	position: relative;
	top: -5px;
}

.TVSchedule .Bd {
	float: left;
	width: 466px;
	padding: 10px;
}

.TVSchedule .details {
	float: left;
	width: 460px;
}

.TVSchedule .title {
	font-size: 15px;
	font-weight: bold;
}

.TVSchedule .episodeTitle {
	font-weight: bold;
}

.TVSchedule .nextShowing {
	margin: 1px 0;
	float:left;
}

.TVSchedule .nextShowing b {
	color: #aeaeae;
}
.TVSchedule .repeats{
	margin: 1px 0;
	width:233px;
	position:relative;
	float:left;
}

.TVSchedule .repeats b{
	color: #aeaeae;
	display: block;
}

.TVSchedule .repeats a.firstReminder{
	position: absolute;
	left: 52px;
}

.TVSchedule .repeats a.secondReminder{
	position: relative;
	left: 52px;
	top: 3px;
}

/*=== TV SCHEDULE ===*/

#ProgrammeScheduleCalendar {
	position: absolute; 
	right: 0;
	top: 0;
}

#ProgrammeScheduleCalendar a {
	display: block;
	float: left;
	padding: 8px 10px 0 10px;
	height: 22px;
}

#ProgrammeScheduleCalendar input {
	float: left;
	margin: 4px 10px 0 10px;
}

/*=== ARTICLE SECTION ===*/
	
.Pag .Prev
{
	display: block;
	float: left;
	margin-right:5px;
	}
	
.Pag .Next
{
	display: block;
	float: left;
	margin-left:5px;
	}

.Pag .Links
{
	display: block;
	float: left;
	}	
	
.Pag .Links a
{
	display: block;
	float: left;
	margin:0 5px 0 5px;
	}
	
.Pag .MorePages
{
	display: block;
	float: left;
	margin:0 5px 0 5px;
	}
	
.Pag a.LinksGrayText
{
	color: #878385;
	text-decoration: none;
	}


/*=== EPISODE DETAILS === */
.CpSection
{
	background: #FEE7AB url(Images/Header/SectionBg.gif) repeat-x scroll 0%;
	color: #993300;
	font-weight:bold;
	height:22px;
	padding:8px 11px 0px;
	text-decoration:none;
}

.CpSection a 
{
	color: #474747;
}

a.EpisodeSectionOn 
{
	background-position: 0pt 30px;
}

a.EpisodeSectionOn:hover 
{
	background-position: 0pt;
}

a.EpisodeSection 
{
	background: transparent url(Images/Header/SectionBg.gif) repeat scroll 0px 0px;
	border-right: 1px solid #e5e5e5;
	display: block;
	float: left;
	height: 22px;
	padding: 8px 12px 0pt;
}

a.EpisodeSection:hover 
{
	background-position: 0pt 30px;
	text-decoration: none;
}

a.EpisodeSectionOn 
{
	background-position:0pt 30px;
}

.fav {width:460px;list-style:none;margin:0;padding:0}
	.fav li {float:left;width:25%;margin:2px 0 2px 0}
	.fav a {display:block;padding-left:24px;color:#333;line-height:20px;background:url(images/Programmes/fav.gif) no-repeat;text-decoration:none}
	.fav a:hover{background-color:#ddd}