body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: smaller;
    background-color: rgba(0, 49, 9, 1.0);
}

img {
    border: none;
}

div.header {
    height: 32px;

    background-image: 
        -webkit-gradient(linear,
            left top, left bottom,
            color-stop(0.0, rgba(0, 186,  36, 1.0)),
            color-stop(1.0, rgba(0,  99,  19, 1.0)));
    background-image: 
        -moz-linear-gradient(top,
            rgba(0, 186,  36, 1.0) 0%,
            rgba(0,  99,  19, 1.0) 100%);

    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);

    color: white;
    background-color: rgba(0,  99,  19, 1.0);

    text-shadow: rgba(0, 0, 0, 0.2) -1px -1px 1px;
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;
}

div.header > ul {
    display: inline-block;

    list-style-type: none;

    margin: 0px;
    padding: 5px 5px 5px 5px;

    vertical-align: top;
    line-height: 12px;
}

div.header > div.header-text {
    display: inline-block;

    margin: 0;
    padding: 10px 0;

    vertical-align: top;
    line-height: 12px;
}

div.header > div.header-logo {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 32px;
    background: url(ripple-logo.png) top right no-repeat;
}

div.header > ul > li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    min-width: 100px;
    cursor: default;

    border: 1px solid rgba(0, 0, 0, 0.5);
    border-width: 1px 0px 1px 1px;

    -webkit-box-shadow:
        0px 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 0px 2px rgba(255, 255, 255, 0.25);
    -moz-box-shadow: 
        0px 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 0px 2px rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 0px 2px rgba(255, 255, 255, 0.25);

    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;

    text-align: center;
}

div.header > ul li:first-child {
    border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
}
div.header > ul li:last-child {
    border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
    border-width: 1px;
}

div.header > ul li:hover {
    background-color: rgba(255, 255, 255, 0.25);
} 
div.header > ul li:active {
    background-color: rgba(0, 0, 0, 0.3);
}

div.header > ul li > a {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 5px;
}

div.header > form.search {
    display: inline-block;
}

div.header > form.search > input {
    display: inline-block;
    
    position: absolute;
    right: 110px;

    border-radius: 3px;
    -moz-border-radius: 3px;

    border: 1px solid rgba(0, 0, 0, 0.5);
    border-width: 1px;

    margin: 6px 0 10px 0px;
    padding: 2px 0 2px 0;

    width: 200px;
}

div.content, div.wavelet, div.blip, div.thread-reply {
    clear: both;
    overflow: hidden;

    margin: 10px;
    padding: 5px;
    background-color: white;

    border-radius: 5px;
    -moz-border-radius: 5px;

    -webkit-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}

div.footer {
    clear: both;
    padding: 5px;
    background-color: white;
}

.context {
    position: absolute;
    left: -999em;
    width: 1em;
    overflow: hidden;
}

div.search-digest {
    margin: 10px;
    padding: 0;
    background-color: #ffffff;

    border-radius: 5px;
    -moz-border-radius: 5px;

    -webkit-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);

    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;

    overflow: hidden;
    text-overflow: ellipsis; /* XXX not working. why? */
    white-space: nowrap;
}
div.search-digest:hover {
    background-color: #ffff99;
}
div.search-digest h1 {
    margin: 0;
    padding: 0;
    font-size: larger;
}
div.search-digest > a {
    display: block;
    padding: 5px;
    color: inherit;
    text-decoration: none;
}

div.thread div.thread, div.blip-content div.thread, div.thread-reply {
    margin-left: 10px;
}

div.wavelet-participants {
}

div.blip {
    padding: 0px;
}

div.blip-debug {
    float: right;
    margin-right: 5px;
    padding: 2px;
    border: solid black 1px;
    background-color: #ffff99;
    font-family: monospace;
    
    border-radius: 3px;
    -moz-border-radius: 3px;
}

div.blip-header {
    margin: 0;
    padding: 0;
    text-align: right;

    background-color: rgba(0, 186,  36, 0.6);

    border-bottom: solid 1px rgba(0, 0, 0, 0.5);
    border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
}

div.blip-participants {
    display: inline-block;
    float: left;
    padding: 5px;
}

div.blip-timestamp {
    display: inline-block;
    padding: 5px;
    text-align: right;
}

div.blip-content {
    clear: both;
    padding: 5px;
    background-color: #ffffff;

    border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px;

    overflow: hidden;
}

div.blip-content div.blip-content {
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

div.blip-content h1 {
    display: inline;
}
div.blip-content div.indent {
    margin-left: 3em;
}

div.thread-reply {
}
div.blip-content div.thread-reply {
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

div.thread-reply form {
    display: inline;
}
div.thread-reply textarea {
    width: 100%;
}

div.attachment {
    display: table-cell;
    border: solid #999999 1px;
    background-color: #ffff99;
    margin: 0;
    padding: 0;
}
div.attachment > a {
    display: block;
    padding: 5px;
    color: inherit;
    text-decoration: none;
}

div.gadget-unknown {
    border: dashed #666666 3px;
    background-color: #99ff99;
    padding: 2px;
}

div.gadget-yesnomaybe {
    display: table;
    width: 100%;
}
div.gadget-yesnomaybe-list {
    display: table-cell;
    width: 33%;
}
div.gadget-yesnomaybe-list > div {
    border: solid black 1px;
    margin: 2px;
    padding: 3px;
    font-weight: bold;
    text-align: center;
}
div.gadget-yesnomaybe-list > div.gadget-yesnomaybe-yes {
    background-color: #33ff33;
}
div.gadget-yesnomaybe-yes {
    background-color: #ccffcc;
}
div.gadget-yesnomaybe-list > div.gadget-yesnomaybe-no {
    background-color: #ff3333;
}
div.gadget-yesnomaybe-no {
    background-color: #ffcccc;
}
div.gadget-yesnomaybe-list > div.gadget-yesnomaybe-maybe {
    background-color: #ffff33;
}
div.gadget-yesnomaybe-maybe {
    background-color: #ffffcc;
}
div.gadget-yesnomaybe > div > ul {
    margin: 0;
}

div.protocol-debug {
    border: solid black 1px;
    background-color: #cccccc;
}
div.protocol-debug > pre {
    margin: 5px;
}

form.new-wave-form input[type=text] {
    width: 100%;
}
form.new-wave-form textarea {
    width: 100%;
}

form.add-recipients-form textarea {
    width: 100%;
}



.button-set {
    display: inline-block;
    float: right;

    margin: 10px;
    list-style-type: none;

    margin: 0px;
    padding: 5px 5px 5px 5px;

    vertical-align: top;
    line-height: 12px;

    background-color: rgba(0,  99,  19, 1.0);
    color: white;

    text-shadow: rgba(0, 0, 0, 0.2) -1px -1px 1px;
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;

    border-radius: 5px;
    -moz-border-radius: 5px;
}

a.button, a.button-single {
    display: inline-block;
    margin: 0px;
    padding: 5px;
    min-width: 100px;

    border: 1px solid rgba(0, 0, 0, 0.5);
    border-width: 1px 0px 1px 1px;

    -webkit-box-shadow:
        0px 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 0px 2px rgba(255, 255, 255, 0.25);
    -moz-box-shadow: 
        0px 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 0px 2px rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 0px 2px rgba(255, 255, 255, 0.25);

    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;

    text-align: center;

    text-decoration: none;
    color: inherit;

    cursor: default;
}

a.button:hover, a.button-single:hover {
    background-color: rgba(255, 255, 255, 0.25);
} 
a.button:active, a.button-single:active {
    background-color: rgba(0, 0, 0, 0.3);
}

.button-set a.button:first-child {
    border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
}
.button-set a.button:last-child {
    border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
    border-width: 1px;
}

.button-set a.button-single {
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-width: 1px;