html {background: #fff url('img/fundo_login.png')}



@-webkit-keyframes hinge {
	0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
	20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
	40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
	80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
	100% { -webkit-transform: translateY(700px); opacity: 0; }
}

@-moz-keyframes hinge {
	0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
	20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
	40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
	80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
	100% { -moz-transform: translateY(700px); opacity: 0; }
}

@-o-keyframes hinge {
	0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
	20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
	40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
	80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
	100% { -o-transform: translateY(700px); opacity: 0; }
}

@keyframes hinge {
	0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }	
	20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
	40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
	80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }	
	100% { transform: translateY(700px); opacity: 0; }
}


.hinge {-webkit-animation:hinge 2s; -moz-animation:hinge 2s; -o-animation:hinge 2s; animation:hinge 2s}



#loginContainer,#atualizarContainer {width:700px;margin:0 auto}
#sistemasIntegrados {width:152px; height:97px; text-indent: -9999em; background: transparent url('img/sistemasIntegrados.png') no-repeat;margin:20px auto 80px}
#blackForm {width:400px;margin:0 auto;padding:35px;background:rgba(0,0,0,.2);border-radius:5px;box-shadow: 0 1px rgba(255,255,255,.3);position:relative}
#greyForm {padding:10px 50px 8px 10px;background:#eee url('img/form_login_cadeado.png') center right no-repeat;border-radius:5px 5px 0 0}
#whiteForm {padding:20px;background:#fff url('img/fundo_form_login.png') bottom left no-repeat;border-radius:0 0 5px 5px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);position:relative}
#greyForm h2 {font-size:18px;font-weight:700;color:#333}
#whiteForm form label {width:300px;margin-left:30px}
#esqueciSenha {display:block;margin: 20px 0 80px 30px;float:left;background:#fff url('img/esqueciSenha.png') no-repeat;padding:0 0 0 25px}
#manterConectado {position:absolute; bottom:25px; left:0}
#entrarSistema {position:absolute; bottom:7px; right:10px}
#voltarSite {position:absolute;bottom:0; left:170px;background:rgba(0,0,0,.2) url('img/voltarSite.png') no-repeat 6px 8px;color:#fff;display:block;padding:8px 6px 8px 30px;width:auto;text-decoration:none}
#voltarSite:hover,#voltarSite:focus {background-color:rgba(0,0,0,.4)}

#atualizarNavegadores {color:#fff;width:345px;margin:80px auto;text-align:center;text-shadow: 1px 1px 0 rgba(0,0,0,.3)}
#atualizarNavegadores p {margin-bottom:10px}
.bxnav {display:block;float:left;background:transparent url(img/navegadores.png) no-repeat; width:64px; height:78px; margin:10px 0 10px 40px;text-align:center;text-decoration:none}
.bxnav span {color:#fff;display:block;margin-top:67px}
.nff {background-position:-119px 0}
.nop {background-position:-232px 0}
.bxnav:hover, .bxnav:focus {margin-top:8px}


p.sucesso,p.erro,p.aviso,p.info {padding:20px; margin:-20px -20px 10px -20px; border:1px solid #ddd; border-width:1px 0 1px 0; text-indent:0; box-shadow: 0 1px 1px #ddd; background-position: 10px 3px; background-repeat: no-repeat}
p.sucesso {background-color:#d6e6aa; color:#4a6b29; border-color:#69ab2f;background-image:url("img/sucesso.png");}
p.erro {background-color:#f4af94; color:#7d4737; border-color:#c46547;background-image:url("img/erro.png")}
p.aviso {background-color:#f4ee94; color:#827835; border-color:#dcc845;background-image:url("img/aviso.png")}
p.info {background-color:#9fcef6; color:#3B5E74; border-color:#2f89ab;background-image:url("img/info.png")}


#overlay_load {background: #fff url("img/spin.gif") no-repeat center center; width:100%;height:100%;opacity:0.7;-webkit-opacity:0.7;position:fixed;z-index:100;top:0;left:0}

#atualizarContainer h1, #atualizarContainer h2 {color:#FFFF56;font:bold 24px Arial;margin:40px 10px 20px 10px;_margin:10px}
#atualizarContainer h2 {font-size:20px}
#atualizarContainer p {color:#fff;padding:10px;font-size:14px}
#atualizarContainer #atualizarNavegadores {float:left;width:550px;margin:10px 0 10px 150px;_display:inline}