zzdf

ISSO VAI SER DENTRO DO <STYLE>

#conta {width:30px;font-size:10px; font-family:comic; color:#919191;margin-top:300px;margin-left: -100px;position: fixed;padding: 1px; background: #fff; border-bottom: 1px;border-bottom-style:solid;text-align: center;opacity:0.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#conta:hover {opacity:1.0;width:60px;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}


#conta2 {width:65px; height:40px;font-size:10px; font-family:comic; color:#919191;margin-top:250px;margin-left:-100px;position: fixed;padding: 1px; background: #fff; border: 1px solid {color:bordas};text-align: center;opacity:1.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;}

#conta2:hover {opacity:1.0;width:65px;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#vistos {width:50px;font-size:10px; font-family:comic; color:#919191;margin-top: 10px;margin-left: 6px;position: fixed;padding: px; background: #fff; border: 1px solid {color:bordas};text-align: center;opacity:0.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#vistosfra {width:50px;font-size:11px; font-family:comic; color:#919191;margin-top: 10px;margin-left: 6px;position: fixed;padding: px; background: #fff; border: 1px solid #eee;text-align: center;opacity:1.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#conta2:hover #vistos{opacity:1.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#conta2:hover #vistosfra{opacity:0.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#ons {width:50px;font-size:10px; font-family:comic; color:#919191;margin-top:4px;margin-left: -1px;position: fixed;padding: px; background: #fff; border: 1px solid #eee;text-align: center;opacity:0.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#onsfra {width:50px;font-size:10px; font-family:comic; color:#919191;margin-top: 4px;margin-left:-1px;position: fixed;padding: px; background: #fff; border: 1px solid #eee;text-align: center;opacity:1.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#conta2:hover #ons{opacity:1.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#conta2:hover #onsfra{opacity:0.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}


#ff {width:50px;font-size:10px; font-family:comic; color:#919191;margin-top:4px;margin-left: -1px;position: fixed;padding: px; background: #fff; border: 1px solid #eee;text-align: center;opacity:0.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#fffra {width:50px;font-size:10px; font-family:comic; color:#919191;margin-top: 4px;margin-left:-1px;position: fixed;padding: px; background: #fff; border: 1px solid #eee;text-align: center;opacity:1.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#conta2:hover #ff{opacity:1.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}

#conta2:hover #fffra{opacity:0.0;-webkit-transition-duration: 0.4s;  -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}






AGORA ISTO É DEPOIS DO </STYLE>


<div id="conta">{text:conta}


   AQUI VOCÊ COLOCA SEU CÓDIGO !!

</div>