/* PAGE-SPECIFIC STYLES. PUT THESE INTO MAIN CSS FILE ON SITE INTEGRATION */

#maincontentblock_timeline .contentCell_timeline {
  margin: 0 0 10px 60px;
  float: left;
  width: 440px;
}

#maincontentblock_timeline .pageTitle{
  margin: 20px 60px;
}

#maincontentblock_timeline h1.mainAreaTitle{
  font-family: Georgia;
  color: #000000;
  font-weight: 20px;
  width: 440px;
}

#maincontentblock_timeline .timeline_testimonials{
  float: left;
  /*width: 100px;*/
  margin: 0 0 20px 60px;
}

#maincontentblock_timeline .testimonial_block{
  float: left;
  width: 230px;
  margin: 10px 10px 0 0;
  height: 230px;
  background-color: #e5e8ff;
  border-top: 2px solid #dde1ff;
  padding: 10px;
  color: #494c62;
}

#maincontentblock_timeline .thumbnail{
  float: left;
  width: 75px;
  margin: 0 10px 0 0;
}

#maincontentblock_timeline .testimonial_block .by{
  text-align: right;
}

#maincontentblock_timeline {
float: left;
margin: 0px 0px 0px 0px;
}

#maincontentblock_timeline .download_list{
  margin: 5px 0;
  float: left;
  clear: left;
}

.quote_left{
  float: left;
  margin: 0 3px 0 0;
}

.quote_right{

  margin: 0 0 0 3px;
  display: inline-block; 
}

/* END PAGE-SPECIFIC STYLES */


#timeline a {
	color: #cf6600;
	text-decoration: none;
  font-family: Georgia;
}
	#timeline a:hover,
	#timeline a.selected {
		color: #a42300;
	}



	
	#timeline {
		width: 806px;
		overflow: hidden;
		margin: 0 0 20px 60px;
		position: relative;
		background: url('../images/20th/dot.gif') repeat-x;
    border-bottom: 1px solid #d6d6d6;
    font-family: Georgia;
	}
	#timeline #dates {
			width: 810px;
			height: 60px;
			overflow: hidden;
      margin-top: 15px;
		}
    
    
			#timeline #dates li {
				list-style: none;
				float: left;
				width: 100px;
				height: 40px;
				font-size: 24px;
				text-align: center;
				background: url('../images/20th/biggerdot.png') center bottom no-repeat;
                line-height: 24px;
			}
				#timeline #dates a {
				}
				#timeline #dates .selected {
          list-style: none;
				float: left;
				width: 100px;
				height: 40px;
				font-size: 24px;
				text-align: center;
				background: url('../images/20th/biggerdot_selected.png') center bottom no-repeat;
				line-height: 24px;
				}
		
		#timeline #issues {
			width: 800px;
			overflow: hidden;
		}	
			#timeline #issues li {
				width: 800px;
				list-style: none;
				float: left;
				position: relative;
			}
			
		

        

        

        
        
				#timeline #issues li img {
					float: left;
					margin: 55px 30px 10px 20px;
					background: transparent;
          z-index: 1000;
				}
				#timeline #issues li h1 {
					color: #b72700;
					font-size: 57px;
          float: left;
          margin: 0 10px;
          font-weight: normal;
          font-family: Georgia;
          line-height: 57px;
				}
				#timeline #issues li p {
					font-size: 11px;
					font-weight: normal;
					line-height: 22px;
          color: #4b4b4b;
          float: left;
          margin: 8px 0;
					padding-left: 14px;
					background: url('../images/20th/list_arrow.gif') no-repeat;
					text-align: left;
        }
				
				#timeline #issues li p span{
					font-size: 10px;
					color: #777777;
					line-height: 120%;
				}
          
        #timeline .slideContent {
          width: 360px;
          float: left;
          margin: 40px 0 0 0;
          position: relative;
					text-align: center;
        }
          
        #timeline .slideContent .title{
					text-align: center;
          width: 215px;
					height: 70px;
          margin: 0px auto;
					/*padding-top: 10px;*/
					
        }
				
				#timeline .slideContent .title h1{
					height: 70px;
          font-family: Georgia;
        }
        
        img.threedot{
          margin: 13px 0 0 0 !important;
        }
      
		
		#timeline #grad_left,
		#timeline #grad_right {
			width: 100px;
			height: 100px;
			position: absolute;
			top: 0;
      z-index: 0;
      pointer-events:none;
      
		}
			#timeline #grad_left {
				left: 0;
				background: url('../images/20th/grad_left.png') repeat-y;
			}
			#timeline #grad_right {
				right: 0;
				background: url('../images/20th/grad_right.png') repeat-y;
			}
		
    
    #timeline .next{
			height: 31px;
			position: absolute;
			color: #55883b !important;
			font-weight: bold;
			background: url('../images/20th/next.png') right top no-repeat;
			width: 60px;
			top: 345px;
			left: 290px;
			z-index: 1000;
    }
 
    #timeline .prev{
			height: 31px;
			position: absolute;
			color: #55883b !important;
			font-weight: bold;
			background: url('../images/20th/prev.png') left top no-repeat;
			width: 60px;
			top: 345px;
			left: 0px;
			z-index: 1000;
    } 
 
    #timeline .next span{
			float: left;
			margin: 5px 0 0 0;
    }
    
    #timeline .prev span {
			float: right;
			margin: 5px 0 0 0;
    }
    .next:hover{
			color: #2e531b !important;
			background-position: right bottom;
    }  
    
    #timeline .prev:hover{
    color: #2e531b !important;
    background-position: left bottom;
    }  
    
    
    
		#timeline #next,
		#timeline #prev {
			position: absolute;
			top: 0;
			font-size: 70px;
			top: 170px;
			width: 22px;
			height: 38px;
			background-position: 0 0;
			background-repeat: no-repeat;
			overflow: hidden;
		}
			#timeline #next:hover,
			#timeline #prev:hover {
				background-position: 0 -76px;
			}
			#timeline #next {
				right: 0;
				background-image: url('../images/20th/next.png');
			}
			#timeline #prev {
				left: 0;
				background-image: url('../images/20th/prev.png');
			}
				#timeline #next.disabled,
				#timeline #prev.disabled {
					opacity: 0.2;
				}
			



#timeline .scroller{
float: left;
width: 375px;
height: 310px;
margin-top: 5px;
text-align: left;
}			
				
/*
 * jScrollPane CSS Start
 */

#timeline .jspContainer
{
	overflow: hidden;
	position: relative;
}

#timeline .jspPane
{
	position: absolute;
}

#timeline .jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 8px;
	height: 100%;
}

#timeline .jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
}

#timeline .jspVerticalBar *,
#timeline .jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

#timeline .jspCap
{
	display: none;
}

#timeline .jspHorizontalBar .jspCap
{
	float: left;
}

#timeline .jspTrack
{
	background: #dbdbdb;
	position: relative;
	-moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
}

#timeline .jspDrag
{
	background: #9f9f9f;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	-moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
}

#timeline .jspHorizontalBar .jspTrack,
#timeline .jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

#timeline .jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

#timeline .jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

#timeline .jspVerticalBar .jspArrow
{
	height: 16px;
}

#timeline .jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

#timeline .jspVerticalBar .jspArrow:focus
{
	outline: none;
}

#timeline .jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}