--- a/src/hdalab/static/hdalab/css/cattree.css	Sat Feb 28 07:31:59 2015 +0100
+++ b/src/hdalab/static/hdalab/css/cattree.css	Mon Mar 02 18:10:47 2015 +0100
@@ -1,9 +1,9 @@
 .leftzone {
-    width: 280px;
+    width: 360px;
     min-height: 400px;
     float: left;
     height: 100%;
-    padding-right: 20px;
+    padding-right: 10px;
     border-right: 1px solid #999;
 }
 
@@ -12,11 +12,11 @@
 }
 
 .leftzone h3 {
-    font-size: 13px; font-weight: bold; margin: 30px 0 5px;
+    font-size: 13px; font-weight: bold; margin: 20px 0 5px;
 }
 
 .leftzone input {
-    background: #ffffff; width: 260px; font-size: 14px; font-weight: bold; margin: 5px 0;
+    background: #ffffff; width: 340px; font-size: 14px; font-weight: bold; margin: 5px 0;
 }
 
 .results {
@@ -27,20 +27,159 @@
     color: #000060;
 }
 
-ul.disciplist, ul.theslist {
-    list-style: none; margin: 10px 5px;
+ul.disciplist {
+    list-style: none;
+    margin: 15px 33px 0px;
+    text-align: center;
+    overflow: hidden;
+    height: 282px;
+    -webkit-transition: all 1000ms ease;
+    -moz-transition: all 1000ms ease;
+    -o-transition: all 1000ms ease;
+    transition: all 1000ms ease;
+}
+
+ul.disciplist.extend {
+   height: 564px;
+}
+
+.disciplist li {
+    font-size: 12px;
+    font-weight: bold;
+    float:left;
+    width: 90px;
+    height: 86px;
+    margin: 4px;
+    position: relative;
+}
+
+/* .disciplist li:nth-child(n+10) {   */
+/*   visibility: hidden; */
+/*   display:none; */
+/* } */
+/* .disciplist.all li {   */
+/*   visibility: visible; */
+/*   display:inherit; */
+/* } */
+
+#morecategories {
+	border-top: 1px solid;
+	background: url("../img/asc.gif") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);
+	margin: 4px 36px;
+	height: 10px;
+	padding: 4px;
+	text-align: center;
+}
+#morecategories:hover {
+	cursor: pointer;
+}
+#morecategories.less{
+	background: url("../img/desc.gif") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);
 }
 
-.disciplist li, .theslist li {
-    font-size: 12px; font-weight: bold;
+.disciplist li img {
+    display: block;
+    width: 90px;
+    height: 86px;
+}
+.disciplist li a {
+    background-color: rgba(0, 0, 0, 0.8);
+    display: table;
+    height: 86px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    transition: background 0.5s ease 0s;
+    width: 90px;
+}
+.disciplist li a > span {
+    color: #fff;
+    display: table-cell;
+    font-family: "FranklinGothic",Arial,Helvetica,sans-serif;
+    font-size: 1.2rem;
+    font-weight: 300;
+    padding-top: 60px;
+    text-align: center;
+    text-transform: uppercase;
+    vertical-align: middle;
+}
+.disciplist li a > span span {
+    display: block;
+    font-size: 1.3rem;
+    text-transform: none;
+}
+.disciplist li a.arts-plastiques::before {
+    background-position: left -50px;
+}
+.disciplist li a.arts-decoratifs::before {
+    background-position: left -100px;
+}
+.disciplist li a.arts-jardins::before {
+    background-position: left -150px;
+}
+.disciplist li a.arts-cirque::before {
+    background-position: left -200px;
+}
+.disciplist li a.arts-numeriques::before {
+    background-position: left -250px;
+}
+.disciplist li a.bd::before {
+    background-position: left -300px;
+}
+.disciplist li a.chanson::before {
+    background-position: left -350px;
 }
-
-.disciplist a, .theslist a {
-    color: #000066;
+.disciplist li a.cinema::before {
+    background-position: left -400px;
+}
+.disciplist li a.danse::before {
+    background-position: left -450px;
+}
+.disciplist li a.design::before {
+    background-position: left -500px;
+}
+.disciplist li a.dessin::before {
+    background-position: left -550px;
+}
+.disciplist li a.litterature::before {
+    background-position: left -600px;
+}
+.disciplist li a.musique::before {
+    background-position: left -650px;
+}
+.disciplist li a.mode::before {
+    background-position: left -700px;
+}
+.disciplist li a.peinture::before {
+    background-position: left -750px;
 }
-
-.disciplist .selected a, .theslist .selected a {
-    color: #0000ff;
+.disciplist li a.photographie::before {
+    background-position: left -800px;
+}
+.disciplist li a.poesie::before {
+    background-position: left -850px;
+}
+.disciplist li a.sculpture::before {
+    background-position: left -900px;
+}
+.disciplist li a.theatre::before {
+    background-position: left -950px;
+}
+.disciplist li a::before {
+    background: url("../img/icos-sheets.png") no-repeat scroll left top rgba(0, 0, 0, 0);
+    content: "";
+    display: block;
+    height: 0;
+    left: 50%;
+    margin-left: -25px;
+    overflow: hidden;
+    padding: 50px 0 0 50px;
+    position: absolute;
+    top: 10px;
+    width: 0;
+}
+.disciplist li a:hover, .disciplist li.selected a {
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
 .ui-autocomplete strong {
@@ -48,5 +187,5 @@
 }
 
 div.cattree {
-    margin: 10px 0 0 320px;
+    margin: 10px 0 0 390px;
 }

Binary file src/hdalab/static/hdalab/img/icos-sheets.png has changed

Binary file src/hdalab/static/hdalab/img/thumb-architecture.jpg has changed

Binary file src/hdalab/static/hdalab/img/thumb-cinema.jpg has changed

Binary file src/hdalab/static/hdalab/img/thumb-musique.jpg has changed

Binary file src/hdalab/static/hdalab/img/thumb-peinture.jpg has changed

Binary file src/hdalab/static/hdalab/img/thumb-photographie.jpg has changed

Binary file src/hdalab/static/hdalab/img/thumb-poesie.jpg has changed

--- a/src/hdalab/static/hdalab/js/cattree.js	Sat Feb 28 07:31:59 2015 +0100
+++ b/src/hdalab/static/hdalab/js/cattree.js	Mon Mar 02 18:10:47 2015 +0100
@@ -57,4 +57,15 @@
         gettree($(this).text().trim());
         $("#catsearch").val("");
     });
-});
\ No newline at end of file
+    $("#morecategories").click(function(){
+    	if ($(".disciplist").hasClass('extend')){
+    		$(".disciplist").removeClass('extend');
+    		$("#morecategories").removeClass('less');
+    	}
+    	else{
+    		$(".disciplist").addClass('extend');
+    		$("#morecategories").addClass('less');
+    	}
+    });
+});
+

--- a/src/hdalab/templates/categories.html	Sat Feb 28 07:31:59 2015 +0100
+++ b/src/hdalab/templates/categories.html	Mon Mar 02 18:10:47 2015 +0100
@@ -41,16 +41,27 @@
             Seules les ressources les plus pertinentes sont affichées.
         </p>
         <ul class="disciplist">
-            <li><a href="#">Architecture</a></li>
-            <li><a href="#">Cinéma</a></li>
-            <li><a href="#">Littérature</a></li>
-            <li><a href="#">Musique</a></li>
-            <li><a href="#">Peinture</a></li>
-            <li><a href="#">Photographie</a></li>
-            <li><a href="#">Poésie</a></li>
-            <li><a href="#">Sculpture</a></li>
-            <li><a href="#">Théâtre</a></li>
+            <li><a class="cinema" href="#"><span>Cinéma</span></a></li>
+            <li><a class="architecture" href="#"><span>Architecture</span></a></li>
+            <li><a class="peinture" href="#"><span>Peinture</span></a></li>
+            <li><a class="litterature" href="#"><span>Littérature</span></a></li>
+            <li><a class="musique" href="#"><span>Musique</span></a></li>
+            <li><a class="theatre" href="#"><span>Théâtre</span></a></li>
+            <li><a class="photographie" href="#"><span>Photographie</span></a></li>
+            <li><a class="poesie" href="#"><span>Poésie</span></a></li>
+            <li><a class="sculpture" href="#"><span>Sculpture</span></a></li>
+            <li><a class="arts-jardins" href="#"><span>Arts de Jardins</span></a></li>
+            <li><a class="arts-cirque" href="#"><span>Arts du Cirque</span></a></li>
+            <li><a class="arts-numeriques" href="#"><span>Arts Numériques</span></a></li>
+            <li><a class="bd" href="#"><span>Bande Dessinée</span></a></li>
+            <li><a class="chanson" href="#"><span>Chanson</span></a></li>
+            <li><a class="danse" href="#"><span>Danse</span></a></li>
+            <li><a class="design" href="#"><span>Design</span></a></li>
+            <li><a class="dessin" href="#"><span>Dessin</span></a></li>
+            <li><a class="mode" href="#"><span>Mode</span></a></li>
         </ul>
+        <div id="morecategories">{% trans 'Voir plus ou moins de categories' %}</div>
+        
         <h3>Recherche de catégories de Wikipédia&nbsp;: </h3>
         <p>
             <form id="catform"><input id="catsearch" placeholder="{% trans 'Entrez une catégorie'%}"/></form>