<div id="overlay"></div>
<div class="wrapper">
<section class="content">
      <div class="search_area" id="search_area">
        <input type="text" class="search-input" id="search_input" placeholder="type to search" />
          <input type="submit" value="search" class="submit-btn"></input>
          </div>
  <p>Below you can find some example content that is only there for example reasons. <b> The Search box above is the thing you should pay attention to.</b> (Hint: Click inside!)</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur consequatur ex modi libero asperiores doloribus officiis vitae molestias repudiandae est. Corporis quod quibusdam vero rem fuga commodi distinctio harum possimus.</p>
  <img src="http://daten.kevingimbel.de/img/portfolio/live/gc2012/FALD_BW.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur consequatur ex modi libero asperiores doloribus officiis vitae molestias repudiandae est. Corporis quod quibusdam vero rem fuga commodi distinctio harum possimus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur consequatur ex modi libero asperiores doloribus officiis vitae molestias repudiandae est. Corporis quod quibusdam vero rem fuga commodi distinctio harum possimus.</p>
  <img src="http://daten.kevingimbel.de/img/portfolio/live/sw/Ira-Atari-black-white-7320.jpg" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur consequatur ex modi libero asperiores doloribus officiis vitae molestias repudiandae est. Corporis quod quibusdam vero rem fuga commodi distinctio harum possimus.</p>
    </section>
</div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {
  margin:0;
  padding:0;
  position:relative;
  @include box-sizing(border-box);
}

body {
  font-family: 'Open Sans', sans-serif;
  color:white;
}

.wrapper {
  width:500px;
  height:auto;
  margin:0 auto;
  background:#222222;
  padding:50px 0;
}
p {
  padding:15px 25px;
}

img {
  width:100%;
  height:auto;
}

.search_area {
  width:300px;
  height:auto;
  margin:0 auto;
  padding:3px;
  background:#f1f1f1;
  border:1px solid #ccc;
  @include border-radius(3px);
  z-index:3;
}

.search-input {
  width:75%;
  padding:7px 14px;
  background:none;
  border:none;
    
    &:focus {
      outline:none;
    }
}

.submit-btn {
  position:absolute;
  right:2px;
  top:2px;
  background:#34495E;
  border:none;
  padding:8px 14px;
  color:white;
  font-weight:bold;
  @include border-radius(3px);
  
    &:hover {
      background:#2C3E50;
      cursor:pointer;
    }
}

#overlay {
  width:100%;
  height:100%;
  background:rgba(black,.8);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:none;
}

$(document).ready(function() {
  
  $('#search_input').focus(function() {
    $('#search_area').animate({
      "width":"450px"
    });
    $('#overlay').fadeIn();
  });
  
  $('#overlay').click(function() {
    $('#search_area').animate({
      "width":"300px"
    });
    $('#overlay').fadeOut();
  });
});