/* ==============================================================
   DIV-Tables
   Build Tables out of DIVs
   ==============================================================*/
.div-table {
    display: table;
    float: left;
    width: 100%;
}

.div-table-row {
    display: table-row;
    float: left;
    width: 100%;
    min-height: 1em;
}

.div-table-head {
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
}

.div-table-cell {
    display: table-cell;
    float: left;
    padding: 0.313em;
}

.div-table-cell-label {
    font-weight: bold;
}

/* ==============================================================
   Forms
   Standard Forms and Input-Fields
   ==============================================================*/
.form {
    float: left;
    width: 100%;
    padding: 0.438em;
}

.form:before,
.form:after {
    content: "";
    display: table;
    line-height: 0;    
}

.form:after {
    clear: both;
}
        
.form-row {
    float: left;
    width: 100%;
    *zoom: 1;
}

.form-label {
    float: left;
    width: 15%;
    min-height: 2em;
    margin: 0.2em 0;
    padding: 0.313em 0.625em;
    font-size: 1em;
    text-align: left;
}
        
.form-input {
    float: left;
    width: 85%;
    min-height: 2em;
    margin: 0.2em 0;
}

.form-vertical .form-controls {
    float: left;
    width: 100%;
    padding: 0.313em 0;
    text-align: right;
}

.form-vertical .form-controls .btn {
    margin: 0 0 0 0.313em;
}

.form-horizontal .form-label,
.form-horizontal .form-input,
.form-horizontal .form-controls {
    float: left;
    width: auto;
}

.form-horizontal .form-controls {
    padding: 0.2em 1em;
}
        
.form-input input[type="text"],
.form-input input[type="password"],
.form-input input[type="email"],
.form-input input[type="tel"],
.form-input input[type="url"],
.form-input input[type="search"],
.form-input input[type="datetime"],
.form-input input[type="datetime-local"],
.form-input input[type="date"],
.form-input input[type="time"],
.form-input input[type="month"],
.form-input input[type="week"],
.form-input input[type="number"],
.form-input input[type="color"] {
    width: 100%;
    height: 100%;
    padding: 0.313em 0.500em;
    font-size: 1em;
    border: 1px solid #eee;
    outline: none;
}
        
.form-input input[type="range"] {}

.form-input input[type="radio"],
.form-input input[type="checkbox"] {
    vertical-align: middle;
}

.form-input textarea {
    width: 100%;
    height: 6em;
    padding: 0.313em 0.500em;
    font-size: 1em;
    border: 1px solid #eee;
    outline: none;
    resize: vertical;
}

.form-input select {
    width: 100%;
    height: 100%;
    padding: 0.313em 0.500em;
    font-size: 1em;
    border: 1px solid #eee;
    background: #FFFFFF;
    outline: none;
}

.form-controls {
    float: left;
    width: 100%;
}

/* ==============================================================
   Buttons
   Button-Classes for all kind of Tags (<button>, <a>, <span>, ...)
   ==============================================================*/
.btn,
.btn.ui-button {
    position: relative;
    display: inline-block;
    min-width: 2em;
    min-height: 2em;
    padding: 0 0.625em;
    margin: 0 0.313em 0.313em 0;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    line-height: 2em;
    color: #000000;
    border: none;
    border-radius: 0;
    cursor: pointer;
    outline: none;
    background: #EEEEEE;
    background-repeat: no-repeat;
    background-position: center center;
}

a.btn {
    text-decoration: none;
}

input.btn,
.btn.ui-button {}

.btn .ui-button-text {
    font-weight: bold;
    color: #000000;
}

.btn-search {
    background-image: url(../images/icons/search.png);
}

/* ==============================================================
   Overlay
   An Overlay to create Dialogs between User and Page
   ==============================================================*/
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}

/* ==============================================================
   Modal Box
   A small Box for dialogs like "Log-In"
   ==============================================================*/

.modal-box {
    position: fixed;
    width: 40%;
    padding: 1em;
    text-align: left;
    background-color: #FFFFFF;
}

/* ==============================================================
   Grid
   A flexible Layout-Grid based on %
   ==============================================================*/
.grid-container,
.grid-row {
    float: left;
    width: 100%;
    *zoom: 1;
}

.grid-row:before,
.grid-row:after {
    content: "";
    display: table;
    line-height: 0;    
}

.grid-row:after {
    clear: both;
}

.grid-cell {
    float: left;
    min-height: 2em;
    margin-left: 2.564102564102564%;
    *margin-left: 2.5109110747408616%;
}

.grid-cell:first-child {
    margin-left: 0;
}

.grid12 {
    width: 100%;
    *width: 99.94680851063829%;
}
.grid11 {
    width: 91.45299145299145%;
    *width: 91.39979996362975%;
}
.grid10 {
    width: 82.90598290598291%;
    *width: 82.8527914166212%;
}
.grid9 {
    width: 74.35897435897436%;
    *width: 74.30578286961266%;
}
.grid8 {
    width: 65.81196581196582%;
    *width: 65.75877432260411%;
}
.grid7 {
    width: 57.26495726495726%;
    *width: 57.21176577559556%;
}
.grid6 {
    width: 48.717948717948715%;
    *width: 48.664757228587014%;
}
.grid5 {
    width: 40.17094017094017%;
    *width: 40.11774868157847%;
}
.grid4 {
    width: 31.623931623931625%;
    *width: 31.570740134569924%;
}
.grid3 {
    width: 23.076923076923077%;
    *width: 23.023731587561375%;
}
.grid2 {
    width: 14.52991452991453%;
    *width: 14.476723040552828%;
}
.grid1 {
    width: 5.982905982905983%;
    *width: 5.929714493544281%;
}