* Tabs -> Spaces in guides templates

* Move inline css to a file

3 files changed, 340 insertions, 169 deletions

diff --git a/railties/doc/guides/source/stylesheets/base.css b/railties/doc/guides/source/stylesheets/base.css
index 1cf0a3de98..2bf0b93c40 100644
--- a/railties/doc/guides/source/stylesheets/base.css
+++ b/railties/doc/guides/source/stylesheets/base.css
@@ -6,95 +6,95 @@
     1. General HTML elements
     2. General classes
     3. General structure
-		1. header
-		2. Content
-		3. Sidebar
-    4. Sitewide elements 
-    	1. Introduction boxes
-    	2. Navigation
+    1. header
+    2. Content
+    3. Sidebar
+    4. Sitewide elements
+      1. Introduction boxes
+      2. Navigation
     5. Elements for specific areas
-    	1. Weblog
-		
+      1. Weblog
+
 ---------------------------------------------------------------------------- */
 
 * {
-	margin:                     0;
-	padding:                    0;	
+  margin:                     0;
+  padding:                    0;
 }
 
-body {	
-	color:						#333333;
+body {
+  color:            #333333;
+
+  background-color:           #FFFFFF;
+  background-image:     url(../images/header_backdrop.png);
+  background-repeat:      repeat-x;
+  background-position:    0 -25px;
 
-	background-color:           #FFFFFF;
-	background-image:			url(../images/header_backdrop.png);
-	background-repeat:			repeat-x;
-	background-position:		0 -25px;
+  font-size:          80%;
+  font-family:        verdana, helvetica, arial, sans-serif;
+  line-height:        1.7em;
 
-	font-size:					80%;	
-	font-family:				verdana, helvetica, arial, sans-serif;
-	line-height:				1.7em;
-	
-	/* Center in IE5.5 */
-	text-align:					center;
+  /* Center in IE5.5 */
+  text-align:         center;
 }
 
 h1 {
-	font-size:					2em;
-	font-weight:				normal;
-	letter-spacing:				-0.04em;
+  font-size:          2em;
+  font-weight:        normal;
+  letter-spacing:       -0.04em;
 }
 
 h2 {
-	font-size:					1.5em;
-	font-weight:				normal;
-	letter-spacing:				-0.04em;
+  font-size:          1.5em;
+  font-weight:        normal;
+  letter-spacing:       -0.04em;
 }
 
 h1,h2,h3,h4,h5,h6 {
-  margin-top:					1em;
-  margin-bottom:				0.5em;
+  margin-top:         1em;
+  margin-bottom:        0.5em;
 }
 .pageheader a:link, .pageheader a:visited{
-  color:						#333;
+  color:            #333;
   text-decoration:  none;
 }
 
 img {
-	border:						none;
+  border:           none;
 }
 
 p {
-	margin-bottom:				1em;
+  margin-bottom:        1em;
 }
 
 a:link {
-	color:						#BB2233;
+  color:            #BB2233;
 }
 
 a:visited {
-	color:						#991122;
+  color:            #991122;
 }
 
 a:hover {
-	color:						#CC2233;
-	background-color:			#EEEEEE;
+  color:            #CC2233;
+  background-color:     #EEEEEE;
 }
 
 a:active {
 }
 
 ul {
-	margin-top:					1em;
-	list-style-type:			none;
+  margin-top:         1em;
+  list-style-type:      none;
 }
 
 ul li {
-	margin-left:				0.5em;
-	padding-left:				1em;
-	
-	background-image:			url(../images/bullet.gif);
-	background-repeat:			no-repeat;
-	background-position:		0 0.55em;
+  margin-left:        0.5em;
+  padding-left:       1em;
+
+  background-image:     url(../images/bullet.gif);
+  background-repeat:      no-repeat;
+  background-position:    0 0.55em;
 }
 
 ul li p {
@@ -102,98 +102,98 @@ ul li p {
 }
 
 /* ----------------------------------------------------------------------------
-	Structure
+  Structure
 ---------------------------------------------------------------------------- */
 
 div#container {
-	width:						90%;
-	max-width:					790px;	
+  width:            90%;
+  max-width:          790px;
 
-	margin-top:					10px;
-	margin-left:				auto;
-	margin-right:				auto;
+  margin-top:         10px;
+  margin-left:        auto;
+  margin-right:       auto;
 
-	font-size:					1em;
+  font-size:          1em;
 
-	/* Don't center text, only div#container */
-	text-align:					left;
+  /* Don't center text, only div#container */
+  text-align:         left;
 }
 
 div#header {
-	/* This height controls the vertical position of #content and #sidebar */
-	height:						160px;
-	overflow:					hidden;
+  /* This height controls the vertical position of #content and #sidebar */
+  height:           160px;
+  overflow:         hidden;
 }
 
 div#header h1 {
-	height:						30px;
-		
-	margin:						0;
-	margin-top:				10px;
-	margin-left:			100px;
-	padding:					0;
-	font-weight:      bold;
-	font-size:        24pt;
+  height:           30px;
+
+  margin:           0;
+  margin-top:       10px;
+  margin-left:      100px;
+  padding:          0;
+  font-weight:      bold;
+  font-size:        24pt;
 }
 div#header p {
-  height:						30px;		
-	margin:						0;
-	margin-left:			160px;
-	padding:					0;
-	font-weight:      bold;
-	font-size:        14pt;
-	color:            #999;
+  height:           30px;
+  margin:           0;
+  margin-left:      160px;
+  padding:          0;
+  font-weight:      bold;
+  font-size:        14pt;
+  color:            #999;
 }
 /*
 div#logo {
-	float:						left;
-	width:						110px;
-	height:						140px;
-	margin-right:			31px;
+  float:            left;
+  width:            110px;
+  height:           140px;
+  margin-right:     31px;
 }
 */
 
 
 div#content {
-	margin-left:				170px;
+  margin-left:        170px;
 }
 
 /* Fix the IE only 3pixel jog - documented at http://www.positioniseverything.net/articles/hollyhack.html#haslayout \*/
 * html #content {
-	height: 1px;
+  height: 1px;
 }
 /* End hide from IE5-mac */
 
 div#sidebar {
-	float: 						  left;
-	width: 						  170px;
-	margin-top:					-4px;
-	font-size:					0.8em;
+  float:              left;
+  width:              170px;
+  margin-top:         -4px;
+  font-size:          0.8em;
 }
 
 div#sidebar h2 {
-	margin:						  0;
-	font-size:					1.1em;
-	font-weight:				bold;
+  margin:             0;
+  font-size:          1.1em;
+  font-weight:        bold;
 }
 
 div#sidebar ul {
-	margin-top:					0;
-	margin-bottom:			1em;
-	padding:					  0;
+  margin-top:         0;
+  margin-bottom:      1em;
+  padding:            0;
 }
 
 div#sidebar ol li {
-	margin:						  0 0 2px 0px;
-	padding:					  0;
-	line-height:				1.3em;	
-	background-image:		none;
+  margin:             0 0 2px 0px;
+  padding:            0;
+  line-height:        1.3em;
+  background-image:   none;
 }
 
 div#sidebar ol li a {
-	display:					  block;
-	width:						  150px;
-	padding:					  0.2em 0;
+  display:            block;
+  width:              150px;
+  padding:            0.2em 0;
 }
 
 div#sidebar ul li  {
@@ -203,160 +203,160 @@ div#sidebar ul li  {
 div#sidebar ol>ol  {
   padding-left: 5px;
   padding-right: 5px;
-  list-style-type:			none;
-  
+  list-style-type:      none;
+
 }
 
 div#sidebar ol>ol li a {
-	display:					block;
-	width:						140px;
-	padding:					0.2em 0;
-	margin-left: 10px;
-	
+  display:          block;
+  width:            140px;
+  padding:          0.2em 0;
+  margin-left: 10px;
+
 }
 
 div#sidebar ol li a:hover {
 }
 
 /* ----------------------------------------------------------------------------
-	Specific site-wide elements
+  Specific site-wide elements
 ---------------------------------------------------------------------------- */
 
 /* Introduction boxes */
 
 .introduction {
 
-	margin-bottom:				1em;
-	padding:					1em;
-	background-color:			#D6DFE8;
+  margin-bottom:        1em;
+  padding:          1em;
+  background-color:     #D6DFE8;
 }
 
 .introduction p {
-	margin-bottom:				0;
+  margin-bottom:        0;
 }
 
 /* Navigation */
 
 ul#navMain {
-	height:						22px;
-	margin: 					0;
-	margin-left:      140px;
-	padding: 					16px 0;
+  height:           22px;
+  margin:           0;
+  margin-left:      140px;
+  padding:          16px 0;
 
-	list-style-type:			none;	
+  list-style-type:      none;
 }
 
 ul#navMain li {
-	display:					inline;
-	background-image:			none;	
-	margin:						0;
-	padding:					0;
+  display:          inline;
+  background-image:     none;
+  margin:           0;
+  padding:          0;
 }
 
 ul#navMain li {
-	border-left:				1px solid #FFFFFF;
+  border-left:        1px solid #FFFFFF;
 }
 
 ul#navMain li.first-child {
-	/* Wouldn't it be nice if IE was up-to-date with the rest of the world so we could skip 
-	superfluous classes? */
-	border-left:				none;		
+  /* Wouldn't it be nice if IE was up-to-date with the rest of the world so we could skip
+  superfluous classes? */
+  border-left:        none;
 }
 
-ul#navMain li a {		
-	padding:					0.2em 1em;	
-	
-	color:						#FFFFFF;
-	text-decoration:			none;
+ul#navMain li a {
+  padding:          0.2em 1em;
+
+  color:            #FFFFFF;
+  text-decoration:      none;
 }
 
 ul#navMain li.first-child a {
-	/* Wouldn't it be nice if IE was up-to-date with the rest of the world? */
-	padding-left:				0;
+  /* Wouldn't it be nice if IE was up-to-date with the rest of the world? */
+  padding-left:       0;
 }
 
-ul#navMain li a:hover {	
-	text-decoration:			underline;
-	background-color:			transparent;
+ul#navMain li a:hover {
+  text-decoration:      underline;
+  background-color:     transparent;
 }
 
 /* Mark the current page */
 ul#navMain li.current a {
-	font-weight:				bold;
+  font-weight:        bold;
 }
 
 
 /* ----------------------------------------------------------------------------
-	Elements for specific areas
+  Elements for specific areas
 ---------------------------------------------------------------------------- */
 
 /* Weblog */
 
 .blogEntry {
-	margin-bottom:				2em;
+  margin-bottom:        2em;
 }
 
 .blogEntry h2 {
-	margin-top:					0;
-	margin-bottom:				0;
+  margin-top:         0;
+  margin-bottom:        0;
 }
 
 p.metaData {
-	color:						#999999;
-	font-size:					0.9em;
+  color:            #999999;
+  font-size:          0.9em;
 }
 
 
 /* Reference documentation */
 
 #reference #sidebar {
-	display:					none;
-	width:						0;
+  display:          none;
+  width:            0;
 }
 
 #reference #content {
-	margin-left:				0;
+  margin-left:        0;
 }
 
 #reference #content #api {
-	width:						100%;
-	height:						800px;
+  width:            100%;
+  height:           800px;
 }
 
 #reference #logo {
-	width:						80px;
-	height:						86px;
+  width:            80px;
+  height:           86px;
 
-	margin-right:				0;
+  margin-right:       0;
 }
 
 #reference #logo img {
-	height:						84px;
+  height:           84px;
 }
 
 #reference {
-	/* The header is smaller on the reference page, move the background up so the menu is in the 
-	proper place still */
-	background-position:		0 -70px;
+  /* The header is smaller on the reference page, move the background up so the menu is in the
+  proper place still */
+  background-position:    0 -70px;
 }
 
 #reference #header {
-	height:						90px;
+  height:           90px;
 }
 
 #reference #header h1 {
-	height:						24px;
+  height:           24px;
+
+  margin-top:         2px;
+  margin-left:        0;
+
+  background-image:     none;
 
-	margin-top:					2px;
-	margin-left:				0;
-	
-	background-image:			none;
+  text-indent:        0;
+  font-size:          1.5em;
+  font-weight:        bold;
 
-	text-indent:				0;
-	font-size:					1.5em;
-	font-weight:				bold;
-	
 }
 #reference #container {
-	max-width:					100%;
+  max-width:          100%;
 }
\ No newline at end of file
diff --git a/railties/doc/guides/source/stylesheets/forms.css b/railties/doc/guides/source/stylesheets/forms.css
index a3fce205b7..1da34dc999 100644
--- a/railties/doc/guides/source/stylesheets/forms.css
+++ b/railties/doc/guides/source/stylesheets/forms.css
@@ -1,7 +1,7 @@
 label, input {
-	display:          block;
-	float:            left;
- 	margin-bottom:    10px;
+  display:          block;
+  float:            left;
+  margin-bottom:    10px;
 }
 
 label {
@@ -25,7 +25,7 @@ form>h1{
 }
 
 td {
- vertical-align: top; 
+ vertical-align: top;
 }
 
 #livepreview {
diff --git a/railties/doc/guides/source/stylesheets/more.css b/railties/doc/guides/source/stylesheets/more.css
index 9446b439d4..756ae06d0e 100644
--- a/railties/doc/guides/source/stylesheets/more.css
+++ b/railties/doc/guides/source/stylesheets/more.css
@@ -12,8 +12,8 @@
   border: 1px solid #ccc;
 }
 
-pre { 
-  overflow: auto; 
+pre {
+  overflow: auto;
 }
 
 #content pre, #content ul {
@@ -25,13 +25,13 @@ pre {
 }
 
 div#header h1 a{
-	color: #333333;
-	text-decoration:  none;		
+  color: #333333;
+  text-decoration:  none;
 }
 
 div#header p a{
   text-decoration:  none;
-	color:            #999;
+  color:            #999;
 }
 
 .left-floaty {
@@ -80,3 +80,174 @@ div#header p a{
   font-size: small;
   padding-right: 1em;
 }
+
+div#container {
+  max-width: 900px;
+  padding-bottom: 3em;
+}
+
+div#content {
+  margin-left: 200px;
+}
+
+div#container.notoc {
+  max-width: 600px;
+}
+
+.notoc div#content {
+  margin-left: 0;
+}
+
+pre {
+  line-height: 1.4em;
+}
+
+#content p tt {
+  background: #eeeeee;
+  border: solid 1px #cccccc;
+  padding: 3px;
+}
+
+dt {
+  font-weight: bold;
+}
+
+#content dt tt {
+  font-size: 10pt;
+}
+
+dd {
+  margin-left: 3em;
+}
+
+#content dt tt, #content pre tt {
+  background: none;
+  padding: 0;
+  border: 0;
+}
+
+#content .olist ol {
+  margin-left: 2em;
+}
+
+#header {
+  position: relative;
+  max-width: 840px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#header.notoc {
+  max-width: 580px;
+}
+
+#logo {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 110px;
+  height: 140px;
+}
+
+div#header h1#site_title {
+  background: url('../images/ruby_on_rails_by_mike_rundle2.gif') top left no-repeat;
+  position: absolute;
+  width: 392px;
+  height: 55px;
+  left: 145px;
+  top: 20px;
+  margin: 0;
+  padding: 0;
+}
+
+#site_title span {
+  display: none;
+}
+
+#site_title_tagline {
+  display: none;
+}
+
+ul#navMain {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  top: 97px;
+  left: 145px;
+}
+
+.left-floaty, .right-floaty {
+  padding: 15px;
+}
+
+.admonitionblock,
+.tableblock {
+  margin-left: 1em;
+  margin-right: 1em;
+  margin-top: 0.25em;
+  margin-bottom: 1em;
+}
+
+.admonitionblock .icon {
+  padding-right: 8px;
+}
+
+.admonitionblock .content {
+  border: solid 1px #ffda78;
+  background: #fffebd;
+  padding: 10px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.admonitionblock .title {
+  font-size: 140%;
+  margin-bottom: 0.5em;
+}
+
+.tableblock table {
+  border: solid 1px #aaaaff;
+  background: #f0f0ff;
+}
+
+.tableblock th {
+  background: #e0e0e0;
+}
+
+.tableblock th,
+.tableblock td {
+  padding: 3px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.sidebarblock {
+  margin-top: 0.25em;
+  margin: 1em;
+  border: solid 1px #ccccbb;
+  padding: 8px;
+  background: #ffffe0;
+}
+
+.sidebarblock .sidebar-title {
+  font-size: 140%;
+  font-weight: 600;
+  margin-bottom: 0.3em;
+}
+
+.sidebarblock .sidebar-content > .para:last-child > p {
+  margin-bottom: 0;
+}
+
+.sidebarblock .sidebar-title a {
+  text-decoration: none;
+}
+
+.sidebarblock .sidebar-title a:hover {
+  text-decoration: underline;
+}
+
+
+
+
+