@import 'https://fonts.googleapis.com/css?family=Ubuntu&v2';

/* recommended base settings */
html, body { height: 100%; }
.humane {
  filter                : progid:DXImageTransform.Microsoft.alpha(opacity=100);
  -ms-filter            : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
  position              : fixed;
  _position             : absolute; /* ie6 */
  -moz-transition       : all .2s ease-in;  /* .2s transition */
  -webkit-transition    : all .2s ease-in;
  -o-transition         : all .2s ease-in;
  -ms-transition        : all .2s ease-in;
  transition            : all .2s ease-in;
  z-index               : -1;
}
.humane.humane-show { z-index: 100000; }
/* ie hover state, recommended */
.humane:hover {
  filter                : progid:DXImageTransform.Microsoft.alpha(opacity=20);
  -ms-filter            : "progid:DXImageTransform.Microsoft.alpha(opacity=20)";
}
/* standards hover state, recommended */
div.humane.humane-show:hover { opacity: 0.2; }

/* custom settings */
.humane {
  font-family           : Arial, Helvetica, sans-serif;
  font-size             : 25px;
  letter-spacing        : -1px;
  top                   : 25%;
  left                  : 25%;
  opacity               : 0;
  width                 : 40%;
  color                 : #ffffff;
  padding               : 10px;
  text-align            : center;
  background-color      :                                                       rgb(255,255,255);
  background-color      :                                                      rgba(255,255,255,0.8);
  background-image      : -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.8)));
  background-image      : -webkit-linear-gradient(                        top, rgba(255,255,255,0.8),     rgba(255,255,255,0.8));
  background-image      : -moz-linear-gradient(                           top, rgba(255,255,255,0.8),     rgba(255,255,255,0.8));
  background-image      : -ms-linear-gradient(                            top, rgba(255,255,255,0.8),     rgba(255,255,255,0.8));
  background-image      : -o-linear-gradient(                             top, rgba(255,255,255,0.8),     rgba(255,255,255,0.8));
  background-image      : linear-gradient(                                top, rgba(255,255,255,0.8),     rgba(255,255,255,0.8));;
  -moz-border-radius    : 15px;
  -webkit-border-radius : 15px;
  -o-border-radius      : 15px;
  border-radius         : 15px;
  text-shadow           : 0 -1px 1px #ddd;
  -moz-box-shadow       : 0 4px 4px -4px #fff;
  -webkit-box-shadow    : 0 4px 4px -4px #fff;
  box-shadow            : 0 4px 4px -4px #fff;
  -webkit-transform     : scale(1.1);
  -moz-transform        : scale(1.1);
  -o-transform          : scale(1.1);
  -ms-transform         : scale(1.1);
  transform             : scale(1.1);
}

/* custom animation for css transition supported browsers */
.humane.humane-show {
  opacity: 1;
  -webkit-transform     : scale(1);
  -moz-transform        : scale(1);
  -o-transform          : scale(1);
  -ms-transform         : scale(1);
  transform             : scale(1);
}

/* other customizations */
.humane p {
  margin                : 1em;
  display               : inline;
}
.humane ul {
  list-style            : none;
  margin                : 0;
  padding               : 0;
}
.humane .error {
  color                 : #FF0000;
  font-weight:bold;
   /*text-shadow           : 0 -1px 1px #f11;*/
  font-family:Arial, Helvetica, sans-serif;
}