body {
    background-image: url(images/background.jpg);
    font-family:      sans-serif;
}

/* the top-left has the logo and map */
div#TopLeft {
    position:         absolute;
    left:             1px;
    top:              95px;
    /*width:            957px;*/
    width:            794px;
    height:           503px;
}
div#TopLeft > div#Logo {
    position:         absolute;
    /*left:             21px;*/
    left:             17px;
    top:              0px;
    /*width:            407px;*/
    width:            338px;
    height:           250px;
    border:           0px;
    background-color: #336699;
    text-align:       center;
}
div#TopLeft > div#Logo > img#Logo {
    /*width:            339px;*/
    width:            281px;
    height:           244px;
    border:           0px;
}
div#TopLeft > img#Map {
    position:         absolute;
    /*left:             457px;*/
    left:             379px;
    top:              0px;
    /*width:            500px;*/
    width:            415px;
    height:           500px;
    border:           0px;
}
div#TopLeft > div#Text {
    position:         absolute;
    /*left:             21px;*/
    left:             17px;
    top:              300px;
    /*width:            407px;*/
    width:            338px;
    height:           150px;
    border:           0px;
    text-align:       center;
    font-family:      sans-serif;
    font-size:        24px;
    font-weight:      bold;
}
div#TopLeft > div#Text > img#SpeedBar {
    /*width:            400px;*/
    width:            332px;
}
div#TopLeft > div#Text td#red {
    background-image: url(images/red-slice.gif);
    border:           1px solid #000000;
}
div#TopLeft > div#Text td#orn {
    background-image: url(images/orn-slice.gif);
    border:           1px solid #000000;
}
div#TopLeft > div#Text td#yel {
    background-image: url(images/yel-slice.gif);
    border:           1px solid #000000;
}
div#TopLeft > div#Text td#ltg {
    background-image: url(images/ltg-slice.gif);
    border:           1px solid #000000;
}
div#TopLeft > div#Text td#dkg {
    background-image: url(images/dkg-slice.gif);
    border:           1px solid #000000;
}
div#TopLeft > div#Timestamp {
    position:         absolute;
    /*left:             21px;*/
    left:             17px;
    top:              450px;
    /*width:            407px;*/
    width:            338px;
    height:           50px;
    border:           0px;
    text-align:       center;
    font-size:        24px;
    font-weight:      bold;
}

/* the top-right has the trip-time lists */
div#TopRight {
    position:         absolute;
    /*left:             961px;*/
    left:             798px;
    top:              95px;
    /*width:            957px;*/
    width:            794px;
    height:           503px;
}
div#TopRight > div#Left {
    position:         absolute;
    left:             0px;
    top:              0px;
    width:            50%;
    height:           100%;
    padding:          0px;
    text-align:       center;
}
div#TopRight > div#Right {
    position:         absolute;
    left:             50%;
    top:              0px;
    width:            50%;
    height:           100%;
    padding:          0px;
    text-align:       center;
}
div#TopRight div#Inner {
    margin-left:      6px;
    margin-right:     6px;
}
div#TopRight th.high {
    color:            #ffffff;
    background-color: #3366ff;
    font-size:        20px;
    font-weight:      bold;
}
div#TopRight th.norm {
    color:            #ffffff;
    background-color: #336699;
    font-size:        20px;
    font-weight:      bold;
}
div#TopRight td.high {
    background-color: #ffffff;
    font-size:        17px;
    font-weight:      normal;
}
div#TopRight td.norm {
    background-color: #a8bed3;
    font-size:        17px;
    font-weight:      normal;
}
div#TopRight td span.nodata {
    color:            #999999;
    font-size:        15px;
    font-weight:      normal;
}

/* the bottom-left has the incident lists */
div#BottomLeft {
    position:         absolute;
    left:             1px;
    top:              616px;
    /*width:            957px;*/
    width:            794px;
    height:           582px;
}
div#BottomLeft > table#Incidents {
}
div#BottomLeft > table#Incidents th.head {
    color:            #ffffff;
    background-color: #336699;
    font-size:        20px;
    font-weight:      bold;
}
div#BottomLeft > table#Incidents td.high {
    background-color: #ffffff;
    font-size:        17px;
}
div#BottomLeft > table#Incidents td.norm {
    background-color: #a8bed3;
    font-size:        17px;
}

/* the bottom-right has the trip-time segment report */
div#BottomRight {
    position:         absolute;
    /*left:             961px;*/
    left:             797px;
    top:              616px;
    /*width:            957px;*/
    width:            794px;
    height:           488px;
}
div#BottomRight > div#Link {
    position:         absolute;
    left:             0px;
    top:              0px;
    width:            100%;
    height:           20%;
    padding:          0px;
    text-align:       center;
}
div#BottomRight > div#Link > table {
    width:            95%;
}
div#BottomRight > div#Link th.head {
    color:            #ffffff;
    background-color: #3366ff;
    font-size:        24px;
    font-weight:      bold;
    text-align:       center;
}
div#BottomRight > div#Link td.head {
    background-color: #ffffff;
    font-size:        24px;
    font-weight:      bold;
    text-align:       left;
}
div#BottomRight > div#Link td.norm {
    background-color: #ffffff;
    font-size:        20px;
    font-weight:      bold;
    text-align:       center;
}
div#BottomRight > div#Link span.data {
    color:            #ffffff;
    background-color: #336699;
    font-size:        24px;
    font-weight:      bold;
    padding-left:     6px;
    padding-right:    6px;
}
div#BottomRight > div#Link span.nodata {
    color:            #999999;
    font-size:        20px;
}
div#BottomRight > div#Left {
    position:         absolute;
    left:             0px;
    top:              20%;
    width:            50%;
    height:           80%;
    padding:          0px;
    text-align:       center;
}
div#BottomRight > div#Right {
    position:         absolute;
    left:             50%;
    top:              20%;
    width:            50%;
    height:           80%;
    padding:          0px;
    text-align:       center;
}
div#BottomRight table#Camera td {
}
div#BottomRight table#Camera th {
    color:            #ffffff;
    background-color: #336699;
    font-size:        24px;
    font-weight:      bold;
}

/* vim: set ai et ts=4 sw=4: */