// Fonts
//
// Styleguide 2.0


{{#each imports}}@import "{{this}}";
{{/each}}

body{
   font-family:Tahoma, Geneva, sans-serif;
}
.font-sample-l{
    font-size: 2em;
    margin: 0;
    white-space: no-wrap;
}
.font-sample-m{
    font-size: 1em;
    margin: 0;
}
.font-sample-s{
    font-size: 0.75em;
    margin: 0;
}
.kss-markup{
    display: none;
}

.kss-modifier-original{
    display:none;
}


#kss-node{
    border-top-color:#505050;
    .kss-title{
        @color:#404040;
        color:@color;
        .kss-ref{
            color:@color;
        }
    }
    .kss-depth-1 .kss-title, #kss-node .kss-overview>h1:first-child,
    .kss-overview>h1:first-child{
        border-bottom-color: #AAA;
    }
    .kss-doc-title{
        color:#AAA;
    }
    .kss-menu>.kss-menu-item{
        @color:#999;
        @hover:#555;
        &:hover>a{
            color:@hover;
            >.kss-ref{
                color:@hover;
            }
        }
        &.kss-active>a{
            border-bottom-color: #888;
        }
        >a{
            color:@color;
            >.kss-ref{
                color:@color;
            }
            padding-left:4px;
            padding-right:4px;
        }
    }
    .kss-menu-child{
        margin-left:10px;
        padding:0;
    }
    .kss-menu-child>.kss-menu-item{
        padding: 0 4px;
        @highlightBack:#F8F8F8;
        @highlight:#333;
        &.kss-active{
            background-color:@highlightBack;
            >a,>a:hover,>a:active{
                color:@highlight;
                >.kss-ref,
                >.kss-ref:hover,
                >.kss-ref:active{
                    color:@highlight;
                }
            }
        }
        &:hover{
            background-color:@highlightBack;
            >a{
                color:@highlight;
                >.kss-ref{
                    color:@highlight;
                }
            }
        }
        >a{
            @color:#AAA;
            color:@color;
            >.kss-ref{
                color:@color;
            }
        }
    }
    .kss-markup pre{
        border-left-color:#555;
    }
}

[class*="-folded"]{
    max-width:320px;
}

// Color themes
//
// Styleguide 1.0
.color-sample{
    display:inline-block;
    width:40px;
    height:40px;
}
#kss-node [id*="section-1."].kss-section{
    margin: 0;
    padding: 0;
    .kss-modifier{
        border-top:none;
    }
    .kss-modifier-example{
        padding-top:5px;
        padding-bottom:10px;
    }
    .kss-description,
    .kss-modifier-head{
        display:none;
    }
}

{{#each colors}}{{#each schemeColors}}
.color-sample{
    &.bg-{{../variation}}-{{../scheme}}-{{../themeName}}-{{category}}{
        background-color:@{{../variation}}-{{../scheme}}-{{../themeName}}-{{category}}-color;
    }
    &.bg-{{../variation}}-{{../scheme}}-{{../themeName}}-{{category}}-dark{
        background-color:@{{../variation}}-{{../scheme}}-{{../themeName}}-{{category}}-color-dark;
    }
    &.bg-{{../variation}}-{{../scheme}}-{{../themeName}}-{{category}}-light{
        background-color:@{{../variation}}-{{../scheme}}-{{../themeName}}-{{category}}-color-light;
    }
    &.bg-{{../variation}}-{{../scheme}}-{{../themeName}}-{{category}}-soft{
        background-color:@{{../variation}}-{{../scheme}}-{{../themeName}}-{{category}}-color-soft;
    }
}
{{/each}}
{{/each}}


// Icons
//
// Styleguide 3.0

// Favicons
//
// Favicon themes.
//
// img - Image tag.
//
// Markup:
{{#each img.favicon}}// <div style="float:left;margin:4px 8px"><h5 style="text-align: center">{{name}}</h5><img src="{{filename}}" width="128"></div>
{{/each}}//
// Styleguide 100.1


#section-100\.2 .kss-modifier-block{
    background-color: #F8F8F8;
}

// Images
//
// Styleguide 100.0

// Startup images
//
// Startup image themes.
//
// img - Image tag.
//
// Markup:
{{#each img.startup}}// <div style="float:left;margin:4px 8px"><h5 style="text-align: center">{{name}}</h5><img width="{{width}}" src="{{filename}}"></div>
{{/each}}//
// Styleguide 100.2


{{#each _themesDataGuide}}
// {{Name}}
//
// Styleguide {{guideIndex}}.0

{{#each data}}.{{../name}}-theme-{{themeName}}{.{{../name}}-theme-{{themeName}}();}
{{/each}}

{{/each}}




