
.notification {
    position: fixed;
    width:    300px;
    z-index:  9999;
}

.notification-top-right {
    top: 10px;
    right: 10px;
}

.notification-bottom-right {
    bottom: 10px;
    right:  10px;
}

.notification-top-left {

    left: 10px;
    top: 10px;
}
.notification-bottom-left {

    left: 10px;
    bottom: 10px;
}

.notification > div {
    position: relative;
    margin-bottom: 5px;
	cursor: pointer;
}

.notification .content {

    margin: 5px 5px 5px 69px;
}

.notification h2, .notification p {

    margin: 0;
    padding: 0;
}

.notification .icon {

    position: absolute;
    display: block;
    width: 48px;
    height: 48px;
    top: 5px;
    left: 10px;
    background: transparent url(../images/notice.png) no-repeat 0 0;
    z-index: 1;
}

.notification .close {

    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    top: 8px;
    left: 8px;
    background: none;
    z-index: 2;
}

.notification div:hover .close {

    background: transparent url(../images/close.png) no-repeat 0 0;
}

/* Icons -------------------------------------------------------------------- */

.notification .error   .icon { background-image: url(../images/error.png); }

/* Styles ------------------------------------------------------------------- */

.notification .smokey {
	color: white;
}

.notification .smokey .background {
    border: 3px solid #000;
    -moz-border-radius: 12px;
	border-radius: 12px;
    background: #000;
    opacity: .80;
    -moz-box-shadow: 2px 2px 3px #888;
    -webkit-box-shadow: 2px 2px 3px #888;
    box-shadow: 2px 2px 3px #888;
}

.notification .smokey:hover .background {
    border-color: #fff;
}

.notification .smokey .content {
    margin: 5px 5px 5px 69px;
}

.notification .smokey h2 {

    font-family: "Lucida Grande", Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size:   14px;
    line-height: 16px;
}

.notification .smokey p {
    padding: 0px 8px 0px 0px;
    min-height: 48px;
}

