body {
    font-family: Verdana, Arial, Helvetica;
    color: #000;
    background: #fff;
    margin: 0;
}

a {
    color: blue;
}

a:hover {
    color: red;
}

a.directLink {
    font-weight: bold;
    font-size: 10pt;
    color: #cc3300;
    text-decoration: none;
}

a.directLink:hover {
    text-decoration: underline;
}

div#as_seen {
    color: #cc3300;
    margin: 1px;
    font-size: 7pt;
}

div#howitworks {
    width: 100%;
    background: #cc3300;
    margin-bottom: 3px;
}

div#howitworks td.col1 {
    font-family: Arial;
    text-align: right;
    font-size: 20pt;
    font-weight: bold;
    color: #ffffff;
    padding-right: 12px;
}

div#howitworks td.col2 {
    font-size: 10pt;
    color: #ffffff;
}

div#howitworks td.col3 {
    padding-left: 50px;
}

/* Logo styles */
.logo .halt {
    font-weight: bold;
    color: #cc3300;
    font-size: 28pt;
    font-family: Verdana, Arial, Helvetica;
}

.logo .or {
    color: #000;
    font-size: 18pt;
    font-family: Verdana, Arial, Helvetica;
}

.logo .not {
    font-weight: bold;
    color: #006699;
    font-size: 28pt;
    font-family: Verdana, Arial, Helvetica;
}

/* Rating box */
.rating-box {
    border: solid 2px #000000;
    background-color: #ffcc33;
}

.rating-box td {
    padding: 2px;
}

/* Gradient colors for rating numbers */
.rate-1 { color: #204080; }
.rate-2 { color: #202F70; }
.rate-3 { color: #3F2060; }
.rate-4 { color: #5F2050; }
.rate-5 { color: #7F1F4F; }
.rate-6 { color: #90103F; }
.rate-7 { color: #B0102F; }
.rate-8 { color: #CF0F1F; }
.rate-9 { color: #E0000F; }
.rate-10 { color: #F00000; }

/* Gradient bar colors */
.grad-1 { background-color: #204080; }
.grad-2 { background-color: #202F70; }
.grad-3 { background-color: #3F2060; }
.grad-4 { background-color: #5F2050; }
.grad-5 { background-color: #7F1F4F; }
.grad-6 { background-color: #90103F; }
.grad-7 { background-color: #B0102F; }
.grad-8 { background-color: #CF0F1F; }
.grad-9 { background-color: #E0000F; }
.grad-10 { background-color: #F00000; }

/* Algorithm image display */
.algo-display {
    border: solid 1px #ffffff;
    width: 408px;
    height: 272px;
    background-color: #eeeeee;
}

.algo-display img {
    max-width: 408px;
    max-height: 272px;
    object-fit: contain;
}

/* Login box */
.login-box {
    border: 1px solid #006699;
    background-color: #99ccff;
}

.login-box .login-header {
    background-color: #006699;
    color: #ffffff;
    text-align: center;
    padding: 4px;
}

.login-box .login-body {
    padding: 4px;
}

/* Sidebar */
.sidebar-box {
    background-color: #eeeeee;
    border: 1px solid #000000;
    padding: 8px;
    width: 200px;
}

.sidebar-box img {
    max-width: 180px;
    max-height: 140px;
    object-fit: contain;
}

/* Broken page */
.broken-page {
    margin-top: 40px;
    text-align: center;
}

/* Signup form */
.signup-form {
    margin: 20px auto;
    max-width: 400px;
}

.signup-form input[type="text"],
.signup-form input[type="email"] {
    margin-bottom: 8px;
    padding: 4px;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10pt;
}

.signup-form label {
    font-size: 10pt;
    display: block;
    margin-top: 6px;
}

.message-success {
    color: #006699;
    font-weight: bold;
    font-size: 10pt;
}

.message-error {
    color: #cc3300;
    font-weight: bold;
    font-size: 10pt;
}