/* Design by Sujai Kumar, http://ylog.org */

* {
    border: 0;
    padding: 0;
    margin: 0;
}

body {
    font-family: verdana, helvetica, sans-serif;
    width: 45em;
    margin-left: 1em;
}

#top-bar {
    background: #730018;
    width: 45em;
    height: 3em;
}

#top-bar-quote {
    margin-top: -1em;
    margin-left: 15em;
    margin-bottom: 1.3em;
    background-color: #fff7f7;
    width: 28em;
    text-align: center;
    border: 1px solid #ccb7b7;
}

#top-bar-quote p {
    padding: 1em 2em;
    font-size: 90%;
    line-height: 180%
}

#middle-section {
    width: 100%;
}

#middle-nav {
    display: none;
}

#middle-nav ul {
    display: none;
    margin-top: 0.6em;
    margin-left: 1.5em;
    font-size: 100%;
    list-style: none;
    line-height: 125%;
}

#middle-nav ul ul {
    margin-top: 0;
    margin-left: 1em;
}

#middle-nav li {
    margin-top: .3em;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 70%;
}

#middle-nav li li {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-size: 100%;
}

#logo-image {
    margin-top: 0.5em;
    width: 150px;
    height: 64px;
}

#middle-site-nav {
    padding-top: 1em;
    padding-bottom: 1em;
}

#middle-site-nav p {
    font-size: 143%;
}

#middle-site-nav input {
    font-size: 70%;
    border: 1px solid #B3596C;
    padding: .2em;
    color: #730018;
    font-family: verdana, helvetica, sans-serif;
    width: 8em;
}

a {
    text-decoration: none;
    color: #730018;
}

a:hover {
    color: #999;
}

#middle-text-left h2, #middle-text-right h2{
    font-size:75%;
    padding:.4em 0 0 0;
}

#middle-text-left {
    float: left;
    width: 11em;
    padding-left: 16em;
}

#middle-text-right {
    width: 15em;
    margin-left: 28em;
}

#middle-text-left ul, #middle-text-right ul {
    list-style: none;
    line-height: 150%;
}

#middle-text-left li, #middle-text-right li {
    font-size:  70%;
}

#middle-text-left li li, #middle-text-right li li {
    font-size:  100%;
}

.level3 {
    list-style-type: none;
    color: #B3596C;
}

.level3 li {
    display: inline;
    white-space: nowrap;
}

.level3 li:before {
    font-size: 50%;
    white-space: nowrap;
    content: "| "; /* before each item */
}

#middle-content {
    margin-right: 4em;
    max-width: 35em;
    margin-left: 4em;
}

#middle-content h1 {
    font-size:  100%;
    padding: 1em 0 .2em 0;
}

#middle-content h2 {
    font-size:  75%;
    padding: 1em 0 .2em 0;
    color: #343434;
}

#middle-content p {
    font-size:  75%;
    line-height: 150%;
    padding: .2em 0 .5em 0;
    color: #343434;
}

#middle-content li {
    font-size:  75%;
    line-height: 150%;
    color: #343434;
}

#middle-content p.faq {
    margin-top:.7em;
    color:#000;
}

#middle-content p.answer {
    margin-left:2em;
}

#middle-content div.answer p {
    margin-left:2em;
}

ul.faq {
    margin-left:2em;
}

ul.faq li {
    padding:.1em 0;
}

#middle-content ul {
    line-height: 150%;
    padding: .2em 0 .5em 1em;
    list-style: square outside;
}

#middle-content a {
    color: #730018;
    border-bottom: solid 1px #ccc;
}

#logo-homepage {
    float: left;
    margin-top: -65px;
    width: 150px;
    height: 74px;
    background: url(aox.png) no-repeat top left;
    position: fixed;
}

p.code {
    white-space: pre;
    margin-left: 3em;
}


.right { 
    font-weight: bold;
}


.sievescript { 
}

.sievescript div, .sievescript * div { 
    margin-left: 3em;
}

.sievescript .selector, .sievescript * .selector { 
    display: none;
}

.sievescript .command, .sievescript * .command { 
    display: none;
}

.sievescript .translated span, .sievescript * .translated span,
.sievescript .translated * span, .sievescript * .translated * span {
    font-weight: bold;
}


#bottom-bar {
    clear: both;
    border-top: 1px solid #730018;
    padding-left: 15.5em;
    margin-top: 1em;
    padding-top: .3em;
}

#bottom-bar ul {
    display: inline;
}

#bottom-bar li {
    font-size: 70%;
    display: inline;
}

#bottom-bar li+li:before {
    color: #B3596C;
    content: "| ";
}

#bottom-bar a {
    text-decoration: none;
    padding: .5em;
}

#bottom-bar form {
    display: inline;
}

#bottom-bar p {
    font-size: 143%;
    display: inline;
}

#bottom-bar input {
    font-size: 70%;
    border: 1px solid #B3596C;
    padding: .2em;
    margin-left:.5em;
    color: #730018;
    font-family: verdana, helvetica, sans-serif;
    width:8em;
}

q { quotes: '\201c' '\201d' '\2018' '\2019' }
q:before { content: open-quote; }
q:after { content: close-quote; }


@media only screen and (max-device-width: 480px) {
    /* get rid of the left column and generally shink stuff to fit on
       android/iphone screens */
    body {
        font-family: verdana, helvetica, sans-serif;
        margin-left: 0px;
        width: 100%;
    }
    #top-bar {
        background: #730018;
        width: 100%;
        height: 2em;
    }

    #top-bar-quote {
        margin-top: -1em;
        margin-left: 1.5em;
        margin-right: .075em;
        margin-bottom: 1.3em;
        background-color: #fff7f7;
        text-align: center;
        border: 1px solid #ccb7b7;
        width: 90%;
    }

    #top-bar-quote p {
        padding: .7em 1.4em;
        font-size: 90%;
        line-height: 150%;
    }

    #middle-text-left {
        float: left;
        width: 9em;
        padding-left: 1.5em;
    }

    #middle-text-right {
        margin-left: 11em;
        width: 8em;
    }

    .level3 {
        list-style-type: none;
        white-space: normal;
        color: #B3596C;
    }

    #logo-image, #logo-homepage, #middle-nav {
        visibility: hidden;
        display: none;
        float: none;
        width: 0px;
        padding: 0px;
        height: 0px;
    }

    #middle-content {
        float: none;
        width: 95%;
        margin-right: .2em;
        margin-left: .5em;
    }

    #bottom-bar {
        clear: both;
	width: 80%;
        border-top: 1px solid #730018;
        padding-left: 0em;
        margin-top: 1em;
        padding-top: .3em;
        white-space: nowrap;
    }
}