/* vim:set et ts=4 sw=4 */

body {
    background: #eee url("../images/body-bg.png");
    font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
    line-height: 1;
    color: #333;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: #33a7d2;
}

    a:hover {
        text-decoration: underline; }

abbr {
    cursor: help; }

p {
    line-height: 1.4; }

/* this is not okay. but it is, unfortunately, the least error-prone way
 * (that i know) of fixing broken floaty layouts in IE6 */
div.clear-hack {
    overflow: hidden;
    clear: both;
    height: 0;
}




#wrapper {
    width: 80em;
    background: #fff;
    margin: 0.5em auto 0 auto;

    /* a little pretty for the 10/dec demo */
    -moz-box-shadow: 4px 4px 8px #aaa;
    box-shadow: 4px 4px 8px #aaa;
    -moz-border-radius-bottomright: 1em;
    -moz-border-radius-bottomleft: 1em;
}

    /* no scaling for ie6 */
    * html #wrapper {
        width: 960px; }




/* the header is based roughly upon unicef.org, with rapidsms colors */
#header {
    background: url("../images/header-bg.png") repeat-x;
    padding-top: 23px;
    padding-bottom: 33px;
    position: relative;
    color: #ccf;
}

    /* hide the log in/out links in the top right. this doesn't need to
     * be especially discoverable; when the user tries to do something
     * requiring a login, they should be redirected automatically */
    #header #auth {
        font-size: 80%;
        position: absolute;
        line-height: 22px;
        margin: 0 10px;
        right: 0;
        top: 0;
    }

        #header #auth a {
            color: #fff; }


    #branding {
        padding: 0 10px;
    }

    /* align in the middle of the unicef blue stripe of header bg, and
     * display logo on the right. TODO: extract the unicef branding */
    #branding h1 {
        background: url("../images/unicef-logo.png") no-repeat 100% 50%;
        height: 65px;
        color: #fff;
        margin: 0;
    }

        * html #branding h1 {
            width: 940px; }

        #branding h1 a {
            height: 65px;
            width: 245px;
            display: block;
            background: url("../images/rapidsms-logo.png") no-repeat 0 50%;

            /* float the RapidSMS logo, in case any app would like to
             * append anything to the light blue (empty) stripe */
            float: left;
        }

            #branding h1 a span {
                position: absolute;
                left: -9999px;
            }

    #tabs,
    #page-tabs {
        position: absolute;
        height: 28px;
        bottom: 0;
        padding: 0;
        margin: 0;
    }

    /* global tabs sit on the right, page-specific tabs sit on the left.
     * to draw more attention. TODO: maybe re-think this */
    #tabs { right: 0; }
    #page-tabs { left: 0;  }

        #tabs li,
        #page-tabs li {
            display: block;
            float: left;
            line-height: 28px;
        }

        /* 5px spacing between each tab, to match the top gap, since
         * we're using pixel-positioned backgrounds there */
        #tabs li { margin-right: 5px; }
        #page-tabs li { margin-left: 5px; }

            #tabs li a,
            #page-tabs li a {
                color: #fff;
                display: block;
                padding: 0 1em;
                background: #2fa5d1 url("../images/tab-bg.png") repeat-x;
                border-right: 1px solid #11bad0;
                border-left: 1px solid #11bad0;

                /* disable the focus outline on tabs, to avoid a rather
                 * ugly dotted box around tabs while they have focus (we
                 * remain accessible by providing an :focus, later) */
                outline: none;
            }

            /* there are unread messages in this tab! TODO: is this just
             * for the training app? if so, move it there! */
            #tabs li.unread a span {
                display: block;
                padding-right: 21px;
                background: url("../icons/silk/email_open.png") no-repeat 100% 50%;
            }

            /* always highlight the active (in the navigation sense, not
             * the css :active sense) tab, even when it's being hovered
             * or focused, since clicking it again is mostly useless */
            #tabs li.active a,       #page-tabs li.active a,
            #tabs li.active a:hover, #page-tabs li.active a:hover,
            #tabs li.active a:focus, #page-tabs li.active a:focus {

                background: #fff url("../images/tab-bg-active.png") repeat-x;
                text-decoration: none;
                text-shadow: none;
                color: #000;

                /* the same color as the strip in header-bg.png */
                border: 1px solid #cef1f5;
                border-bottom: 0;

                /* nudge the active tab north by one pixel, to line it
                 * up with the tops of the other tabs */
                margin-top: -1px;
            }

            /* brighten up inactive tabs when hovering or tab-focusing
             * with the keyboard (we removed the outline, above) */
            #tabs li a:hover, #page-tabs li a:hover,
            #tabs li a:focus, #page-tabs li a:focus {
                background-image: url("../images/tab-bg-hover.png");
                text-shadow: #cef1f5 0 0 2px;
                text-decoration: none;
            }




#breadcrumbs {
    color: #ccc;
    font-size: 2em;
    line-height: 1;
    padding: 0.5em;
    text-shadow: #eee 2px 2px 2px;
    border-bottom: 1px dotted #eee;
}

    #breadcrumbs a {
        color: #000;
    }




#inner {
    padding: 1em;
    position: relative;
}

        /* some parts of the page title are dynamic (or otherwise really
         * important), like search terms. highlight them! */
        #inner h1 span.highlight {
            background: #ffa;
            -moz-border-radius: 5px;
            border: 2px solid #ff0;
            padding: 0 4px;
            margin-left: -4px;
        }

    /* when an app has something really important to say, it can use the
     * apps/webui/templates/message.html template to display a huge blob
     * of text. this should probably be replaced with flash messages */
    #inner div.message {
        text-align: center;
        padding: 4em 25%;
    }

        #inner div.message p {
            margin: 0 0 0.5em 0;
            font-size: 2em;
        }




/* some apps (erm, just the querylog, actually) add big triggers to the
 * bottom of the page to show or perform some action. */
div.trigger {
    font-size: 80%;
    text-align: center;
    padding: 0.625em;
    background: #f8f8f8;
    cursor: pointer;
    color: #aaa;
}

    div.trigger.warn {
        background: #fdd;
        color: #f00;
    }




#footer {
    border-top: 1px dotted #eee;
    padding: 0.5em;
    clear: both;
    color: #ccc;

    /* reserve space for at two lines of links @ LH=1.4 (for the
     * copyright and licensing/download info) */
    min-height: 2.8em;
}

    /* bump the footer links down a line, to align them with the second
     * line of legal junk on the right. reduce the opacity until hover,
     * to keep them out of view until they're needed. */
    #footer .footer-region {
        margin-top: 1.4em;
        line-height: 1.4;
        opacity: 0.25;
        float: left;
    }

        #footer .footer-region:hover {
            opacity: 1; }

        #footer .footer-region a            { margin-right: 0.5em; }
        #footer .footer-region a:last-child { margin-right: 0; }


    #footer p.rights {
        text-align: right;
        float: right;
        margin: 0;
    }