body {
    font-family:Verdana,sans-serif;
}

.mainPage {
    display:table;  
    margin:0 auto;
    width:350px;
}

.login {
    margin: auto;
    text-align:center;
    height:455px;
}

.login  .logo {
    text-align:center;
    padding:5px;
}
.login .logo img {
    width:350px;
}

.logo_pie {
}

.logo_pie img {
    width:150px;
    }

.login  .titulo {
	color : #008E28;
	Font-Family : sans-serif, Arial;
	Font-Size   : 16pt;
    text-align  : Center;
	line-height: 24px;
    margin: 5px;
}

.login  .copyright {
	color : #008E28;
	Font-Family : sans-serif, Arial;
	Font-Size   : 10pt;
    text-align  : Center;
	line-height: 24px;
    margin: 65px 5px 0px 5px;

}

.login  hr {
	color : #D8EEBE;
	background-color : #D8EEBE;
	width: 200px;
    height: 1px;
}

.panel {
    padding:50px;
}
.input {   
    background-color:#D8EEBE !important;
    display:inherit;
    margin-bottom: 5px;
    padding: 5px;
    width:98%;
    box-shadow: 0 0 5px #008E28;
    border: 0;
}
.label {   
    display:inherit;
    text-align:left;
    padding-bottom:5px;
    color:#008E28;
}

.error {
	color : red;
	text-align: center;
    width:100%;
    height: 20px;
}

/*Help tooltip*/ 
/* Clase que tendra el tooltip */  
.cssToolTip {
 position: relative; /* Esta clase tiene que tener posicion relativa */
 color: #ff8c00; /* Color del texto */
}
 
/* El tooltip */
.cssToolTip span {
 background: #D8EEBE;
 opacity:0.7;
 border: 0 solid;
 border-radius: 5px;
 box-shadow: 1px 1px 1px #008E28;
 color: #008E28;
 display: none; /* El tooltip por defecto estara oculto */
 font-size: 0.8em;
 padding: 5px 5px 5px 5px;
 width: 250px;
 position: absolute; /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */
 top: 40px; /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */
 left: 0px; /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */
 z-index: 100; /* Poner un z-index alto para que aparezca por encima del resto de elementos */
}

.cssToolTip span:after {
    content: '';
  position: absolute;
  top: -15%;
  left: 50%;
  margin-left: -13px;
  width: 0; height: 0;
  border-bottom: 8px solid #D8EEBE;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;

}
 
/* El tooltip cuando se muestra */
.cssToolTip:hover span {
 display: inline; /* Para mostrarlo simplemente usamos display block por ejemplo */
}