title: How can I hide/show html elements without losing initial CSS Styling?
body: <p>I'm trying to fix a log-in form on a website. When the user clicks our log-in link, a Log In form shows up in the horizontal center of the screen. When the user clicks on "Forgot Password?", the log-in form is set to display:none and the Forgot Password form appears in its place. Now if the user clicks "Forgot Password?" then they click "Cancel", the Forgot Password form disappears and the Log-In form reappears. The problem exists when the Log-In form reappears. It is no longer horizontally centered in the screen, instead it aligns left.</p>
  
  <p>I understand that I could toggle visibility, but I don't want the space to be there, I want it to be replaced with the new form. Yet display:none isn't helping much either because it loses some CSS.</p>
  
  <p>Here's the HTML (To respect my employer's company, I replaced our links in the src or href attributes):
  <a href="http://pastebin.com/f4HMpfLk" rel="nofollow">http://pastebin.com/f4HMpfLk</a></p>
  
  <p>Here's the CSS:
  <a href="http://pastebin.com/wdwp8TqM" rel="nofollow">http://pastebin.com/wdwp8TqM</a></p>
  
  <p>Is there a way for me to toggle visibility of the initial form, without losing the styling? Or is there a way I can keep it centered? I'm open to trying better ways of doing this. Thanks</p>
  
  <p>PS: I tried changing document.getElementById('LoginWindow').style.display = 'inline-block'; to flex, which did center the window, but the contents within the div align left, and I lose CSS styling on the contents. </p>