.page_search_field {
  /* 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: 115px;
				// width: 16px;
				// color: transparent;
				// border: none;
				// background: #333333 url(./img/search2.png) no-repeat;
				background: #f9f9f9 url(./img/search2.png) no-repeat;
				
			background-position: 98% 65%; 
			-moz-border-radius: 15px;
			border-radius: 15px;
			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);            
				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%);

			}

			.page_search_field_form{

			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 !important;
				margin: 50px auto 50px;
				overflow: hidden; /* Clear floats */
				width:130px;
				 /*	
	
	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. 
	 */
}
			.page_search_field:focus {
				background-color: #fff;
			 /*  width: 235px;	*/
				color: #333333;outline:0px;
			}






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

			.page_search_field:-moz-placeholder {
			   color: #9c9c9c;
			//   font-style: italic;
			}  

			.page_search_field:-ms-placeholder {
			   color: #9c9c9c;
			 //  font-style: italic;
			}
			
			
.sb_wrapper{margin:0;padding:0;float: right;width:372px;}
			.sb_wrapperNOT input[type="text"],ul.sb_dropdown{border:1px solid #fff;background:#fafafa;float:left; 
				background:-webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#fafafa)); 
				background:-moz-linear-gradient(top,#f2f2f2,#fafafa);font-size:24px;margin:3px 0px;
				padding:6px 5px 6px 20px;font-family:"Myriad Pro","Trebuchet MS",sans-serif;outline:none;
				-moz-box-shadow:1px 1px 3px #555;-webkit-box-shadow:1px 1px 3px #555;width:345px;
				-box-shadow:1px 1px 3px #555;text-shadow:1px 1px 1px #fff;}	
			ul.sb_dropdown{list-style:none;width:236px;padding:6px 5px;border-bottom-right-radius:10px;
				-moz-border-radius:0px 0px 10px 10px;-webkit-border-bottom-right-radius:10px;float:left;
				-webkit-border-bottom-left-radius:10px;border-bottom-left-radius:10px;}
			ul.sb_dropdown li{font-size:16px;line-height:32px;height:32px;float:left;width:50%;}
			ul.sb_dropdown li input[type="checkbox"]{float:left;margin:10px 4px 0 5px;}
			ul.sb_dropdown li.sb_filter{width:224px;border:1px solid #f9f9f9;clear:both;letter-spacing:1px;
				background:#ddd;font-size:12px;text-transform:uppercase;line-height:16px;padding:5px;
				color:#444;-moz-box-shadow:0px 0px 2px #777;-webkit-box-shadow:0px 0px 3px #555 inset;
				height:16px;-box-shadow:0px 0px 3px #555 inset;}
			span.sb_up,span.sb_down{position:absolute;top:3px;left:0px;width:14px;z-index:10;
				height:41px;background-color:#f2f2f2;background-position:center center;
				background-repeat: no-repeat;border:1px solid #fff;-moz-box-shadow:1px 0px 1px #ddd;
				-webkit-box-shadow:1px 0px 1px #ddd;-box-shadow:1px 0px 1px #ddd;}	
			span.sb_up{background-image:url(./icons/up.png);}span.sb_down{background-image:url(./icons/down.png);}
			input.sb_search{background:#f2f2f2 url(./icons/search.png) no-repeat center center;
				height:43px;width:50px;float:left;border:none;margin:3px 0px;border:1px solid #fff;
				-moz-box-shadow:1px 1px 3px #555;-webkit-box-shadow:1px 1px 3px #555;
				-box-shadow:1px 1px 3px #555;outline:none;cursor:pointer;}input.sb_search:hover{background-color:#fff;}