/*********************************/
/*HTML lists*/
/*********************************/


.styled-lists .item-container,
.richtext ul,
.richtext ol {
    padding-left:0;  /* Aligns to left of text, i.e. cancel padding added by browser */
}

/*----------*/
/* ul lists */
/*----------*/
.styled-lists ul .item:not(.no-bullet),
.richtext ul li {
    list-style-type: none;  /* Cancel builtin bullets */
    padding-left: 20px;  /* Recreate a padding to make room for our bullet */
    margin-left: 0px;
}

.richtext table ul li,
.richtext table ol li {
    display: table;  /* Without this instruction, in a table with text-align:center, list items are centered but bullets are to the left. See page "Tableau" of "casaferlin" test case, section "Tableau avec contenu aligne au centre" */
    border-collapse: initial;  /* Without this instruction, we inherit from "border-collapse" set on richtext tables; then, bullets are outside of tables. See page "Tableau" of "casaferlin" test case, section "Tableau avec contenu aligne au centre"*/
}
.styled-lists  ul .item:not(.no-bullet):before,
.richtext ul li:before{  /* Bullet generation */
    content: "•";
    float: left;
    display: inline-block;
    margin-left: -20px;  /* Must be equal to the padding on ul li */
}

/* Note: There are additional css for G008, T009 and MiniPWP */


/*----------*/
/* ol lists */
/*----------*/
/* 1rst solution : reserved spacing * /
.richtext ol li {
    margin-left: 2.5em; / *reserved spacing until 3 numbers* /
}
*/

/* 2nd solution : apply auto-increment numbers aligned to the left */
.richtext ol {
    counter-reset: listCounter; /* resets counter to 0*/
}
.richtext ol li {
    padding-left: 1.4em;  /* Recreate a padding to make room for our number. Depends on font size -> unit in em  */
    list-style-type: none;  /* Cancel builtin numbers */
}
.richtext ol li:before{
    content: counters(listCounter, ".") "."; /* Specifies the counter value */
    counter-increment: listCounter; /* Increments the counter */
    margin-left: -1.4em; /* Must be equal to the padding on ol li */
    padding-right: 0.6em;  /* Make the text not too close to the number and try to align approximately with the lines underneath (multi line item). Note: pseudo alignment breaks with numbers > 9 */

    /* Another solution would have been (with position:relative on ul li):
    position: absolute;
    left: 0;
    But the numbers would have been left aligned and would take the padding on ol li: less pretty on the screen (text too far from the number).
    So we are stuck with margin & padding hacks
    */
}
.richtext ol li li {
    padding-left: 2.2em;  /* Recreate a padding to make room for our number, which is a little larger (eg. 1.2). Depends on font size -> unit in em  */
}
.richtext ol li li::before {
    margin-left: -2.2em;  /* Must be equal to the padding on ol li li */
}
/* Specific instructions for ol list in table - Fixes a browser issue (when having numbers in a table, and numbers outside a table, the latter are not reset)*/
.richtext table ol {
    counter-reset: tableListCounter; /* resets counter to 0*/
}
.richtext table ol li:before{
    content: counters(tableListCounter, ".") "."; /* Specifies the counter value */
    counter-increment: tableListCounter; /* Increments the counter */
}