/* =TIMELINE specific styles
----------------------------------------------------------------------------------------------------*/

#timelinewrapper {width: 964px;margin: 0 auto; margin-top:0px !important;}

#timelinewrapper #timelineSlider {width: 964px;margin: 0 auto;position:relative;
	background: #1a1a1a url(../images/timelineWrapperBg.png) bottom left repeat-x;
	}

	.controls {background:#262626;}

/* =Top navigation
----------------------------------------------------------------------------------------------------*/

#timelinewrapper ul#timeline {
	width:964px;
	display: block;
	padding:0;
	height:40px;
	background:#cc0000;
	}

#timelinewrapper ul#timeline li {
	background:#8c0000 url(../images/timelineLiBg.png) bottom left repeat-x;
	border-left:1px solid #cc0000;
	border-right:1px solid #cc0000;
	border-bottom:4px solid #cc0000;
	border-top:4px solid #cc0000;
	float:left;
	display: block;
	margin:0;
	padding:0;
	height:32px;
	position: relative;
	cursor:pointer;
	}

#timelinewrapper ul#timeline li.hover {
	background:#510000;
}

#timelinewrapper ul#timeline li.active {
	background:#510000;
}

/* =filter navigation
----------------------------------------------------------------------------------------------------*/


/* =Top navigation
----------------------------------------------------------------------------------------------------*/

#timelinewrapper ul#filter {
	padding:0 0 0 8px;
	height:30px;
	display:block;
	width:954px;
	margin:0 !important;
	}

#timelinewrapper ul#filter li {
	float:left;
	display: inline;
	margin: 0 5px 0 5px;
	padding: 0;
	}

#timelinewrapper ul#filter li a {
	text-decoration: none;
	float: left;
	text-align: center;
	text-transform: uppercase;
	font-size:12px;
	color:#ababab;
	height:30px;
	cursor:pointer;
	}

#timelinewrapper ul#filter li a span  {
	height:20px;
	padding:5px 5px 5px 8px;
	display:block;
	float:left;
	margin-right:3px;
	}

#timelinewrapper ul#filter li a.selected {color:#FFF;}

#timelinewrapper ul#filter li a.selected span,
#timelinewrapper ul#filter li a:hover span {background:url(../images/epgNavBgLeft.png) top left no-repeat;}

#timelinewrapper ul#filter li a:hover,
#timelinewrapper ul#filter li a.selected {background:url(../images/epgNavBgRight.png) top right no-repeat; color:#FFF;}
#timelinewrapper ul#filter li a:focus {outline: none;}

/* =Scrolling navigation (next/previous)
----------------------------------------------------------------------------------------------------*/
#timelinewrapper #nav a.next,
#timelinewrapper #nav a.prev {
 	background: url(../images/scroll_right.gif) no-repeat;
	display:block;
	width:17px;
	height:35px;
	position:absolute;
	right:0;
	top:150px;
	}

#timelinewrapper #nav a.prev {
	background: url(../images/scroll_left.gif) no-repeat;
	left:0;
	}

/* =Scroll panel
----------------------------------------------------------------------------------------------------*/

#timelinewrapper .scroll {width:924px;overflow:hidden;position:relative;clear:left;padding:0;margin:0 20px;}

/* =Scroll container
----------------------------------------------------------------------------------------------------*/

#timelinewrapper .scrollContainer {height:260px;margin-top:20px;}

#timelinewrapper .scrollContainer img.loading {display:block;position:absolute;top:120px;left:450px;margin:0;padding:0;}

/* =Events (unordered list)
----------------------------------------------------------------------------------------------------*/

#timelinewrapper .period {float:left;background: url(../images/timeLinePeriodBg.png) 0 0 no-repeat;padding:1px 0 0 3px; height: 250px;}
#timelinewrapper .dateRange {
	display:block;
	padding:0 0 0 20px;
	text-transform:uppercase;
	font-weight:bold;
	height:36px;
	margin-top:10px;
	}
#timelinewrapper .dateRange span {font-size:30px;line-height:1.6em;font-weight:normal;margin-left:10px;}
#timelinewrapper .dateRange a {color: #A7A7A7;}
#timelinewrapper .dateRange a.rangeStart {background:url(../images/rangeStartBg.png) 0 0 no-repeat;padding-left:10px;margin-right:10px;}
#timelinewrapper .dateRange a.rangeEnd {background:url(../images/rangeEndBg.png) top right no-repeat;padding-right:10px;margin-left:20px;}
#timelinewrapper ul#events li {height:240px;float:left;display:inline;}

#timelinewrapper ul#events li a {
	text-decoration: none;
	float: left;
	font-size:12px;
	color:#FFF;
	background:url(../images/prog_bg.gif) top right no-repeat;
	}

#timelinewrapper ul#events li a {color:#ababab; cursor:pointer;outline:none;}

#timelinewrapper ul#events li.offair {background:url(../images/progoffair_bg.png);margin:0 1px 0 0;}
#timelinewrapper ul#events li.offair .text {color:#999;padding: 0 10px;font-size:11px;display:block;}
#timelinewrapper ul#events li.event.selected a {background:url(../images/prog60_bg.png); color:#FFF;}
#timelinewrapper ul#events li.event a {font-size:9px;padding:0;margin:0;height:250px;float:left;overflow:hidden;}
#timelinewrapper ul#events li.event a {width:154px;}
#timelinewrapper ul#events li.event a:hover {background:url(../images/prog60_bg.png);color:#FFF;}

#timelinewrapper ul#events li .eventImage {
	position:relative;
	width:154px;
	padding:33px 0 6px 0;
	display:block;
	}

/*#timelinewrapper ul#events li a.show .eventImage {background: url(../images/timelineCameraIco.png)  8px 0 no-repeat}*/

#timelinewrapper ul#events li.selected a.show .eventImage,
#timelinewrapper ul#events li a.show:hover .eventImage {background: url(../images/timelineCameraIcoActive.png)  8px 0 no-repeat}
#timelinewrapper ul#events li .imgBorderActive {border-bottom: 5px solid #CC0000;height:0px;width:154px;display:block;position:absolute;bottom:-1px;left:0;}
#timelinewrapper ul#events li img {border:0;padding:0;margin:0;}
#timelinewrapper ul#events li .title {padding:10px 0 0 10px;font-size:11px;display:block;font-weight:bold;}
#timelinewrapper ul#events li .time {height:32px;display:block;}
#timelinewrapper ul#events li .day {float:left;font-size:32px;line-height:1em;margin-left:5px;margin-right:5px;}
#timelinewrapper ul#events li .month {float:left;display:block;}
#timelinewrapper ul#events li sup {vertical-align:top;font-size:12px;display:block;}

/* =Programmes detail panel (white panel at the bottom of the listing)
----------------------------------------------------------------------------------------------------*/
#timelinewrapper #detail #relatedTimelineShows {
	position:relative;
	display:block;
	float:left;
	width:492px;
	border-right:1px solid #d5d5d5;
	padding:10px 0 60px 10px;
	}

#timelinewrapper #detail #relatedTimelineEntries {
	position:relative;
	display:block;
	float:left;
	width:424px;
/*	margin-left:10px;*/
	padding:10px 10px 60px 0
	}

#timelinewrapper #detail #relatedTimelineEntries h2.decoratedSubHead {margin-left:0 !important;}

#timelinewrapper #detail #relatedTimelineShows ul li {
	width:152px;
	float:left;
	display:block;
	padding:16px 10px 0 0;
	}

#timelinewrapper #detail #relatedTimelineShows ul li a {color: #000;font-weight:bold;}
#timelinewrapper #detail #relatedTimelineShows ul li a.infoLightbox2{margin:4px 0 -2px 4px;}
#timelinewrapper #detail #relatedTimelineShows ul li a img {
	display:block;
	margin-bottom:10px;
	}

#timelinewrapper #detail #relatedTimelineShows ul li a:hover img {text-decoration:none}
#timelinewrapper #detail {background:#fff; width:964px; overflow:hidden; position:relative;}
#timelinewrapper #detail p {font-size:12px;color:#1a1a1a;margin:0 0 15px 0;font-weight:normal;}
#timelinewrapper #detail a.decoratedLink {position:absolute;bottom:15px;left:10px;font-weight:bold;}

#relatedTimelineEntries ul  {padding:10px;}

#relatedTimelineEntries ul li {
	background: url(../images/articleIconOnWhite.gif) 0 10px no-repeat;
	padding: 8px 0 8px 16px;
	display:block;
	float:left;
	width:185px;
	}

#relatedTimelineEntries  ul li a {
	color:#000 !important;
	font-weight:bold;
	display:block;
	}

#relatedTimelineEntries  ul li a span {float:left;margin: 0 5px 0 0;}
#relatedTimelineEntries  ul li a img {float:left;margin:2px 0 0 0;}

/* =Misc
----------------------------------------------------------------------------------------------------*/

#timelinewrapper .highlight {background:#fff;}
#timelinewrapper .hide {display: none;}
#timelinewrapper .loading {color:#999;}

/*-----------------------------------------------------------------------------------------------*/
/*                                            TOOLTIP                                            */
/*-----------------------------------------------------------------------------------------------*/

#timelineToggle {
	height:20px;
	background:url(../images/timelineToggleBg.gif) 0 0 repeat-x;
	margin:-8px 0 34px 0;
	font-weight:bold !important;
	z-index:20;
	position:relative;
	width: 964px;
	}

#timelineToggle a {
	display:block;
	height:33px;
	background:url(../images/timelineToggleLinkBg.png) 0 0 no-repeat;
	padding: 15px 0 0 95px;
	text-transform:uppercase;
	position:absolute;
	right:10px;
	top:0;
	z-index:15;
	cursor:pointer;
	color: #ffcc00;
	}

#timelineToggle a.closed {background:url(../images/timelineToggleLinkBg.png) 0 -58px no-repeat;}

#timelineToggle a:active,
#timelineToggle a:focus,
#timelineToggle a:hover {outline:none;text-decoration:none;}

#timelineToggle span {
	color: #FFF;
	font-size:18px;
	line-height:1.1em;
	margin-left:-14px;
	text-transform:none;
	}

.toolTip, .toolTipPeriod {
	text-align:center;
	position: absolute; /* Absolute will make the tooltip float above other content in the page */
	top: 20px;
	display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */
	font-size:12px;
	color:#000;
	height:37px;
	cursor:pointer;
	padding:0!important;
	background:url(../images/toolTipBg.png) bottom center no-repeat;
	}

.toolTip { z-index:999; }
.toolTipPeriod { z-index:99; }

.toolTip p, .toolTipPeriod p {
	font-size:12px;
	height:29px;
	float:left;
	background:url(../images/toolTopRight.png) top right no-repeat;
	font-weight:bold;
	white-space:nowrap;
	}

.toolTip span, .toolTipPeriod span {
	height:21px;
	display:block;
	float:left;
	margin-right:3px;
	padding: 4px 8px;
	background:url(../images/toolTopLeft.png) top left no-repeat;
	text-transform:uppercase;
	}

.toolTip span em , .toolTipPeriod span em {color:#7b7b7b;text-transform:none;font-weight:normal; font-style: italic;}