body {
    margin-top: 4em;
}
#button-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 3px;
    padding-left: 3px;
    /* height: 3em;*/
    background-color: #aaaaaa;
    overflow: hidden;
}

.hidden {
    display: none;
}

#message-header {
    display: none;
}

#form-data {
    /*display : block;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 4em;
    font-family: monospace;
    white-space: pre;
    border: 2px solid black;
    overflow: hidden;
    height: auto;
    background-color: #eeeeee;
}

form :invalid {
  box-shadow: 0 0 5px 1px red;
}

form :focus:invalid {
  outline: none;
}

form fieldset:invalid {
    box-shadow: none;
}

#button-header.valid {
    background-color: #a8e8a8;
}

body {
    margin-top: 4em;
}
#button-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 3px;
    padding-left: 3px;
    /* height: 3em;*/
    background-color: #aaaaaa;
    border-bottom: 1px solid #888888;
    overflow: hidden;
}

.hidden {
    display: none;
}

#message-header {
    display: none;
}

#form-data {
    /*display : block;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 4em;
    font-family: monospace;
    white-space: pre;
    border: 2px solid black;
    overflow: hidden;
    height: auto;
    background-color: #eeeeee;
}

form :invalid {
  box-shadow: 0 0 5px 1px red;
}

form :focus:invalid {
  outline: none;
}

form fieldset:invalid {
    box-shadow: none;
}

#button-header.valid {
    background-color: #a8e8a8;
}

Add border on bottom of button bar
Add border on bottom of button bar

This looks cleaner and makes it more obvious that the rest of the form
scrolls beneath the header bar.
