/*CSS pre formulare */

.form {
  font-family: Tahoma, Verdana, Arial;
  width: 98%;  
}

.form fieldset {
  padding: 10px;
  text-align: left;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 10px;
  background: #FCFFEE;
}

.form fieldset#title {
 background: #fff;
}      

.form label {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  font-size: 103%;  
}

.form input,
.form select,
.form textarea {   
  display: inline-block;
  position: relative;
  margin: 2px;   
  margin-top: 10px;
  padding-left: 5px;
  transition: all .2s linear;
  box-sizing: border-box !important;
  border-radius: 5px;    
  border: 1px solid #aaa;
  background: #fff !important;
}     

.form input[type=checkbox] {
  margin: 0;
  padding: 1px; 
  border-radius: 0; 
  border: 0;
}

    
/* customer information */             
.form .cust-info label {
  width: 160px;
  text-align: right;     
}

.form .cust-info input,
.form .cust-info select {
  width: 300px; 
  height: 25px;     
}

.form .cust-info select[name=Mr_Ms] {
  width: 60px;
  margin-right: 4px;
}

.form .cust-info input[name=contact_f] {
  width: 230px;
}

/* product information */
.form .product-info label {
  width: 260px;
  text-align: right;  
  vertical-align: top;
  top: 6px;   
} 

.form .product-info input {
  width: 210px; 
  height: 25px;
}  

.form .product-info select {
  width: 210px; 
  height: 25px;
}  

.form .product-info div {
  display: inline-block;
  margin-top: 15px;
}

.form .product-info .distributor .distributorlist {
  top: -12px;
  width: 430px;
}

.form .product-info .distributor label {
  width: 100px;
  text-align: left;  
  margin-top: 1px;
}

.form .product-info .distributor input {
  width: 260px;
  margin: 2px;
}

.form .product-info .rating label {
  top: 0px;
  width: 50px;
  text-align: left;
  margin: 2px;  
}

.form .product-info .rating input[type=radio] {
  width: auto;
  height: auto;
  margin: 2px;
}

.form .product-info textarea {
  top: 2px;
  width: 350px;
  height: 86px;
  margin: 2px;
  resize: none;
  white-space: normal;
  overflow: auto;
}
/* koniec product information */


.form .message label[for=subject],
.form .message label[for=comments] {
  width: 45px;  
}

.form .message label[for=comments] {
  vertical-align: top;
  top: 6px;
}

.form .message input[name=subject] {
  width: 615px;
} 

.form .message textarea {
  width: 615px;
  min-height: 150px;
  resize: vertical;
  overflow: auto;
  margin-bottom: 10px;
  padding: 5px;
  padding-right: 26px;
}

.form .endform input[name=security_code] {
  width: 140px;
  height: 94px;
  margin-top: -1px;
  font-size: 45px;
  padding-top: 10px;
} 

.form .endform input[type=checkbox] {
  margin-right: 5px;
  margin-top: 5px;
}
                                   
.form .endform label {
  bottom: 1px;
  width: auto;
  margin-top: 5px;
}

.form .endform input[type=submit],
.form .endform input[type=reset] {
  margin-top: 10px;
  width: 170px;
}

.form .endform input[type=submit] {
  margin-right: 15px;
}

.form input:focus:not([type=checkbox]),
.form select:focus,
.form textarea:focus {
  box-shadow: 0 0 5px #7FBF7F;
  border: 1px solid #7FBF7F;
}

.form input[type=checkbox]:focus {
  border: 0;
}

.form input[type=submit]:hover,
.form input[type=reset]:hover {
	box-shadow: 0 0 5px #7FBF7F;
  border: 1px solid #7FBF7F;
}

.form input:not([type=checkbox]):required,
.form .message textarea:required,
.form .at {
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACpQTFRF+M7O6Wxt+djY63Z3/vX18qeo7ICA++Hi/Ovr75OU8Z2e7omK6GJj////SyXd4gAAAEtJREFUeNqczksKgEAMA9D0Nx/N3P+6uqplQBC7fIGkWNvhM2jfgGeFO7ZYGAmNZk0YCQOTDPjT0WVK81Jq4sqjgGvu4f/r73AJMAA5UgvJnpeyCQAAAABJRU5ErkJggg==) no-repeat 98% center !important;  
}

.form input:required:not([type=checkbox]):not([name=security_code]):valid,
.form .message textarea:required:valid {
	background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASdJREFUeNpiibkQzEAJYMIhngnEB4D4PxI+ABXHa4AiVOE0ILZHk7OHih+AqgMDFiQFckB8Hoj5CbjaHqpOD4gfIbtgPhGaYYAfqh7uhVggdiIx/EDqY2EGJBBS3SFXxNAqm4sunAAzwBif5na5AgYJbisGZkZ2dCljkAHM6H5frL+GYbb6QjC7VTabQZrPhuH518MMFY96MMICZMBfIH6NLBp7MQQo+J1hoc4aBhl+R4YnHw8xVD6aiM1xr2FeuIkuk3Ezg+Hnnw8Mzz4eZah6PAmX727C0sFcILZBl027kUIobOfCXLAYiC+QGI0g9YthBoDCIRQ9LPCA11D1f5FT4h0gtiLCJReg6u5gy0wgQUMgjgbiTUD8FCr+FMqPhsrfgWkACDAAdeFJlrFXYEcAAAAASUVORK5CYII=) no-repeat 98% center !important;
  border: 1px solid #7FBF7F;
}

.form input:required:not([type=checkbox]):not([name=security_code]):invalid.bad,
.form .message textarea:required:invalid.bad,
.form #badmail {
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUpJREFUeNpivBIUxEAJYMIhngnEB4D4PxLeBcQJhAxQhGqcBsT2aHKuQDwfiLcDsTQ2A3SB+CqyRmY+PgYmDg4wjQQ8gPgSEKsgG8AGxOuAmBNZJYugIAOPlRUDm7g4usuFgHg1yA6YAckwE5EBt64ug2x2NgOPtTW2cDIA4kCYAVF4g5qREZdMAhOS/zHA70+fGP7+B0bA16+4DNCFGcCPTfbv+/cMf37+ZPj98SMuA/hhBrzGJvsHaMCHrVsZfj16hMuA1zADLmNNZcAo/PvlC8N/3GFwGWbAAmyyXJqaDJLx8Qx85ua4DJgLM2AZEJ/FCMQXLxi+XL7M8OvhQ2yaDwLxVkakzARKxseAWAIl+kCxAKMRABQoJshhAAL3gRjk1uNwEZgmVM37oOrAAc+C5iyQyVZA7A3NeYrQNAIK5JvQsNqNrAEgwAAO6VaUCoOyHgAAAABJRU5ErkJggg==) no-repeat 98% center !important;
  border: 1px solid red;
  box-shadow: none;
}

.form input:required:not([name=security_code]):focus:invalid.bad,
.form .message textarea:required:focus:invalid.bad {
  box-shadow: 0 0 5px red;
}

.form .message textarea:required,
.form .message textarea:required:valid,
.form .message textarea:required:invalid.bad,
.form .endform input[name=security_code],
.form .endform input[name=security_code]:valid,
.form .endform input[name=security_code]:invalid.bad {
  background-position: 98% 5px !important;
}

::-webkit-input-placeholder {
   font-family: Tahoma, Verdana, Arial;
   font-size: 102%;
}

:-moz-placeholder { /* Firefox 18- */
   font-family: Tahoma, Verdana, Arial;
   font-size: 102%;  
}

::-moz-placeholder {  /* Firefox 19+ */
   font-family: Tahoma, Verdana, Arial;
   font-size: 102%;  
}

:-ms-input-placeholder {  
   font-family: Tahoma, Verdana, Arial;
   font-size: 102%;
}