////////////////////////////////
// Import our external assets


@import "_reset";
@import "_typography";
@import "_forms";
@import "_grid";

///////////////////////////////

.animate {
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.multiplebgs body {
    background: url("../img/topdreck.png") repeat-x top center, url("../img/bottomdreck.png") no-repeat bottom left fixed, url("../img/bg_body.png") repeat center center fixed;
}



html, body, #container {height: 100%;}

body > #container {
    height: auto;
    min-height: 100%;
}


#footerwrap {
    background: url("../img/bg_footer_wrap.jpg") repeat;
    width: 100%;
    position: relative;
    margin-top: -147px; /* Negativer Wert der Footer-Höhe */
    height: 147px;
    clear:both;
}

header {
    .column;
    .span(12);
    .last;
    height: 146px;
    border-bottom: 3px solid #666;
    
}

#logo {
.column;
.span(4);
margin-top: 42px;
}

nav {
    .column;
    .span(8);
    .last;
    margin-top: 42px;
}

#main {
    .column;
    .span(12);
    .last;
    margin-top: 41px;
    padding-bottom: 150px;
    
}

#teaser {
    .column;
    .span(12);
    .last;
}

.sub #menu_sub {
    .column;
    .span(4);
}

.sub #contentainer {
    .column;
    .span(8);
    .last;
}

.full #contentainer {
    .column;
    .span(12);
    .last;
}

.full .mbox {
    
    
}

nav ul {
    height: 63px;
    list-style: none;
    float: left;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    li {
        width: auto;
        float: left;
        display: block;
        a {
            line-height: 63px;
            font-size: 23px;
            font-family: @default-fonts;
            color: #999;
            padding: 0 10px;
            font-weight: normal;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: -0.05em;
            display: block;
            .letterpress;
            .animate;
            &:hover { color: @a-hover-color; }
        }
        strong, a.active {
            line-height: 63px;
            font-size: 23px;
            font-family: @default-fonts;
            color: @a-hover-color;
            padding: 0 10px;
            font-weight: normal;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: -0.05em;
            background: url("../img/bg_gitter.png") repeat;
            display: block;
            .letterpress;
        }
        ul {
            display: block;
            position: absolute;
            top: 75px;
            left: 0;
            background: url("../img/bg_gitter.png") repeat;
            height: 21px;
            li  {
                display: block;
                width: auto;
                a, strong {
                    line-height: 21px;
                    font-size: 18px;
                    padding: 0 10px;
                    background: none;
                    text-transform: none;
                }
            }
        }
        
    }
}

.catmenu, .news-amenu-container {
    width: 300px;
    float: left;
}

.catmenu ul, .news-amenu-container ul {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    li {
        float: left;
        display: block;
        width: auto;
        margin-bottom: 1px;
        background: @box_background;
        clear: both;
        .animate;
        &:hover {
            width: 200px;
        }
        a {
            white-space: nowrap;
            line-height: 20px;
            font-size: 18px;
            font-family: @default-fonts;
            color: #999;
            padding: 0 20px;
            font-weight: normal;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: -0.05em;
            display: block;
            width: auto;
            text-align: right;
            .letterpress;
            .animate;
            &:hover {
                color: @a-hover-color;
                
                
                }
        }
        
    }
    li.active, li.amenu-act {
            //background: url("../img/nav_ul_li_strong.png") repeat;
            width: 300px;
            text-align: right;
            a {
                color: @a-hover-color;
            }
        }
}

footer {
    height: 105px;
    text-align: center;
    padding-top: 42px;
    clear: both;
    color: #ccc;
    background:  url("../img/bg_footer.jpg") no-repeat top center;
    ul {
        height: 21px;
        display: table;
        width: auto;
        
        list-style:  none;
        margin: 0 auto;
        padding: 0;
        font-size: 12px;
        li {
            display: block;
            width: auto;
            float: left;
            margin: 0 10px;
            background: url("../img/footer_sprite.png") no-repeat;
            padding-left: 16px;
            line-height:  21px;
            &.copy {background-position: 0 0;}
            &.email {background-position: 0 -184px;}
            &.phone {background-position: 0 -765px;}
            &.imprint {background-position: 0 -326px;}
            &.legal {background-position: 0 -510px;}
            &.facebook {background-position: 0 -255px;}
            &.twitter {background-position: 0 -836px;}
            &.linkedin {background-position: 0 -581px;}
            &.xing {background-position: 0 -1020px;}
            a {
                color: #ccc;
                text-decoration: none;
                &:hover {
                    text-decoration: none;
                    color: #eee;
                }
            }
        }
    }
    ul.cmse {
    height: 63px;
    
    width: auto;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    li {
        display: block;
        width: auto;
        float: left;
        margin: 0;
        padding-left: 16px;
        background: url("../img/footer_sprite.png") no-repeat;
        &.typo3 {background-position: 0 -907px; width: 110px; height: 63px;}
        &.drupal {background-position: 0 -71px; width: 109px; height: 63px;}
        &.magento {background-position: 0 -652px; width: 161px; height: 63px;}
        &.joomla {background-position: 0 -397px; width: 159px; height: 63px;}
        a {
            text-indent: -9999px;
            line-height: 63px;
            width: 100%;
            display: block;
        }
        }
    }
}

.icon_copy{ background-position: 0 0; width: 16px; height: 21px; } 
.icon_drupal{ background-position: 0 -71px; width: 109px; height: 63px; } 
.icon_email{ background-position: 0 -184px; width: 16px; height: 21px; } 
.icon_facebook{ background-position: 0 -255px; width: 16px; height: 21px; } 
.icon_imprint{ background-position: 0 -326px; width: 16px; height: 21px; } 
.icon_joomla{ background-position: 0 -397px; width: 159px; height: 63px; } 
.icon_legal{ background-position: 0 -510px; width: 16px; height: 21px; } 
.icon_linkedin{ background-position: 0 -581px; width: 16px; height: 21px; } 
.icon_magento{ background-position: 0 -652px; width: 161px; height: 63px; } 
.icon_phone{ background-position: 0 -765px; width: 16px; height: 21px; } 
.icon_twitter{ background-position: 0 -836px; width: 16px; height: 21px; } 
.icon_typo3{ background-position: 0 -907px; width: 110px; height: 63px; } 
.icon_xing{ background-position: 0 -1020px; width: 16px; height: 21px; } 

.news-list-item {
    width: 580px;
    padding: 20px;
    background: @box_background;
    float: left;
    margin: 0 20px 21px 0;
    &:hover {
        background: @box_background_hover;
    } 
}

.news-header-list-container {
    width: 260px;
    padding: 20px;
    background: @box_background;
    float: left;
    margin: 0 0 21px 0;
    &:hover {
        background: @box_background_hover;
    } 
}

.ias_loader {
	text-align:center;
	margin: 5px auto;
        width: 64px;
        display: block;
}




.ka-panel.close .ka-handler {
background-image:url("../img/arrow2_s.gif");
}

.ka-handler {
background:url("../img/arrow2_w.gif") no-repeat scroll right center transparent;
cursor:pointer;
margin-bottom:5px;
}

.ka-panel {
	background: url("../img/bg_gitter.png") repeat;
	padding: 5px 10px;
	margin: 0 0 5px 0;
	}
	
.ka-panel.close.hover {
	background: @box_background;
	}
	
.ka-panel p:last-child, .ka-panel h1 {margin-bottom: 0px;}

.ka-content {height: auto;}

.nivoSlider {
margin-bottom: 40px;
}