div.form {
    position: relative;
    z-index: 1;
    background-color: #F5F8ED;
    border: 1px solid #CFE0A1;
    padding: 10px;
    margin: 0;
}

form.form-designer {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
}

#with-js form.form-designer {
    visibility: hidden;
}

#with-js form.zf-inited,
#with-js .with-js-error form.form-designer {
    visibility: visible;
}

form.form-designer * {
    font-family: Arial, Times New Roman, Times, serif;
    font-size: 1em;
}

.form-designer fieldset {
    border: 0;
    border-top: 1px solid #BBB;
    position: relative;
    margin-top: 2em;
    padding: 0 0 1em;
}

.form-designer legend span {
    position: absolute;
    left: 0;
    top: -0.67em;
    margin: 0;
    padding: 0 0.3em 0 0;
    background: #FFF;
    color: #000;
    display: block;
    font-weight: bold;
    white-space: nowrap;
}

.form-designer dl {
    position: relative;
    width: 100%;
    margin: 1.37em 0 0;
    padding: 0;
}

.form-designer dl#miniform {
    margin: 0;
}

.form-designer dt.miniform {
    float: none;
    width: 15em
}

.form-designer dd.miniform {
    margin: 3px 0 0 0;
}



.form-designer dl:after,
.form-designer fieldset.range:after,
.form-designer .zf-buttons:after,
.form-designer fieldset div.zf-repeatbuttons:after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}

.form-designer .zf-focused {
    z-index: 999;
}

.form-designer dt {
    float: left;
    width: 100%;
    margin: 0 0 0.5em 0;
    padding: 0;
}

.form-designer dd.element {
    float: left;
    margin: 0;
    padding: 0;
    display: inline;
    position: relative;
    top: -3px;
    width: 100%;
}

.zf-nolabel dd {
    /*	margin-left: 8.5em;*/
}

.form-designer .zf-error {
    color: red;
    width: 13.4em;
    top: 0;
    visibility: hidden;
}

.form-designer .zf-hint {
    display: none;
    position: absolute;
    left: 9.5em;
    top: 1.9em;
    padding: 0.3em;
    font-size: 0.89em;
    background: #FFFFCA;
    border: 1px solid #CACACA;
    -webkit-box-shadow: rgba(0,0,0,0.2) 0.3em 0.3em 0.3em;
    -moz-box-shadow: rgba(0,0,0,0.2) 0.3em 0.3em 0.3em;
}

.zf-focused .zf-hint {
    display: block;
}

.zf-required-ok .zf-hint-required,
.zf-invalid-ok .zf-hint-invalid
{
    display: none;
}

.zf-hint .zf-arrow {
    position: absolute;
    left: 1em;
    top: -7px;
    width: 13px;
    height: 7px;
    background: url('images/zf-sprite.png') -66px 0 no-repeat;
}

.zf-placeholder {
    color: #AAA;
}

dl.zf-required label ins,
fieldset.zf-required legend span ins {
    color: #FF0000;
    text-decoration: none;
}

dl.zf-required dt label:after,
fieldset.zf-required legend span:after {
    content: '*';
    color: #FF0000;
}

dl.zf-required-ok dt label ins,
.zf-required-ok legend span ins,
dl.zf-required-ok dt label:after,
.zf-required-ok legend span:after {
    content: '* ';
    visibility: hidden;
}

.zf-invalid label,
.zf-invalid input,
.zf-invalid .desc,
.zf-invalid select {
    display: inline;
}


.zf-invalid-ok input, .zf-invalid-ok textarea {
    color: darkgreen;
}

.zf-invalid-key .zf-number {
    background: #FF0000;
}

.zf-submitted .zf-required .zf-error,
.zf-submitted .zf-invalid .zf-error {
    visibility: visible;
}

.zf-disabled dt,
.zf-disabled dd,
.zf-disabled label,
.zf-disabled label ins,
.zf-disabled legend span ins,
.zf-disabled input,
.zf-disabled select,
.zf-disabled label:after,
.zf-disabled legend:after,
input.zf-disabled {
    color: #CCC !important;
}

.zf-buttons input.zf-disabled {
    color: #999 !important;
}

.zf-disabled input,
.zf-disabled {
    cursor: default !important;
}

.zf-invisible {
    display: none;
}

.zf-hidden {
    visibility: hidden;
}

.form-designer .zf-scrollable {
    top: -3px;
    padding: 0 0.3em 0 0.5em;
    height: 10em;
    overflow: auto;
    border: 1px solid #7F9DB9;
}


/* date */

.zf-date-box input,
.zf-date-box select {
    float: left;
    margin-right: 0.2em;
}

.zf-input-day,
.zf-input-hour,
.zf-input-minute,
.zf-input-second {
    width: 1.6em;
}

.zf-input-year {
    width: 2.6em;
}

.zf-date-box .zf-input-hour {
    margin-left: 0.6em;
}

.zf-date-box .zf-picker {
    display: none;
    position: relative;
    z-index: 2;
    left: 0.4em;
    float: left;
}

#with-js .zf-date-box .zf-picker {
    display: block;
}

.zf-date-box .zf-picker .zf-opener {
    width: 40px;
    background-image: url('images/zf-sprite.png');
    background-position: -27px 0.3em;
    background-repeat: no-repeat;
}

.zf-picker-active {
    z-index: 1000;
}

.zf-calendar {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    background: #FFF;
    border: 1px solid #CCC;
    border-collapse: collapse;
    border-spacing: 0;
}

.zf-calendar thead {
    background-color: #EFEFEF;
}

.zf-calendar th,
.zf-calendar td {
    padding: 0.3em 0.4em;
    font-size: 1em;
    text-align: center;
}

.zf-calendar th {
    font-weight: normal;
}

.zf-calendar td {
    cursor: pointer;
}

.zf-calendar td.zf-add {
    color: #DADADA;
}

.zf-calendar .zf-weekend {
    color: #FF0000;
}

.zf-calendar .zf-now {
    background-color: #F5F5F5;
}

.zf-calendar td:hover,
.zf-calendar td.zf-hovered {
    background-color: #CCC;
}

.zf-calendar .zf-buttonprev,
.zf-calendar .zf-buttonnext {
    display: block;
    width: 2.5em;
    margin: 0;
}

.zf-calendar .zf-buttonprev {
    float: left;
}

.zf-calendar .zf-buttonnext {
    float: right;
}

.zf-calendar .zf-title {
    display: block;
    padding-top: 0.2em;
}


/* combobox */

.zf-combo-box {
    position: relative;
    z-index: 998;
}

.zf-combolist-active {
    z-index: 999;
}

.zf-combolist {
    position: absolute;
    left: 0;
    display: none;
}

.zf-combolist-active .zf-combolist {
    display: block;
    width: 100%;
}

.zf-combo-box .zf-button {
    display: none;
    width: 19px;
    overflow: hidden;
    background-image: url('images/zf-sprite.png');
    background-position: -47px 0.3em;
    background-repeat: no-repeat;
}

#with-js .zf-combo-box .zf-button {
    display: inline;
}


/* checkboxes, radiobuttons */

.zf-option {
    position: relative;
    padding: 3px 0 0.3em 18px;
}

.zf-option input {
    position: absolute;
    left: 0;
    top: 0.72em;
    margin: -4px 0 0;
}


/* sheets */

#with-js .zf-sheet {
    display: none;
    padding-bottom: 0;
}

#with-js fieldset.zf-selected {
    display: block;
}


/* range */

.zf-range dl {
    float: left;
    width: auto;
    margin-left: 0.5em;
}

.zf-range dt {
    width: 2em;
}

.zf-range dd {
    margin: 0 1em 0 0;
}


/* buttons */

.zf-buttons input,
.zf-button,
.zf-buttonprev,
.zf-buttonnext,
.zf-buttonadd,
.zf-buttonremove,
.zf-buttonup,
.zf-buttondown,
.zf-submit {
    scursor: pointer;
}

.zf-buttons {
    margin: 1.5em -0.4em 0;
    padding: 0.4em 0;
    /*	background: #FAFAFA;*/
}

.zf-buttons input {
    float: left;
    margin-left: 0.5em;
}

.zf-sheet .zf-buttons .zf-buttonnext,
.zf-sheet .zf-buttons .zf-buttonprev {
    display: none;
}

.zf-buttons input.zf-buttonprev {
    margin-left: 0.4em;
}

.zf-buttons input.zf-buttonnext,
.zf-sheet .zf-buttons .zf-submit {
    float: right;
    margin-right: 0.4em;
}

.zf-buttons input.zf-submit,
#with-js .zf-buttons input,
#with-js .zf-repeatbuttons {
    display: block;
}

.form-designer .zf-repeatbuttons {
    display: none;
}

.form-designer dd.zf-repeatbuttons {
    margin-left: 0.5em;
}

.form-designer div.zf-repeatbuttons {
    margin-top: 0.5em;
    text-align: right;
}

.zf-repeatbuttons input {
    width: 2.2em;
}

.zf-repeatbuttons span.zf-disabled {
    visibility: hidden;
}

.zf-repeatbuttons span.zf-buttonadd {
    float: left;
}

.zf-repeatbuttons span.zf-buttonremove {
    float: right;
}


/* slider */

.zf-slider-horizontal,
.zf-slider-vertical {
    margin-top: 1.5em;
}

.zf-slider-horizontal,
.zf-slider-vertical,
.zf-slider .zf-slider-scale,
.zf-slider-vertical .zf-slider-scale {
    position: relative;
}

.zf-slider-horizontal,
.zf-slider-horizontal .zf-slider-scale {
    width: 400px;
}

.zf-slider-horizontal .zf-slider-scale {
    top: 10px;
    height: 20px;
    border-top: 1px solid #999;
}

.zf-slider-vertical {
    margin-left: 1em;
    width: 20px;
}

.zf-slider-vertical,
.zf-slider-vertical .zf-slider-scale {
    height: 200px;
}

.zf-slider-vertical .zf-slider-scale {
    left: 10px;
    width: 20px;
    border-left: 1px solid #999;
}

.zf-slider div div div,
.zf-slidervertical div div div {
    position: absolute;
}

.zf-slider-control {
    position: absolute;
    left: 0;
    cursor: pointer;
    overflow: hidden;
    background: url('images/zf-sprite.png') 0 0 no-repeat;
    z-index: 2;
}

.zf-slider-horizontal .zf-slider-control {
    top: 11px;
    width: 11px;
    height: 14px;
    margin-left: -5px;
}

.zf-slider-control-selected {
    z-index: 3;
}

.zf-slider-vertical .zf-slider-control {
    left: 11px;
    width: 14px;
    height: 11px;
    margin-bottom: -6px;
    background-position: -11px 0;
}

.zf-slider .zf-slider-value,
.zf-slidervertical .zf-slider-value {
    position: absolute;
    font-size: 0.8em;
}

.zf-slider-horizontal .zf-slider-value {
    bottom: 15px;
}

.zf-slider-vertical .zf-slider-value {
    right: 15px;
    margin-bottom: -0.7em;
}

.zf-slider-value-selected {
    color: green;
}

.zf-slider-mark {
    color: #BBB;
    background: url('images/zf-sprite.png') -25px 0 no-repeat;
}

.zf-slider-horizontal .zf-slider-mark {
    top: -4px;
    width: 1px;
    height: 7px;
}

.zf-slider-vertical .zf-slider-mark {
    left: -5px;
    margin-bottom: -1px;
    width: 7px;
    height: 1px;
    background-position: 0 -28px;
}

.zf-slider-mark span {
    position: absolute;
    font-size: 0.7em;
}

.zf-slider-horizontal .zf-slider-mark span {
    top: 8px;
}

.zf-slider-vertical .zf-slider-mark span {
    left: 15px;
    top: -0.7em;
}

.zf-slider-range {
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

.zf-slider-horizontal .zf-slider-range {
    top: 7px;
    height: 3px;
}

.zf-slider-vertical .zf-slider-range {
    left: 10px;
    width: 3px;
}

.zf-slider-range-0 {
    background: red;
}

.zf-slider-range-1 {
    background: blue;
}

.zf-slider-range-2 {
    background: green;
}

.zf-slider-range-3 {
    background: yellow;
}

.zf-disabled .zf-slider-control,
.zf-slider-control-disabled {
    cursor: default;
    z-index: 1;
}

.zf-disabled .zf-slider-horizontal .zf-slider-control,
.zf-slider-horizontal .zf-slider-control-disabled {
    background-position: 0 -14px;
}

.zf-disabled .zf-slider-vertical .zf-slider-control,
.zf-slider-vertical .zf-slider-control-disabled {
    background-position: -11px -11px;
}

.zf-disabled .zf-slider-mark,
.zf-disabled .zf-slider-value,
.zf-slider-value-disabled {
    color: #CCC;
}

.zf-range .zf-slider-range-0,
.zf-range .zf-slider-range-2 {
    display: none;
}


/* opera hacks */

html:first-child .form-designer .zf-option input {
    margin: -6px 0 0 -2px;
}

body:nth-of-type(1) .form-designer .zf-scrollable .zf-option label {
    padding-right: 18px;
}

@media all and(width) {

    .form-designer .zf-option input {
        margin: -6px 0 0 -2px;
    }

    .zf-combo-box .zf-button,
    .zf-date-box .zf-picker .zf-opener {
        background-color: #F3F3F3;
    }

}

form .zf-disabled {
    display: none;
}

/*  My data */

.great textarea.zf {
    background: #fff url("images/grad_input.gif") repeat-x left top;
    border: #ccc 1px solid;
    font-family: Arial;
    font-size:20px;
    width: 100%;
}

span.desc {
    color: red;
    display: none;
}

.great input.zf {
    background: #fff url("images/grad_input.gif") repeat-x left top;
    border: #ccc 1px solid;
    font-family: Arial;
    font-size:20px;
    height:30px;
    width: 100%;
}

.great div.option input.zf {
    width: auto;
    height: auto;
}

div.submit-desc {
    font-size: 12px;
}