﻿
.timeline-wrapper
{
	position: relative;
	height:81px; 
	width: 729px; 
	margin: 0px auto 0 auto; 
	padding: 5px 0 15px 0;
}

.timeline-wrapper .timepoint
{
	float: left;
	display: block;
	position: relative;
	z-index: 100;
	cursor: pointer;
	width: 56px;
	height: 68px;
	background-position: -56px 0;
	background-repeat: no-repeat;
}

.timeline-wrapper .timepoint img
{
	display: block;
	margin: 0 auto 0 auto;
}

.timeline-wrapper .timepoint img.alt
{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

.timeline-wrapper .timepoint img.off
{
	display: none;
}

.timeline-wrapper a.nav
{
	display: block;
	float: left;
}

.timeline-wrapper a.nav.left
{
	cursor: pointer;
	width: 24px;
	height: 81px;
	background: transparent url(../Images/tline_arrowleft_inactive.jpg) left top no-repeat;
	text-decoration: none;
	border: none;
}

.timeline-wrapper a.nav.left:hover
{
	background-image: url(../Images/tline_arrowleft_active.jpg);
}

.timeline-wrapper a.nav.disabled-prev:hover
{
	cursor: default;
	background-image: url(../Images/tline_arrowleft_inactive.jpg);
}

.timeline-wrapper a.nav.right
{
	cursor: pointer;
	width: 26px;
	height: 81px;
	background: transparent url(../Images/tline_arrowright_inactive.jpg) left top no-repeat;
	text-decoration: none;
	border: none;
}

.timeline-wrapper a.nav.right:hover
{
	background-image: url(../Images/tline_arrowright_active.jpg);
}

.timeline-wrapper a.nav.disabled-next:hover
{
	cursor: default;
	background-image: url(../Images/tline_arrowright_inactive.jpg);
}

.timeline-wrapper .slider
{
	float: left;
	height:81px; 
	background: transparent url(../Images/tline_background_bare.jpg) top left no-repeat;
	position: relative;
	padding: 0 3px;
}

.timeline-wrapper .indicator
{
	width: 56px;
	height: 68px;
	position: absolute;
	left: 0%;
	background: transparent url(../Images/tline_slider_active.png) left top no-repeat;
}

.timepoint-content
{
	margin: 0 20px;
}

.timepoint-content .left
{
	float: left;
	width: 500px;
}

.timepoint-content .left .whatyouneedtoknow
{
	background: #ffffff url(../Images/tline_wyntk_boxbottom.jpg) left bottom no-repeat;
	padding: 0 0 6px 0;
	width: 484px;
}

.timepoint-content .left .whatyouneedtoknow .content
{
	padding: 0;
	margin: 0;
	display: block;
	float: none;
	width: auto;
}

.timepoint-content .left .whatyouneedtoknow .header
{
	background: transparent url(../Images/tline_wyntk_banner.jpg) left top no-repeat;
	height: 32px;
	width: auto;
	padding: 0;
	margin: 0;
}

.timepoint-content .left .whatyouneedtoknow .content
{
	background: #ffffff url(../Images/tline_wyntk_background.jpg) left top repeat-y;
}

.timepoint-content .left .whatyouneedtoknow .content .column-wrapper
{
	padding: 20px;
}

.timepoint-content .left .whatyouneedtoknow .content .column-wrapper .column
{
	float: left;
	margin: 0 5px 0 0;
	width: 142px;
}

.timepoint-content .left .whatyouneedtoknow .content .column-wrapper .column .image
{
	margin-bottom: 10px;
}

.timepoint-content .left .whatyouneedtoknow .content .column-wrapper .column p
{
	font-weight: bold;
	line-height: 1.4;
	margin: 0 auto 0 auto;
	width: 130px;
}

#learnmoredialog
{
	display: none;
}

#learnmoredialog .content-group
{
	background: transparent url(../Images/tline_wyntk_dialog_background.png) left top repeat-y;
}

#learnmoredialog .content-group .content
{
	display: block;
	float: none;
	position: relative;
	right: 4px; /* offset for the shadow */
	width: 684px;
	margin: 0 auto 0 auto;
}

#learnmoredialog .content-group .content .top-roll
{
	background: transparent url(../Images/tline_wyntk_dialog_contentrolltop.png) left top no-repeat;
	height: 4px;
	font-size: 1px;
	line-height: 1px;
}

#learnmoredialog .content-group .content .copy
{
	background-color: #ffffff; 
	padding: 15px;
	height: 400px;
	overflow: auto;
}

#learnmoredialog .content-group .content .copy .display-group
{
	margin: 30px 0 30px 0;	
}

#learnmoredialog .content-group .content .copy .display-group .image
{
	float: left;
	width: 158px;
}

#learnmoredialog .content-group .content .copy .display-group .text
{
	margin: 20px 0 0 172px;
}

#learnmoredialog .content-group .content .copy .display-group .text p.slim
{
	padding: 0;
}

#learnmoredialog .content-group .content .copy .display-group .image img
{
	display: block;
}

#learnmoredialog .content-group .content .bottom-roll
{
	background: transparent url(../Images/tline_wyntk_dialog_contentrollbottom.png) left top no-repeat;
	height: 4px;
}

#learnmoredialog .footer
{
	height: 13px;
	background: transparent url(../Images/tline_wyntk_dialog_footerroll.png) left top no-repeat;
}

.ui-dialog-titlebar
{
	padding: 8px 0 0 0;
	background: transparent url(../Images/tline_wyntk_dialog_bannerroll.png) left top no-repeat;
}

.ui-dialog-title
{
	display: block;
	padding: 0 60px 10px 30px;
	background: transparent url(../Images/tline_wyntk_dialog_background.png) left top repeat-y;	
}

a.ui-dialog-titlebar-close
{
	position: absolute;
	top: 10px;
	right: 20px;
	background: transparent url(../Images/tline_wyntk_dialog_close.png) left top no-repeat;
	width: 32px;
	height: 32px;
}

a:hover.ui-dialog-titlebar-close
{
	background-position: -32px 0;
}

a.ui-dialog-titlebar-close *
{
	display: none;
}


.ui-dialog
{
	width: 707px;
}

.ui-dialog-content
{
	
}

.ui-dialog .titlelevel1, .ui-dialog .titlelevel2
{
	color: #253205;
}

.ui-dialog .titlelevel1 
{
    font: bold 1.375em/1 "Arial rounded mt bold",Arial,Helvetica,sans-serif;
    letter-spacing: -0.04em;
	padding: 0;
	margin: 0;
}

.ui-dialog .titlelevel2
{
	font: bold 1em/1 "Arial rounded mt bold",Arial,Helvetica,sans-serif;
    letter-spacing: -0.04em;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

.timepoint-content .left .whatyouneedtoknow .content a.content-wrap,
.timepoint-content .left .whatyouneedtoknow .content a.content-wrap:hover
{
	cursor: pointer;
	display: block;
	text-decoration: none;
	border: none;
}

.timepoint-content .left .whatyouneedtoknow .content a.content-wrap .learnmore
{
	display: block;
	clear: both;
	margin: 0 0 0 3px;
	width: 475px;
	height: 23px;
	background: transparent url(../Images/tline_wyntk_learnmore.jpg) left top no-repeat;
}

.timepoint-content .left .whatyouneedtoknow .content a.content-wrap:hover .learnmore,
.timepoint-content .left .whatyouneedtoknow .content a.content-wrap .learnmore:hover
{
	background-image: url(../Images/tline_wyntk_learnmore_active.jpg);
}

.timepoint-content .left .copypusher
{
	margin: 30px 15px 20px 0;	
}

.timepoint-content .left .copypusher h2
{
	color: #344487;
}

.timepoint-content .left .copypusher p 
{
	line-height: 1.5;	
}

.timepoint-content .left .copypusher .image-island 
{
	margin: 20px;	
}

.timepoint-content .left .copypusher .image-island.left
{
	float: left;
	width: auto;
	margin-top: 0;
	margin-left: 0;
}

.timepoint-content .right
{
	float: left;
	width: 200px;
}

.ui-widget-overlay
{
	background-color: #000000;
	opacity: .70;
	filter: alpha(opacity=70);
	position: absolute;
	top: 0;
	left: 0;
}
