commit 5c4713f8df7ff93f456463d0b31f68848c05b5ff
Author: Olga Brani <olgabrani@grnet.gr>
Date:   Thu Sep 26 12:16:19 2013 +0300

    new ui: functionality fixes for vm creation wizard
    
    * improve color-picker plugin
    * add placeholder to form fields
    * various style improvements for a tags hover states

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
index 1c7998b..4c685cb 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
@@ -265,7 +265,14 @@ ui.netOptions = function(option) {
     }
 }
     
-
+function goToByScroll(id){
+      // Remove "link" from the ID
+    id = id.replace("link", "");
+      // Scroll
+    $('html,body').animate({
+        scrollTop: $("#"+id).offset().top},
+        'slow');
+}
 $(document).ready(function(){
 
     ui.setSidebarHeight();
@@ -400,6 +407,15 @@ $(document).ready(function(){
     })
 
     $('#picker').farbtastic('#color');
+    $('.show-add-tag').click(function(e){
+        e.preventDefault();
+        $(this).parents('.tags-area').find('.snf-color-picker').slideDown();
+        goToByScroll('hide-add-tag');
+    })
+    $('.hide-add-tag').click(function(e){
+        e.preventDefault();
+        $(this).parents('.snf-color-picker').slideUp();
+    })
 
 })
 
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
index 920b51b..026d40a 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
@@ -93,7 +93,6 @@
 }
 
 .tag-demo {
-
 	@extend .circle;
 	width: 22px;
 	height: 22px;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss
index 1adf79f..9b4e2f1 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss
@@ -193,7 +193,7 @@ Overlays (Todo: clean up)
 	.middle {
 		padding-top:$bar-height;
 		.step {
-			padding:50px 0 (50px + $bar-height);
+			padding:50px 0 50px;
 			float:left;
 			position:relative;
 			width:$row-width;
@@ -409,15 +409,15 @@ Overlays (Todo: clean up)
 							margin-bottom:0.5em;
 						}
 					}
-					// .btn5 {
-					// 	&:hover {
-					// 		color:white;
-					// 	}
-					// 	&.current, &.current:hover {
-					// 		color:$overlay-color;
-					// 	}
-					// }
 				}
+				.btn5 {
+				    &:hover {
+					    color:white;
+				}
+				    &.current, &.current:hover {
+				        color:$overlay-color;
+				    }
+			    }
 				.advanced-conf-options {
 					display: none;
 					.area {
@@ -425,11 +425,6 @@ Overlays (Todo: clean up)
 						.row {
 							width:$row-small;
 						}
-						// .btn5{
-						// 	&:hover {
-						// 		color:white;
-						// 	}
-						// }
 						ul {
 							li {
 								position: relative;
@@ -493,47 +488,23 @@ Overlays (Todo: clean up)
 					}
 					.tags-area {
 						background-color: $tag-opt-area-color;
-						dt, dd { 
-							display:inline-block;
-							font-weight: normal;
-						}
-						dt {
-							width:45%;
-						}
-						dd {
-							width:30%;
-							padding-right: 25%;
-						}
-						.title {
-							position: relative;
-							left: -11px;
-							font-weight: bold;
+						.snf-color-picker {
+							display: none;
 						}
-						p {
-							position:relative;
-							left:-11px;
-						}
-						
 						#picker {
 							position: relative;
-							border: 1px solid $wizard-base-font-color;
-							padding: 6px;
 							width: 207px;
 							margin: 30px 5px;
 							display: inline-block;
-							// width: 195px;
-							// margin: auto;
 						}
-
 						.form-item {
-							// margin: auto;
-							//width: 108px;
 							display:inline-block;
 							position: relative;
 							bottom: 40px;
 						}
-
-
+						.btn5 {
+							margin-right:20px;
+						}
 
 					}
 
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
index e2abf1a..11ce19b 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
@@ -6901,29 +6901,29 @@ a.th {
   bottom: -5px;
   margin-right: 20px;
 }
-/* line 103, ../sass/_common.scss */
+/* line 102, ../sass/_common.scss */
 .tag-demo.tag4, .advanced-conf-step .tag4#color {
   background-color: #ff5e4d;
 }
-/* line 104, ../sass/_common.scss */
+/* line 103, ../sass/_common.scss */
 .tag-demo.tag5, .advanced-conf-step .tag5#color {
   background-color: #25bfda;
 }
-/* line 105, ../sass/_common.scss */
+/* line 104, ../sass/_common.scss */
 .tag-demo.tag6, .advanced-conf-step .tag6#color {
   background-color: #fbf7c5;
 }
-/* line 106, ../sass/_common.scss */
+/* line 105, ../sass/_common.scss */
 .tag-demo.tag7, .advanced-conf-step .tag7#color {
   background-color: #83a697;
 }
 
 /* Buttons and Links ----------------------------------------------- */
-/* line 114, ../sass/_common.scss */
+/* line 113, ../sass/_common.scss */
 a {
   color: #3582ac;
 }
-/* line 116, ../sass/_common.scss */
+/* line 115, ../sass/_common.scss */
 a:hover {
   color: #30c79e;
   -webkit-transition: background 300ms ease-out;
@@ -6933,7 +6933,7 @@ a:hover {
   transition: background 300ms ease-out;
 }
 
-/* line 123, ../sass/_common.scss */
+/* line 122, ../sass/_common.scss */
 .btn1, .btn2, .btn3, .upload-widget .btns a, .btn4, .btn-img, .new-btn a, .details .top .actions ul li a {
   border: 1px solid #919194;
   color: #919194;
@@ -6942,55 +6942,55 @@ a:hover {
   line-height: 1em;
   text-align: center;
 }
-/* line 131, ../sass/_common.scss */
+/* line 130, ../sass/_common.scss */
 .btn1:hover, .btn2:hover, .btn3:hover, .upload-widget .btns a:hover, .btn4:hover, .btn-img:hover, .new-btn a:hover, .details .top .actions ul li a:hover, .btn1.current, .current.btn2, .current.btn3, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .new-btn a.current, .details .top .actions ul li a.current {
   border-color: #3582ac;
   background: #3582ac;
   color: #fff;
 }
-/* line 136, ../sass/_common.scss */
+/* line 135, ../sass/_common.scss */
 .btn1.current, .current.btn2, .current.btn3, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .new-btn a.current, .details .top .actions ul li a.current {
   cursor: default;
 }
 
-/* line 141, ../sass/_common.scss */
+/* line 140, ../sass/_common.scss */
 .btn2 {
   color: #3582ac;
   background: #fff;
   border-color: #3582ac;
 }
-/* line 147, ../sass/_common.scss */
+/* line 146, ../sass/_common.scss */
 .btn2:hover, .btn2.current {
   background: transparent;
   border-color: #fff;
 }
 
-/* line 153, ../sass/_common.scss */
+/* line 152, ../sass/_common.scss */
 .btn3, .upload-widget .btns a {
   color: #fff;
   border-color: #fff;
 }
-/* line 158, ../sass/_common.scss */
+/* line 157, ../sass/_common.scss */
 .btn3:hover, .upload-widget .btns a:hover, .btn3.current, .upload-widget .btns a.current {
   color: #3582ac;
   background: #fff;
   border-color: #fff;
 }
 
-/* line 165, ../sass/_common.scss */
+/* line 164, ../sass/_common.scss */
 .btn4 {
   color: #fff;
   border-color: #fff;
   background: #3582ac;
 }
-/* line 171, ../sass/_common.scss */
+/* line 170, ../sass/_common.scss */
 .btn4:hover, .btn4.current {
   color: #3582ac;
   border-color: #3582ac;
   background: #fff;
 }
 
-/* line 178, ../sass/_common.scss */
+/* line 177, ../sass/_common.scss */
 .btn5, .wizard .middle .step .os li .btn-col a, .wizard .middle .step .flavor li .options-bar .options li a {
   border: 1px solid white;
   color: white;
@@ -7001,71 +7001,71 @@ a:hover {
   text-align: center;
   font-size: 0.75em;
 }
-/* line 187, ../sass/_common.scss */
+/* line 186, ../sass/_common.scss */
 .btn5:hover, .wizard .middle .step .os li .btn-col a:hover, .wizard .middle .step .flavor li .options-bar .options li a:hover {
   border-width: 2px;
   line-height: 26px;
   padding: 0 19px;
 }
-/* line 192, ../sass/_common.scss */
+/* line 191, ../sass/_common.scss */
 .btn5.current, .wizard .middle .step .os li .btn-col a.current, .wizard .middle .step .flavor li .options-bar .options li a.current {
   background: white;
   color: #3582ac;
 }
 
-/* line 198, ../sass/_common.scss */
+/* line 197, ../sass/_common.scss */
 .btn-img {
   border-color: #3582ac;
 }
-/* line 201, ../sass/_common.scss */
+/* line 200, ../sass/_common.scss */
 .btn-img:hover {
   background: transparent;
 }
-/* line 205, ../sass/_common.scss */
+/* line 204, ../sass/_common.scss */
 .btn-img a img, .btn-img a span {
   margin-left: 5px;
 }
 
 /* Layout ----------------------------------------------- */
-/* line 213, ../sass/_common.scss */
+/* line 212, ../sass/_common.scss */
 html, body {
   height: 100%;
 }
 
-/* line 217, ../sass/_common.scss */
+/* line 216, ../sass/_common.scss */
 body {
   padding-top: 130px;
 }
 
-/* line 221, ../sass/_common.scss */
+/* line 220, ../sass/_common.scss */
 .overlay-wrapper {
   min-height: 100%;
 }
 
-/* line 225, ../sass/_common.scss */
+/* line 224, ../sass/_common.scss */
 .lt-sidebar {
   width: 250px;
   float: left;
 }
-/* line 228, ../sass/_common.scss */
+/* line 227, ../sass/_common.scss */
 .lt-sidebar.nav {
   margin-top: 0;
   font-size: 1em;
   overflow: auto;
 }
-/* line 233, ../sass/_common.scss */
+/* line 232, ../sass/_common.scss */
 .lt-sidebar + .main {
   overflow: hidden;
 }
 
-/* line 238, ../sass/_common.scss */
+/* line 237, ../sass/_common.scss */
 .main {
   padding: 0 40px;
   overflow: hidden;
 }
 
 /* Header ----------------------------------------------- */
-/* line 247, ../sass/_common.scss */
+/* line 246, ../sass/_common.scss */
 .header {
   position: fixed;
   top: 0;
@@ -7079,7 +7079,7 @@ body {
   background: white;
   z-index: 100;
 }
-/* line 259, ../sass/_common.scss */
+/* line 258, ../sass/_common.scss */
 .header .icons-nav {
   position: absolute;
   left: 2.1875em;
@@ -7087,15 +7087,15 @@ body {
   line-height: 70px;
   top: 0;
 }
-/* line 266, ../sass/_common.scss */
+/* line 265, ../sass/_common.scss */
 .header .logo {
   text-align: center;
 }
-/* line 268, ../sass/_common.scss */
+/* line 267, ../sass/_common.scss */
 .header .logo img {
   max-height: 30px;
 }
-/* line 271, ../sass/_common.scss */
+/* line 270, ../sass/_common.scss */
 .header .logo h2 {
   display: none;
   margin: 0;
@@ -7103,7 +7103,7 @@ body {
   color: #919194;
   font-weight: normal;
 }
-/* line 279, ../sass/_common.scss */
+/* line 278, ../sass/_common.scss */
 .header .login {
   position: absolute;
   top: 0;
@@ -7113,7 +7113,7 @@ body {
 }
 
 /* Actions Bar ----------------------------------------------- */
-/* line 291, ../sass/_common.scss */
+/* line 290, ../sass/_common.scss */
 .actions-bar {
   position: fixed;
   left: 0;
@@ -7126,22 +7126,22 @@ body {
   background: white;
   border-bottom: 1px solid #919194;
 }
-/* line 302, ../sass/_common.scss */
+/* line 301, ../sass/_common.scss */
 .actions-bar .row {
   position: relative;
   height: 60px;
 }
-/* line 306, ../sass/_common.scss */
+/* line 305, ../sass/_common.scss */
 .actions-bar ul {
   margin: 0;
 }
-/* line 308, ../sass/_common.scss */
+/* line 307, ../sass/_common.scss */
 .actions-bar ul li {
   list-style: none outside none;
   display: inline-block;
   line-height: 60px;
 }
-/* line 312, ../sass/_common.scss */
+/* line 311, ../sass/_common.scss */
 .actions-bar ul li a {
   display: block;
   color: #dfdfdf;
@@ -7149,39 +7149,39 @@ body {
   padding: 0 20px;
   border: 1px solid transparent;
 }
-/* line 318, ../sass/_common.scss */
+/* line 317, ../sass/_common.scss */
 .actions-bar ul li a.active, .actions-bar ul .items-list li .container:hover a.check, .items-list .actions-bar ul li .container:hover a.check {
   color: #919194;
 }
-/* line 320, ../sass/_common.scss */
+/* line 319, ../sass/_common.scss */
 .actions-bar ul li a.active:hover, .actions-bar ul .items-list li .container:hover a.check:hover, .items-list .actions-bar ul li .container:hover a.check:hover {
   color: #3582ac;
   cursor: pointer;
 }
-/* line 325, ../sass/_common.scss */
+/* line 324, ../sass/_common.scss */
 .actions-bar ul li a:hover {
   cursor: default;
 }
 
-/* line 333, ../sass/_common.scss */
+/* line 332, ../sass/_common.scss */
 .new-btn {
   position: absolute;
   left: 0;
   bottom: 0;
   height: 60px;
 }
-/* line 340, ../sass/_common.scss */
+/* line 339, ../sass/_common.scss */
 .new-btn a span {
   font-size: 1.25em;
 }
 
 /* Icons Navigation ----------------------------------------------- */
-/* line 348, ../sass/_common.scss */
+/* line 347, ../sass/_common.scss */
 .icons-nav {
   margin: 0;
   padding: 0;
 }
-/* line 350, ../sass/_common.scss */
+/* line 349, ../sass/_common.scss */
 .icons-nav li {
   display: inline-block;
   margin: 0 0.3125em;
@@ -7192,25 +7192,25 @@ body {
   text-align: center;
   overflow: hidden;
 }
-/* line 359, ../sass/_common.scss */
+/* line 358, ../sass/_common.scss */
 .icons-nav li a {
   color: #333333;
 }
-/* line 361, ../sass/_common.scss */
+/* line 360, ../sass/_common.scss */
 .icons-nav li a:hover, .icons-nav li a.current {
   font-size: 30px;
   color: #30c79e;
 }
 
 /* Top info  ----------------------------------------------- */
-/* line 374, ../sass/_common.scss */
+/* line 373, ../sass/_common.scss */
 .top-info {
   padding: 50px 100px;
   position: relative;
   z-index: 10;
   display: none;
 }
-/* line 379, ../sass/_common.scss */
+/* line 378, ../sass/_common.scss */
 .top-info .close {
   position: absolute;
   right: 2.5em;
@@ -7223,31 +7223,31 @@ body {
   overflow: hidden;
 }
 
-/* line 388, ../sass/_common.scss */
+/* line 387, ../sass/_common.scss */
 .info.error {
   background: #ff5c58;
   color: #fff;
 }
 
-/* line 394, ../sass/_common.scss */
+/* line 393, ../sass/_common.scss */
 .info.alert {
   background: #3582ac;
   color: #fff;
 }
 
-/* line 399, ../sass/_common.scss */
+/* line 398, ../sass/_common.scss */
 .info.warning {
   background: #919194;
   color: #fff;
 }
 
-/* line 404, ../sass/_common.scss */
+/* line 403, ../sass/_common.scss */
 .info.success {
   background: #00a551;
   color: #fff;
 }
 
-/* line 409, ../sass/_common.scss */
+/* line 408, ../sass/_common.scss */
 .border-bottom-style1 {
   padding-bottom: 20px;
   margin-bottom: 20px;
@@ -7255,7 +7255,7 @@ body {
 }
 
 /* Progress Bar ----------------------------------------------- */
-/* line 418, ../sass/_common.scss */
+/* line 417, ../sass/_common.scss */
 .progress-bar {
   position: fixed;
   bottom: 0;
@@ -7266,25 +7266,25 @@ body {
   padding: 20px 0 20px 310px;
   color: #919194;
 }
-/* line 427, ../sass/_common.scss */
+/* line 426, ../sass/_common.scss */
 .progress-bar span.counter {
   display: inline-block;
   margin-right: 20px;
   float: left;
 }
-/* line 432, ../sass/_common.scss */
+/* line 431, ../sass/_common.scss */
 .progress-bar div.progress-wrap {
   display: inline-block;
   float: left;
   width: 40%;
   margin-right: 60px;
 }
-/* line 437, ../sass/_common.scss */
+/* line 436, ../sass/_common.scss */
 .progress-bar div.progress-wrap .progress {
   position: relative;
   top: 2px;
 }
-/* line 442, ../sass/_common.scss */
+/* line 441, ../sass/_common.scss */
 .progress-bar span.more {
   display: inline-block;
 }
@@ -8360,7 +8360,7 @@ Overlays (Todo: clean up)
 }
 /* line 195, ../sass/_overlays.scss */
 .wizard .middle .step {
-  padding: 50px 0 110px;
+  padding: 50px 0 50px;
   float: left;
   position: relative;
   width: 75em;
@@ -8600,6 +8600,14 @@ Overlays (Todo: clean up)
   font-size: 1em;
   margin-bottom: 0.5em;
 }
+/* line 414, ../sass/_overlays.scss */
+.wizard .middle .step .advanced-conf-step .btn5:hover, .wizard .middle .step .advanced-conf-step .os li .btn-col a:hover, .wizard .middle .step .os li .btn-col .advanced-conf-step a:hover, .wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a:hover, .wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a:hover {
+  color: white;
+}
+/* line 417, ../sass/_overlays.scss */
+.wizard .middle .step .advanced-conf-step .btn5.current, .wizard .middle .step .advanced-conf-step .os li .btn-col a.current, .wizard .middle .step .os li .btn-col .advanced-conf-step a.current, .wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current, .wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current, .wizard .middle .step .advanced-conf-step .btn5.current:hover, .wizard .middle .step .advanced-conf-step .os li .btn-col a.current:hover, .wizard .middle .step .os li .btn-col .advanced-conf-step a.current:hover, .wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current:hover, .wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current:hover {
+  color: #485057;
+}
 /* line 421, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options {
   display: none;
@@ -8612,17 +8620,17 @@ Overlays (Todo: clean up)
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .area .row {
   width: 37.5em;
 }
-/* line 434, ../sass/_overlays.scss */
+/* line 429, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li {
   position: relative;
   list-style: none outside none;
   margin-bottom: 7px;
 }
-/* line 439, ../sass/_overlays.scss */
+/* line 434, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li.checkbox:hover {
   cursor: pointer;
 }
-/* line 443, ../sass/_overlays.scss */
+/* line 438, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li h3 {
   width: 18.75em;
   color: white;
@@ -8631,15 +8639,15 @@ Overlays (Todo: clean up)
   margin: 0 20px 0 0;
   display: inline-block;
 }
-/* line 454, ../sass/_overlays.scss */
+/* line 449, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area {
   background-color: #ff7049;
 }
-/* line 457, ../sass/_overlays.scss */
+/* line 452, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area {
   background-color: #ff948c;
 }
-/* line 460, ../sass/_overlays.scss */
+/* line 455, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons {
   padding-right: 20px;
   position: absolute;
@@ -8649,16 +8657,16 @@ Overlays (Todo: clean up)
   text-align: right;
   font-size: 30px;
 }
-/* line 468, ../sass/_overlays.scss */
+/* line 463, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons span {
   margin-left: 6px;
 }
-/* line 470, ../sass/_overlays.scss */
+/* line 465, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons span.snf-modem {
   position: relative;
   top: -6px;
 }
-/* line 476, ../sass/_overlays.scss */
+/* line 471, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more {
   display: none;
   background: #fff4f3;
@@ -8666,61 +8674,42 @@ Overlays (Todo: clean up)
   padding: 30px 0;
   color: #ff948c;
 }
-/* line 482, ../sass/_overlays.scss */
+/* line 477, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more h3 {
   color: #ff948c;
 }
-/* line 485, ../sass/_overlays.scss */
+/* line 480, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more .btn5, .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .os li.more .btn-col a, .wizard .middle .step .os .advanced-conf-step .advanced-conf-options .networks-area li.more .btn-col a, .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .flavor li.more .options-bar .options li a, .wizard .middle .step .flavor .advanced-conf-step .advanced-conf-options .networks-area li.more .options-bar .options li a {
   margin-top: 1em;
   border-color: #ff948c;
   color: #ff948c;
 }
-/* line 494, ../sass/_overlays.scss */
+/* line 489, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area {
   background-color: #4c71ff;
 }
-/* line 496, ../sass/_overlays.scss */
-.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area dt, .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area dd {
-  display: inline-block;
-  font-weight: normal;
-}
-/* line 500, ../sass/_overlays.scss */
-.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area dt {
-  width: 45%;
-}
-/* line 503, ../sass/_overlays.scss */
-.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area dd {
-  width: 30%;
-  padding-right: 25%;
-}
-/* line 507, ../sass/_overlays.scss */
-.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .title {
-  position: relative;
-  left: -11px;
-  font-weight: bold;
-}
-/* line 512, ../sass/_overlays.scss */
-.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area p {
-  position: relative;
-  left: -11px;
+/* line 491, ../sass/_overlays.scss */
+.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .snf-color-picker {
+  display: none;
 }
-/* line 517, ../sass/_overlays.scss */
+/* line 494, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area #picker {
   position: relative;
-  border: 1px solid white;
-  padding: 6px;
   width: 207px;
   margin: 30px 5px;
   display: inline-block;
 }
-/* line 528, ../sass/_overlays.scss */
+/* line 500, ../sass/_overlays.scss */
 .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .form-item {
   display: inline-block;
   position: relative;
   bottom: 40px;
 }
-/* line 544, ../sass/_overlays.scss */
+/* line 505, ../sass/_overlays.scss */
+.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .btn5, .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .os li .btn-col a, .wizard .middle .step .os li .btn-col .advanced-conf-step .advanced-conf-options .tags-area a, .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .flavor li .options-bar .options li a, .wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step .advanced-conf-options .tags-area a {
+  margin-right: 20px;
+}
+/* line 515, ../sass/_overlays.scss */
 .wizard .bottom {
   position: fixed;
   left: 0;
@@ -8729,12 +8718,12 @@ Overlays (Todo: clean up)
   border-top: 1px solid #333333;
   background: #485057;
 }
-/* line 551, ../sass/_overlays.scss */
+/* line 522, ../sass/_overlays.scss */
 .wizard .bottom .row {
   height: 60px;
   line-height: 60px;
 }
-/* line 555, ../sass/_overlays.scss */
+/* line 526, ../sass/_overlays.scss */
 .wizard .bottom .nav {
   height: 60px;
   line-height: 60px;
@@ -8744,26 +8733,26 @@ Overlays (Todo: clean up)
   font-size: 0.75em;
   top: 15px;
 }
-/* line 563, ../sass/_overlays.scss */
+/* line 534, ../sass/_overlays.scss */
 .wizard .bottom .nav span {
   display: inline-block;
   height: 30px;
   line-height: 30px;
   float: left;
 }
-/* line 570, ../sass/_overlays.scss */
+/* line 541, ../sass/_overlays.scss */
 .wizard .bottom .prev {
   float: left;
   height: 30px;
   padding-left: 19px;
   background: url("../images/nav-edge-lt.png") no-repeat left top;
 }
-/* line 575, ../sass/_overlays.scss */
+/* line 546, ../sass/_overlays.scss */
 .wizard .bottom .prev span {
   padding-right: 10px;
   background: url("../images/nav-lt.png") no-repeat right top;
 }
-/* line 579, ../sass/_overlays.scss */
+/* line 550, ../sass/_overlays.scss */
 .wizard .bottom .prev:hover {
   background-position: left bottom;
   -webkit-transition: background 0 ease-out;
@@ -8772,7 +8761,7 @@ Overlays (Todo: clean up)
   -o-transition: background 0 ease-out;
   transition: background 0 ease-out;
 }
-/* line 582, ../sass/_overlays.scss */
+/* line 553, ../sass/_overlays.scss */
 .wizard .bottom .prev:hover span {
   background-position: right bottom;
   -webkit-transition: background 0 ease-out;
@@ -8781,19 +8770,19 @@ Overlays (Todo: clean up)
   -o-transition: background 0 ease-out;
   transition: background 0 ease-out;
 }
-/* line 588, ../sass/_overlays.scss */
+/* line 559, ../sass/_overlays.scss */
 .wizard .bottom .next {
   float: right;
   height: 30px;
   padding-right: 19px;
   background: url("../images/nav-edge-rt.png") no-repeat right top;
 }
-/* line 593, ../sass/_overlays.scss */
+/* line 564, ../sass/_overlays.scss */
 .wizard .bottom .next span {
   padding-left: 10px;
   background: url("../images/nav-rt.png") no-repeat left top;
 }
-/* line 597, ../sass/_overlays.scss */
+/* line 568, ../sass/_overlays.scss */
 .wizard .bottom .next:hover {
   background-position: right bottom;
   -webkit-transition: background 0 ease-out;
@@ -8802,7 +8791,7 @@ Overlays (Todo: clean up)
   -o-transition: background 0 ease-out;
   transition: background 0 ease-out;
 }
-/* line 600, ../sass/_overlays.scss */
+/* line 571, ../sass/_overlays.scss */
 .wizard .bottom .next:hover span {
   background-position: left bottom;
   -webkit-transition: background 0 ease-out;
@@ -8811,7 +8800,7 @@ Overlays (Todo: clean up)
   -o-transition: background 0 ease-out;
   transition: background 0 ease-out;
 }
-/* line 606, ../sass/_overlays.scss */
+/* line 577, ../sass/_overlays.scss */
 .wizard .bottom .nums {
   text-align: center;
   list-style: none outside none;
@@ -8820,7 +8809,7 @@ Overlays (Todo: clean up)
   line-height: 60px;
   font-size: 0.75em;
 }
-/* line 613, ../sass/_overlays.scss */
+/* line 584, ../sass/_overlays.scss */
 .wizard .bottom .nums li {
   list-style: none outside none;
   display: inline-block;
@@ -8831,24 +8820,24 @@ Overlays (Todo: clean up)
   line-height: 21px;
   margin: 0 3px;
 }
-/* line 622, ../sass/_overlays.scss */
+/* line 593, ../sass/_overlays.scss */
 .wizard .bottom .nums li a {
   color: #919194;
   display: block;
 }
-/* line 625, ../sass/_overlays.scss */
+/* line 596, ../sass/_overlays.scss */
 .wizard .bottom .nums li a:hover {
   cursor: default;
 }
-/* line 629, ../sass/_overlays.scss */
+/* line 600, ../sass/_overlays.scss */
 .wizard .bottom .nums li.current {
   border-color: white;
 }
-/* line 631, ../sass/_overlays.scss */
+/* line 602, ../sass/_overlays.scss */
 .wizard .bottom .nums li.current a {
   color: white;
 }
-/* line 636, ../sass/_overlays.scss */
+/* line 607, ../sass/_overlays.scss */
 .wizard .bottom .nums li.current {
   font-size: 1em;
   width: 30px;
@@ -8856,13 +8845,13 @@ Overlays (Todo: clean up)
   line-height: 27px;
 }
 
-/* line 647, ../sass/_overlays.scss */
+/* line 618, ../sass/_overlays.scss */
 .wizard-content {
   overflow: hidden;
   width: 100%;
 }
 
-/* line 652, ../sass/_overlays.scss */
+/* line 623, ../sass/_overlays.scss */
 .vm-wizard-carousel {
   width: 90000px;
   position: relative;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
index d8d9149..847f53b 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
@@ -484,7 +484,7 @@
 									<div class="adv-main row">
 										<div class="vm-name">
 											<h2>Machine name</h2>
-											<span class="input"><input type="text" value="My Ubuntu Server"></span>
+											<span class="input"><input type="text" placeholder="My Ubuntu Server"></span>
 										</div>
 										<div class="expand-btn">
 											<a class="expand-link" href="">
@@ -569,14 +569,30 @@
 											<div class="row">
 												<h2>Tags</h2>
 												<p>Dude use your tags like you eat your cereal.<br>You can color code them as well</p>
-												<dl>
-													<dt class="title">My tags</dt> <dd class="title">select</dd>
-													<dt><span class="tag-demo tag4"></span>Operating system</dt> <dd class="snf-checkbox-unchecked"></dd>
-													<dt><span class="tag-demo tag5"></span>Pirate PC 1</dt> <dd class="snf-checkbox-unchecked"></dd>
-													<dt><span class="tag-demo tag6"></span>Pirate PC 2</dt> <dd class="snf-checkbox-unchecked"></dd>
-													<dt><span class="tag-demo tag7"></span>Pirate PC 3</dt> <dd class="snf-checkbox-unchecked"></dd>				
-												</dl>
-												<div ><a class="btn5" href="">add Tag</a></div>
+												<ul>
+													<li class="checkbox">
+														<h3>
+															<span class="tag-demo tag4"></span>
+															Operating system
+														</h3>
+														<span class="snf-checkbox-unchecked"></span>
+													</li>
+													<li class="checkbox">
+														<h3>
+															<span class="tag-demo tag5"></span>
+															Pirate PC1
+														</h3>
+														<span class="snf-checkbox-unchecked"></span>
+													</li>
+													<li class="checkbox">
+														<h3>
+															<span class="tag-demo tag6"></span>
+															Pirate PC1
+														</h3>
+														<span class="snf-checkbox-unchecked"></span>
+													</li>
+												</ul>
+												<div ><a class="btn5 show-add-tag" href="">add Tag</a></div>
 												<div class="snf-color-picker">
 													<form action="" style="width: 400px;">
 														<div id="picker">
@@ -590,10 +606,13 @@
 														</div>
 														<div class="form-item">
 															<input type="text" id="color" name="color" value="#16C1E9" disabled>
-															<span class="input"><input class="tag_name" type="text" value="My Tag"></span>
+															<span class="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
 														</div>
 													</form>									
-
+													<div>
+														<a class="btn5" href="">OK</a>
+														<a class="btn5 hide-add-tag" href="" id="hide-add-tag">CANCEL</a>
+													</div>
 
 												</div>
 											</div> <!-- end of row -->
