/* * Mainframe CSS framework v 0.1 * Released 14 or April 2009 * Author: Vangelis Bibakis, http://bibakis.com * License: Creative Commons Attribution-Share Alike 3.0 Unported License * License at: http://creativecommons.org/licenses/by-sa/3.0/ * * Uses parts of other open source software: * 960 grid system: http://960.gs/ * YUI Grids CSS: http://developer.yahoo.com/yui/grids/ * * Bugs ? Feature requests ? * My email is at my site on the "About me" page. **/ /* Reset (You shouldn't edit this) */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; line-height: 1.5em; mpe} table {border-collapse: collapse; border-spacing: 0;} fieldset, img {border: 0;} address, caption, cite, code, dfn, em, strong, th, var, optgroup {font-style: inherit; font-weight: inherit;} ins {text-decoration: none;} del {text-decoration: line-through;} li {list-style: none;} caption, th {text-align: left;} q:before, q:after {content: '';} abbr, acronym {border: 0; font-variant: normal;} sup {vertical-align: super; /* to preserve line-height and selector appearance */} sub {vertical-align: sub; /* to preserve line-height and selector appearance */} legend {color: #000; /*because legend doesn't inherit in IE */} input, button, textarea, select, optgroup, option {font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;} input, button, textarea, select {*font-size: 100%; /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */} /* Reseting to the default HTML sizes */ h1, h2, h3, h4, h5, h6, strong {font-weight: bold;} h1 {font-size: 246.1538%;} h2 {font-size: 184.6154%;} h3 {font-size: 143.9746%;} h4 {font-size: 123.0769%;} h5 {font-size: 102.1792%;} h6 {font-size: 82.4361%;} /* Grid (You shouldn't edit this) Mainframe offers 3 types of grids 1) Fixed, 960px width, 12 columns 2) Fixed, 960px width, 16 columns 3) Fluid 100% width (under construction) ----------------------------------------------------------------------------------------------------*/ body {text-align: center;} .fixed12, .fixed16 {width: 960px; margin-left: auto; margin-right: auto; text-align: left;} .fluid {margin: auto 10px; width: auto; text-align: left;} /* `Grid >> Global */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {display: inline; float: left; margin-left: 10px; margin-right: 10px;} .fixed12 .grid_3, .fixed16 .grid_4 {width: 220px;} .fixed12 .grid_6, .fixed16 .grid_8 {width: 460px;} .fixed12 .grid_9, .fixed16 .grid_12 {width: 700px;} .fixed12 .grid_12, .fixed16 .grid_16 {width: 940px;} /* `Grid >> Children (Alpha ~ First, Omega ~ Last) */ .alpha {margin-left: 0;} .omega {margin-right: 0;} /* `Grid >> 12 Columns */ .fixed12 .grid_1 {width: 60px;} .fixed12 .grid_2 {width: 140px;} .fixed12 .grid_4 {width: 300px;} .fixed12 .grid_5 {width: 380px;} .fixed12 .grid_7 {width: 540px;} .fixed12 .grid_8 {width: 620px;} .fixed12 .grid_10 {width: 780px;} .fixed12 .grid_11 {width: 860px;} /* `Grid >> 16 Columns */ .fixed16 .grid_1 {width: 40px;} .fixed16 .grid_2 {width: 100px;} .fixed16 .grid_3 {width: 160px;} .fixed16 .grid_5 {width: 280px;} .fixed16 .grid_6 {width: 340px;} .fixed16 .grid_7 {width: 400px;} .fixed16 .grid_9 {width: 520px;} .fixed16 .grid_10 {width: 580px;} .fixed16 .grid_11 {width: 640px;} .fixed16 .grid_13 {width: 760px;} .fixed16 .grid_14 {width: 820px;} .fixed16 .grid_15 {width: 880px;} /* `Prefix Extra Space >> Global */ .fixed12 .prefix_3, .fixed16 .prefix_4 {padding-left: 240px;} .fixed12 .prefix_6, .fixed16 .prefix_8 {padding-left: 480px;} .fixed12 .prefix_9, .fixed16 .prefix_12 {padding-left: 720px;} /* `Prefix Extra Space >> 12 Columns */ .fixed12 .prefix_1 {padding-left: 80px;} .fixed12 .prefix_2 {padding-left: 160px;} .fixed12 .prefix_4 {padding-left: 320px;} .fixed12 .prefix_5 {padding-left: 400px;} .fixed12 .prefix_7 {padding-left: 560px;} .fixed12 .prefix_8 {padding-left: 640px;} .fixed12 .prefix_10 {padding-left: 800px;} .fixed12 .prefix_11 {padding-left: 880px;} /* `Prefix Extra Space >> 16 Columns */ .fixed16 .prefix_1 {padding-left: 60px;} .fixed16 .prefix_2 {padding-left: 120px;} .fixed16 .prefix_3 {padding-left: 180px;} .fixed16 .prefix_5 {padding-left: 300px;} .fixed16 .prefix_6 {padding-left: 360px;} .fixed16 .prefix_7 {padding-left: 420px;} .fixed16 .prefix_9 {padding-left: 540px;} .fixed16 .prefix_10 {padding-left: 600px;} .fixed16 .prefix_11 {padding-left: 660px;} .fixed16 .prefix_13 {padding-left: 780px;} .fixed16 .prefix_14 {padding-left: 840px;} .fixed16 .prefix_15 {padding-left: 900px;} /* `Suffix Extra Space >> Global */ .fixed12 .suffix_3, .fixed16 .suffix_4 {padding-right: 240px;} .fixed12 .suffix_6, .fixed16 .suffix_8 {padding-right: 480px;} .fixed12 .suffix_9, .fixed16 .suffix_12 {padding-right: 720px;} /* `Suffix Extra Space >> 12 Columns */ .fixed12 .suffix_1 {padding-right: 80px;} .fixed12 .suffix_2 {padding-right: 160px;} .fixed12 .suffix_4 {padding-right: 320px;} .fixed12 .suffix_5 {padding-right: 400px;} .fixed12 .suffix_7 {padding-right: 560px;} .fixed12 .suffix_8 {padding-right: 640px;} .fixed12 .suffix_10 {padding-right: 800px;} .fixed12 .suffix_11 {padding-right: 880px;} /* `Suffix Extra Space >> 16 Columns */ .fixed16 .suffix_1 {padding-right: 60px;} .fixed16 .suffix_2 {padding-right: 120px;} .fixed16 .suffix_3 {padding-right: 180px;} .fixed16 .suffix_5 {padding-right: 300px;} .fixed16 .suffix_6 {padding-right: 360px;} .fixed16 .suffix_7 {padding-right: 420px;} .fixed16 .suffix_9 {padding-right: 540px;} .fixed16 .suffix_10 {padding-right: 600px;} .fixed16 .suffix_11 {padding-right: 660px;} .fixed16 .suffix_13 {padding-right: 780px;} .fixed16 .suffix_14 {padding-right: 840px;} .fixed16 .suffix_15 {padding-right: 900px;} /* Cleaners & Spacers (You shouldn't edit this) ----------------------------------------------------------------------------------------------------*/ /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ .clearfix:after {clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0;} .clearfix {display: inline-block;} * html .clearfix{height: 1%;} .clearfix {display: block;} .clear, .clear10, .clear20, .clear30 .clear40, .clear50, .clear60, .clear70, .clear80, .clear90, .clear100 { clear: both; display: block; overflow: hidden; visibility: hidden; /* http://sonspring.com/journal/clearing-floats */ } /* The purpose of these is to finish a certain part of your layout and at the same time leave some breathing space without using any ugly tricks like
or inline styles. Use any of these instead of .clear */ .clear10 {margin-bottom: 10px;} .clear20 {margin-bottom: 20px;} .clear30 {margin-bottom: 30px;} .clear40 {margin-bottom: 40px;} .clear50 {margin-bottom: 50px;} .clear60 {margin-bottom: 60px;} .clear70 {margin-bottom: 70px;} .clear80 {margin-bottom: 80px;} .clear90 {margin-bottom: 90px;} .clear100 {margin-bottom: 100px;} /* Typography (Feel free to edit bellow this line) ----------------------------------------------------------------------------------------------------*/ body {font:13px/1.231 arial,helvetica,clean,sans-serif; *font-size:small; /* for IE6/7 */ *font:x-small; /* for IE Quirks Mode */} /* Nudge down to get to 13px equivalent for these form elements */ select, input, button, textarea {font:99% inherit; border: 1px solid #aaa;} input, button {padding: 2px;} textarea {padding: 4px;} table {font-size:inherit; font:100%; /* To help tables remember to inherit */} pre, code, kbd, samp, tt {font-family:monospace; *font-size:108%; line-height:100%; /* Bump up IE to get to 13px equivalent for these fixed-width elements */} /* Styling other elements & some frequently used stuff (Feel free to edit bellow this line) ----------------------------------------------------------------------------------------------------*/ hr {border: 0 #aaa solid; border-top-width: 1px; clear: both; height: 0;} fieldset {border: 1px solid #aaa; padding: 10px;} legend {padding: 0 0.5em;} span.error {color: #ff0000; font-weight: bold;} div.error {color: #fff; background-color: #ff0000; border: 1px solid #9F2727; font-weight: bold; padding: 5px;} span.error {color: #ff0000; font-weight: bold;} div.error {color: #fff; background-color: #ff0000; border: 1px solid #9F2727; font-weight: bold; padding: 5px;} span.notification {color: #DBCB28; font-weight: bold;} div.notification {color: #fff; background-color: #DBCB28; border: 1px solid #9F9B27; font-weight: bold; padding: 5px;} span.information {color: #75BA54; font-weight: bold;} div.information {color: #fff; background-color: #75BA54; border: 1px solid #428049; font-weight: bold; padding: 5px;}