PNotify on jQuery Mobile - Problems with the style

My problem is that the content on the page appears above the notification. I tried playing with .ui-notify's z-index, but that didn't change anything.

Also, the notification is always white, even if I specify type: "error" or type: "success".

DEMO

Am I missing something? Thanks!

UPDATE

I achieved to get the look and feel of PNotify (with Bootstrap) notifications with the following css (requires FontAwesome). See DEMO.

/* info */
.ui-pnotify-container{
    color: #31708f !important;
    background-color: #d9edf7 !important; 
    border-color: #bce8f1;
    background: none;
}

/* error */
.ui-pnotify-container.ui-state-error {
    color: #a94442 !important;
    background-color: #f2dede !important; 
    border-color: #ebccd1;
    background: none;
}

/* success */
.ui-state-default {
    color: #3c763d !important;
    background-color: #dff0d8 !important; 
    border-color: #d6e9c6;
    background: none;
}

/* warning */
.ui-pnotify-container.ui-state-highlight {
    color: #8a6d3b !important;
    background-color: #fcf8e3 !important; 
    border-color: #faebcc;
    background: none;
}

.ui-pnotify-container .ui-icon {
    background: none;
}

.ui-icon-close{
    position: relative;
    text-indent: 0px;
    width: 24px;
    height: 24px;
    margin-right: 20px;
}

.ui-icon-close:before {
    content: "\f00d";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;           
    position: absolute;
}

Solution

It is not a z-index issue, rather your background color on the notifications is transparent for some reason. There is something wrong with your CSS or the order it is loading in...

Updated DEMO

By adding these CSS rules to your fiddle, the notifications are no longer transparent:

.custom-notif {
    background: white;
}
.ui-state-error {
    background: red;
    text-shadow: none;
}
.ui-state-default {
    background: green;
    text-shadow: none;
}
.ui-state-highlight {
    background: blue;
    text-shadow: none;    
}