// ------------------------------------------------
//                 LESS Spec
//                 www.lesscss.org
// ------------------------------------------------

// Global vars
@main-color: #444;
@dark-color: #111;
@between-color: @main-color - @dark-color;

// Mixins
.theme {
    color: #ccc;
    background-color: #aaa;
}
.extra {
    @main: #888;
    .dark-borders {
        border-color: .extra > @main / 2;    
    }
    .light-borders {
        border-color: .extra > @main;
    }
}

// Namespaces
.borders {
    @thick: 4px;
    @thin: 2px;    
}

// Hierarchy
.root {
    a { 
        color: blue;
        display: none;
    }
    a:hover, a:focus {
        color: orange;
    }
    .first {
        @size: 8px;
        @dark-color: green;
        @main-color: red;
        color: @dark-color; // 'green'
        .second {
            @color: blue;
            .third {
                background-color: @color; // blue
                font-size: @size; // 8px
                color: @main-color; // red
                border-color: .root > .first > .second > @color; // 'blue'
            }
        }
    }    
}
.root:hover a {
    display: block;
}

// Standard CSS properties and shorthand
body {
    font-size: 10px;
    font-family: "Lucida Grande", 'Helvetica', Verdana, sans-serif;
    margin: -5px 0 5px 10px;
    border: solid 1px #000;
    text-shadow: #333 -1px 1px 2px;
    -moz-border-radius: 3px; /* CSS3 for older Firefox */
    .theme;
    .extra > .light-borders;
}

// Operations
.operations {
    @ten: 10;
    @dark: #111;
    @box: 100px; 
    @border_width: 10px;
    font: 12px/16px; // 12px/16px
    width: @box + @border_width; // 110px
    div { width: @box - 2 * @border_width; } // 80px
    border-width: .borders > @thick * 5 - 4px; // 16px
    font-size: 10 - 4 + 6 * @ten; // 66
    line-height: @ten - .operations > @ten + .root > .first > @size - 1; // 7px
    color: #fff - #111; // #eeeeee
    colorb: #111 + #222222; // #333333
    colorc: @dark + #222 * 3; // #777777 
}

td, tr, table {
    border-width: .borders > @thick;   
}

// More complex CSS selectors
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
a:link, 
a:hover {
  color:brown;
}
div > a, a span {
  color: grey;
}
ul li:first-child {
    border-top: none;
}
ul li:first-child, ul li:last-child {
    background-color: #333;
}
.p:first-letter { 
    color: red; 
}
:focus {
    outline: 0;
    content: "*}#f~ ";
}
q:lang(no) { 
    quotes: "~" "~"; 
}
blockquote:before {
  color: red;
}

// Duplicates
div {
  width: 9px;
}
div { 
  color: purple;
}
.duplicate {
  width: 9px;
  height: 11px;
}
.duplicate {
  width: 11px;
  color: blue;
}

/*input[type="text"] { 
    background-color: blue; 
}*/
.transparent_box {
    background-color:#FFF;
    filter:alpha(opacity=60); /* for IE */
    opacity:0.6; /* CSS3 standard */
}

// Spacing
.space    
{    color:  purple ;font-color:yellow;   }

// No semi-column
.no-semi-column { color: orange }