From 9deea44c87d743fe742b5629bbe7176b4923f6ea Mon Sep 17 00:00:00 2001
From: "kay.one" <kay.one@gmail.com>
Date: Fri, 1 Jul 2011 00:23:07 -0700
Subject: [PATCH] more root dir UI cleanup

---
 NzbDrone.Web/Content/ActionButton.css         |    2 +-
 NzbDrone.Web/Content/Blueprint/screen.css     | 1318 ++++++++++++++---
 NzbDrone.Web/Content/Overrides.css            |   11 +
 NzbDrone.Web/Content/Settings.css             |    1 -
 NzbDrone.Web/Content/Site.css                 |   20 +-
 .../Controllers/AddSeriesController.cs        |    9 +-
 NzbDrone.Web/NzbDrone.Web.csproj              |    5 +
 NzbDrone.Web/Scripts/jquery.watermark.min.js  |   12 +
 NzbDrone.Web/Views/AddSeries/RootDir.cshtml   |   58 +-
 NzbDrone.Web/Views/AddSeries/RootList.cshtml  |   14 +
 NzbDrone.Web/Views/Shared/_Layout.cshtml      |    8 +-
 11 files changed, 1177 insertions(+), 281 deletions(-)
 create mode 100644 NzbDrone.Web/Content/Overrides.css
 create mode 100644 NzbDrone.Web/Scripts/jquery.watermark.min.js
 create mode 100644 NzbDrone.Web/Views/AddSeries/RootList.cshtml

diff --git a/NzbDrone.Web/Content/ActionButton.css b/NzbDrone.Web/Content/ActionButton.css
index e10ebf0f9..c0eddc1fb 100644
--- a/NzbDrone.Web/Content/ActionButton.css
+++ b/NzbDrone.Web/Content/ActionButton.css
@@ -4,7 +4,7 @@
     padding: 5px 10px 5px 10px;
     background-repeat: no-repeat;
     background-position: 5px center;
-    background-color: #dbe4e9;
+    background-color: #cccccc;
     margin-bottom: 10px;
     display: inline-block;
     font-size: 15px;
diff --git a/NzbDrone.Web/Content/Blueprint/screen.css b/NzbDrone.Web/Content/Blueprint/screen.css
index d7baa3b09..b35fc347f 100644
--- a/NzbDrone.Web/Content/Blueprint/screen.css
+++ b/NzbDrone.Web/Content/Blueprint/screen.css
@@ -12,254 +12,1082 @@
 ----------------------------------------------------------------------- */
 
 /* reset.css */
-html {margin:0;padding:0;border:0;}
-body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
-article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
-body {line-height:1.5;background:white;}
-table {border-collapse:separate;border-spacing:0;}
-caption, th, td {text-align:left;font-weight:normal;float:none !important;}
-table, th, td {vertical-align:middle;}
-blockquote:before, blockquote:after, q:before, q:after {content:'';}
-blockquote, q {quotes:"" "";}
-a img {border:none;}
-:focus {outline:0;}
+html
+{
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section
+{
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: 100%;
+    font-family: inherit;
+    vertical-align: baseline;
+}
+article, aside, dialog, figure, footer, header, hgroup, nav, section
+{
+    display: block;
+}
+body
+{
+    line-height: 1.5;
+    background: white;
+}
+table
+{
+    border-collapse: separate;
+    border-spacing: 0;
+}
+caption, th, td
+{
+    text-align: left;
+    font-weight: normal;
+    float: none !important;
+}
+table, th, td
+{
+    vertical-align: middle;
+}
+blockquote:before, blockquote:after, q:before, q:after
+{
+    content: '';
+}
+blockquote, q
+{
+    quotes: "" "";
+}
+a img
+{
+    border: none;
+}
+:focus
+{
+    outline: 0;
+}
 
 /* typography.css */
-html {font-size:100.01%;}
-body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
-h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
-h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
-h2 {font-size:2em;margin-bottom:0.75em;}
-h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
-h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
-h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
-h6 {font-size:1em;font-weight:bold;}
-h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
-p {margin:0 0 1.5em;}
-.left {float:left !important;}
-p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}
-.right {float:right !important;}
-p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}
-a:focus, a:hover {color:#09f;}
-a {color:#06c;text-decoration:underline;}
-blockquote {margin:1.5em;color:#666;font-style:italic;}
-strong, dfn {font-weight:bold;}
-em, dfn {font-style:italic;}
-sup, sub {line-height:0;}
-abbr, acronym {border-bottom:1px dotted #666;}
-address {margin:0 0 1.5em;font-style:italic;}
-del {color:#666;}
-pre {margin:1.5em 0;white-space:pre;}
-pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
-li ul, li ol {margin:0;}
-ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}
-ul {list-style-type:disc;}
-ol {list-style-type:decimal;}
-dl {margin:0 0 1.5em 0;}
-dl dt {font-weight:bold;}
-dd {margin-left:1.5em;}
-table {margin-bottom:1.4em;width:100%;}
-th {font-weight:bold;}
-thead th {background:#c3d9ff;}
-th, td, caption {padding:4px 10px 4px 5px;}
-tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
-tfoot {font-style:italic;}
-caption {background:#eee;}
-.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
-.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
-.hide {display:none;}
-.quiet {color:#666;}
-.loud {color:#000;}
-.highlight {background:#ff0;}
-.added {background:#060;color:#fff;}
-.removed {background:#900;color:#fff;}
-.first {margin-left:0;padding-left:0;}
-.last {margin-right:0;padding-right:0;}
-.top {margin-top:0;padding-top:0;}
-.bottom {margin-bottom:0;padding-bottom:0;}
+html
+{
+    font-size: 100.01%;
+}
+body
+{
+    font-size: 75%;
+    color: #222;
+    background: #fff;
+    font-family: "Helvetica Neue" , Arial, Helvetica, sans-serif;
+}
+h1, h2, h3, h4, h5, h6
+{
+    font-weight: normal;
+    color: #111;
+}
+h1
+{
+    font-size: 3em;
+    line-height: 1;
+    margin-bottom: 0.5em;
+}
+h2
+{
+    font-size: 2em;
+    margin-bottom: 0.75em;
+}
+h3
+{
+    font-size: 1.5em;
+    line-height: 1;
+    margin-bottom: 1em;
+}
+h4
+{
+    font-size: 1.2em;
+    line-height: 1.25;
+    margin-bottom: 1.25em;
+}
+h5
+{
+    font-size: 1em;
+    font-weight: bold;
+    margin-bottom: 1.5em;
+}
+h6
+{
+    font-size: 1em;
+    font-weight: bold;
+}
+h1 img, h2 img, h3 img, h4 img, h5 img, h6 img
+{
+    margin: 0;
+}
+p
+{
+    margin: 0 0 1.5em;
+}
+.left
+{
+    float: left !important;
+}
+p .left
+{
+    margin: 1.5em 1.5em 1.5em 0;
+    padding: 0;
+}
+.right
+{
+    float: right !important;
+}
+p .right
+{
+    margin: 1.5em 0 1.5em 1.5em;
+    padding: 0;
+}
+a:focus, a:hover
+{
+    color: #09f;
+}
+a
+{
+    color: #06c;
+    text-decoration: underline;
+}
+blockquote
+{
+    margin: 1.5em;
+    color: #666;
+    font-style: italic;
+}
+strong, dfn
+{
+    font-weight: bold;
+}
+em, dfn
+{
+    font-style: italic;
+}
+sup, sub
+{
+    line-height: 0;
+}
+abbr, acronym
+{
+    border-bottom: 1px dotted #666;
+}
+address
+{
+    margin: 0 0 1.5em;
+    font-style: italic;
+}
+del
+{
+    color: #666;
+}
+pre
+{
+    margin: 1.5em 0;
+    white-space: pre;
+}
+pre, code, tt
+{
+    font: 1em 'andale mono' , 'lucida console' , monospace;
+    line-height: 1.5;
+}
+li ul, li ol
+{
+    margin: 0;
+}
+ul, ol
+{
+    margin: 0 1.5em 1.5em 0;
+    padding-left: 1.5em;
+}
+ul
+{
+    list-style-type: disc;
+}
+ol
+{
+    list-style-type: decimal;
+}
+dl
+{
+    margin: 0 0 1.5em 0;
+}
+dl dt
+{
+    font-weight: bold;
+}
+dd
+{
+    margin-left: 1.5em;
+}
+table
+{
+    margin-bottom: 1.4em;
+    width: 100%;
+}
+th
+{
+    font-weight: bold;
+}
+thead th
+{
+    background: #c3d9ff;
+}
+th, td, caption
+{
+    padding: 4px 10px 4px 5px;
+}
+tbody tr:nth-child(even) td, tbody tr.even td
+{
+    background: #e5ecf9;
+}
+tfoot
+{
+    font-style: italic;
+}
+caption
+{
+    background: #eee;
+}
+.small
+{
+    font-size: .8em;
+    margin-bottom: 1.875em;
+    line-height: 1.875em;
+}
+.large
+{
+    font-size: 1.2em;
+    line-height: 2.5em;
+    margin-bottom: 1.25em;
+}
+.hide
+{
+    display: none;
+}
+.quiet
+{
+    color: #666;
+}
+.loud
+{
+    color: #000;
+}
+.highlight
+{
+    background: #ff0;
+}
+.added
+{
+    background: #060;
+    color: #fff;
+}
+.removed
+{
+    background: #900;
+    color: #fff;
+}
+.first
+{
+    margin-left: 0;
+    padding-left: 0;
+}
+.last
+{
+    margin-right: 0;
+    padding-right: 0;
+}
+.top
+{
+    margin-top: 0;
+    padding-top: 0;
+}
+.bottom
+{
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
 
 /* forms.css */
-label {font-weight:bold;}
-fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
-legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}
-fieldset, #IE8#HACK {padding-top:1.4em;}
-legend, #IE8#HACK {margin-top:0;margin-bottom:0;}
-input[type=text], input[type=password], input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
-input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;}
-select {background-color:#fff;border-width:1px;border-style:solid;}
-input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
-input.text, input.title {width:300px;padding:5px;}
-input.title {font-size:1.5em;}
-textarea {width:390px;height:250px;padding:5px;}
-form.inline {line-height:3;}
-form.inline p {margin-bottom:0;}
-.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
-.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}
-.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}
-.success {background:#e6efc2;color:#264409;border-color:#c6d880;}
-.info {background:#d5edf8;color:#205791;border-color:#92cae4;}
-.error a, .alert a {color:#8a1f11;}
-.notice a {color:#514721;}
-.success a {color:#264409;}
-.info a {color:#205791;}
+fieldset
+{
+    padding: 0 1.4em 1.4em 1.4em;
+    margin: 0 0 1.5em 0;
+    border: 1px solid #ccc;
+}
+legend
+{
+    font-weight: bold;
+    font-size: 1.2em;
+    margin-top: -0.2em;
+    margin-bottom: 1em;
+}
+fieldset, #IE8#HACK
+{
+    padding-top: 1.4em;
+}
+legend, #IE8#HACK
+{
+    margin-top: 0;
+    margin-bottom: 0;
+}
+input[type=text], input[type=password], input.text, input.title, textarea
+{
+    background-color: #fff;
+    border: 1px solid #bbb;
+}
+input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus
+{
+    border-color: #666;
+}
+select
+{
+    background-color: #fff;
+    border-width: 1px;
+    border-style: solid;
+}
+input[type=text], input[type=password], input.text, input.title, textarea, select
+{
+    margin: 0.5em 0;
+}
+input.text, input.title
+{
+    width: 300px;
+    padding: 5px;
+}
+input.title
+{
+    font-size: 1.5em;
+}
+textarea
+{
+    width: 390px;
+    height: 250px;
+    padding: 5px;
+}
+form.inline
+{
+    line-height: 3;
+}
+form.inline p
+{
+    margin-bottom: 0;
+}
+.error, .alert, .notice, .success, .info
+{
+    padding: 0.8em;
+    margin-bottom: 1em;
+    border: 2px solid #ddd;
+}
+.error, .alert
+{
+    background: #fbe3e4;
+    color: #8a1f11;
+    border-color: #fbc2c4;
+}
+.notice
+{
+    background: #fff6bf;
+    color: #514721;
+    border-color: #ffd324;
+}
+.success
+{
+    background: #e6efc2;
+    color: #264409;
+    border-color: #c6d880;
+}
+.info
+{
+    background: #d5edf8;
+    color: #205791;
+    border-color: #92cae4;
+}
+.error a, .alert a
+{
+    color: #8a1f11;
+}
+.notice a
+{
+    color: #514721;
+}
+.success a
+{
+    color: #264409;
+}
+.info a
+{
+    color: #205791;
+}
 
 /* grid.css */
-.container {width:1190px;margin:0 auto;}
-.showgrid {background:url(src/grid.png);}
-.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}
-.last {margin-right:0;}
-.span-1 {width:40px;}
-.span-2 {width:90px;}
-.span-3 {width:140px;}
-.span-4 {width:190px;}
-.span-5 {width:240px;}
-.span-6 {width:290px;}
-.span-7 {width:340px;}
-.span-8 {width:390px;}
-.span-9 {width:440px;}
-.span-10 {width:490px;}
-.span-11 {width:540px;}
-.span-12 {width:590px;}
-.span-13 {width:640px;}
-.span-14 {width:690px;}
-.span-15 {width:740px;}
-.span-16 {width:790px;}
-.span-17 {width:840px;}
-.span-18 {width:890px;}
-.span-19 {width:940px;}
-.span-20 {width:990px;}
-.span-21 {width:1040px;}
-.span-22 {width:1090px;}
-.span-23 {width:1140px;}
-.span-24 {width:1190px;margin-right:0;}
-input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}
-input.span-1, textarea.span-1 {width:28px;}
-input.span-2, textarea.span-2 {width:78px;}
-input.span-3, textarea.span-3 {width:128px;}
-input.span-4, textarea.span-4 {width:178px;}
-input.span-5, textarea.span-5 {width:228px;}
-input.span-6, textarea.span-6 {width:278px;}
-input.span-7, textarea.span-7 {width:328px;}
-input.span-8, textarea.span-8 {width:378px;}
-input.span-9, textarea.span-9 {width:428px;}
-input.span-10, textarea.span-10 {width:478px;}
-input.span-11, textarea.span-11 {width:528px;}
-input.span-12, textarea.span-12 {width:578px;}
-input.span-13, textarea.span-13 {width:628px;}
-input.span-14, textarea.span-14 {width:678px;}
-input.span-15, textarea.span-15 {width:728px;}
-input.span-16, textarea.span-16 {width:778px;}
-input.span-17, textarea.span-17 {width:828px;}
-input.span-18, textarea.span-18 {width:878px;}
-input.span-19, textarea.span-19 {width:928px;}
-input.span-20, textarea.span-20 {width:978px;}
-input.span-21, textarea.span-21 {width:1028px;}
-input.span-22, textarea.span-22 {width:1078px;}
-input.span-23, textarea.span-23 {width:1128px;}
-input.span-24, textarea.span-24 {width:1178px;}
-.append-1 {padding-right:50px;}
-.append-2 {padding-right:100px;}
-.append-3 {padding-right:150px;}
-.append-4 {padding-right:200px;}
-.append-5 {padding-right:250px;}
-.append-6 {padding-right:300px;}
-.append-7 {padding-right:350px;}
-.append-8 {padding-right:400px;}
-.append-9 {padding-right:450px;}
-.append-10 {padding-right:500px;}
-.append-11 {padding-right:550px;}
-.append-12 {padding-right:600px;}
-.append-13 {padding-right:650px;}
-.append-14 {padding-right:700px;}
-.append-15 {padding-right:750px;}
-.append-16 {padding-right:800px;}
-.append-17 {padding-right:850px;}
-.append-18 {padding-right:900px;}
-.append-19 {padding-right:950px;}
-.append-20 {padding-right:1000px;}
-.append-21 {padding-right:1050px;}
-.append-22 {padding-right:1100px;}
-.append-23 {padding-right:1150px;}
-.prepend-1 {padding-left:50px;}
-.prepend-2 {padding-left:100px;}
-.prepend-3 {padding-left:150px;}
-.prepend-4 {padding-left:200px;}
-.prepend-5 {padding-left:250px;}
-.prepend-6 {padding-left:300px;}
-.prepend-7 {padding-left:350px;}
-.prepend-8 {padding-left:400px;}
-.prepend-9 {padding-left:450px;}
-.prepend-10 {padding-left:500px;}
-.prepend-11 {padding-left:550px;}
-.prepend-12 {padding-left:600px;}
-.prepend-13 {padding-left:650px;}
-.prepend-14 {padding-left:700px;}
-.prepend-15 {padding-left:750px;}
-.prepend-16 {padding-left:800px;}
-.prepend-17 {padding-left:850px;}
-.prepend-18 {padding-left:900px;}
-.prepend-19 {padding-left:950px;}
-.prepend-20 {padding-left:1000px;}
-.prepend-21 {padding-left:1050px;}
-.prepend-22 {padding-left:1100px;}
-.prepend-23 {padding-left:1150px;}
-.border {padding-right:4px;margin-right:5px;border-right:1px solid #ddd;}
-.colborder {padding-right:29px;margin-right:30px;border-right:1px solid #ddd;}
-.pull-1 {margin-left:-50px;}
-.pull-2 {margin-left:-100px;}
-.pull-3 {margin-left:-150px;}
-.pull-4 {margin-left:-200px;}
-.pull-5 {margin-left:-250px;}
-.pull-6 {margin-left:-300px;}
-.pull-7 {margin-left:-350px;}
-.pull-8 {margin-left:-400px;}
-.pull-9 {margin-left:-450px;}
-.pull-10 {margin-left:-500px;}
-.pull-11 {margin-left:-550px;}
-.pull-12 {margin-left:-600px;}
-.pull-13 {margin-left:-650px;}
-.pull-14 {margin-left:-700px;}
-.pull-15 {margin-left:-750px;}
-.pull-16 {margin-left:-800px;}
-.pull-17 {margin-left:-850px;}
-.pull-18 {margin-left:-900px;}
-.pull-19 {margin-left:-950px;}
-.pull-20 {margin-left:-1000px;}
-.pull-21 {margin-left:-1050px;}
-.pull-22 {margin-left:-1100px;}
-.pull-23 {margin-left:-1150px;}
-.pull-24 {margin-left:-1200px;}
-.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
-.push-1 {margin:0 -50px 1.5em 50px;}
-.push-2 {margin:0 -100px 1.5em 100px;}
-.push-3 {margin:0 -150px 1.5em 150px;}
-.push-4 {margin:0 -200px 1.5em 200px;}
-.push-5 {margin:0 -250px 1.5em 250px;}
-.push-6 {margin:0 -300px 1.5em 300px;}
-.push-7 {margin:0 -350px 1.5em 350px;}
-.push-8 {margin:0 -400px 1.5em 400px;}
-.push-9 {margin:0 -450px 1.5em 450px;}
-.push-10 {margin:0 -500px 1.5em 500px;}
-.push-11 {margin:0 -550px 1.5em 550px;}
-.push-12 {margin:0 -600px 1.5em 600px;}
-.push-13 {margin:0 -650px 1.5em 650px;}
-.push-14 {margin:0 -700px 1.5em 700px;}
-.push-15 {margin:0 -750px 1.5em 750px;}
-.push-16 {margin:0 -800px 1.5em 800px;}
-.push-17 {margin:0 -850px 1.5em 850px;}
-.push-18 {margin:0 -900px 1.5em 900px;}
-.push-19 {margin:0 -950px 1.5em 950px;}
-.push-20 {margin:0 -1000px 1.5em 1000px;}
-.push-21 {margin:0 -1050px 1.5em 1050px;}
-.push-22 {margin:0 -1100px 1.5em 1100px;}
-.push-23 {margin:0 -1150px 1.5em 1150px;}
-.push-24 {margin:0 -1200px 1.5em 1200px;}
-.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:left;position:relative;}
-div.prepend-top, .prepend-top {margin-top:1.5em;}
-div.append-bottom, .append-bottom {margin-bottom:1.5em;}
-.box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;}
-hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 1.45em;border:none;}
-hr.space {background:#fff;color:#fff;visibility:hidden;}
-.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
-.clearfix, .container {display:block;}
-.clear {clear:both;}
\ No newline at end of file
+.container
+{
+    width: 1190px;
+    margin: 0 auto;
+}
+.showgrid
+{
+    background: url(src/grid.png);
+}
+.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24
+{
+    float: left;
+    margin-right: 10px;
+}
+.last
+{
+    margin-right: 0;
+}
+.span-1
+{
+    width: 40px;
+}
+.span-2
+{
+    width: 90px;
+}
+.span-3
+{
+    width: 140px;
+}
+.span-4
+{
+    width: 190px;
+}
+.span-5
+{
+    width: 240px;
+}
+.span-6
+{
+    width: 290px;
+}
+.span-7
+{
+    width: 340px;
+}
+.span-8
+{
+    width: 390px;
+}
+.span-9
+{
+    width: 440px;
+}
+.span-10
+{
+    width: 490px;
+}
+.span-11
+{
+    width: 540px;
+}
+.span-12
+{
+    width: 590px;
+}
+.span-13
+{
+    width: 640px;
+}
+.span-14
+{
+    width: 690px;
+}
+.span-15
+{
+    width: 740px;
+}
+.span-16
+{
+    width: 790px;
+}
+.span-17
+{
+    width: 840px;
+}
+.span-18
+{
+    width: 890px;
+}
+.span-19
+{
+    width: 940px;
+}
+.span-20
+{
+    width: 990px;
+}
+.span-21
+{
+    width: 1040px;
+}
+.span-22
+{
+    width: 1090px;
+}
+.span-23
+{
+    width: 1140px;
+}
+.span-24
+{
+    width: 1190px;
+    margin-right: 0;
+}
+input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24
+{
+    border-left-width: 1px;
+    border-right-width: 1px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+input.span-1, textarea.span-1
+{
+    width: 28px;
+}
+input.span-2, textarea.span-2
+{
+    width: 78px;
+}
+input.span-3, textarea.span-3
+{
+    width: 128px;
+}
+input.span-4, textarea.span-4
+{
+    width: 178px;
+}
+input.span-5, textarea.span-5
+{
+    width: 228px;
+}
+input.span-6, textarea.span-6
+{
+    width: 278px;
+}
+input.span-7, textarea.span-7
+{
+    width: 328px;
+}
+input.span-8, textarea.span-8
+{
+    width: 378px;
+}
+input.span-9, textarea.span-9
+{
+    width: 428px;
+}
+input.span-10, textarea.span-10
+{
+    width: 478px;
+}
+input.span-11, textarea.span-11
+{
+    width: 528px;
+}
+input.span-12, textarea.span-12
+{
+    width: 578px;
+}
+input.span-13, textarea.span-13
+{
+    width: 628px;
+}
+input.span-14, textarea.span-14
+{
+    width: 678px;
+}
+input.span-15, textarea.span-15
+{
+    width: 728px;
+}
+input.span-16, textarea.span-16
+{
+    width: 778px;
+}
+input.span-17, textarea.span-17
+{
+    width: 828px;
+}
+input.span-18, textarea.span-18
+{
+    width: 878px;
+}
+input.span-19, textarea.span-19
+{
+    width: 928px;
+}
+input.span-20, textarea.span-20
+{
+    width: 978px;
+}
+input.span-21, textarea.span-21
+{
+    width: 1028px;
+}
+input.span-22, textarea.span-22
+{
+    width: 1078px;
+}
+input.span-23, textarea.span-23
+{
+    width: 1128px;
+}
+input.span-24, textarea.span-24
+{
+    width: 1178px;
+}
+.append-1
+{
+    padding-right: 50px;
+}
+.append-2
+{
+    padding-right: 100px;
+}
+.append-3
+{
+    padding-right: 150px;
+}
+.append-4
+{
+    padding-right: 200px;
+}
+.append-5
+{
+    padding-right: 250px;
+}
+.append-6
+{
+    padding-right: 300px;
+}
+.append-7
+{
+    padding-right: 350px;
+}
+.append-8
+{
+    padding-right: 400px;
+}
+.append-9
+{
+    padding-right: 450px;
+}
+.append-10
+{
+    padding-right: 500px;
+}
+.append-11
+{
+    padding-right: 550px;
+}
+.append-12
+{
+    padding-right: 600px;
+}
+.append-13
+{
+    padding-right: 650px;
+}
+.append-14
+{
+    padding-right: 700px;
+}
+.append-15
+{
+    padding-right: 750px;
+}
+.append-16
+{
+    padding-right: 800px;
+}
+.append-17
+{
+    padding-right: 850px;
+}
+.append-18
+{
+    padding-right: 900px;
+}
+.append-19
+{
+    padding-right: 950px;
+}
+.append-20
+{
+    padding-right: 1000px;
+}
+.append-21
+{
+    padding-right: 1050px;
+}
+.append-22
+{
+    padding-right: 1100px;
+}
+.append-23
+{
+    padding-right: 1150px;
+}
+.prepend-1
+{
+    padding-left: 50px;
+}
+.prepend-2
+{
+    padding-left: 100px;
+}
+.prepend-3
+{
+    padding-left: 150px;
+}
+.prepend-4
+{
+    padding-left: 200px;
+}
+.prepend-5
+{
+    padding-left: 250px;
+}
+.prepend-6
+{
+    padding-left: 300px;
+}
+.prepend-7
+{
+    padding-left: 350px;
+}
+.prepend-8
+{
+    padding-left: 400px;
+}
+.prepend-9
+{
+    padding-left: 450px;
+}
+.prepend-10
+{
+    padding-left: 500px;
+}
+.prepend-11
+{
+    padding-left: 550px;
+}
+.prepend-12
+{
+    padding-left: 600px;
+}
+.prepend-13
+{
+    padding-left: 650px;
+}
+.prepend-14
+{
+    padding-left: 700px;
+}
+.prepend-15
+{
+    padding-left: 750px;
+}
+.prepend-16
+{
+    padding-left: 800px;
+}
+.prepend-17
+{
+    padding-left: 850px;
+}
+.prepend-18
+{
+    padding-left: 900px;
+}
+.prepend-19
+{
+    padding-left: 950px;
+}
+.prepend-20
+{
+    padding-left: 1000px;
+}
+.prepend-21
+{
+    padding-left: 1050px;
+}
+.prepend-22
+{
+    padding-left: 1100px;
+}
+.prepend-23
+{
+    padding-left: 1150px;
+}
+.border
+{
+    padding-right: 4px;
+    margin-right: 5px;
+    border-right: 1px solid #ddd;
+}
+.colborder
+{
+    padding-right: 29px;
+    margin-right: 30px;
+    border-right: 1px solid #ddd;
+}
+.pull-1
+{
+    margin-left: -50px;
+}
+.pull-2
+{
+    margin-left: -100px;
+}
+.pull-3
+{
+    margin-left: -150px;
+}
+.pull-4
+{
+    margin-left: -200px;
+}
+.pull-5
+{
+    margin-left: -250px;
+}
+.pull-6
+{
+    margin-left: -300px;
+}
+.pull-7
+{
+    margin-left: -350px;
+}
+.pull-8
+{
+    margin-left: -400px;
+}
+.pull-9
+{
+    margin-left: -450px;
+}
+.pull-10
+{
+    margin-left: -500px;
+}
+.pull-11
+{
+    margin-left: -550px;
+}
+.pull-12
+{
+    margin-left: -600px;
+}
+.pull-13
+{
+    margin-left: -650px;
+}
+.pull-14
+{
+    margin-left: -700px;
+}
+.pull-15
+{
+    margin-left: -750px;
+}
+.pull-16
+{
+    margin-left: -800px;
+}
+.pull-17
+{
+    margin-left: -850px;
+}
+.pull-18
+{
+    margin-left: -900px;
+}
+.pull-19
+{
+    margin-left: -950px;
+}
+.pull-20
+{
+    margin-left: -1000px;
+}
+.pull-21
+{
+    margin-left: -1050px;
+}
+.pull-22
+{
+    margin-left: -1100px;
+}
+.pull-23
+{
+    margin-left: -1150px;
+}
+.pull-24
+{
+    margin-left: -1200px;
+}
+.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24
+{
+    float: left;
+    position: relative;
+}
+.push-1
+{
+    margin: 0 -50px 1.5em 50px;
+}
+.push-2
+{
+    margin: 0 -100px 1.5em 100px;
+}
+.push-3
+{
+    margin: 0 -150px 1.5em 150px;
+}
+.push-4
+{
+    margin: 0 -200px 1.5em 200px;
+}
+.push-5
+{
+    margin: 0 -250px 1.5em 250px;
+}
+.push-6
+{
+    margin: 0 -300px 1.5em 300px;
+}
+.push-7
+{
+    margin: 0 -350px 1.5em 350px;
+}
+.push-8
+{
+    margin: 0 -400px 1.5em 400px;
+}
+.push-9
+{
+    margin: 0 -450px 1.5em 450px;
+}
+.push-10
+{
+    margin: 0 -500px 1.5em 500px;
+}
+.push-11
+{
+    margin: 0 -550px 1.5em 550px;
+}
+.push-12
+{
+    margin: 0 -600px 1.5em 600px;
+}
+.push-13
+{
+    margin: 0 -650px 1.5em 650px;
+}
+.push-14
+{
+    margin: 0 -700px 1.5em 700px;
+}
+.push-15
+{
+    margin: 0 -750px 1.5em 750px;
+}
+.push-16
+{
+    margin: 0 -800px 1.5em 800px;
+}
+.push-17
+{
+    margin: 0 -850px 1.5em 850px;
+}
+.push-18
+{
+    margin: 0 -900px 1.5em 900px;
+}
+.push-19
+{
+    margin: 0 -950px 1.5em 950px;
+}
+.push-20
+{
+    margin: 0 -1000px 1.5em 1000px;
+}
+.push-21
+{
+    margin: 0 -1050px 1.5em 1050px;
+}
+.push-22
+{
+    margin: 0 -1100px 1.5em 1100px;
+}
+.push-23
+{
+    margin: 0 -1150px 1.5em 1150px;
+}
+.push-24
+{
+    margin: 0 -1200px 1.5em 1200px;
+}
+.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24
+{
+    float: left;
+    position: relative;
+}
+div.prepend-top, .prepend-top
+{
+    margin-top: 1.5em;
+}
+div.append-bottom, .append-bottom
+{
+    margin-bottom: 1.5em;
+}
+.box
+{
+    padding: 1.5em;
+    margin-bottom: 1.5em;
+    background: #e5eCf9;
+}
+hr
+{
+    background: #ddd;
+    color: #ddd;
+    clear: both;
+    float: none;
+    width: 100%;
+    height: 1px;
+    margin: 0 0 1.45em;
+    border: none;
+}
+hr.space
+{
+    background: #fff;
+    color: #fff;
+    visibility: hidden;
+}
+.clearfix:after, .container:after
+{
+    content: "\0020";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+    overflow: hidden;
+}
+.clearfix, .container
+{
+    display: block;
+}
+.clear
+{
+    clear: both;
+}
diff --git a/NzbDrone.Web/Content/Overrides.css b/NzbDrone.Web/Content/Overrides.css
new file mode 100644
index 000000000..ae70bb954
--- /dev/null
+++ b/NzbDrone.Web/Content/Overrides.css
@@ -0,0 +1,11 @@
+/*YUI dropdown*/
+.yui3-aclist
+{
+    z-index: 100 !important;
+    width: auto !important;
+}
+
+.yui3-aclist-item-active
+{
+    background: #065EFE !important;
+}
\ No newline at end of file
diff --git a/NzbDrone.Web/Content/Settings.css b/NzbDrone.Web/Content/Settings.css
index 6ba5707bf..eee37c080 100644
--- a/NzbDrone.Web/Content/Settings.css
+++ b/NzbDrone.Web/Content/Settings.css
@@ -58,7 +58,6 @@ p, h1, form, button{border:0; margin:0; padding:0;}
 #stylized input, select
 {
     float:left;
-    font-size:12px;
     padding:4px 2px;
     border:solid 1px #aacfe4;
     width:200px;
diff --git a/NzbDrone.Web/Content/Site.css b/NzbDrone.Web/Content/Site.css
index a6d294583..3970a128e 100644
--- a/NzbDrone.Web/Content/Site.css
+++ b/NzbDrone.Web/Content/Site.css
@@ -6,7 +6,7 @@ h1, h2, h3
 body
 {
     background: #191919 url(images/img07.jpg) no-repeat right top;
-    font-family: "Segoe UI" , "Segoe UI Light" , Tahoma, Geneva, sans-serif;
+    font-family: "Segoe UI" , "Segoe UI Light" , Tahoma, Geneva, sans-serif !important;
     font-size: 13px;
     color: #3C3C3C;
     background-attachment: fixed;
@@ -169,6 +169,21 @@ button:active, input[type="button"]:active, input[type="submit"]:active, input[t
     border-color: #0C48B6;
 }
 
+input, select
+{
+    font-size: larger;
+    padding: 4px 2px;
+    border: solid 1px #aacfe4;
+    width: 200px;
+    margin: 2px 0 20px 10px;
+    height: 20px;
+}
+
+select
+{
+    height: 30px;
+}
+
 .listButton
 {
     padding: 2px 10px 2px 10px;
@@ -181,8 +196,7 @@ button:active, input[type="button"]:active, input[type="submit"]:active, input[t
 {
     border-bottom-style: solid;
     border-bottom-width: 5px;
-    border-bottom-color: #3C3C3C;
-    /* Set padding to prevent fieldset border from moving when button is highlighted... WINNING! */
+    border-bottom-color: #3C3C3C; /* Set padding to prevent fieldset border from moving when button is highlighted... WINNING! */
     padding-bottom: 2px;
 }
 
diff --git a/NzbDrone.Web/Controllers/AddSeriesController.cs b/NzbDrone.Web/Controllers/AddSeriesController.cs
index a5f71b593..c1ef3dcef 100644
--- a/NzbDrone.Web/Controllers/AddSeriesController.cs
+++ b/NzbDrone.Web/Controllers/AddSeriesController.cs
@@ -242,10 +242,15 @@ namespace NzbDrone.Web.Controllers
         }
 
 
-        public ActionResult RootDir()
+        public ActionResult RootList()
         {
             var rootDir = _rootFolderProvider.GetAll().Select(c => c.Path);
-            return PartialView("RootDir", rootDir);
+            return PartialView("RootList", rootDir);
+        }
+
+        public ActionResult RootDir()
+        {
+            return PartialView("RootDir");
         }
 
         public JsonResult DeleteRootDir(string path)
diff --git a/NzbDrone.Web/NzbDrone.Web.csproj b/NzbDrone.Web/NzbDrone.Web.csproj
index 2a260af66..9d9c74aca 100644
--- a/NzbDrone.Web/NzbDrone.Web.csproj
+++ b/NzbDrone.Web/NzbDrone.Web.csproj
@@ -494,6 +494,7 @@
     <Content Include="Content\Blueprint\ie.css" />
     <Content Include="Content\Blueprint\screen.css" />
     <Content Include="Content\Blueprint\liquid.css" />
+    <Content Include="Content\Overrides.css" />
     <Content Include="Content\Images\ajax-loader.gif" />
     <Content Include="Content\ie.css" />
     <Content Include="Content\Images\arrow.png" />
@@ -589,6 +590,7 @@
     <Content Include="Scripts\jquery.jgrowl.js" />
     <Content Include="Scripts\jquery-tgc-countdown-1.0.js" />
     <Content Include="Scripts\jquery.simpledropdown.js" />
+    <Content Include="Scripts\jquery.watermark.min.js" />
     <Content Include="Scripts\Notification.js" />
     <Content Include="Views\AddSeries\Index.cshtml" />
     <Content Include="Views\AddSeries\AddNew.cshtml" />
@@ -686,6 +688,9 @@
   <ItemGroup>
     <Content Include="Views\AddSeries\Test.cshtml" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\AddSeries\RootList.cshtml" />
+  </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
diff --git a/NzbDrone.Web/Scripts/jquery.watermark.min.js b/NzbDrone.Web/Scripts/jquery.watermark.min.js
new file mode 100644
index 000000000..11d2e38eb
--- /dev/null
+++ b/NzbDrone.Web/Scripts/jquery.watermark.min.js
@@ -0,0 +1,12 @@
+/*
+* jQuery Watermark plugin
+* Version 1.2.1 (7-DEC-2010)
+* @requires jQuery v1.3 or later
+*
+* Examples at: http://mario.ec/static/jq-watermark/
+* Copyright (c) 2010 Mario Estrada
+* Licensed under the MIT license:
+* http://www.opensource.org/licenses/mit-license.php
+*
+*/
+(function (a) { var b = a.browser.msie && a.browser.version < 8, c = 4; a.watermarker = function () { }, a.extend(a.watermarker, { defaults: { color: "#999", left: 0, top: 0, fallback: !1, animDuration: 300, minOpacity: .6 }, setDefaults: function (b) { a.extend(a.watermarker.defaults, b) }, checkVal: function (b, c, d) { b.length == 0 ? a(c).show() : a(c).hide(); return b.length > 0 }, html5_support: function () { var a = document.createElement("input"); return "placeholder" in a } }), a.fn.watermark = function (d, e) { var e, f; e = a.extend(a.watermarker.defaults, e), f = this.filter("textarea, input:not(:checkbox,:radio,:file,:submit,:reset)"); if (!e.fallback || !a.watermarker.html5_support()) { f.each(function () { var f, g, h, i, j, k, l, m, n = 0, o, p; f = a(this), f.attr("data-jq-watermark") != "processed" && (g = f.attr("placeholder") != undefined && f.attr("placeholder") != "" ? "placeholder" : "title", h = d === undefined || d === "" ? a(this).attr(g) : d, i = a('<span class="watermark_container"></span>'), j = a('<span class="watermark">' + h + "</span>"), g == "placeholder" && f.removeAttr("placeholder"), i.css({ display: "inline-block", position: "relative" }), b && i.css({ zoom: 1, display: "inline" }), f.wrap(i).attr("data-jq-watermark", "processed"), this.nodeName.toLowerCase() == "textarea" ? (e_height = f.css("line-height"), e_height = e_height === "normal" ? parseInt(f.css("font-size")) : e_height, n = f.css("padding-top") != "auto" ? parseInt(f.css("padding-top")) : 0) : (e_height = f.outerHeight(), e_height <= 0 && (e_height = f.css("padding-top") != "auto" ? parseInt(f.css("padding-top")) : 0, e_height += f.css("padding-bottom") != "auto" ? parseInt(f.css("padding-bottom")) : 0, e_height += f.css("height") != "auto" ? parseInt(f.css("height")) : 0)), n += f.css("margin-top") != "auto" ? parseInt(f.css("margin-top")) : 0, k = f.css("margin-left") != "auto" ? parseInt(f.css("margin-left")) : 0, k += f.css("padding-left") != "auto" ? parseInt(f.css("padding-left")) : 0, j.css({ position: "absolute", display: "block", fontFamily: f.css("font-family"), fontSize: f.css("font-size"), color: e.color, left: c + e.left + k, top: e.top + n, height: e_height, lineHeight: e_height + "px", textAlign: "left", pointerEvents: "none" }).data("jq_watermark_element", f), a.watermarker.checkVal(f.val(), j), j.click(function () { a(a(this).data("jq_watermark_element")).trigger("click").trigger("focus") }), f.before(j).bind("focus.jq_watermark", function () { a.watermarker.checkVal(a(this).val(), j) || j.stop().fadeTo(e.animDuration, e.minOpacity) }).bind("blur.jq_watermark change.jq_watermark", function () { a.watermarker.checkVal(a(this).val(), j) || j.stop().fadeTo(e.animDuration, 1) }).bind("keydown.jq_watermark, paste.jq_watermark", function (b) { a(j).hide() }).bind("keyup.jq_watermark", function (b) { a.watermarker.checkVal(a(this).val(), j) })) }); return this } }, a(".jq_watermark").watermark() })(jQuery)
\ No newline at end of file
diff --git a/NzbDrone.Web/Views/AddSeries/RootDir.cshtml b/NzbDrone.Web/Views/AddSeries/RootDir.cshtml
index 81bf2f81b..7ef28a001 100644
--- a/NzbDrone.Web/Views/AddSeries/RootDir.cshtml
+++ b/NzbDrone.Web/Views/AddSeries/RootDir.cshtml
@@ -1,44 +1,52 @@
-@using NzbDrone.Web.Models
-@model IEnumerable<String>
-@{
+@{
     Layout = null;
 }
+<div>
+    <input id="rootDirInput" type="text" style="width: 400px" />
+    <button id="saveDir">
+        Add</button>
+</div>
 <div id="rootDirs">
-    @foreach (var root in Model)
-    {
-        <div class="actionButton delete">
-            <img src="/Content/Images/x_16.png" alt="delete" id='@root'/>
-            <span>@root</span>
-        </div>
-    }
+    @{Html.RenderAction("RootList");}
 </div>
-<br />
-<label for="ac-input">
-    Enter a GitHub username:</label>
-<input id="rootDirInput" type="text" style="width: 100px" />
-<button id="saveDir">
-    Save</button>
 @(Html.Telerik().ScriptRegistrar().DefaultGroup(c => c.Add("http://ajax.googleapis.com/ajax/libs/yui/3.3.0/build/yui/yui-min.js")
                                                                                           .Add("AutoComplete.js")
                                                                  ).OnDocumentReady("bindFolderAutoComplete('#rootDirInput')"))
+
+@(Html.Telerik().ScriptRegistrar().OnDocumentReady("onRootReady()"))
+
 <script type="text/javascript">
 
-    $(document).ready(function () {
+
+    function onRootReady() {
+
+        $('#rootDirInput').watermark('Start typing to add new root folder...');
+
+        $('#rootDirs .actionButton img').live('click',
+            function (image) {
+                var path = $(image.srcElement).attr('id');
+                $.post('@Url.Action("DeleteRootDir", "AddSeries")', { Path: path }, function () {
+                    refreshRoot();
+                });
+            });
+
         $('#saveDir').click(saveRootDir);
 
         function saveRootDir() {
             var path = $("#rootDirInput").val();
-            $.post("/AddSeries/SaveRootDir", { Path: path });
+            $.post('@Url.Action("SaveRootDir", "AddSeries")', { Path: path }, function () {
+                refreshRoot();
+                $("#rootDirInput").val('');
+            });
+
         }
-    });
 
 
-    $(document).ready(function () {
-        $('#rootDirs .actionButton img').live('click',
-            function (image) {
-                var path = $(image.srcElement).attr('id');
-                $.post("/AddSeries/DeleteRootDir", { Path: path });
+        function refreshRoot() {
+            $.get('@Url.Action("RootList", "AddSeries")', function (data) {
+                $('#rootDirs').html(data);
             });
-    });
+        }
+    }
     
 </script>
diff --git a/NzbDrone.Web/Views/AddSeries/RootList.cshtml b/NzbDrone.Web/Views/AddSeries/RootList.cshtml
new file mode 100644
index 000000000..2621ae8f6
--- /dev/null
+++ b/NzbDrone.Web/Views/AddSeries/RootList.cshtml
@@ -0,0 +1,14 @@
+@model IEnumerable<String>
+@if (Model.Count() == 0)
+{
+    <div class="actionButton delete">
+        <span>You have no root folders added.</span>
+    </div>
+}
+@foreach (var root in Model)
+{
+    <div class="actionButton delete">
+        <img src="/Content/Images/x_16.png" alt="delete" id='@root'/>
+        <span>@root</span>
+    </div>
+}
diff --git a/NzbDrone.Web/Views/Shared/_Layout.cshtml b/NzbDrone.Web/Views/Shared/_Layout.cshtml
index f8cdf7abc..dee6c1d88 100644
--- a/NzbDrone.Web/Views/Shared/_Layout.cshtml
+++ b/NzbDrone.Web/Views/Shared/_Layout.cshtml
@@ -5,9 +5,7 @@
     <link rel="SHORTCUT ICON" href="../../favicon.ico" />
     <title>NZBDrone</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
     <link href="/Content/Blueprint/screen.css" rel="stylesheet" type="text/css" />
-    <link href="/Content/Blueprint/ie.css" rel="stylesheet" type="text/css" />
     <link type="text/css" href="http://aspnet-skins.telerikstatic.com/mvcz/2011.1.414/telerik.common.min.css"
         rel="stylesheet" />
     <link type="text/css" href="http://aspnet-skins.telerikstatic.com/mvcz/2011.1.414/telerik.sitefinity.min.css"
@@ -16,7 +14,8 @@
         rel="stylesheet" />
     <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
     <link href="/Content/Notibar.css" rel="stylesheet" type="text/css" />
-        <link href="/Content/ActionButton.css" rel="stylesheet" type="text/css" />
+    <link href="/Content/ActionButton.css" rel="stylesheet" type="text/css" />
+    <link href="/Content/overrides.css" rel="stylesheet" type="text/css" />
     @RenderSection("HeaderContent", required: false)
 </head>
 <body>
@@ -55,12 +54,13 @@
     @(Html.Telerik().ScriptRegistrar().Scripts(
         c => c.AddGroup("CDN", group => group
                     .Add("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js")
-                    //.Add("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js")
+            //.Add("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js")
                     .Add("http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"))
                     .AddGroup("3rdParty", group => group
                     .Add("jquery.form.js")
                     .Add("jquery.jgrowl.js")
                     .Add("jquery-tgc-countdown-1.0.js")
+                                    .Add("jquery.watermark.min.js")
                     .Add("MicrosoftMvcValidation.js"))
 
                     .AddGroup("NzbDrone", group => group