@import url("_fonts.less?ver=20140728");
@import url("_size.less?ver=20140728");
@import url("_colors.less?ver=20140728");
@import url("_images.less?ver=20140728");
@import url("_icon.less?ver=20140728");
@import url("_box.less?ver=20140728");
@import url("_text.less?ver=20140728");
@import url("_base.less?ver=20140728");
@import url("_shadow.less?ver=20140728");
@import url("_widgets.less?ver=20140728");
@import url("_hallo.less?ver=20140728");

/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.rating-cancel,div.rating-cancel a{background:url('../images/delete.gif') no-repeat 0 -16px}
div.star-rating,div.star-rating a{background:url('../images/star.gif') no-repeat 0 0px}
div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0}
div.star-rating-on a{background-position:0 -16px!important}
div.star-rating-hover a{background-position:0 -32px}
/* Read Only CSS */
div.star-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.star-rating{background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */

.ui-datepicker {
    background: @white;
    box-shadow: 0 0 5px @black;
    padding: @grid;
}

#header {
    //{
        width: 100%; clear: both; float: left;
        background: @grayDark;
        box-shadow: 0 @grid @grid2X rgba(0, 0, 0, 0.2);
    //}
    & div.logo  {width: 59px; height: 90px; background: @logo-image; background-repeat: none; overflow: hidden; text-indent: -9999em; margin: 0 20px 0 40px;}
    & h1        {color: @white; padding: 0; margin: @grid2X 0; .shadow > .header;}
    & a         {color: @white; .shadow > .header; outline-offset: @grid;}
    & a:hover   {color: @link;}
    [data-role=dropdown] > a:after {
        position: relative; top: 5px; left: 0; margin: 0 0 0 10px; display: inline-block;
        content: "\203A"; color: @orange; font-size: @fontSizeH2;
        -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
    }
    .dropdown-menu {
        //{
            position: absolute; float: left; display: none; z-index: 11010; margin: 0 -40px;
            padding: 10px;
            background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); min-width: 160px;
            font-size: @fontSizeSmall;
        //}
        .divider    {height: 1px; margin: 9px 1px; overflow: hidden; background-color: #e5e5e5;}
        &.open      {display: block !important;}
        
        & a         {width: 100%; display: inline-block; color: @black; .shadow > .none; outline-offset: @grid;}
        & a:hover   {color: @link;}
    } 
    & > .element {float: left; display: inline-block;}
    & > .element.left {clear: right;}
    & > .element.right {float: right;}
    & ul.menu {padding: 0 0 (@grid * 2) 0;}
    & ul.menu > li {display: inline-block; margin: 0 20px 0 0;}
    & ul.menu > li.divider {width: 1px; border-right: 1px darken(@white, 10%) solid; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
    & ul.dropdown-menu {display: none; list-style-type: none;}
    & .divider {padding: 0 10px 0 0; margin: 10px 30px 10px 0; border-right: 1px solid @orange;}
    & #nav-bar {float: left; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    & #nav-bar > ul {margin: 0;}

    .user-info {
        //{
            float: right; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
        //}
        & .user-icon {float: right; cursor: pointer; font-size: @fontSize * 4; color: darken(@grayDark, 10%);.shadow > .iconBig; padding: 0 @grid;}
        & .user-icon:hover {color: @grayDark;}
        & .user-text {float: right;}
        & span {display: block; float: left; width: 100%; text-align: right; clear: both;}
        & .login-text {color: @lighten; font-size: @fontSize; .shadow > .header; text-align: center; width: 20px; float: right; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
        & .logged-as {color: @lighten; font-size: @fontSizeH1; .shadow > .header;}
        & .logged-full {}
        & .logged-department {}
        #user-login {width: @tileTriple;}
    }
    #user-login-form {
        //{
            display: block; position: absolute; top: 10px; right: 80px; z-index: 20000; width: 490px; height: 35px; padding: 10px;
            border: 1px solid @gray; background: @white; .shadow > .login;
        //}
        input {border: 1px solid @blue; background: @blueLight; padding: 5px 10px; width: 175px;}
        input:focus {border: 1px solid @blueDark; background: @white;}
        input[type="submit"] {border: 1px solid @white; background: @blue; color: @white; outline: 1px solid @blue; padding: 5px 10px; width: 80px; text-align: center; }
        input[type="submit"]:focus {border: 1px solid @white; background: @blueDark; color: @white; outline: 2px solid @blueDark;}
        label.error {color: @white; padding: 5px; background: @red; position: absolute; margin: 30px 0 0 -190px; border: 1px solid @white; outline: 1px solid @red; font-size: @fontSizeSmall;}
    }
}
#breadcrumb {
    //{
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; clear: both; width: 100%; background: none; border-bottom: 1px solid @grayDark;
        height: 2em;
    //}
    a:hover {outline: none;}
    & li {font-size: @fontSizeSmall;}
}

#app-main {
    width: 100%; clear: both; float: left; background: @lighten; overflow: auto; position: relative;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#app-data   {
    //{
        height: 100%; padding: @grid; float: right; width: auto; height: auto;
    //}
}

@media screen and (max-width: 1024px) {
    #app-menu {
        //{
            height: 100%; padding: @grid; float: left; width: @tileDouble + @tileMargin;
        //}
    }
    .page {
        width: @page !important;
    }
}
@media screen and (max-width: 800px) {
    #app-menu {
        //{
            height: 100%; padding: @grid; float: left; width: @tileDouble + @tileMargin;
        //}
    }
    .page {
        width: @pageSmall !important;
    }
}
@media screen and (min-width: 1025px) {
    #app-menu {
        //{
            height: 100%; padding: @grid; float: left; width: @tileTriple + @tileMargin;
        //}
    }
    .page {
        width: @page !important;
    }
}

#app-bar-toggle {
    //{
        display: block; width: @fontSizeH1; height: @fontSizeH1;
        position: fixed; bottom: @grid2X; left: @grid2X; z-index: 10000;
        display: none;
    //}
    & > span {font-size: @fontSizeH1; .shadow > .menuToggle; color: darken(@lighten, 10%); cursor: pointer;}
    & > span:active {color: @blueLight;}
    & > span:hover {color: @gray;}
    &.active {bottom: 75px; right: @grid2X !important;}
    &.active > span {color: lighten(@appBar,5%); .shadow > .menuToggleActive;}
    &.active > span:hover {color: @appBar;}
}

#app-bar {
    display: none;
    width: 100%;
    clear: both; float: left; position: fixed;
    z-index: 10000;
    bottom: 0; left: 0; right: 0;
    min-height: 100px;
    background: @appBar !important;
    border-top: 1px solid @black;
    padding: @grid 0 0 0;
    
    .user-menu {
        float: left;
        padding: 0 0 0 @grid4X * 4;
        width: 100%;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
        & > a {width: 80px; height: 90px; float: left; text-align: center; margin: 0 20px 0 0; font-family: "SansationLight", "helvetica neue", helvetica, arial, sans-serif; font-size: @fontSizeSmall;}
        & > a:hover {color: @lighten;}
        & > a > span {text-align: center; clear: both; font-size: @fontSizeH1;}
        & > a.right {float: right;}
    }
    
}

.formCloneDiv {
    border: 1px solid @gray;
    
    input {max-width: 300px;}
    label {width: 120px; display: inline-block;}
    button {display: block; clear: both; float: right; margin: 40px 0 0 0;}
}