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);
}