/*@group Reset*/
HTML, BODY, DIV, SPAN, OBJECT, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE, A, ABBR, ACRONYM, ADDRESS, CODE, DEL, DFN, EM, IMG, Q, DL, DT, DD, OL, UL, LI, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD
{
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: Arial;
}
BODY
{
line-height: 1.5;
background: #FFF;
margin: 1.5em 0;
}
/*Tables still need 'cellspacing="0"' in the markup.*/
TABLE
{
border-collapse: separate;
border-spacing: 0;
}
CAPTION, TH, TD
{
text-align: left;
font-weight: 400;
}
/*Remove possible quote marks (") from , .*/
BLOCKQUOTE:before, BLOCKQUOTE:after, Q:before, Q:after
{
content: "";
}
BLOCKQUOTE, Q
{
quotes: "" "";
}
A IMG
{
border: none;
}
/*@end
@group Typography
This is where you set your desired font size. The line-heights
and vertical margins are automatically calculated from this.
The percentage is of 16px (0.75 * 16px = 12px).*/
BODY
{
font-size: 90%;
}
/*Default fonts and colors.
If you prefer serif fonts, remove the font-family
on the headings, and apply this one to the body:
font: 1em Georgia, "lucida bright", "times new roman", serif;*/
BODY
{
color: #000;
font-family: Arial;
}
H1, H2, H3, H4, H5, H6
{
color: #000;
font-family: Arial;
}
/*Headings
--------------------------------------------------------------*/
H1, H2, H3, H4, H5, H6
{
font-weight: normal;
}
H1
{
font-size: 3em;
line-height: 1;
margin-bottom: 0.5em;
}
H2
{
font-size: 2em;
margin-bottom: 0.75em;
}
H3
{
font-size: 1.5em;
line-height: 1;
margin-bottom: 1em;
}
H4
{
font-size: 1.2em;
line-height: 1.25;
margin-bottom: 1.25em;
}
H5
{
font-size: 1em;
font-weight: bold;
margin-bottom: 1.5em;
}
H6
{
font-size: 1em;
font-weight: bold;
}
/*Text elements
--------------------------------------------------------------*/
P
{
margin: 0 0 1.5em;
}
P.last
{
margin-bottom: 0;
}
UL, OL
{
margin: 0 1.5em 1.5em;
}
UL
{
list-style-type: circle;
}
OL
{
list-style-type: decimal;
}
DL
{
margin: 0 0 1.5em;
}
DL DT
{
font-weight: bold;
}
DD
{
margin-left: 1.5em;
}
ABBR, ACRONYM
{
border-bottom: 1px dotted #666;
}
ADDRESS
{
margin-top: 1.5em;
font-style: italic;
}
DEL
{
color: #666;
}
A:focus, A:hover
{
color: #000;
}
BLOCKQUOTE
{
margin: 1.5em;
color: #666;
font-style: italic;
}
STRONG
{
font-weight: bold;
}
EM, DFN
{
font-style: italic;
}
DFN
{
font-weight: bold;
}
PRE, CODE
{
margin: 1.5em 0;
white-space: pre;
}
PRE, CODE, TT
{
font: 1em "andale mono", "monotype.com", "lucida console", monospace;
line-height: 1.5;
}
TT
{
display: block;
margin: 1.5em 0;
line-height: 1.5;
}
/*Tables
--------------------------------------------------------------*/
TABLE
{
margin-bottom: 1.4em;
}
/*Some default classes
--------------------------------------------------------------*/
.small
{
font-size: 0.8em;
margin-bottom: 1.875em;
line-height: 1.875em;
}
.large
{
font-size: 1.2em;
line-height: 2.5em;
margin-bottom: 1.25em;
}
.quiet
{
color: #666;
}
.hide
{
display: none;
}
.highlight
{
background: #FF0;
}
.added
{
color: #060;
}
.removed
{
color: #900;
}
.top
{
margin-top: 0;
padding-top: 0;
}
.bottom
{
margin-bottom: 0;
padding-bottom: 0;
}
/*@end
@group Grid - 24 Columns
--------------------------------------------------------------
If you need fewer or more columns, use this
formula to find the new total width:
Total width = (columns * 40) - 10
--------------------------------------------------------------
A container should group all your columns.*/
.container
{
width: 950px;
margin: 0 auto;
}
/*Columns
--------------------------------------------------------------
Use this class together with the .span-x classes
to create any composition of columns in a layout.*/
.column
{
float: left;
margin-right: 10px;
}
/*The last column in a row needs this class.*/
.last
{
margin-right: 0;
}
/*Use these classes to set the width of a column.*/
.span-1
{
width: 30px;
}
.span-2
{
width: 70px;
}
.span-3
{
width: 110px;
}
.span-4
{
width: 150px;
}
.span-5
{
width: 190px;
}
.span-6
{
width: 230px;
}
.span-7
{
width: 270px;
}
.span-8
{
width: 310px;
}
.span-9
{
width: 350px;
}
.span-10
{
width: 390px;
}
.span-11
{
width: 430px;
}
.span-12
{
width: 470px;
}
.span-13
{
width: 510px;
}
.span-14
{
width: 550px;
}
.span-15
{
width: 590px;
}
.span-16
{
width: 630px;
}
.span-17
{
width: 670px;
}
.span-18
{
width: 710px;
}
.span-19
{
width: 750px;
}
.span-20
{
width: 790px;
}
.span-21
{
width: 830px;
}
.span-22
{
width: 870px;
}
.span-23
{
width: 910px;
}
.span-24
{
width: 950px;
margin: 0;
}
/*Add these to a column to append empty cols.*/
.append-1
{
padding-right: 40px;
}
.append-2
{
padding-right: 80px;
}
.append-3
{
padding-right: 120px;
}
.append-4
{
padding-right: 160px;
}
.append-5
{
padding-right: 200px;
}
.append-6
{
padding-right: 240px;
}
.append-7
{
padding-right: 280px;
}
.append-8
{
padding-right: 320px;
}
.append-9
{
padding-right: 360px;
}
.append-10
{
padding-right: 400px;
}
.append-11
{
padding-right: 440px;
}
.append-12
{
padding-right: 480px;
}
.append-13
{
padding-right: 520px;
}
.append-14
{
padding-right: 560px;
}
.append-15
{
padding-right: 600px;
}
.append-16
{
padding-right: 640px;
}
.append-17
{
padding-right: 680px;
}
.append-18
{
padding-right: 720px;
}
.append-19
{
padding-right: 760px;
}
.append-20
{
padding-right: 800px;
}
.append-21
{
padding-right: 840px;
}
.append-22
{
padding-right: 880px;
}
.append-23
{
padding-right: 920px;
}
/*Add these to a column to prepend empty cols.*/
.prepend-1
{
padding-left: 40px;
}
.prepend-2
{
padding-left: 80px;
}
.prepend-3
{
padding-left: 120px;
}
.prepend-4
{
padding-left: 160px;
}
.prepend-5
{
padding-left: 200px;
}
.prepend-6
{
padding-left: 240px;
}
.prepend-7
{
padding-left: 280px;
}
.prepend-8
{
padding-left: 320px;
}
.prepend-9
{
padding-left: 360px;
}
.prepend-10
{
padding-left: 400px;
}
.prepend-11
{
padding-left: 440px;
}
.prepend-12
{
padding-left: 480px;
}
.prepend-13
{
padding-left: 520px;
}
.prepend-14
{
padding-left: 560px;
}
.prepend-15
{
padding-left: 600px;
}
.prepend-16
{
padding-left: 640px;
}
.prepend-17
{
padding-left: 680px;
}
.prepend-18
{
padding-left: 720px;
}
.prepend-19
{
padding-left: 760px;
}
.prepend-20
{
padding-left: 800px;
}
.prepend-21
{
padding-left: 840px;
}
.prepend-22
{
padding-left: 880px;
}
.prepend-23
{
padding-left: 920px;
}
/*Border on right hand side of a column.*/
.border
{
padding-right: 4px;
margin-right: 5px;
border-right: 1px solid #EEE;
}
/*Border with more whitespace, spans one column.*/
.colborder
{
padding-right: 24px;
margin-right: 25px;
border-right: 1px solid #EEE;
}
/*Use these classes on an element to push it into the
next column, or to pull it into the previous column.*/
.pull-1
{
margin-left: -40px;
}
.pull-2
{
margin-left: -80px;
}
.pull-3
{
margin-left: -120px;
}
.pull-4
{
margin-left: -160px;
}
.push-0
{
margin: 0 0 0 18px;
}
.push-1
{
margin: 0 -40px 0 18px;
}
.push-2
{
margin: 0 -80px 0 18px;
}
.push-3
{
margin: 0 -120px 0 18px;
}
.push-4
{
margin: 0 -160px 0 18px;
}
.push-0, .push-1, .push-2, .push-3, .push-4
{
float: right;
}
/*Misc classes and elements
--------------------------------------------------------------
Use a .box to create a padded box inside a column.*/
.box
{
padding: 1.5em;
margin-bottom: 1.5em;
background: #EEE;
}
HR
{
background: #DDD;
color: #DDD;
clear: both;
float: none;
width: 100%;
height: 0.1em;
margin: 1.4em 0;
border: none;
}
HR.space
{
background: #FFF;
color: #FFF;
}
/*Clearing floats without extra markup*/
.clear
{
display: inline-block;
}
.clear:after, .container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* HTML .clear
{
height: 1%;
}
.clear
{
display: block;
}
/*@end
@group IE6*/
* HTML BODY
{
text-align: center;
}
* HTML .container
{
text-align: left;
}
* HTML .column
{
overflow-x: hidden;
}
* HTML .pull-1, * HTML .pull-2, * HTML .pull-3, * HTML .pull-4, * HTML .push-1, * HTML .push-2, * HTML .push-3, * HTML .push-4, * HTML UL, * HTML OL
{
position: relative;
}
* HTML LEGEND
{
margin-bottom: 1.4em;
}
* HTML OL
{
margin-left: 2em;
}
/*@end*/