example/styles/less/base.less
/*  ###########################################################################
    Author:    DutchCelt Design
    ########################################################################### */


        
/*  HTML5 display-role reset for older browsers ------------------------------- */

    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
        }
        
    audio, canvas, video {
        display: inline-block;
        }


/*  Basic front-end patterns  ------------------------------------------------- */
    
    html {
        font-size: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        }

    body {
        margin: 0;
        font-style: normal;
        font-weight: normal;
        font-size: @font-scale;
        line-height: @transport;
        font-family: @typeface;
        text-rendering: optimizeLegibility;
        }
    ul {
        margin-left: @em;
        padding: 0;
        }
    ol {
        margin-left: @em*1.2;
        padding: 0;
        }
    dl {
        margin:0 0 @interline 0;
        padding: 0;
        }
    dl {
        margin:0 0 @interline 0;
        padding: 0;
        }
    dt{ 
        margin: 0;
        font-weight: bold;
        }
    dd {
        margin-left: @em;
        display: list-item;
        list-style-type:disc;
        font-style: italic;
        }
        
    img {
        border: 0;
        -ms-interpolation-mode: bicubic;
        }
    code {
        display: block;
        white-space: pre;
        }    
        
    hgroup {
        padding: 0 0 @em 0;
        line-height: 1;
        }

    blockquote {
        text-align: right;
        font-style: italic;
        }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: "";
        }
    blockquote, q {
        quotes: "" "";
        }
    [hidden] {
        display: none;
        }

        
/*  Headings ------------------------------------------------------------------ 
    
    TYPOGRAPHIC FONT SCALE:
    
    6pt:    nonpareil           ->      0.6 em
    7pt:    minion              ->      0.7 em
    8pt:    brevier             ->      0.8 em
    9pt:    galliard            ->      0.9 em
    10pt:   garamond            ->        1 em / 100%
    11pt:   small pica          ->      1.1 em
    12pt:   pica                ->      1.2 em
    14pt:   augustin            ->      1.4 em
    18pt:   great primer        ->      1.8 em
    21pt:   double pica         ->      2.1 em
    24pt:   two-line pica       ->      2.4 em
    36pt:   double great primer ->      3.6 em
    
                
    1.  Added OO CSS classes to enable consistant and interchangable headings
        These can be used internally via LESS to extend more cleanly 
    2.  Setting margin to zero seems to be more usefull across typograhpic patterns
    
    */

    h1, .h1 {
        margin: 0; 
        font-size:  2.4em; //two-line pica
        font-weight: normal;
        }
    h2, .h2 {
        margin: 0; 
        font-size:  2.1em; //double pica
        font-weight: normal;
        }
    h3, .h3 {
        margin: 0; 
        font-size:  1.8em; //great primer
        font-weight: normal;
        }
    h4, .h4 {
        margin: 0; 
        font-size:  1.4em; //augustin
        font-weight: normal;
        }
    h5, .h5 {
        margin: 0; 
        font-size:  1.2em; //pica
        font-weight: normal;
        }
    h6, .h6 {
        margin: 0; 
        font-size:  1.1em; //small pica
        font-weight: normal;
        }
    
    
/*  tables still need 'cellspacing="0"' in the markup ------------------------- */

    table {
        border-collapse: separate;
        border-spacing: 0;
        }
        
    caption, th, td {
        padding: @h @w;
        text-align: left;
        vertical-align: top;
        line-height: 1.2;
        background: inherit;
        }
    th { font-weight: bold; }
    

/*  links --------------------------------------------------------------------- */

    a[href] { 
        text-decoration: none; 
        color: @link-color;
        background-repeat: no-repeat;
        }
    a[href]:visited  {
        color: @link-color-visited;
        }
    a[href]:hover  { 
        text-decoration:none; 
        color: @link-color-hover;
        outline: 0
        }
    a[href]:active  { 
        text-decoration:none; 
        color: @link-color-active;
        outline: 0
        }
    a:focus {
        outline: thin dotted;
        }
