.searchbox{
 position:relative;
 min-width:30px;
 width:0%;
 height:30px;
 float:right;
 overflow:hidden;
 -webkit-transition: width 0.3s;
 -moz-transition: width 0.3s;
 -ms-transition: width 0.3s;
 -o-transition: width 0.3s;
 transition: width 0.3s;
}
.searchbox-open{
 width:180px;
}


.searchbox-input{
 position:absolute;
 top:0;
 right:0;
 border:0;
 outline:0;
 background:#ffffff;
 width:auto;
 height:24px;
  padding-bottom: 4px;
  padding-top: 2px;
 margin:0;
 padding-left: 10px;
 font-size: 14px;
 color: #1f508f;
}
.searchbox-input::-webkit-input-placeholder {
 color: #1f508f;
}
.searchbox-input:-moz-placeholder {
 color: #1f508f;
}
.searchbox-input::-moz-placeholder {
 color: #1f508f;
}
.searchbox-input:-ms-input-placeholder {
 color: #1f508f;
}

.searchbox-icon,
.searchbox-submit{
 display:block;
 position:absolute;
 top:0;
 font-size:22px;
 right:0;
 padding:0;
 margin:0;
 border:0;
 outline:0;
  text-indent: -9999px;
  width: 30px;
  height: 30px;
  background-image: url(pics/search-btn.png);
  background-position: center;
  background-repeat: no-repeat;
  line-height:30px;
  text-align:center;
  cursor:pointer;
  background-color: #fff;
}
.searchbox-icon-open, .searchbox-submit{
  background-color:#f2f7fb;
  }