#flash_message {
    background: $flash;

    .message, .confirm, .error {
        padding: 1.5em 0;
        display: block;
        overflow: hidden;

        p {
            margin-bottom: 0;
        }
    }
    .message .register {
        float: right;
    }

    p.register_msg {
        line-height: 2;
    }
    .attention-frozen {
        text-align: center;
        font-size: 140%;
        padding: 0.4em 0;
    }
}

.info_box, .alert {
    position: relative;
    padding: 1.5em;
    margin: 1.5em 0;
    @include border-radius(0.8em);
    border: 1px solid $border;
    background: $flash;
    font-style: italic;
}
.alert-success {
    // original green looked ugly, so I tinkered with this one
    background: hsl(hue($green), saturation($flash)*0.9, lightness($flash)*0.95);
}

.alert-danger,
.alert-warning,
.alert-error {
    background: hsl(hue($red), saturation($flash), lightness($flash));
}

// overlay
div.overlay {
    /* must be initially hidden */
    display: none;

    /* jquery for some reason sets overflow: hidden on animation */
    overflow: visible !important;

    /* needed for close button */
    position: relative;

    /* place overlay on top of other elements */
    z-index: 10000;

    /* may be overwritten by javascript */
    width: auto !important;
    height: auto !important;

    /* styling */
    padding: 1.5em;
    @include border-radius(0.8em);
    border: 1px solid $border;
    background-color: #fff;
    @include box-shadow(0 0 0.8em 0.4em $fg1);
}

#overlay-big.overlay {
    background-color: #fff;
}

html.overlay {
    background: none;
    min-width: 0;

    #header, #subheader, #footer, #feedback, .ie-message,
    #user_welcome, #welcome_message, #flash_message {
        display: none;
    }
    #main, .page_wrapper {
        margin: 0;
    }
    body {
        overflow: hidden;
        min-height: 0;
    }
    .page_wrapper {
        padding: 0;
    }
    &.overlay-small {
        #col1 {
            width: 100%;
        }
        #col3 {
            display: none;
        }
    }
}

// close button
.info_box .close_button, .overlay a.close, .alert a.close {
    display: none;
    html.js & {
        display: block;
    }

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    font-style: normal;
    overflow: hidden;

    font-size: $large;
    color: #fff;
    position: absolute;
    top: -1em;
    right: -1em;
    width: 2em;
    height: 2em;
    display: block;
    z-index: 1;
    @include border-radius(50%);
    border: 2px solid #fff;
    @include box-shadow(#aaa 0 0 0.3em 0.1em);
    cursor: pointer;
    opacity: 1.0;

    background-color: $primary-color;
    @include background-image(linear-gradient(170deg, lighten($primary-color, 14%), $primary-color));
    &:hover, &:focus {
        background-color: darken($primary-color, 7%);
        @include background-image(linear-gradient(170deg, lighten($primary-color, 7%), darken($primary-color, 7%)));
        text-decoration: none;
    }

    &:after {
        display: block;
        position: absolute;
        top: 0;
        text-indent: 0;
        width: 2em;
        line-height: 2;
        text-align: center;
        content: "\d7";
    }
}
