/*
 * Sprite Assignment
 */

#navigation li.lyrs a,
#navigation ul li ul li i {
    background-repeat: no-repeat;
    background-image: url(../../graphic/sprite/sprite_global.png);
    _background-image: url(../../graphic/sprite/sprite_global.gif);
}

#navigation ul li ul.camper li a b {
    background-repeat: no-repeat;
    background-image: url(../../graphic/sprite/sprite_camper_types.jpg) !important;
}

/*
 * Navigation
 */

#navigation {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #6A6A6A;
}


#navigation:not(:empty) {
    height: 36px;
}

#navigation li {
    position: relative;
    float: left;
    cursor: pointer;
    line-height: normal;
}

#navigation li a {
    color: #fcfeff;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    display: block;
    width: auto;
    height: 22px;
    padding: 9px 22px 5px;
    *border-left: none;
    _display: block;
    _width: 1px;
    _height: 30px;
    _padding: 9px 19px 0 15px;
}

#navigation li a:before,
#navigation li a:after {
    position: absolute;
    display: block;
    content: " ";
    top: 0;
    height: 100%;
    width: 1px;
}

#navigation li a:before {
    left: 0;
    background: #878787;
}

#navigation li:first-child a:before {
    left: 0;
    background: 0;
}

#navigation li:first-child a:hover {
    border-radius: 5px 0 0 0;
}

#navigation li a:after {
    right: 0;
    background: #616161;
}

#navigation li a:hover:after,
#navigation li a:hover:before {
    background: 0;
}

#navigation li:last-child a {
    border-right: 1px solid #878787;
}

/*
 * Sub-Navigation
 */

#navigation li.lyrs a {
    padding-right: 34px;
    background-position: right -172px;
}

#navigation ul li ul {
    display: none;
    position: absolute;
    padding: 5px;
    margin: 0;
    background: #515151;
    box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:0 5px 3px 0 rgba(0, 0, 0, 0.5);
    z-index: 50;
}

#navigation ul li ul li {
    color: #4d4d4d;
    font-size: 13px;
    text-align: left;
    display: block;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #d1d1d1;
    background-color: #fbfbfb;
    background: -moz-linear-gradient(top,  #fbfbfb 0%, #f7f7f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f7f7f7));
    background: -webkit-linear-gradient(top,  #fbfbfb 0%,#f7f7f7 100%);
    background: -o-linear-gradient(top,  #fbfbfb 0%,#f7f7f7 100%);
    background: -ms-linear-gradient(top,  #fbfbfb 0%,#f7f7f7 100%);
    background: linear-gradient(to bottom,  #fbfbfb 0%,#f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f7f7f7',GradientType=0 );
    cursor: pointer;
}

#navigation ul li ul li:hover {
    background: #f3f3f3;
    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
    background: #f0f0f0\9;
}

#navigation ul li ul li a {
    color: #4d4d4d;
    display: block;
    width: 100%;
    border-left: none;
    border-right: none;
}

#navigation ul li.lyrs ul li a {
    font-weight: normal;
    font-size: 12px;
    height: 15px;
    width: 204px;
    padding: 7px 0 6px 0;
    margin-left: 10px;
    background-image: none;
}

#navigation ul li ul li span {
    float: left;
}

#navigation ul li ul li i {
    float: right;
    width: 4px;
    height: 7px;
    margin: 5px 10px 5px 5px;
    background-position: -14px -455px;
}

#navigation ul li ul li a:before,
#navigation ul li ul li a:after {
    display: none;
}

/*
 * Handler
 */

#navigation li:hover a {
    top: 9px;
    background: #93AE30;
    margin-top: -10px;
    height: 25px;
    border: 0;
    box-shadow: 0 0 8px -1px rgba(0,0,0,0.4);
    z-index: 999;
}

#navigation li:hover > ul {
    display: block;
}

/*
 * List with Flags
 */

#navigation ul li ul.flags li a {
    border-left: none;
    background-position: 0 9px;
}

#navigation ul li ul.flags li a b {
    margin: 3px 9px 0 0;
}

#navigation ul li ul.flags li.more {
    width: 215px;
    border: none;
    background: none;
    *width: 214px;
}

#navigation ul li ul.flags li.more a {
    color: #cecece;
    font-size: 11px;
    text-align: right;
    text-decoration: underline;
    float: right;
    width: 130px;
    padding: 5px 0 2px 0;
}

#navigation ul li ul.flags li.more a:hover {
    text-decoration: none;
}

#navigation ul li ul.flags li.more i {
    float: right;
    width: 3px;
    height: 5px;
    margin: 11px 5px 5px 5px;
    background-position: -7px -456px;
}

/*
 * List with Camper Types
 */

#navigation ul li ul.camper {
    width: 763px;
}

#navigation ul li ul.camper li {
    float: left;
    width: 190px;
    *height: 145px;
    border-right: 1px solid #e1e1e1;
}

#navigation ul li ul.camper li:last-child {
    border-right: none;
}

#navigation ul li ul.camper li a {
    height: 130px;
}

#navigation ul li ul.camper li a span {
    margin-bottom: 5px;
}

#navigation ul li ul.camper li a b {
    display: block;
    width: 170px;
    height: 110px;
    margin: 0 0 5px 0;
}

#navigation ul li ul.camper li.alkoven a b {
    background-position: 0 0;
}

#navigation ul li ul.camper li.offroad a b {
    background-position: 0 -218px;
}

#navigation ul li ul.camper li.luxus a b {
    background-position: 0 -328px;
}

#navigation ul li ul.camper li.van a b {
    background-position: 0 -109px;
}