body {

    margin: 0;
    padding: 0;
    outline: 0;

    font-family: sans-serif;
    text-align: center;

    background: url(gfx/bkgnd.png) top center repeat-x;
    background-color: #fff;
}

body.blur {
    background: url(gfx/blur_bkgnd.png) top center repeat-x;
}

img {
    border: 0;
}

hr {
    border: 0;
    height: 1px;

    background-color: #999;
}

h1, h2 {
    margin-top: 40px;
    margin-bottom: 10px;
}

#box {
    position: relative;

    width: 900px;
    margin: 0 auto;
    text-align: left;
}

body.blur #box {
    width: 940px;
    text-align: center;

    background: url(gfx/blur_site.png) top center no-repeat;
}

body.blur #box form {
    padding-top: 300px;
}

#logo {
    position: absolute;
    top: 0;
    left: 0;

    width: 270px;
    height: 100px;
}

#menu {
    position: absolute;
    top: 0;
    right: 0;

    border-right: 1pt solid #fff;
}

#menu a {
    display: inline-block;
    height: 30px;

    margin: 0;
    padding: 70px 10pt 0 10pt;
    border-left: 1pt solid #fff;

    color: #fff;
    text-decoration: none;
}

#menu a:visited {
    color: #fff;
}

#menu a:hover {
    text-decoration: underline;
    background-color: #39f;
}

#about {
    position: absolute;
    top: 130px;
    left: -80px;

    width: 170px;
    text-align: justify;
}

#content {
    position: absolute;
    top: 100px;

    width: 100%;
}

#form {
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;

    text-align: left;
}
#footer img {
    padding: 5px;

    background-color: #000;
}

select {
    width: 200px;
    vertical-align: middle;

    font-size: medium;
}

textarea,
div.textarea {
    width: 98%;

    font-size: small;
    color: #333;

    border: #666 1px dashed;
    padding: 5px;
    margin: 5pt 0;
}

textarea.summary,
div.summary {
    background-color: #ffd;

    line-height: 150%;
}

div.summary label {
    padding: 2px;
}

div.summary label:hover {
    background-color: #ddb;
    cursor: pointer;
}

div.summary label.remove {
    text-decoration: line-through;
    color: #bb9;
}

input {
    width: 200px;

    font-size: large;

    border: 2px solid;
    vertical-align: middle;
}

input[type="text"] {
    padding: 2pt;
    color: #666;

    border-color: #aaa;
    border-right-color: #ccc;
    border-bottom-color: #ccc;
}

input[type="submit"] {
    cursor: pointer;
    color: #fff;

    border-color: #4af;
    border-bottom-color: #186;

    background-color: #18f;
}
input[type="submit"]:hover {
    text-decoration: underline;

    border-color: #6cf;
    border-bottom-color: #396;

    background-color: #39f;
}

input.feedback {
    width: 100px !important;

    font-size: small;
    font-weight: bold;
    color: #fff;

    border: 2px solid;
}

input#good {
    border-color: #6f6;
    border-bottom-color: #060;

    background-color: #0a0;
}
input#good:hover {
    border-color: #9f9;
    border-bottom-color: #090;

    background-color: #0c0;
}

input#medium {
    border-color: #e5c973;
    border-bottom-color: #a77d00;

    background-color: #e5ac00;
}
input#medium:hover {
    border-color: #ffe080;
    border-bottom-color: #bf9000;

    background-color: #ffc000;
}

input#bad {
    border-color: #f99;
    border-bottom-color: #900;

    background-color: #c00;
}
input#bad:hover {
    border-color: #faa;
    border-bottom-color: #a00;

    background-color: #f00;
}

.main {
    font-size: medium;
}
.main a,
.main a:visited {
    color: #00f;
}
.main a:hover {
    color: #18f;
}

.sidebar {
    font-family: sans-serif;
    font-size: small;
    color: #666;

    text-align: justify;
    text-indent: 10pt;
    line-height: 13pt;
}
span.sidebar {
    margin: 10px;
}

.sidebar a,
.sidebar a:visited {
    text-decoration: none;
    border-bottom: #999 1px solid;
    color: #666;
}

.sidebar a:hover {
    text-decoration: none;
    border-bottom: #666 1px solid;
    color: #333;
}

.ico {
    background: left center no-repeat;
    padding-left: 20px;
}

.infobar {
    background: url(gfx/info_ico.png) 10px 10px no-repeat #eee;
    border: 1px solid #ddd;

    padding: 10px 10px 10px 35px;
    text-align: left;
}

.ok {
    background-image: url(gfx/ok_ico.png) !important;
}

.alert {
    background-image: url(gfx/alert_ico.png) !important;
}

.note {
    background-image: url(gfx/note_ico.png) !important;
}

.note img {
    border: 1px solid #bbb;
    padding: 1px;
    margin: 5px 0;
}

.center {
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.center img {
    text-align: right;
    vertical-align: middle;
    margin: 0 5pt;
}

.right {
    text-align: right;
}