@media screen
{
/* padding: oben - rechts - unten - links */
.uelidrop {
    z-index:        100;
    font-size:      14px;
    margin-top:      0px;
    padding:         0px;
    list-style:     none;
}
.uelidrop li {
    display:        block;
    position:       relative;
    float:          left;
    border-top:     2px ridge  darkgreen;
    border-left:    2px ridge  darkgreen;
    border-right:   2px ridge  darkgreen;
}

/* positioniert das popup-menu rechts vom icon (dropstart) */
.uelimenu {
    padding-top:    5px;
    padding-left:   16px;
}


.dropicon {
    z-index:        101;
    width:          52px;
    padding-top:    2px;
    padding-left:   0px;
    padding-right:  2px;
    margin-top:     -6px;
    margin-bottom:  -4px;
   }
.infoicon {
    float:right;
    margin-top:     -10px; margin-right:8px;
    width:          22px;
}

/* Titel */
.uelititel {
    background:     DeepSkyBlue;
    color:          black;
    text-align:     left;
    font-weight:    500;
    height:         38px;
    line-height:    38px;
    padding-left:   8px;
    padding-right:  8px;
    white-space:    nowrap;
}
/* Kapitel im Hauptmenu */
li .ueli, .ueli span {
    z-index:        100;
    background:     LightCyan;
    color:          black;
    font-size:      14px;
    display:        block;
    height:         38px;
    line-height:    38px;
    white-space:    nowrap;
    text-decoration:none;
    cursor:         pointer;
    padding-left:   8px;
    padding-right:  8px;
    text-align:     left;
}
li .ueli:hover, span .ueli:hover {
    background:     DodgerBlue;
    color:          white;
    font-weight:    500;
}
.uelilast {border-bottom: 2px ridge  darkgreen}

/* Untermenues */
.subtitle    {z-index:auto; display:block;}

.subleft    {z-index:-1; position:relative; top:-2px; left:auto; right:100%; margin-left:0; margin-right:0; display:none;}
.subright   {z-index:-1; position:relative; top:-2px; left:100%; margin-left:-40px;}

.subleft  .ueligreen, .subleft .ueli,
.subright .ueligreen, .subright .ueli {display:none;}

.subtitle:hover .subleft  li          {display:block;}
.subtitle:hover .subright li          {display:block;}

.subtitle .flex-container             {display:flex;}
.subtitle .flex-container div         {color:darkgreen;}
.subtitle .flex-container div:hover   {color:white;}

/* Titel */
.ueligreentitel {
    background:     DodgerBlue;
    color:          white;
    text-align:     left;
    font-weight:    500;
    height:         38px;
    line-height:    38px;
    padding-left:   8px;
    padding-right:  8px;
    white-space:    nowrap;
}
/* Unterpunkte */
li .ueligreen, .ueligreen span {
    background:     white;
    color:          black;
    font-size:      14px;
    display:        block;
    height:         38px;
    line-height:    38px;
    white-space:    nowrap;
    text-decoration:none;
    cursor:         pointer;
    padding-left:   8px;
    padding-right:  8px;
    text-align:     left;
}
li .ueligreen:hover, span .ueligreen:hover {
    background:     DeepSkyBlue;
    color:          white;
    font-weight:    500;
}
.ueligreenlast {border-bottom: 2px ridge  darkgreen}

/* Kontextmenü positionieren */
li ul {
    z-index:        100;
    display:        none;
    position:       relative;
    left:           32px;
/* wird in manage_filetabelle bestimmt
    top:           -80px;
 */
   }

li:hover ul {
display:        block;
position:       absolute;
}

li:hover li {float: none;}
}

/**********************************************************/
/* Phones im Hochformat */
/**********************************************************/
@media screen and (max-width:680px) and (orientation:portrait)
{
li .ueligreen, li .ueligreentitel {height:42px; line-height:42px;}
li .ueligreenlast              {height:44px; line-height:44px;}
}

/********************************************************************/
/* Tablets im Hoch- oder Phones im Querformat                       */
/********************************************************************/
@media screen and (min-width:681px) and (max-width:960px) and (orientation:portrait),
screen and (max-width:680px) and (orientation:landscape)
{
/* positioniert das popup-menu rechts vom icon (dropstart) */
.uelimenu {padding-top:3px; padding-left:2px;}
.infoicon {float:right; margin-top:-6px; margin-right:8px; width: 28px;}
li .ueli, .ueli span, .ueli div, .uelititel, li .ueligreen, .ueligreen span, .ueligreen div, .ueligreentitel
{
    height:         40px;
    line-height:    40px;
    }
/* Kontextmenü */
li ul {
    top:           -28px;
    left:           48px;
}
}

@media print
{
td, body   {background-color:white}
}