/*
 * Copyright (c) 2007 Ralf S. Engelschall <rse@engelschall.com>
 */

/*
 *  ---- GENERAL STYLE ----
 */

html {
}

body {
    left:                  0px;
    top:                   0px;
    margin:                0px;
    padding:               0px;
    height:                100%;
    width:                 100%;
    background-image:      url("canvas-crop-bg.png");
    background-repeat:     repeat-x;
    background-color:      #666666;
    color:                 #000000;
    font-size:             9pt;
    font-family:           Arial, Helvectica, sans-serif;
    position:              relative;
}

a {
    color:                 #000000;
    text-decoration:       none;
    border-bottom:         1px dotted #666666;
}

a:hover {
    text-decoration:       none;
    border-bottom:         1px solid #000000;
}

a.plain {
    border-bottom:         none;
}

a.invisible { 
    border:                0px;
}

img { 
    border:                0px none; 
}

ul li {
    margin-top:            0px;
    margin-bottom:         6px;
}

ul.compact li {
    margin-top:            0px;
    margin-bottom:         0px;
}

h1 {
    font-size:             20pt;
    font-weight:           bold;
    margin-top:            16px;
    margin-bottom:         12px;
    color:                 #ffffff;
    margin-top:            0px;
}

h2 {
    font-size:             14pt;
    font-weight:           bold;
    margin-top:            16px;
    margin-bottom:         4px;
    color:                 #000000;
}

/*
 *  ---- CANVAS STYLE ----
 */

div#canvas {
    position:              relative;
    margin-left:           auto;
    margin-right:          auto;
    top:                   20px;
    width:                 750px;
    height:                860px;
}

div#canvas_body {
    position:              absolute;
    left:                  0px;
    top:                   0px;
    width:                 750px;
    height:                720px;
    background-image:      url("canvas-crop-canvas-empty.jpg");
    background-color:      #000000;
}

div#canvas_content {
    position:              relative;
    left:                  40px;
    top:                   20px;
    width:                 400px;
    height:                840px;
}

div#canvas_bar {
    position:              absolute;
    left:                  0px;
    bottom:                0px;
    width:                 750px;
    height:                140px;
    background-image:      url("canvas-crop-bar.jpg");
}

div#canvas_bar div#canvas_nav {
    position:              absolute;
    left:                  450px;
    top:                   30px;
    width:                 280px;
    height:                90px;
}

div#canvas_footer {
    position:              absolute;
    right:                 30px;
    bottom:                -30px;
    height:                20px;
    text-align:            right;
    vertical-align:        middle;
    color:                 #333333;
}

div#canvas_footer a {
    color:                 #333333;
}

div#ribbon {
    display:               none; /* soon ;-) */
    position:              absolute;
    right:                 0px;
    top:                   0px;
    width:                 177px;
    height:                156px;
    z-index:               200;
}

div#ribbon img {
    border:                0px;
}

div#ribbon a {
    border:                0px;
}

/*
 *  ---- NAVIGATION BAR ----
 */

div#canvas_nav table {
    border-collapse:       collapse;
}
div#canvas_nav table td {
    vertical-align:        top;
}
div#canvas_nav table td + td {
    padding-left:          10px;
}
div#canvas_nav {
    position:              absolute;
    left:                  80px;
    top:                   170px;
    z-index:               2;
    font-size:             9pt;
    width:                 600px;
}
div#canvas_nav a {
    text-decoration:       none;
    color:                 #999999;
    border-bottom:         0px;
}
div#canvas_nav span.inactive {
}
div#canvas_nav span.inactive a:hover {
    color:                 #ff3333;
}
div#canvas_nav span.active a {
    color:                 #ffffff;
}
div#canvas_nav span.active a:hover {
    color:                 #ff3333;
}

span.flash {
    color:                 #cc3333;
}