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

//  Base units that set overall proportions ------------------------------------

    @view:                  1200;           // VIEWPORT target based on pixels
    @w:                     @view / 100px;  // Smallest horizontal unit
    @h:                     0.2em;          // Smallest vertical unit
    @em:                    @h*7;           // Vertical space for boundries like top & bottom padding
    
    @block:                 @w * 2;         // White space for paddings or margins
    @text-block:            @view * 48%;    // alt: 52em; 
    @max-width:             @view * 1px;    // alt: @w * 80 = 960
    
    @l:                     1px;            // Line or border
    @rad:                   @w/3;           // Standard radius
    
    
//  Form elements -------------------------------------------------------------

    @form-width:            @text-block;
    @field-width:           @form-width;
    
    @input-padding-height:  @em/4;
    @input-padding-width:   @block/6;
    @text-input-padding:    @input-padding-height @input-padding-width;
    
    @label-width:           100%;
    @text-input-width:      100%;
    @label-orientation:     none; /* float value: left, right, none */
    
    @label-text-orientation:left;


//  Box elements --------------------------------------------------------------

    .box {
        margin:             0 0 @interline ;
        padding:            @interline @block;
        }
        
    //  Use this to have block elements override the '.panel' padding.    
    //  This is great for headings, <header> and <footer> tags.
    .box-inset {
        margin:             0 - @interline 0 - @block;
        padding:            @interline/2 @block;
        }

