#search_field,.search_field_2,#search_field3{
    
  /* float:left; */ 	/* float:left; is just for page layout, thats it */
	-webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;

    width: 85px;
    // width: 16px;
    // color: transparent;
    // border: none;
padding:3px;
padding-left:5px;
	 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
}
#search_field,.search_field_2{	
-moz-border-radius: 15px;
border-radius: 15px;
    // background: #333333 url(./img/search2.png) no-repeat;
    background: #f9f9f9 url(./img/search2.png) no-repeat;
	
	background-image:  url(./img/search2.png), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
	background-image:  url(./img/search2.png), -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

background-position: 98% 65%; 
}
#search_field3{	
-moz-border-radius: 5px;
border-radius: 5px;
    // background: #333333 url(./img/search2NONE.png) no-repeat;
    background: #f9f9f9 url(./img/search2NONE.png) no-repeat;
	
	background-image:  url(./img/search2NONE.png), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
	background-image:  url(./img/search2NONE.png), -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

background-position: 98% 65%; 
}

#search_form{	/*	this is optional too, and still looks good without form styling.  Optional: */

background: #eaf8fc;
	background-image: -moz-linear-gradient(#fff, #d4e8ec);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
	
	-moz-border-radius: 35px;
	border-radius: 35px;
	
	border-width: 1px;
	border-style: solid;
	border-color: #c4d9df #a4c3ca #83afb7;            
	height: 33px;
	padding: 10px;
	margin: 50px auto 50px;
	overflow: hidden; /* Clear floats */
	display:inline-block;
	 display: table;	
	 /*	
		both
	 
		 display:inline-block;
		 display: table;
		 are there for the same reason, 
		 to fit the 'form' to the 'input field' when it streches.
		 they both work.
		 
		 according to http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents
		 you may want to add:
			display: -moz-inline-stack;
			display: inline-block;
			zoom: 1;
			*display: inline;
		but not sure, 
display: table;	works, there should be a conditional
ie only comment that says 
(is that *html? i forget)
A conditional comment with position: absolute is necessary for lessthan IE8. 
	 */
}
#search_field:focus,.search_field_2:focus,#search_field3:focus{
    background-color: #fff;
 /*	*/  width: 145px;
	color: #333333;outline:0px;
}






#search_field:hover, .search_field_2:hover, #search_field3:hover, { 
//cursor: pointer;/* added line */	/*	i don't like that line. -lon*/
 } 
#search_field::-webkit-input-placeholder, .search_field_2::-webkit-input-placeholder, #search_field3::-webkit-input-placeholder, {
   color: #9c9c9c;
  // font-style: italic;
}

#search_field:-moz-placeholder,.search_field_2:-moz-placeholder,#search_field3:-moz-placeholder, {
   color: #9c9c9c;
//   font-style: italic;
}  

#search_field:-ms-placeholder,.search_field_2:-ms-placeholder,#search_field3:-ms-placeholder, {
   color: #9c9c9c;
 //  font-style: italic;
}