html {
    height: 100%;
}

body {
	background-color: #5599cc;
    font-family: verdana;
    font-size: 10px;
    height: 100%;
    margin: 0;
    padding: 0;
}

a img {
    border: 0;
}

ul {
    margin: 0;
    padding: 0;
}

form {
    margin: 0;
    padding: 0;
}

#content {
    margin: 0px auto;
    width: 654px;
    height: 100%;
}

#blaggart {
    height: 384px;
}

#content>#blaggart {
    min-height: 384px;
    height: auto;
}

#blurb {
    padding-top: 10px;
    clear: left;
}

#canvas, #canvasImages {
    /* these should be the same as lib/config.php viewWidth/viewHeight */
    width: 512px;
    height: 384px;
}

#canvas {
    border-width: 2px;
    border-color: black;
    border-style: solid;
    z-index: 0;
    position: relative;
    background-color: white;
}

.page {
    border-width: 2px;
    border-color: black;
    border-style: solid;
    z-index: 1;
    position: relative;
    width: 492px;
    height: 364px;
    padding: 10px;
    background-color: white;
}


#canvasImages {
    position: absolute;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    z-index: 1;
    background-color: white;
    overflow: hidden;
}

#canvasObject {
    position: absolute;
    z-index: 2;
}

#canvasImages img {
    position: absolute;
}

#canvasImages div {
    position: absolute;
    width: 8px;
    height: 8px;
    overflow: hidden; /* fix for crappy IE6 */
}

/******************************************************************************/
/* drawing tools
/******************************************************************************/
#toolsDraw img {
    display: block;
    float: left;
}

.control {
    border: 1px solid black;
    background-color: #dadada;
}

.control .controls {
    margin: 7px 15px 0px 15px;
    padding-bottom: 6px;
    width: 106px;
}

.control .title {
	font-weight: bold;
    background-color: black;
    color: white;
    padding: 2px 10px;
    height: 16px;
    text-align: right;
    width: 116px;
    font-weight: bold;
    font-size: 9px;
}

.control .title div {
    float: left;
}

.minMax {
    text-decoration: none;
    color: white;
    font-family: courier;
    position: relative;
    left: 3px;
    top: -1px;
}

.minMax:hover {
    text-decoration: underline;
    color: white;
}

/******************************************************************************
 * icons
 ******************************************************************************/
#iconSave, #iconClear, #iconZoom, #iconGrab, #iconPaint, #iconDisk {
    float: left;
}

#iconSave {
    width: 40px;
    height: 40px;
}

#iconClear {
    width: 40px;
    height: 40px;
}

#iconZoom, #iconGrab, #iconPaint, #iconDisk {
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

#selectZoom img {
    width: 12px;
    height: 10px;
    margin-right: 5px;
}

#controlNavigate img {
    width: 16px;
    height: 16px;
}

#iconSave, #iconClear, #controlNavigate img, .colSelect, #selectZoom img {
    cursor: pointer;
}

#iconClear {
    margin-left: 16px;
}

#selectPaint {
    border: 1px solid black;
    float: left;
    height: 100%;
    width: 60px;
    margin-right: 14px;
}

#displayPaint {
    float: left;
    height: 30px;
    width: 30px;
    margin-top: 7px;
}

#dspFgColour, #dspBgColour {
    width: 18px;
    height: 18px;
    position: relative;
    border: 1px solid black;
}

#dspFgColour {
    z-index: 2;
}

#dspBgColour {
    left: 10px;
    top: -10px;
    z-index: 1;
}

div.colSelect {
    height: 15px;
    width: 15px;
    float: left;
}

#selectZoom {
    float: left;
    margin-top: 2px;
}

#logo {
    width: 80px;
    height: 61px;
    float: left;
    padding-top: 10px;
}

/******************************************************************************
 * status
 ******************************************************************************/
#coordinates {
    color: #ffffff;
}

#debug {
    margin-top: 5px;
    color: #ffffff;
}

#canvasCursor {
    background-color: rgb(12, 225, 45);
    opacity: 0.7;
    filter: alpha(opacity: 70); /* for internet explorer damn error */
    position: absolute;
    z-index: 2;
}

.failure {
    color: red;
}

.success {
    color: green;
}

.pleaseLogin {
    color: purple;
}

a {
    color: purple;
    text-decoration: none;
}

a:visited {
    color: purple;
    text-decoration: none;
}

a:hover {
    color: purple;
    text-decoration: underline;
}

a:active {
    color: purple;
    text-decoration: none;
}

#statusPane {
    padding: 10px 5px;
}

#status {
    background-color: yellow;
    padding: 5px 10px;
    display: none;
}