Use new notification style everywhere (bug 609711)

media/css/legacy/main-mozilla.css

@@ -399,106 +399,6 @@ span.emaillink .i {
     padding: 5px 25px 5px 0;
 }
 
-
-/** Notification Box Element */
-.notification-box {
-    display: block;
-    padding: 10px;
-    margin: 10px 0;
-    border: 1px solid #021437;
-    -moz-border-radius: 8px;
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    background-color: #e0effd;
-}
-.notification-box.error {
-    border-color: #C63717;
-    background-color: #FFA5A5;
-}
-.notification-box h2 {
-    margin: 0;
-    padding: 10px 0 0 60px;
-    font-size: 130%;
-    line-height: 1.5em;
-    min-height: 38px;
-    color: #444444;
-    background: url(../../img/amo2009/notifications/sprite.png) no-repeat top left;
-}
-.html-rtl .notification-box h2 {
-    padding-left: 0;
-    padding-right: 60px;
-    background-position: top right;
-}
-.notification-box.notification h2 {
-    padding: 0;
-    min-height: 0;
-    background: none;
-}
-.notification-box.info h2 {
-    background-position: 0 -348px;
-}
-.html-rtl .notification-box.info h2 {
-    background-position: right -348px;
-}
-.notification-box.success h2 {
-    background-position: 0 -546px;
-}
-.html-rtl .notification-box.success h2 {
-    background-position: right -546px;
-}
-.notification-box.warning h2 {
-    background-position: 0 -744px;
-}
-.html-rtl .notification-box.warning h2 {
-    background-position: right -744px;
-}
-.notification-box.error h2 {
-    color: #C63717;
-    background-position: 0 -150px;
-}
-.html-rtl .notification-box.error h2 {
-    background-position: right -150px;
-}
-/* Notification boxes for [z] collections
-   Much of this can be removed when it replaces the default style */
-.notification-box.collection {
-    margin-bottom: 28px;
-    padding: 13px 13px 13px 58px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-    background: #FFFFFF url(../../img/zamboni/notifications.png) no-repeat 13px 13px;
-    font-family: "helvetica neue", arial, helvetica, sans-serif;
-    color: #444;
-    font-size: 13px;
-}
-.notification-box.collection.success {
-    border: 3px solid #1d4900;
-}
-.notification-box.collection.error {
-    color: #444;
-    border: 3px solid #550b00;
-    background-position: 13px -69px;
-}
-.html-rtl .notification-box.collection {
-    background-position: 98% 13px;
-    padding: 13px 58px 13px 13px;
-}
-.notification-box.collection h2 {
-    background: none;
-    font-weight: bold;
-    padding: 0;
-    font-family: "helvetica neue", arial, helvetica, sans-serif;
-    font-size: 13px;
-    line-height: 1;
-    min-height: 0;
-}
-.notification-box.collection p {
-    margin: 0;
-}
-
 /** jQuery UI tabs */
 .ui-tabs-hide {
     display: none !important;

media/css/zamboni/zamboni.css

@@ -2438,6 +2438,102 @@ form .error .note.error {
     color: #565656;
 }
 
+/** Notifications **/
+.notification-box {
+    margin: 10px 0 28px;
+    border: 3px solid #1d4900;
+    background-color: #e0effd;
+    padding: 13px 13px 13px 58px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+    font-family: "helvetica neue", arial, helvetica, sans-serif;
+    color: #444;
+    font-size: 13px;
+    position: relative;
+}
+
+.notification-box h2 {
+    margin: 0;
+    padding-top: 10px;
+    font-size: 130%;
+    line-height: 1.5em;
+    min-height: 38px;
+    color: #444444;
+}
+
+.html-rtl .notification-box h2 {
+    padding-left: 0;
+    background-position: top right;
+}
+
+.notification-box:before {
+    content: "\00a0";
+    width: 32px;
+    height: 32px;
+    display: block;
+    left: 10px;
+    top: 50%;
+    margin-top: -16px;
+    position: absolute;
+    background-image:url(../../img/zamboni/notifications.png);
+}
+
+.html-rtl .notification-box:before {
+    right: 10px;
+    left: auto;
+}
+
+.notification-box.error {
+    background-color: #FFA5A5;
+    color: #444;
+    border: 3px solid #550b00;
+}
+
+.notification-box.error:before {
+    background-position: 0 -83px;
+}
+
+.notification-box.error h2 {
+    color: #C63717;
+    background-position: 0 -150px;
+}
+
+.notification-box.info {
+    color: #444;
+    border: 3px solid #002955;
+}
+
+.notification-box.info:before {
+    background-position: 0 -435px;
+}
+
+.notification-box.info h2 {
+    color: #425A8B;
+    background-position: 0 -150px;
+}
+
+.html-rtl .notification-box {
+    padding: 13px 58px 13px 13px;
+}
+
+.notification-box h2 {
+    background: none;
+    font-weight: bold;
+    padding: 0;
+    font-family: "helvetica neue", arial, helvetica, sans-serif;
+    font-size: 13px;
+    line-height: 1;
+    min-height: 0;
+}
+
+.notification-box p {
+    margin: 0;
+}
+
 /** Add-on detail page buttons. **/
 #addon-summary .install-shell .install {
     float: left;