Skip to content
This repository
Browse code

ENHANCEMENT Installer styling, moving away from blackcandy

  • Loading branch information...
commit 4f23ac1722f7b2d9a23c02492353ca524c39b784 1 parent 6f76d42
Paul authored April 11, 2012 stojg committed April 11, 2012
87  dev/install/config-form.html
... ...
@@ -1,36 +1,42 @@
1 1
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2  
-<html>
  2
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  3
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
  4
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
  5
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
3 6
 	<head>
4 7
 		<title>SilverStripe CMS / Framework Installation</title>
5 8
 		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
6 9
 		<script type="text/javascript" src="sapphire/thirdparty/jquery/jquery.js"></script>
7 10
 		<script type="text/javascript" src="sapphire/dev/install/install.js"></script>
8  
-		<link rel="stylesheet" type="text/css" href="themes/blackcandy/css/layout.css">
9  
-		<link rel="stylesheet" type="text/css" href="themes/blackcandy/css/typography.css">
10  
-		<link rel="stylesheet" type="text/css" href="themes/blackcandy/css/form.css">
11  
-		<link rel="stylesheet" type="text/css" href="sapphire/dev/install/install.css">
  11
+		<link rel="stylesheet" type="text/css" href="sapphire/dev/install/css/install.css">
12 12
 		<link rel="shortcut icon" href="favicon.ico">
13 13
 	</head>
14 14
 	<body>
15 15
 		<div id="BgContainer">
16 16
 			<div id="Container">
17 17
 				<div id="Header">
18  
-					<h1>SilverStripe CMS / Framework Installation</h1>
19  
-					<p>Version <?php echo $silverstripe_version; ?></p>
  18
+					<h1>SilverStripe</h1>
  19
+					<div class="left">
  20
+						<h2>CMS / Framework Installation <small>Version <?php echo $silverstripe_version; ?></small></h2>
  21
+						<p>Thanks for choosing to use SilverStripe! Please follow the instructions below and you should be up in running in no time.<br>
  22
+								If you get stuck, head over to the <a href="http://silverstripe.org/installing-silverstripe" target="_blank">installation forum</a>, or check out our list of <a href="http://doc.silverstripe.org/doku.php?id=suggested-web-hosts" target="_blank">suggested web hosts</a> known to work with SilverStripe.
  23
+						</p>
  24
+					</div>
20 25
 				</div>
21  
-				
22 26
 				<div id="Navigation">&nbsp;</div>
23 27
 				<div class="clear"><!-- --></div>
24 28
 				
25 29
 				<div id="Layout">
26 30
 					<div class="typography">
27  
-						<p>Thanks for choosing to use SilverStripe! Please follow the instructions below and you should be up in running in no time.<br>
28  
-							If you get stuck, head over to the <a href="http://silverstripe.org/installing-silverstripe" target="_blank">installation forum</a>, or check out our <a href="http://doc.silverstripe.org/doku.php?id=suggested-web-hosts" target="_blank">list of suggested web hosts</a> known to work with SilverStripe.
  31
+						<!--
  32
+<p>Thanks for choosing to use SilverStripe! Please follow the instructions below and you should be up in running in no time.<br>
  33
+							If you get stuck, head over to the <a href="http://silverstripe.org/installing-silverstripe" target="_blank">installation forum</a>, or check out our list of <a href="http://doc.silverstripe.org/doku.php?id=suggested-web-hosts" target="_blank">suggested web hosts</a> known to work with SilverStripe.
29 34
 						</p>
  35
+-->
30 36
 			
31 37
 						<form action="install.php" method="post">
32 38
 							<?php if(isset($hasErrorOtherThanDatabase)) { ?>
33  
-								<p class="error">
  39
+								<p class="message error">
34 40
 									You aren't currently able to install the software.  Please <a href="#requirements">see below</a> for details.<br>
35 41
 									If you are having problems meeting the requirements, see the <a href="http://doc.silverstripe.org/doku.php?id=server-requirements">server requirements wiki page</a>.
36 42
 								</p>
@@ -39,47 +45,46 @@
39 45
 								<?php } ?>
40 46
 							<?php } else { ?>
41 47
 								<?php if($alreadyInstalled) { ?>
42  
-									<div class="warning">
  48
+									<div class="message warning">
43 49
 										<p><strong>Note:</strong> SilverStripe is already installed here.<br>
44 50
 										If you wish to reinstall SilverStripe, please delete the <strong>mysite/_config.php</strong> file first.</p>
45 51
 									</div>
46 52
 								<?php } else if($req->hasWarnings()) { ?>
47  
-									<p class="warning">
48  
-										There are some issues that we recommend you look at before installing, however, you are still able to install the software.
49  
-										Please see below for details.<br>
50  
-										If you are having problems meeting the requirements, see the <a href="http://doc.silverstripe.org/doku.php?id=server-requirements">server requirements wiki page</a>.
51  
-									</p>
  53
+									<div class="message warning">
  54
+										<p>There are some issues that we recommend you look at before installing, however, you are still able to install the software. Please see below for details.<br>
  55
+										If you are having problems meeting the requirements, see the <a href="http://doc.silverstripe.org/doku.php?id=server-requirements">server requirements wiki page</a>.</p>
  56
+									</div>
52 57
 								<?php } else if(!$dbReq->hasErrors() && !$adminReq->hasErrors()) { ?>
53  
-									<p class="goodInstall"><em class="inlineBarText">You're ready to install! Please confirm the configuration options below.</em> <a href="#install">Install SilverStripe</a></p>
  58
+									<div class="message goodInstall"><p>You're ready to install! Please confirm the configuration options below. <a href="#install">Install SilverStripe</a></p>
  59
+									</div>
54 60
 								<?php } ?>
55 61
 								
56 62
 								<?php if($dbReq->hasErrors()) { ?>
57  
-									<p class="error">
58  
-										The database details don't appear to be correct.  Please <a href="#database_credentials">review and correct</a> before installing.
59  
-									</p>
  63
+									<div class="message error">
  64
+										<p>The database details don't appear to be correct. Please <a href="#database_credentials">review and correct</a> before installing.</p>
  65
+									</div>
60 66
 								<?php } ?>
61 67
 								
62 68
 								<?php if($adminReq->hasErrors()) { ?>
63  
-									<p class="error">
64  
-										Please <a href="#AdminAccount">enter an email address and password</a> for the default administrator account before installing.
65  
-									</p>
  69
+									<div class="message error">
  70
+										<p>Please <a href="#AdminAccount">enter an email address and password</a> for the default administrator account before installing.</p>
  71
+									</div>
66 72
 								<?php } ?>
67 73
 							<?php } ?>
68 74
 							
69  
-							
70  
-							<h4 id="requirements"><em class="inlineBarText">Requirements</em> <span>Step: 1 of 5</span></h4>
  75
+							<h3 class="sectionHeading" id="requirements">Requirements <small>Step 1 of 5</small></h3>
71 76
 							<?php $req->showTable(); ?>
72 77
 							<?php $dbReq->showTable(); ?>
73 78
 							
74  
-							<p>
  79
+							<p class="helpText requirementsHelpText">
75 80
 								Read more about our <a href="http://doc.silverstripe.org/doku.php?id=server-requirements" target="_blank">server requirements</a>.
76 81
 							</p>
77 82
 							
78 83
 							<div class="action">
79 84
 								<input type="submit" class="action" value="Re-check requirements">
80 85
 							</div>
81  
-							
82  
-							<h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2 of 5</span></h4>
  86
+							<div class="clear"><!-- --></div>
  87
+							<h3 class="sectionHeading">Database Configuration <small>Step 2 of 5</small></h3>
83 88
 							<div id="database_credentials" class="section">
84 89
 								
85 90
 								<?php $dbReq->showTable("Database Configuration"); ?>
@@ -126,7 +131,7 @@ <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2
126 131
 												echo "<input id=\"$class\" class=\"databaseClass\" type=\"radio\" name=\"db[type]\" value=\"$class\"$checked $disabled>";
127 132
 												echo "<label class=\"left\" ".($help || $disabled ? 'style="font-weight:normal;color:grey" ' : 'style="color:green"')."for=\"$class\">{$details['title']}</label>";
128 133
 												if ($help) {
129  
-													echo '<div class="error databaseError">'.$help.'</div>';
  134
+													echo '<div class="message error databaseError"><p>'.$help.'</p></div>';
130 135
 												}
131 136
 
132 137
 												// generate db-specific config fields
@@ -193,7 +198,7 @@ <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2
193 198
 							
194 199
 							<div class="clear"><!-- --></div>
195 200
 							
196  
-							<h4><em class="inlineBarText">CMS Admin Account</em> <span>Step: 3 of 5</span></h4>
  201
+							<h3 class="sectionHeading">CMS Admin Account <small>Step 3 of 5</small></h3>
197 202
 						
198 203
 							<div id="AdminAccount" class="section">
199 204
 								
@@ -220,8 +225,8 @@ <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2
220 225
 										"Default language" determines the default locale settings
221 226
 										(for dates, currencies, etc.), as well as the default language
222 227
 										of the CMS interface. This can be changed for each user.
223  
-										<br><br>
224  
-										Warning: The CMS interface may be missing translations in certain locales.
  228
+										<br>
  229
+										<strong>Warning:</strong> The CMS interface may be missing translations in certain locales.
225 230
 									</p>
226 231
 									
227 232
 									<div class="field">
@@ -238,19 +243,17 @@ <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2
238 243
 											</select> 
239 244
 										</span>
240 245
 									</div>
  246
+									<div class="clear"><!-- --></div>
241 247
 								</div>
242 248
 							</div>
243 249
 							
244  
-							<h4><em class="inlineBarText">Theme</em> <span>Step: 4 of 5</span></h4>
  250
+							<h3 class="sectionHeading">Theme selection <small>Step 4 of 5</small></h3>
245 251
 							<p class="helpText">You can change the theme or <a href="http://silverstripe.org/themes">download</a> another from the SilverStripe website after installation.</p>
246  
-							<div class="field">
247  
-								<ul id="Themes">
248  
-									<li><input type="radio" name="template" value="blackcandy" id="BlackCandy" <?php if(!isset($_POST['template']) || $_POST['template'] == 'blackcandy') {?>checked="checked"<?php }?>><label for="BlackCandy"><a href="http://silverstripe.org/blackcandy/">BlackCandy</a> - our default theme ready to use.</label></li>
249  
-									<li><input type="radio" name="template" value="tutorial" id="EmptyTemplate" <?php if(isset($_POST['template']) && $_POST['template'] == 'tutorial') {?>checked="checked"<?php }?>><label for="EmptyTemplate">Empty template - ready to begin the <a href="http://doc.silverstripe.org/doku.php?id=tutorials" target="_blank">tutorial</a>.</label></li>
250  
-								</ul>
251  
-							</div>
252  
-							
253  
-							<h4 id="install"><em class="inlineBarText">Confirm Install</em> <span>Step: 5 of 5</span></h4>
  252
+							<ul id="Themes">
  253
+								<li><input type="radio" name="template" value="blackcandy" id="BlackCandy" <?php if(!isset($_POST['template']) || $_POST['template'] == 'blackcandy') {?>checked="checked"<?php }?>><label for="BlackCandy"><a href="http://silverstripe.org/blackcandy/">BlackCandy</a> - our default theme ready to use.</label></li>
  254
+								<li><input type="radio" name="template" value="tutorial" id="EmptyTemplate" <?php if(isset($_POST['template']) && $_POST['template'] == 'tutorial') {?>checked="checked"<?php }?>><label for="EmptyTemplate">Empty template - ready to begin the <a href="http://doc.silverstripe.org/doku.php?id=tutorials" target="_blank">tutorial</a>.</label></li>
  255
+							</ul>
  256
+							<h3 class="sectionHeading" id="install">Confirm Install <small>Step 5 of 5</small></h3>
254 257
 							
255 258
 							<?php if(isset($hasErrorOtherThanDatabase)) { ?>
256 259
 								<p class="error">
15  dev/install/config.rb
... ...
@@ -0,0 +1,15 @@
  1
+# Require any additional compass plugins here.
  2
+require 'compass-colors'
  3
+
  4
+project_type = :stand_alone
  5
+# Set this to the root of your project when deployed:
  6
+http_path = "/"
  7
+css_dir = "css"
  8
+sass_dir = "scss"
  9
+images_dir = "images"
  10
+javascripts_dir = "javascript"
  11
+output_style = :compact
  12
+# To enable relative paths to assets via compass helper functions. Uncomment:
  13
+# relative_assets = true
  14
+
  15
+asset_cache_buster = :none
101  dev/install/css/install.css
... ...
@@ -0,0 +1,101 @@
  1
+body { font-family: Arial, san-serif; font-size: 13px; line-height: 18px; margin-bottom: 18px; color: #333; width: 940px; margin: 0 auto 18px; /* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */ background-color: #f4f4f4; /* Typography */ /* Helpers */ /* Messages */ /* Custom styles */ }
  2
+body p { font-size: 13px; line-height: 18px; margin-bottom: 18px; color: #333; }
  3
+body a { color: #0973a6; }
  4
+body h1, body h2, body h3, body h4, body h5, body h6 { color: #222; font-family: inherit; font-weight: bold; margin: 0; margin: 27px 0 9px; text-rendering: optimizelegibility; clear: both; text-shadow: 0 1px 0 #fff; }
  5
+body h1 small, body h2 small, body h3 small, body h4 small, body h5 small, body h6 small { font-weight: normal; font-size: 12px; color: #666; }
  6
+body h1 { font-size: 36px; line-height: 36px; letter-spacing: -0.5px; }
  7
+body h1 { background: transparent url(../../../admin/images/logo.gif) no-repeat left top; text-indent: -9999px; height: 164px; width: 161px; float: left; padding-right: 40px; border-right: 1px solid #b1c0c5; margin-right: 40px; }
  8
+body h2 { font-size: 34px; line-height: 36px; letter-spacing: -0.5px; }
  9
+body h3 { font-size: 18px; line-height: 27px; }
  10
+body h4 { font-size: 14px; line-height: 18px; margin: 18px 0 9px; }
  11
+body h5 { font-size: 12px; line-height: 18px; margin: 18px 0 0; }
  12
+body .clear { clear: both; }
  13
+body .left { float: left; }
  14
+body .message { padding: 2px 18px; margin-bottom: 18px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
  15
+body .message p { margin: 11px 0 13px; }
  16
+.lt-ie8 body .message p { /* margin-top: 7px; */ /* margin-bottom: 10px; */ }
  17
+body .message.warning { background-color: #fcf8f2; border: 1px #ffc28b solid; }
  18
+body .message.error { background-color: #fdf1f3; border: 1px solid #f8c3cd; }
  19
+body .message ul { margin-left: 18px; margin-top: -9px; }
  20
+body .helpText { float: right; width: 425px; padding-left: 20px; color: #666; margin-top: 0; background: transparent url(../../../admin/images/question.png) no-repeat left 1px; }
  21
+body .helpText.requirementsHelpText { margin-top: 17px; }
  22
+body .typography table { margin: 9px 0 27px; border-collapse: collapse; width: 100%; }
  23
+body .typography table thead tr td, body .typography table thead tr th { font-weight: bold; vertical-align: bottom; padding: 12px; }
  24
+body .typography table th, body .typography table td { padding: 8px 12px; text-align: left; }
  25
+body .typography table td { vertical-align: top; border-top: none; background-color: #fff; }
  26
+body .typography table th + th, body .typography table td + td, body .typography table th + td { /* border-left: 1px solid #ddd; */ }
  27
+body .typography table tbody tr:nth-child(odd) td, body .typography table tbody tr:nth-child(odd) th { background-color: #fcfcfc; }
  28
+body .typography table tbody tr:hover td, body .typography table tbody tr:hover th { background-color: #f6f6f6; }
  29
+body .typography table tfoot { font-style: italic; color: #888; }
  30
+body .typography input, body .typography textarea, body .typography select { width: 420px; margin-bottom: 9px; color: #707070; border: 1px solid #ddd; display: inline-block; height: 18px; padding: 4px 6px; line-height: 18px; font-size: 13px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
  31
+body .typography input, body .typography textarea { -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); }
  32
+body .typography input:focus, body .typography textarea:focus { outline: 0; border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 4px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 4px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 4px rgba(82, 168, 236, 0.6); }
  33
+body .typography input[type=file]:focus, body .typography input[type=checkbox]:focus, body .typography select:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: 1px dotted #666; }
  34
+body .typography select { height: 26px; }
  35
+body .typography option { line-height: 27px; font-size: 12px; padding: 2px 6px; color: #666; }
  36
+body .typography label { width: auto; float: none; padding-top: 0; margin: 0 0 5px 0; text-align: left; display: block; }
  37
+body .typography .fields { float: left; }
  38
+body .typography input.action { text-align: center; font-weight: bold; margin: 9px 0 27px; padding: 6px 8px; width: 200px; width: auto; color: #222; border: 1px solid #aaa; text-shadow: 0 1px 0 #eee; font-size: 13px; float: none; height: auto; background: #fbfbfb; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* IE10+ */ background: linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; background-color: #ddd; }
  39
+.lt-ie9 body .typography input.action { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ }
  40
+body .typography input.action:hover { -webkit-box-shadow: 0 1px 2px 0 #cccccc; -moz-box-shadow: 0 1px 2px 0 #cccccc; box-shadow: 0 1px 2px 0 #cccccc; background: #fbfbfb; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* IE10+ */ background: linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
  41
+.lt-ie9 body .typography input.action:hover { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ }
  42
+body .typography input.action:focus, body .typography input.action:active { -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; background: #fbfbfb; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* IE10+ */ background: linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
  43
+.lt-ie9 body .typography input.action:focus, .lt-ie9 body .typography input.action:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ }
  44
+body .typography input.action:hover, body .typography input.action:focus { cursor: pointer; }
  45
+body .typography input[type="checkbox"], body .typography input[type="radio"] { border: medium none; height: auto; line-height: normal; padding: 0; width: auto; margin-right: 6px; float: left; margin-top: 3px; }
  46
+body .typography #install_button { font-size: 20px; color: #fff; border-color: #78A127 #78A127 #59781D; text-shadow: 0 1px 1px #4D7326; padding: 8px 14px; background-color: green; background: #80bf40; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #80bf40 0%, #59862d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80bf40), color-stop(100%, #59862d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #80bf40 0%, #59862d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #80bf40 0%, #59862d 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #80bf40 0%, #59862d 100%); /* IE10+ */ background: linear-gradient(top, #80bf40 0%, #59862d 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; }
  47
+.lt-ie9 body .typography #install_button { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80bf40', endColorstr='#59862d',GradientType=0 ); /* IE6-9 */ }
  48
+body .typography #install_button:hover { -webkit-box-shadow: 0 1px 3px 0 #bbbbbb; -moz-box-shadow: 0 1px 3px 0 #bbbbbb; box-shadow: 0 1px 3px 0 #bbbbbb; }
  49
+body .typography #install_button:focus, body .typography #install_button:active { -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; background: #80bf40; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #80bf40 0%, #59862d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80bf40), color-stop(100%, #59862d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #80bf40 0%, #59862d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #80bf40 0%, #59862d 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #80bf40 0%, #59862d 100%); /* IE10+ */ background: linear-gradient(top, #80bf40 0%, #59862d 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
  50
+.lt-ie9 body .typography #install_button:focus, .lt-ie9 body .typography #install_button:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80bf40', endColorstr='#59862d',GradientType=0 ); /* IE6-9 */ }
  51
+body .typography #install_button[disabled=disabled] { border: 1px solid #aaa; border-color: #bbb #bbb #aaa; color: #222; text-shadow: 0 1px 0 #eee; background: #fbfbfb; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* IE10+ */ background: linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
  52
+.lt-ie9 body .typography #install_button[disabled=disabled] { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ }
  53
+body .typography #install_button[disabled=disabled]:hover { -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; }
  54
+body #Container { margin-bottom: 40px; }
  55
+body #Container h3.sectionHeading { padding-top: 27px; border-top: 1px solid #b1c0c5; clear: both; }
  56
+body #Container #Header { margin-bottom: 30px; height: 200px; }
  57
+body #Container #Header div.left { width: 698px; margin-top: 47px; }
  58
+body #Container #Navigation { display: none; }
  59
+body h5.requirement { padding: 12px 18px; font-size: 14px; border: 1px solid #798c93; border-top: 1px solid #8d9da3; margin: 0; color: #fff; position: relative; text-shadow: 0 -1px 0 #71858c; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; background-color: #eee; background: #b1c0c5; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* IE10+ */ background: linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
  60
+.lt-ie9 body h5.requirement { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b1c0c5', endColorstr='#7f9198',GradientType=0 ); /* IE6-9 */ }
  61
+body h5.requirement span { font-weight: normal; font-size: 12px; padding: 3px 6px; margin-left: 5px; text-shadow: none; background-color: #fafbfb; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -webkit-box-shadow: 0 0 2px 0 #7f9198; -moz-box-shadow: 0 0 2px 0 #7f9198; box-shadow: 0 0 2px 0 #7f9198; }
  62
+body h5.requirement.good span { color: #359318; }
  63
+body h5.requirement.warning span { color: #e07127; }
  64
+body h5.requirement.error span { color: #c61414; }
  65
+body h5.requirement a { font-size: 11px; right: 9px; position: absolute; line-height: 19px; margin: 0 0 0 30px; color: #fff; text-decoration: none; font-weight: normal; padding-right: 21px; background: transparent url(../../../admin/images/arrows.png) no-repeat right top; }
  66
+body h5.requirement a:hover { background: transparent url(../../../admin/images/arrows.png) no-repeat right -40px; }
  67
+body table.testResults { border-top: none; margin-top: -1px; margin-bottom: 9px; -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; overflow: hidden; }
  68
+body table.testResults tr.good { display: none; border: none; }
  69
+body table.testResults tr.good td { color: #359318; }
  70
+body table.testResults tr.warning { border: none; }
  71
+body table.testResults tr.warning td { color: #e07127; }
  72
+body table.testResults tr.error { border: none; color: #c61414; }
  73
+body table.testResults td { border: 1px solid #ddd; width: 50%; }
  74
+body #database_selection, body #Themes { list-style: none; margin: 0; margin-bottom: 18px; padding-left: 0; }
  75
+body #database_selection li, body #Themes li { clear: left; padding: 3px 0; }
  76
+body #database_selection li .dbfields, body #Themes li .dbfields { padding: 12px; border: 1px solid #ddd; background-color: #fafafa; margin-bottom: 9px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; -webkit-box-shadow: inset 0 0 3px 0 #dddddd; -moz-box-shadow: inset 0 0 3px 0 #dddddd; box-shadow: inset 0 0 3px 0 #dddddd; -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; }
  77
+body ul#Themes { float: left; width: 445px; }
  78
+body .databaseError { width: 422px; }
  79
+body #Footer { margin-top: 67px; margin-bottom: 18px; }
  80
+body #Footer p { font-size: 12px; color: #999; }
  81
+
  82
+body #Header h1 { margin-top: 45px; margin-bottom: 27px; }
  83
+body #Header h3 { margin-top: -10px; }
  84
+
  85
+.lt-ie8 #database_credentials, .lt-ie8 #AdminAccount { float: left; }
  86
+
  87
+/* styles not tested */
  88
+#adminAcc, #devHelp, #localeHelp { padding-top: 20px; }
  89
+
  90
+#devHelp, #devSection { height: 18em; }
  91
+
  92
+#use_environment_field { margin-bottom: 25px; background-color: #FAFAFA; border: 1px solid #DDDDDD; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 0 white; margin-bottom: 9px; padding: 10px 10px 8px; }
  93
+#use_environment_field input { float: left; margin-right: 5px; }
  94
+
  95
+.databaseError ul { margin-bottom: 0; }
  96
+.databaseError ul, .databaseError li { margin-left: 0; padding-left: 0; }
  97
+
  98
+#Layout p.goodInstall { color: #359318; }
  99
+
  100
+.goodInstall { padding: 0.5em; background-color: #e2fee1; border: 1px #43cb3e solid; color: #359318; overflow: hidden; line-height: 18px; padding: 10px; }
  101
+.goodInstall a { float: right; font-size: 18px; padding: 0 2px 2px 0; font-weight: bold; }
302  dev/install/install.css
... ...
@@ -1,302 +0,0 @@
1  
-body {
2  
-	text-align: center;
3  
-}
4  
-
5  
-#Container .typography p {
6  
-	margin-left: 0;
7  
-	margin-right: 0;
8  
-}
9  
-
10  
-#Container * {
11  
-	text-align: left;
12  
-}
13  
-
14  
-#Header p {
15  
-	margin-left: 30px;
16  
-}
17  
-
18  
-ul#Themes{
19  
-	list-style: none;
20  
-	margin: 0 5px 20px 5px;
21  
-	float: left;
22  
-	width: 320px;
23  
-}
24  
-	ul#Themes li {
25  
-		clear: both;
26  
-		padding: 3px 0;
27  
-		margin-left: 0;
28  
-		padding-left: 0;
29  
-	}
30  
-	ul#Themes input {
31  
-		float: left;
32  
-		margin-right: 5px;
33  
-	}
34  
-	ul#Themes label {
35  
-		margin: -2px 5px 0 15px;
36  
-	}
37  
-
38  
-h4.sectionHeading {
39  
-	margin-top: 20px;
40  
-}
41  
-
42  
-.error {
43  
-	padding: 0.5em;
44  
-	background-color: #fdf5f5;
45  
-	border: 1px #ff8e8e solid;
46  
-	color: #f03838;
47  
-}
48  
-	#Container p.error { color: #f03838;}
49  
-.warning {
50  
-	padding: 0.5em;
51  
-	background-color: #fcf8f2;
52  
-	border: 1px #ffc28b solid;
53  
-	color: #cb6a1c;
54  
-}
55  
-	.warning label {
56  
-		display: inline;
57  
-		margin-left: 5px;
58  
-		color: #cb6a1c
59  
-	}
60  
-	.warning p {
61  
-		font-size: 12px;
62  
-		margin-bottom: 0;
63  
-	}
64  
-	.warning .warning_actions {
65  
-		margin: 5px 0 5px 0;
66  
-	}
67  
-.good {
68  
-	padding: 0.5em;
69  
-	background-color: #e2fee1;
70  
-	border: 1px #43cb3e solid;
71  
-	color: #359318;
72  
-}
73  
-.error a,
74  
-.warning a,
75  
-.good a {
76  
-	color: inherit;
77  
-	text-decoration: underline;
78  
-}
79  
-p.error a:hover {
80  
-	text-decoration: none;
81  
-}
82  
-span.middleColumn {
83  
-	width: 297px;
84  
-	margin-right: 0;
85  
-	margin-top: 5px;
86  
-	padding: 4px;
87  
-}
88  
-input.text, textarea, select {
89  
-	padding: 2px;
90  
-	border: 1px solid #A7A7A7;
91  
-	color: #000;
92  
-	font-size: 1.2em;
93  
-	font-weight: bold;
94  
-	width: 290px;
95  
-}
96  
-#stats-container label {
97  
-	display: inline;
98  
-}
99  
-#stats {
100  
-	margin-right: 5px;
101  
-}
102  
-table.testResults {
103  
-	border-collapse: collapse;
104  
-	width: 100%;
105  
-	margin: 10px 0;
106  
-}
107  
-#Layout h4 {
108  
-	font-size: 2em;
109  
-	margin: 36px 0 18px 0;
110  
-	font-weight: bold;
111  
-	line-height: 1.8;
112  
-	clear: left;
113  
-	border-top: 2px solid #888;
114  
-	text-indent: 5px;
115  
-	width: 100%;
116  
-	overflow: hidden;
117  
-}
118  
-	#Layout h4 span {
119  
-		float: right;
120  
-		font-size: 10px;
121  
-		padding: 10px 10px 0 0;
122  
-		font-weight: normal;
123  
-		color: #888;
124  
-	}
125  
-
126  
-/**
127  
- * Requirements and test results
128  
- * ------------------------------------------------ */
129  
-table.testResults {
130  
-	margin-top: 0;
131  
-}
132  
-	table.testResults td {
133  
-		border: 1px #CCC solid;
134  
-		width: 400px;
135  
-		line-height: 15px;
136  
-		padding: 6px;
137  
-	}
138  
-		table.testResults tr.good {
139  
-			display: none;
140  
-			border: none;
141  
-		}
142  
-			table.testResults tr.good td {
143  
-				color: green;
144  
-			}
145  
-
146  
-			table.testResults tr.warning {
147  
-				border: none;
148  
-			}
149  
-				table.testResults tr.warning td {
150  
-					color: #ef7f24;
151  
-				}
152  
-			table.testResults tr.error {
153  
-				border: none;
154  
-			}
155  
-					table.testResult tr.error {
156  
-						color: red;
157  
-					}
158  
-
159  
-h5.requirement {
160  
-	padding: 10px;
161  
-	background: #f1f1f1;
162  
-	border: 1px solid #ccc;
163  
-	border-width: 0 1px 1px 1px;
164  
-	margin: 0;
165  
-	overflow: hidden;
166  
-}	
167  
-	h5.requirement span {
168  
-		float: right;
169  
-	}
170  
-		h5.requirement.good {
171  
-			color: #359318;
172  
-		}
173  
-		h5.requirement.warning {
174  
-			color: #cb6a1c;
175  
-		}
176  
-		h5.requirement.error {
177  
-			color: #F03838;
178  
-		}
179  
-	h5.requirement a {
180  
-		font-size: 10px;
181  
-		float: right;
182  
-		line-height: 19px;
183  
-		margin: 0 0 0 30px;
184  
-		color: #666;
185  
-		text-decoration: none;
186  
-		font-weight: normal;
187  
-	}
188  
-.clear {
189  
-	clear: both;
190  
-}
191  
-#adminAcc,
192  
-#devHelp,
193  
-#localeHelp {
194  
-	padding-top: 20px;
195  
-}
196  
-
197  
-.typography label {
198  
-	margin-bottom: 0;
199  
-}
200  
-
201  
-#Layout .helpText {
202  
-	float: right;
203  
-	width: 370px;
204  
-	padding-right: 10px;
205  
-}
206  
-
207  
-.section {
208  
-	overflow: hidden;
209  
-}
210  
-
211  
-.fields {
212  
-	float: left;
213  
-	width: 330px;
214  
-}
215  
-
216  
-#devHelp,
217  
-#devSection {
218  
-	height: 18em;
219  
-}
220  
-
221  
-#Layout input.action {
222  
-	text-align: center;
223  
-	font-size: 13px;
224  
-	width: 220px;
225  
-	font-weight: bold;
226  
-	margin: 5px 0;
227  
-}
228  
-
229  
-#use_environment_field {
230  
-	margin-bottom: 25px;
231  
-}
232  
-
233  
-#use_environment_field input {
234  
-	float: left;
235  
-	margin-right: 5px;
236  
-}
237  
-
238  
-.dbfields {
239  
-	margin: 10px;
240  
-}
241  
-
242  
-#database_credentials {
243  
-	margin: 0;
244  
-	line-height: 1;
245  
-}
246  
-
247  
-#database_selection {
248  
-	overflow: hidden;
249  
-	margin: 0;
250  
-}
251  
-	#database_selection li {
252  
-		margin-left: 0;
253  
-		padding-left: 0;
254  
-	}
255  
-		#database_selection li input {
256  
-			margin-right: 5px;
257  
-		}
258  
-		#database_selection li label {
259  
-			display: inline;
260  
-		}
261  
-
262  
-.databaseError {
263  
-	clear:both;
264  
-	overflow: hidden;
265  
-	width: 290px;
266  
-	line-height: 1.2;
267  
-	margin: 10px;
268  
-	margin-bottom: 0;
269  
-	display: none;
270  
-}
271  
-
272  
-	.databaseError ul {
273  
-		margin-bottom: 0;
274  
-	}
275  
-	.databaseError ul, .databaseError li {
276  
-		margin-left: 0;
277  
-		padding-left: 0;
278  
-	}
279  
-
280  
-.goodInstall {
281  
-	padding: 0.5em;
282  
-	background-color: #e2fee1;
283  
-	border: 1px #43cb3e solid;
284  
-	color: #359318;
285  
-	overflow: hidden;
286  
-	line-height: 18px;
287  
-	padding: 10px;
288  
-}
289  
-	#Layout p.goodInstall {
290  
-		color: #359318;
291  
-	}
292  
-	.goodInstall a {
293  
-		float: right;
294  
-		font-size: 18px;
295  
-		padding: 0 2px 2px 0;
296  
-		font-weight: bold;
297  
-	}
298  
-	
299  
-em.inlineBarText {
300  
-	float: left;
301  
-	font-style: normal;
302  
-}
2  dev/install/install.js
@@ -45,7 +45,7 @@ $(document).ready(function() {
45 45
 		if($(this).text() == 'Hide All Requirements') {
46 46
 			// hide the shown requirements
47 47
 			$(this).parents('h5').next('table.testResults').find('.good').hide();
48  
-			$(this).text('See All Requirements');
  48
+			$(this).text('Show All Requirements');
49 49
 		}
50 50
 		else {
51 51
 			// show the requirements.
2  dev/install/install.php5
@@ -525,7 +525,7 @@ class InstallRequirements {
525 525
 					$text = "All Requirements Pass but ". $warningRequirements . ' '. $pluralWarnings;
526 526
 				}
527 527
 
528  
-				echo "<h5 class='requirement $className'><em class='inlineBarText'>$section</em> <a href='#'>See All Requirements</a> <span>$text</span></h5>";
  528
+				echo "<h5 class='requirement $className'>$section <a href='#'>Show All Requirements</a> <span>$text</span></h5>";
529 529
 				echo "<table class=\"testResults\">";
530 530
 				echo $output;
531 531
 				echo "</table>";
32  dev/install/php5-required.html
... ...
@@ -1,38 +1,36 @@
1 1
 <html>
2 2
 	<head>
3  
-		<title>PHP 5 is required</title>
4  
-		<link rel="stylesheet" type="text/css" href="themes/blackcandy/css/layout.css" />
5  
-		<link rel="stylesheet" type="text/css" href="themes/blackcandy/css/typography.css" />
6  
-		<link rel="stylesheet" type="text/css" href="themes/blackcandy/css/form.css" />
7  
-		<link rel="stylesheet" type="text/css" href="sapphire/dev/install/install.css" />
  3
+		<title>PHP 5.3 is required</title>
  4
+		<link rel="stylesheet" type="text/css" href="sapphire/dev/install/css/install.css">
8 5
 	</head>
9 6
 	<body>
10 7
 		<div id="BgContainer">
11 8
 			<div id="Container">
12 9
 				<div id="Header">
13  
-					<h1>SilverStripe CMS Installation</h1>
  10
+					<h1>PHP 5.3 required</h1>
  11
+					<div class="left">
  12
+						<h3>To run SilverStripe, please install PHP 5.3 or greater.</h3>
  13
+
  14
+						<p>We have detected that you are running PHP version <b>$PHPVersion</b>.  In order to run SilverStripe,
  15
+						you must have PHP version 5.3 or greater, and for best results we recommend PHP 5.3.8 or greater.<p/>
  16
+
  17
+						<p>If you are running on a shared host, you may need to ask your hosting provider how to do this.</p>
  18
+					</div>
14 19
 				</div>
15  
-				
  20
+
16 21
 				<div id="Navigation">&nbsp;</div>
17 22
 				<div class="clear"><!-- --></div>
18  
-				
  23
+
19 24
 				<div id="Layout">
20 25
 					<div class="typography">
21  
-						<h1>PHP 5 required</h1>
22  
-						<h2>To run SilverStripe, please install PHP 5.3 or greater.</h2>
23  
-		
24  
-						<p>We have detected that you are running PHP version <b>$PHPVersion</b>.  In order to run SilverStripe, 
25  
-						you must have PHP version 5.3 or greater.</p>
26  
-
27  
-						<p>If you are running on a shared host, you may need to ask your hosting provider how to do this.</p>
28 26
 					</div>
29 27
 				</div>
30 28
 				<div class="clear"><!-- --></div>
31 29
 			</div>
32  
-			
  30
+
33 31
 			<div id="Footer">
34 32
 				<div class="footerTop"><!-- --></div>
35  
-				<p><a href="http://silverstripe.org">SilverStripe Open Source CMS</a> | Copyright &copy; 2008 SilverStripe Limited</p>
  33
+				<p><a href="http://silverstripe.org">SilverStripe Open Source CMS</a> | Copyright &copy; 2012 SilverStripe Limited</p>
36 34
 			</div>
37 35
 		</div>
38 36
 	</body>
571  dev/install/scss/install.scss
... ...
@@ -0,0 +1,571 @@
  1
+//Color Variables
  2
+$message:			#BDBD00; 		// blue
  3
+$good:				#359318; 		// green
  4
+
  5
+$warning:			#E07127; 		// orange
  6
+$warningBg:			#fcf8f2;
  7
+$warningBorder:		#ffc28b;
  8
+
  9
+$error:				#C61414 /* #E21607 */; 		// red
  10
+$errorBg:			#FDF1F3;
  11
+$errorBorder:		#F8C3CD;
  12
+
  13
+$link:				#0973A6;
  14
+$gradientTop:		#B1C0C5;
  15
+$gradientBottom:	#7F9198;
  16
+
  17
+//Mixin to create a gradient from top to bottom
  18
+@mixin topGradient($topColor, $bottomColor){
  19
+	background: $topColor; /* Old browszzzzzers */
  20
+	background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); /* FF3.6+ */
  21
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$topColor), color-stop(100%,$bottomColor)); /* Chrome,Safari4+ */
  22
+	background: -webkit-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Chrome10+,Safari5.1+ */
  23
+	background: -o-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Opera11.10+ */
  24
+	background: -ms-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* IE10+ */     
  25
+	background: linear-gradient(top, $topColor 0%,$bottomColor 100%); /* W3C */
  26
+	.lt-ie9 &{
  27
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); /* IE6-9 */
  28
+	}
  29
+	$experimental-support-for-svg: true;
  30
+	/* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */
  31
+}
  32
+
  33
+//Mixin to create rounded corners. Takes a value for each of the 4 corners
  34
+@mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft){
  35
+	-moz-border-radius-topleft: $topLeft;
  36
+	-moz-border-radius-topright: $topRight;
  37
+	-moz-border-radius-bottomright: $bottomRight;
  38
+	-moz-border-radius-bottomleft: $bottomLeft;
  39
+	-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
  40
+	border-radius: $topLeft $topRight $bottomRight $bottomLeft;
  41
+}
  42
+
  43
+//Mixin to create a regular box shadow
  44
+@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color){
  45
+	-webkit-box-shadow: $horizontal $vertical $blur $spread $color;
  46
+	-moz-box-shadow: $horizontal $vertical $blur $spread $color;
  47
+	box-shadow: $horizontal $vertical $blur $spread $color;
  48
+}
  49
+
  50
+// Drop shadows
  51
+@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.15)) {
  52
+  -webkit-box-shadow: $shadow;
  53
+     -moz-box-shadow: $shadow;
  54
+          box-shadow: $shadow;
  55
+
  56
+}
  57
+
  58
+//Mixin to create an inset box shadow
  59
+@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color){
  60
+	-webkit-box-shadow: inset $horizontal $vertical $blur $spread $color;
  61
+	-moz-box-shadow: inset $horizontal $vertical $blur $spread $color;
  62
+	box-shadow: inset $horizontal $vertical $blur $spread $color;
  63
+}
  64
+
  65
+// Transitions
  66
+@mixin transition($transition) {
  67
+  -webkit-transition: $transition;
  68
+     -moz-transition: $transition;
  69
+      -ms-transition: $transition;
  70
+       -o-transition: $transition;
  71
+          transition: $transition;
  72
+}
  73
+
  74
+
  75
+body {
  76
+	font-family: Arial, san-serif;
  77
+	font-size: 13px;
  78
+	line-height: 18px;
  79
+	margin-bottom: 18px;
  80
+	color: #333;
  81
+	width: 940px;
  82
+	margin: 0 auto 18px;
  83
+	/* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */
  84
+	background-color: #f4f4f4;
  85
+	
  86
+	/* Typography */
  87
+	p {
  88
+		font-size: 13px;
  89
+		line-height: 18px;
  90
+		margin-bottom: 18px;
  91
+		color: #333;
  92
+	}
  93
+	a {
  94
+		color: $link;
  95
+	}
  96
+	h1, h2, h3, h4, h5, h6 {
  97
+	    color: #222;
  98
+	    font-family: inherit;
  99
+	    font-weight: bold;
  100
+	    margin: 0;
  101
+	    margin: 27px 0 9px;
  102
+	    text-rendering: optimizelegibility;
  103
+	    clear: both;
  104
+	    text-shadow: 0 1px 0 #fff;
  105
+	    small {
  106
+	    	font-weight: normal;
  107
+	    	font-size: 12px;
  108
+	    	color: #666;
  109
+	    }
  110
+	}
  111
+	h1 {
  112
+		font-size: 36px;
  113
+		line-height: 36px;
  114
+		letter-spacing: -0.5px;
  115
+	}
  116
+	h1 {
  117
+		background: transparent url(../../../admin/images/logo.gif) no-repeat left top;
  118
+		text-indent: -9999px;
  119
+		height: 164px;
  120
+		width: 161px;
  121
+		float: left;
  122
+		padding-right: 40px;
  123
+		border-right: 1px solid $gradientTop;
  124
+		margin-right: 40px;
  125
+	}
  126
+	h2 {
  127
+		font-size: 34px;
  128
+		line-height: 36px;
  129
+		letter-spacing: -0.5px;
  130
+	}
  131
+	h3 {
  132
+		font-size: 18px;
  133
+		line-height: 27px;
  134
+	}
  135
+	h4 {
  136
+		font-size: 14px;
  137
+		line-height: 18px;
  138
+		margin: 18px 0 9px;
  139
+	}
  140
+	h5 {
  141
+		font-size: 12px;
  142
+		line-height: 18px;
  143
+		margin: 18px 0 0;
  144
+	}
  145
+
  146
+	/* Helpers */
  147
+	.clear {
  148
+		clear: both;
  149
+	}
  150
+	.left {
  151
+		float: left;
  152
+	}
  153
+	
  154
+	/* Messages */
  155
+	.message {
  156
+		padding: 2px 18px;
  157
+		margin-bottom: 18px;
  158
+		@include roundedCorners(3px, 3px, 3px, 3px);
  159
+		p {
  160
+			margin: 11px 0 13px;
  161
+		}
  162
+		.lt-ie8 & p {
  163
+			/* margin-top: 7px; */
  164
+			/* margin-bottom: 10px; */
  165
+		}
  166
+		&.warning {
  167
+			background-color: $warningBg;
  168
+			border: 1px $warningBorder solid;
  169
+		}
  170
+		&.error {
  171
+			background-color: #FDF1F3 /* #fdf5f5 */;
  172
+			border: 1px solid $errorBorder;
  173
+		}
  174
+		ul {
  175
+			margin-left: 18px;
  176
+			margin-top: -9px;
  177
+			li {
  178
+			
  179
+			}
  180
+		}
  181
+	}
  182
+	.helpText {
  183
+		float: right;
  184
+		width: 425px;
  185
+		padding-left: 20px;
  186
+		color: #666;
  187
+		margin-top: 0;
  188
+		background: transparent url(../../../admin/images/question.png) no-repeat left 1px;
  189
+		&.requirementsHelpText {
  190
+			margin-top: 17px;
  191
+		}
  192
+	}
  193
+	
  194
+	.typography {
  195
+		// General tables
  196
+		table {
  197
+			margin: 9px 0 27px;
  198
+			border-collapse: collapse;
  199
+			width: 100%;
  200
+			thead{
  201
+				tr {
  202
+					td, th {
  203
+						font-weight: bold;
  204
+						vertical-align: bottom;
  205
+						padding: 12px;
  206
+					}
  207
+				}
  208
+			}
  209
+			th, td {
  210
+				padding: 8px 12px;
  211
+				text-align: left;
  212
+			}
  213
+			td {
  214
+				vertical-align: top;
  215
+				border-top: none;
  216
+				background-color: #fff;
  217
+			}
  218
+			th + th,
  219
+			td + td,
  220
+			th + td {
  221
+				/* border-left: 1px solid #ddd; */
  222
+			}
  223
+			tbody{
  224
+			    tr:nth-child(odd) td,
  225
+			    tr:nth-child(odd) th{
  226
+			      background-color: #fcfcfc;
  227
+			    }
  228
+			    tr:hover td,
  229
+			    tr:hover th{
  230
+			      background-color: #f6f6f6;
  231
+			    }
  232
+			}
  233
+			tfoot { 
  234
+				font-style: italic;
  235
+				color: #888;
  236
+			}
  237
+		}
  238
+	
  239
+		// Forms
  240
+		input, textarea, select {
  241
+			width: 420px;
  242
+			margin-bottom: 9px;
  243
+			color: #707070;
  244
+			border: 1px solid #ddd;
  245
+		    display: inline-block;
  246
+		    height: 18px;
  247
+		    padding: 4px 6px;
  248
+		    line-height: 18px;
  249
+		    font-size: 13px;
  250
+		    @include roundedCorners(3px,3px,3px,3px);
  251
+		}
  252
+		
  253
+		// Focus states
  254
+		input,
  255
+		textarea {
  256
+			$transition: border linear .2s, box-shadow linear .2s;
  257
+  			@include transition($transition);
  258
+			@include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
  259
+		}
  260
+		input:focus,
  261
+		textarea:focus {
  262
+			outline: 0;
  263
+			border-color: rgba(82,168,236,.8);
  264
+			$shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 4px rgba(82,168,236,.6);
  265
+			@include box-shadow($shadow);
  266
+		}
  267
+		input[type=file]:focus,
  268
+		input[type=checkbox]:focus,
  269
+		select:focus {
  270
+			@include box-shadow(none); // override for file inputs
  271
+			outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
  272
+		}
  273
+		// End Focus states
  274
+		
  275
+		select {
  276
+			height: 26px;
  277
+		}
  278
+		option {
  279
+			line-height: 27px;
  280
+			font-size: 12px;
  281
+			padding: 2px 6px;
  282
+			color:#666;
  283
+		}
  284
+		label {
  285
+			width: auto;
  286
+			float: none;
  287
+			padding-top: 0;
  288
+			margin: 0 0 5px 0;	
  289
+			text-align: left;
  290
+			display: block;
  291
+		}
  292
+		.fields {
  293
+			float: left;
  294
+		}
  295
+		input.action {
  296
+			text-align: center;
  297
+			font-weight: bold;
  298
+			margin: 9px 0 27px;
  299
+			padding: 6px 8px;
  300
+			width: 200px;
  301
+			width: auto;
  302
+			color: #222;
  303
+			border: 1px solid #aaa;
  304
+			text-shadow: 0 1px 0 #eee;
  305
+			font-size: 13px;
  306
+			float: none;
  307
+			height: auto;
  308
+			@include topGradient (#fbfbfb, #bbb);
  309
+			@include roundedCorners(3px,3px,3px,3px);
  310
+			@include boxShadow(0, 1px, 0, 0, #fff);
  311
+			background-color: #ddd;
  312
+			&:hover {
  313
+				@include boxShadow(0, 1px, 2px, 0, #ccc);
  314
+				@include topGradient (#fbfbfb, #ccc);
  315
+			}
  316
+			&:focus, &:active {
  317
+				@include boxShadow(0, 1px, 0, 0, #fff);
  318
+				@include topGradient (#fbfbfb, #bbb);
  319
+			}
  320
+		}
  321
+		input.action:hover,
  322
+		input.action:focus {
  323
+			cursor: pointer;
  324
+		}
  325
+		input[type="checkbox"], input[type="radio"] {
  326
+		    border: medium none;
  327
+		    height: auto;
  328
+		    line-height: normal;
  329
+		    padding: 0;
  330
+		    width: auto;
  331
+		    margin-right: 6px;
  332
+		    float: left;
  333
+		    margin-top:	3px;
  334
+		}
  335
+		#install_button {
  336
+			font-size: 20px;
  337
+			color: #fff;
  338
+		    border-color: #78A127 #78A127 #59781D;
  339
+			text-shadow: 0 1px 1px #4D7326;
  340
+			padding: 8px 14px;
  341
+			background-color: green;
  342
+			@include topGradient(#80BF40, #59862D);
  343
+			@include boxShadow(0, 1px, 0, 0, #fff);
  344
+			&:hover {
  345
+				@include boxShadow(0, 1px, 3px, 0, #bbb);
  346
+			}
  347
+			&:focus, &:active {
  348
+				@include boxShadow(0, 1px, 0, 0, #fff);
  349
+				@include topGradient(#80BF40, #59862D);
  350
+			}
  351
+			&[disabled=disabled] {
  352
+				border: 1px solid #aaa;
  353
+				border-color: #bbb #bbb #aaa;
  354
+				color: #222;
  355
+				text-shadow: 0 1px 0 #eee;
  356
+				@include topGradient (#fbfbfb, #bbb);
  357
+				&:hover {
  358
+					@include boxShadow(0, 1px, 0, 0, #fff);
  359
+				}
  360
+			}
  361
+		}
  362
+	}
  363
+	
  364
+	/* Custom styles */
  365
+	#Container {
  366
+		margin-bottom: 40px;
  367
+		h3.sectionHeading {
  368
+			padding-top: 27px;
  369
+			border-top: 1px solid $gradientTop;
  370
+			clear: both;
  371
+		}
  372
+		#Header {
  373
+			margin-bottom: 30px;
  374
+			height: 200px;
  375
+			div.left {
  376
+				width: 698px;
  377
+				margin-top: 47px;
  378
+			}
  379
+		}
  380
+		#Navigation {
  381
+			display: none;
  382
+		}
  383
+	}
  384
+	h5.requirement {
  385
+		padding: 12px 18px;
  386
+		font-size: 14px;
  387
+		border: 1px solid darken($gradientBottom,2%);
  388
+		border-top: 1px solid lighten($gradientBottom,5%);
  389
+		margin: 0;
  390
+		color: #fff;
  391
+		position: relative;
  392
+		text-shadow: 0 -1px 0 darken($gradientBottom, 5%);
  393
+		@include roundedCorners(3px, 3px, 3px, 3px);
  394
+		@include boxShadow(0, 1px, 0, 0, #fff);
  395
+		background-color: #eee;
  396
+		@include topGradient($gradientTop,$gradientBottom);
  397
+		span {
  398
+			font-weight: normal;
  399
+			font-size: 12px;
  400
+			padding: 3px 6px;
  401
+			margin-left: 5px;
  402
+			text-shadow: none;
  403
+			background-color: lighten($gradientTop, 25%);
  404
+			@include roundedCorners(2px, 2px, 2px, 2px);
  405
+			@include boxShadow(0,0,2px,0,$gradientBottom);
  406
+		}
  407
+		&.good span{
  408
+			color: $good /* #359318 */;
  409
+		}
  410
+		&.warning span{
  411
+			color: $warning;
  412
+		}
  413
+		&.error span{
  414
+			color: $error;
  415
+		}
  416
+		a {
  417
+			font-size: 11px;
  418
+			right: 9px;
  419
+			position: absolute;
  420
+			line-height: 19px;
  421
+			margin: 0 0 0 30px;
  422
+			color: #fff;
  423
+			text-decoration: none;
  424
+			font-weight: normal;
  425
+			padding-right: 21px;
  426
+			background: transparent url(../../../admin/images/arrows.png) no-repeat right top;
  427
+			&:hover {
  428
+				background: transparent url(../../../admin/images/arrows.png) no-repeat right -40px;
  429
+			}
  430
+		}
  431
+	}
  432
+	table.testResults {
  433
+		border-top: none;
  434
+		margin-top: -1px;
  435
+		margin-bottom: 9px;
  436
+		@include boxShadow(0, 1px, 0, 0, #fff);
  437
+		@include roundedCorners(3px,3px,3px,3px);
  438
+		overflow: hidden;
  439
+		tr {
  440
+			&.good {