public/styles/vanilla/less/adaptive-layout.less
/*  ###########################################################################
    Author:     Lunatech Research
    ########################################################################### */


    @media (max-width: 680px) {
        html {
            padding: 0 0 @em/2;
            -webkit-text-size-adjust: none;
        }
        body {
            min-width:  @w * 26 - @block;
            max-width:  @w * 40;
        }
        body > header {
            padding: @em/2 @block/2 0;
        }
        .content {
            padding: @em/2 @block/2;
        }
        header .logo {
            padding: 0 0 0 @block;
            }
        .content hgroup {
            margin: 0 - @em/2 0 - @block/2 @block;
            padding: @em/2 @block*1.5;
        }
        .content > section {
            float: none;
            padding: 0;
            margin-right: @block;
            margin-left: @block;
            width: auto;
        }    
        .content section p {
            margin-right: 0;
        }    
        .content .tabs {
            float: none;
            margin-right: 0;
            width: auto;
            font-size: 0.8em;
        }    
        .content .tabs li,
        .content .tabs li a{
            padding: @h @w/4;
        }    
        .content .ui-tabs-panel {
            float: none;
            overflow: hidden;
            width: auto;
            }
        nav ul {
            padding: 0 @block * 1.5;
        }    
        nav ul li a {
            padding: 0 @block/4 0 0
        }
        .bootsteps{
            width: auto;
        }
        .examples ul {
            .display-box(vertical);
            }

        .examples li {
            margin: @interline 0 0;
            .box-flex(0);
            }
        #accordion {
            width: 100%;
            }
   }
        
    @media (min-width: 680px) and (max-width: 960px){
        body {
            min-width:  @w * 64 - @block*2;
            max-width:  @w * 80;
        }
        .csscolumns .content .tabs li,
        .csscolumns .content .tabs li a{
            padding: @h @w/3;
        }    
        .examples ul {
            .display-box(vertical);
            }

        .examples li {
            margin: @interline 0 0;
            .box-flex(0);
            }
    }
    @media (min-width: 960px) {
        body {
            min-width:  @w * 80 - @block*2;
            max-width:  @w * 100;
        }
    }
    
    
    