litejs/ui/app.css

/**
 * Categorizing CSS Rules
 * ----------------------
 *
 *  1. Base rules are almost exclusively single element selectors.
 *  2. Layout rules divide the page into sections.
 *     Layouts hold one or more modules together.
 *  3. Modules are the reusable, modular parts of our design.
 *     They are the callouts, the sidebar sections, the product lists and so on.
 *  4. State rules are ways to describe how our modules or layouts will look when in a particular state.
 *     Is it hidden or expanded? Is it active or inactive?
 *     They are about describing how a module or layout looks on screens that are smaller or bigger.
 *     They are also about describing how a module might look in different views like the home page or the inside page.
 *  5. Theme rules are similar to state rules in that they describe how modules or layouts might look.
 *     Most sites don’t require a layer of theming but it is good to be aware of it.
 * Theme rules describe how modules or layouts might look.
 * Without theme site must work but look more like a wireframe.
 *
 * @see http://smacss.com/book/categorizing
 */

@import url("../css/base.css");             /* 1 */
@import url("../css/grid.css");             /* 3 */
@import url("../css/grid-golden.css");      /* 3 */
@import url("../css/spacing-4.css");        /* 3 */
@import url("../css/media.css");            /* 3 */
@import url("css/layout.css");           /* 2 */
@import url("css/state.css");            /* 4 */
@import url("css/theme/blue.css");       /* 5 */

/*** ie7
.ie7 {}
/**/

/*
@font-face {
	font-family: '<font-family>';
	src: url('<font-file>.eot?#iefix') format('embedded-opentype');
	src: local('<font-family>'), url('<font-file>.ttf') format('truetype'), url('<font-file>.woff') format('woff'), url('<font-file>') format('svg');
}
@font-face {
	font-family: '<font-family>';
	src: url('<font-file>.ttf') format('truetype'), url('<font-file>.woff') format('woff'), url('<font-file>') format('svg');
}

@font-face {
	font-family: "Bitstream Vera Serif Bold";
	src: url("/files/2468/VeraSeBd.ttf");
}

left-pitch-right
forward-roll-back
up-yaw-down
*/

.fromLeft    { animation: .5s ease both fromLeft;    }
.fromRight   { animation: .5s ease both fromRight;   }
.fromUp      { animation: .5s ease both fromUp;      }
.fromDown    { animation: .5s ease both fromDown;    }
.fromBack    { animation: .5s ease both fromBack;    }
.fromForward { animation: .5s ease both fromForward; }

.toLeft      { pointer-events: none; animation: .3s ease both toLeft;    }
.toRight     { pointer-events: none; animation: .3s ease both toRight;   }
.toUp        { pointer-events: none; animation: .3s ease both toUp;      }
.toDown      { pointer-events: none; animation: .3s ease both toDown;    }
.toBack      { pointer-events: none; animation: .3s ease both toBack;    }
.toForward   { pointer-events: none; animation: .3s ease both toForward; }

@keyframes fromLeft    { from { transform: translateX(-100%); } }
@keyframes toLeft      { to   { transform: translateX(-100%); opacity: 0; } }
@keyframes fromRight   { from { transform: translateX(100%); } }
@keyframes toRight     { to   { transform: translateX(100%); opacity: 0; } }
@keyframes fromUp      { from { transform: translateY(-100%); } }
@keyframes toUp        { to   { transform: translateY(-100%); opacity: 0; } }
@keyframes fromDown    { from { transform: translateY(100%); } }
@keyframes toDown      { to   { transform: translateY(100%); opacity: 0; } }
@keyframes fromBack    { from { transform: scale(.4); opacity: 0; } }
@keyframes toBack      { to   { transform: scale(.4); opacity: 0; } }
@keyframes fromForward { from { transform: scale(2); opacity: 0; } }
@keyframes toForward   { to   { transform: scale(2); opacity: 0; } }