/*#################
#  FORM (Default) #
#################*/
.form {
  position: relative;
}

/* Reset bug of 50% + 50% : removing whitespace between html elements */
.form form {
  font-size: 0;
}

.form form .field {
  margin-top: 15px;
  vertical-align: middle;
}

.form form .div_textarea label {
  vertical-align: top;
}

.form form .field * {
  font-size: 12px;
}

/* Clean reset bug of 50% + 50% */
.form form .field label {
  display: inline-block;
  padding: 0 8px 0 0;
  font-family: Arial;
  font-size: 12px;
  color: #565656;
  vertical-align: middle;
}

.form form .field-textarea label {
  vertical-align: top;
}

.form form .field input[type=text],
.form form .field input[type=password],
.form form .field input[type=email],
.form form .field span.input,
.form form .field textarea,
.form form .field select {
  display: inline-block;
  width: 60%;
  padding: 4px;
  border: 1px solid #c6c7c0;
  font-family: Verdana,Arial,sans-serif;
  font-size: 12px;
  color: #313131;
  text-align: left;
  vertical-align: middle;
  background-color: #ffffff;
  opacity: 1;
  /* cancel placeholder */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

.form form .field input[type=text],
.form form .field input[type=password],
.form form .field input[type=email] {
  /*background: #ffffff url("/images/input-bg.gif") left bottom repeat-x;*/
}

.form form .field input.hasDatepicker,
.form form .field input.hasTimepicker {
  background-image: url(/public/img/icons/ico-calendar.png);
  background-position: 98% center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.form form .field span.input {
  color: #000000;
  background: rgba(198, 199, 192, 0.2);
}

.form form .field.readonly input,
.form form .field.readonly textarea,
.form form .field.readonly select {
  color: #000000;
  background: rgba(198, 199, 192, 0.2);
}

/* placeholder */
.form form .field input::-webkit-input-placeholder {
  opacity: 0.9;
}

.form form .field input:-moz-placeholder {
  opacity: 0.9;
}

.form form .field input:-ms-placeholder {
  opacity: 0.9;
}

/* A tester pour IE10, mais logiquement: */
.form form .field select {
  width: 62%;
  /* = input + 6px */
}

.form form .field-options ul,
.form form .field-checkbox ul {
  display: inline-block;
  width: 60%;
  padding: 4px;
  text-align: left;
  vertical-align: middle;
}
.form form .field-options ul li,
.form form .field-checkbox ul li {
  display: inline-block;
  vertical-align: middle;
}
.form form .field-options ul li input,
.form form .field-options ul li label,
.form form .field-checkbox ul li input,
.form form .field-checkbox ul li label {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.6;
  cursor: pointer;
}
.form form .field-options ul li input,
.form form .field-checkbox ul li input {
  margin: 0;
}

.form form input[type=submit] {
  position: relative;
  display: inline-block;
  padding: 6px 25px;
  font-family: "Arial";
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  border: 0 none;
  background-color: #0b7ac9;
  background-image: -moz-linear-gradient(top, #2287cd, #0b7ac9);
  background-image: -o-linear-gradient(top, #2287cd, #0b7ac9);
  background-image: -webkit-linear-gradient(top, #2287cd, #0b7ac9);
  background-image: linear-gradient(to bottom, #2287cd, #0b7ac9);
  border: 1px solid #0b7ac9;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.form form .group-title {
  margin-top: 20px;
  padding: 0 0 0 38%;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: #0d7bc9;
  text-align: left;
}

/* Container submit */
.form form p.field {
  /*width: auto;*/
  margin-top: 20px;
  text-align: right;
}

/* Content */
div.content div.form form {
  margin: 0 auto;
  padding: 0;
  text-align: right;
}

body#page-contact div.content div.form form {
  width: 95%;
}

/*div.content div.form form .field { width: 100%; } */
/****************
*	Edit COLUMNS
****************/
/*.col {
	display: inline-block;
}

.col-1,
.col-2,
.col-3 {
	display: inline-block;
}

	.col-1 {
		width: 100%;
	}

		with label
	    .form form div.col-1 input[type=text],
	    .form form div.col-1 input[type=password],
	    .form form div.col-1 input[type=email],
	    .form form div.col-1 textarea {
	    	width: 58%;
	    }

	    	.form form div.col-1 select { width: 59%; }

		without label
		.col-1-whithout-label {
			text-align: left;
		}

		    .form form div.col-1-whithout-label input[type=text],
		    .form form div.col-1-whithout-label input[type=password],
		    .form form div.col-1-whithout-label input[type=email],
		    .form form div.col-1-whithout-label textarea {
		    	width: 95%;
		    }

		    .form form div.col-1-whithout-label select { width: 96%; }

		    .form form div.col-1-whithout-label label { display: none; }

		Submit
		p.col-1-whithout-label {
			display: block;
			width: 96%;
		}

	.col-2 {
		width: 45%;
		margin-right: 5%;
	}

		with label
	    .form form div.col-2 input[type=text],
	    .form form div.col-2 input[type=password],
	    .form form div.col-2 input[type=email],
	    .form form div.col-2 textarea {
	    	width: 58%;
	    }

	    .form form div.col-2 select { width: 59%; }

		without label
		.col-2-whithout-label {
			text-align: left;
		}

			without label
		    .form form div.col-2-whithout-label input[type=text],
		    .form form div.col-2-whithout-label input[type=password],
		    .form form div.col-2-whithout-label input[type=email],
		    .form form div.col-2-whithout-label textarea {
		    	width: 90%;
		    }

		    .form form div.col-2-whithout-label select { width: 91%; }

		    .form form div.col-2-whithout-label label { display: none; }

	.col-3 {
		width: 30%;
		margin-right: 3.33%;
	}

		with label
	    .form form div.col-3 input[type=text],
	    .form form div.col-3 input[type=password],
	    .form form div.col-3 input[type=email],
	    .form form div.col-3 textarea {
	    	width: 58%;
	    }

	    	.form form div.col-3 select { width: 59%; }

		without label
		.col-3-whithout-label {
			text-align: left;
		}

			without label
		    .form form div.col-3-whithout-label input[type=text],
		    .form form div.col-3-whithout-label input[type=password],
		    .form form div.col-3-whithout-label input[type=email],
		    .form form div.col-3-whithout-label textarea {
		    	width: 85%;
		    }

		    .form form div.col-3-whithout-label select { width: 86%; }

		    .form form div.col-3-whithout-label label { display: none; }
*/
/****************
*	MESSAGE
****************/
/* Display ERRORS */
/*div.form form input.error,
div.form form textarea.error,
div.form form select.error {
    border: 1px solid #ff6666;
    background-color: #fde4e4;
    background-image: none;
}*/
div.content div.form .error-message,
div.dialogBox div.form .error-message {
  width: 96%;
  margin: 20px 0;
  padding: 5px 2%;
  font-size: 12px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  background-color: #fde4e4;
  border: 1px solid #ff6666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

div.content div.form .error-message span,
div.dialogBox div.form .error-message span {
  display: block;
  padding: 2px 0;
}

/* Display Validate */
div.content div.form .validate-message,
div.dialogBox div.form .validate-message {
  width: 96%;
  margin: 20px 0;
  padding: 5px 2%;
  font-size: 12px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  background-color: #C2F9C4;
  border: 1px solid #03AD44;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

div.alert-box {
  display: block;
  width: 95%;
  padding: 15px 2%;
  margin: 20px auto;
  font-weight: bold;
  font-size: 13px;
  background: #eee;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 0px 1px rgba(255, 255, 255, 0.9);
  position: relative;
}

.alert-box.success {
  background-color: #7fae00;
  color: #fff;
  text-shadow: 0px -1px rgba(0, 0, 0, 0.3);
}

.alert-box.warning {
  background-color: #c08c00;
  color: #fff;
  text-shadow: 0px -1px rgba(0, 0, 0, 0.3);
}

.alert-box.error {
  background-color: #c00000;
  color: #fff;
  text-shadow: 0px -1px rgba(0, 0, 0, 0.3);
}

.alert-box a.close {
  color: #000;
  position: absolute;
  right: 4px;
  top: 0px;
  font-size: 18px;
  opacity: 0.2;
  padding: 4px;
}

.alert-box a.close:hover {
  opacity: 0.4;
}

/* Skin-1 */
.form form.form-skin-1 {
  font-family: "Arial";
}

.form form.form-skin-1 .col {
  display: block;
  text-align: left;
}

.form form.form-skin-1 .div_text input[type=text],
.form form.form-skin-1 .div_email input[type=text],
.form form.form-skin-1 .div_password input[type=password] {
  width: 200px;
}

.form form.form-skin-1 .div_select select {
  width: 150px;
}

.form form.form-skin-1 .field label,
.form form.form-skin-1 .field .group-title {
  width: 35%;
  padding-right: 10px;
  text-align: right;
}

.form form.form-skin-1 .field .group-title {
  margin-top: 25px;
  padding-bottom: 15px;
  font-size: 13px;
  color: #313131;
}

.form form.form-skin-1 .div_submit {
  width: 65%;
  padding-left: 35%;
  margin-top: 15px;
  text-align: left;
}

.form form.form-skin-1 .div_submit input {
  margin-left: 10px;
}

/*.col .error,
.error .ui-selectmenu {
	 -webkit-box-shadow: 0px 0px 5px 1px rgba(255, 0, 0, 0.7);
	box-shadow: 0px 0px 5px 1px rgba(255, 0, 0, 0.7);
}*/
.field.error input[type=text],
.field.error input[type=email],
.field.error input[type=password],
.field.error span.input,
.field.error textarea,
.field.error select,
.field.error .ui-selectmenu {
  -moz-box-shadow: rgba(255, 0, 0, 0.7) 0px 0px 5px 1px;
  -webkit-box-shadow: rgba(255, 0, 0, 0.7) 0px 0px 5px 1px;
  box-shadow: rgba(255, 0, 0, 0.7) 0px 0px 5px 1px;
}

.field-options.error ul {
  border: 1px solid #ff6666 !important;
  background-color: #fde4e4 !important;
  -moz-box-shadow: rgba(255, 0, 0, 0.7) 0px 0px 5px 1px;
  -webkit-box-shadow: rgba(255, 0, 0, 0.7) 0px 0px 5px 1px;
  box-shadow: rgba(255, 0, 0, 0.7) 0px 0px 5px 1px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

	/*div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0px 1px rgba(255,255,255,0.9); position: relative; }
	.alert-box.success { background-color: #7fae00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
	.alert-box.warning { background-color: #c08c00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
	.alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }

	.alert-box a.close { color: #000; position: absolute; right: 4px; top: 0px; font-size: 18px; opacity: 0.2; padding: 4px; }
	.alert-box a.close:hover { opacity: 0.4; }



	input, input.red { border-color: red; background-color: rgba(255,0,0,0.15); }
	.error label, label.red { color: red; }
	.error small, small.error { margin-top: -3px; display: block; margin-bottom: 9px; margin-left: 175px; font-size: 10px; color: red; width: 260px;position:absolute; }


		.error { padding: 6px 4px; border: solid 0px red; border-width: 0px 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; }
	*/