/* 
* use for homepage notifications box, when visible
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{
font-size: 100%;
}
/* turned off by default */
#notification-box-container {
        
        display: none;
        width: 100%;
}

.s-lib-box {
    background-color: #FFF;
    border: 1px solid;
    border-color: #CCC #CCC #B3B3B3;
    box-shadow: 0 8px 6px -6px #AAA;
    display: inline-block;
    margin: 0 0 20px;
    padding: 0;
    position: relative;
    vertical-align: top;
    width: 100%;
    border-radius: 4px;
}

* {
    box-sizing: border-box;
    }

.s-lib-box-title {
    background-image: linear-gradient(to bottom,#FAFAFA 0,#E57D38 100%);
}

.s-lib-box-content {
    padding: 10px;
}

.expires {
    display: none;
}

.notification {
        display: none;
        }


.notification-item {
        padding:5px 10px;
        font-size: 1.15em;
        font-family: 'open sans';
        display: flex;
        width: 100%;
        justify-content: space-between;
}

.notification-item.alert {
        /* directories orange */
        background:#E57D38;
        color: #ffffff; 
        border:1px solid #ccc;
}

.notification-item.cancellation {
        /* bright red */
        background:#ff0000;
        color: #ffffff; 
        border:1px solid #ccc;
}

.notification-item.deadline {
        /* news releases purple */
        background:#685ca2;
        color: #ffffff; 
        border:1px solid #ccc;
}

.notification-item.event {
        /* programs and support blue */
        background:#0295B5;
        color: #ffffff; 
        border:1px solid #ccc;
}

.notification-item.launch {
        /* resource sharing green */
        background:#38863C;
        color: #ffffff; 
        border:1px solid #ccc;
}


.notification-item a {
        color: #fff;
}

.close-x {
        margin-left: auto;
        align-self: flex-end;
}