example/styles/less/app.less
/*  ###########################################################################
    Author:     Lunatech Research
    ########################################################################### */

//  This LESS file is only used for this project. Each project would require
//  its own 'app.less' file or whatever you will call it. 
//  The 'main.less' file is where you can add as many files you want.

 
/*  Layout */


    html {
        overflow-y: scroll; 
        }
    body {
        background-color: @grey0;
        background-image: url(../images/backgrounds/back.png);
        background-position: 0 0;
        background-attachment: fixed;
        overflow:hidden; // Preventing the elastic scroll firing the sticky sidebar
        }
    main,
    .site {
        position: relative;
        padding-bottom: @em * 2;
        min-width: 960px;
        overflow: auto; // Fixing window scrolling disabled in body
        }
    header .logo {
        margin: @interline/2 0 0 30px;
        padding: 0;
        .h1;
        font-weight: normal;
        line-height: @transport;
        font-family: @typeface-header;
        color: @red2;
        background: transparent;
        }
    .site > header {
        position: relative;
        margin: 0 auto;
        padding: @interline 0;
        max-width: 1140px;
        min-width: 640px;
        height: @em*5;
        overflow: hidden;
        }
    .site > footer {
        clear: both;
        margin: 0 auto;
        padding: 0;
        max-width: 1140px;
        min-width: 640px;
        overflow: hidden;
        }
    nav, footer p { 
        margin: 0 auto;
        padding: 0;
        //width: 100%;
        color: white;
        .gradient(@grey5,@grey6);
        }
    footer p { 
        text-align: center;
        line-height: 2;
        }
        
    .content {
        margin: 0 auto;
        padding: 0 30px;
        max-width: 1140px - 60px;
        min-width: 640px - 60px;
        .box-sizing(border-box);
        }
    nav ul {
        margin: 0;
        padding: 0 30px;
        display: block;
        }
    nav li {
        display: inline;
        font-size: 0.9em;
        line-height: 2;
        text-transform: uppercase;
        color: @grey2;
        .text-shadow(0 - @l, darken(@blue2, 50%));
        }
    nav a[href] { 
        color: @light-color;
        }
    nav a[href]:visited { 
        color: @light-color;
        }
    nav a[href]:hover { 
        color: @yellow2;
        }
    nav .active a[href] { 
        font-weight: bold;
        }
    .help {
        position: absolute;
        top: 0;
        right: 15px;
        .rounded-corners(100%);
        padding: 0.3em 0;
        width: 28px;
        text-align: center;
        color: white;
        background: @blue1;
        .box-shadow();
        cursor: pointer;
        }
      

    .content aside {
        float: left;
        margin-left: -30px;
        padding: 0 0 @em*2;
        width: 20%;
        background-color: @grey1;
        .box-sizing(border-box);
        }
    .content > div {
        //position: relative;
        float: right;
        padding: 0 @block @em;
        width: 100%;
        overflow: hidden;
        .box-sizing(border-box);
        }
    .content > div p {
        max-width: @text-block;
        }
    .content > aside ~ div {
        width: 75%;
        }
    
    .content aside h2 {
        .h4;
        line-height: 1;
        margin: 0 0 @interline/1.5;
        padding: @interline @block @interline/2;
        text-transform: uppercase;
        font-family: @typeface;
        color: @grey4;
        text-shadow: 0 @l 0 @grey0;
        background-color: @grey2;
        .box-sizing(border-box);
        }
    .content aside > ul{
        margin: 0 @block;
        overflow: hidden;
        }

    aside .toggle {
        display: none;
        }
        
    @media screen and (color) {
    
        .content aside {
            width: 25%;
            }
        .content > aside ~ div {
            width: 75%;
            }
        .content > aside ~ div h1:after {
                //content: "(click '|<' to hide sidebar)";
                font-style: italic;
                font-size: 0.7em;
                }
        aside .toggle {
            position: absolute;
            right: 0;
            top:0;
            z-index: 42;
            display: block;
            width: 15%;
            height: @interline*2.9;
            font-size: 1.2em;
            line-height:2.6;
            text-align: center;
            overflow: hidden;
            cursor: pointer;
            color: @grey3;
            }
        aside .toggle:hover {
            border-left-color: @green2;
            color: @dark-color;
            .gradient(@grey2,@grey1);
            }
    
        .collapsed {
            .sidebarLeft(3%,@grey0,@light-color);
            }
        .collapsed aside {
            width: 3%;
            overflow: visible;
            }
        .collapsed aside .toggle {
            text-align: left;
            width: 100%;
            text-indent: -40%;
            color: @grey1;
            overflow: hidden;
            }
        .collapsed aside .toggle:after {
            float: right;
            display: block;
            content: ">| ";
            color: @grey3;
            }
        .collapsed aside .toggle:hover:after {
            color: @dark-color;
            }
        .collapsed aside h2,
        .collapsed aside ul,
        .collapsed aside nav {
            display: none;
            }
        .collapsed > aside ~ div {
            width: 97%;
            }
            
        .content .force-resize {
            width: 25% !important;
            }

    }

/*  Messages */

    .warning {
        margin: @interline 0 @em; 
        padding: @interline @w;
        }
    .notes {
        float: none;
        overflow: hidden;
        }
    code,
    .notes .note {
        color: darken(@green2,10%);
        }
    code strong {
        color: @red2;
        }

    .KIV-cloned{
        display: none;
    }
    .KIV-cloned[style*='fixed'] {
        display: block;
        background-color: #ffffff;
        background-image: url(../images/backgrounds/back.png);
        background-position: 0 0;
        background-attachment: fixed;
        border-bottom: 1px solid @grey1;
        &::after{
            position: absolute;
            content: " ";
            z-index: -1;
            bottom: -0.3em;
            left: 0;
            width: 100%;
            height:0.3em;
            background-image: -webkit-radial-gradient(50% -100%, ellipse cover, rgba(0,0,0,0.5), rgba(0,0,0,0.0) 75%);
            background-image: -moz-radial-gradient(50% -100%, ellipse cover, rgba(0,0,0,0.5), rgba(0,0,0,0.0) 75%);
            background-image: -ms-radial-gradient(50% -100%, ellipse cover, rgba(0,0,0,0.5), rgba(0,0,0,0.0) 75%);
            background-image: radial-gradient(50% -100%, ellipse cover, rgba(0,0,0,0.5), rgba(0,0,0,0.0) 75%);
            }
        }

