.search { display:inline-block; vertical-align:top;}
.search input[type="text"] {
  height: 26px;
  font-size: 16px;
  display: inline-block;
  font-weight: 100;
  border: none;
  outline: none;
  color: #6d6a6a;
  padding: 3px;
  padding-right: 30px;
  width: 0px;
  position:relative;
  top: 0;
  right: 0;
  background: none;
  /*z-index: 3;*/
  transition:all .5s;
  font-weight:bold;font-family: 'PT Sans'
}

.search:hover input[type="text"] {
  display: block;
  width: 220px;
  /*z-index: 1;*/
  border-bottom: 1px solid #BBB;
}

.search input[type="text"]:focus {
  width: 220px;
  cursor: text;
}
.search input[type="submit"] {
  height: 30px;
  width: 30px;
  color:red;
  float: right;
  background:url(icon-search.gif) no-repeat;
  text-indent: -10000px;
  border: none;
 position: absolute;
  top: 0;
  right: 0;
  /*z-index: 2;*/
  cursor: pointer;
  /*transition: opacity .4s ease;*/
  transition: all .5s;
}

.search input[type="submit"]:hover {
  /*opacity: 0.8;*/
}

@media only screen and (max-width: 980px) {
.search input[type="text"] { width:100%;  border-bottom: 1px solid #BBB; cursor: text;}
.search input[type="text"]:focus { width:100%;}
.search input[type="submit"] { top:8px; right:24px;}
}