Team:EPF Lausanne/template/toast.css

From 2013.igem.org

/*-----------------------------------*\

Toast A Simple CSS Framework =================================

Values you may want to change: - .container { max-width:; } - p { margin-bottom:; } - html { font:; }

Remember: no framework will be as good as a custom built, per- project one. Toast and other frameworks are best used for rapid prototyping.

\*-----------------------------------*/

/*-----------------------------------*\ $RESET \*-----------------------------------*/

.grid > * { margin: 0; padding: 0; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*-----------------------------------*\ $GRID \*-----------------------------------*/

.container { /* Whatever you want. They’re your oats. */ max-width: 960px; margin: 0 auto; padding: 0 30px; padding: 0 1.5rem; }

.grid { margin-left: -3%; max-width: 105%; }

.unit { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; margin-left: 3%; margin-right: -.25em; /* Clearfix */ overflow: hidden; *overflow: visible; }

.unit.demo { background-color: #fff8eb; height: 48px; height: 3rem; margin-bottom: 24px; margin-bottom: 1.5rem; }

.span-grid { width: 97%; }

.one-of-two { width: 47%; }

.one-of-three { width: 30.36%; } .two-of-three { width: 63.666666666%; }

.one-of-four { width: 22.05%; } .three-of-four { width: 72%; }

.one-of-five { width: 17.07%; } .two-of-five { width: 37%; } .three-of-five { width: 57%; } .four-of-five { width: 77%; }

@media screen and (max-width: 650px) { .grid { margin-left: 0; max-width: none; }

.unit { width: auto; margin-left: 0; display: block; } }