html, body { min-height: 100%; } .humane, .humane-flatty { position: fixed; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 100000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .humane, .humane-flatty { font-family: Helvetica Neue, Helvetica, san-serif; font-size: 16px; top: 0; left: 30%; opacity: 0; width: 40%; color: #444; padding: 10px; text-align: center; background-color: #fff; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.5); -moz-transform: translateY(-100px); -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); } .humane p, .humane-flatty p, .humane ul, .humane-flatty ul { margin: 0; padding: 0; } .humane ul, .humane-flatty ul { list-style: none; } .humane.humane-flatty-info, .humane-flatty.humane-flatty-info { background-color: #3498db; color: #FFF; } .humane.humane-flatty-success, .humane-flatty.humane-flatty-success { background-color: #18bc9c; color: #FFF; } .humane.humane-flatty-error, .humane-flatty.humane-flatty-error { background-color: #e74c3c; color: #FFF; } .humane-animate, .humane-flatty.humane-flatty-animate { opacity: 1; -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .humane-animate:hover, .humane-flatty.humane-flatty-animate:hover { opacity: 0.7; } .humane-js-animate, .humane-flatty.humane-flatty-js-animate { opacity: 1; -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .humane-js-animate:hover, .humane-flatty.humane-flatty-js-animate:hover { opacity: 0.7; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); }