<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Plateforme LDT : Home</title>
<link rel="stylesheet" href="css/ldt-commun.css" type="text/css" />
<link rel="stylesheet" href="css/ldt-home.css" type="text/css" />
</head>
<body>
<div id="general_container">
<!-- BARRE DE TITRE COMMUNE -->
<ul class="floatlist" id="title_bar">
<li id="li_h1">
<h1><a href="#"><b>Lignes</b> de temps</a></h1>
</li>
<li id="li_search">
<form id="form_search">
<input id="search_text" name="q" value="" />
<input id="search_submit" type="submit" value="Rechercher" />
</form>
<li id="li_annotation">
<div class="fl">
<a href="#"><img src="img/annot_icon.png" id="annot_icon" /></a>
</div>
<div class="fl">
<a href="#">Annoter</a>
</div>
</li>
<li id="li_connexion">
<a href="#">Connexion</a>
</li>
</ul>
<!-- DERNIERS MEDIAS -->
<ul class="floatlist full_width" id="derniers_medias">
<li class="li_h2">
<h2>Derniers médias</h2>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
<div class="bulle_annot">250</div>
<p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
<p>par <a class="under" href="#">IRI</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
<div class="bulle_annot">250</div>
<p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
<p>par <a class="under" href="#">IRI</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
<div class="bulle_annot">250</div>
<p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
<p>par <a class="under" href="#">IRI</a> | 1h30</p>
</li>
</ul>
<!-- MEDIAS LES PLUS ANNOTÉS -->
<ul class="floatlist" id="plus_annotes">
<li class="li_h2">
<h2>Médias les plus annotés</h2>
</li>
<li class="li_media">
<a class="img_and_polemic" href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" />
<ul class="polemics">
<li class="pol-negative" style="width:17%">17%</li>
<li class="pol-positive" style="width:80%">80%</li>
<li class="pol-reference" style="width:33%">33%</li>
<li class="pol-question" style="width:33%">33%</li>
</ul></a>
<div class="bulle_annot">120</div>
<p><a href="#"><b>Lorem Ipsum</b></a></p>
<p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
<div class="bulle_annot">120</div>
<p><a href="#"><b>Lorem Ipsum</b></a></p>
<p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
<div class="bulle_annot">120</div>
<p><a href="#"><b>Lorem Ipsum</b></a></p>
<p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
<div class="bulle_annot">120</div>
<p><a href="#"><b>Lorem Ipsum</b></a></p>
<p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
<div class="bulle_annot">120</div>
<p><a href="#"><b>Lorem Ipsum</b></a></p>
<p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
<div class="bulle_annot">120</div>
<p><a href="#"><b>Lorem Ipsum</b></a></p>
<p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
<div class="bulle_annot">120</div>
<p><a href="#"><b>Lorem Ipsum</b></a></p>
<p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
</li>
<li class="li_media">
<a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
<div class="bulle_annot">120</div>
<p><a href="#"><b>Lorem Ipsum</b></a></p>
<p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
</li>
</ul>
<!-- GROUPES ACTIFS -->
<ul class="floatlist" id="groupes_actifs">
<li class="li_h2">
<h2>Groupes actifs</h2>
</li>
<li class="li_media">
<div class="img_groupes_actifs">
<a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
</div>
<div class="txt_groupes_actifs">
<div class="bulle_people">57</div>
<div class="bulle_annot">32</div>
<p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
</div>
</li>
<li class="li_media">
<div class="img_groupes_actifs">
<a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
<div class="lock_group"></div>
</div>
<div class="txt_groupes_actifs">
<div class="bulle_people">57</div>
<div class="bulle_annot">32</div>
<p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
</div>
</li>
<li class="li_media">
<div class="img_groupes_actifs">
<a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
</div>
<div class="txt_groupes_actifs">
<div class="bulle_people">57</div>
<div class="bulle_annot">32</div>
<p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
</div>
</li>
<li class="li_media">
<div class="img_groupes_actifs">
<a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
<div class="lock_group"></div>
</div>
<div class="txt_groupes_actifs">
<div class="bulle_people">57</div>
<div class="bulle_annot">32</div>
<p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
</div>
</li>
<li class="li_media">
<div class="img_groupes_actifs">
<a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
</div>
<div class="txt_groupes_actifs">
<div class="bulle_people">57</div>
<div class="bulle_annot">32</div>
<p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
</div>
</li>
</ul>
<!-- FOOTER COMMUN -->
<ul id="footer">
<li>
<a href="#">V.01.15</a>
</li>
<li>
<a href="#"> © 2011 IRI</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">A propos</a>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>