/* =============================================================================
   HAUPTNAVIGATION (#mainnav)
   ============================================================================= */

#mainnav {
    float: left;
    clear: left;
    margin-top: 13px;
    line-height: 42px;
}

#mainnav ul,
#mainnav li {
    margin: 0;
    padding: 0;
}

#mainnav li {
    float: left;
    margin-right: 40px;
}

#mainnav ul a,
#mainnav strong {
    position: relative;
    padding-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: #222;
}

/* Unterstrich-Animation */
#mainnav a::after,
#mainnav strong::after {
    content: '';
    position: absolute;
    border-bottom: 2px solid #c62828;
    bottom: 0;
    left: 20px;
    right: 20px;
    opacity: 0;
    transition: left .3s ease, right .3s ease, opacity .3s ease;
}

#mainnav .active strong::after,
#mainnav a:hover::after {
    left: 0;
    right: 0;
    opacity: 1;
}


/* =============================================================================
   TOP NAVIGATION (#topnav)
   ============================================================================= */

#topnav {
    right: 0;
    top: 0;
    overflow: hidden;
    float: right;
    margin-left: 20px;
    background-color: #c62828;
    border-radius: 0 0 20px 20px;
    font-size: 15px;
    line-height: 45px;
}

#topnav a {
    float: left;
    padding-right: 5px;
    padding-left: 5px;
    text-decoration: none;
    color: #fff;
}

#topnav a:hover {
    background-color: #a22;
}

#topnav a.first {
    padding-left: 20px;
}

#topnav a.last {
    padding-right: 20px;
}

#topnav .icon {
    vertical-align: middle;
    margin-right: 10px;
    margin-top: -3px;
    transform: scale(.75);
}


/* =============================================================================
   LINKE SIDEBAR (#left)
   ============================================================================= */

#left {
    padding-right: 30px;
    font-size: 16px;
    box-sizing: border-box;
}

#left .inside {
    padding: 20px;
    background-color: #f1f1f1;
}

#left ul {
    margin: 0;
}

#left li {
    position: relative;
    padding-left: 20px;
}

#left li:before {
    background: url(/files/frischknecht/template/icons.png) no-repeat;
    background-position: -620px -110px;
    height: 25px;
    width: 15px;
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}

#left a {
    color: #505050;
}

#left a:hover {
    color: #000;
}


/* =============================================================================
   BREADCRUMB
   ============================================================================= */

.mod_breadcrumb {
    width: 1320px;
    padding: 30px 0;
    font-size: 16px;
    color: #7f7f7f;
    margin: 0 auto;
}

.mod_breadcrumb li {
    float: left;
}

.mod_breadcrumb a,
.mod_breadcrumb a:visited {
    position: relative;
    padding-right: 30px;
    color: #7f7f7f;
}

.mod_breadcrumb a::after {
    content: '';
    position: absolute;
    top: 5px;
    width: 0;
    height: 0;
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    border-left: 7px solid #7f7f7f;
    clear: both;
    right: 10px;
}


/* =============================================================================
   ICONS (Sprite-basiert)
   ============================================================================= */

.icon-lupe {
    background: url(/files/frischknecht/template/icons.png) -114px -64px no-repeat;
    height: 23px;
    width: 22px;
    display: inline-block;
}

.icon-wk {
    background: url(/files/frischknecht/template/icons.png) -14px -67px no-repeat;
    height: 20px;
    width: 21px;
    display: inline-block;
}

.icon-login {
    background: url(/files/frischknecht/template/icons.png) -65px -66px no-repeat;
    height: 20px;
    width: 20px;
    display: inline-block;
}

.icon-merken {
    background: url(/files/frischknecht/template/icons.png) -716px -67px no-repeat;
    height: 15px;
    width: 18px;
    display: inline-block;
}

.icon-orders {
    background: url(/files/frischknecht/template/orderlist.png) no-repeat;
    height: 26px;
    width: 21px;
    display: inline-block;
}

/* =============================================================================
   ICONS (Sprite-basiert)
   ============================================================================= */

.mod_mmenu {
    display: none;
}