Twitter Bootstrap Modal Fade
===

I am using Twitter Bootstrap as a framework for designing a new social network that displays jobs and allows users to apply to the jobs with a simple one click process. When the user clicks "Apply" a modal window appears and gives them the option to select a resume then click "Apply." When the Apply button is clicked (opening the modal and closing the modal) I wish to have the modal fade in and out. I have all the bootstrap .js files downloaded and uploaded and I have all the CSS correct (i think), I just cannot get it to fade at all. 

Here is the first apply button clicked:

    <div class="float-right"><button id="apply-btn" class="btn-primary" data-toggle="modal" data-target="#apply" style="height: 40px;">Apply</button></div>

Here is the modal html:

    <div id="apply" class="hide">
    		<div class="modal fade in">
    			<form class="modal-form" action="#thank-you" method="post" style="margin-bottom: 60px;">
    				<div class="modal-header"><h2>Apply</h2></div>
    				
    				<div class="modal-body"> 
    				
    					<img class="apply_img" src="images/temp/prof_pic_temp.jpg" style="display: inline;">
    					<div class="apply_info">
    						<span class="apply_name">Tyler Bailey</span>
    						<ul>
    							<li><a href="schools.php">Western Michigan University</a></li>
    							<li><a href="#">Film, Video & Media Studies</a></li>
    						</ul>
    						<form id="doc_select" method="get">
    							<select name="doc_select" style="margin-bottom: 0px;">
    								<option select="selected">Select a resume</option>
    								<option value="1">Resume 1</option>
    								<option value="2">Resume 2</option>
    								<option value="3">Resume 3</option>
    							</select>
    							
    							<div class="control-group" style="margin-top: 25px;">
    								<label class="control-label" for="user_resume" style="font-weight: bold; margin-bottom: 0px;">Or upload new resume:</label>
    								<div class="control">
    									<input type="file" id="user_resume" size="30" />
    								</div>
    							</div>
    						</form>
    					</div>
    
    				</div>
    				
    				<div class="modal-footer">
    					<button type="submit" class="btn" data-dismiss="modal">Cancel</button>
    					<button type="submit" class="btn btn-primary">Apply</button>
    				</div>
    		</div>
    	</div><!-- #apply -->

And here is the modal fade css:

        .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 1050;
      max-height: 800px;
      overflow: auto;
      width: 560px;
      margin: -200px 0 0 -280px;
      background-color: #ffffff;
      border: 1px solid #999;
      border: 1px solid rgba(0, 0, 0, 0.3);
      *border: 1px solid #999;
      /* IE6-7 */
    
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      -webkit-background-clip: padding-box;
      -moz-background-clip: padding-box;
      background-clip: padding-box;
    }
    .modal.fade {
      -webkit-transition: opacity .3s linear, top .3s ease-out;
      -moz-transition: opacity .3s linear, top .3s ease-out;
      -ms-transition: opacity .3s linear, top .3s ease-out;
      -o-transition: opacity .3s linear, top .3s ease-out;
      transition: opacity .3s linear, top .3s ease-out;
    }
    .modal.fade.in {
      top: 50%;
    }

I have researched this for quite some time now and cannot waste anymore time on it. I know I can use jQuery to animate the fade in and out but I'd like to stick with the bootstrap framework and use it as it is supposed to be. 