﻿
/*=== 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.gif);
	}

#Subjects .human {
	background: url(Images/Subjects/23.gif);
	}

#Subjects .science {
	background: url(Images/Subjects/20.gif);
	}

#Subjects .green {
	background: url(Images/Subjects/24.gif);
	}

#Subjects .engineering {
	background: url(Images/Subjects/21.gif);
	margin-bottom: 0;
	}

#Subjects .history {
	background: url(Images/Subjects/22.gif);
	margin-bottom: 0;
	}

/*=== 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;
}


/*=== MASTER ===*/

#ProgrammesMasterTop {
	float: left;
	background: url(Images/Programmes/TopBgMSmall.gif); /*ie6*/
}

#ProgrammesMasterTop.big {
	background: url(Images/Programmes/TopBgM.gif);
}

#ProgrammesMasterTop.small {
	background: url(Images/Programmes/TopBgMSmall.gif);
}

#ProgrammesMasterTop.big .left {
	background: url(Images/Programmes/TopBgL.gif) top left no-repeat;
}

#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;
}

#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;
}

#ProgrammeMain div.titleAgain {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
}
	
#ProgrammeMain div.longDescription {
	padding-bottom: 20px;
}
	
	
/*=== 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: 60px;
	background: url(Images/Programmes/FeaturedBg.gif);
	padding: 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: 330px;
}	
	
/*=== 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;
	width: 302px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	}	

#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;
}	
	
/*=== PROGRAMMES VIDEOS ===*/

#ProgrammesVideos	div.Bd {
	float: left;
}	

#ProgrammesVideos.MediumW	div.container {
	width: 487px;
	border-width: 0 1px 1px 0;
}	

#ProgrammesVideos.SmallW	div.container {
	border-width: 0;
}	

#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;
}	
	
.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;
}	

#ProgrammePhotoGalleries.LeftSmallW div.container {
	border-width: 0;
}

#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;
	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;
	background: url(Images/Programmes/TopBgM.gif);
}

#ProgrammesAZTop .left {
	background: url(Images/Programmes/TopBgL.gif) top left no-repeat;
}

#ProgrammesAZTop .right {
	position: relative;
	width: 816px;
	height: 90px;
	background: url(Images/Programmes/TopBgR.gif) top right no-repeat;
}

#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 ===*/

.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;
}

/*=== 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;
	width:233px;
	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;
}
