/*************************************************************************************** * clForm * ****************************************************************************************/ .clForm * { box-sizing: border-box; -moz-box-sizing: border-box; } .clForm .element { margin-bottom: 20px; display: inline-block; width: 100%; position: relative; vertical-align: top; padding: 0 15px; } .clForm .element > * { width: 100%; } .clForm .element > label { display: block; text-align: left; } .clForm .element > button { width: auto; } .clForm .element > .user-interaction { vertical-align: top; text-decoration: none; background-color: white; text-align: left; font-weight: normal; font-size: 15px; } .clForm .element > select, .clForm .element > textarea, .clForm .element > input, .clForm .element > button, .clForm .element > div.upload, .clForm .element > img.captcha, .clForm .element > label.radio, .clForm .element > label.checkbox { padding: 0 10px; height: 30px; } .clForm .element > label.radio, .clForm .element > label.checkbox { padding: 0 15px 0 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .clForm .element > select, .clForm .element > textarea, .clForm .element > input, .clForm .element > button, .clForm .element > .upload, .clForm .element > .captcha img, .clForm .element > .captcha input, .clForm .element > .radio, .clForm .element > .checkbox, .clForm .element > .radio > div, .clForm .element > .checkbox > div { border: 1px solid #CCCCCC; } .clForm .element > input:focus, .clForm .element > button:focus, .clForm .element > select:focus, .clForm .element > textarea:focus, .clForm .element > .captcha input:focus, .clForm .element > .upload:hover, .clForm .element > input[type="submit"]:hover { border: 1px solid #666666; } .clForm input[type="submit"], .clForm input[type="button"], .clForm button { cursor: pointer; } .clForm .element > label.radio, .clForm .element > label.checkbox { display: inline-block; vertical-align: bottom; cursor: pointer; width: auto; border-color: transparent; } .clForm .element > label.radio > span, .clForm .element > label.checkbox > span, .clForm .element > .captcha img, .clForm .element > .captcha input { vertical-align: middle; } .clForm .element > label.radio > div, .clForm .element > label.checkbox > div { width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; background-color: transparent; background-position: center; vertical-align: middle; margin-right: 3px; cursor: pointer; } .clForm .element > label.radio > div { border-radius: 50%; } .clForm .element > label.radio > input, .clForm .element > label.checkbox > input { position: absolute; visibility: hidden; display: none; } .clForm .element > label.radio > input:checked + div { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFlJREFUeNpkzcEKgEAIBNBRWQ8LUfT9BRFBtw79VkF16bg25014IKMics5NSmmgg06a3L2DmY0AorKAG089EJFX2Qj+JVpK2eo0InbwUcvTmS66aVXV/hNgAHK4GaILHY6cAAAAAElFTkSuQmCC); } .clForm .element > label.checkbox > input:checked + div { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAN5JREFUeNpi/P//PwMxgAVd4O/fvwynTp1i+P37N0xIGIjfMoBMRMY/f/5kEBQUhCkKAeKHQOzHEhUVxfD169dsIGc9ED8DmQTkgxQFAvFSIGYD4okMLCwsE4EMkENPQq2BKfoJFX8FxBYMxsbGfVABED4AxEnIimpqakx37drFwODo6AgyoQ1J8X8kk0y3bNkCdjvTv3//QAqrgLgdyfOvgdgbiE9//vwZEjw/fvyASYIUswJxbFJSki8XF9dpkKCGhgZYkvHo0aMMb9++hRvFxsYm7e7u/hQ9fAECDAAvKFz95p8KMwAAAABJRU5ErkJggg==); } .clForm .element > textarea { padding: 10px; height: 170px; line-height: 20px; resize: none; } .clForm .element > .captcha { height: auto; } .clForm .element > .captcha img, .clForm .element > .captcha input { height: 75px; margin-bottom: 0; margin-right: 5px; margin-top: 0; padding: 0; width: 150px; } .clForm .element > .captcha input { font-family: Courier New, monospace; font-size: 50px; padding: 10px; text-align: center; } .clForm .element > select { padding: 5px 10px; height: 30px; } .clForm .element > select option { padding: 2px 5px; } .clForm .element > div.upload { position: relative; overflow: hidden; text-align: center; line-height: 22px; } .clForm .element > div.upload > input { bottom: -5px; right: -5px; cursor: pointer; font-size: 2em; height: 100px; width: 110%; position: absolute; opacity: 0.0; margin: 0; padding: 0; -moz-opacity: 0.0; -khtml-opacity: 0.0; -o-opacity: 0.0; -webkit-opacity: 0.0; zoom: 1; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .clForm .element > div.upload > span { vertical-align: sub; } .clForm .element > div.upload.selected > span:after { content: " ↵"; } .clForm .formGrid1, .clForm .formGrid2, .clForm .formGrid3, .clForm .formGrid4, .clForm .formGrid5, .clForm .formGrid6, .clForm .formGrid7, .clForm .formGrid8, .clForm .formGrid9 { vertical-align: top; float: left; } .clForm .element.formGrid1, .clForm .formGrid1 { width: 10%; } .clForm .element.formGrid2, .clForm .formGrid2 { width: 20%; } .clForm .element.formGrid3, .clForm .formGrid3 { width: 30%; } .clForm .element.formGrid4, .clForm .formGrid4 { width: 40%; } .clForm .element.formGrid5, .clForm .formGrid5 { width: 50%; } .clForm .element.formGrid6, .clForm .formGrid6 { width: 60%; } .clForm .element.formGrid7, .clForm .formGrid7 { width: 70%; } .clForm .element.formGrid8, .clForm .formGrid8 { width: 80%; } .clForm .element.formGrid9, .clForm .formGrid9 { width: 90%; } .clForm .formP1 { padding-left: 10%; } .clForm .formP2 { padding-left: 20%; } .clForm .formP3 { padding-left: 30%; } .clForm .formP4 { padding-left: 40%; } .clForm .formP5 { padding-left: 50%; } .clForm .formP6 { padding-left: 60%; } .clForm .formP7 { padding-left: 70%; } .clForm .formP8 { padding-left: 80%; } .clForm .formP9 { padding-left: 90%; } .clForm .formLeft > .user-interaction { text-align: left; } .clForm .formRight > .user-interaction { text-align: right; } .clForm .formCenter > .user-interaction { text-align: center; } .clForm div.element.formError > *, .clForm div.element.formError > div.upload { border-color: red; } .clForm .element > .tip { background: none repeat scroll 0 0 white; border: 1px solid #CCCCCC; display: none; line-height: 1em; padding: 10px; position: absolute; margin-bottom: 3px; text-align: left; bottom: 100%; width: 100%; width: calc(100% - 30px); } .clForm .element > label + .tip { bottom: calc(100% - 20px); } .clForm .element .tip strong { display: block; margin-bottom: 5px; } .clForm .element .noLabel { bottom: 100%; } :focus::-webkit-input-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; } @media (max-width:600px) { .clForm .formGrid9, .clForm .formGrid8, .clForm .formGrid7, .clForm .formGrid6, .clForm .formGrid5, .clForm .formGrid4, .clForm .formGrid3, .clForm .formGrid2, .clForm .formGrid1 { width: 100%; } .clForm .formP1, .clForm .formP2, .clForm .formP3, .clForm .formP4, .clForm .formP5, .clForm .formP6, .clForm .formP7, .clForm .formP8, .clForm .formP9 { padding-left: 0%; } }