/**

default behavior is 5 equally spaced cells:

<div class="note_expandy">
    <div onclick="expand_next(this);">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
    </div>
    <div style="display: none;">
        <h1>company info:</h1>
        stuff and things: <a href="">example.com</a><br>
        test<br>
    </div>
</div>



**/




/********* default layout. 5 equally spaced cells ****************************************/

.note_expandy {
    /* perimeter */
    border: 0px solid #ffffff;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    /* arrangement */
    display: block;
    width: 100%; /* fallback */
    width: calc(100% - 0px);
    min-width: 100%; /* fallback */
    min-width: calc(100% - 0px);
    max-width: 100%; /* fallback */
    max-width: calc(100% - 0px);
    /* interior */
    word-break: break-word;
    /* font */
    /* applying a default font to the expandy row. */
    /* have consciously chosen to apply it to expandy row, not to body. */
    /* body, sub element 1, subsub element 1a, sub element 2 may want different fonts, */
    /* so thats how it will be structured */
    font-family: "soft_curve", sans-serif;
    font-size: 14px;
    letter-spacing: .3px;
    line-height: 20px;
    color: #446372;
    -webkit-text-stroke: 0.05px #34464e;
    /*-webkit-text-stroke: 0.15px #34464e;*/    }

.note_expandy > div:first-child {
    /* perimeter */
    border: 0px solid #ff0202;
    border-collapse: separate;
    border-spacing: 4px 0px;
    padding: 0px;
    margin: 0px 0px 4px 0px;
    /* arrangement */
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    display: table;
    table-layout: fixed;
    /* interior */
    overflow: hidden;
    word-break: break-word;    }

.note_expandy > div:first-child > div {
    /* perimeter */
    border-radius: 7px;
    border: 0px solid #000000;
    padding: 4px 9px 4px 9px;
    margin: 0px;
    /* arrangement */
    display:table-cell;
    width: 20%;
    min-width: 20%;
    max-width: 20%;  

    


    /* white-space: nowrap; */
    overflow: hidden;

    /*border-collapse: collapse;*/
    border-spacing: 0 0px;

  }



.note_expandy > div:last-child {
    /* perimeter */
    border: 0px solid #ff0202;
    border-radius: 7px;
    padding: 4px 9px 4px 9px;
    
    /*border: 1px solid #79a896;
    width: calc(100% - 27px);
    max-width: calc(100% - 27px);*/
    margin: 4px;
    /* arrangement */
    /* purposefully not specifying width to take advantage of display: block */
    /* width: 100%; */
    /* min-width: 100%; */
    /* max-width: 100%; */
    display: block;
    /* interior */
    background-color: #cdd7ed;


   }


/* behaviour of content inside an note_expandy */
.note_expandy a {
    /* arrangement */
    display: inline-block;
    /* font */
    line-break: anywhere;
    color: #749edd;
    -webkit-text-stroke: 0.2px #749edd;
    text-decoration: none;    }
.note_expandy a:visited {
    /* font */
    color: #749edd;
    -webkit-text-stroke: 0.2px #749edd;     }
.note_expandy a:hover {
    /* font */
    color: #6184bb;
    -webkit-text-stroke: 0.2px #6184bb;      }


/* behaviour of content inside an note_expandy */
.note_expandy h1 {
    /* perimeter */
    margin: 0px 0px 0px 0px;
    padding: 0px;
    /* arrangement */
    display: block; /* so that you dont need a breakline after every damn element */
    /* font */
    font-size: 14px;
    -webkit-text-stroke: 0.5px #294958;
    color: #294958;
    font-weight: normal;
    letter-spacing: .4px;    }



/* indicators/classification */

/* hot pink */
.note_expandy.indicator_different_no > div:first-child > div,
.note_expandy.indicator_different_no > div:last-child {
    background-color: #fa9ed1;    }
/* dark red */
.note_expandy.indicator_solid_no > div:first-child > div,
.note_expandy.indicator_solid_no > div:last-child {
    background-color: #ff8777;    }
/* medium red */
.note_expandy.indicator_medium_no > div:first-child > div,
.note_expandy.indicator_medium_no > div:last-child {
    background-color: #faa99e;    }
/* light red */
.note_expandy.indicator_light_no > div:first-child > div,
.note_expandy.indicator_light_no > div:last-child {
    background-color: #ffd0ca;    }
/* lime green */
.note_expandy.indicator_solid_progress > div:first-child > div,
.note_expandy.indicator_solid_progress > div:last-child {
    background-color: #b8d864;    }
/* light blue */
.note_expandy.indicator_light_cool > div:first-child > div,
.note_expandy.indicator_light_cool > div:last-child {
    background-color: #cbe1e7;    }
/* dark blue */
.note_expandy.indicator_medium_cool > div:first-child > div,
.note_expandy.indicator_medium_cool > div:last-child {
    background-color: #aed5ff;    }
/* light yellow */
.note_expandy.indicator_light_stalled > div:first-child > div,
.note_expandy.indicator_light_stalled > div:last-child {
    background-color: #feff96;    }
/* dark yellow */
.note_expandy.indicator_medium_stalled > div:first-child > div,
.note_expandy.indicator_medium_stalled > div:last-child {
    background-color: #e9dd75;    }
/* gray */
.note_expandy.indicator_neutral > div:first-child > div,
.note_expandy.indicator_neutral > div:last-child {
    background-color: #c9c9c9    }



/********* alternative layout. 2 short cells, 1 wide cell *******************************/

/**

<div class="note_expandy wide_last">
    <div onclick="expand_next(this);">
        <div>test</div>
        <div>test</div>
        <div>test</div>
    </div>
    <div style="display: none;">
        <h1>company info:</h1>
        stuff and things: <a href="">example.com</a><br>
        test<br>
    </div>
</div>

**/

.note_expandy.wide_last > div:first-child > div:last-child {
    /* arrangement */
    display:table-cell;
    width: 60%;
    min-width: 60%; 
    max-width: 60%;   }