body {
    margin: 0px;
    padding: 0px;
    background-color: white;
}

header {
    background-color: slategrey;
    padding: 10px;
}

.banner {
    background-color: darkblue;
    color: white;
    width: 1004px;
    margin: 0 auto;
    padding:10px;
}

#sfia_chart_div canvas {
    background-color: slategrey;
    color: black;
}

#sfia_chart_div {
    width:  400px;
    height: 400px;
}

#graphics {
    display:block;
    margin-left:  0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 10px;
    display: inline-block;
    vertical-align: top;
    width: 400px;
    float: left;
}

#skillsTextContainer {
    width: 579px; /* 1024(banner) - 400 (graphics) - 15(spearation) - 15*2(Padding) */
    min-height: 370px;
    margin-top: 10px;
    margin-right: 0px;
    padding: 15px;
    display: block;
    background-color: lightgrey;
    float: right;
}

.textualinfo  {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    color: black;
    float: left;
}

.graphicsinfo {
    position: relative;
    width: 400px;
    margin-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#ui_div {
}

#context {
}

#table_div {
}

#description {
}

#selectLabel {
    color: black;
}

.codeCol {
    width: 10%;
}

.skillCol {
    width: 60%;
}

.levelCol {
    width: 30%;
}

th {
    text-align: left;
}

tr {
    outline: thin solid slategray;
}

#content {
    background-color: red;
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
    position: relative;
}

#skillTable {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-style: none;
    border-spacing:0px;
    background-color: purple;
}

table {
   width: 100%;
   border-style: none;
   border-spacing: 0px;
}

#legendTable {
    background-color: slategrey;
    margin: 0 auto;
    color: white;
    width: 100%;
    left: 0px;
    padding: 10px;
    margin-bottom: 0px;
}

th {
    background-color: slategrey;
    color: white;
    border-style: none;
    border-width: 0px;
}

.cat1 {
    background-color: #ffe7ef;
    color: #ff0965;
}

.cat2 {
    background-color: #faefff;
    color: #df2fff;
}

.cat3 {
    background-color: #fdf9e7;
    color: #f1cc0d;
}

.cat4 {
    background-color: #f9efe6;
    color: #cc6900;
}

.cat5 {
    background-color: #e8fbff;
    color: #1ae6ff;
}

.cat6 {
    background-color: #e6ffe6;
    color: #07ff05;
}

#legend1 {
    background-color: #ffe7ef;
    color: #ff0965;
    width: 16px;
    height: 16px;
}

#legend2 {
    background-color: #faefff;
    color: #df2fff;
    width: 16px;
    height: 16px;
}

#legend3 {
    background-color: #fdf9e7;
    color: #f1cc0d;
    width: 16px;
    height: 16px;
}

#legend4 {
    background-color: #f9efe6;
    color: #cc6900;
    width: 16px;
    height: 16px;
}

#legend5 {
    background-color: #e8fbff;
    color: #1ae6ff;
    width: 16px;
    height: 16px;
}

#legend6 {
    background-color: #e6ffe6;
    color: #07ff05;
    width: 16px;
    height: 16px;
}

#sfia_figure_div {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#figure_div img {
    margin-top: 20px;
    margin-bottom:20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.figure {
    text-align: center;
}