commit 692c5cea553acb0ff55be07cf728647bb679229e
Author: Olga Brani <olgabrani@grnet.gr>
Date:   Tue Sep 10 09:24:41 2013 +0300

    new ui: simpler functionality for items list page

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 916847a..a9052d4 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
@@ -1,9 +1,6 @@
 ui = {};
 
 
-
-
-
 ui.closeDiv = function(closeEl, divToCloseClass) {
     closeEl.click(function(e){
         e.preventDefault();
@@ -79,18 +76,9 @@ ui.entitiesActionsInit = function(){
     
     $('.entities li .container').mouseenter(
       function (e) {
-        $(this).find('.img').stop(true, true).fadeOut({
-            'duration':200,
-        });
         $(this).find('.options, .check').stop(true, true).addClass('active');
         $(this).find('.options').stop(true, true).fadeIn(500); 
         $(this).stop(true, true).addClass('set-border');
-        $(this).find('.visible-info em').stop(true, true).each(function(){
-            var emLeft = $(this).position();
-            $(this).animate({
-            left: -emLeft.left,
-            }, 300);        
-        }) 
       }
     );
 
@@ -98,13 +86,7 @@ ui.entitiesActionsInit = function(){
         function(e){
             $(this).stop(true, true).removeClass('set-border');
             $(this).find('.options').stop(true, true).fadeOut(200); 
-            $(this).find('.img').stop(true, true).fadeIn('slow');
             $(this).find('.snf-checkbox-unchecked').parents('.check').stop(true, true).removeClass('active');
-            $(this).find('.visible-info em').stop(true, true).each(function(){
-                $(this).animate({
-                 left: 0,
-                }, 300);        
-            }) 
          }
     );
 
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html
index ed26b39..47f7fa1 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html
@@ -50,80 +50,55 @@
 				<ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
 					<li data-order="0">
 						<div class="container">
-							<div class="options">
-								<div class="wrap">
-									<a href="network_details.html">details</a>
-								</div>
-							</div>
 							<div class="img-wrap">
 								<div class="img running">
-									Network									
+									Network
 								</div>
 							</div>
-							
 							<p class="visible-info">
 								<span><em>IPv4 83.212.97.127</em></span>
-								<span class="title"><em>Network Name</em></span>
+								<span class="title">
+									<a href="network_details.html"><em>Network name</em></a>
+								</span>
 							</p>
 							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
-							
 						</div>
 					</li>
 					<li data-order="1">
 						<div class="container">
-							<div class="options">
-								<div class="wrap">
-									
-									<a href="network_details.html">details</a>
-									
-								</div>
-							</div>
 							<div class="img-wrap">
 								<div class="img running">
 									Network
-									
 								</div>
 							</div>
-							
 							<p class="visible-info">
 								<span><em>IPv4 83.212.97.127</em></span>
-								<span class="title"><em>Network Name</em></span>
+								<span class="title">
+									<a href="network_details.html"><em>Network name</em></a>
+								</span>
 							</p>
 							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
-							
 						</div>
 					</li>
-					
 					<li data-order="2">
 						<div class="container">
-							<div class="options">
-								<div class="wrap">
-									
-									<a href="network_details.html">details</a>
-									
-								</div>
-							</div>
 							<div class="img-wrap">
 								<div class="img running">
 									Network
-									
 								</div>
 							</div>
-							
 							<p class="visible-info">
 								<span><em>IPv4 83.212.97.127</em></span>
-								<span class="title"><em>Network Name</em></span>
+								<span class="title">
+									<a href="network_details.html"><em>Network name</em></a>
+								</span>
 							</p>
 							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
-							
 						</div>
 					</li>
-					
-					 
 					<li data-order="3">
 						<div class="add-new"><a href="network_create.html">NEW<br>NETWORK</a></div>	
 					</li>
-					 
 				</ul>
 			</div>
 		</section>
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 3c9b323..9e87644 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
@@ -258,13 +258,16 @@ a {
 	@include marginPaddingZero();
 	li {
 		display: inline-block;
-		margin-right:15px;
+		margin-right:10px;
 		font-size: emCalc(24px);
 		line-height: 1em;
 		padding-bottom:5px;
+		width: 30px;
+		overflow: hidden;
 		a {
 			color:$black;
-			&:hover, &.current {
+			&:hover,&.current {
+				font-size:30px;
 				color:$third-color;
 			}
 		}
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
index 0867d32..dd8166c 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
@@ -30,6 +30,7 @@
 			margin-bottom: 20px;
 			position: relative;
 			height:58px;
+			display: inline-block;
 		}
 		.container {
 			&.set-bg {	background:lighten($primary-color,38%); }
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss
index 776c75c..ddde776 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss
@@ -2,32 +2,41 @@
 
 .vms .items-list {
 	.img {
-			//@include sprite('../images/vm-on.png', 56px, 58px);
-			width: 60px;
-			height: 60px; // do we prefer to put it in items_list??
-			display: inline-block;
+		width: 60px;
+		span {
+			&:hover {
+				cursor: pointer;
+			}
+		}
+		&:hover {
 			.snf-PC_fill {
-				font-size: 60px;
-				color: $vm-active-color;
+				color: darken($vm-active-color,10%);
 			}
-			 
-			&.stopped {
-				.snf-PC_fill {
-					color: $vm-stopped-color;
-				}				
-				//background-image:url('../images/vm-stopped.png');
+		}
+		.snf-PC_fill {
+			font-size: 60px;
+			color: $vm-active-color;
+		}
+		&.stopped {
+			.snf-PC_fill {
+				color: $vm-stopped-color;
 			}
-			.os {
-				@include sprite('../images/os-unknown.png', 22px, 22px);
-				position: absolute;
-				top:8px;
-				left:19px;
-				&.windows { background-image:url('../images/os-windows.png'); }
-				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
-				&.fedora { background-image:url('../images/os-fedora.png'); }
+		}
+		&.stopped:hover {
+			.snf-PC_fill {
+				color: darken($vm-stopped-color,10%);
 			}
-		
 		}
+		.os {
+			@include sprite('../images/os-unknown.png', 22px, 22px);
+			position: absolute;
+			top:8px;
+			left:19px;
+			&.windows { background-image:url('../images/os-windows.png'); }
+			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
+			&.fedora { background-image:url('../images/os-fedora.png'); }
+		}
+	}
 }
 
 .vm {
@@ -37,15 +46,13 @@
 			display: inline-block;
 			height: 112px;
 			.snf-PC_fill {
-					font-size: 112px;
-					color: $vm-active-color;
+				font-size: 112px;
+				color: $vm-active-color;
+			}
+			&.stopped {
+				.snf-PC_fill {
+					color: $vm-stopped-color;
 				}
-				 
-				&.stopped {
-					.snf-PC_fill {
-						color: $vm-stopped-color;
-					}			
-				//background-image:url('../images/vm-stopped.png');
 			}
 		}
 		.os {
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
index 0860885..534074b 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
@@ -43,6 +43,12 @@ $vm-active-color: #75c046;
 $vm-stopped-color: #e00e63;
 $network-color: #79c79e;
 
+//colors for main icons (icons of networks and vms)
+$vm-active-color: #75c046;
+$vm-stopped-color: #FF3366;
+$network-color: #79c79e;
+
+
 // We use these to make sure border radius matches unless we want it different.
 $global-radius: 1px;
 // $global-rounded: 1000px;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/icons.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/icons.scss
index 4418260..1b6cc6b 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/icons.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/icons.scss
@@ -1,13 +1,6 @@
 // Global Foundation Settings
 @import "settings";
 
-//colors for main icons (icons of networks and vms)
-
-$vm-active-color: #75c046;
-$vm-stopped-color: #e00e63;
-$network-color: #79c79e;
-
-
 // menu1 is the simple menu and it is used on vm list 
 .menu1  {
 	ul {
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 e0aa5b8..cb70c4c 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
@@ -7026,29 +7026,32 @@ a:hover {
 /* line 259, ../sass/_common.scss */
 .icons-nav li {
   display: inline-block;
-  margin-right: 15px;
+  margin-right: 10px;
   font-size: 1.5em;
   line-height: 1em;
   padding-bottom: 5px;
+  width: 30px;
+  overflow: hidden;
 }
-/* line 265, ../sass/_common.scss */
+/* line 267, ../sass/_common.scss */
 .icons-nav li a {
   color: #333333;
 }
-/* line 267, ../sass/_common.scss */
+/* line 269, ../sass/_common.scss */
 .icons-nav li a:hover, .icons-nav li a.current {
+  font-size: 30px;
   color: #f24e53;
 }
 
 /* Top info  ----------------------------------------------- */
-/* line 279, ../sass/_common.scss */
+/* line 282, ../sass/_common.scss */
 .top-info {
   padding: 50px 100px;
   position: relative;
   z-index: 10;
   display: none;
 }
-/* line 284, ../sass/_common.scss */
+/* line 287, ../sass/_common.scss */
 .top-info .close {
   position: absolute;
   right: 2.5em;
@@ -7061,31 +7064,31 @@ a:hover {
   overflow: hidden;
 }
 
-/* line 293, ../sass/_common.scss */
+/* line 296, ../sass/_common.scss */
 .info.error {
   background: #ff5c58;
   color: #fff;
 }
 
-/* line 299, ../sass/_common.scss */
+/* line 302, ../sass/_common.scss */
 .info.alert {
   background: #3582ac;
   color: #fff;
 }
 
-/* line 304, ../sass/_common.scss */
+/* line 307, ../sass/_common.scss */
 .info.warning {
   background: #919194;
   color: #fff;
 }
 
-/* line 309, ../sass/_common.scss */
+/* line 312, ../sass/_common.scss */
 .info.success {
   background: #00a551;
   color: #fff;
 }
 
-/* line 314, ../sass/_common.scss */
+/* line 317, ../sass/_common.scss */
 .border-bottom-style1 {
   padding-bottom: 20px;
   margin-bottom: 20px;
@@ -7093,7 +7096,7 @@ a:hover {
 }
 
 /* Progress Bar ----------------------------------------------- */
-/* line 323, ../sass/_common.scss */
+/* line 326, ../sass/_common.scss */
 .progress-bar {
   position: fixed;
   bottom: 0;
@@ -7104,25 +7107,25 @@ a:hover {
   padding: 20px 0 20px 310px;
   color: #919194;
 }
-/* line 332, ../sass/_common.scss */
+/* line 335, ../sass/_common.scss */
 .progress-bar span.counter {
   display: inline-block;
   margin-right: 20px;
   float: left;
 }
-/* line 337, ../sass/_common.scss */
+/* line 340, ../sass/_common.scss */
 .progress-bar div.progress-wrap {
   display: inline-block;
   float: left;
   width: 40%;
   margin-right: 60px;
 }
-/* line 342, ../sass/_common.scss */
+/* line 345, ../sass/_common.scss */
 .progress-bar div.progress-wrap .progress {
   position: relative;
   top: 2px;
 }
-/* line 347, ../sass/_common.scss */
+/* line 350, ../sass/_common.scss */
 .progress-bar span.more {
   display: inline-block;
 }
@@ -7161,23 +7164,24 @@ a:hover {
   margin-bottom: 20px;
   position: relative;
   height: 58px;
+  display: inline-block;
 }
-/* line 34, ../sass/_items-list.scss */
+/* line 35, ../sass/_items-list.scss */
 .items-list li .container {
   border: 1px solid transparent;
   margin: 0 20px;
   padding: 25px 0;
   position: relative;
 }
-/* line 35, ../sass/_items-list.scss */
+/* line 36, ../sass/_items-list.scss */
 .items-list li .container.set-bg {
   background: #f3f3f4;
 }
-/* line 36, ../sass/_items-list.scss */
+/* line 37, ../sass/_items-list.scss */
 .items-list li .container.set-border {
   border-color: #3582ac;
 }
-/* line 41, ../sass/_items-list.scss */
+/* line 42, ../sass/_items-list.scss */
 .items-list li .container .options {
   width: 100%;
   text-align: center;
@@ -7186,13 +7190,13 @@ a:hover {
   left: 0;
   display: none;
 }
-/* line 48, ../sass/_items-list.scss */
+/* line 49, ../sass/_items-list.scss */
 .items-list li .container .options .wrap {
   height: 100%;
   padding: 25px 25px 0;
   text-align: left;
 }
-/* line 52, ../sass/_items-list.scss */
+/* line 53, ../sass/_items-list.scss */
 .items-list li .container .options .wrap a {
   font-size: 1.6875em;
   display: inline-block;
@@ -7201,11 +7205,11 @@ a:hover {
   margin-bottom: 10px;
   font-weight: bold;
 }
-/* line 60, ../sass/_items-list.scss */
+/* line 61, ../sass/_items-list.scss */
 .items-list li .container .options .wrap a:hover {
   color: #3582ac;
 }
-/* line 70, ../sass/_items-list.scss */
+/* line 71, ../sass/_items-list.scss */
 .items-list li .check {
   position: absolute;
   right: 10px;
@@ -7216,39 +7220,39 @@ a:hover {
   cursor: pointer;
   z-index: 10;
 }
-/* line 80, ../sass/_items-list.scss */
+/* line 81, ../sass/_items-list.scss */
 .items-list li .check span {
   position: relative;
   z-index: 10;
 }
-/* line 81, ../sass/_items-list.scss */
+/* line 82, ../sass/_items-list.scss */
 .items-list li .check.active {
   color: #3582ac;
 }
-/* line 85, ../sass/_items-list.scss */
+/* line 86, ../sass/_items-list.scss */
 .items-list li .visible-info {
   margin: 0 25px;
   position: relative;
   color: #919194;
   overflow: hidden;
 }
-/* line 90, ../sass/_items-list.scss */
+/* line 91, ../sass/_items-list.scss */
 .items-list li .visible-info span {
   display: block;
   position: relative;
 }
-/* line 91, ../sass/_items-list.scss */
+/* line 92, ../sass/_items-list.scss */
 .items-list li .visible-info span.title {
   white-space: nowrap;
 }
-/* line 96, ../sass/_items-list.scss */
+/* line 97, ../sass/_items-list.scss */
 .items-list li .visible-info span em {
   font-style: normal;
   position: relative;
 }
 
 @media only screen and (min-width: 68.75em) {
-  /* line 108, ../sass/_items-list.scss */
+  /* line 109, ../sass/_items-list.scss */
   .entities .items-list {
     display: block;
     padding: 0;
@@ -7507,19 +7511,29 @@ a:hover {
 /* line 4, ../sass/_machines.scss */
 .vms .items-list .img {
   width: 60px;
-  height: 60px;
-  display: inline-block;
 }
-/* line 9, ../sass/_machines.scss */
+/* line 7, ../sass/_machines.scss */
+.vms .items-list .img span:hover {
+  cursor: pointer;
+}
+/* line 12, ../sass/_machines.scss */
+.vms .items-list .img:hover .snf-PC_fill {
+  color: #5e9d36;
+}
+/* line 16, ../sass/_machines.scss */
 .vms .items-list .img .snf-PC_fill {
   font-size: 60px;
   color: #75c046;
 }
-/* line 15, ../sass/_machines.scss */
+/* line 21, ../sass/_machines.scss */
 .vms .items-list .img.stopped .snf-PC_fill {
-  color: #e00e63;
+  color: #ff3366;
 }
-/* line 20, ../sass/_machines.scss */
+/* line 26, ../sass/_machines.scss */
+.vms .items-list .img.stopped:hover .snf-PC_fill {
+  color: #ff0040;
+}
+/* line 30, ../sass/_machines.scss */
 .vms .items-list .img .os {
   background: url("../images/os-unknown.png") no-repeat center center;
   width: 22px;
@@ -7531,34 +7545,34 @@ a:hover {
   top: 8px;
   left: 19px;
 }
-/* line 25, ../sass/_machines.scss */
+/* line 35, ../sass/_machines.scss */
 .vms .items-list .img .os.windows {
   background-image: url("../images/os-windows.png");
 }
-/* line 26, ../sass/_machines.scss */
+/* line 36, ../sass/_machines.scss */
 .vms .items-list .img .os.kubuntu {
   background-image: url("../images/os-kubuntu.png");
 }
-/* line 27, ../sass/_machines.scss */
+/* line 37, ../sass/_machines.scss */
 .vms .items-list .img .os.fedora {
   background-image: url("../images/os-fedora.png");
 }
 
-/* line 35, ../sass/_machines.scss */
+/* line 44, ../sass/_machines.scss */
 .vm .top .img {
   display: inline-block;
   height: 112px;
 }
-/* line 39, ../sass/_machines.scss */
+/* line 48, ../sass/_machines.scss */
 .vm .top .img .snf-PC_fill {
   font-size: 112px;
   color: #75c046;
 }
-/* line 45, ../sass/_machines.scss */
+/* line 53, ../sass/_machines.scss */
 .vm .top .img.stopped .snf-PC_fill {
-  color: #e00e63;
+  color: #ff3366;
 }
-/* line 51, ../sass/_machines.scss */
+/* line 58, ../sass/_machines.scss */
 .vm .top .os {
   background: url("../images/os-unknown.png") no-repeat center center;
   width: 44px;
@@ -7571,20 +7585,20 @@ a:hover {
   left: 34px;
   top: 11px;
 }
-/* line 58, ../sass/_machines.scss */
+/* line 65, ../sass/_machines.scss */
 .vm .top .os.windows {
   background-image: url("../images/os-windows.png");
 }
-/* line 59, ../sass/_machines.scss */
+/* line 66, ../sass/_machines.scss */
 .vm .top .os.kubuntu {
   background-image: url("../images/os-kubuntu.png");
 }
-/* line 60, ../sass/_machines.scss */
+/* line 67, ../sass/_machines.scss */
 .vm .top .os.fedora {
   background-image: url("../images/os-fedora.png");
 }
 
-/* line 68, ../sass/_machines.scss */
+/* line 75, ../sass/_machines.scss */
 .create-vm .select-os li {
   width: 23%;
   padding: 20px;
@@ -7594,19 +7608,19 @@ a:hover {
   height: 200px;
   margin: 0 10px 10px 0;
 }
-/* line 77, ../sass/_machines.scss */
+/* line 84, ../sass/_machines.scss */
 .create-vm .select-os li:hover, .create-vm .select-os li.selected {
   background: #fff;
 }
-/* line 79, ../sass/_machines.scss */
+/* line 86, ../sass/_machines.scss */
 .create-vm .select-os li:hover h2, .create-vm .select-os li:hover p, .create-vm .select-os li:hover a, .create-vm .select-os li.selected h2, .create-vm .select-os li.selected p, .create-vm .select-os li.selected a {
   color: #3582ac;
 }
-/* line 83, ../sass/_machines.scss */
+/* line 90, ../sass/_machines.scss */
 .create-vm .select-os li a {
   color: #fff;
 }
-/* line 86, ../sass/_machines.scss */
+/* line 93, ../sass/_machines.scss */
 .create-vm .select-os li .os {
   background: url("../images/os-unknown.png") no-repeat center center;
   width: 30px;
@@ -7617,67 +7631,67 @@ a:hover {
   background-size: 100%;
   margin-bottom: 2em;
 }
-/* line 90, ../sass/_machines.scss */
+/* line 97, ../sass/_machines.scss */
 .create-vm .select-os li .os.windows {
   background-image: url("../images/os-windows.png");
 }
-/* line 91, ../sass/_machines.scss */
+/* line 98, ../sass/_machines.scss */
 .create-vm .select-os li .os.kubuntu {
   background-image: url("../images/os-kubuntu.png");
 }
-/* line 92, ../sass/_machines.scss */
+/* line 99, ../sass/_machines.scss */
 .create-vm .select-os li .os.fedora {
   background-image: url("../images/os-fedora.png");
 }
-/* line 94, ../sass/_machines.scss */
+/* line 101, ../sass/_machines.scss */
 .create-vm .select-os li h2 {
   font-size: 1em;
   font-weight: normal;
   color: #fff;
 }
-/* line 99, ../sass/_machines.scss */
+/* line 106, ../sass/_machines.scss */
 .create-vm .select-os li .details {
   font-weight: bold;
   font-size: 0.875em;
 }
-/* line 106, ../sass/_machines.scss */
+/* line 113, ../sass/_machines.scss */
 .create-vm .select-flavor dl {
   color: #fff;
   font-size: 1.25em;
   margin-bottom: 10px;
 }
-/* line 110, ../sass/_machines.scss */
+/* line 117, ../sass/_machines.scss */
 .create-vm .select-flavor dl dd {
   width: 23%;
   display: inline-block;
 }
-/* line 114, ../sass/_machines.scss */
+/* line 121, ../sass/_machines.scss */
 .create-vm .select-flavor dl dt {
   width: 70%;
   display: inline-block;
   font-weight: normal;
 }
-/* line 118, ../sass/_machines.scss */
+/* line 125, ../sass/_machines.scss */
 .create-vm .select-flavor dl dt span {
   min-width: 90px;
   margin: 0 10px;
 }
-/* line 122, ../sass/_machines.scss */
+/* line 129, ../sass/_machines.scss */
 .create-vm .select-flavor dl dt span:first-child {
   margin-left: 0;
 }
 
-/* line 132, ../sass/_machines.scss */
+/* line 139, ../sass/_machines.scss */
 #vm-connect .info {
   font-style: italic;
   font-size: 0.8125em;
   color: #9e9ea1;
 }
-/* line 137, ../sass/_machines.scss */
+/* line 144, ../sass/_machines.scss */
 #vm-connect .ssh {
   text-align: center;
 }
-/* line 139, ../sass/_machines.scss */
+/* line 146, ../sass/_machines.scss */
 #vm-connect .ssh span {
   padding: 10px 30px;
   background: #3582ac;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/icons.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/icons.css
index e3af89a..ab18dfa 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/icons.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/icons.css
@@ -1,39 +1,39 @@
-/* line 14, ../sass/icons.scss */
+/* line 7, ../sass/icons.scss */
 .menu1 ul li {
   margin-right: 9px;
 }
-/* line 17, ../sass/icons.scss */
+/* line 10, ../sass/icons.scss */
 .menu1 ul li a .snf-font {
   font-size: 25px;
   color: #333333;
 }
-/* line 22, ../sass/icons.scss */
+/* line 15, ../sass/icons.scss */
 .menu1 ul li a:hover span {
   color: #3582ac;
 }
 
-/* line 37, ../sass/icons.scss */
+/* line 30, ../sass/icons.scss */
 .menu2 ul li {
   margin-right: 9px;
 }
-/* line 40, ../sass/icons.scss */
+/* line 33, ../sass/icons.scss */
 .menu2 ul li a .snf-font {
   font-size: 25px;
   font-weight: bold;
   color: #919194;
 }
-/* line 46, ../sass/icons.scss */
+/* line 39, ../sass/icons.scss */
 .menu2 ul li a:hover span {
   color: #3582ac;
 }
 
-/* line 61, ../sass/icons.scss */
+/* line 54, ../sass/icons.scss */
 .menu3 ul li a .snf-font {
   font-size: 25px;
   color: #919194;
 }
 
-/* line 75, ../sass/icons.scss */
+/* line 68, ../sass/icons.scss */
 body .items-list .img.running, body .vms .items-list .img.stopped {
   background: none;
   text-indent: 0;
@@ -41,40 +41,40 @@ body .items-list .img.running, body .vms .items-list .img.stopped {
   height: 60px;
 }
 
-/* line 82, ../sass/icons.scss */
+/* line 75, ../sass/icons.scss */
 body .img .snf-font {
   font-size: 60px;
 }
 
-/* line 86, ../sass/icons.scss */
+/* line 79, ../sass/icons.scss */
 body .networks .img .snf-font.bolding {
   font-weight: bold;
   font-size: 57px;
   top: 6px;
 }
 
-/* line 91, ../sass/icons.scss */
+/* line 84, ../sass/icons.scss */
 body .networks .img .snf-font {
   position: relative;
   top: 2px;
 }
 
-/* line 96, ../sass/icons.scss */
+/* line 89, ../sass/icons.scss */
 body .networks .running .snf-font {
   color: #79c79e;
 }
 
-/* line 100, ../sass/icons.scss */
+/* line 93, ../sass/icons.scss */
 body .running .snf-font {
   color: #75c046;
 }
 
-/* line 105, ../sass/icons.scss */
+/* line 98, ../sass/icons.scss */
 body .stopped .snf-font {
-  color: #e00e63;
+  color: #ff3366;
 }
 
-/* line 110, ../sass/icons.scss */
+/* line 103, ../sass/icons.scss */
 body .vms .items-list .img .os {
   left: 19px;
 }
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 3986069..d42e311 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
@@ -74,114 +74,85 @@
 				<ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
 					<li data-order="0">
 						<div class="container">
-							<div class="options">
-								<div class="wrap">
-									<a href="vm_details.html" class="details">details</a>
-									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
-								</div>
-							</div>
 							<div class="img-wrap">
 								<div class="img running">
-									<span class="snf-PC_fill"></span>
-									<span class="os windows">windows</span>
+									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
+									<span class="os" data-reveal-id="vm-connect">unknown</span>
 								</div>
 							</div>
-							
 							<p class="visible-info">
 								<span><em>IPv4 83.212.97.127</em></span>
-								<span class="title"><em>vm name 1 really large name</em></span>
+								<span class="title">
+									<a href="vm_details.html"><em>vm name 1 really large name</em></a>
+								</span>
 							</p>
 							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
 						</div>
 					</li>
 					<li data-order="1">
 						<div class="container">
-							<div class="options">
-								<div class="wrap">
-									
-									<a href="vm_details.html" class="details">details</a>
-									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
-								</div>
-							</div>
 							<div class="img-wrap">
 								<div class="img running">
-									<span class="snf-PC_fill"></span>
-									<span class="os windows">windows</span>
+									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
+									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
 								</div>
 							</div>
-							
 							<p class="visible-info">
 								<span><em>IPv4 83.212.97.127</em></span>
-								<span class="title"><em>vm name 2</em></span>
+								<span class="title">
+									<a href="vm_details.html"><em>vm name 1 really large name</em></a>
+								</span>
 							</p>
 							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
 						</div>
 					</li>
 					<li data-order="2">
 						<div class="container">
-							<div class="options">
-								<div class="wrap">
-									
-									<a href="vm_details.html" class="details">details</a>
-									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
-								</div>
-							</div>
 							<div class="img-wrap">
-								<div class="img stopped">
-									<span class="snf-PC_fill"></span>
-									<span class="os fedora">fedora</span>
+								<div class="img running">
+									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
+									<span class="os" data-reveal-id="vm-connect">unknown</span>
 								</div>
 							</div>
-							
 							<p class="visible-info">
 								<span><em>IPv4 83.212.97.127</em></span>
-								<span class="title"><em>vm name 3</em></span>
+								<span class="title">
+									<a href="vm_details.html"><em>vm name 2</em></a>
+								</span>
 							</p>
 							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
 						</div>
 					</li>
 					<li  data-order="3">
 						<div class="container">
-							<div class="options">
-								<div class="wrap">
-									
-									<a href="vm_details.html" class="details">details</a>
-									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
-								</div>
-							</div>
 							<div class="img-wrap">
-								<div class="img running">
-									<span class="snf-PC_fill"></span>
-									<span class="os">unknown</span>
+								<div class="img stopped">
+									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
+									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
 								</div>
 							</div>
-							
 							<p class="visible-info">
 								<span><em>IPv4 83.212.97.127</em></span>
-								<span class="title"><em>vm name 4</em></span>
+								<span class="title">
+									<a href="vm_details.html"><em>vm name 3</em></a>
+								</span>
 							</p>
 							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
 						</div>
 					</li>
 					<li  data-order="4">
 						<div class="container">
-							<div class="options">
-								<div class="wrap">
-									
-									<a href="vm_details.html" class="details">details</a>
-									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
-								</div>
-							</div>
 							<div class="img-wrap">
 								<div class="img running">
-									<span class="snf-PC_fill"></span>
-									<span class="os kubuntu">kubuntu</span>
+									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
+									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
 								</div>
 							</div>
-							
 							<p class="visible-info">
 								<span><em>IPv4 83.212.97.127</em></span>
-								<span class="title"><em>vm name 5</em></span>
+								<span class="title">
+									<a href="vm_details.html"><em>vm name 4</em></a>
+								</span>
 							</p>
 							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
 						</div>
