/* ~~~~~~~~~~~~~~~~~~ define the 2 main containers ~~~~~~~~~~~~~~~~~~ */

#timelineMonitor {
	width:738px; /*828px;*/
	height:262px;
	background-color:;
	position:relative;
}
#timelineContainer {
	position:relative;
	overflow:auto;
	overflow-x:scroll;
	overflow-y:hidden;
	overflow:-moz-scrollbars-horizontal;
	/*width:828px;*/
	width:738px;
    height:95px;
    border-top: 1px solid white;
    
    scrollbar-base-color: #fff;
    scrollbar-3d-light-color: #fff;
    scrollbar-arrow-color: #15486D;
    scrollbar-darkshadow-color: #fff;
    scrollbar-face-color: #fff;
    scrollbar-highlight-color: #fff;
    scrollbar-shadow-color: #fff;
    scrollbar-track-color: #15486D;    
}
div[id="timelineContainer"] {
	height:12px;
}
#timeline {
	width:809px;
	height:95px;
	background-image:url(../images/content/historie/timeline.gif);
}

/* 
 *
 * @TODO: fix the width of the 2 containers #timelineMonitorText & #timelineMonitorImageContainer
 *
 */
#timelineMonitor #timelineMonitorImageContainer { 
	position:absolute;
	top:0;
	left:0;
	width:369px; /* old: width:414px; */
	height:262px;
	overflow:hidden;
	background-color:#b2b2b2;
	text-align:right;
}
#timelineMonitor #timelineMonitorText { 
	position:absolute;
	top:0px;
	left:369px;
	width:368px; /*old: width:414px;*/
	height:262px;
	overflow:auto;
	background-color: white;
	border-left: 1px solid #9c9c9c;
}

#timelineMonitor #timelineMonitorText .article {
	padding:25px;
	color:#666666;
	line-height: 130%;
}
#timelineMonitor #timelineMonitorText .article h2 {
	color:#4673b5;
}
#timelineMonitor #timelineMonitorText .article p {
}    
/* ~~~~~~~~~~~~~~~~~~ override the common styles for links ~~~~~~~~~~~~~~~~~~ */
div#timeline a {
	background-image:none;
	border:0;
	padding:0;
	margin:0;
}
div#timeline a:hover {
	background-image:none;
	border:0;
	padding:0;
	margin:0;
}

/* ~~~~~~~~~~~ styles for the "timepoints" ~~~~~~~~~~~ */
.timepoint { 
	font-size:10px;
	width:9px;
	height:13px; 
	cursor:pointer;
}
.timepoint:hover { 
	cursor:pointer;
}
.timepoint a {
	position:absolute;
	display:block;
	width:9px;
	height:13px; 
	background-color:#FFAE00;
}
.timepoint a:hover, .timepoint a.timepoint_on { 
	background-color: yellow;
}
.timepoint a span { 
	display:none;
	font-size:1px;
}

/* ~~~~~~~~~~~~~~~~~~ styles for additional timepoints ~~~~~~~~~~~~~~~~~~ */
.timepoint.extraClassNameExample a { background-color:brown; }

/* define the width of the different timepoint lengths */
.len1  a { width:9px; }
.len2  a { width:19px; }
.len3  a { width:29px; }
.len4  a { width:39px; }
.len5  a { width:49px; }
.len6  a { width:59px; }
.len7  a { width:69px; }
.len8  a { width:79px; }
.len9  a { width:89px; }
.len10 a { width:99px; }
.len11 a { width:109px; }
.len12 a { width:119px; }
.len13 a { width:129px; }
.len14 a { width:139px; }
.len15 a { width:149px; }
.len16 a { width:159px; }
.len17 a { width:169px; }
.len18 a { width:179px; }
.len19 a { width:189px; }
.len20 a { width:199px; }
.len21 a { width:209px; }
.len22 a { width:219px; }
.len23 a { width:229px; }
.len24 a { width:239px; }
.len25 a { width:249px; }
.len26 a { width:259px; }
.len27 a { width:269px; }
.len28 a { width:279px; }
.len29 a { width:289px; }
.len30 a { width:299px; }

/* define one of three positions */
.row1 { top:1px; }
.row2 { top:16px; }
.row3 { top:30px; }

#nicetitle {
	position:absolute;
	top:0px;
	left:0px;
	padding:10px;
	border:1px solid #666;
	width:150px;
	background-color:white;
	font-size:11px;
	color: gray;
	text-align: left;
}
#nicetitle h1 {
    color: #006699;
	margin:0;
	font-size:11px;
}
#nicetitle p {
	margin:0;
	font-size:10px;
}

/* ~~~~~~~~~~~~~~~~~~ styles for image switcher ~~~~~~~~~~~~~~~~~~ */

#timeline-image-switch {
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}
#timeline-image-switch ul {
	margin: 0px;
	padding: 0px;
}
#timeline-image-switch ul li {
	display: block;
	float: left;
	height:10px;
	width:30px;
}
#timeline-image-switch ul li a {
	display: block;
	width: 30px;
	height: 10px;
}
#timeline-image-switch ul li a span {
	display:none;
}
#timeline-image-switch ul li.prev a {
	background: transparent url(/styles/basic/image-switch/prevbtn.gif) 0px -10px no-repeat;
}
#timeline-image-switch ul li.next a {
	background: transparent url(/styles/basic/image-switch/nextbtn.gif) 0px -10px no-repeat;
}
#timeline-image-switch ul li.prev a:hover, #timeline-image-switch ul li.next a:hover {
	background-position: 0px 0px;
}