.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}    



/* Form wrapper styling */
.form-wrapper {
	width: 120px;
	padding: 2px;
	background: #444;
	background: rgba(0,0,0,.2);
	border-radius: 2px;
	box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
  
}
.form-wrappermobi {
	width: 180%;
	padding: 2px;
	background: #444;
	background: rgba(0,0,0,.2);
	border-radius: 2px;
	box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}


/* Form text input */

.form-wrapper input {
	width: 77px;
	height: 17px;
	padding: 2px 5px;
	float: left;
	font: bold 13px 'lucida sans', 'trebuchet MS', 'Tahoma';
	border: 0;
	background: #eee;
	border-radius: 3px 0 0 3px;
   
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    

/* Form submit button */
.form-wrapper button {
	overflow: visible;
	position: relative;
	float: right;
	border: 0;
	padding: 0;
	cursor: pointer;
	height: 20px;
	width: 30px;
	color: #fff;
	text-transform: none;
	border-radius: 0 3px 3px 0;
	text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
	background-color: #6699CC;
	background-image: url(image/Magnifier19.png);
	background-repeat: no-repeat;
	font-family: 'lucida sans', 'trebuchet MS', 'Tahoma';
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	background-position: center center;
}   
  
.form-wrapper button:hover{
	background-image: url(../icons/Magnifier2.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #6666CC;
}	
  
.form-wrapper button:active,
.form-wrapper button:focus{
	outline: 0;
	background-color: #6666CC;
	background-image: url(../icons/Magnifier2.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.form-wrapper button:before { /* left arrow */
	content: '';
	position: absolute;
	top: 3px;
	left: -8px;
	border-top-width: 8px;
	border-right-width: 8px;
	border-bottom-width: 8px;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: transparent;
	border-right-color: #6699CC;
	border-bottom-color: transparent;
	border-left-color: #6699CC;
}

.form-wrapper button:hover:before{
    border-right-color: #6666CC;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #6666CC;
}      

.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}    


@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}
