/* ==========================================================================
   Imports
   ========================================================================== */
@import "grid.php";

/* ==========================================================================
   Generelle Styles
   ========================================================================== */

#formContainer .clearfix:before,
#formContainer .clearfix:after {
    content: " ";
    display: table;
}

#formContainer .clearfix:after {
    clear: both;
}

#formContainer .clearfix {
    *zoom: 1;
}

#formContainer .clear {
    clear: both;
}

#formContainer p {
    position:      relative;
    margin-top:    0;
    margin-bottom: 0;
}

#formContainer label {
    position:      relative;
    margin-top:    .5em;
    margin-bottom: .2em;
    color:         #333;
    width:         100%;
}

#formContainer label small {
    font-size: .8em;
    color:     #AAA;
}

#formContainer .inputSpamField {
    display: none;
}

#formContainer .requiredField {
    font-size:      0.8em;
    vertical-align: top;
    color:          #9F3636;
}

#formContainer a {
    color:              #888;
    text-decoration:    none;
    -webkit-transition: all .3s;
    transition:         all .3s;
}

#formContainer a:hover {
    color: #333;
}

/* ==========================================================================
   Formular Elemente
   ========================================================================== */

#formContainer input[type="submit"],
#formContainer button {
    position:           relative;
    font-family:        Helvetica, Arial, sans-serif;
    font-size:          1em;
    outline:            0;
    cursor:             pointer;
    display:            inline-block;
    padding:            14px 5px;
    margin-top:         1em;
    -webkit-transition: all .3s;
    -moz-transition:    all .3s;
    -ms-transition:     all .3s;
    -o-transition:      all .3s;
    transition:         all .3s;
    border:             1px solid #333;
    background:         #333;
    color:              #FFF;
}

#formContainer input[type="submit"]:hover,
#formContainer button:hover {
    background: none;
    color:      #333;
}

#formContainer input::-moz-focus-inner {
    border: none;
}

#formContainer *:focus { outline: none; }

#formContainer input[type="text"],
#formContainer input[type="password"],
#formContainer select,
#formContainer textarea {
    -webkit-transition: all 0.2s ease-in-out;
    transition:         all 0.2s ease-in-out;
    color:              #333;
    background-color:   #FFF;
    border:             1px solid #CCC;
    font-family:        Helvetica, Arial, sans-serif;
    font-size:          1em;
    padding:            12px;
    display:            block;
    width:              100%;
}

#formContainer select[multiple="multiple"] {
    height: 300px;
}

#formContainer select {
    background-image:    url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23333%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
    background-repeat:   no-repeat;
    background-position: right center;
    -webkit-appearance:  none;
    -moz-appearance:     none;
    appearance:          none;
    padding-right:       25px;
    font-weight:         400;
}

#formContainer textarea {
    height:      143px;
    line-height: 1.4em;
}

#formContainer input[type="text"]:hover,
#formContainer input[type="password"]:hover,
#formContainer select:hover,
#formContainer textarea:hover {
    background-color: #FCFCFC;
    border:           1px solid #BBB;
}

#formContainer input[type="text"]:focus,
#formContainer input[type="password"]:focus,
#formContainer select:focus,
#formContainer textarea:focus {
    background-color: #FFF;
    border:           1px solid #5B7DB1;
}

#formContainer optgroup {
    font-weight: normal;
    font-style:  normal;
    line-height: 2em;
    font-size:   1.2em;
    padding:     4px;
    color:       #EB690B;
}

#formContainer optgroup option {
    color:          #333;
    font-size:      .8em;
    text-transform: capitalize;
    padding:        4px 0 4px 20px;
}

#formContainer option {
    text-shadow: none;
    padding:     0;
    margin:      5px 0 5px 0;
}

#formContainer .checkboxError {
    color: #9F3636;
}

#formContainer input.fieldError,
#formContainer select.fieldError,
#formContainer textarea.fieldError {
    border: 1px solid #9F3636;
}

#formContainer label.radioError {
    border-bottom: 1px solid #9F3636;
}

#formContainer input[readonly="readonly"] {
    color:      #FFF;
    background: rgba(0, 0, 0, .3);
    border:     1px solid rgba(0, 0, 0, .6);
}

#formContainer input[type="checkbox"],
#formContainer input[type="radio"] {
    border:   0;
    clip:     rect(0 0 0 0);
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    padding:  0;
    position: absolute;
    width:    1px;
}

#formContainer input[type="checkbox"] + label,
#formContainer input[type="radio"] + label {
    position:            relative;
    padding:             0 10px 0 1.5em;
    vertical-align:      middle;
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
    cursor:              pointer;
    display:             inline-block;
    text-align:          left;
}

#formContainer input[type="radio"] + label {
    padding:      15px 10px 0 2.5em;
    margin-right: 30px;
}

#formContainer input[type="checkbox"] + label:before,
#formContainer input[type="radio"] + label:before {
    content:    '';
    position:   absolute;
    top:        2px;
    left:       0;
    width:      16px;
    height:     16px;
    background: #FFF;
    font-size:  18px;
    text-align: center;
    border:     1px solid #CCC;
}

#formContainer input[type="radio"] + label:before {
    top: 13px;
}

#formContainer input[type="checkbox"] + label:after,
#formContainer input[type="radio"] + label:after {
    content:            '';
    background-color:   #FFF;
    position:           absolute;
    top:                5px;
    left:               4px;
    width:              10px;
    height:             10px;
    -webkit-transform:  scale(0);
    -ms-transform:      scale(0);
    transform:          scale(0);
    -webkit-transition: -webkit-transform 150ms ease-out;
    transition:         transform 150ms ease-out;
}

#formContainer input[type="radio"] + label:after {
    top: 17px;
}

#formContainer input[type="checkbox"] + label:after {
    background-color:     transparent;
    top:                  7px;
    left:                 4px;
    width:                8px;
    height:               4px;
    border-style:         solid;
    border-color:         #333;
    border-width:         0 0 2px 2px;
    box-shadow:           none;
    -webkit-border-image: none;
    -o-border-image:      none;
    border-image:         none;
    -webkit-transform:    rotate(-50deg) scale(0);
    -ms-transform:        rotate(-50deg) scale(0);
    transform:            rotate(-50deg) scale(0);
}

#formContainer input[type="radio"]:checked + label:after {
    -webkit-transform: scale(1);
    -ms-transform:     scale(1);
    transform:         scale(1);
}

#formContainer input[type="radio"] + label:before,
#formContainer input[type="radio"] + label:after {
    border-radius: 50%;
}

#formContainer input[type="checkbox"]:checked + label:after {
    -webkit-transform: rotate(-50deg) scale(1.3);
    -ms-transform:     rotate(-50deg) scale(1.3);
    transform:         rotate(-50deg) scale(1.3);
}

#formContainer .lt-ie9 input[type="checkbox"] {
    border:     1px solid #FFF;
    background: #FFF;
    clip:       auto;
    height:     auto;
    margin:     10px 0 0 10px;
    overflow:   auto;
    padding:    0;
    position:   relative;
    width:      auto;
    float:      left;
}

#formContainer .lt-ie9 input[type="checkbox"] + label:before,
#formContainer .lt-ie9 input[type="checkbox"] + label:after {
    display: none;
}

@media screen and (min-width: 540px) {

    #formContainer #ajaxMessages {
        position: fixed;
        top:      1em;
        right:    10px;
        left:     auto;
        z-index:  99999;
    }
}

#formContainer img.captchaImage {
    width:       auto;
    padding-top: 5px;
}

/* ==========================================================================
   Messages
   ========================================================================== */

#formContainer #messageContainer {
    position: fixed;
    top:      0;
    right:    0;
    z-index:  999999;
    width:    100%;
    cursor:   pointer;
}

#formContainer #messageContainer ul {
    list-style: none;
}

@media only screen and (min-width: 768px) {
    #formContainer #messageContainer {
        top:   1em;
        right: 1em;
        width: auto;
    }

    #formContainer #messageContainer .ok,
    #formContainer #messageContainer .error,
    #formContainer #messageContainer .errorFix,
    #formContainer #messageContainer .info,
    #formContainer #messageContainer .tip {
        border-radius: 5px;
    }
}

#formContainer #messageContainer .ok,
#formContainer #messageContainer .error,
#formContainer #messageContainer .errorFix,
#formContainer #messageContainer .info,
#formContainer #messageContainer .tip {
    display:         none;
    position:        relative;
    background:      url('../images/messages/ok.png') no-repeat 20px center rgba(0, 0, 0, .8);
    list-style-type: none;
    width:           auto;
    height:          auto;
    margin:          0 0 10px 0;
    padding:         5px 20px 5px 5px;
    line-height:     150%;
    z-index:         99999;
    color:           #FFF;
    text-shadow:     1px 1px 0 #000;
}

#formContainer #messageContainer .ok a,
#formContainer #messageContainer .error a,
#formContainer #messageContainer .errorFix a,
#formContainer #messageContainer .info a,
#formContainer #messageContainer .tip a {
    color:           #C8925B;
    text-decoration: none;
    outline:         0;
}

#formContainer #messageContainer .ok li,
#formContainer #messageContainer .error li,
#formContainer #messageContainer .errorFix li,
#formContainer #messageContainer .info li,
#formContainer #messageContainer .tip li {
    padding: .1em 1em .1em 1.5em;
}

#formContainer #messageContainer .ok {
    background-image: url('../images/messages/ok.png');
}

#formContainer #messageContainer .info {
    background-image: url('../images/messages/info.png');
}

#formContainer #messageContainer .error,
#formContainer #messageContainer .errorFix {
    background-image: url('../images/messages/error.png');
}

#formContainer #messageContainer .tip {
    background-image: url('../images/messages/tip.png');
}

#formContainer .initAnim {
    -webkit-animation-duration:  .75s;
    animation-duration:          .75s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode:         both
}

#formContainer .showMessage {
    -webkit-animation-name: showMessage;
    animation-name:         showMessage;
}

#formContainer .hideMessage {
    -webkit-animation-name: hideMessage;
    animation-name:         hideMessage;
}

@-webkit-keyframes showMessage {
    from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) }
    from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) }
    60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) }
    75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) }
    90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) }
    to { -webkit-transform: none; transform: none }
}

@keyframes showMessage {
    from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) }
    from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) }
    60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) }
    75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) }
    90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) }
    to { -webkit-transform: none; transform: none }
}

@-webkit-keyframes hideMessage {
    20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) }
    to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) }
}

@keyframes hideMessage {
    20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) }
    to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) }
}

/* ==========================================================================
   Uploader
   ========================================================================== */

/*
 * Original version: 1.0 © 2010 Andrew Valums ( andrew(at)valums.com )
 * Current Maintainer (2.0+): 2012, Ray Nicholus ( fineuploader(at)garstasio.com )
 *
 * Licensed under MIT license, GNU GPL 2 or later, GNU LGPL 2 or later, see license.txt.
 */
.qq-uploader {
    position: relative;
    width:    100%;
}

.qq-upload-list {
    margin:     0;
    padding:    0;
    list-style: none;
}

.qq-upload-list li {
    -webkit-box-sizing:    border-box;
    -moz-box-sizing:       border-box;
    box-sizing:            border-box;
    position:              relative;
    margin-bottom:         10px;
    width:                 100%;
    padding:               10px 5px;
    background-color:      #BCBCBC;
    border:                none;
    border-bottom:         1px solid #CCC;
    color:                 #FFF;
    outline:               0;
    border-radius:         3px;
    -moz-border-radius:    3px;
    -webkit-border-radius: 3px;
    font-size:             13px;
}

.qq-upload-status-text {
    color: #333333;;
}

.qq-upload-spinner,
.qq-upload-size,
.qq-upload-cancel,
.qq-upload-retry,
.qq-upload-failed-text,
.qq-upload-finished {
    margin-right: 12px;
    color:        #333333;
}

.qq-upload-spinner {
    display:        inline-block;
    background:     url("../images/uploader/loading.gif");
    width:          15px;
    height:         15px;
    vertical-align: text-bottom;
}

.qq-drop-processing {
    display: none;
}

.qq-drop-processing-spinner {
    display:        inline-block;
    background:     url("../images/uploader/processing.gif");
    width:          24px;
    height:         24px;
    vertical-align: text-bottom;
}

.qq-upload-finished {
    display:        none;
    width:          15px;
    height:         15px;
    vertical-align: text-bottom;
}

.qq-upload-retry {
    display: none;
    color:   #000000;
}

.qq-upload-cancel {
    color:           #000000;
    width:           25px;
    height:          25px;
    position:        absolute;
    top:             0px;
    right:           0px;
    margin-top:      -20px;
    margin-right:    -5px;
    background:      url('../images/messages/error.png') 0 0 no-repeat;
    background-size: 100%;
}

.qq-upload-retryable .qq-upload-retry {
    display: inline;
}

.qq-upload-file {
    padding-right: 15px;
    color:         #333;
}

.qq-upload-size,
.qq-upload-cancel,
.qq-upload-retry {
    font-size:   12px;
    font-weight: normal;
}

.qq-upload-failed-text {
    display:     none;
    font-style:  italic;
    font-weight: bold;
}

.qq-upload-failed-icon {
    display:        none;
    width:          15px;
    height:         15px;
    vertical-align: text-bottom;
}

.qq-upload-fail .qq-upload-failed-text {
    display: inline;
}

.qq-upload-retrying .qq-upload-failed-text {
    display: inline;
    color:   #D60000;
}

.qq-upload-list li.qq-upload-success {
    color: #235E00;
}

.qq-upload-list li.qq-upload-fail {
    -webkit-box-sizing:    border-box;
    -moz-box-sizing:       border-box;
    box-sizing:            border-box;
    position:              relative;
    margin-bottom:         10px;
    width:                 100%;
    padding:               10px 5px;
    background-color:      #FFF;
    border:                1px solid #990000;
    color:                 #333;
    outline:               0;
    border-radius:         3px;
    -moz-border-radius:    3px;
    -webkit-border-radius: 3px;
    font-size:             13px;
}

.qq-progress-bar {
    background: #99C3E5; /* Old browsers */
    background: -moz-linear-gradient(top, #99C3E5 0%, #0A77D5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #99C3E5), color-stop(100%, #0A77D5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #99C3E5 0%, #0A77D5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #99C3E5 0%, #0A77D5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #99C3E5 0%, #0A77D5 100%); /* IE10+ */
    background: linear-gradient(to bottom, #99C3E5 0%, #0A77D5 100%); /* W3C */
    filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#99c3e5', endColorstr='#0a77d5', GradientType=0); /* IE6-9 */
    width:      0%;
    height:     5px;
    margin-top: 6px;
    display:    none;
}

.qq-upload-button {
    position:    relative;
    text-align:  center;
    color:       #FFF;
    font-family: 'Open Sans', Arial, Verdana, Helvetica, sans-serif;
    font-size:   1em;
    outline:     0;
    cursor:      pointer;
    display:     inline-block;
    width:       100%;
    margin:      5px 0;
    padding:     9px;
    border:      1px solid #53799A;
    background:  #53799A;
    transition:  all .3s;
    white-space: nowrap;
}

.qq-upload-button::-moz-focus-inner {
    border: none;
}

.qq-upload-button:hover {
    background: none;
    color:      #53799A;
}

.qq-upload-list li a {
    position: absolute;
    top:      11px;
    right:    -5px;
}

.uploadDropArea {
    height:          240px;
    width:           100%;
    padding:         1em;
    background:      url("../images/uploader/uploadBackground.png") no-repeat center 80% #729EC3;
    background-size: 180px;
    text-align:      center;
    color:           #FFF;
    margin-bottom:   1em;
}

@media only screen and (min-width: 768px) {
    .uploadDropArea {
        margin-bottom: 0;
    }
}

.qq-upload-drop-area-active {
    background-color: rgba(48, 133, 61, 0.56);
}

#dirContent {
    margin-bottom: 1em;
}

.dirContentItem {
    position:         relative;
    margin-bottom:    10px;
    width:            100%;
    padding:          10px 5px;
    background-color: #8CBC8F;
    border-bottom:    1px solid #CCC;
    color:            #FFF;
    font-size:        13px;
}

.dirContentItem:last-of-type {
    margin-bottom: 0;
}

a.deleteItem {
    color:           #000000;
    width:           25px;
    height:          25px;
    position:        absolute;
    cursor:          pointer;
    top:             10px;
    right:           0;
    margin-top:      -20px;
    margin-right:    -5px;
    background:      url('../images/messages/error.png') 0 0 no-repeat;
    background-size: 100%;
}

a.deleteItem:hover {
    color: #333;
}