style.css

.wrapper {
    display: grid;
    /* grid-template-columns: 330px 440px 440px 220px 500px 440px; */ /* Use when Variable area is displayed */
    grid-template-columns: 330px 440px 220px 500px 500px 440px; /* Use when Variable area is hidden */
    grid-template-rows: repeat(1, 1fr);
    grid-gap: 10px;
}

.wrapper div {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

.page-header img {
    float: left;
    width: 50px;
    height: 50px;
    background: #555;
  }
  
 .page-header h1 {
    position: relative;
    top: 10px;
    left: 10px; 
  }

#label-storyworld-name {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

#list-commands-area {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

#list-area {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}

#list-of-storylets {
    width: 290px;
}

#edit-field-area {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}

#variable-commands-area {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}

#edit-variable-area {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
}

#actor-branching-commands-area {
    /* grid-column: 4 / span 1; */ /* Use when Variable area is displayed */
    grid-column: 3 / span 1; /* Use when Variable area is hidden */
    grid-row: 1 / span 1;
}

#actor-branching-area {
    /* grid-column: 4 / span 1; */ /* Use when Variable area is displayed */
    grid-column: 3 / span 1; /* Use when Variable area is hidden */
    grid-row: 2 / span 1;
}

#list-of-branches {
    width: 180px;
}

#player-commands-area {
    /* grid-column: 5 / span 1; */ /* Use when Variable area is displayed */
    grid-column: 4 / span 1; /* Use when Variable area is hidden */
    grid-row: 1 / span 1;
}

#player-area {
    /* grid-column: 5 / span 1; */ /* Use when Variable area is displayed */
    grid-column: 4 / span 1; /* Use when Variable area is hidden */
    grid-row: 2 / span 1;
}

#json-commands-area {
    grid-column: 6 / span 1;
    grid-row: 1 / span 1;
}

#created-json-area {
    grid-column: 6 / span 1;
    grid-row: 2 / span 1;
}

textarea {
    resize: none;
    overflow-y: scroll;
  }

#application-name {
    font-family: Arial, Helvetica, sans-serif; 
}

#player-messages {
    color: red;
}

*:disabled {
    background-color: lightgray;
    color: white;
}

a:link {
    color:#fff; 
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif; 
}

a:visited {
    color:#fff;
}

a:active {
    color :bisque
}