upgrading CSS framework

Dan Croak
1 parent 55c00dcb
Showing 9 changed files with 281 additions and 190 deletions Show diff stats
README.markdown
public/stylesheets/framework/color.css
public/stylesheets/framework/forms.css
public/stylesheets/framework/grid.css
public/stylesheets/framework/layout.css
public/stylesheets/framework/reset.css
public/stylesheets/framework/spacing.css
public/stylesheets/framework/typography.css
public/stylesheets/screen.css
@@ -20,7 +20,7 @@ This will create a Rails 2.3.2 app with Heroku-recommended code:
 * jQuery for Javascript
 * Clearance for authentication
 * Cucumber, Shoulda, Factory Girl, & Mocha for testing
-* Stylus for CSS framework
+* Evergreen for CSS framework
 * Coulda for features, model, controller, & helper generators
 Get the latest & greatest at anytime with:
+/*
+  We use CSS color names by default for readability.
+  http://www.w3schools.com/css/css_colorsfull.asp
+
+  It is expected the designer(s) will pick a scheme that may include hex colors.
+  http://colors.napcsweb.com/colorschemer
+
+  We prefer off-white & off-black because computer screens
+  have high black/white contrast.
+*/
+
 /* body */
 body {
-  background-color: white; }
+  background-color: snow; }
 /* links */
 a {
-  color: white; }
+  color: midgnightblue; }
 a:visited {
   color: dimgray; }
-a:hover {
-  color: white;
-  background-color: black; }
 /* flash */
 #flash_success {
   background: seagreen; }
 #flash_failure {
-  background: tomato; }
+  color: beige;
+  background: firebrick; }
 /* errors */
@@ -29,7 +38,7 @@ a:hover {
   background-color: snow; }
 #errorExplanation h2 {
   background-color: firebrick;
-  color: white; }
+  color: floralwhite; }
 #errorExplanation p {
   color: darkgray; }
@@ -1,90 +0,0 @@
-/* heavily inspired by Justin French's formtastic styles */
-
-/* fieldsets */
-
-fieldset.inputs, fieldset.buttons {
-  margin: 1em 0; }
-
-/* labels */
-
-label {
-  display: block;
-  font-size: 1.4em; }
-
-/* instruction */
-
-fieldset p.instruction {
-  font-size: 1em; }
-
-/* hidden field */
-
-fieldset div.hidden {
-  display: none; }
-
-/* inputs */
-
-input {
-  vertical-align: middle; }
-
-fieldset div.string,
-fieldset div.numeric,
-fieldset div.password {
-  margin: 0 0 2em 0; }
-
-fieldset div.string input,
-fieldset div.numeric input,
-fieldset div.text textarea {
-  padding: 0.4em; }
-
-fieldset div.password input {
-  font-weight: bold; }
-
-fieldset div.boolean label,
-fieldset div.boolean input {
-  display: inline; }
-
-fieldset div.boolean label {
-  margin: 0 0.5em 0 0.2em; }
-
-/* radio buttons and check boxes */
-
-fieldset div.radios fieldset ol,
-fieldset div.checks fieldset ol, {
-  margin-bottom: -0.6em; }
-fieldset div.radios fieldset ol li,
-fieldset div.checks fieldset ol li, {
-  margin: 0.1em 0 0.5em 0; }
-fieldset div.radios fieldset ol li label,
-fieldset div.checks fieldset ol li label {
-  float: none; }
-fieldset div.radios fieldset ol li label input,
-fieldset div.checks fieldset ol li label input, {
-  margin-right: 0.2em; }
-
-/* dates, times, and datetimes */
-
-fieldset div.date fieldset ol li,
-fieldset div.time fieldset ol li,
-fieldset div.datetime fieldset ol li {
-  float: left;
-  width: auto;
-  margin: 0 .3em 0 0; }
-
-fieldset div.date fieldset ol li label,
-fieldset div.time fieldset ol li label,
-fieldset div.datetime fieldset ol li label {
-  display: none; }
-
-fieldset div.date fieldset ol li label input, 
-fieldset div.time fieldset ol li label input, 
-fieldset div.datetime fieldset ol li label input {
-  display: inline;
-  margin: 0;
-  padding: 0; }
-
-/* buttons */
-
-fieldset.buttons input {
-  font-size: 1.2em;
-  padding: 1em; }
-
@@ -0,0 +1,46 @@
+/*
+  grid
+
+  Every column can be divided into two, three, four and five parts.
+  Idea from http://code.google.com/p/malo
+*/
+
+.main {
+  margin: 0 auto;
+  width: 96em; }
+
+.grid {
+  float: left;
+  display: inline;
+  *margin-left: -0.04em; } /* IE margin hack */
+
+.grid .whole {
+  width: 100%; }
+
+.grid .one_fifth {
+  width: 20% }
+
+.grid .one_fourth {
+  width: 25%; }
+
+.grid .one_third {
+  width: 33.33% }
+
+.grid .two_fifths {
+  width: 40%; }
+
+.grid .one_half {
+  width: 50%; }
+
+.grid .three_fifths {
+  width: 60% }
+
+.grid .two_thirds {
+  width: 66.66%; }
+
+.grid .three_quarters {
+  width: 75%; }
+
+.grid .four_fifths {
+  width: 80%; }
+
@@ -1,39 +0,0 @@
-.clearfix:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden; }
-* html .clearfix {
-  height: 1%; }
-*:first-child+html .clearfix {
-  min-height: 1px; }
-
-.half,
-.quarter,
-.three_quarters {
-  display: inline-block;
-  vertical-align: top; }
-
-.middle {
-  margin: 0 auto; }
-
-.center {
-  text-align: center; }
-
-/* grid 960 { 480 240 120 60 30 15 5 } */
-
-/*.grid_960 */
-.grid_960 .row {
-  width: 96em;
-  margin: 0 auto; }
-
-.grid_960 .half {
-  width: 48em; }
-
-.grid_960 .quarter {
-  width: 24em; }
-
-.grid_960 .three_quarters {
-  width: 72em; }
-
-/* global defaults from http://meyerweb.com/tools/css/reset */
+/* http://meyerweb.com/eric/tools/css/reset */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
@@ -25,7 +25,6 @@ ol, ul {
 blockquote, q {
   quotes: none; }
-
 blockquote:before, blockquote:after,
 q:before, q:after {
   content: '';
@@ -0,0 +1,97 @@
+p {
+  padding: 0.4em 0; }
+
+/* flashes & errors */
+
+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
+  padding: 0.6em; }
+
+/* fieldsets */
+
+fieldset.inputs, fieldset.buttons {
+  margin: 1em 0; }
+
+/* labels */
+
+label {
+  display: block;
+  font-size: 1.4em; }
+
+/* hidden field */
+
+fieldset div.hidden {
+  display: none; }
+
+/* inputs */
+
+input {
+  vertical-align: middle; }
+
+fieldset div.string,
+fieldset div.numeric,
+fieldset div.password,
+fieldset div.text,
+fieldset div.boolean {
+  margin: 0 0 1em 0; }
+
+fieldset div.string label,
+fieldset div.numeric label,
+fieldset div.password label,
+fieldset div.text label {
+  padding: 0.2em 0; }
+
+fieldset div.string input,
+fieldset div.numeric input,
+fieldset div.password input,
+fieldset div.text textarea {
+  padding: 0.4em; }
+
+fieldset div.boolean label {
+  display: inline;
+  margin: 0.2em; }
+
+fieldset div.boolean input {
+  margin: 0;
+  vertical-align: top; }
+
+/* radio buttons and check boxes */
+
+fieldset div.radios fieldset ol,
+fieldset div.checks fieldset ol, {
+  margin-bottom: -0.6em; }
+fieldset div.radios fieldset ol li,
+fieldset div.checks fieldset ol li, {
+  margin: 0.1em 0 0.5em 0; }
+fieldset div.radios fieldset ol li label,
+fieldset div.checks fieldset ol li label {
+  float: none; }
+fieldset div.radios fieldset ol li label input,
+fieldset div.checks fieldset ol li label input, {
+  margin-right: 0.2em; }
+
+/* dates, times, and datetimes */
+
+fieldset div.date fieldset ol li,
+fieldset div.time fieldset ol li,
+fieldset div.datetime fieldset ol li {
+  float: left;
+  width: auto;
+  margin: 0 .3em 0 0; }
+
+fieldset div.date fieldset ol li label,
+fieldset div.time fieldset ol li label,
+fieldset div.datetime fieldset ol li label {
+  display: none; }
+
+fieldset div.date fieldset ol li label input, 
+fieldset div.time fieldset ol li label input, 
+fieldset div.datetime fieldset ol li label input {
+  display: inline;
+  margin: 0;
+  padding: 0; }
+
+/* buttons */
+
+fieldset.buttons input {
+  padding: 1em; }
+
 /*
-  Formula:
-  base line-height / font-size = element line-height
+  scale
-  Example:
-  base line-height: 1.8 (18px)
+  Use the classic typographer's scale:
+  6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72
-  1.8 / 7.2em = .25
+  We use ems for font size.
-  2.1 lineheight
+  Our typographical math is made easier by Richard Rutter's 62.5% trick:
+  http://www.clagnut.com/blog/348/
+
+  16 pixels is 1.6em. 18 pixels is 1.8em. 9 pixels is 0.9em.
+
+  Inheritance slightly complicates the math, but there's a simple formula:
+
+  child pixels / parent pixels = child ems
 */
 body {
-  background-position: top left;
-  font-size: .625em; /* 62.5% of browser default (16px) is 10px */
-  font-family: Lucida Sans, Arial, Helvetica,sans-serif; }
+  font-size: .625em; }
+
+h1 {
+  font-size: 4.8em; }
+
+h2 {
+  font-size: 3.6em; }
+
+h3 {
+  font-size: 2.4em; }
+
+h4 {
+  font-size: 2.1em; }
+
+h5 {
+  font-size: 1.8em; }
+
+h6 {
+  font-size: 1.6em; }
+
+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
+  font-size: 1.6em; }
+
+p, ul, dl, th, td, legend {
+  font-size: 1.4em; }
+
+fieldset.buttons input {
+  font-size: 1.2em; }
+
+fieldset p.instruction {
+  font-size: 1em; }
+
+/* typeface */
+
+body {
+  font-family: Verdana, "Lucida Grande", Lucida, Arial, sans-serif; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Georgia, "Times New Roman", Times, serif; }
+
+pre, code {
+  font-family: Monaco, "DejaVu Sans", Courier, "Courier New", monospace; }
+
+/* weighting */
 h1, h2, h3, h4, h5, h6 {
-  font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: normal; }
-p {
-  font-size: 1.4em;
-  line-height: 1.5;
-  margin: 0 1.5em 1.5em 0; }
+p, ul, li, dl, th, td, legend {
+  font-weight: lighter; }
+
+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
+  font-weight: bold; }
+
+/*
+  leading
+
+  d. The space between lines of type.
+
+  Blocks of text usually need positive leading.
+  Headers usually need less leading.
+
+  Darker faces usually need more lead than lighter ones.
+  Sans serif type usually needs more lead then serif type.
+
+  Leading is set with line-height.
+  line-height can be (and should be) set with a unit-less integer.
+  We use the unit-less integer to ensure line-height scales with text.
+*/
 h1 {
-  font-size: 4.2em;
-  line-height: 1;
-  margin: 0 .5em .5em 0; }
+  line-height: 1.0; }
 h2 {
-  font-size: 3.5em;
-  line-height: 1.2;
-  margin: 0 .6em .6em 0; }
+  line-height: 1.2; }
 h3 {
-  font-size: 2.8em;
-  line-height: .75em;
-  margin: 0 .75em .75em 0 }
+  line-height: 1.4; }
+
+h4 {
+  line-height: 1.6; }
+
+h5 {
+  line-height: 1.6; }
+
+h6, p {
+  line-height: 1.8; }
+
+ul, dl, th, td, legend {
+  line-height: 1.6; }
+
+/* justification */
+
+body {
+  text-align: left; }
+
+/* decoration */
 ul {
-  list-style-type: square;
-  margin: 0 1.5em 1.5em 1em; }
-
-ul,
-dl,
-th,
-td,
-legend {
-  font-size: 1.4em;
-  line-height: 1.5; }
-
-#flash_notice, #flash_success, #flash_failure {
-  letter-spacing: .15em;
-  padding: .5em 0;
-  border-top: 1px dashed;
-  border-bottom: 1px dashed; }
-
-#flash {
-  font-size: 2.4em;
-  width: 100%; }
-
-p, li {
-  font-weight: lighter;
-  font-family: Gotham, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; }
-
-a {
+  list-style-position: outside;
+  list-style-type: square; }
+
+a, a:visited, a:link {
   text-decoration: none; }
 a:hover {
   text-decoration: underline; }
+th {
+  text-transform: uppercase; }
+
+fieldset div.password input {
+  font-weight: bold; }
+
+/*
+  the measure
+
+  d. The length of a single line of text.
+
+  We use ems to set the width of blocks of text.
+  Typically, between 30 and 50 ems is recommended for optimal readibility.
+*/
+
 @import url("framework/reset.css");
 @import url("framework/typography.css");
-@import url("framework/layout.css");
-@import url("framework/forms.css");
 @import url("framework/color.css");
+@import url("framework/grid.css");
+@import url("framework/spacing.css");
	@@ -20,7 +20,7 @@ This will create a Rails 2.3.2 app with Heroku-recommended code:		@@ -20,7 +20,7 @@ This will create a Rails 2.3.2 app with Heroku-recommended code:
20	* jQuery for Javascript	20	* jQuery for Javascript
21	* Clearance for authentication	21	* Clearance for authentication
22	* Cucumber, Shoulda, Factory Girl, & Mocha for testing	22	* Cucumber, Shoulda, Factory Girl, & Mocha for testing
23	-* Stylus for CSS framework	23	+* Evergreen for CSS framework
24	* Coulda for features, model, controller, & helper generators	24	* Coulda for features, model, controller, & helper generators
25		25
26	Get the latest & greatest at anytime with:	26	Get the latest & greatest at anytime with:
	@@ -1,90 +0,0 @@	@@ -1,90 +0,0 @@
1	-/* heavily inspired by Justin French's formtastic styles */
2	-
3	-/* fieldsets */
4	-
5	-fieldset.inputs, fieldset.buttons {
6	- margin: 1em 0; }
7	-
8	-/* labels */
9	-
10	-label {
11	- display: block;
12	- font-size: 1.4em; }
13	-
14	-/* instruction */
15	-
16	-fieldset p.instruction {
17	- font-size: 1em; }
18	-
19	-/* hidden field */
20	-
21	-fieldset div.hidden {
22	- display: none; }
23	-
24	-/* inputs */
25	-
26	-input {
27	- vertical-align: middle; }
28	-
29	-fieldset div.string,
30	-fieldset div.numeric,
31	-fieldset div.password {
32	- margin: 0 0 2em 0; }
33	-
34	-fieldset div.string input,
35	-fieldset div.numeric input,
36	-fieldset div.text textarea {
37	- padding: 0.4em; }
38	-
39	-fieldset div.password input {
40	- font-weight: bold; }
41	-
42	-fieldset div.boolean label,
43	-fieldset div.boolean input {
44	- display: inline; }
45	-
46	-fieldset div.boolean label {
47	- margin: 0 0.5em 0 0.2em; }
48	-
49	-/* radio buttons and check boxes */
50	-
51	-fieldset div.radios fieldset ol,
52	-fieldset div.checks fieldset ol, {
53	- margin-bottom: -0.6em; }
54	-fieldset div.radios fieldset ol li,
55	-fieldset div.checks fieldset ol li, {
56	- margin: 0.1em 0 0.5em 0; }
57	-fieldset div.radios fieldset ol li label,
58	-fieldset div.checks fieldset ol li label {
59	- float: none; }
60	-fieldset div.radios fieldset ol li label input,
61	-fieldset div.checks fieldset ol li label input, {
62	- margin-right: 0.2em; }
63	-
64	-/* dates, times, and datetimes */
65	-
66	-fieldset div.date fieldset ol li,
67	-fieldset div.time fieldset ol li,
68	-fieldset div.datetime fieldset ol li {
69	- float: left;
70	- width: auto;
71	- margin: 0 .3em 0 0; }
72	-
73	-fieldset div.date fieldset ol li label,
74	-fieldset div.time fieldset ol li label,
75	-fieldset div.datetime fieldset ol li label {
76	- display: none; }
77	-
78	-fieldset div.date fieldset ol li label input,
79	-fieldset div.time fieldset ol li label input,
80	-fieldset div.datetime fieldset ol li label input {
81	- display: inline;
82	- margin: 0;
83	- padding: 0; }
84	-
85	-/* buttons */
86	-
87	-fieldset.buttons input {
88	- font-size: 1.2em;
89	- padding: 1em; }
90	-
@@ -0,0 +1,46 @@		@@ -0,0 +1,46 @@
	1	+/*
	2	+ grid
	3	+
	4	+ Every column can be divided into two, three, four and five parts.
	5	+ Idea from http://code.google.com/p/malo
	6	+*/
	7	+
	8	+.main {
	9	+ margin: 0 auto;
	10	+ width: 96em; }
	11	+
	12	+.grid {
	13	+ float: left;
	14	+ display: inline;
	15	+ margin-left: -0.04em; } / IE margin hack */
	16	+
	17	+.grid .whole {
	18	+ width: 100%; }
	19	+
	20	+.grid .one_fifth {
	21	+ width: 20% }
	22	+
	23	+.grid .one_fourth {
	24	+ width: 25%; }
	25	+
	26	+.grid .one_third {
	27	+ width: 33.33% }
	28	+
	29	+.grid .two_fifths {
	30	+ width: 40%; }
	31	+
	32	+.grid .one_half {
	33	+ width: 50%; }
	34	+
	35	+.grid .three_fifths {
	36	+ width: 60% }
	37	+
	38	+.grid .two_thirds {
	39	+ width: 66.66%; }
	40	+
	41	+.grid .three_quarters {
	42	+ width: 75%; }
	43	+
	44	+.grid .four_fifths {
	45	+ width: 80%; }
	46	+
	@@ -1,39 +0,0 @@	@@ -1,39 +0,0 @@
1	-.clearfix:after {
2	- content: ".";
3	- display: block;
4	- height: 0;
5	- clear: both;
6	- visibility: hidden; }
7	-* html .clearfix {
8	- height: 1%; }
9	-*:first-child+html .clearfix {
10	- min-height: 1px; }
11	-
12	-.half,
13	-.quarter,
14	-.three_quarters {
15	- display: inline-block;
16	- vertical-align: top; }
17	-
18	-.middle {
19	- margin: 0 auto; }
20	-
21	-.center {
22	- text-align: center; }
23	-
24	-/* grid 960 { 480 240 120 60 30 15 5 } */
25	-
26	-/.grid_960 /
27	-.grid_960 .row {
28	- width: 96em;
29	- margin: 0 auto; }
30	-
31	-.grid_960 .half {
32	- width: 48em; }
33	-
34	-.grid_960 .quarter {
35	- width: 24em; }
36	-
37	-.grid_960 .three_quarters {
38	- width: 72em; }
39	-
@@ -0,0 +1,97 @@		@@ -0,0 +1,97 @@
	1	+p {
	2	+ padding: 0.4em 0; }
	3	+
	4	+/* flashes & errors */
	5	+
	6	+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
	7	+ padding: 0.6em; }
	8	+
	9	+/* fieldsets */
	10	+
	11	+fieldset.inputs, fieldset.buttons {
	12	+ margin: 1em 0; }
	13	+
	14	+/* labels */
	15	+
	16	+label {
	17	+ display: block;
	18	+ font-size: 1.4em; }
	19	+
	20	+/* hidden field */
	21	+
	22	+fieldset div.hidden {
	23	+ display: none; }
	24	+
	25	+/* inputs */
	26	+
	27	+input {
	28	+ vertical-align: middle; }
	29	+
	30	+fieldset div.string,
	31	+fieldset div.numeric,
	32	+fieldset div.password,
	33	+fieldset div.text,
	34	+fieldset div.boolean {
	35	+ margin: 0 0 1em 0; }
	36	+
	37	+fieldset div.string label,
	38	+fieldset div.numeric label,
	39	+fieldset div.password label,
	40	+fieldset div.text label {
	41	+ padding: 0.2em 0; }
	42	+
	43	+fieldset div.string input,
	44	+fieldset div.numeric input,
	45	+fieldset div.password input,
	46	+fieldset div.text textarea {
	47	+ padding: 0.4em; }
	48	+
	49	+fieldset div.boolean label {
	50	+ display: inline;
	51	+ margin: 0.2em; }
	52	+
	53	+fieldset div.boolean input {
	54	+ margin: 0;
	55	+ vertical-align: top; }
	56	+
	57	+/* radio buttons and check boxes */
	58	+
	59	+fieldset div.radios fieldset ol,
	60	+fieldset div.checks fieldset ol, {
	61	+ margin-bottom: -0.6em; }
	62	+fieldset div.radios fieldset ol li,
	63	+fieldset div.checks fieldset ol li, {
	64	+ margin: 0.1em 0 0.5em 0; }
	65	+fieldset div.radios fieldset ol li label,
	66	+fieldset div.checks fieldset ol li label {
	67	+ float: none; }
	68	+fieldset div.radios fieldset ol li label input,
	69	+fieldset div.checks fieldset ol li label input, {
	70	+ margin-right: 0.2em; }
	71	+
	72	+/* dates, times, and datetimes */
	73	+
	74	+fieldset div.date fieldset ol li,
	75	+fieldset div.time fieldset ol li,
	76	+fieldset div.datetime fieldset ol li {
	77	+ float: left;
	78	+ width: auto;
	79	+ margin: 0 .3em 0 0; }
	80	+
	81	+fieldset div.date fieldset ol li label,
	82	+fieldset div.time fieldset ol li label,
	83	+fieldset div.datetime fieldset ol li label {
	84	+ display: none; }
	85	+
	86	+fieldset div.date fieldset ol li label input,
	87	+fieldset div.time fieldset ol li label input,
	88	+fieldset div.datetime fieldset ol li label input {
	89	+ display: inline;
	90	+ margin: 0;
	91	+ padding: 0; }
	92	+
	93	+/* buttons */
	94	+
	95	+fieldset.buttons input {
	96	+ padding: 1em; }
	97	+
1	/*	1	/*
2	- Formula:
3	- base line-height / font-size = element line-height	2	+ scale
4		3
5	- Example:
6	- base line-height: 1.8 (18px)	4	+ Use the classic typographer's scale:
		5	+ 6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72
7		6
8	- 1.8 / 7.2em = .25	7	+ We use ems for font size.
9		8
10	- 2.1 lineheight	9	+ Our typographical math is made easier by Richard Rutter's 62.5% trick:
		10	+ http://www.clagnut.com/blog/348/
		11	+
		12	+ 16 pixels is 1.6em. 18 pixels is 1.8em. 9 pixels is 0.9em.
		13	+
		14	+ Inheritance slightly complicates the math, but there's a simple formula:
		15	+
		16	+ child pixels / parent pixels = child ems
11	*/	17	*/
12		18
13	body {	19	body {
14	- background-position: top left;
15	- font-size: .625em; /* 62.5% of browser default (16px) is 10px */
16	- font-family: Lucida Sans, Arial, Helvetica,sans-serif; }	20	+ font-size: .625em; }
		21	+
		22	+h1 {
		23	+ font-size: 4.8em; }
		24	+
		25	+h2 {
		26	+ font-size: 3.6em; }
		27	+
		28	+h3 {
		29	+ font-size: 2.4em; }
		30	+
		31	+h4 {
		32	+ font-size: 2.1em; }
		33	+
		34	+h5 {
		35	+ font-size: 1.8em; }
		36	+
		37	+h6 {
		38	+ font-size: 1.6em; }
		39	+
		40	+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
		41	+ font-size: 1.6em; }
		42	+
		43	+p, ul, dl, th, td, legend {
		44	+ font-size: 1.4em; }
		45	+
		46	+fieldset.buttons input {
		47	+ font-size: 1.2em; }
		48	+
		49	+fieldset p.instruction {
		50	+ font-size: 1em; }
		51	+
		52	+/* typeface */
		53	+
		54	+body {
		55	+ font-family: Verdana, "Lucida Grande", Lucida, Arial, sans-serif; }
		56	+
		57	+h1, h2, h3, h4, h5, h6 {
		58	+ font-family: Georgia, "Times New Roman", Times, serif; }
		59	+
		60	+pre, code {
		61	+ font-family: Monaco, "DejaVu Sans", Courier, "Courier New", monospace; }
		62	+
		63	+/* weighting */
17		64
18	h1, h2, h3, h4, h5, h6 {	65	h1, h2, h3, h4, h5, h6 {
19	- font-family: Georgia, "Times New Roman", Times, serif;
20	font-weight: normal; }	66	font-weight: normal; }
21		67
22	-p {
23	- font-size: 1.4em;
24	- line-height: 1.5;
25	- margin: 0 1.5em 1.5em 0; }	68	+p, ul, li, dl, th, td, legend {
		69	+ font-weight: lighter; }
		70	+
		71	+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
		72	+ font-weight: bold; }
		73	+
		74	+/*
		75	+ leading
		76	+
		77	+ d. The space between lines of type.
		78	+
		79	+ Blocks of text usually need positive leading.
		80	+ Headers usually need less leading.
		81	+
		82	+ Darker faces usually need more lead than lighter ones.
		83	+ Sans serif type usually needs more lead then serif type.
		84	+
		85	+ Leading is set with line-height.
		86	+ line-height can be (and should be) set with a unit-less integer.
		87	+ We use the unit-less integer to ensure line-height scales with text.
		88	+*/
26		89
27	h1 {	90	h1 {
28	- font-size: 4.2em;
29	- line-height: 1;
30	- margin: 0 .5em .5em 0; }	91	+ line-height: 1.0; }
31		92
32	h2 {	93	h2 {
33	- font-size: 3.5em;
34	- line-height: 1.2;
35	- margin: 0 .6em .6em 0; }	94	+ line-height: 1.2; }
36		95
37	h3 {	96	h3 {
38	- font-size: 2.8em;
39	- line-height: .75em;
40	- margin: 0 .75em .75em 0 }	97	+ line-height: 1.4; }
		98	+
		99	+h4 {
		100	+ line-height: 1.6; }
		101	+
		102	+h5 {
		103	+ line-height: 1.6; }
		104	+
		105	+h6, p {
		106	+ line-height: 1.8; }
		107	+
		108	+ul, dl, th, td, legend {
		109	+ line-height: 1.6; }
		110	+
		111	+/* justification */
		112	+
		113	+body {
		114	+ text-align: left; }
		115	+
		116	+/* decoration */
41		117
42	ul {	118	ul {
43	- list-style-type: square;
44	- margin: 0 1.5em 1.5em 1em; }
45	-
46	-ul,
47	-dl,
48	-th,
49	-td,
50	-legend {
51	- font-size: 1.4em;
52	- line-height: 1.5; }
53	-
54	-#flash_notice, #flash_success, #flash_failure {
55	- letter-spacing: .15em;
56	- padding: .5em 0;
57	- border-top: 1px dashed;
58	- border-bottom: 1px dashed; }
59	-
60	-#flash {
61	- font-size: 2.4em;
62	- width: 100%; }
63	-
64	-p, li {
65	- font-weight: lighter;
66	- font-family: Gotham, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; }
67	-
68	-a {	119	+ list-style-position: outside;
		120	+ list-style-type: square; }
		121	+
		122	+a, a:visited, a:link {
69	text-decoration: none; }	123	text-decoration: none; }
70		124
71	a:hover {	125	a:hover {
72	text-decoration: underline; }	126	text-decoration: underline; }
73		127
		128	+th {
		129	+ text-transform: uppercase; }
		130	+
		131	+fieldset div.password input {
		132	+ font-weight: bold; }
		133	+
		134	+/*
		135	+ the measure
		136	+
		137	+ d. The length of a single line of text.
		138	+
		139	+ We use ems to set the width of blocks of text.
		140	+ Typically, between 30 and 50 ems is recommended for optimal readibility.
		141	+*/
		142	+
1	@import url("framework/reset.css");	1	@import url("framework/reset.css");
2	@import url("framework/typography.css");	2	@import url("framework/typography.css");
3	-@import url("framework/layout.css");
4	-@import url("framework/forms.css");
5	@import url("framework/color.css");	3	@import url("framework/color.css");
		4	+@import url("framework/grid.css");
		5	+@import url("framework/spacing.css");
6		6