/*********************************************************

     ****
   ********                            **** *   *  *****
  *****        *   ***  *** * * ***   **    ** ** ***
    *****     ***  * ** **  *** **    *     * * *   **
       ***** *   * ***  *** * * ***   **    *   *    ***
   ********                            **** *   * *****
     ****                                  v1.0 (c) 2011

  Author: Sabine Baer, Benedikt Natter
  File: screen.css

*********************************************************/

/***************************
 * main containers
 ***************************/

#main {
    width: 1000px;
}

.headerContainer {
    padding: 20px 20px 0;
}

.contentContainer {
    float: none;
    padding: 20px;
    width: auto;
}

/***************************
 * default headlines,
 * paragraphs, lists and
 * default links
 ***************************/

h1 {
    color: #182F57;
}

/***************************
 * navigation
 ***************************/

.mainNavigationContainer {
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    margin: 0;
    padding: 3px 0;
}

.mainNavigationContainer ul li {
    float: left;
    margin-right: 30px;
}

.mainNavigationContainer a {
    color: #333;
}

.mainNavigationContainer a:hover {
    color: #999;
    text-decoration: underline;
}

/***************************
 * tables
 ***************************/

.defaultTable {
    width: 960px;
}

.defaultTable th {
    border-bottom: 1px solid #000;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-top: 3px;
    text-align: left;
}

.defaultTable th:first-child {
    padding-left: 0;
}

.defaultTable td {
    border-top: 1px solid #000;
    padding-left: 5px;
}

.defaultTable td:first-child {
    padding-left: 0;
}

.defaultTable .mobile {
    display: none;
}

/* sorting */
table.tablesorter th {
    background: url("arrows.gif") no-repeat right center;
    cursor: pointer;
}

table.tablesorter th.headerSortUp {
    background: #CCC url("arrow-up.gif") no-repeat right center;
}

table.tablesorter th.headerSortDown {
    background: #CCC url("arrow-down.gif") no-repeat right center;
}

table.tablesorter .no-sort {
    background: none;
}

/***************************
 * forms
 ***************************/

.cbx {
    float: left;
}

.formOneRow {
    margin-bottom: 10px;
}

.emptyMiddle {
    display: block;
}

.lblMiddle {
    font-weight: bold;
}

.emptyMiddle,
.lblMiddle {
    float: left;
    width: 170px;
}

.ui-datepicker {
    width: 242px;
}

.iptMiddleContainer,
.txtMiddleContainer {
    border: 1px solid #000;
    float: left;
    overflow: hidden;
    width: 248px;
}

.iptMiddleContainer .iptMiddle,
.txtMiddleContainer .txtMiddle {
    border: none;
    display: block;
    margin: 0;
    width: 100%;
}

textarea {
    resize: vertical;
}

input[disabled],
textarea[disabled] {
    background: #CCC;
}

/***************************
 * login box
 ***************************/

#loginBox {
    margin: 20px auto;
    text-align: center;
    width: 500px;
}

#loginBox h1 {
    margin-bottom: 5px;
}

#loginBox .loginForm {
    border-bottom: 1px solid #FFF;
    border-top: 1px solid #FFF;
    margin-top: 10px;
    padding: 10px 0;
}

#loginBox .formOneRow {
    text-align: left;
}

#loginBox .lblMiddle,
#loginBox .emptyMiddle {
    margin-right: 20px;
    text-align: right;
}

/***************************
 * anything else
 ***************************/

.error {
    margin-bottom: 10px;
}

.subMenu {
    margin-top: 20px;
}

.subMenu a {
    display: block;
}

/****************** START: SMARTPHONE *******************/

@media only screen and (max-width: 640px) {

    body {
        background: #FFF;
        margin: 5px;
    }

    #main {
        width: 100%;
    }

    .headerContainer {
        padding: 0px;
        margin-bottom: 20px;
    }

    .contentContainer,
    .mainNavigationContainer {
        padding: 1px;
    }

    /***************************
     * navigation
     ***************************/

    .mainNavigationContainer {
        border: none;
    }

    .mainNavigationContainer ul li {
        background: #999;
        display: block;
        float: none;
        height: 30px;
        line-height: 30px;
        padding: 0 3px;
        margin: 5px 0 0;
    }

    .mainNavigationContainer li:first-child {
        margin-top: 0;
    }

    .mainNavigationContainer li a {
        color: #FFF;
        display: block;
        font-weight: bold;
        height: 100%;
        width: 100%;
    }

    .mainNavigationContainer li a:hover{
        color: #FFF;
        text-decoration: none;
    }

    .mainNavigationContainer li:hover {
        background: #666;
    }

    /***************************
     * forms
     ***************************/

    .button {
        background: #999;
        border: 1px solid #000;
        cursor: pointer;
        height: 30px;
        width: 100%;
    }

    .iptMiddle, .txtMiddle {
        width: 100%;
    }

    .emptyMiddle,
    .lblMiddle {
        float: none;
        width: auto;
    }

    .emptyMiddle {
        display: none;
    }

    .iptMiddleContainer,
    .txtMiddleContainer {
        float: none;
        width: auto;
    }

    /***************************
     * login box
     ***************************/

    #loginBox {
        width: auto;
    }

    #loginBox .lblMiddle,
    #loginBox .emptyMiddle {
        margin-right: 0;
        text-align: left;
    }

    /***************************
     * anything else
     ***************************/

    .subMenu a {
        background: #999;
        color: #FFF;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        margin: 5px 0 0;
        padding: 0 3px;
        text-decoration: none;
    }

    .defaultTable {
        width: 100%;
    }

    .defaultTable .mobile {
        display: table-cell;
    }

    .defaultTable .no-mobile {
        display: none;
    }

    table.tablesorter thead tr th {
        background: none;
    }

}

/******************* END: SMARTPHONE ********************/