css: improve gritter

- rename DOM wrapper because is was blacklisted by some ad blocker
- make the template and the lib to add gritter more simple (remove unused
  option, make template simpler)
- add style for gritter error message

src/static/css/pad/gritter.css

@@ -1,130 +1,36 @@
-#gritter-notice-wrapper {
-  position:fixed;
-  top:20px;
-  right:20px;
-  width:301px;
-  z-index:9999;
-  background-color:#666;
-}
-#gritter-notice-wrapper.bottom-right {
-  top: auto;
-  left: auto;
-  bottom: 20px;
-  right: 20px;
-}
-.gritter-item-wrapper {
-  position:relative;
-  margin:0 0 10px 0;
+#gritter-container {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  text-align: center;
+  z-index: 9999;
 }
 
-.gritter-top {
-  height:10px;
-}
-.hover .gritter-top {
-  background-position:right -30px;
-}
-.gritter-bottom {
-  height:8px;
-  margin:0;
-}
-.hover .gritter-bottom {
-  background-position: bottom right;
-}
 .gritter-item {
-  display:block;
-  color: #eee;
-  padding: 2px 11px 8px 11px;
-  font-size: 11px;
-}
-.hover .gritter-item {
-  background-position:right -40px;
-}
-.gritter-item p {
-  padding:0;
-  margin:0;
-}
-.gritter-close {
-  display:none;
-  position:absolute;
-  top:5px;
-  left:3px;
-  cursor:pointer;
-  width:30px;
-  height:30px;
-}
-.gritter-title {
-  font-size:14px;
-  font-weight:bold;
-  padding:0 0 7px 0;
-  display:block;
-  text-shadow:1px 1px 0 #000; /* Not supported by IE :( */
-}
-.gritter-image {
-  width:48px;
-  height:48px;
-  float:left;
-}
-.gritter-with-image,
-.gritter-without-image {
-  padding:0 0 5px 0;
-}
-.gritter-with-image {
-  width:220px;
-  float:right;
-}
-/* for the light (white) version of the gritter notice */
-.gritter-light .gritter-item,
-.gritter-light .gritter-bottom,
-.gritter-light .gritter-top,
-.gritter-close {
-  color: #222;
-}
-.gritter-light .gritter-title {
-  text-shadow: none;
+  position: relative;
+  max-width: 400px;
+  min-width: 0;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
 }
 
-@media all and (max-width: 400px){
-  #gritter-notice-wrapper{
-    max-height:172px;
-    overflow:hidden;
-    width:100% !important;
-    background-color: #ccc;
-    bottom:20px;
-    left:0px;
-    right:0px;
-    color:#000;
-  }
-  .gritter-close {
-    display:block !important;
-    left: auto !important;
-    right:5px;
-  }
-  #gritter-notice-wrapper.bottom-right{
-    left:0px !important;
-    bottom:30px !important;
-    right:0px !important;
-  }
-  .gritter-item p{
-    color:black;
-    font-size:16px;
-  }
-  .gritter-title{
-    text-shadow: none !important;
-    color:black;
-  }
-  .gritter-item{
-    padding:2px 11px 8px 4px;
-  }
-  .gritter-item-wrapper{
-    margin:0;
-  }
-  .gritter-item-wrapper > div{
-    background: none;
-  }
+.gritter-item .gritter-content {
+  flex: 1 auto;
+  text-align: center;
 }
-@media only screen and (max-width: 720px) {
-  #gritter-notice-wrapper{
-    bottom:43px !important;
-    right:10px !important;
-  }
+
+.gritter-item .gritter-close {
+  display: none;
+  align-self: center;
+}
+
+.gritter-item.sticky .gritter-close {
+  display: block;
+}
+
+.gritter-item.error {
+  color: #a84341;
+  background-color: #eed3d4;
 }