@charset "utf-8";
body {
    margin: 0 auto;
    width: 900px;
}

h2 {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
}

#container-box {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: 900px;
    float: left;
}

.diagram-description {
    text-align: left;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: 14px;
    margin: 10px;
}

#left-col {
    margin: 0;
    padding: 0;
    width: 400px;
    float: left;
}

#right-col-container {
    padding: 0 15px 15px;
}

#right-col {
    margin: 0;

    width: 500px;
    float: left;
    text-align: left;
}

#middle-col {
    margin: 0;
    padding: 0;
    width: 200px;
    float: left;
}

.box {
    margin: 8px;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 18px;
}

.first-state {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 32px;
}

#StateA {
}

#StateB {

}

#StateC {

}

#StateD {
    background-color: #7499ff
}

#StateE {
    background-color: #7499ff
}

#StateF {

}

#StateG {
    background-color: #7499ff
}

#StateH {
    background-color: #7499ff
}

#StateX {
    background-color: #7499ff
}

#StateY {
    background-color: #7499ff
}

#StateZ {
    background-color: #7499ff
}


#diagramTitle {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
}

#log {
    font-family: 'Droid Sans Mono', Menlo, Consolas, 'Courier New', Courier, monospace;
    font-size: 14px;
}

.currentState{
    border: 3px solid #3D3D3D;
}

.state{
    border: 1px solid #3D3D3D;
}