/*  
	-------------------------------------------------------------
	Cascade Style Sheet - jQuery Timeline slider
	Description: jQuery Plugin for building web timelines
	Author: pezflash - http: //www.codecanyon.net/user/pezflash
	Version: 1.0
	-------------------------------------------------------------
*/ 


/* ------------------ Global ------------------ */
body {
	font: 13px 'Open Sans', sans-serif;
	background:#fcfcfc;
}

strong {
	font-weight: 700;
}

img {
	border: 0px;
}

.ie a {
	text-decoration: none;
	outline: 0;
}

.container {
	position: absolute;
}

.shadow {
	position: absolute;
	top: 454px;
	left: -5px;
}

.preload {
	position: absolute;
	top: 220px;
	left: 450px;
}




/* ----------------- Timeline ----------------- */

/* -- Global -- */
#timeline_container {
	position:relative;
	background-color:none;
	border:0px solid #ffffff;
	opacity: 0;
	top:20px;
}

#timeline {
	/* set your own css here, if needed */
}

#timeline .hidden {
	display: none;
}
/* -- End Global -- */



/* -- Viewport -- */
#timeline .viewport {
	overflow: hidden;
	position: relative;
	background: url(../images/background.png) no-repeat 0 0;
	padding-bottom:35px;
	
}

#timeline .viewport .images {
	position: absolute;
	padding: 0px;
	margin: 0px;
	
}

#timeline .viewport .images img{
	float: left;
	padding-top:0
	0px;
}
/* -- End Viewport -- */



/* -- Milestones -- */
#timeline .milestones {
	overflow: hidden;
	position: relative;
	border-top: 0px solid #ffffff;
}

#timeline .milestones .content {
	position: absolute;
	padding: 0px;
	margin: 0px;
}

#timeline .column_first {
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 50px;
}

#timeline .column {
	float: left;
	padding: 0px 0px 0px 30px;
	margin: 0px 0px 0px 30px;
	height: 250px;
	border-left: 1px solid #cccccc;
}

#timeline .column_first span.txt{background:url(../images/milestone-bullet.png)no-repeat 0px 5px; padding-left:24px; margin-right:15px;}
#timeline .column span.txt{background:url(../images/milestone-bullet.png)no-repeat 0px 5px; padding-left:24px; margin-right:15px;}

#timeline .c100 { width: 100px; }
#timeline .c125 { width: 125px; }
#timeline .c150 { width: 150px; }
#timeline .c175 { width: 175px; }
#timeline .c200 { width: 200px; }
#timeline .c225 { width: 225px; }
#timeline .c250 { width: 250px; }
#timeline .c275 { width: 275px; }
#timeline .c300 { width: 300px; }
#timeline .c325 { width: 325px; }
#timeline .c350 { width: 350px; }
#timeline .c375 { width: 375px; }
#timeline .c400 { width: 400px; }
#timeline .c425 { width: 425px; }
#timeline .c450 { width: 450px; }
#timeline .c475 { width: 475px; }
#timeline .c500 { width: 500px; }
#timeline .c550 { width: 550px; }
#timeline .c600 { width: 600px; }
#timeline .c700 { width: 700px; }
#timeline .c750 { width: 750px; }
#timeline .c800 { width: 800px; }
#timeline .c1300 { width: 1300px; }

#timeline span {
	display: block;
}

#timeline .date {
	font-size: 24px;
	font-weight: 700;
	line-height: 15px;
	color: #d61d25;
	padding-bottom:30px;
	padding-top:10px;
}

#timeline .txt {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: #000;
	margin: 0px 0px 15px 0px;
}

#timeline .thumb_description {
	font-size: 13px;
	font-weight: 500;
	line-height: 12px;
	color: #6f6f6f;
	clear: left;
}

#timeline .clear{
	clear:both;
}

#timeline .thumb {
	margin: 14px 0px 0px 0px;
}

#timeline .video_rollover, #timeline .image_rollover {
	position:relative;
	float:left;
}

#timeline .video_rollover span, #timeline .image_rollover span {
	left: 0px;
	top: 0px;
	display: none;
	position: absolute;
}
#timeline .video_rollover span, #timeline .image_rollover span {
	background: url('../images/thumb_video_hover.png') no-repeat;
	width: 113px;
	height: 67px;
}

#timeline .image_rollover span {
	background: url('../images/thumb_image_hover.png') no-repeat;
	width: 113px;
	height: 67px;
}

#timeline .link {
	font-size: 13px;
	font-weight: 700;
}

#timeline .link a {
	color: #888;	
}
	
#timeline .link a:hover {
	color: #0096ff;
	text-decoration: underline;
}

#timeline .big_link {
	font-size: 13px;
	font-weight: 700;
	margin: 10px 0px 0px 0px;
	padding: 1px 5px 2px 5px;
	float: left;
	background-color: #0b0b0b;
}

#timeline .big_link a {
	color: #0096ff;	
	text-decoration: none;
}
	
#timeline .big_link a:hover {
	color: #fff;
}

/* -- End Milestones -- */



/* -- Scrollbar -- */
#timeline .scrollbar{
	background:url(../images/scrollbar_background.png) repeat 0 0px;
	position: absolute;
	top:20px;
	border:0px solid #ff0000;
}

#timeline .dragger {
	background: transparent url(../images/scrollbar_dragger.png) no-repeat 0 0;
	cursor: pointer;
	position: absolute;
}

#timeline .mark {
	background: transparent url(../images/scrollbar_mark.png) no-repeat 0 0;
	cursor: pointer;
	height: 21px;
	width: 13px;
	left: 600px;
	position: absolute;
	display: none;
	opacity: 0;
}
/* -- End Scrollbar -- */



/* -- Miscellaneous -- */
#timeline .drag_icon {
	cursor:url(../images/drag_icon.png), e-resize;
}

#timeline .audio_player {
	position: absolute;
	top: 1px;
	right: 7px;
}
/* -- End Miscellaneous -- */

.left-cover{
	position:relative;
	z-index:999;	
	border:0px solid #ccc;
	width:20px;
	float:left;
	background:url(../images/left-cover.png) no-repeat;
	height:700px;
}

.right-cover{float:right;position:relative;
	z-index:999;	
	border:0px solid #ccc;
	width:20px;
	background:url(../images/right-cover.png) no-repeat;
	height:700px;
}