/*********************************
** TIMELINE STYLES
*********************************/


.timeline body,.timeline h1,.timeline h2,.timeline h3,.timeline p, .timeline quote,.timeline small,.timeline form,.timeline input,.timeline ul,.timeline li,.timeline ol,.timeline label {
  /* Simple page reset */
  margin:0;
  padding:0;
}

.timeline{
  /* Setting default text color, background and a font stack */
  color:#555555;
  font-size:0.825em;
  /*Ubackground: #000000;*/
  font-family:Arial, Helvetica, sans-serif;
}

.event{
  /* Contains the event header and body list */
  float:left;
  padding:4px;
  text-align:left;
  width:163px;
  margin:0 5px 50px;
}


#timelineLimiter{
  /* Hides the overflowing timeline */
  'width:100%;
  overflow:hidden;
  padding:50px 0 40px;
  margin:0 0 40px 0;
  overflow: hidden; background: #ffffff;
}

#timelineLimiter .eventList li {
  /* The individual events */
  background:#F4F4F4;
  border:1px solid #EEEEEE;
  list-style:none;
  margin:5px;
  padding:4px 7px;
}

#timelineLimiter .eventList li.image
{
  cursor: pointer;
}
  
  /* CSS3 rounded corners */
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}

.eventList li:hover{
  /* The hover state: */
  cursor:pointer;
  background:#E6F8FF;
  border:1px solid #D4E6EE;
  color:#548DA5;
}

#timelineLimiter li font{
  /* The event icon */
  display:block;
  float:left;
  height:16px;
  margin-right:5px;
  width:16px;
}

/* Individual background ../images for each type of event: */

li.news font.icon { background:url(../images/timeline/icons/newspaper.png) no-repeat; }
li.image font.icon { background:url(../images/timeline/icons/camera.png) no-repeat; }
li.milestone font.icon { background:url(../images/timeline/icons/chart.png) no-repeat; }

div.content{
  /* This div contains additional data for the content */
  display:none;
}
.inlineMenuItem.content {display:block !important;}

.eventHeading{
  /* The colorful year headings at the top */
  font-size:2em;
  margin:-5px -5px 10px;
  padding:2px 5px;
  text-align:center;
}

/* Three color styles for the headings: */

.eventHeading.chreme{
  background:#FBF7F0;
  border:1px solid #EEE4D4;
  color:#A78B5F;
}

.eventHeading.black{
  background:#606060;
  border:1px solid #D4E6EE;
  color:#ffffff;
}


.eventHeading.yellow{
  background:#D2AA2D;
  border:1px solid #D4E6EE;
  color:#ffffff;
}

.eventHeading.red{
  background:#8e0c3a;
  border:1px solid #D4E6EE;
  color:#ffffff;
}

.eventHeading.blue{
  background:#E6F8FF;
  border:1px solid #D4E6EE;
  color:#548DA5;
}

.eventHeading.green{
  background:#E6FFDF none repeat scroll 0 0;
  border:1px solid #C9E6C1;
  color:#6EA85F;
}

#scroll{
  /* The small timeline below the main one. Hidden here and shown by jQuery if JS is enabled: */
  display:none;
  height:30px;

  background:#F5F5F5;
  border:1px solid #EEEEEE;
  color:#999999;
}

.scrollPoints{
  /* The individual years */
  float:left;
  font-size:1.4em;
  padding:4px 10px;
  text-align:center;
  width:45px;
  
  position:relative;
  z-index:10;
}

#centered{
  /* Centers the years, width is assigned by jQuery */
  margin:0 auto;
  position:relative;
}

#slider{
  /* Holds the scroll bar */
  margin:10px auto;
  height:25px;
  display:none;
}

#bar{
  /* The scroll bar */
  background:url(../images/timeline/slider_center.png) repeat-x center center;
  height:25px;
  cursor:pointer;
}

#barLeft{
  background:transparent url(../images/timeline/slider.png) no-repeat scroll left center;
  height:25px;
  width:20px;
  left:0;
  top:0;
  position:absolute;
}

#barRight{
  background:transparent url(../images/timeline/slider.png) no-repeat scroll right center;
  height:25px;
  position:absolute;
  right:0;
  top:0;
  width:20px;
}

#overlay{
  /* The overlay that darkens the page when an event is clicked */
  position:absolute;
  z-index:10;
  top:0;
  left:0;
  background-color:#222222;
}

#windowBox{
  /* Shows details about the event on click */
  position:absolute;
  z-index:20;
  background-color:#fcfcfc;
  padding:10px;
  border:2px solid #666666;
  overflow:auto;
}

#titleDiv{
  /* The title of the windowBox */
  background:#F5F5F5;
  border:1px solid #EEEEEE;
  color:#AAAAAA;
  font-size:1.5em;
  margin-bottom:10px;
  padding:5px 10px;
}

#date{
  /* The date on the bottom of the windowBox */
  bottom:20px;
  color:#999999;
  font-size:0.8em;
  font-style:italic;
  position:absolute;
  right:15px;
  padding:2px;
  background:#FCFCFC;
}

#highlight{
  /* The blue highlight that moves with the scroll bar */
  height:30px;
  position:absolute;
  z-index: 0;
  left:0;
  top:0;
  width: 300px;
  
  background: #ffe8f0;
  border:1px solid #ffe8f0;
  border-width:0 1px;
}

.clear{
  clear:both;
}



p.foots{
  /* The tutorial info on the bottom of the page */
  height: 100px;
  position:absolute;
  bottom:0px;
  background:#8e0c3a;
  width:1000px;
  text-indent:-10001px; 
}
/* Ecom Additions */

div.article.timeline
{
  width: 900px;
}

div.article.timeline h1
{
  display: none;
}

div.article.timeline a
{
  border-bottom: 0px;
}