Trying to add a TwentyThirteen search box to a Twenty Twelve child theme

In my twenty twelve child theme (in development on my MAMP setup so there’s no link to show you)…

In my navigation code in header.php I added the get_search_form code as follows:

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
            <?php get_search_form(); ?>
		</nav><!-- #site-navigation -->

And in my style.css I added this code based off the css of twenty thirteen for the search box:

/* search box in nav area */
#search-form {
    float: right;
}
#site-search {
        background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 20px;
	margin: 0;
	padding: 0 0 0 34px;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition: width 400ms ease, background 400ms ease;
	width: 0;
}
#site-search:focus {
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-color: #fff;
	cursor: text;
	outline: 0;
	width: 230px;
}

But I’m getting a search form and button which look default to WordPres and not the one used in TwentyThirteen, and it’s centered under my navigation menu instead of being to the right. So there’s no magnifying glass icon or expandable search box with animation like on TwentyThirteen.

Is there something from the core of TwentyThirteen that I need to add to TwentyTwelve in order to make this work? I want this nice search box to be at the right of my navigation menu in Twenty Twelve.