x-more-less-indicator {
    display: inline;
    float: right;
    color: #428bca;
}

x-more-less-indicator.listFormat {
    display: inline;
    float: none;
    color: #428bca;
}

x-more-less-indicator:hover {
    cursor: pointer;
}

/* Less and more visual indicators are always hidden. To be 
   conditionally overridden by the related styles below. */
x-more-less-indicator > .less {
    display: none;
}

x-more-less-indicator > .more {
    display: none;
}

/* If expanded then display then display less indicator. */
x-more-less[expanded] x-more-less-indicator > .less {
    display: inline;
}

/* If expanded then display then display more indicator. */
x-more-less:not([expanded]) x-more-less-indicator > .more {
    display: inline;
}

/* Provides a way to override all previous settings and 
    hide the indicator altogether. */
x-more-less-indicator.more-less-hidden {
    display: none;
}

/* Provide a way to hide the line items controlled by the x-more-less. */
x-more-less .more-less-hidden-item {
    display: none;
}