/**
 * @package DSL.de
 * @lastmodified $Id$
 *
 * @tableofcontents
 *
 * 1. Slidebar
 */

/* @section 1. Slidebar */

.boxSlidebar {
    background: #e9e9e9;
    padding: 0.25em 1em;
    text-align: center;
    line-height: 5em;
    overflow: hidden;
    -webkit-transition: background 0.4s ease;
    transition: background 0.4s ease
}

.boxSlidebar:hover {
    background: #d9d9d9
}

.boxSlidebar:hover .controlSlidebar {
    color: #fff
}

.boxSlidebar span {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle
}

/* Vor und Zurück Kontrolle */

.boxSlidebar .controlSlidebar {
    display: none;
    font: bold 6em/0 arial;
    margin-top: -0.25em;
    color: #b2b2b2;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease
}

.boxSlidebar .controlSlidebar:hover {
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    color: #08f
}

.controlSlidebaPrevious {
    margin-right: 4%
}

.controlSlidebaNext {
    margin-left: 4%
}

/* States */

.stateSlidebar {
    font: 7em/0 arial;
    color: #fff;
    margin: 0 2%
}

.stateSlidebarNumber {
    font-size: 3em;
    font-weight: bold
}

.stateSlidebar:hover {
    -webkit-transform: scale(1.6, 1.6);
    transform: scale(1.6, 1.6);
}

.stateSlidebar:active {
    color: #fb9a00
}

.stateSlidebarActive {
    color: #08f
}

/* @section 2. list navigation*/

.listNavigation {
    font: bold 1em arial;
    margin: 2em 2em 0;
    float: right
}

.listNavigation, .listNavigation a {
    color: #fff
}

.listNavigation a {
    cursor: pointer;
    display: block;
    padding: 0.5em 0.75em;
    text-decoration: none
}

.listNavigation a:hover {
    color: #fff
}

.listNavigation li:hover ul {
    display: block
}

/* erste Ebene */

.listNavigation > li {
    position: relative;
    float: left;
    margin: 0 0.125em
}

.listNavigation > li > a {
    border-radius: 0.5em
}

.listNavigation > li:hover > a {
    box-shadow: inset -1px -1px rgba(255, 255, 255, 0.3), inset 1px 1px rgba(0, 0, 0, 0.2);
    background: #08f
}

/* zweite Ebene */

.listNavigationChildren {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 0.5em;
    background: #08f;
    position: absolute;
    border-top: 1px solid transparent;
    top: 100%;
    left: 0;
    min-width: 100%;
    z-index: 1000;
    overflow: hidden;
    display: none
}

.listNavigationChildren a:hover {
    background: #39a9ff
}

/* Schmucklinien */

.listNavigationChildren li {
    margin-bottom: 1px;
    position: relative
}

.listNavigationChildren li:after {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -1px;
    z-index: 1100;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
}

.listNavigationChildren li:last-child {
    margin-bottom: 0
}

.listNavigationChildren li:last-child:after {
    display: none
}

/* @section 2. Vorteilsliste */

.listAdvantages li {
    font: 1.125em/1.75em oswald, arial;
    color: #777;
    margin-left: 2em;
    position: relative
}

.listAdvantages li:before {
    font: 1.5em 'icon';
    color: #08f;
    content: 'e';
    position: absolute;
    left: -1.5em;
    top: 0
}

.listAdvantages li + li {
    margin-top: 1em
}

/* @section 3. Tooltip */

.tooltip {
    font: 1em arial;
    color: #fff;
    padding: 1em
}

.tooltipDefault {
    background: #08f
}

.narrowscreen .tooltipDefault {
    margin-top: 0.5em
}

.widescreen .tooltipDefault {
    top: -2em;
    min-width: 15em;
    max-width: 20em
}

.widescreen .tooltipDefault {
    left: 2.5em
}

.tooltipResultFeature {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
    font-weight: bold;
    text-align: center;
    left: -2.5em;
    top: -4.5em;
    width: 6em
}