From 63e303af3b470ace2f5194d11a9c2b1df26e8af3 Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Wed, 29 Jun 2011 22:22:34 -0700
Subject: [PATCH] New layout for Settings/Sabnzbd

Fixed scripting for Settings/Quality
---
 NzbDrone.Web/Content/Settings.css             | 100 +++++++++
 .../Controllers/SettingsController.cs         |   8 +-
 NzbDrone.Web/NzbDrone.Web.csproj              |   1 +
 NzbDrone.Web/Views/Series/Index.cshtml        |   2 +-
 NzbDrone.Web/Views/Settings/Index.cshtml      |  27 +++
 NzbDrone.Web/Views/Settings/Indexers.cshtml   |  30 +--
 NzbDrone.Web/Views/Settings/Quality.cshtml    |  67 ++++--
 NzbDrone.Web/Views/Settings/Sabnzbd.cshtml    | 178 +++++++--------
 NzbDrone.Web/Views/Settings/Test.cshtml       | 206 +++++++-----------
 9 files changed, 335 insertions(+), 284 deletions(-)
 create mode 100644 NzbDrone.Web/Content/Settings.css

diff --git a/NzbDrone.Web/Content/Settings.css b/NzbDrone.Web/Content/Settings.css
new file mode 100644
index 000000000..6ba5707bf
--- /dev/null
+++ b/NzbDrone.Web/Content/Settings.css
@@ -0,0 +1,100 @@
+body 
+{
+    /*font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+    font-size:12px;*/
+}
+
+p, h1, form, button{border:0; margin:0; padding:0;}
+.spacer{clear:both; height:1px;}
+
+.settingsForm
+{
+    /*margin:0 auto;*/
+    width: 600px;
+    padding: 14px;
+}
+
+#stylized
+{
+    border:solid 2px #b7ddf2;
+    /*background:#ebf4fb;*/
+}
+
+#stylized h1
+{
+    font-size:20px;
+    font-weight:bold;
+    margin-bottom:8px;
+}
+
+#stylized p
+{
+    font-size:11px;
+    color:#666666;
+    margin-bottom:20px;
+    border-bottom:solid 1px #b7ddf2;
+    padding-bottom:10px;
+}
+
+#stylized label
+{
+    display:block;
+    font-weight:bold;
+    text-align:right;
+    width:340px;
+    float:left;
+}
+
+#stylized .small
+{
+    color:#666666;
+    display:block;
+    font-size:11px;
+    font-weight:normal;
+    text-align:right;
+    width:340px;
+}
+
+#stylized input, select
+{
+    float:left;
+    font-size:12px;
+    padding:4px 2px;
+    border:solid 1px #aacfe4;
+    width:200px;
+    margin:2px 0 20px 10px;
+}
+
+#stylized button
+{
+    clear:both;
+    margin-left:220px;
+    margin-bottom: 10px;
+    width:125px;
+    height:31px;
+    background:#666666 url(img/button.png) no-repeat;
+    text-align:center;
+    line-height:31px;
+    color:#FFFFFF;
+    font-size:11px;
+    font-weight:bold;
+}
+
+#save_button:hover
+{
+    border-bottom-style: solid;
+    border-bottom-width: 4px;
+    border-color: #3C3C3C;
+    /* Set padding to prevent fieldset border from moving when button is highlighted... WINNING! */
+    padding-bottom: 0px;
+    padding-top: 4px;
+}
+
+#saveAjax
+{
+    padding-left: 6px;
+    margin-bottom: -7px;
+    width: 20px;
+    height: 20px;
+    display: none;
+}
\ No newline at end of file
diff --git a/NzbDrone.Web/Controllers/SettingsController.cs b/NzbDrone.Web/Controllers/SettingsController.cs
index 528a0fd0d..2f4583a80 100644
--- a/NzbDrone.Web/Controllers/SettingsController.cs
+++ b/NzbDrone.Web/Controllers/SettingsController.cs
@@ -94,8 +94,6 @@ namespace NzbDrone.Web.Controllers
 
         public ActionResult Sabnzbd()
         {
-            ViewData["viewName"] = "Sabnzbd";
-
             var sabDropDir = _configProvider.SabDropDirectory;
             var selectList = new SelectList(new List<string> {sabDropDir}, sabDropDir);
 
@@ -112,13 +110,11 @@ namespace NzbDrone.Web.Controllers
                                 SabDropDirectorySelectList = selectList
                             };
 
-            return View("Index", model);
+            return View(model);
         }
 
         public ActionResult Quality()
         {
-            ViewData["viewName"] = "Quality";
-
             var qualityTypes = new List<QualityTypes>();
 
             foreach (QualityTypes qual in Enum.GetValues(typeof(QualityTypes)))
@@ -139,7 +135,7 @@ namespace NzbDrone.Web.Controllers
                                 QualityProfileSelectList = qualityProfileSelectList
                             };
 
-            return View("Index", model);
+            return View(model);
         }
 
         public ActionResult Notifications()
diff --git a/NzbDrone.Web/NzbDrone.Web.csproj b/NzbDrone.Web/NzbDrone.Web.csproj
index 1658f4f76..1466a16e2 100644
--- a/NzbDrone.Web/NzbDrone.Web.csproj
+++ b/NzbDrone.Web/NzbDrone.Web.csproj
@@ -544,6 +544,7 @@
     <Content Include="Content\jquery-ui.custom.css" />
     <Content Include="Content\jquery.jgrowl.css" />
     <Content Include="Content\notibar.css" />
+    <Content Include="Content\Settings.css" />
     <Content Include="Content\Site.css" />
     <Content Include="Content\Images\XbmcNotification.png" />
     <Content Include="favicon.ico" />
diff --git a/NzbDrone.Web/Views/Series/Index.cshtml b/NzbDrone.Web/Views/Series/Index.cshtml
index 16b9f4ca8..9748c0720 100644
--- a/NzbDrone.Web/Views/Series/Index.cshtml
+++ b/NzbDrone.Web/Views/Series/Index.cshtml
@@ -79,7 +79,7 @@ Series
                              })
                 .Editable(editor => editor.Mode(GridEditMode.PopUp))
                 .Sortable(sort => sort.OrderBy(order => order.Add(o => o.Title).Ascending()).Enabled(true))
-                .DetailView(detailView => detailView.ClientTemplate("<div style=\"width:95%\"><#= Overview #></div>"))
+                .DetailView(detailView => detailView.ClientTemplate("<#= Overview #>"))
                 .ClientEvents(clientEvents =>
                 {
                     clientEvents.OnEdit("grid_edit");
diff --git a/NzbDrone.Web/Views/Settings/Index.cshtml b/NzbDrone.Web/Views/Settings/Index.cshtml
index 7da7aa1ba..1863d0a29 100644
--- a/NzbDrone.Web/Views/Settings/Index.cshtml
+++ b/NzbDrone.Web/Views/Settings/Index.cshtml
@@ -11,3 +11,30 @@
     <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
     @{Html.RenderPartial(ViewData["viewName"].ToString());}
 }
+
+@section Scripts{
+    <script type="text/javascript">
+        $(document).ready(function () {
+            var options = {
+                target: '#result',
+                beforeSubmit: showRequest,
+                success: showResponse,
+                type: 'post',
+                resetForm: false
+            };
+            $('#form').ajaxForm(options);
+        });
+
+        function showRequest(formData, jqForm, options) {
+            $("#result").empty().html('Saving...');
+            $("#form :input").attr("disabled", true);
+            $('#saveAjax').show();
+        }
+
+        function showResponse(responseText, statusText, xhr, $form) {
+            $("#result").empty().html(responseText);
+            $("#form :input").attr("disabled", false);
+            $('#saveAjax').hide();
+        }
+    </script>
+}
\ No newline at end of file
diff --git a/NzbDrone.Web/Views/Settings/Indexers.cshtml b/NzbDrone.Web/Views/Settings/Indexers.cshtml
index 44aca26e2..d1b58a6dd 100644
--- a/NzbDrone.Web/Views/Settings/Indexers.cshtml
+++ b/NzbDrone.Web/Views/Settings/Indexers.cshtml
@@ -170,32 +170,4 @@
         </div>
     </fieldset>
 }
-<div id="result" class="hiddenResult"></div>
-
-
-@section Scripts{
-<script type="text/javascript">
-    $(document).ready(function () {
-        var options = {
-            target: '#result',
-            beforeSubmit: showRequest,
-            success: showResponse,
-            type: 'post',
-            resetForm: false
-        };
-        $('#form').ajaxForm(options);
-        $('#save_button').attr('disabled', '');
-    });
-
-    function showRequest(formData, jqForm, options) {
-        $("#result").empty().html('Saving...');
-        $("#form :input").attr("disabled", true);
-    }
-
-    function showResponse(responseText, statusText, xhr, $form) {
-        $("#result").empty().html(responseText);
-        $("#form :input").attr("disabled", false);
-    }
-</script>
-
-}
\ No newline at end of file
+<div id="result" class="hiddenResult"></div>
\ No newline at end of file
diff --git a/NzbDrone.Web/Views/Settings/Quality.cshtml b/NzbDrone.Web/Views/Settings/Quality.cshtml
index 96bb92aa6..7b98e773c 100644
--- a/NzbDrone.Web/Views/Settings/Quality.cshtml
+++ b/NzbDrone.Web/Views/Settings/Quality.cshtml
@@ -1,5 +1,19 @@
 @using NzbDrone.Web.Helpers;
 @model NzbDrone.Web.Models.QualityModel
+           
+@section HeaderContent{
+    <link rel="stylesheet" type="text/css" href="../../Content/Settings.css" />
+}
+
+@section TitleContent{
+    Settings
+}
+
+@section ActionMenu{
+    @{Html.RenderPartial("SubMenu");}
+}
+
+@section MainContent{
 @using (Html.BeginForm("SaveQuality", "Settings", FormMethod.Post, new { id = "form", name = "form" }))
 {
     <fieldset style="position: relative;">
@@ -31,36 +45,19 @@
                 }
             </div>
         </div>
-        <input type="submit" id="save_button" value="Save" disabled="disabled" style="position: absolute;
+        <input type="submit" id="save_button" value="Save" style="position: absolute;
             bottom: 0px; display: block; padding-left: 5px;" />
     </fieldset>
 }
 <div id="result" class="hiddenResult">
 </div>
+}
+
 @section Scripts{
+    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
+    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
+
     <script type="text/javascript">
-        $(document).ready(function () {
-            var options = {
-                target: '#result',
-                beforeSubmit: showRequest,
-                success: showResponse,
-                type: 'post',
-                resetForm: false
-            };
-            $('#form').ajaxForm(options);
-            $('#save_button').attr('disabled', '');
-        });
-
-        function showRequest(formData, jqForm, options) {
-            $("#result").empty().html('Saving...');
-            $("#form :input").attr("disabled", true);
-        }
-
-        function showResponse(responseText, statusText, xhr, $form) {
-            $("#result").empty().html(responseText);
-            $("#form :input").attr("disabled", false);
-        }
-
         function addOption(text, value) {
             var myCombo = $('#DefaultQualityProfileId');
 
@@ -78,7 +75,6 @@
             $("#DefaultQualityProfileId option[value='" + value + "']").html(text);
         }
 
-
         $("#addItem").click(function () {
             $.ajax({
                 url: this.href,
@@ -117,5 +113,28 @@
                 }
             });
         }
+
+        $(document).ready(function () {
+            var options = {
+                target: '#result',
+                beforeSubmit: showRequest,
+                success: showResponse,
+                type: 'post',
+                resetForm: false
+            };
+            $('#form').ajaxForm(options);
+        });
+
+        function showRequest(formData, jqForm, options) {
+            $("#result").empty().html('Saving...');
+            $("#form :input").attr("disabled", true);
+            $('#saveAjax').show();
+        }
+
+        function showResponse(responseText, statusText, xhr, $form) {
+            $("#result").empty().html(responseText);
+            $("#form :input").attr("disabled", false);
+            $('#saveAjax').hide();
+        }
     </script>
 }
diff --git a/NzbDrone.Web/Views/Settings/Sabnzbd.cshtml b/NzbDrone.Web/Views/Settings/Sabnzbd.cshtml
index d637b704c..a0e5a0ec5 100644
--- a/NzbDrone.Web/Views/Settings/Sabnzbd.cshtml
+++ b/NzbDrone.Web/Views/Settings/Sabnzbd.cshtml
@@ -1,105 +1,82 @@
 @using NzbDrone.Web.Helpers;
 @model NzbDrone.Web.Models.SabnzbdSettingsModel
-@using (Html.BeginForm("SaveSabnzbd", "Settings", FormMethod.Post, new { id = "form", name = "form" }))
-{
-    <fieldset>
-        <legend>SABnzbd</legend>
-        <button type="button" onclick="autoConfigureSab()">
-            Auto-Configure</button>
-        <div class="config-section">
-            <div class="config-group">
-                <div class="config-title">@Html.LabelFor(m => m.SabHost)</div>
-                <div class="config-value">@Html.TextBoxFor(m => m.SabHost)</div>
-            </div>
-            <div class="config-group2">
-                <div class="config-validation">@Html.ValidationMessageFor(m => m.SabHost)</div>
-                <div class="config-description">@Html.DescriptionFor(m => m.SabHost)</div>
-            </div>
-        </div>
-        <div class="config-section">
-            <div class="config-group">
-                <div class="config-title">@Html.LabelFor(m => m.SabPort)</div>
-                <div class="config-value">@Html.TextBoxFor(m => m.SabPort)</div>
-            </div>
-            <div class="config-group2">
-                <div class="config-validation">@Html.ValidationMessageFor(m => m.SabPort)</div>
-                <div class="config-description">@Html.DescriptionFor(m => m.SabPort)</div>
-            </div>
-        </div>
-        <div class="config-section">
-            <div class="config-group">
-                <div class="config-title">@Html.LabelFor(m => m.SabApiKey)</div>
-                <div class="config-value">@Html.TextBoxFor(m => m.SabApiKey)</div>
-            </div>
-            <div class="config-group2">
-                <div class="config-validation">@Html.ValidationMessageFor(m => m.SabApiKey)</div>
-                <div class="config-description">@Html.DescriptionFor(m => m.SabApiKey)</div>
-            </div>
-        </div>
-        <div class="config-section">
-            <div class="config-group">
-                <div class="config-title">@Html.LabelFor(m => m.SabUsername)</div>
-                <div class="config-value">@Html.TextBoxFor(m => m.SabUsername)</div>
-            </div>
-            <div class="config-group2">
-                <div class="config-validation">@Html.ValidationMessageFor(m => m.SabUsername)</div>
-                <div class="config-description">@Html.DescriptionFor(m => m.SabUsername)</div>
-            </div>
-        </div>
-        <div class="config-section">
-            <div class="config-group">
-                <div class="config-title">@Html.LabelFor(m => m.SabPassword)</div>
-                <div class="config-value">@Html.TextBoxFor(m => m.SabPassword)</div>
-            </div>
-            <div class="config-group2">
-                <div class="config-validation">@Html.ValidationMessageFor(m => m.SabPassword)</div>
-                <div class="config-description">@Html.DescriptionFor(m => m.SabPassword)</div>
-            </div>
-        </div>
-        <div class="config-section">
-            <div class="config-group">
-                <div class="config-title">@Html.LabelFor(m => m.SabTvCategory)</div>
-                <div class="config-value">@Html.TextBoxFor(m => m.SabTvCategory)</div>
-            </div>
-            <div class="config-group2">
-                <div class="config-validation">@Html.ValidationMessageFor(m => m.SabTvCategory)</div>
-                <div class="config-description">@Html.DescriptionFor(m => m.SabTvCategory)</div>
-            </div>
-        </div>
-        <div class="config-section">
-            <div class="config-group">
-                <div class="config-title">@Html.LabelFor(m => m.SabTvPriority)</div>
-                <div class="config-value">@Html.DropDownListFor(m => m.SabTvPriority, Model.PrioritySelectList)</div>
-            </div>
-            <div class="config-group2">
-                <div class="config-validation">@Html.ValidationMessageFor(m => m.SabTvPriority)</div>
-                <div class="config-description">@Html.DescriptionFor(m => m.SabTvPriority)</div>
-            </div>
-        </div>
-        <div class="config-section">
-            <div class="config-group">
-                <div class="config-title">@Html.LabelFor(m => m.SabDropDirectory)</div>
-                <div class="config-value">
-                    @{Html.Telerik().ComboBoxFor(m => m.SabDropDirectory)
-                  .BindTo(Model.SabDropDirectorySelectList)
-                  .DataBinding(binding => binding.Ajax().Select("_autoCompletePath", "Directory").Delay(400).Cache(false))
-                  .Filterable(f => f.FilterMode(AutoCompleteFilterMode.StartsWith))
-                  .HighlightFirstMatch(true)
-                  .HtmlAttributes(new { style = "margin-left: -2px; width: 220px;" })
-                  .Render();}
-                </div>
-            </div>
-            <div class="config-group2">
-                <div class="config-validation">@Html.ValidationMessageFor(m => m.SabDropDirectory)</div>
-                <div class="config-description">@Html.DescriptionFor(m => m.SabDropDirectory)</div>
-            </div>
-        </div>
-        <input type="submit" id="save_button" value="Save" disabled="disabled" />
-    </fieldset>
+
+@section HeaderContent{
+    <link rel="stylesheet" type="text/css" href="../../Content/Settings.css" />
 }
-<div id="result" class="hiddenResult">
-</div>
+
+@section TitleContent{
+    Settings
+}
+
+@section ActionMenu{
+    @{Html.RenderPartial("SubMenu");}
+}
+
+@section MainContent{
+    <div id="stylized">
+    
+    @using (Html.BeginForm("SaveSabnzbd", "Settings", FormMethod.Post, new { id = "form", name = "form", @class = "settingsForm" }))
+    {
+        <h1>SABnzbd</h1>
+        <p></p>
+    
+        <label>Auto-Configure
+        <span class="small">If no Username and Password is set and SABnzbd is on the same system as NzbDrone, you cna auto-configure it</span>
+        </label>
+        <input type="button" onclick="autoConfigureSab(); return false;" value="Auto-Configure" />
+
+        <label>@Html.LabelFor(m => m.SabHost)
+        <span class="small">@Html.DescriptionFor(m => m.SabHost)</span>
+        </label>
+        @Html.TextBoxFor(m => m.SabHost)
+
+        <label>@Html.LabelFor(m => m.SabPort)
+        <span class="small">@Html.DescriptionFor(m => m.SabPort)</span>
+        </label>
+        @Html.TextBoxFor(m => m.SabPort)
+
+        <label>@Html.LabelFor(m => m.SabApiKey)
+        <span class="small">@Html.DescriptionFor(m => m.SabApiKey)</span>
+        </label>
+        @Html.TextBoxFor(m => m.SabApiKey)
+
+        <label>@Html.LabelFor(m => m.SabUsername)
+        <span class="small">@Html.DescriptionFor(m => m.SabUsername)</span>
+        </label>
+        @Html.TextBoxFor(m => m.SabUsername)
+
+        <label>@Html.LabelFor(m => m.SabPassword)
+        <span class="small">@Html.DescriptionFor(m => m.SabPassword)</span>
+        </label>
+        @Html.TextBoxFor(m => m.SabPassword)
+
+        <label>@Html.LabelFor(m => m.SabTvCategory)
+        <span class="small">@Html.DescriptionFor(m => m.SabTvCategory)</span>
+        </label>
+        @Html.TextBoxFor(m => m.SabTvCategory)
+
+        <label>@Html.LabelFor(m => m.SabTvPriority)
+        <span class="small">@Html.DescriptionFor(m => m.SabTvPriority)</span>
+        </label>
+        @Html.DropDownListFor(m => m.SabTvPriority, Model.PrioritySelectList)
+
+        <label>@Html.LabelFor(m => m.SabDropDirectory)
+        <span class="small">@Html.DescriptionFor(m => m.SabDropDirectory)</span>
+        </label>
+        @Html.TextBoxFor(m => m.SabDropDirectory)
+
+        <button type="submit" id="save_button" >Save</button><img src="../../Content/Images/ajax-loader.gif" alt="Loader" id="saveAjax"/>
+    }
+    </div>
+
+    <div id="result" class="hiddenResult"></div>
+}
+
 @section Scripts{
+    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
+    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
+
     <script type="text/javascript">
         var autoConfigureSabUrl = '@Url.Action("AutoConfigureSab", "Settings")';
 
@@ -130,17 +107,18 @@
                 resetForm: false
             };
             $('#form').ajaxForm(options);
-            $('#save_button').attr('disabled', '');
         });
 
         function showRequest(formData, jqForm, options) {
             $("#result").empty().html('Saving...');
             $("#form :input").attr("disabled", true);
+            $('#saveAjax').show();
         }
 
         function showResponse(responseText, statusText, xhr, $form) {
             $("#result").empty().html(responseText);
             $("#form :input").attr("disabled", false);
-        }             
+            $('#saveAjax').hide();
+        }
     </script>
 }
diff --git a/NzbDrone.Web/Views/Settings/Test.cshtml b/NzbDrone.Web/Views/Settings/Test.cshtml
index 9349f7ef8..27792a291 100644
--- a/NzbDrone.Web/Views/Settings/Test.cshtml
+++ b/NzbDrone.Web/Views/Settings/Test.cshtml
@@ -1,136 +1,94 @@
-<script>
-    /*
-    * jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
-    * http://benalman.com/projects/jquery-dotimeout-plugin/
-    * 
-    * Copyright (c) 2010 "Cowboy" Ben Alman
-    * Dual licensed under the MIT and GPL licenses.
-    * http://benalman.com/about/license/
-    */
-    (function ($) { var a = {}, c = "doTimeout", d = Array.prototype.slice; $[c] = function () { return b.apply(window, [0].concat(d.call(arguments))) }; $.fn[c] = function () { var f = d.call(arguments), e = b.apply(this, [c + f[0]].concat(f)); return typeof f[0] === "number" || typeof f[1] === "number" ? this : e }; function b(l) { var m = this, h, k = {}, g = l ? $.fn : $, n = arguments, i = 4, f = n[1], j = n[2], p = n[3]; if (typeof f !== "string") { i--; f = l = 0; j = n[1]; p = n[2] } if (l) { h = m.eq(0); h.data(l, k = h.data(l) || {}) } else { if (f) { k = a[f] || (a[f] = {}) } } k.id && clearTimeout(k.id); delete k.id; function e() { if (l) { h.removeData(l) } else { if (f) { delete a[f] } } } function o() { k.id = setTimeout(function () { k.fn() }, j) } if (p) { k.fn = function (q) { if (typeof p === "string") { p = g[p] } p.apply(m, d.call(n, i)) === true && !q ? o() : e() }; o() } else { if (k.fn) { j === undefined ? e() : k.fn(j === false); return true } else { e() } } } })(jQuery);
-</script>
-
-<script>
-    (function ($) {
-        $.fn.episodeProgress = function (episodes, totalEpisodes) {
-            return this.each(
-			    function () {
-			        var div = $(this);
-			        var progressBar = div.find(".progress");
-
-			        var width = Math.round(episodes / totalEpisodes * 100);
-
-			        progressBar.css("width", width + "%");
-
-			        if (width > 97) {
-			            progressBar.css("-khtml-border-top-right-radius", "7px");
-			            progressBar.css("border-top-right-radius", "7px");
-			            progressBar.css("-moz-border-top-right-radius", "7px");
-			            progressBar.css("-webkit-border-top-right-radius", "7px");
-
-			            progressBar.css("-khtml-border-bottom-right-radius", "7px");
-			            progressBar.css("border-bottom-right-radius", "7px");
-			            progressBar.css("-moz-border-bottom-right-radius", "7px");
-			            progressBar.css("-webkit-border-bottom-right-radius", "7px");
-			        }
-
-			        div.find(".progressText").html(episodes + " / " + totalEpisodes);
-			    }
-		    );
-        };
-    })(jQuery);
-</script>
-
-<style>
-/* progress bar container */
-.progressbar
-{
-    border:1px solid grey;
-    -khtml-border-radius:8px;
-    border-radius:8px;
-    -moz-border-radius:8px;
-    -webkit-border-radius:8px;
-    width:125px;
-    height:20px;
-    position:relative;
-    color:black;
+<style>
+/*body{
+font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+font-size:12px;
+}
+p, h1, form, button{border:0; margin:0; padding:0;}*/
+.spacer{clear:both; height:1px;}
+/* ----------- My Form ----------- */
+.myform{
+margin:0 auto;
+width:400px;
+padding:14px;
 }
 
-/* apply curves to the progress bar */
-.progress
-{
-    -khtml-border-top-left-radius:7px;
-    border-top-left-radius:7px;
-    -moz-border-top-left-radius:7px;
-    -webkit-border-top-left-radius:7px;
-    
-    -khtml-border-bottom-left-radius:7px;
-    border-bottom-left-radius:7px;
-    -moz-border-bottom-left-radius:7px;
-    -webkit-border-bottom-left-radius:7px;
+/* ----------- stylized ----------- */
+#stylized{
+border:solid 2px #b7ddf2;
+background:#ebf4fb;
 }
-
-/* color bar */
-.progressbar div.progress
-{
-    position:absolute;
-    width:0;
-    height:100%;
-    overflow:hidden;
-    background-color:#065EFE;
+#stylized h1 {
+font-size:14px;
+font-weight:bold;
+margin-bottom:8px;
 }
-/* text on bar */
-.progressbar div.progress .progressText{
-    position:absolute;
-    text-align:center;
-    color:white;
+#stylized p{
+font-size:11px;
+color:#666666;
+margin-bottom:20px;
+border-bottom:solid 1px #b7ddf2;
+padding-bottom:10px;
 }
-
-/* text off bar */
-.progressbar div.progressText{
-    position:absolute;
-    width:100%;
-    height:100%;
-    text-align:center;
+#stylized label{
+display:block;
+font-weight:bold;
+text-align:right;
+width:140px;
+float:left;
+}
+#stylized .small{
+color:#666666;
+display:block;
+font-size:11px;
+font-weight:normal;
+text-align:right;
+width:140px;
+}
+#stylized input{
+float:left;
+font-size:12px;
+padding:4px 2px;
+border:solid 1px #aacfe4;
+width:200px;
+margin:2px 0 20px 10px;
+}
+#stylized button{
+clear:both;
+margin-left:150px;
+width:125px;
+height:31px;
+background:#666666 url(img/button.png) no-repeat;
+text-align:center;
+line-height:31px;
+color:#FFFFFF;
+font-size:11px;
+font-weight:bold;
 }
 </style>
 
-<div id="progressbar" class="progressbar">
-    <div class="progressText"></div>
-    <div class="progress">
-        <span class="progressText" style="width: 125px;"></span>
-    </div>
-</div>
+<div id="stylized" class="myform">
+    <form id="form" name="form" method="post">
+    <fieldset>
+        <h1>Sign-up form</h1>
+        <p>This is the basic look of my form without table</p>
 
-<div id="progressbar2" class="progressbar">
-    <div class="progressText"></div>
-    <div class="progress">
-        <span class="progressText" style="width: 125px;"></span>
-    </div>
-</div>
+        <label>Name
+        <span class="small">Add your name</span>
+        </label>
+        <input type="text" name="name" id="name" />
 
-<script>
-    $(document).ready(function() {
+        <label>Email
+        <span class="small">Add a valid address</span>
+        </label>
+        <input type="text" name="email" id="email" />
 
-        progress(65, 100, 'progressbar');
-        progress(22, 25, 'progressbar2');
+        <label>Password
+        <span class="small">Min. size 6 chars</span>
+        </label>
+        <input type="text" name="password" id="password" />
 
-    });
-    
-    function progress(episodes, episodeTotal, elementName) {
-        var counter = 0;
-        var max = episodes + 1;
-
-        $.doTimeout(20, function () {
-            if (counter == max) {
-                return false;
-            }
-
-            $("#" + elementName).episodeProgress(counter, episodeTotal);
-            counter++;
-
-            return true;
-        });
-    };
-    
-</script>
\ No newline at end of file
+        <button type="submit">Sign-up</button>
+        <div class="spacer"></div>
+        </fieldset>
+    </form>
+</div>
\ No newline at end of file