<CSS>

/* Trello-like board page. Each included sub page will be treated as a Trello column */

.level1 { /* board */

    padding-bottom: 1em;
    display: grid;
    grid-auto-columns: 272px;
    grid-auto-flow: column;
    gap: 1em;
    align-items: end;
    overflow-x: scroll;    
    font-family: "AvenirNextCondensed-Bold", "Futura-CondensedExtraBold", HelveticaNeue-CondensedBold, "Ubuntu Condensed", "Liberation Sans Narrow", "Franklin Gothic Demi Cond", "Arial Narrow", sans-serif-condensed, Arial, "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif;
    }
    
.level1 {
    --scrollbar-width: 32px; 
    --scrollbar-color: #e8f5a7;    
    --scrollbar-background-color: #AAA;
    }

.level1                            { scrollbar-width: var(--scrollbar-width); }
.level1::-webkit-scrollbar         {           width: var(--scrollbar-width); }
            
.level1                            {  scrollbar-color: var(--scrollbar-color)                                                         var(--scrollbar-background-color); }
.level1::-webkit-scrollbar-thumb   { background-color: var(--scrollbar-color); } .level1::-webkit-scrollbar-track { background-color: var(--scrollbar-background-color); }

.wrap_board, .level1 .level1 { display: none }
    
.level1 .plugin_include_content { /* cards-list */
    border: 1px solid #c5c5c5;
    border-radius: 0.5em;
    background-color: #eaffe7;
    padding: 0.5em;
    height: max-content;
    }
   
.level3 { /* card */
    border: 1px solid #c5c5c5;
    box-shadow: 0 1px 0 rgba(9,30,66,.25);
    border-radius: 0.5em;
    background-color: white;
    padding: 4em 0.5em 0.5em 0.5em;
    margin-top: -3.5em;    
    }
    
.level1 .plugin_include_content h3{
    margin: 1.25em 0.5em 0.5em 0.5em;
    }
    
.level1 h2 {
    margin: 0.5em 0 0.5em 0;
    border-bottom: 0px !important;
    }
    
.level1 .secedit { margin-top: 1em !important }

.level1 .section_highlight{ vertical-align: top !important; box-shadow: 4px 4px 4px #0000008c; border: 1px solid #AAA !important; margin: 0px !important; padding: 0.5em !important; }

.dw-content>.level1, #plugin_include__projects__cycling__tdf_smart_trainer__roadmap>.level1 {
    transform: rotateX(180deg);
    }
    
.dw-content>.level1>*, #plugin_include__projects__cycling__tdf_smart_trainer__roadmap>.level1>* {
    transform: rotateX(180deg);
    }
    
/* Full screen button */

.wrap_fullscreen-button,
.wrap_window-button {
    position: absolute;
    left: 0px;
    top: 0px;
    margin-left: 1.5em;
    padding: 1em;
    font-weight: 800;
    font-size: 1.5em;
    text-decoration: none;
   }
.wrap_window-button {
    display: none;
   }

.wrap_fullscreen-button a, .wrap_fullscreen-button a:visited,
.wrap_window-button a, .wrap_window-button a:visited 
    { text-decoration: none }
  
</CSS>

<JS>

jQuery(function() {

    jQuery(".wrap_short"                      ).each(function() { jQuery(this).html("short-term"     ); jQuery(this).css("margin-left", "-54px" );});
    jQuery(".wrap_mid"                        ).each(function() { jQuery(this).html("mid-term"       ); jQuery(this).css("margin-left", "-45px" );});
    jQuery(".wrap_long"                       ).each(function() { jQuery(this).html("long-term"      ); jQuery(this).css("margin-left", "-50px" );});
    jQuery(".wrap_short_mid, .wrap_short-mid" ).each(function() { jQuery(this).html("short/mid-term" ); jQuery(this).css("margin-left", "-64px" );});
    jQuery(".wrap_mid_long,  .wrap_mid-long"  ).each(function() { jQuery(this).html("mid/long-term"  ); jQuery(this).css("margin-left", "-75px" );});

    jQuery(".level1 h2").each(function() {

        var id   = jQuery(this).parent().attr("id");
        var page = id.replace("plugin_include__projects__cycling__tdf_smart_trainer__", "");

        jQuery(this).append('<span style="float: right"><a style="color: #a2ff78" href="'+page+'">👁</a></span>');

    });
});

</JS>