#gritter-notice-wrapper { position:fixed; top:20px; right:20px; width:301px; z-index:9999; } .gritter-item-wrapper { position:relative; margin:0 0 10px 0; background: #000; background: rgba(0,0,0,0.75); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .growl-primary { background: rgba(66,139,202,0.80); } .growl-success { background: rgba(28,175,154,0.80); } .growl-warning { background: rgba(240,173,78,0.80); } .growl-danger { background: rgba(217,83,79,0.80); } .growl-info { background: rgba(91,192,222,0.80); } .gritter-item { display:block; color:#eee; padding: 15px; font-size: 11px; } .gritter-item p { padding:0; margin:0; word-wrap:break-word; line-height: 18px; font-size: 13px; opacity: 0.75; } .gritter-close { display:none; position:absolute; top: 10px; right: 10px; background: url(../images/close-white.png) no-repeat center center; cursor:pointer; width:10px; height:11px; text-indent:-9999em; opacity: 0.5; } .gritter-title { font-size: 14px; padding:0 0 7px 0; display:block; font-family: 'LatoBold'; } .gritter-image { width:48px; height:48px; float:left; } .gritter-with-image, .gritter-without-image { padding:0; } .gritter-with-image { width:220px; float:right; padding-left: 10px; } /* for the light (white) version of the gritter notice */ .gritter-light .gritter-item { background: #fff; background: rgba(255,255,255,0.75); color: #666; }