/* ------------------------------------------------------------- */
/* MENU (V3) and HTML MENU (menu.less)                          */
/* ------------------------------------------------------------- */

// ----------------------------------------------------------------------------
//
// MENU (V3) and HTML MENU
//
// ----------------------------------------------------------------------------
// DESCRIPTION:
//
//
//
// CONTENTS:
// - MENUV3
//   - List-Element general
//     - Links & Inbound Pseudo Link (DIV)
//   - Items with Sub Items
//   - List 1st Level (horizontal)
//     - List 2nd and 3rd Level (Vertical)
//     - List 2nd Level (Vertical)
//     - List 3rd Level (Vertical)
//
// - HTML-MENU (LEFT)
//   - Layout Web Page (LEFT & RIGHT AREA)
//   - HTML-JS-MENU
//     - Menue Items
//     - Top Menu Item (1st Level)
//     - Sub Menu Item (2nd Level)
//     - Sub Sub Menu Item (3rd & last Level)
//
// - DHTML-MENU (TOP WITH ICONS, JUST OVERRIDES)
//   - Menu Bar on Top
//   - Menu-Container Sub (Sub Menu 2nd Level)
//   - Menu-Item Sub (2nd Level)
//   - Non-Generic Overrides (With Group Ids

// ----------------------------------------------------------------------------





// --------------------------------------
// MENUV3
// --------------------------------------

#menuv3 {
  // Main-Properties of this element in File SCAFFOLDING.LESS
  background-color: @menu_bg ;



  // --------------
  // List-Element general
  // --------------
  li {
    display:       block;
    position:      relative;
    float:         none;
    font-weight:   normal !important ;
    font-size:     @font-size-smaller;
    line-height:   96%;
    white-space:   nowrap;
    border:        0;
    padding:       0;
    margin:        0;

    &:hover {
      cursor:    pointer;
    }

    // --------------
    // Links & Inbound Pseudo Link (DIV)
    // --------------
    a,
    a:visited,
    div.x,
    div.x:visited {
      display:         block;
      color:           @menu_link;
      text-decoration: none;
      padding:         0.45em 0.6em 0.58em 1.3em ;
      font-weight:     normal;
      //padding-right: 0.6em;
    }

  } //  /li (List-Element general)


  // --------------
  // List 1st Level (horizontal)
  // --------------
  & > ul {
    list-style: none;
    margin:     0;
    padding:    0;
    float:      left;

    & > li{
      display:          block;
      height:           17px;
      padding:          9px 0.9em 6px 0.9em;
      background-color: @menu_bg ;
      color:            @menu_link ;
      vertical-align:   middle;

      &:hover {
        background-color: @menu_link_bg_level1_hover;

        // Display Menu 2nd level
        > ul {
          display:  block;
          position: absolute;
        }
      }


      // --------------
      // List 2nd and 3rd Level (vertical)
      // --------------
      ul {
        position: relative;
        display:  none;
        padding:  0 2em 2em 2em;
        margin:   0 -2em -2em -2.8em;

        li{
          border-bottom: 1px @menu_border_color solid ;
        }
      } // /ul (2nd and 3rd Level)


      // --------------
      /* List 2nd Level (Vertical) */
      // --------------
      & > ul {
        top: 32px;
        z-index: 1000;

        & > li {
          background-color: @menu_link_bg_level2 ;
          margin-left:       1px;

          // Items with Sub Items
          div.x {
            background:    no-repeat right url("../../image/menu-arrow-to-right-5.png");
            padding-right: 2.0em ;

            // does not work because text has to be a block
//            &::after {
//              content:     "▷" ;
//              color:       @gray-dark ;
//              font-size:   120% ;
//              padding:     0 0 0 1.0em ;
//              text-align: right ;
//              display:    inline-box ;
//            }
          }

          // List-Item Hover
          &:hover {
            color:            @menu_link_hover;
            background-color: @menu_link_bg_level2_hover;

            // Display Menu 3rd level
            > ul {
              display:  block;
              position: absolute;
            }
          }

          // --------------
          // List 3rd Level (Vertical)
          // --------------
          > ul {
            top:              0;
            left:             99%;
            padding:          2em;
            //margin:       -2em;
            margin-top:       -2.06em;
            margin-right:     -2em;
            margin-bottom:    -2em;
            margin-left:      -2em;
            list-style:       none;

            > li {
              background-color:   @menu_link_bg_level3 ;
              //border-left:      0.2em solid @menu_border_color;

              &:hover {
                background-color: @menu_link_bg_level3_hover }

              &:first-child { border-top: 1px #800040 solid ; }
             }

          } // /ul (3rd level)

        } // />li (2nd level)

      } // /ul List 2nd Level (Vertical)

    } //  />li (1st level)

  } //  /ul (1st level)

} //  /#menuv3


//  PENDENT: ??? (ggf. entfernen)
li.sub {
  position:         relative;
  left:             0.2em;
  top:               0px;
  background-color: #FFFFFF;
}





// --------------------------------------
// HTML-MENU (LEFT)
// --------------------------------------

// --------------------
// Layout Web Page (LEFT & RIGHT AREA)
// --------------------

// LEFT (Menu) area/column
body > div.layout-split-left {
  display: block;
  position:         fixed !important;
  top:               0 ;
  left:             0 ;
  width:             200px;
  height:           100%;
  z-index:           1;
  overflow:         hidden   ;
  border-right:     1px @gray-standard solid;
  background-color: @gray-dark;


}

// RIGHT (Content) area/column
body > div.layout-split-right {
  margin-left:   200px;
  //margin-top:   70px;
  padding-top: 28px;
  display:       block;
  z-index:       1;
  overflow:     hidden;
  // PENDENT: das muss dringend geloest werden,
  // siehe z.B. /am.pl?action=edit_account&callback=am.pl%3faction%3dlist_account&id=6130
  // Bearbeitung von Konto (wird unten abgeschnitten, falls nicht mit prov. Behelf wie unten)
  min-height:   800px;
  height:       auto;

  .layout-actionbar { top: 36px; }

  & > #content {
    top: 68px;
    padding-top: 40px;

    h1 { top: 28px !important; }

    & > .wrapper{
      padding-top: 2em ;
    }
    & + div.wrapper {
      padding-top: 4em ; // funzt nicht
    }

    & > form {
      margin-top: 0.6em ;

      & + div.wrapper {
        padding-top: 4em ;
      }


      & > .tabwidget {
        & > ui-tabs-panel {
          //padding-top: 6.0em ;
          .wrapper{ margin-top: 2em; }
          .tabwidget ul.ui-tabs-nav{ position: relative; }
        }
        & > ul.ui-tabs-nav{
          top: 69px;
          width: ~"calc(100% - 200px)";
        }

      } // / > .tabwidget
    } // / > form
    & > #requirement_spec_tabs.tabwidget {
      & > ul.ui-tabs-nav{ top: 69px !important ; }
    }
  }

  // PENDENT: war für Klasse .layout-split-right eingesetzt, wo gebraucht im alten Kivi ?? ggf. entfernen
  &.folded {
    margin-left: 40px
  }



}

// PENDENT: wo als Klasse gebraucht im alten Kivi ?? ggf. entfernen
div.layout-split-right.folded {
  margin-left: 40px
}

// --------------------
// HTML-JS-MENU
// --------------------

div.layout-split-left #html-menu {
  display:            block;
  overflow-y:         scroll;
  overflow-x:         hidden;
  width:              100%;
  height:             100%;
  margin:             27px 0 0 0;
  padding:            0 0 150px 0;
  background-color:   @menu_left_bg ;
  font-size:          @font-size-small;
  border-bottom:      20px @menu_border_color solid ; // PENDENT: Rand unten sollte vorhanden sein

  // menu item icons (mii) ausblenden
  .mii {
    display: none;
  }

  // scrollbars can be invisible only on Webkit-Browsers
  &::-webkit-scrollbar {
    display: none;
  }

  & > div:last-of-type {
    border-bottom: @menu_border ; // PENDENT: Rand unten sollte vorhanden sein
  }

  // -----------------------
  // Menue-Items
  // -----------------------
  .mi {
    display:       block ;
    a {
      display:     block;
      word-wrap:   break-word;
      text-decoration: none;
      font-weight: normal;
    }
    &:first-child {
      border-top: 2px @menu_border_color solid ; // PENDENT: 2px ??? sonst @menu_border verwenden
    }
    &:last-child {
      border-bottom: @menu_border ; // PENDENT: 2px ??? sonst @menu_border verwenden
    }
  }


  // -----------------------
  // Top Menu Item (1st Level)
  // -----------------------
  .s0 {
    padding: 0 ;
    background-color: @menu_left_level_1_bg ;
    color:             @menu_left_level_1_color;
    border-top:       @menu_border ;
    font-size:         90% ;
    text-transform:   uppercase;

    a {
      padding:   5px 0 6px 8px ;
      cursor:   pointer ;

      &:hover,
      &:active{
        background-color: @menu_left_level_1_hover_bg ;
        color:             @menu_left_level_1_hover_color ;
        //color:             white ;
        text-decoration:   none;
      }
      &:link,
      &:visited { color: @menu_left_level_1_color ; }
    }

    &.menu-open{
      font-weight:       normal;
      background-color: @menu_open_bg ;
      color:             @menu_open_color ;
      border-bottom:     0 ;

      a {
        padding:         5px 0 6px 8px ;
        cursor:         auto ;

        &:hover,
        &:active{
          background-color: @menu_open_bg ;
          color:             @menu_open_color ;
          text-decoration:   none;
        }
        &:link,
        &:visited { color:   @menu_open_color ; }
      }
    }
  } // /.s0

  // -----------------------
  // Sub Menu Item (2nd Level)
  // -----------------------
  .s1{
    font-size: 80% ;
    padding: 0 ;
    background-color: @menu_left_level_2_bg ;
    border-top:       @menu_border ;

    a {
      padding:         4px 0 3px 8px ;

      &:hover,
      &:active{
        background-color: @menu_left_level_2_hover_bg ;
        color:             @menu_left_level_2_hover_color ;
        text-decoration:   none;
      }
      &:link,
      &:visited { color:   @menu_left_level_2_color ; }
    }

    // has submenu (has 3rd-Level menu)
    &.sm{
      &:after{
        content:     "▼" ;
        color:       @gray-standard ;
        font-size:   80% ;
      }
      a {
        display:   inline-block ;
        width:     162px; // with scrollbar{ display:none; } 174px is possible, works only with ::-webkit-scrollbar
        color:     @menu_left_level_2_color ;

        &:hover,
        &:active{
          background-color:   @menu_left_level_2_bg ;
          color:               @menu_left_level_2_color ;
          text-decoration:     none ;
        }
        &:link,
        &:visited { color:     @menu_left_level_2_color ; }

        &.ml:link,
        &.ml:visited{ color:   @menu_left_level_2_color ; }
      }
    }
    & > .s2:last-child {       border-bottom: @menu_border ; }

  } // /.s1

  // -----------------------
  // Sub Sub Menu Item (3rd & last Level)
  // -----------------------
  .s2{
    padding:           0 ;
    font-size:         80% ;
    background-color: @menu_left_level_3_bg ;

    a {
      padding:         2px 0 3px 20px ;

      &:hover,
      &:active{
        background-color:   @menu_left_level_3_hover_bg ;
        color:               @menu_left_level_3_hover_color ;
        text-decoration:     none;
      }
      &:link,
      &:visited { color:     @menu_left_level_3_color ; }
    }

  } // /.s2
} // /#html-menu





// --------------------------------------
// DHTML-MENU (TOP WITH ICONS, JUST OVERRIDES)
// --------------------------------------

#main_menu_div {

  // -----------------------
  // Menu Bar on Top
  // -----------------------

  .DHTMLSuite_menuBar_top {
    top:         28px;
    height:     31px !important;
    padding:     0;
    margin:     0 ;

    // -----------------------
    // Menu Item on Top
    // -----------------------
    // Menu Item on Top, generic
    // same as .DHTMLSuite_menuItem_top_* below
    & > div {
      padding: 5px 5px 0 3px ;

      // Container with useless icon
      div:first-child { }
      // Text Menu Item top
      .DHTMLSuite_menuItem_textContent {
        font-size:   90% ;
        padding:     0.1em 0.2em 0.2em 0.2em ;
      }
      // Arrow down Top
      .DHTMLSuite_menuItem_top_arrowShowSub {
          margin:   0 0.2em 0.2em 0.2em ;
      }
    } // / > div (Menu Item on Top, generic)

    // Menu Item on Top with funny classes

    .DHTMLSuite_menuItem_top_regular,
    .DHTMLSuite_menuItem_top_over,
    .DHTMLSuite_menuItem_top_click,
    .DHTMLSuite_menuItem_top_disabled,
    .DHTMLSuite_menuItem_top_active {
      height: 19px;
    }
    .DHTMLSuite_menuItem_top_regular { }
    // Hover
    .DHTMLSuite_menuItem_top_over,
    .DHTMLSuite_menuItem_top_click {
      color:             @color-red-strong ;
      background-color: @base-superlight ;
      .DHTMLSuite_menuItem_top_arrowShowSub{
        border:         none !important ;
      }
    }
    // Clicked with Submenu
    .DHTMLSuite_menuItem_top_click { }

  } // /.DHTMLSuite_menuBar_top

} // /#main_menu_div


// -----------------------
// Menu-Container Sub (Sub Menu 2nd Level)
// -----------------------
.DHTMLSuite_menuBar_sub {
  width:           auto !important;
  padding:         0.1em 0 0.4em 0.4em !important;
  margin:         11px 0 0 0;
  border-top:     none;
  border-right:   1px solid @base-lighter;
  border-bottom:   1px solid @base-lighter;
  border-left:     1px solid @base-lighter;

  // -----------------------
  // Menu-Item Sub (2nd Level)
  // -----------------------
  .DHTMLSuite_menuItem_sub_regular,
  .DHTMLSuite_menuItem_sub_over,
  .DHTMLSuite_menuItem_sub_click,
  .DHTMLSuite_menuItem_sub_disabled,
  .DHTMLSuite_menuItem_sub_active {
    clear:               both;
    padding-left:       25px;
    padding-right:       0.7em;
    padding-top:         0.2em;
    padding-bottom:     0.2em;
    cursor:             pointer;
    background-repeat:   no-repeat;
    font-size:           90%;

    .DHTMLSuite_menuItem_sub_arrowShowSub {
      right:             3px !important;
    }
  }
  // Regular
  .DHTMLSuite_menuItem_sub_regular{
    a.DHTMLSuite_menuItem_textContent{  }
  }
  // Hover & Active
  .DHTMLSuite_menuItem_sub_over,
  .DHTMLSuite_menuItem_sub_active {
    color: @color-orange-strong ;
    background-color: @base-superlight;
  }

} // /.DHTMLSuite_menuBar_sub