manage forever

by Johan Vandeplas

HTML

<div class="manage-forever">
    <div class="controls">
        <input type="button" value="start" />
        <input type="button" value="stop" />
        <input type="button" value="showLog" />
        <input type="button" value="showForeverLog" />
        <input type="button" value="listRunningApplications" />
    </div>
    <div class="status">
        <div class="led"></div>
    </div>
    <div class="forever-logs">some text</div>
</div>

CSS

body {
    background-color: khaki;
}
.forever-logs {
    width: 400px;
    height: 300px;
    background-color: black;
    color: white;
    font: console;
    font-family: monospace;
    padding: 6px;
    border: 1px solid white;
}
.controls {
    display: inline-block;
    margin: 10px 0;
    width: 300px;
}
.controls input {
    margin: 2px 0;
}
.status {
    display: inline-block;
    text-align: right;
    height: 50px;
    margin: 10px 0;
    width: 108px;
    vertical-align: top;
    line-height: 45px;
}
.status .led {
    display: inline-block;
    line-height: 50px;
    width: 15px;
    height: 15px;
    margin-right: 0px;
    background-color: green;
    border-radius: 7px;
    vertical-align: middle;
}