<html>
<link rel="shortcut icon" type="image/png" href="http://qzine.fr/styles/absolution/template/favicon.png" />
<head>
	<title>
	timeline tests
	</title>
</head>
 
<body bgcolor="#DCECF0">
<?php
	include('function.timeline.php');
	$tableau = array(
		"01/01/2007,30/12/2007" => "2007",
		"01/01/2008,30/12/2008" => "2008",
		"12/12/12" => "plus tard "
			);
	$tableau3 = array(
		"26/8/2008,05/7/2011" => "appart belge ",
		"15/09/2007,05/07/2008" => "kot belge ",
		"05/7/2011" => "out of bruxelles ",
		"04/03/2012" => "today ",
		"16/09/2006" => "pouetpouetpouetpouetpouetpouetpouetpouetpouetpouetpouetpouet",
		"15/09/2007,15/09/2011" => "St LucSt LucSt LucSt LucSt LucSt LucSt LucSt LucSt LucSt LucSt LucSt LucSt LucSt LucSt Luc ",
		"01/01/2007,30/12/2007" => "2007",
		"01/01/2008,30/12/2008" => "2008",
		"01/07/2012,04/07/2012" => "prochaine Japan expo",
"07/07/2015" => "uuuhuhk",
			);
		$tableau2 = array(
			"01/07/2012,04/07/2012" => "prochaine Japan expo",
			date('d/m/Y') => "today ",
			"12/12/12" => "plus tard ",
			);
	
	$timeline = new timeline();
	
//	echo $timeline->build($tableau, "asc");
	echo $timeline->frise($tableau3, "asc");
//	echo $timeline->css();
//	echo $timeline->duree("26/8/2008,05/7/2008");

?>
	
	<style type="text/css">
 body{
font-family: calibri,arial; 

} 
.timeline-tk{

    border: 1px solid #CCCCCC;
color: #222;
padding:5px;
position:absolute;
    overflow: hidden;
}
.box-frise{
	background: #fff;
	padding:5px 0;
}
.empreintes{
    display: block;
    height: 1600px;
    margin-left: -6px;
    margin-top: -100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 0;

}
.empreinte{ 
	border: 1px solid #ccc;
    display: block;
    height: 1600px;
    margin-left: 6px;
   top:0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 0;
	border: 1px solid #B5CEF2;
	background: #EFEFEF;
	background: rgba(239, 239, 239,0.5);
	
}
.date_fin{
float:right;
}
.box-bulle{
display: block;
}
.pik_vertical{
    background-attachment: scroll;
    background-color: transparent;
    background-image: url("pik.png");
    background-position: -50px 50%;
    display: block;
    height: 40px;
    margin-bottom: -43px;
    margin-left: 0;
    position: relative;
    width: 10px;
	    z-index: 1;
}
.pik{
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    height: 30px;
    margin-bottom: -30px;
    width: 30px;
}
.pik_fin{
    background-position: 20px 50%;
    margin-bottom: -22px;
    margin-left: -7px;
    width: 10px;
}

.precision{
    color: #444444;
    display: block;
    font-size: small;
    text-align: center;
}
.date{
font-size: small;
border-radius: 10px;
background: #ccc;
padding:1px 10px;
}
.bulle{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
	border-left: 2px solid #CCCCCC;
    display: inline-block;
	border-radius: 15px;
	position:relative;
	min-width: 200px;
	    z-index: 1;
		box-shadow: 0 0 10px #333;

}
.bulle:hover{
    background: #D1AFAF;
    border: 1px solid #DD9D25;
	border-left: 2px solid #DD9D25;
    display: inline-block;
	border-radius: 15px;
	position:relative;
}
.bulle:hover .date{
    background: #ddd;

}
.bulle_text{
	 word-wrap: break-word;
    display: block;
    padding: 10px;
	width:200px;

}

.pre_bulle{
    background: #cc0000;
    display: block;
    height: 8px;
    position: absolute;
    width: 3px;
	margin-left:4px;

}
.marqueurs{
display:block;
height:10px;

}
a{
text-decoration: none;
color: #883b12;
}
a:hover{
text-decoration: underline;
color: #e66a27;
}
.duree{
background:#AFE2FF !important;
color:#234D66;
max-width: 1000px;
	
}
.duree:hover{
background:orange !important;
}
        </style>
</body>

</html>