/* @group Flash Messages */
/* Flash messages are designed to be obnoxious.  This style of flash appears at the top of the window no matter where you scroll, is large, and colorful, thus fulfilling its goal. */

#flash {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    background-color: #569;
    color: white;
    background-image: url('/static/img/btn.png');
    background-position: bottom;
    border-top: 1px solid #111;
    border-bottom: 1px solid #555;
}

#flash, #flash * { cursor: pointer; }

#flash .yui-b { padding: 5px 0; }
#flash .yui-b>* { font-size: 128%; /* Not sure if this CSS rule works in IE... */ }

#flash label { display: block; text-align: right; font-weight: bold; text-transform: capitalize; }
#flash label:after { content: ':'; /* Sadly, this doesn't work in IE.  TODO: Fix this in JS. */ }

/* Different classes of flash messages get different colors.  In theory they could have different icons, etc. */

#flash.subtle { background-color: #444; color: white; }
#flash.subtle:hover { background-color: #222; }

#flash.warning { background-color: #ff0; color: black; }
#flash.warning:hover { background-color: #ff8; }

#flash.success { background-color: #595; }
#flash.success:hover { background-color: #7b7; }

#flash.failure,
#flash.error { background-color: #800; }
#flash.failure:hover,
#flash.error:hover { background-color: #a00; }

#flash.subtle,
#flash.success,
#flash.failure,
#flash.error { text-shadow: black 2px 2px 2px; }

/* @end */