.notice {
    /*position: relative; bug: pops above side menus */
    box-sizing: border-box;
    clear: both;
    margin: 10px 0 12px 12px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .1rem;
    font-size: 15px;
    width: calc(100% - 24px);
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    color: #666;
}
.notice:hover { box-shadow: none; }

.notice-title {
    display: block;
    font-weight: bold;
}


.warning-notice {
    background-image: url('../images/warning.png'), linear-gradient( to right, #fffbcc 40px, #e6db55 40px, #e6db55 41px, #ffffff 41px );
    background-position: 13px 10px, left top;
    background-repeat: no-repeat;
    border-color: #e6db55;
}
.warning-notice:hover { border-color: #e6d200; }

.info-notice {
    background-image: url('../images/info.png'), linear-gradient( to right, #dbe3ff 40px, #a2b4ee 40px, #a2b4ee 41px, #ffffff 41px );
    background-position: 13px 10px, left top;
    background-repeat: no-repeat;
    border-color: #a2b4ee;
}
.info-notice:hover { border-color: #97a8de; }

.success-notice {
    background-image: url('../images/success.png'), linear-gradient( to right, #d5ffce 40px, #9adf8f 40px, #9adf8f 41px, #ffffff 41px );
    background-position: 13px 10px, left top;
    background-repeat: no-repeat;
    border-color: #9adf8f;
}
.success-notice:hover { border-color: #8ccb82; }

/* Darker: background: #ffcece, border: #df8f8f*/
.error-notice {
    background-image: url('../images/error.png'), linear-gradient( to right, #ffdddd 40px, #eaa5a5 40px, #eaa5a5 41px, #ffffff 41px );
    background-position: 13px 10px, left top;
    background-repeat: no-repeat;
    border-color: #eaa5a5;
}
.error-notice:hover { border-color: #df9d9d; }

.notice div {
    display:block;
    font-style:normal;
    padding: 8px 10px 8px 55px;
    line-height: 1.5em;
}

.notice .close {
    background: url('../images/close.png') center center no-repeat;
    margin: 1px;
    height: 25px;
    width: 25px;
    float: right;
    border-bottom-left-radius: .1rem;
    opacity: .5;
}
.notice .close:hover, .notice a:hover  {
    opacity: 1;
}

.notice ul { margin: 0 0 0 15px; }
.notice ul li {
    padding: 0 0 0 20px !important;
}

.notice a { color: #000; text-decoration: underline; padding: 2px; transition: color 0.3s ease; }
.notice a:hover { color: #e31d3b; text-decoration: none; }