CSS: extract Saclay specific style items for categories and manage default ones

4 files changed, 660 insertions, 565 deletions

diff --git a/settings.py b/settings.py
index d5ccc57..e9750aa 100644
--- a/settings.py
+++ b/settings.py
@@ -20,6 +20,7 @@ STATIC_URL = '/static/'
 STATIC_ROOT = ROOT_PATH + 'static/'
 
 TINYMCE_URL = '/tinymce/'
+EXTRA_CSS = []
 JQUERY_JS_URLS = ('/javascript/jquery/jquery.js',
                   '/javascript/jquery-ui/jquery-ui.js',)
 JQUERY_CSS_URLS = ('/javascript/jquery-ui/css/smoothness/jquery-ui.css',
diff --git a/static/saclay/css/saclay.css b/static/saclay/css/saclay.css
new file mode 100644
index 0000000..d21f762
--- /dev/null
+++ b/static/saclay/css/saclay.css
@@ -0,0 +1,570 @@
+/* Saclay specific */
+#ul_categories li.main_category > span{
+    color:transparent;
+    font-size:0;
+}
+
+.main_category > span > label{
+    color:transparent;
+    font-size:0;
+}
+
+#main_category_1{
+    background-image:url('../images/categories/cat_culture.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_1.category-selected{
+    background-image:url('../images/categories/cat_culture_on.png');
+}
+
+#maincategory_1 label{
+    color:#cd5a5a;
+}
+
+#main_category_2{
+    background-image:url('../images/categories/cat_event.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_2.category-selected{
+    background-image:url('../images/categories/cat_event_on.png');
+}
+
+#maincategory_2 label{
+    color:#996998;
+}
+
+#main_category_3{
+    background-image:url('../images/categories/cat_patrimoine.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_3.category-selected{
+    background-image:url('../images/categories/cat_patrimoine_on.png');
+}
+
+#maincategory_3 label{
+    color:#c49c86;
+}
+
+#main_category_4{
+    background-image:url('../images/categories/cat_sport.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_4.category-selected{
+    background-image:url('../images/categories/cat_sport_on.png');
+}
+
+#maincategory_4 label{
+    color:#85ae7a;
+}
+
+#main_category_5{
+    background-image:url('../images/categories/cat_pratique.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_5.category-selected{
+    background-image:url('../images/categories/cat_pratique_on.png');
+}
+
+#maincategory_5 label{
+    color:#a8adad;
+}
+
+#main_category_6{
+    background-image:url('../images/categories/cat_mobilites.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_6.category-selected{
+    background-image:url('../images/categories/cat_mobilites_on.png');
+}
+
+#maincategory_6 label{
+    color:#697c92;
+}
+
+#main_category_7{
+    background-image:url('../images/categories/cat_agri.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_7.category-selected{
+    background-image:url('../images/categories/cat_agri_on.png');
+}
+
+#maincategory_7 label{
+    color:#eba44a;
+}
+
+#main_category_8{
+    background-image:url('../images/categories/cat_balade.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_8.category-selected{
+    background-image:url('../images/categories/cat_balade_on.png');
+}
+
+#maincategory_8 label{
+    color:#d38fac;
+}
+
+/*5 - Ressources pratiques - Commerces et services nocturnes*/
+#li_sub_5 label{
+    background-image:url('../images/subcategories/ress_5_off.png');
+}
+
+#li_sub_5 .selected label{
+    background-image:url('../images/subcategories/ress_5_on.png');
+}
+
+/*7 - Culture - Cinéma*/
+#li_sub_7 label{
+    background-image:url('../images/subcategories/cult_2_off.png');
+}
+
+#li_sub_7 .selected label{
+    background-image:url('../images/subcategories/cult_2_on.png');
+}
+
+/*11 - Agri-cultures - Jardins partagés*/
+#li_sub_11 label{
+    background-image:url('../images/subcategories/agri_6_off.png');
+}
+
+#li_sub_11 .selected label{
+    background-image:url('../images/subcategories/agri_6_on.png');
+}
+
+/*13 - Patrimoines - Sites archéologiques*/
+#li_sub_13 label{
+    background-image:url('../images/subcategories/patri_4_off.png');
+}
+
+#li_sub_13 .selected label{
+    background-image:url('../images/subcategories/patri_4_on.png');
+}
+
+/*15 - Balades - Balades pour tous*/
+#li_sub_15 label{
+    background-image:url('../images/subcategories/bala_2_off.png');
+}
+
+#li_sub_15 .selected label{
+    background-image:url('../images/subcategories/bala_2_on.png');
+}
+
+/*16 - Balades - Randonnées*/
+#li_sub_16 label{
+    background-image:url('../images/subcategories/bala_3_off.png');
+}
+
+#li_sub_16 .selected label{
+    background-image:url('../images/subcategories/bala_3_on.png');
+}
+
+/*17 - Sport et loisirs - Terrains de sport extérieurs*/
+#li_sub_17 label{
+    background-image:url('../images/subcategories/spor_3_off.png');
+}
+
+#li_sub_17 .selected label{
+    background-image:url('../images/subcategories/spor_3_on.png');
+}
+
+/*18 - Sport et loisirs - Parcs et jardins*/
+#li_sub_18 label{
+    background-image:url('../images/subcategories/spor_6_off.png');
+}
+
+#li_sub_18 .selected label{
+    background-image:url('../images/subcategories/spor_6_on.png');
+}
+
+/*19 - Sport et loisirs - Espaces jeux enfants et ados*/
+#li_sub_19 label{
+    background-image:url('../images/subcategories/spor_5_off.png');
+}
+
+#li_sub_19 .selected label{
+    background-image:url('../images/subcategories/spor_5_on.png');
+}
+
+/*20 - Sport et loisirs - Salles et équipements sportifs*/
+#li_sub_20 label{
+    background-image:url('../images/subcategories/spor_1_off.png');
+}
+
+#li_sub_20 .selected label{
+    background-image:url('../images/subcategories/spor_1_on.png');
+}
+
+/*21 - Ressources pratiques - Petit creux et dépannage*/
+#li_sub_21 label{
+    background-image:url('../images/subcategories/ress_2_off.png');
+}
+
+#li_sub_21 .selected label{
+    background-image:url('../images/subcategories/ress_2_on.png');
+}
+
+/*22 - Balades - Pique-nique et points d'eau*/
+#li_sub_22 label{
+    background-image:url('../images/subcategories/bala_6_off.png');
+}
+
+#li_sub_22 .selected label{
+    background-image:url('../images/subcategories/bala_6_on.png');
+}
+
+/*24 - Culture - Arts vivants*/
+#li_sub_24 label{
+    background-image:url('../images/subcategories/cult_1_off.png');
+}
+
+#li_sub_24 .selected label{
+    background-image:url('../images/subcategories/cult_1_on.png');
+}
+
+/*25 - Patrimoines - Bâtiments remarquables*/
+#li_sub_25 label{
+    background-image:url('../images/subcategories/patri_1_off.png');
+}
+
+#li_sub_25 .selected label{
+    background-image:url('../images/subcategories/patri_1_on.png');
+}
+
+/*26 - Ressources pratiques - Besoins et soins quotidiens*/
+#li_sub_26 label{
+    background-image:url('../images/subcategories/ress_1_off.png');
+}
+
+#li_sub_26 .selected label{
+    background-image:url('../images/subcategories/ress_1_on.png');
+}
+
+/*27 - Ressources pratiques - Jeter et recycler*/
+#li_sub_27 label{
+    background-image:url('../images/subcategories/ress_3_off.png');
+}
+
+#li_sub_27 .selected label{
+    background-image:url('../images/subcategories/ress_3_on.png');
+}
+
+/*29 - Culture - Visiter et voir*/
+#li_sub_29 label{
+    background-image:url('../images/subcategories/cult_5_off.png');
+}
+
+#li_sub_29 .selected label{
+    background-image:url('../images/subcategories/cult_5_on.png');
+}
+
+/*30 - Agri-cultures - AMAPs*/
+#li_sub_30 label{
+    background-image:url('../images/subcategories/agri_1_off.png');
+}
+
+#li_sub_30 .selected label{
+    background-image:url('../images/subcategories/agri_1_on.png');
+}
+
+/*31 - Agri-cultures - Exploitations agricoles*/
+#li_sub_31 label{
+    background-image:url('../images/subcategories/agri_3_off.png');
+}
+
+#li_sub_31 .selected label{
+    background-image:url('../images/subcategories/agri_3_on.png');
+}
+
+/*32 - Agri-cultures - Pédagogie de l'environnement*/
+#li_sub_32 label{
+    background-image:url('../images/subcategories/agri_5_off.png');
+}
+
+#li_sub_32 .selected label{
+    background-image:url('../images/subcategories/agri_5_on.png');
+}
+
+/*33 - Agri-cultures - Pour jardiner*/
+#li_sub_33 label{
+    background-image:url('../images/subcategories/agri_2_off.png');
+}
+
+#li_sub_33 .selected label{
+    background-image:url('../images/subcategories/agri_2_on.png');
+}
+
+/*34 - Mobilités - Boutique et location vélos*/
+#li_sub_34 label{
+    background-image:url('../images/subcategories/mob_1_off.png');
+}
+
+#li_sub_34 .selected label{
+    background-image:url('../images/subcategories/mob_1_on.png');
+}
+
+/*35 - Culture - Bibliothèques*/
+#li_sub_35 label{
+    background-image:url('../images/subcategories/cult_3_off.png');
+}
+
+#li_sub_35 .selected label{
+    background-image:url('../images/subcategories/cult_3_on.png');
+}
+
+
+/*36 - Événements - Spectacles*/
+#li_sub_36 label{
+    background-image:url('../images/subcategories/even_1_off.png');
+}
+
+#li_sub_36 .selected label{
+    background-image:url('../images/subcategories/even_1_on.png');
+}
+
+/*37 - Événements - Randonnées*/
+#li_sub_37 label{
+    background-image:url('../images/subcategories/even_2_off.png');
+}
+
+#li_sub_37 .selected label{
+    background-image:url('../images/subcategories/even_2_on.png');
+}
+
+/*38 - Événements - Sports*/
+#li_sub_38 label{
+    background-image:url('../images/subcategories/even_3_off.png');
+}
+
+#li_sub_38 .selected label{
+    background-image:url('../images/subcategories/even_3_on.png');
+}
+
+/*39 - Événements - Conférences et projections*/
+#li_sub_39 label{
+    background-image:url('../images/subcategories/even_4_off.png');
+}
+
+#li_sub_39 .selected label{
+    background-image:url('../images/subcategories/even_4_on.png');
+}
+
+/*40 - Événements - Brocantes*/
+#li_sub_40 label{
+    background-image:url('../images/subcategories/even_5_off.png');
+}
+
+#li_sub_40 .selected label{
+    background-image:url('../images/subcategories/even_5_on.png');
+}
+
+/*41 - Événements - Réunions publiques*/
+#li_sub_41 label{
+    background-image:url('../images/subcategories/even_6_off.png');
+}
+
+#li_sub_41 .selected label{
+    background-image:url('../images/subcategories/even_6_on.png');
+}
+
+/*42 - Événements - Maison de l'environnement mobile*/
+#li_sub_42 label{
+    background-image:url('../images/subcategories/even_7_off.png');
+}
+
+#li_sub_42 .selected label{
+    background-image:url('../images/subcategories/even_7_on.png');
+}
+
+/*43 - Culture - Apprendre et pratiquer*/
+#li_sub_43 label{
+    background-image:url('../images/subcategories/cult_4_off.png');
+}
+
+#li_sub_43 .selected label{
+    background-image:url('../images/subcategories/cult_4_on.png');
+}
+
+/*44 - Culture - Campus ouvert*/
+#li_sub_44 label{
+    background-image:url('../images/subcategories/cult_6_off.png');
+}
+
+#li_sub_44 .selected label{
+    background-image:url('../images/subcategories/cult_6_on.png');
+}
+
+/*45 - Patrimoines - Bio-diversité*/
+#li_sub_45 label{
+    background-image:url('../images/subcategories/patri_2_off.png');
+}
+
+#li_sub_45 .selected label{
+    background-image:url('../images/subcategories/patri_2_on.png');
+}
+
+/*46 - Patrimoines - Eau et rigoles*/
+#li_sub_46 label{
+    background-image:url('../images/subcategories/patri_3_off.png');
+}
+
+#li_sub_46 .selected label{
+    background-image:url('../images/subcategories/patri_3_on.png');
+}
+
+/*47 - Patrimoines - Paysages*/
+#li_sub_47 label{
+    background-image:url('../images/subcategories/patri_5_off.png');
+}
+
+#li_sub_47 .selected label{
+    background-image:url('../images/subcategories/patri_5_on.png');
+}
+
+/*48 - Patrimoines - Récits et témoignages*/
+#li_sub_48 label{
+    background-image:url('../images/subcategories/patri_6_off.png');
+}
+
+#li_sub_48 .selected label{
+    background-image:url('../images/subcategories/patri_6_on.png');
+}
+
+/*49 - Sport et loisirs - Pistes et parcours sportifs*/
+#li_sub_49 label{
+    background-image:url('../images/subcategories/spor_2_off.png');
+}
+
+#li_sub_49 .selected label{
+    background-image:url('../images/subcategories/spor_2_on.png');
+}
+
+/*50 - Sport et loisirs - Associations et clubs de sport*/
+#li_sub_50 label{
+    background-image:url('../images/subcategories/spor_4_off.png');
+}
+
+#li_sub_50 .selected label{
+    background-image:url('../images/subcategories/spor_4_on.png');
+}
+
+/*51 - Sport et loisirs - Associations et clubs de loisirs*/
+#li_sub_51 label{
+    background-image:url('../images/subcategories/spor_7_off.png');
+}
+
+#li_sub_51 .selected label{
+    background-image:url('../images/subcategories/spor_7_on.png');
+}
+
+/*52 - Mobilités - Voitures en partage*/
+#li_sub_52 label{
+    background-image:url('../images/subcategories/mob_2_off.png');
+}
+
+#li_sub_52 .selected label{
+    background-image:url('../images/subcategories/mob_2_on.png');
+}
+
+/*53 - Mobilités - Lignes et stations bus et cars*/
+#li_sub_53 label{
+    /*background-image:url('../images/subcategories/mob_3_off.png');*/
+    background-image:url('../images/subcategories/mob_3_disabled.png');
+    color:#ccc;
+}
+
+#ul_categories .subcategories #li_sub_53 .selected label{
+    /*background-image:url('../images/subcategories/mob_3_on.png');*/
+    background-image:url('../images/subcategories/mob_3_disabled.png');
+    color:#ccc;
+}
+
+/*54 - Mobilités - Lignes et stations RER*/
+#li_sub_54 label{
+    background-image:url('../images/subcategories/mob_4_off.png');
+}
+
+#li_sub_54 .selected label{
+    background-image:url('../images/subcategories/mob_4_on.png');
+}
+
+/*55 - Mobilités - Chemins piétons et sentiers*/
+#li_sub_55 label{
+    background-image:url('../images/subcategories/mob_5_off.png');
+}
+
+#li_sub_55 .selected label{
+    background-image:url('../images/subcategories/mob_5_on.png');
+}
+
+/*56 - Mobilités - Itinéraires cyclables*/
+#li_sub_56 label{
+    background-image:url('../images/subcategories/mob_6_off.png');
+}
+
+#li_sub_56 .selected label{
+    background-image:url('../images/subcategories/mob_6_on.png');
+}
+
+/*57 - Balades - Sentiers découvertes*/
+#li_sub_57 label{
+    background-image:url('../images/subcategories/bala_1_off.png');
+}
+
+#li_sub_57 .selected label{
+    background-image:url('../images/subcategories/bala_1_on.png');
+}
+
+
+/*58 - Balades - Vélo*/
+#li_sub_58 label{
+    background-image:url('../images/subcategories/bala_4_off.png');
+}
+
+#li_sub_58 .selected label{
+    background-image:url('../images/subcategories/bala_4_on.png');
+}
+
+/*59 - Balades - Équestre*/
+#li_sub_59 label{
+    background-image:url('../images/subcategories/bala_5_off.png');
+}
+
+#li_sub_59 .selected label{
+    background-image:url('../images/subcategories/bala_5_on.png');
+}
+
+/*60 - Ressources pratiques - Wifi, courrier et espèces*/
+#li_sub_60 label{
+    background-image:url('../images/subcategories/ress_4_off.png');
+}
+
+#li_sub_60 .selected label{
+    background-image:url('../images/subcategories/ress_4_on.png');
+}
+
+/*61 - Agri-cultures - Marché et vente à la ferme*/
+#li_sub_61 label{
+    background-image:url('../images/subcategories/agri_4_off.png');
+}
+
+#li_sub_61 .selected label{
+    background-image:url('../images/subcategories/agri_4_on.png');
+}
+
+/*62 - Événements - Exposition*/
+#li_sub_62 label{
+    background-image:url('../images/subcategories/even_8_off.png');
+}
+
+#li_sub_62 .selected label{
+    background-image:url('../images/subcategories/even_8_on.png');
+}
diff --git a/static/saclay/css/styles-saclay.css b/static/saclay/css/styles.css
index 3db40f9..0965a5d 100644
--- a/static/saclay/css/styles-saclay.css
+++ b/static/saclay/css/styles.css
@@ -1064,8 +1064,6 @@ ul#ul_categories{
 }
 
 #ul_categories li.main_category > span{
-    color:transparent;
-    font-size:0;
     display:block;
     height:40px;
     padding:0;
@@ -1105,13 +1103,14 @@ ul#ul_categories{
 
 .main_category > span > label{
     display:block;
-    width:100%;
+    width:242px;
+    padding:0 20px;
     height:40px;
+    line-height:40px;
     background-image:url('../images/plus.png');
     background-repeat:no-repeat;
     background-position:90% center;
-    color:transparent;
-    font-size:0;
+    color:#fff;
 }
 
 .main_category > span.category-selected > label{
@@ -1132,6 +1131,7 @@ ul#ul_categories{
     padding:5px 0 0 9px;
     height:21px;
     font-weight:bold;
+    background-color:#fff;
 }
 
 #ul_categories .subcategories li .selected label{
@@ -1142,565 +1142,6 @@ ul#ul_categories{
     display:none;
 }
 
-#main_category_1{
-    background-image:url('../images/categories/cat_culture.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_1.category-selected{
-    background-image:url('../images/categories/cat_culture_on.png');
-}
-
-#maincategory_1 label{
-    color:#cd5a5a;
-}
-
-#main_category_2{
-    background-image:url('../images/categories/cat_event.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_2.category-selected{
-    background-image:url('../images/categories/cat_event_on.png');
-}
-
-#maincategory_2 label{
-    color:#996998;
-}
-
-#main_category_3{
-    background-image:url('../images/categories/cat_patrimoine.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_3.category-selected{
-    background-image:url('../images/categories/cat_patrimoine_on.png');
-}
-
-#maincategory_3 label{
-    color:#c49c86;
-}
-
-#main_category_4{
-    background-image:url('../images/categories/cat_sport.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_4.category-selected{
-    background-image:url('../images/categories/cat_sport_on.png');
-}
-
-#maincategory_4 label{
-    color:#85ae7a;
-}
-
-#main_category_5{
-    background-image:url('../images/categories/cat_pratique.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_5.category-selected{
-    background-image:url('../images/categories/cat_pratique_on.png');
-}
-
-#maincategory_5 label{
-    color:#a8adad;
-}
-
-#main_category_6{
-    background-image:url('../images/categories/cat_mobilites.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_6.category-selected{
-    background-image:url('../images/categories/cat_mobilites_on.png');
-}
-
-#maincategory_6 label{
-    color:#697c92;
-}
-
-#main_category_7{
-    background-image:url('../images/categories/cat_agri.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_7.category-selected{
-    background-image:url('../images/categories/cat_agri_on.png');
-}
-
-#maincategory_7 label{
-    color:#eba44a;
-}
-
-#main_category_8{
-    background-image:url('../images/categories/cat_balade.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_8.category-selected{
-    background-image:url('../images/categories/cat_balade_on.png');
-}
-
-#maincategory_8 label{
-    color:#d38fac;
-}
-
-/*5 - Ressources pratiques - Commerces et services nocturnes*/
-#li_sub_5 label{
-    background-image:url('../images/subcategories/ress_5_off.png');
-}
-
-#li_sub_5 .selected label{
-    background-image:url('../images/subcategories/ress_5_on.png');
-}
-
-/*7 - Culture - Cinéma*/
-#li_sub_7 label{
-    background-image:url('../images/subcategories/cult_2_off.png');
-}
-
-#li_sub_7 .selected label{
-    background-image:url('../images/subcategories/cult_2_on.png');
-}
-
-/*11 - Agri-cultures - Jardins partagés*/
-#li_sub_11 label{
-    background-image:url('../images/subcategories/agri_6_off.png');
-}
-
-#li_sub_11 .selected label{
-    background-image:url('../images/subcategories/agri_6_on.png');
-}
-
-/*13 - Patrimoines - Sites archéologiques*/
-#li_sub_13 label{
-    background-image:url('../images/subcategories/patri_4_off.png');
-}
-
-#li_sub_13 .selected label{
-    background-image:url('../images/subcategories/patri_4_on.png');
-}
-
-/*15 - Balades - Balades pour tous*/
-#li_sub_15 label{
-    background-image:url('../images/subcategories/bala_2_off.png');
-}
-
-#li_sub_15 .selected label{
-    background-image:url('../images/subcategories/bala_2_on.png');
-}
-
-/*16 - Balades - Randonnées*/
-#li_sub_16 label{
-    background-image:url('../images/subcategories/bala_3_off.png');
-}
-
-#li_sub_16 .selected label{
-    background-image:url('../images/subcategories/bala_3_on.png');
-}
-
-/*17 - Sport et loisirs - Terrains de sport extérieurs*/
-#li_sub_17 label{
-    background-image:url('../images/subcategories/spor_3_off.png');
-}
-
-#li_sub_17 .selected label{
-    background-image:url('../images/subcategories/spor_3_on.png');
-}
-
-/*18 - Sport et loisirs - Parcs et jardins*/
-#li_sub_18 label{
-    background-image:url('../images/subcategories/spor_6_off.png');
-}
-
-#li_sub_18 .selected label{
-    background-image:url('../images/subcategories/spor_6_on.png');
-}
-
-/*19 - Sport et loisirs - Espaces jeux enfants et ados*/
-#li_sub_19 label{
-    background-image:url('../images/subcategories/spor_5_off.png');
-}
-
-#li_sub_19 .selected label{
-    background-image:url('../images/subcategories/spor_5_on.png');
-}
-
-/*20 - Sport et loisirs - Salles et équipements sportifs*/
-#li_sub_20 label{
-    background-image:url('../images/subcategories/spor_1_off.png');
-}
-
-#li_sub_20 .selected label{
-    background-image:url('../images/subcategories/spor_1_on.png');
-}
-
-/*21 - Ressources pratiques - Petit creux et dépannage*/
-#li_sub_21 label{
-    background-image:url('../images/subcategories/ress_2_off.png');
-}
-
-#li_sub_21 .selected label{
-    background-image:url('../images/subcategories/ress_2_on.png');
-}
-
-/*22 - Balades - Pique-nique et points d'eau*/
-#li_sub_22 label{
-    background-image:url('../images/subcategories/bala_6_off.png');
-}
-
-#li_sub_22 .selected label{
-    background-image:url('../images/subcategories/bala_6_on.png');
-}
-
-/*24 - Culture - Arts vivants*/
-#li_sub_24 label{
-    background-image:url('../images/subcategories/cult_1_off.png');
-}
-
-#li_sub_24 .selected label{
-    background-image:url('../images/subcategories/cult_1_on.png');
-}
-
-/*25 - Patrimoines - Bâtiments remarquables*/
-#li_sub_25 label{
-    background-image:url('../images/subcategories/patri_1_off.png');
-}
-
-#li_sub_25 .selected label{
-    background-image:url('../images/subcategories/patri_1_on.png');
-}
-
-/*26 - Ressources pratiques - Besoins et soins quotidiens*/
-#li_sub_26 label{
-    background-image:url('../images/subcategories/ress_1_off.png');
-}
-
-#li_sub_26 .selected label{
-    background-image:url('../images/subcategories/ress_1_on.png');
-}
-
-/*27 - Ressources pratiques - Jeter et recycler*/
-#li_sub_27 label{
-    background-image:url('../images/subcategories/ress_3_off.png');
-}
-
-#li_sub_27 .selected label{
-    background-image:url('../images/subcategories/ress_3_on.png');
-}
-
-/*29 - Culture - Visiter et voir*/
-#li_sub_29 label{
-    background-image:url('../images/subcategories/cult_5_off.png');
-}
-
-#li_sub_29 .selected label{
-    background-image:url('../images/subcategories/cult_5_on.png');
-}
-
-/*30 - Agri-cultures - AMAPs*/
-#li_sub_30 label{
-    background-image:url('../images/subcategories/agri_1_off.png');
-}
-
-#li_sub_30 .selected label{
-    background-image:url('../images/subcategories/agri_1_on.png');
-}
-
-/*31 - Agri-cultures - Exploitations agricoles*/
-#li_sub_31 label{
-    background-image:url('../images/subcategories/agri_3_off.png');
-}
-
-#li_sub_31 .selected label{
-    background-image:url('../images/subcategories/agri_3_on.png');
-}
-
-/*32 - Agri-cultures - Pédagogie de l'environnement*/
-#li_sub_32 label{
-    background-image:url('../images/subcategories/agri_5_off.png');
-}
-
-#li_sub_32 .selected label{
-    background-image:url('../images/subcategories/agri_5_on.png');
-}
-
-/*33 - Agri-cultures - Pour jardiner*/
-#li_sub_33 label{
-    background-image:url('../images/subcategories/agri_2_off.png');
-}
-
-#li_sub_33 .selected label{
-    background-image:url('../images/subcategories/agri_2_on.png');
-}
-
-/*34 - Mobilités - Boutique et location vélos*/
-#li_sub_34 label{
-    background-image:url('../images/subcategories/mob_1_off.png');
-}
-
-#li_sub_34 .selected label{
-    background-image:url('../images/subcategories/mob_1_on.png');
-}
-
-/*35 - Culture - Bibliothèques*/
-#li_sub_35 label{
-    background-image:url('../images/subcategories/cult_3_off.png');
-}
-
-#li_sub_35 .selected label{
-    background-image:url('../images/subcategories/cult_3_on.png');
-}
-
-
-/*36 - Événements - Spectacles*/
-#li_sub_36 label{
-    background-image:url('../images/subcategories/even_1_off.png');
-}
-
-#li_sub_36 .selected label{
-    background-image:url('../images/subcategories/even_1_on.png');
-}
-
-/*37 - Événements - Randonnées*/
-#li_sub_37 label{
-    background-image:url('../images/subcategories/even_2_off.png');
-}
-
-#li_sub_37 .selected label{
-    background-image:url('../images/subcategories/even_2_on.png');
-}
-
-/*38 - Événements - Sports*/
-#li_sub_38 label{
-    background-image:url('../images/subcategories/even_3_off.png');
-}
-
-#li_sub_38 .selected label{
-    background-image:url('../images/subcategories/even_3_on.png');
-}
-
-/*39 - Événements - Conférences et projections*/
-#li_sub_39 label{
-    background-image:url('../images/subcategories/even_4_off.png');
-}
-
-#li_sub_39 .selected label{
-    background-image:url('../images/subcategories/even_4_on.png');
-}
-
-/*40 - Événements - Brocantes*/
-#li_sub_40 label{
-    background-image:url('../images/subcategories/even_5_off.png');
-}
-
-#li_sub_40 .selected label{
-    background-image:url('../images/subcategories/even_5_on.png');
-}
-
-/*41 - Événements - Réunions publiques*/
-#li_sub_41 label{
-    background-image:url('../images/subcategories/even_6_off.png');
-}
-
-#li_sub_41 .selected label{
-    background-image:url('../images/subcategories/even_6_on.png');
-}
-
-/*42 - Événements - Maison de l'environnement mobile*/
-#li_sub_42 label{
-    background-image:url('../images/subcategories/even_7_off.png');
-}
-
-#li_sub_42 .selected label{
-    background-image:url('../images/subcategories/even_7_on.png');
-}
-
-/*43 - Culture - Apprendre et pratiquer*/
-#li_sub_43 label{
-    background-image:url('../images/subcategories/cult_4_off.png');
-}
-
-#li_sub_43 .selected label{
-    background-image:url('../images/subcategories/cult_4_on.png');
-}
-
-/*44 - Culture - Campus ouvert*/
-#li_sub_44 label{
-    background-image:url('../images/subcategories/cult_6_off.png');
-}
-
-#li_sub_44 .selected label{
-    background-image:url('../images/subcategories/cult_6_on.png');
-}
-
-/*45 - Patrimoines - Bio-diversité*/
-#li_sub_45 label{
-    background-image:url('../images/subcategories/patri_2_off.png');
-}
-
-#li_sub_45 .selected label{
-    background-image:url('../images/subcategories/patri_2_on.png');
-}
-
-/*46 - Patrimoines - Eau et rigoles*/
-#li_sub_46 label{
-    background-image:url('../images/subcategories/patri_3_off.png');
-}
-
-#li_sub_46 .selected label{
-    background-image:url('../images/subcategories/patri_3_on.png');
-}
-
-/*47 - Patrimoines - Paysages*/
-#li_sub_47 label{
-    background-image:url('../images/subcategories/patri_5_off.png');
-}
-
-#li_sub_47 .selected label{
-    background-image:url('../images/subcategories/patri_5_on.png');
-}
-
-/*48 - Patrimoines - Récits et témoignages*/
-#li_sub_48 label{
-    background-image:url('../images/subcategories/patri_6_off.png');
-}
-
-#li_sub_48 .selected label{
-    background-image:url('../images/subcategories/patri_6_on.png');
-}
-
-/*49 - Sport et loisirs - Pistes et parcours sportifs*/
-#li_sub_49 label{
-    background-image:url('../images/subcategories/spor_2_off.png');
-}
-
-#li_sub_49 .selected label{
-    background-image:url('../images/subcategories/spor_2_on.png');
-}
-
-/*50 - Sport et loisirs - Associations et clubs de sport*/
-#li_sub_50 label{
-    background-image:url('../images/subcategories/spor_4_off.png');
-}
-
-#li_sub_50 .selected label{
-    background-image:url('../images/subcategories/spor_4_on.png');
-}
-
-/*51 - Sport et loisirs - Associations et clubs de loisirs*/
-#li_sub_51 label{
-    background-image:url('../images/subcategories/spor_7_off.png');
-}
-
-#li_sub_51 .selected label{
-    background-image:url('../images/subcategories/spor_7_on.png');
-}
-
-/*52 - Mobilités - Voitures en partage*/
-#li_sub_52 label{
-    background-image:url('../images/subcategories/mob_2_off.png');
-}
-
-#li_sub_52 .selected label{
-    background-image:url('../images/subcategories/mob_2_on.png');
-}
-
-/*53 - Mobilités - Lignes et stations bus et cars*/
-#li_sub_53 label{
-    /*background-image:url('../images/subcategories/mob_3_off.png');*/
-    background-image:url('../images/subcategories/mob_3_disabled.png');
-    color:#ccc;
-}
-
-#ul_categories .subcategories #li_sub_53 .selected label{
-    /*background-image:url('../images/subcategories/mob_3_on.png');*/
-    background-image:url('../images/subcategories/mob_3_disabled.png');
-    color:#ccc;
-}
-
-/*54 - Mobilités - Lignes et stations RER*/
-#li_sub_54 label{
-    background-image:url('../images/subcategories/mob_4_off.png');
-}
-
-#li_sub_54 .selected label{
-    background-image:url('../images/subcategories/mob_4_on.png');
-}
-
-/*55 - Mobilités - Chemins piétons et sentiers*/
-#li_sub_55 label{
-    background-image:url('../images/subcategories/mob_5_off.png');
-}
-
-#li_sub_55 .selected label{
-    background-image:url('../images/subcategories/mob_5_on.png');
-}
-
-/*56 - Mobilités - Itinéraires cyclables*/
-#li_sub_56 label{
-    background-image:url('../images/subcategories/mob_6_off.png');
-}
-
-#li_sub_56 .selected label{
-    background-image:url('../images/subcategories/mob_6_on.png');
-}
-
-/*57 - Balades - Sentiers découvertes*/
-#li_sub_57 label{
-    background-image:url('../images/subcategories/bala_1_off.png');
-}
-
-#li_sub_57 .selected label{
-    background-image:url('../images/subcategories/bala_1_on.png');
-}
-
-
-/*58 - Balades - Vélo*/
-#li_sub_58 label{
-    background-image:url('../images/subcategories/bala_4_off.png');
-}
-
-#li_sub_58 .selected label{
-    background-image:url('../images/subcategories/bala_4_on.png');
-}
-
-/*59 - Balades - Équestre*/
-#li_sub_59 label{
-    background-image:url('../images/subcategories/bala_5_off.png');
-}
-
-#li_sub_59 .selected label{
-    background-image:url('../images/subcategories/bala_5_on.png');
-}
-
-/*60 - Ressources pratiques - Wifi, courrier et espèces*/
-#li_sub_60 label{
-    background-image:url('../images/subcategories/ress_4_off.png');
-}
-
-#li_sub_60 .selected label{
-    background-image:url('../images/subcategories/ress_4_on.png');
-}
-
-/*61 - Agri-cultures - Marché et vente à la ferme*/
-#li_sub_61 label{
-    background-image:url('../images/subcategories/agri_4_off.png');
-}
-
-#li_sub_61 .selected label{
-    background-image:url('../images/subcategories/agri_4_on.png');
-}
-
-/*62 - Événements - Exposition*/
-#li_sub_62 label{
-    background-image:url('../images/subcategories/even_8_off.png');
-}
-
-#li_sub_62 .selected label{
-    background-image:url('../images/subcategories/even_8_on.png');
-}
 
 
 /* itinéraire */
@@ -2383,3 +1824,85 @@ input#id_name{
 #waiting-content{
     margin-top:20%;
 }
+
+#ul_categories .subcategories#maincategory_1 li .selected label,
+.main_category.toggle_plus > span#main_category_1 > label,
+.main_category.toggle_minus > span#main_category_1 > label{
+    background-color:#cd5a5a;
+}
+
+#maincategory_1 label{
+    color:#cd5a5a;
+}
+
+#ul_categories .subcategories#maincategory_2 li .selected label,
+.main_category.toggle_plus > span#main_category_2 > label,
+.main_category.toggle_minus > span#main_category_2 > label{
+    background-color:#996998;
+}
+
+#maincategory_2 label{
+    color:#996998;
+}
+
+#ul_categories .subcategories#maincategory_3 li .selected label,
+.main_category.toggle_plus > span#main_category_3 > label,
+.main_category.toggle_minus > span#main_category_3 > label{
+    background-color:#c49c86;
+}
+
+#maincategory_3 label{
+    color:#c49c86;
+}
+
+#ul_categories .subcategories#maincategory_4 li .selected label,
+.main_category.toggle_plus > span#main_category_4 > label,
+.main_category.toggle_minus > span#main_category_4 > label{
+    background-color:#85ae7a;
+}
+
+#maincategory_4 label{
+    color:#85ae7a;
+}
+
+#ul_categories .subcategories#maincategory_5 li .selected label,
+.main_category.toggle_plus > span#main_category_5 > label,
+.main_category.toggle_minus > span#main_category_5 > label{
+    background-color:#a8adad;
+}
+
+#maincategory_5 label{
+    color:#a8adad;
+}
+
+#ul_categories .subcategories#maincategory_6 li .selected label,
+.main_category.toggle_plus > span#main_category_6 > label,
+.main_category.toggle_minus > span#main_category_6 > label{
+    background-color:#697c92;
+}
+
+#maincategory_6 label{
+    color:#697c92;
+}
+
+#ul_categories .subcategories#maincategory_7 li .selected label,
+.main_category.toggle_plus > span#main_category_7 > label,
+.main_category.toggle_minus > span#main_category_7 > label{
+    background-color:#eba44a;
+}
+
+#maincategory_7 label{
+    color:#eba44a;
+}
+
+#ul_categories .subcategories#maincategory_8 li .selected label,
+.main_category.toggle_plus > span#main_category_8 > label,
+.main_category.toggle_minus > span#main_category_8 > label{
+    background-color:#d38fac;
+}
+
+#maincategory_8 label{
+    color:#d38fac;
+}
+
+
diff --git a/templates/chimere/base.html b/templates/chimere/base.html
index ceb0156..f870020 100644
--- a/templates/chimere/base.html
+++ b/templates/chimere/base.html
@@ -4,7 +4,8 @@
 <link rel="shortcut icon" href="{{ STATIC_URL }}saclay/images/favicon.png"/>
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/styles.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/print.css" media='print'/>
-<link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/styles-saclay.css" />
+<link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/styles.css" />
+{% for css in EXTRA_CSS %}<link rel="stylesheet" href="{{ css }}" />{% endfor %}
 <link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/print.css" media='print'/>
 {% if css_area %}
 <link rel="stylesheet" href="{{ css_area }}" />{% endif %}