Fichier form.css

button,
.button {
 padding: 0.3em 1em;
 height: auto;
 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
 background-color: #F9F9F9;
 border: 1px solid #CCCCCC;
 border-color: #E1E1E1 #E1E1E1 #BFBFBF #CFCFCF;
 border-radius: 4px;
 box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
 color: #333333;
 text-align: center;
 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
 white-space: nowrap; 
}
 
button:hover,
.button-hover {
 background-color: #FDFDFD;
 box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
 transition: all 0.1s linear;
}
 
button:active,
.button-active {
 background-color: #F1F1F1;
 border: 1px solid #DDDDDD;
 box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
}

button.small,
.button-small {
 padding: 0.2em 0.5em;
 font-size: 1.1rem;
}

button.submit {
 background-color: #3B6B9F;
 border-color: #366393;
 color: #FEFEFE;
}

.basic-button {
 display: inline-block;
 margin: 1px;
 padding: 1px 6px;
 background-color: #2F5B8A;
 border-radius: 2px;
 font-weight: bold;
 text-align: center; 
 color: #FFFFFF;
 
}
 
.basic-button:hover {
 background-color: #3D6997;
 color: #FFFFFF;
 text-decoration: none;
}

.basic-button.alt { background-color: #AAAAAA; }
.basic-button.alt:hover { background-color: #BBBBBB; }

.field-button {
 display: inline-block;
 font-size: 0;
 white-space: nowrap;
}
 
.field-button input {
 border-radius: 4px 0 0 4px;
}
 
.field-button button {
 margin-left: -1px;
 padding: 4px 8px;
 border-radius: 0 4px 4px 0;
 font-size: 11px;
}

.fieldset-mini {
 margin: 20px auto auto auto;
 width: 540px;
}
 
fieldset {
 margin: 1.5em 0;
 background: none;
 border: none; 
}
 
fieldset img {
 max-width: 250px;
}
 
@media (min-width: 769px) {
 fieldset img {
 max-width: 450px;
 }
}
 
fieldset.fieldset-submit {
 width: 100%;
 background: none;
 border: none;
 text-align: center;
}
 
fieldset.fieldset-submit legend {
 display: none;
}
 
.horizontal-fieldset-desc,
.horizontal-fieldset-element {
 display: inline-table;
 vertical-align: middle;
}
 
.horizontal-fieldset-element .form-field-select {
 max-width: none;
}
 
optgroup {
 border: none;
 border-bottom: 1px solid #5B5A5A;
 font-weight: bold;
}
 
option {
 padding: 0 3px;
}
 
legend {
 display: block;
 margin: 0 0 0.6em 0;
 width: 100%;
 border-bottom: 1px solid #DDDDDD;
 text-transform: none;
 color: #474747;
 font-size: 1.5em;
} 

.xmlhttprequest-preview {
 padding: 0 2px;
 background-color: #FFFFFF;
 border: 1px solid #CCCCCC;
 color: #2E3B5F;
}
 
.xmlhttprequest-preview img {
 max-width: 600px;
}

input[type=text],
input[type=email],
input[type=url],
input[type=number],
input[type=color],
input[type=tel],
input[type=search],
input[type=password],
input[type=file],
textarea,
select {
 padding: 4px 18px 4px 6px;
 background-color: #FFFFFF;
 border: 1px solid #CCCCCC;
 border-radius: 4px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
 color: #555555;
}
 
input[type=text]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=color]:hover,
input[type=tel]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=file]:hover,
textarea:hover,
select:hover {
 background-color: #FFFFFF;
 border: 1px solid #BBBBBB;
 color: #333333;
}
 
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=color]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=file]:focus,
textarea:focus,
select:focus {
 border-color: #BBBBBB;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);
 outline: 0;
 color: #222222;
}
 
input[type=color] {
 padding: 0 2px 0 2px;
 width: 25px;
}
 
form input:focus:invalid,
form textarea:focus:invalid,
form .constraint-status-right input,
form .constraint-status-right textarea {
 border-color: rgba(196, 60, 43, 0.3);
 box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);
}
 
form input:focus:valid,
form textarea:focus:valid,
form .constraint-status-right input,
form .constraint-status-right textarea {
 border-color: rgba(71, 137, 72, 0.3);
 box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}
 
input.field-smaller { width: 29px; }
input.field-small { width: 77px; }
input.field-large { width: 200px; }
input.field-xlarge { width: 250px; }
 
input.input-date { width: 100px; }
input.input-hours { width: 50px; }
input.input-minutes { width: 50px; }
 
input[name$="_hours"] { width: 50px; }
input[name$="_minutes"] { width: 50px; }

.cip-icon-key-small {
 display: none !important;
}

.form-element,
.form-element-textarea {
 position: relative;
 margin: 0 1em 1em 1em;
}
 
@media (min-width: 769px) {
 div#main.main-with-left.main-with-right section .form-element,
 div#main.main-with-left.main-with-right section .form-element-textarea {
 margin: 5px 0;
 }
}
 
.fieldset-description {
 margin: 0 1em 1.5em 1em;
}
 
@media (max-width: 768px) {
 .form-element,
 .form-element-textarea {
 margin: 0 0.6em 1em 0.6em;
 }
 
 .fieldset-description {
 margin: 0 0.6em 1.3em 0.6em;
 }
}
 
@media (max-width: 480px) {
 .form-element,
 .form-element-textarea {
 margin: 0 0.6em 0.5em 0.6em;
 }
 
 .fieldset-description {
 margin: 0 0.6em 0.9em 0.6em;
 }
}
 
@media (max-width: 768px) {
 .form-element-textarea + div.center button,
 .fieldset-content > div.center button {
 margin-top: 5px;
 }
}
 
.form-element [id$="user_avatar"] img {
 max-width: 200px;
}
 
.form-field {
 position: relative;
 display: inline-block;
 max-width: 600px;
}
 
@media (max-width:360px) {
 .form-field {
 max-width: 270px;
 }
}
 
.form-field-free-large {
 width: 100%;
 max-width: none;
}
 
.form-field-action-link {
 text-align: center;
}
 
/* --- Label pour les checkbox et radio --- */
.form-field label {
 display: block;
 margin: 0 10px 0 0;
}

.form-element > label {
 display: inline-block;
 padding-right: 10px;
 width: 40%;
 text-align: left;
 vertical-align: top;
}
 
.field-description {
 display: block;
 font-size: 0.8em;
 line-height: 12px;
}
 
@media (max-width: 768px) {
 .form-element > label {
 width: 100%;
 }
 
 span.field-description {
 display: inline-block;
 font-size: 0.7em;
 font-style: italic;
 }
}
 
@media (min-width: 769px) {
 .form-field-select {
 max-width: 59%;
 }
}
 
.form-field-select select {
 max-width: 100%;
}
 
input[disabled=disabled],
input[disabled=disabled]:hover,
input[disabled=disabled]:focus,
textarea[disabled=disabled],
textarea[disabled=disabled]:hover,
textarea[disabled=disabled]:focus,
select[disabled=disabled],
select[disabled=disabled]:hover,
select[disabled=disabled]:focus {
 background-color: #F1F1F1;
 border: 1px solid #CCCCCC;
 color: #AAAAAA;
 cursor: not-allowed;
}
 
input[readonly=readonly],
input[readonly=readonly]:hover,
input[readonly=readonly]:focus,
textarea[readonly=readonly],
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:focus,
select[readonly=readonly],
select[readonly=readonly]:hover,
select[readonly=readonly]:focus {
 background-color: #FAFAFA;
 border: 1px solid #CCCCCC;
 color: #888888;
}
 
.form-field-checkbox {
 display: inline-block;
}

.form-field-textarea {
 position: relative;
 display: inline;
 margin: 5px auto;
 width: 99%;
}
 
textarea {
 width: 100%;
 overflow: auto;
 resize: vertical;
}
 
.form-element-textarea {
 width: 98%;
 margin: 0 1% 1em;
}
 
.form-element-textarea textarea {
 width: 100%;
}
 
.form-element-textarea .form-field-textarea {
 display: block;
}
 
.form-element-textarea .form-field-textarea div {
 float: left;
}
 
.form-element-preview {
 margin: 5px auto 0 auto;
 text-align: center;
}

.form-element-auth .form-field {
 display: inline-block;
 margin: 2px 0 0 0;
}
 
.form-element-auth .form-field div[class^="advanced-auth"] {
 float:left;
}
 
.form-element-auth .field-description {
 display: inline;
 font-style: italic;
}
 
.advanced-auth-group select {
 padding-right: 5px;
 max-width: 153px;
 overflow-x: auto;
}
 
.advanced-auth-select select {
 padding-right: 5px;
 max-width: 132px;
 word-wrap: normal;
 overflow-x: auto;
}
 
.advanced-auth-select {
 margin-left:5px;
}
 
.advanced-auth-input {
 margin-left: 5px;
 width: 144px;
}
 
.advanced-auth-input input {
 padding: 4px 24px 4px 6px;
}
 
.advanced-auth-input button {
 margin-left: -29px;
 padding: 5px 5px 6px 5px;
 border-width: 0 0 0 1px;
 border-radius: 0 4px 4px 0;
}
 
.advanced-auth-input-result {
 margin: 2px 0 0 0;
 width: 138px;
 height: 100px;
}
 
.bbcode ~ .form-field-textarea textarea {
 border-radius: 0 0 4px 4px;
 border-width: 0 1px 1px 1px;
}
 
@media (min-width: 769px) {
 .form-element-textarea-small {
 width: 49%;
 }
}
 
@media (max-width: 480px) {
 .form-element-auth .form-field .advanced-auth-input {
 float: none;
 margin: 5px 0 0 0;
 }
}

.constraint-status-error input,
.constraint-status-error textarea {
 border-color: rgba(196, 60, 43, 0.3);
 box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);
 color: #C43C35;
}
 
.constraint-status-error input:hover,
.constraint-status-error input:focus,
.constraint-status-error textarea:hover,
.constraint-status-error textarea:focus {
 border-color: rgba(196, 60, 43, 0.5);
 box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);
 color: #C43C35;
}
 
.text-status-constraint {
 position:absolute;
 display: block;
 z-index: 1;
 padding: 6px 5px;
 left: 5px;
 min-width: 20em;
 background-color: #FEFEFE;
 border: 1px solid #EAEAEA;
 box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3);
 border-radius: 3px;
 font-size: 0.8em;
 font-weight: bold;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
 
input + .text-status-constraint {
 top: 25px;
}
 
.text-status-constraint:after,
.text-status-constraint:before {
 content: " ";
 position: absolute;
}
 
.text-status-constraint:before {
 left: 8px;
 top: -9px;
 border-bottom: 9px solid rgba(230, 230, 230, 1);
 border-left: 9px solid transparent;
 border-right: 9px solid transparent;
}
 
.text-status-constraint:after {
 left: 9px;
 top: -8px;
 border-bottom: 8px solid rgba(250, 250, 250, 1);
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
}
 
div.field-required:after,
div.picture-status-constraint:after {
 display: inline-block;
 position: absolute;
 right: 4px;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
 
div.field-required:after {
 top: 10px;
 opacity: 0.6;
 color: #C43C35;
 font-size: 0.8rem;
 content: "\f069";
}
 
.form-field-date.field-required:after,
.form-field-date.picture-status-constraint:after {
 right: 24px;
}
 
.form-field-select.field-required:after,
.form-field-number.field-required:after,
.form-field-decimal.field-required:after {
 right: -10px;
}
 
.form-field-datetime.field-required:after {
 right: -15px;
}
 
.form-field-checkbox.field-required:after {
 right: -20px;
 top: 0;
}
 
.form-field-upload-file.field-required:after {
 right: 43px;
 top: 12px;
}
 
.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
 right: 40px;
 top: 8px;
}
 
.constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-decimal:after {
 right: -20px;
}
 
.constraint-statuts-right .form-field-checkbox:after {
 top: 4px;
}
 
.constraint-statuts-right .form-field-datetime:after {
 right: -22px;
}
 
.form-field-number input,
.form-field-decimal input,
.form-field-datetime input {
 padding-right: 2px;
}
 
.form-element-date .constraint-status-error div.field-required:after,
.form-element-date .constraint-status-right div.field-required:after {
 right: 10px;
}
 
.form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after {
 top: 45%;
}
 
.constraint-status-right div.field-required:after {
 content: " ";
}
 
.constraint-status-right div.form-field-checkbox.picture-status-constraint:after {
 top: 0;
}
 
.constraint-status-right div.picture-status-constraint:after {
 opacity: 1;
 font-size: 1.5rem;
 top: 6px;
}
 
.constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-right .form-field-textarea .picture-status-constraint:after {
 top: 40%;
}
 
.constraint-status-right div.picture-status-constraint:after {
 content: "\f00c";
 color: #57A957;
}
 
.constraint-status-error i.picture-status-constraint {
 content: "\f056";
 color: #C43C35;
}
 
.form-field-multi-select.field-required:after {
 display: none;
}
 
.constraint-status-right .form-field-multi-select select {
 border-color: rgba(71, 137, 72, 0.3);
 box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}
 
.form-field-radio-button.field-required:after,
.form-field-multiple-checkbox.field-required:after {
 top: 4px;
 right: -10px;
}
 
.form-field-radio {
 display: inline-block;
}

.autocomplete-suggestions {
 background-color: #FFFFFF;
 border: 1px solid #999999;
 overflow: auto;
}
 
.autocomplete-suggestions strong {
 font-weight: normal;
 color: #3399FF;
}
 
.autocomplete-suggestion {
 padding: 2px 5px;
 white-space: nowrap;
 overflow: hidden;
 cursor: pointer;
}
 
.autocomplete-selected {
 background-color: #F0F0F0;
}
 
.autocomplete-no-suggestion {
 text-align: center;
}