Poupup login

<!-- #region sign_in_popup -->
<div id="document_modal" class="modal" style="display:none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: #3E3E3E;"></div>
<div id="sign_in_popup_popup" style="display:none; position: absolute; top: 9%; left: 27%; z-index: 10001" class="popupWrapper">
   <div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 641px;">
      <div style="" id="inline_login_form">
         <form id="login" method="post" action="/login.forum">
            <h3>Entrar</h3>
            <!-- BEGIN switch_fb_connect -->
            <div class="ipsBox_notice">
               <ul class="ipsList_inline">
                  <li>
                     <a class="ipsButton_secondary" href="/facebook_connect.forum" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">
                        <img alt="Facebook" src="http://i69.servimg.com/u/f69/16/62/61/50/facebo10.png"> &nbsp; Use Facebook
                     </a>
                  </li>
               </ul>
            </div>
            <!-- END switch_fb_connect -->
            <br>
            <div class="ipsForm ipsForm_horizontal">
               <fieldset>
                  <ul>
                     <li class="ipsField">
                        <div class="ipsField_content">
                           Precisa de uma conta? <a title="Registre-se agora!" href="/register">Registre-se agora!</a>
                        </div>
                     </li>
                     <li class="ipsField ipsField_primary">
                        <label class="ipsField_title" for="username">Usuário ou E-mail:</label>
                        <div class="ipsField_content">
                           <input type="text" tabindex="0" size="30" name="username" class="input_text" id="ips_username">
                        </div>
                     </li>
                     <li class="ipsField ipsField_primary">
                        <label class="ipsField_title" for="password">Senha</label>
                        <div class="ipsField_content">
                           <input type="password" tabindex="0" size="30" name="password" class="input_text" id="ips_password"><br>
                           <a title="Retrieve password" href="/profile?mode=sendpassword">Esqueci minha senha</a>
                        </div>
                     </li>
                     <li class="ipsField ipsField_checkbox">
                        <input type="checkbox" tabindex="0" class="input_check" value="1" name="autologin" checked="checked" id="autologin">
                        <div class="ipsField_content">
                           <label for="autologin">
                              <strong>Lembrar dados</strong><br>
                              <span class="desc lighter">Não recomendado para computadores públicos</span>
                           </label>
                        </div>
                     </li>
                     <li class="ipsPad_top ipsForm_center desc ipsType_smaller">
                        <a href="{FORUMURLINK}" rel="nofollow">Privacy Policy</a>
                     </li>
                  </ul>
               </fieldset>
               <div class="ipsForm_submit ipsForm_center">
                  <!-- <input type="submit" tabindex="0" value="Entrar" class="ipsButton"> -->
                  <input type="submit" tabindex="0" class="login-submit ipsButton" name="login" value="Entrar"/>
                  <input name="redirect" type="hidden" value="" /><br />
               </div>
            </div>
         </form>
      </div>
   </div>
   <div id="sign_in_popup_close" class="popupClose clickable">
      <img alt="x" src="http://i.imgur.com/rYltibP.png" onclick="sign_in_popup();">
   </div>
</div>
<script type="text/javascript">
   //<![CDATA[
   $(document).ready(function() {
      $('#user_navigation #sign_in').attr('href', '#').attr('onclick', 'sign_in_popup()');
      /*
      $('#user_navigation #sign_in').click(function() {
         sign_in_popup();
      });
      */
   });
   function sign_in_popup() {
      var x = document.getElementById('sign_in_popup_popup');
      if (x.style.display == 'none') {
         jQuery(x).add('#document_modal').fadeIn('slow');
         var r = x.getElementsByTagName('form')[0].redirect;
         r.value = window.location.href;
      } else {
         jQuery(x).add('#document_modal').fadeOut('slow');
      }
   }
   jQuery(function(){if(document.getElementById('logout')) document.getElementById('sign_in_popup_popup').style.display = 'none'; });
   //]]>
</script>
<style type="text/css">
   <!--

  .popupWrapper {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
.popupWrapper {
    background: none repeat scroll 0% 0% #FFF;
    padding: 2.6em;
    border-radius: 2px;
}

  #sign_in_popup_popup .popupInner {
    width: 100% !important;
    padding: 3px;
}
.popupInner {
    width: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

  .popupInner h3 {
    margin-bottom: 10px;
    padding-right: 33px;
}
.popupInner h3 {
    background-color: transparent;
    color: #222;
    font-size: 26px;
    font-weight: 400;
    text-transform: uppercase;
}

  fieldset, img {
    border: 0px none;
}

  #inline_login_form .ipsForm_center {
    text-align: left;
}
.ipsForm_center {
    text-align: center;
}
.ipsForm_submit {
    padding: 5px 0px;
    text-align: right;
    margin-top: 25px;
}

  .popupClose:before {
    color: #47586E;
    font-family: ikons;
    font-size: 32px;
}

  .popupClose {
    padding: 20px;
    font-size: 20px;
}
.popupClose {
position: absolute;
right: -2px;
top: -10px;
}
.clickable {
    cursor: pointer;
}




 #inline_login_form .ipsButton {
    min-width: 100%;
}


  .ipsButton {
    transition: all 0.1s ease-in-out 0s;
    background-color: transparent;
    border: 2px solid #47586E;
    border-radius: 2px;
    color: #D6303A;
    font-weight: 500;
    font-size: 16px;
    line-height: 41px;
    height: 41px;
    padding: 0px 10px;
    text-align: center;
    min-width: 125px;
    display: inline-block;
    cursor: pointer;
}



 .ipsForm_horizontal .ipsField {
    margin-bottom: 15px;
}

  #inline_login_form .ipsForm_horizontal .ipsField_content {
      margin-left: 0px;
}

  .popupWrapper a {
    color: #222;
}

  #inline_login_form .ipsField_title {
    display: none;
}
.ipsForm_horizontal .ipsField_title {
    float: left;
    width: 185px;
    padding-right: 15px;
    text-align: right;
    line-height: 1.8;
}
.ipsField .ipsField_title {
    font-weight: bold;
    font-size: 15px;
}

  .ipsField_primary input {
    font-size: 18px;
}

  #inline_login_form .ipsField_title {
    display: none;
}
.ipsForm_horizontal .ipsField_title {
    float: left;
    width: 185px;
    padding-right: 15px;
    text-align: right;
    line-height: 1.8;
}
.ipsField .ipsField_title {
    font-weight: bold;
    font-size: 15px;
}

  #inline_login_form .ipsForm_horizontal .ipsField_checkbox {
    margin: 0px 0px 15px;
}

  .ipsForm .ipsField_checkbox input {
    float: left;
    margin-top: 3px;
}

  #inline_login_form .ipsField_content label strong {
    padding-left: 8px;
}

  #inline_login_form .ipsField_content label span {
    padding-top: 5px;
    display: inline-block;
}
.desc.lighter {
    color: #A4A4A4;
}
.desc {
    font-size: 12px;
    color: #777;
}













   -->
</style>
<!-- #endregion sign_in_popup -->