title: Conditional CSS3... if that's even what it's called
body: <p>I have a search bar with some social media buttons just to the side of it. I wanted to use the CSS3 Transition property to have the bar change in width when I click on it but I need the buttons to shift as well. This is what I have so far</p>
  
  <pre><code>#s
  {
  transition: width 2s;
  -moz-transition: width 2s; /* Firefox 4 */
  -webkit-transition: width 2s; /* Safari and Chrome */
  -o-transition: width 2s; /* Opera */
  }
  
  #s:focus {
  width:110px;
  }
  
  .search input[type="text"], .widget_search input[type="text"] {
  background-image: url(api/images/icons/search.png);
  background-repeat: no-repeat;
  background-position: 8px 50%;
  padding-left: 25px;
  width: 80%;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  }
  
  #searchform #searchsubmit {
  clear: both;
  display: block;
  margin: 10px 0;
  }
  </code></pre>
  
  <p>The text field changes width just fine but to reiterate, I want to know if I can change the position of the buttons next to the text field when I click in the text field.</p>
  
  <pre><code>&lt;div id="header-widget-area" class="widget-area" role="complementary"&gt;
      &lt;div id="pc_info_widget_designfolio-4" class="widget pc_info_widget"&gt;
          &lt;a class="sm-icon" target="_blank" href="http://www.facebook.com/TheRedBalloonToyStore"&gt;
          &lt;img width="32" height="32" alt="Facebook" src="http://redballoontoystore.com/w/wp-content/themes/designfolio/images/facebook.png"&gt;
          &lt;/a&gt;
          &lt;a class="sm-icon" target="_blank" href="http://twitter.com/RBToyStore"&gt;
          &lt;img width="32" height="32" alt="Twitter" src="http://redballoontoystore.com/w/wp-content/themes/designfolio/images/twitter.png"&gt;
          &lt;/a&gt;
          &lt;div class="search"&gt;
              &lt;form id="searchform" action="http://redballoontoystore.com/w/" method="get" role="search"&gt;
                  &lt;span&gt;
                  &lt;input id="s" type="text" name="s" size="10" value="" placeholder="Search…"&gt;
                  &lt;input id="searchsubmit" type="submit" value="Search"&gt;
                  &lt;/span&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>