#####    ###     ##  ### ########              ###     ##  ###    ###TM
   #######  #######   ####### ########            #######   #######  #######
  ###      ###   ###  ###         ###            ###   ###  ###     ###   ##
  ###      ###   ###  ##       ###               ###   ###  ##      ###   ##
   #######  #######   ##      ########    ###     #######   ##       #######
     #####    ###     ##      ########    ###       ###     ##           ###
                                                                      #####

    CSS Snippets..

    /inc/css/snippets/

    These are just like @@modules@@, except they are generally used for small
    chunks of CSS that go *inside* CSS declarations{}. This is most useful for
    vendor-specific CSS and other code you don't want to have to repeat over and
    over.

    In the future, when vendors agree on what is and isn't such-and-such and so
    on, we only need to change a single file, and all @@semi-opaque@@,
    @@rotate-right@@, et al sections get the new code dynamically. It also makes
    writing these long declarations trivial, so you are more likely to use
    groovy effects like semi-opacity, which not only look cool, but improve
    usability and accessability.

    Unlike regular @@modules@@ these chunks of CSS can be imported again and
    again, as many times as you like in a single sheet. The CSS Init treats
    anything in the "snippets" folder this way.

    It also makes sense to split this sort of code into a separate location, for
    ease of finding, editing, etc. Simply add the location into your module
    paths preference.

    Mine looks something like this..

        $css_modules_paths = array();
        $css_modules_paths[] = $root.'/css/modules';
        $css_modules_paths[] = $root.'/css/snippets';
        $css_modules_paths[] = $root.'/blog/inc/themes/modules';

    For example, we might have a snippet called "semi-opaque.css" that contains..

        filter: alpha(opacity=50);
        -khtml-opacity: 0.5;
        -moz-opacity: 0.5;
        opacity: 0.5;

    In our style sheet we can do..

        .up-arrow {
        @@semi-opaque@@
        }

        .up-arrow:hover {
        @@opaque@@
        }

    You can guess the contents of "opaque.css"!

    Note: Snippets are usually placed hard left, to prevent irregular tabs in
    un-minified CSS, though in reality, almost no one would see that.

    Note: Snippets *cannot* contain modules or other snippets. They are the end
    of the modularization line. However, snippets can contain %%tokens%%.*

    En-Joy!!

    ;o)


    * Ideally, we would code our semi-opaque snippet as a generic declaration
    with %%tokens%% for values, and send those values directly from inside the
    style sheet, something like @@semi-opaque(o=67)@@. Guess what? YOU CAN! 

    See the readme in the modules directory for the easy-dozy details.

    (c) 2003->tomorrow!  cor + corz.org ;o)