@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('../../fonts/websymbols/websymbols-regular-webfont.eot');
    src: url('../../fonts/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/websymbols/websymbols-regular-webfont.woff') format('woff'), url('../../fonts/websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('../../fonts/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/******************************************************************************/
.notice-wrap {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 250px;
    z-index: 101010;
}

* html .notice-wrap {
    position: absolute;
}

.notice-item {
    background-image: #000;
    background-image: linear-gradient(top, #333333 0%, #000000 100%);
    background-image: -o-linear-gradient(top, #333333 0%, #000000 100%);
    background-image: -moz-linear-gradient(top, #333333 0%, #000000 100%);
    background-image: -webkit-linear-gradient(top, #333333 0%, #000000 100%);
    background-image: -ms-linear-gradient(top, #333333 0%, #000000 100%);
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #333333), color-stop(1, #000000) );
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: #eee;
    padding: 6px 6px 0 6px;
    font-family: Verdana;
    font-size: 12px;
    -webkit-box-shadow: 0px 0px 25px -2px rgba(0, 0, 0, 0.9);
    box-shadow: 0px 0px 25px -2px rgba(0, 0, 0, 0.9);
    opacity: 0.9;
    display: block;
    position: relative;
    margin: 0 0 12px 0;
}

.notice-item-close {
    position: absolute;
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    right: 5px;
    top: 5px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
}

.notice-item-text {
    float: left;
    width: 160px;
}

.notice-item-icon {
    font-size: 55px;
    float: left;
    margin-right: 5px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/** BOTTOM NOTICE *************************************************************/

.mod-notice-wrap {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 98%;
    z-index: 101010;
    margin: 0 1%;
    height: 80px;
}

    .mod-notice-wrap > .notice-item-wrapper {
        float: left;
        width: 24%;
        margin: 0% 1.25% 1% 0%;
    }

        .mod-notice-wrap > .notice-item-wrapper:nth-child(4n) {
            margin-right: 0% !important;
            width: 24%;
        }

    .mod-notice-wrap > .notice-item {
        height: 60px;
        background: #333;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        color: #EEE;
        padding: 0%;
        font-family: Verdana;
        font-size: 12px;
        border: 2px solid #999;
        display: inline-block;
        position: relative;
        margin: 0;
        width: 100%;
    }

/** Notification: General Styles**/
.notice p, .success p, .error p, .warning p {
    width: 160px;
    float: right;
    margin-right: 15px;
    cursor: default;
}

    .notice p::before, .success p::before, .error p::before, .warning p::before {
        content: " ";
        font-family: 'WebSymbolsRegular';
        font-size: 30px;
        border-radius: 50%;
        border: 4px solid #fff;
        float: left;
        overflow: hidden;
        width: 50px;
        margin-right: 4%;
        margin-left: -65px;
        background: transparent;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

.notice, .success, .error, .warning {
    padding: 10px 2% 10px 2%;
}


    /** SUCCESS **/
    .success p {
    }

        .success p::before {
            content: ".";
        }

.success {
    background: #060;
    background-image: linear-gradient(top, #008800 0%, #000000 100%);
    background-image: -o-linear-gradient(top, #008800 0%, #000000 100%);
    background-image: -moz-linear-gradient(top, #008800 0%, #000000 100%);
    background-image: -webkit-linear-gradient(top, #008800 0%, #000000 100%);
    background-image: -ms-linear-gradient(top, #008800 0%, #000000 100%);
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #008800), color-stop(1, #000000) );
}

/** ERROR **/
.error p {
}

    .error p::before {
        content: "'";
        line-height: 47px;
    }

.error {
    background: #900;
    background-image: linear-gradient(top, #AA0000 0%, #000000 100%);
    background-image: -o-linear-gradient(top, #AA0000 0%, #000000 100%);
    background-image: -moz-linear-gradient(top, #AA0000 0%, #000000 100%);
    background-image: -webkit-linear-gradient(top, #AA0000 0%, #000000 100%);
    background-image: -ms-linear-gradient(top, #AA0000 0%, #000000 100%);
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #AA0000), color-stop(1, #000000) );
}

/** WARNING **/
.warning p {
}

    .warning p::before {
        content: "W";
        line-height: 45px;
    }

.warning {
    color: #fff;
    background: #FF4400;
    background-image: linear-gradient(top, #FFA600 0%, #FF4400 100%);
    background-image: -o-linear-gradient(top, #FFA600 0%, #FF4400 100%);
    background-image: -moz-linear-gradient(top, #FFA600 0%, #FF4400 100%);
    background-image: -webkit-linear-gradient(top, #FFA600 0%, #FF4400 100%);
    background-image: -ms-linear-gradient(top, #FFA600 0%, #FF4400 100%);
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #FFA600), color-stop(1, #FF4400) );
}

/** STANDARD **/
.notice p {
}

    .notice p::before {
        content: "!";
        font-size: 45px;
        font-family: sans-serif;
    }

.notice {
}