/**
 * Fieldsets
 */
fieldset {
    border: 1px solid #bbb;
    padding: 15px;
    }
    fieldset legend {
        border-left: 1px solid #bbb;
        border-right: 1px solid #bbb;
        padding: 0 10px;
    }
fieldset.fieldset-buttons {
    -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -khtml-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    }
    fieldset.fieldset-buttons legend {
        border-width: 0;
        margin: 0;
        padding: 0;
        }
        fieldset.fieldset-buttons legend .ui-buttonset {
            display: inline;
            margin: 0;
        }

/**
 * Inputs and Validation
 */

.form {
    background-color: #F7F7F7;
    border:1px solid #dddddd;
    -o-border-radius:0.4em;
    -ms-border-radius:0.4em;
    -moz-border-radius:0.4em;
    -khtml-border-radius:0.4em;
    -webkit-border-radius:0.4em;
    border-radius:0.4em;
    -o-box-shadow:rgba(255, 255, 255, 0.7) 0 1px 0;
    -ms-box-shadow:rgba(255, 255, 255, 0.7) 0 1px 0;
    -moz-box-shadow:rgba(255, 255, 255, 0.7) 0 1px 0;
    -khtml-box-shadow:rgba(255, 255, 255, 0.7) 0 1px 0;
    -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 1px 0;
    box-shadow:rgba(255, 255, 255, 0.7) 0 1px 0;
    padding:0;
    overflow:hidden;
    margin-bottom: 10px;
    }
    .form .form-label {
        border-top:1px solid #fff;
        display: block;
        float: left;
        font-size: 14px;
        font-weight: bold;
        line-height: 42px;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 1px 0 #FFF;
        width: 20%;
        white-space: nowrap;
        }
        .form .form-label em {
            color: red;
            font-style: normal;
            }
    .form .form-action {
        margin-left: 20%;  /*must be greater than the width of form-label */
        padding: 0.6em;
        }
    .form .form-input {
        display:block;
        float:right;
        width:80%;
        }
        .form .form-input .selector,
        .form .form-input .uploader,
        .form .form-input .radiogroup {
            min-height:0 !important;
            width:auto !important;
            font-size: 12px;
            }
        .form .form-input textarea,
        .form .form-input input[type=text],
        .form .form-input input[type=password],
        .form .form-input input[type=email],
        .form .form-input input[type=url],
        .form .form-input input[type=date],
        .form .form-input input[type=number],
        .form .form-input input[type=time],
        .form .form-input input[type=date],
        .form .form-input input.date,
        .form .form-input .selector,
        .form .form-input .uploader,
        .form .form-input .radiogroup,
        .form .form-input .checkgroup{
            -o-border-radius: 0;
            -ms-border-radius: 0;
            -moz-border-radius: 0;
            -khtml-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            padding: 0.6em;
            border: 1px solid #FFF;
            width:100%;
            display:block;
            background:#FFF;
            line-height: 22px;
            -webkit-appearance:none;
            -moz-appearance:none;
            font-size:13px;
            -o-box-shadow:none;
            -ms-box-shadow:none;
            -moz-box-shadow:none;
            -khtml-box-shadow:none;
            -webkit-box-shadow:none;
            box-shadow:none;
            }
        .form .form-input input.date {
            background: #FFF url(../images/navicons/29.png) center right no-repeat;
        }
        .form .form-input .selector {
            background: #FFF url(../images/navicons/140.png) center right no-repeat;
            }
            .form .form-input .selector select {
                height: 100%;
                }
            .form .form-input .selector span {
                background: none;
                line-height: 22px;
                padding: 0 30px 0 0;
            }
        .form .form-input .uploader {
            height: auto;
            padding:0;
            }
            .form .form-input .uploader span.filename {
                background: #FFF url(../images/navicons/56.png) center right no-repeat;
                border: none;
                -o-box-shadow: none;
                -ms-box-shadow: none;
                -moz-box-shadow: none;
                -khtml-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 18px;
                line-height: 22px;
                padding: 0.6em;
                position: relative;
                }
            .form .form-input .uploader span.action {
                display: none;
                }
            .form .form-input .iTextClearButtonContainer {
                float: left; /*firefox fix*/
                }
    .form .form-input.form-textarea {
        line-height: 1;
        }
    .form .form-input.form-textarea textarea {
        position: relative;
        }
    .form > div{
        border-bottom: 1px solid #DDDDDD;
        padding-left: 10px;
        }
    .form > div:first-child{
        -o-border-top-right-radius: 0.4em;
        -o-border-top-left-radius: 0.4em;
        -ms-border-top-right-radius: 0.4em;
        -ms-border-top-left-radius: 0.4em;
        -moz-border-radius-topright: 0.4em;
        -moz-border-radius-topleft: 0.4em;
        -khtml-border-top-right-radius: 0.4em;
        -khtml-border-top-left-radius: 0.4em;
        -webkit-border-top-right-radius: 0.4em;
        -webkit-border-top-left-radius: 0.4em;
        border-top-right-radius: 0.4em;
        border-top-left-radius: 0.4em;
        }
        .form > div:first-child > label {
            -o-border-top-left-radius: 0.4em;
            -ms-border-top-left-radius: 0.4em;
            -moz-border-radius-topleft: 0.4em;
            -khtml-border-radius-topleft: 0.4em;
            -webkit-border-top-left-radius: 0.4em;
            border-top-left-radius: 0.4em;
            }
            .form > div:first-child > .form-input,
            .form > div:first-child > .form-input > * {
                -o-border-top-right-radius: 0.4em;
                -ms-border-top-right-radius: 0.4em;
                -moz-border-radius-topright: 0.4em;
                -khtml-border-top-right-radius: 0.4em;
                -webkit-border-top-right-radius: 0.4em;
                border-top-right-radius: 0.4em;
                }
    .form > div:last-child {
        -o-border-bottom-right-radius: 0.4em;
        -o-border-bottom-left-radius: 0.4em;
        -ms-border-bottom-right-radius: 0.4em;
        -ms-border-bottom-left-radius: 0.4em;
        -moz-border-radius-bottomright: 0.4em;
        -moz-border-radius-bottomleft: 0.4em;
        -khtml-border-bottom-right-radius: 0.4em;
        -khtml-border-bottom-left-radius: 0.4em;
        -webkit-border-bottom-right-radius: 0.4em;
        -webkit-border-bottom-left-radius: 0.4em;
        border-bottom-right-radius: 0.4em;
        border-bottom-left-radius: 0.4em;
        border-bottom: none;
        }
        .form > div:last-child > label {
            -o-border-bottom-right-radius: 0.4em;
            -ms-border-bottom-right-radius: 0.4em;
            -moz-border-radius-bottomright: 0.4em;
            -webkit-border-bottom-right-radius: 0.4em;
            border-bottom-right-radius: 0.4em;
            }
.invalid {
  border: 1px solid red !important;
}
.form-error {
    background-color: #000;
    -o-box-shadow: 0px 0px 6px #dddddd;
    -ms-box-shadow: 0px 0px 6px #dddddd;
    -moz-box-shadow: 0px 0px 6px #dddddd;
    -khtml-box-shadow: 0px 0px 6px #dddddd;
    -webkit-box-shadow: 0px 0px 6px #dddddd;
    box-shadow: 0px 0px 6px #dddddd;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    display: none;
    font-size: 11px;
    height: 15px;
    padding: 4px 10px;
    z-index: 999;
    }
    .form-error p {
        color: #fff;
        display: block;
        line-height: 13px;
        margin: 0px;
        }
    .form-error em {
        border: 5px solid;
        border-width: 0 5px 5px;
        border-color: #000 transparent;
        display: block;
        height: 0;
        width: 0;
        /* positioning */
        position: absolute;
        top: -5px;
        left: 10px;
        }

/**
 * Tooltips
 */

.tooltip {
    background:#ddd; /* default background for browsers without gradient support */
    background: url('svg.php?stops=%23555555 0%,%23313131 100%');
    background: -o-linear-gradient(top,#555,#313131);
    background: -ms-linear-gradient(top,#555,#313131);
    background: -moz-linear-gradient(top,#555,#313131);
    background: -webkit-gradient(linear,0% 0%,0% 100%,from(#555),to(#313131));
    background: -webkit-linear-gradient(top,#555,#313131);
    background: linear-gradient(top,#555,#313131);
    -pie-background: linear-gradient(top,#555,#313131);
    -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    -ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    -khtml-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    border: 1px solid #333;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    color: #fff;
    display: none;
    font: bold 12px/16px Arial, Verdana, sans-serif;
    text-shadow: 0 1px 1px #222;
    text-shadow: 0 1px 1px rgba(0,0,0,0.8);
    text-align: center;
    width: 100px;
    position:relative;
    padding:3px;
    margin:1em 0 1em;
    margin-top: 0px;
    min-height: 20px;
    z-index: 999;
    }
/* creates triangle */
.tooltip:before {
    content:" ";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left: 40px;
    width:0;
    height:0;
    border:10px solid transparent;
    border-top-color:#333;
    zoom: 1;
    }
    .tooltip em {
        content:" ";
        display:block; /* reduce the damage in FF3.0 */
        position:absolute;
        bottom:-15px; /* value = - border-top-width - border-bottom-width */
        left: 40px;
        width:0;
        height:0;
        border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
        border-style:solid;
        border-color: #333 transparent;
        zoom: 1;
        }
.tooltip.bottom {
    background: #333;
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#313131));
    background: -moz-linear-gradient(top, #555, #313131);
    -pie-background: linear-gradient(top, #555, #313131);
    -o-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
    -ms-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
    -moz-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
    -khtml-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
    }
.tooltip.bottom:before {
    top:-16px; /* value = - border-top-width - border-bottom-width */
    border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
    border-color: #dd6611 transparent;
    }
    .tooltip.bottom em {
        top:-15px; /* value = - border-top-width - border-bottom-width */
        border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
        border-color: #333 transparent;
        }
.tooltip.right {
    margin-left: 20px;
    }
    .tooltip.right em {
        border-color: transparent #000;
        border-color: transparent rgba(0,0,0,0.7);
        top: 12px;
        /* controls vertical position */

        left: -7px;
        /* value = - border-left-width - border-right-width */

        bottom: auto;
        border-width: 8px 8px 8px 0;
        }

/**
 * Table Styles
 */

table.simple tr.highlight,
.portlet > section.no-padding table.simple tr.highlight {
    background: #eeeeff;
    }
    table.simple tr td,
    .portlet > section.no-padding table.simple td {
        border-collapse: separate;
        border-top: 1px solid #bbb;
        padding: 10px 15px;
        }
        table.simple tr td strong span,
        .portlet > section.no-padding table.simple td strong span {
            color: #999;
            }


/**
 * Clearable Textfield
 */
.iTextClearButtonContainer {
    position:relative;
    display:inline-block;
}
.form .iTextClearButtonContainer {
    background: #FFF;
    width: 100%;
}

.iTextClearButtonContainer input {
    padding-right: 35px !important;
}

.iTextClearButton {
    background: url('../images/clear.png') no-repeat 0px 0px;
    cursor:pointer;
    display: block;
    height: 19px;
    position:absolute;
    right: 10px;
    top: 12px;
    width: 19px;
}

.iTextClearButton:active {
    background-position: 0px -19px;
}

.iTextClearButton:hover {
    background-position: 0px -57px;
}

/**
 * Simple Autocomplete
 */
.ac_results {
    padding: 0px;
    border: 1px solid black;
    background-color: white;
    overflow: hidden;
    z-index: 99999;
    }
    .ac_results ul {
        width: 100%;
        list-style-position: outside;
        list-style: none;
        padding: 0;
        margin: 0;
        }
        .ac_results ul li {
            margin: 0px;
            padding: 2px 5px;
            cursor: default;
            display: block;
            /*
            if width will be 100% horizontal scrollbar will apear
            when scroll mode will be used
            */
            /*width: 100%;*/
            font: menu;
            font-size: 12px;
            /*
            it is very important, if line-height not setted or setted
            in relative units scroll will be broken in firefox
            */
            line-height: 16px;
            overflow: hidden;
            }
.ac_loading {
    background: white url('indicator.gif') right center no-repeat;
    }
.ac_odd {
    background-color: #eee;
    }
.ac_over {
    background-color: #313131;
    color: white;
    }