.msgGrowl-container { width: 300px; position: fixed; } .top-right { top: 10px; right: 15px; } .bottom-right { bottom: 10px; right: 15px; } .top-left { top: 10px; left: 15px; } .bottom-left { bottom: 10px; left: 15px; } .top-center { top: 10px; left: 50%; margin-left: -150px; } .bottom-center { bottom: 10px; left: 50%; margin-left: -150px; } .msgGrowl { background: #DDD; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9F9F9), color-stop(1, #D5D5D5)); background: -moz-linear-gradient(top, #F9F9F9, #D5D5D5); background: -o-linear-gradient(#F9F9F9, #D5D5D5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#D5D5D5'); width: 300px; font-size: 11px; color: #333; padding: 0; margin: 0 0 10px 0; border: 1px solid #A8A8A8; position: relative; -webkit-box-shadow: 0 0 7px rgba(0,0,0,.3); -moz-box-shadow: 0 0 7px rgba(0,0,0,.3); -o-box-shadow: 0 0 7px rgba(0,0,0,.3); box-shadow: 0 0 7px rgba(0,0,0,.3); -webkit-text-shadow: 0 0 1px #FFF; -moz-text-shadow: 0 0 1px #FFF; -o-text-shadow: 0 0 1px #FFF; text-shadow: 0 0 1px #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .msgGrowl h4 { font-size: 13px; color: #333; margin-bottom: .5em; -webkit-text-shadow: 0 0 1px #FFF; -moz-text-shadow: 0 0 1px #FFF; -o-text-shadow: 0 0 1px #FFF; text-shadow: 0 0 1px #FFF; } .msgGrowl-content { padding: 10px 20px 10px 10px; } .msgGrowl-close { background: url(../images/msgGrowl_close.png) no-repeat 50% 50%; width: 11px; height: 10px; position: absolute; top: 10px; right: 10px; opacity: .4; } .msgGrowl-close:hover { opacity: 1; cursor: pointer; } .msgGrowl.success .msgGrowl-content { background: url(../images/msgGrowl_success.png) no-repeat 10px 13px; } .msgGrowl.success .msgGrowl-content { padding-left: 50px; } .msgGrowl.success h4 { color: #5B7027; } .msgGrowl.error .msgGrowl-content { background: url(../images/msgGrowl_error.png) no-repeat 10px 13px; } .msgGrowl.error .msgGrowl-content { padding-left: 50px; } .msgGrowl.error h4 { color: #AF4434; } .msgGrowl.info .msgGrowl-content { background: url(../images/msgGrowl_info.png) no-repeat 10px 13px; } .msgGrowl.info .msgGrowl-content { padding-left: 50px; } .msgGrowl.info h4 { color: #316AB7; } .msgGrowl.warning .msgGrowl-content { background: url(../images/msgGrowl_warning.png) no-repeat 10px 13px; } .msgGrowl.warning .msgGrowl-content { padding-left: 50px; } .msgGrowl.warning h4 { color: #B69201; }