--- a/sat_templates/templates/default/static/styles.css	Fri Sep 14 19:49:15 2018 +0200
+++ b/sat_templates/templates/default/static/styles.css	Wed Oct 03 21:00:24 2018 +0200
@@ -1,8 +1,24 @@
+/*************
+ * Constants *
+ *************/
+
 :root {
+  --box-bg-color: #efefef;
+  --box--expand_limit: 20rem;
+  --box--expand_height-min: 9rem;
   --select-bg-color: #ddd;
-  --size-medium: 3em;
+  --size-medium: 3rem;
+  --color-prim: #fafafa;
+  --color-prim--light: #ffffff;
+  --color-prim--dark: #c7c7c7;
+  --color-sec: #448aff;
+  --color-sec--light: #83b9ff;
+  --color-sec--dark: #005ecb;
 }
 
+/*****************
+ * Main Elements *
+ *****************/
 
 html {
     font-family: "sat-base-font";
@@ -37,16 +53,18 @@
     position: relative;
 }
 
-footer {
+.page__footer {
     text-align: center;
     font-size: 0.7em;
     font-weight: bold;
+    padding-top: 1em;
 }
-.title {
-    font-weight: bold;
-    text-align: center;
+
+.page__footer span {
+    background: white;
 }
 
+
 .post_confirm {
     text-align: center;
     background-color: lightgreen;
@@ -57,22 +75,132 @@
     margin: 1.5em auto;
 }
 
-/*** Generic ***/
+/**********
+ * States *
+ **********/
+
+.state_init {
+    cursor: pointer;
+}
+
+.other_lang.state_init>* {
+    display: none;
+}
+
+.show_if_init {
+    display: none;
+}
+
+.state_init.show_if_init {
+    /* unset is not working well here (it uses "inline", not element default) */
+    display: block;
+}
+
+.show_if_parent_init {
+    display: none;
+}
+
+.state_init>.show_if_parent_init {
+    display: block;
+}
+
+.show_if_parent_clicked {
+    display: none;
+}
 
-.button {
-    padding: 0.5em 1em;
-    background: #333;
-    color: #ccc;
+.state_clicked>.show_if_parent_clicked {
+    /* cf. .show_if_init */
+    display: block;
+}
+
+.state_clicked>span.show_if_parent_clicked {
+    /* cf. .show_if_init */
+    display: inline;
+}
+
+.state_clicked>.show_if_parent_not_clicked {
+    display: none;
+}
+
+.show_if_grandparent_clicked {
+    display: none;
+}
+
+.state_clicked>*>.show_if_grandparent_clicked {
+    /* cf. .show_if_init */
+    display: block;
+}
+
+.state_clicked>*>.show_if_grandparent_not_clicked {
+    display: none;
+}
+
+/***********
+ * Generic *
+ ***********/
+
+/** Buttons **/
+
+.btn {
+    padding: 0.3em 0.5em;
+    background-color: #222;
+    color: white;
     border: 1px solid #555;
     border-radius: 0.8em;
     font-weight: bold;
 }
 
 
-.button:hover {
-    background-color: #bc0000;
+.btn:hover {
+    background-color: var(--color-sec);
+}
+
+.btn-fold {
+    border: none;
+    border-radius: 1em;
+    background-color: var(--color-prim--light);
+    color: #727272;
+    font-weight: bold;
+    font-variant: small-caps;
+    padding: 0;
+    cursor: pointer;
+}
+
+.btn-fold:hover {
+    font-weight: bold;
+}
+
+/** Labels **/
+
+.labels {
+    text-align: right;
+    white-space: nowrap;
 }
 
+.labels a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.labels span {
+    font-variant: small-caps;
+    font-size: 0.8rem;
+    background-color: #ddd;
+    border-radius: 0.4em;
+    padding: 0 0.5em;
+    transition: all 0.5s;
+}
+
+.labels a>span {
+    cursor: pointer;
+}
+
+.labels a>span:hover {
+    box-shadow: 0px 0px 6px 1px #000;
+}
+
+/** instructions **/
+
 .instructions--head {
     font-size: 1.5em;
     text-align: center;
@@ -83,27 +211,95 @@
     font-style: italic;
 }
 
+/** images **/
+
+.img--center{
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+}
+
+.img--small {
+    height: 100px;
+}
+
+/** other language **/
+
+.other_lang.state_init>div.info>p {
+    margin: 0;
+    padding: 0.2em;
+    text-align: center;
+    font-style: italic;
+}
+
+/** misc **/
+
 .items_vert--centered {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-/*** boxes ***/
+.link--center {
+    display: block;
+    text-align: center;
+}
+
+/*********
+ * pages *
+ *********/
+
+.page__title {
+    text-align: center;
+
+}
+
+/*********
+ * boxes *
+ *********/
 
 .box {
-    background-color: #edf2ff;
-    border-radius: 0;
-    border-color: silver;
+    background: var(--color-prim--light);
+    position: relative;
+    border-top: solid 1px var(--color-prim-dark);
     margin: 0 auto;
+    padding: 2rem;
+    max-width: 100em;
+}
+
+.box__content {
+    text-align: justify;
+}
+
+.box__content img {
+    max-width: 100%;
+    margin: 0;
+}
+
+.box__content video {
+    max-width: 100%;
+    height: auto;
+}
+
+.box__content--plaintext {
+    white-space: pre-wrap;
+}
+
+
+.box--large {
+    max-width: 80rem;
+}
+
+.box--plain {
+    background-color: var(--box-bg-color);
 }
 
 .box--medium {
-    max-width: 50em;
+    max-width: 50rem;
 }
 
 .box--small {
-    max-width: 20em;
+    max-width: 20rem;
 }
 
 .box--hollow {
@@ -120,7 +316,75 @@
     border: none;
 }
 
+.box--comment {
+    max-width: 40rem;
+    background: var(--color-prim);
+}
+
 .box--center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.box--zero {
+/* box with no padding or decoration, used when we want only the margin */
+    border: none;
+    padding: 0;
+}
+
+.box--expand {
+    /* a box which is folded when too big */
+    max-height: var(--box--expand_limit);
+    overflow: hidden;
+    transition: max-height 0.5s;
+}
+
+.box__expand_zone {
+    /* zone to click to expand/fold the box */
+    cursor: pointer;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    transition: opacity 0.5s;
+}
+
+.box__expand_zone--top {
+    top: 0;
+}
+
+.box__expand_zone--bottom {
+    bottom: 0;
+}
+
+.box__expand_zone p {
+    background-color: white;
+    margin: 0;
+    text-align: center;
+    font-size: 0.8em;
+    font-variant: small-caps;
+}
+
+.state_clicked>.box__expand_zone {
+    opacity: 0;
+}
+
+.state_clicked>.box__expand_zone:hover {
+    opacity: 1;
+}
+
+.box__expand_zone--bottom::before {
+    /* we do a gradient to show that text can be expanded */
+    background-image: linear-gradient(to bottom,rgba(255,255,255,0),#ffffff);
+    display: block;
+    content: "";
+    width: 100%;
+    height: 4em;
+    border: none;
+}
+
+.state_clicked>.box__expand_zone--bottom::before {
+    display: none;
 }
 
 .box__tools {
@@ -140,8 +404,73 @@
     background-color: var(--select-bg-color);
 }
 
+.box__under {
+    /* block under a box showing action buttons */
+    border: none;
+    padding-top: 0;
+    padding-bottom: 0;
+    text-align: right;
+}
 
-/*** blocks ***/
+/********
+ * Blog *
+ ********/
+
+.blog__title {
+    font-weight: bold;
+    text-align: center;
+}
+
+.blog__title a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+.blog__metadata {
+    text-align: right;
+}
+
+.blog__author {
+    font-weight: bold;
+}
+
+.blog__author a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+.blog__author::after {
+    content: ", ";
+}
+
+.blog__date {
+}
+
+.blog__date a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+/**********
+ * Panels *
+ **********/
+
+.panel-drawer {
+    /* A panel which is hidden by default but can be
+       opened when it's clicked */
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height 0.5s, opacity 0.5s;
+}
+
+.panel-drawer.state_clicked {
+    opacity: 1;
+}
+
+/**********
+ * blocks *
+ **********/
 
 .block_separator {
     font-size: 1.4em;
@@ -160,7 +489,9 @@
     margin-top: 0.7em;
 }
 
-/*** lists ***/
+/*********
+ * lists *
+ *********/
 
 .list {
     list-style: none;
@@ -173,7 +504,9 @@
     color: inherit;
 }
 
-/*** grids ***/
+/*********
+ * Grids *
+ *********/
 
 .grid {
     display: flex;
@@ -207,11 +540,13 @@
     background-color: var(--select-bg-color);
 }
 
-/*** tables ***/
+/**********
+ * Tables *
+ **********/
 
 .table--main {
     margin: 1em auto;
-	border-collapse: collapse;
+    border-collapse: collapse;
     text-align: center;
 }
 
@@ -234,14 +569,15 @@
     font-weight: bold;
 }
 
-/*** avatars ***/
+/***********
+ * Avatars *
+ ***********/
 
 .avatar {
     height: 2rem;
     width: 2rem;
     align-content: center;
     justify-content: center;
-    background: #ccc;
     border-radius: 0.2rem;
 }
 
@@ -252,8 +588,6 @@
 
 .avatar--float-left {
     float: left;
-    margin-top: 0.3em;
-    margin-right: 0.5em;
 }
 
 .avatar__content {
@@ -271,13 +605,9 @@
     background:  #43d2f6;
 }
 
-/*** images ***/
-.img--small {
-    height: 100px;
-}
-
-
-/*** icons ***/
+/*********
+ * icons *
+ *********/
 
 .icon--medium {
     height: var(--size-medium);
@@ -287,6 +617,7 @@
 
 .icon--small {
     height: 1em;
+    vertical-align: middle;
 }
 
 .icon--soft {
@@ -297,7 +628,9 @@
 
 }
 
-/*** Messages ***/
+/************
+ * Messages *
+ ************/
 
 .message--info {
     max-width: 500px;
@@ -318,7 +651,9 @@
     text-align: center;
 }
 
-/*** Menus ***/
+/*********
+ * Menus *
+ *********/
 
 .menu ul {
     display: flex;
@@ -379,21 +714,23 @@
     background: #eee;
 }
 
-/*** containers ***/
+/**************
+ * containers *
+ **************/
 
 /* tabs */
 
-.tab_container {
+.tab__container {
     max-width: 1000px;
     margin: 0 auto;
 }
 
-.tab_header {
+.tab__header {
     background-color: white;
     border-bottom: 1px solid lightgrey;
 }
 
-.tab_header ul {
+.tab__header ul {
     display: flex;
     margin: 0;
     padding: 0;
@@ -401,7 +738,7 @@
     background-color: white;
 }
 
-.tab_page {
+.tab__page {
     box-sizing: border-box;
     padding-top: 2em;
     border: 1px solid lightgrey;
@@ -409,11 +746,11 @@
     display: None;
 }
 
-.tab_page.clicked {
+.tab__page.state_clicked {
     display: block;
 }
 
-.tab_button {
+.tab__btn {
     display: inline;
     color: grey;
     background-color: white;
@@ -426,29 +763,31 @@
     margin-bottom: -1px;
 }
 
-.tab_button.clicked {
+.tab__btn.state_clicked {
     /* background: lightgrey; */
     color: inherit;
     border-bottom: none;
 }
 
-li.tab_button:last-child {
+li.tab__btn:last-child {
     border-right: 1px solid lightgrey;
 }
 
-.tab_button input {
+.tab__btn input {
     display: None;
 }
 
-.tab_button label {
+.tab__btn label {
     margin: 1em;
 }
 
-.tab_button input:checked + label {
+.tab__button input:checked + label {
     font-weight: bold;
 }
 
-/*** Forms ***/
+/*********
+ * Forms *
+ *********/
 
 /* a form with only one field */
 
@@ -549,7 +888,9 @@
     width: 100%;
 }
 
-/* Textboxes */
+/*************
+ * Textboxes *
+ *************/
 
 .textbox {
     margin-left: auto;
@@ -572,49 +913,44 @@
     text-align: center;
 }
 
-/*** Navigation ***/
+/**************
+ * Navigation *
+ **************/
 
-.prev_next_links ul {
+.prev_next ul {
     list-style: none;
     display: flex;
-    padding: 0 2em;
+    padding: 0;
     margin: 0;
 }
 
-.prev_next_links li {
+.prev_next li {
     flex: 1;
 }
 
-.prev_next_links li.older_items {
+.prev_next li.prev_next__older {
     text-align: right;
 }
 
-.prev_next_links img {
-    display: block;
-}
 
-.prev_next_links .older_items img {
-    display: block;
-    margin-left: auto;
-    margin-right: 0;
-}
-
-.prev_next_links a {
+.prev_next a {
     display: inline-block;
     margin-top: 1em;
     padding: 0.2em;
     text-decoration: None;
     color: inherit;
     font-variant: small-caps;
-    background: rgba(200,200,200,0.6);
+    background-color: var(--color-prim--light);
     border-radius: 0.5em;
 }
 
-.prev_next_links a:hover {
+.prev_next a:hover {
     background-color: #ddd;
 }
 
-/*** XMLUI ***/
+/*********
+ * XMLUI *
+ *********/
 
 .xmlui_cont_vertical>* {
     display: block;
@@ -631,6 +967,47 @@
     font-weight: bold;
 }
 
+ul.xmlui_list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+}
+
+.xmlui_list li {
+    display: inline-flex;
+    background: #eee;
+    padding: 0.5em;
+    margin: 0.5em 0;
+    border: 1px solid silver;
+}
+
+.xmlui_list li:hover {
+    background: yellow;
+}
+
+.xmlui_list a {
+    display: flex;
+    width: 100%;
+    text-decoration: none;
+    color: inherit;
+}
+
+.xmlui_list a:visited {
+    color: inherit;
+}
+
+.xmlui_field__id {
+    font-style: italic;
+    padding-right: 1em;
+}
+
+.xmlui_field__title {
+    padding-right: 1em;
+}
+
+
+
 td a {
   /* we use <a> for non JS links in table
    * so we don't want specific color/text-decoration by default
@@ -640,7 +1017,9 @@
 }
 
 
-/*** Notifications ***/
+/*****************
+ * Notifications *
+ *****************/
 
 .notification.retry {
     position: fixed;
@@ -664,6 +1043,11 @@
 }
 
 @media (min-width: 800px) {
+
+    /*****************
+     * Main Elements *
+     *****************/
+
     html {
         background-size: auto;
     }
@@ -676,12 +1060,29 @@
         overflow: auto;
     }
 
-    /*** boxes ***/
+    /***********
+     * Generic *
+     ***********/
+
+    .btn-fold {
+        padding: 0.3em;
+    }
+
+    /** instructions **/
+
+    .instructions--alt {
+        padding-top: 3rem;
+        margin-bottom: 3rem;
+    }
+
+
+    /*********
+     * boxes *
+     *********/
 
     .box {
-        border-radius: 1em;
-        box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5);
-        width: 94%;
+        border-radius: 0.2em;
+        box-shadow: 2px 4px 4px 0px rgba(0,0,0,0.2);
         margin: 1em auto;
         border: solid 1px;
         border-color: #9ca0a8;
@@ -698,7 +1099,23 @@
         margin: 0.5em;
     }
 
-    /*** Forms ***/
+    .box--zero {
+        box-shadow: none;
+        border: none;
+        background: none;
+    }
+
+    .box__under {
+        /* block under a box showing action buttons */
+        box-shadow: none;
+        border: none;
+        background: none;
+        text-align: right;
+    }
+
+    /*********
+     * Forms *
+     *********/
 
     .form__panel--vertical {
         display: flex;
@@ -711,26 +1128,6 @@
         width: 95%;
     }
 
-    .main_menu a {
-        display: block;
-        padding: 2em 0;
-    }
-
-    .main_menu ul {
-        flex-direction: column;
-        padding-left: 2em;
-    }
-
-    .prev_next_links ul {
-        padding: 0 6em;
-    }
-
-    .instructions--alt {
-        padding-top: 3rem;
-    }
-
-    /*** forms ***/
-
     .form--single input:not([type="submit"]) {
         margin: 0 1em;
     }
@@ -744,4 +1141,18 @@
     .form--single .form_input {
         flex-direction: row;
     }
+
+    /*********
+     * Menus *
+     *********/
+
+    .main_menu a {
+        display: block;
+        padding: 1em 0;
+    }
+
+    .main_menu ul {
+        flex-direction: column;
+        padding-left: 2em;
+    }
 }