.toast-container { width: 280px; z-index: 9999; } * html .toast-container { position: absolute; } .toast-item { height: auto; background: #333; opacity: 0.9; -moz-border-radius: 10px; -webkit-border-radius: 10px; color: #eee; padding-top: 20px; padding-bottom: 20px; padding-left: 6px; padding-right: 6px; font-family: lucida Grande; font-size: 14px; border: 2px solid #999; display: block; position: relative; margin: 0 0 12px 0; } .toast-item p { text-align: left; margin-left: 50px; } .toast-item-close { background:url(../images/close.gif); width:22px; height:22px; position: absolute; top:7px; right:7px; } .toast-item-image { width:32px; height: 32px; margin-left: 10px; margin-top: 10px; margin-right: 10px; float:left; } .toast-item-image-notice { background:url(../images/notice.png); } .toast-item-image-success { background:url(../images/success.png); } .toast-item-image-warning { background:url(../images/warning.png); } .toast-item-image-error { background:url(../images/error.png); } /** * toast types * * pattern: toast-type-[value] * where 'value' is the real value of the plugin option 'type' * */ .toast-type-notice { color: white; } .toast-type-success { color: white; } .toast-type-warning { color: white; border-color: #FCBD57; } .toast-type-error { color: white; border-color: #B32B2B; } /** * positions * * pattern: toast-position-[value] * where 'value' is the real value of the plugin option 'position' * */ .toast-position-top-right { position: fixed; top: 20px; right: 20px; } .toast-position-center { position: absolute; left: 50%; margin-left: -140px; margin-top: -40px; top: 50%; } .toast-position-middle-bottom { position: absolute; left: 50%; margin-left: -140px; margin-top: -40px; top: 75%; }