From 67b9bd929c8ff474f88f79e150e3b69d3ce02802 Mon Sep 17 00:00:00 2001
From: Alain Takoudjou <talino@tiolive.com>
Date: Tue, 5 Nov 2013 10:08:22 +0100
Subject: [PATCH] Update features in styles and scripts

---
 slapos/runner/static/css/jqueryTabs.css       | 100 +++++++++---------
 slapos/runner/static/css/styles.css           |  58 +++++-----
 slapos/runner/static/css/ui.fancytree.css     |   2 +-
 .../static/js/jquery/jquery.colorbox-min.js   |   2 +-
 slapos/runner/static/js/jquery/jqueryTabs.js  |  20 ++--
 .../runner/static/js/jquery/jqueryToolTip.js  |  96 ++++++++++-------
 slapos/runner/static/js/jquery/popupBox.js    |  10 +-
 slapos/runner/templates/account.html          |   2 +-
 slapos/runner/templates/instanceInspect.html  |   2 +-
 slapos/runner/templates/manageRepository.html |   2 +-
 10 files changed, 157 insertions(+), 137 deletions(-)

diff --git a/slapos/runner/static/css/jqueryTabs.css b/slapos/runner/static/css/jqueryTabs.css
index 2460db6..6a3487c 100644
--- a/slapos/runner/static/css/jqueryTabs.css
+++ b/slapos/runner/static/css/jqueryTabs.css
@@ -1,62 +1,64 @@
-#tabContaier{
-	background: #e4e4e4;
-	padding:3px;
-	/*position:relative;*/
-	width:930px;
-	font-size: 14px;
-  border-radius: 4px 4px 0 0;
+#tabContainer{
+    background: #D5D5D5;
+    padding:3px;
+    /*position:relative;*/
+    width:930px;
+    font-size: 14px;
+    border-radius: 4px 4px 0 0;
 }
 
-#tabContaier textarea {
-	width:702px;
+#tabContainer textarea {
+    width:702px;
 }
-#tabContaier textarea.slap{white-space: pre-wrap;word-wrap: break-word;overflow: hidden;color: #6F6F6F;width:616px; max-height:120px;
+#tabContainer textarea.slap{white-space: pre-wrap;word-wrap: break-word;overflow: hidden;color: #6F6F6F;width:616px; max-height:120px;
   resize: none; height:18px;padding:3px;min-height:18px;font-size: 13px;}
-#tabContaier textarea.mb_style{width:713px;}
-#tabContaier > ul{
-	overflow:hidden;
-	height:34px;
-	position:absolute;
-	z-index:80;
-}
-#tabContaier > ul > li{
-	float:left;
-	list-style:none;
-}
-#tabContaier > ul > li a{
-	background:#e4e4e4;
-	border-left:1px solid #fcfcfc;
-	color:#666;
-	cursor:pointer;
-	display:block;
-	height:34px;
-	line-height:34px;
-	padding:0 30px;
-	text-decoration:none;
-	color: #737373;
-	text-shadow: 0px 1px #FFF;
-	font-size: 17px;
-}
-#tabContaier > ul > li a:hover{
-	background:#eee;
-}
-#tabContaier > ul > li a.active{
-	background:#fbfbfb;
-	border:1px solid #fff;
+#tabContainer textarea.mb_style{width:713px;}
+#tabContainer > ul{
+    overflow:hidden;
+    height:34px;
+    position:absolute;
+    z-index:80;
+    margin: 0;
+}
+#tabContainer > ul > li{
+    float:left;
+    list-style:none;
+    font-family: Arial;
+}
+#tabContainer > ul > li a{
+    background:#D5D5D5;
+    border-left:1px solid #fcfcfc;
+    color:#666;
+    cursor:pointer;
+    display:block;
+    height:34px;
+    line-height:34px;
+    padding:0 30px;
+    text-decoration:none;
+    color: #737373;
+    text-shadow: 0px 1px #ECECEC;
+    font-size: 17px;
+}
+#tabContainer > ul > li a:hover{
+    background:#E2E2E2;
+}
+#tabContainer > ul > li a.active{
+    background:#fbfbfb;
+    border:1px solid #fff;
   border-top:0;
-	border-right:0;
-	color:#333;
+    border-right:0;
+    color:#333;
 }
-#tabContaier > ul > li:first-child a{border-left:0}
+#tabContainer > ul > li:first-child a{border-left:0}
 .tabDetails{
-	background:#fbfbfb;
-	border-top: none;
-	margin:34px 0 0;
+    background:#fbfbfb;
+    border-top: none;
+    margin:34px 0 0;
 }
 .tabContents{
-	padding:20px;
+    padding:20px;
     min-height: 250px;
 }
 .tabContents p{
-	padding:0 0 10px;
+    padding:0 0 10px;
 }
diff --git a/slapos/runner/static/css/styles.css b/slapos/runner/static/css/styles.css
index 17b288c..e0afd3c 100644
--- a/slapos/runner/static/css/styles.css
+++ b/slapos/runner/static/css/styles.css
@@ -181,6 +181,7 @@ body {
     color: #4c6172;
     font-weight: normal;
     font-size: 1.4em;
+    line-height: 25px;
 }
 .content h2 a{
     text-decoration:none;
@@ -432,24 +433,6 @@ padding: 10px;height: 80px;padding-bottom:15px;}
     margin: 5px;
 }
 
-#contentInfo h2, .hight{
-    background: #e4e4e4;
-    width: 100%;
-    height: 25px;
-    padding-top:2px;
-    text-indent: 5px;
-    color: #737373;
-    text-shadow: 0px 1px #FFF;
-}
-
-.show{
-    background: #e4e4e4 url(../images/arrow_up.png) 97% 50% no-repeat;
-}
-
-.hide{
-    background: #e4e4e4 url(../images/arrow_down.png) 97% 50% no-repeat;
-}
-
 .gradient{background-color:#f4f4f4;background:-moz-linear-gradient(#f4f4f4,#ececec);background:-webkit-linear-gradient(#f4f4f4,#ececec);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4',endColorstr='#ececec')";background:linear-gradient(#f4f4f4,#ececec);}
 
 h2.hight:hover{
@@ -668,13 +651,13 @@ a.lshare img{
 }
 .box_header li{float: left;border: 1px solid #AAB8C2;padding: 1px 5px 1px 0;margin-left: 5px;}
 .box_header li:last-child{border:none}
-.box_header li h2{padding-top: 2px;}
 .box_header li > span{cursor: pointer; height: 22px; display: block;line-height: 22px;font-weight: bold;padding: 1px;}
 .box_header li:hover{border: 1px solid #57A1D6;background: #C7C7C7;}
 .box_header li:last-child:hover{background:none; border: none}
 .box_header li>a{font-weight: bold; font-size:15px;display: block;padding: 2px;}
 .save_btn{background: url(../images/icon_save.png) center right no-repeat;width: 60px;}
 .swith_btn{background: url(../images/gnome-session-switch.png) center right no-repeat;width: 105px;}
+.flist_btn{background: url(../images/list2_down.png) center right no-repeat;width: 26px;}
 
 #error{
     padding: 0px;
@@ -699,6 +682,8 @@ a.lshare img{
     z-index: 170;
     clear: both;
 }
+#error div.alert{background: lightYellow; border: 1px solid #E6DB55;}
+#error div.confirm, #error div.info{background: none repeat scroll 0 0 #CBECF7; border: 1px solid #2599A3;}
 
 #error table{
     background: none;
@@ -722,7 +707,7 @@ a.lshare img{
     width: 30px;
     height:22px;
 }
-#error p{white-space: pre-wrap; word-wrap: break-word; width: 95%; padding-bottom: 5px;}
+#error p{white-space: pre-wrap; word-wrap: break-word;padding: 0 5px; line-height: 18px; color: #67767C;max-width: 430px;}
 .noscroll {
     overflow: hidden;
 }
@@ -735,16 +720,17 @@ a.lshare img{
 div.sep{display:block; height:7px;}
 .slidebox{padding:10px; }
 
-.alert_message{ background: url(../images/alert.png) center no-repeat; height: 26px;}
-.error_message{ background: url(../images/exit.png) center no-repeat; height: 26px;}
-.confirm_message{ background: url(../images/confirm.png) center no-repeat; height: 26px;}
-.info_message{ background: url(../images/info.png) center no-repeat; height: 26px;}
-#error p{ font-size: 13px; color: #4A131F;}
 .pClose, .close{background:url(../images/close.png) no-repeat 0px 0px; display:block; width:22px; height:22px; cursor:pointer}
 .pClose:hover, .close:hover{background:url(../images/close_hover.png) no-repeat 0px 0px;}
 
 .md5sum {margin:10px; font-size:15px;}
-.title{background: #e4e4e4; width: 100%; height: 26px; padding-top:2px; text-indent: 5px; color: #737373; text-shadow: 0px 1px #FFF;}
+
+#contentInfo h2, .hight, .title{background: #D5D5D5; width: 100%; height: 26px; padding-top:2px; text-indent: 5px; color: #737373;
+    text-shadow: 0px 1px #ECECEC;}
+.hight, .title{border-bottom: 3px solid #6DB9DD;}
+.show{background: #e4e4e4 url(../images/arrow_up.png) 97% 50% no-repeat;}
+.hide{background: #e4e4e4 url(../images/arrow_down.png) 97% 50% no-repeat;}
+
 .menu-box-left{float:left; width: 135px; font-size:14px; background: #e4e4e4; padding:5px 0 5px 5px; margin-top:10px;
     font-size:14px; border-radius: 4px 0 0 4px;}
 .menu-box-right{background: #e4e4e4; padding: 5px; float:right; width: 745px; margin-left: -5px;
@@ -772,11 +758,11 @@ div.sep{display:block; height:7px;}
 .popup a{display: block; font-weight:bold;  color: #4DA0C6; padding-left: 5px; padding-bottom: 5px;}
 .popup a:hover{color: #666666;}
 .popup ul{margin:0; margin-bottom:10px; padding:0; list-style:none;}
-.popup li{border-bottom: 1px dashed #666666; padding:0;}
-.popup ul li:last-child{border-bottom:none}
+.popup li{border-bottom: 1px solid #E4E4E4; padding:3px 0; margin: 0 5px;}
 .popup ul li a{padding-bottom:0}
 ul.menu li {padding-top:5px; padding-bottom:5px;}
 ul.menu{margin-bottom:0;}
+.inline a, .inline{display: inline;}
 .popup-value{display:none;}
 textarea.parameter {border: solid 1px #678dad; color: #666666; height:110px;}
 .link{color:#fff; font-weight:bold; text-decoration:none}
@@ -801,3 +787,19 @@ padding:10px; font-size:14px; color:#03406A}
 .login-input{width:220px;}
 .information{display:block; float:left; height:16px; margin-top:10px; margin-left:10px; font-weight:bold}
 .account{margin-left:60px;}
+
+.bt_close {
+    text-decoration: none;
+    color: #999;
+    font-weight: bold;
+    font-size: 16px;
+    padding: 0 4px;
+    -webkit-border-radius: .2em;
+    -moz-border-radius: .2em;
+    border-radius: .2em;
+    cursor: pointer;
+}
+.bt_close:hover {
+    background: #D6D6D6;
+    color: #333;
+}
\ No newline at end of file
diff --git a/slapos/runner/static/css/ui.fancytree.css b/slapos/runner/static/css/ui.fancytree.css
index 05ecd13..65cb55e 100644
--- a/slapos/runner/static/css/ui.fancytree.css
+++ b/slapos/runner/static/css/ui.fancytree.css
@@ -20,7 +20,7 @@
 	margin: 0; /* issue 201 */
 	background-color: white;
 	overflow: auto;
-	height: 98%; /* issue 263 */
+	/*height: 98%; /* issue 263 */
 }
 
 ul.fancytree-container ul
diff --git a/slapos/runner/static/js/jquery/jquery.colorbox-min.js b/slapos/runner/static/js/jquery/jquery.colorbox-min.js
index 3f27d3d..230a10d 100644
--- a/slapos/runner/static/js/jquery/jquery.colorbox-min.js
+++ b/slapos/runner/static/js/jquery/jquery.colorbox-min.js
@@ -4,4 +4,4 @@
 	(c) 2013 Jack Moore - http://www.jacklmoore.com/colorbox
 	license: http://www.opensource.org/licenses/mit-license.php
 */
-(function(e,t,i){function o(i,o,n){var r=t.createElement(i);return o&&(r.id=Z+o),n&&(r.style.cssText=n),e(r)}function n(){return i.innerHeight?i.innerHeight:e(i).height()}function r(e){var t=k.length,i=(z+e)%t;return 0>i?t+i:i}function h(e,t){return Math.round((/%/.test(e)?("x"===t?E.width():n())/100:1)*parseInt(e,10))}function s(e,t){return e.photo||e.photoRegex.test(t)}function l(e,t){return e.retinaUrl&&i.devicePixelRatio>1?t.replace(e.photoRegex,e.retinaSuffix):t}function a(e){"contains"in g[0]&&!g[0].contains(e.target)&&(e.stopPropagation(),g.focus())}function d(){var t,i=e.data(N,Y);null==i?(B=e.extend({},X),console&&console.log&&console.log("Error: cboxElement missing settings object")):B=e.extend({},i);for(t in B)e.isFunction(B[t])&&"on"!==t.slice(0,2)&&(B[t]=B[t].call(N));B.rel=B.rel||N.rel||e(N).data("rel")||"nofollow",B.href=B.href||e(N).attr("href"),B.title=B.title||N.title,"string"==typeof B.href&&(B.href=e.trim(B.href))}function c(i,o){e(t).trigger(i),st.trigger(i),e.isFunction(o)&&o.call(N)}function u(i){q||(N=i,d(),k=e(N),z=0,"nofollow"!==B.rel&&(k=e("."+et).filter(function(){var t,i=e.data(this,Y);return i&&(t=e(this).data("rel")||i.rel||this.rel),t===B.rel}),z=k.index(N),-1===z&&(k=k.add(N),z=k.length-1)),w.css({opacity:parseFloat(B.opacity),cursor:B.overlayClose?"pointer":"auto",visibility:"visible"}).show(),J&&g.add(w).removeClass(J),B.className&&g.add(w).addClass(B.className),J=B.className,B.closeButton?K.html(B.close).appendTo(y):K.appendTo("<div/>"),U||(U=$=!0,g.css({visibility:"hidden",display:"block"}),H=o(lt,"LoadedContent","width:0; height:0; overflow:hidden"),y.css({width:"",height:""}).append(H),O=x.height()+C.height()+y.outerHeight(!0)-y.height(),_=b.width()+T.width()+y.outerWidth(!0)-y.width(),D=H.outerHeight(!0),A=H.outerWidth(!0),B.w=h(B.initialWidth,"x"),B.h=h(B.initialHeight,"y"),H.css({width:"",height:B.h}),Q.position(),c(tt,B.onOpen),P.add(L).hide(),g.focus(),B.trapFocus&&t.addEventListener&&(t.addEventListener("focus",a,!0),st.one(rt,function(){t.removeEventListener("focus",a,!0)})),B.returnFocus&&st.one(rt,function(){e(N).focus()})),m())}function f(){!g&&t.body&&(V=!1,E=e(i),g=o(lt).attr({id:Y,"class":e.support.opacity===!1?Z+"IE":"",role:"dialog",tabindex:"-1"}).hide(),w=o(lt,"Overlay").hide(),F=e([o(lt,"LoadingOverlay")[0],o(lt,"LoadingGraphic")[0]]),v=o(lt,"Wrapper"),y=o(lt,"Content").append(L=o(lt,"Title"),S=o(lt,"Current"),I=e('<button type="button"/>').attr({id:Z+"Previous"}),R=e('<button type="button"/>').attr({id:Z+"Next"}),M=o("button","Slideshow"),F),K=e('<button type="button"/>').attr({id:Z+"Close"}),v.append(o(lt).append(o(lt,"TopLeft"),x=o(lt,"TopCenter"),o(lt,"TopRight")),o(lt,!1,"clear:left").append(b=o(lt,"MiddleLeft"),y,T=o(lt,"MiddleRight")),o(lt,!1,"clear:left").append(o(lt,"BottomLeft"),C=o(lt,"BottomCenter"),o(lt,"BottomRight"))).find("div div").css({"float":"left"}),W=o(lt,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),P=R.add(I).add(S).add(M),e(t.body).append(w,g.append(v,W)))}function p(){function i(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||e.ctrlKey||(e.preventDefault(),u(this))}return g?(V||(V=!0,R.click(function(){Q.next()}),I.click(function(){Q.prev()}),K.click(function(){Q.close()}),w.click(function(){B.overlayClose&&Q.close()}),e(t).bind("keydown."+Z,function(e){var t=e.keyCode;U&&B.escKey&&27===t&&(e.preventDefault(),Q.close()),U&&B.arrowKey&&k[1]&&!e.altKey&&(37===t?(e.preventDefault(),I.click()):39===t&&(e.preventDefault(),R.click()))}),e.isFunction(e.fn.on)?e(t).on("click."+Z,"."+et,i):e("."+et).live("click."+Z,i)),!0):!1}function m(){var n,r,a,u=Q.prep,f=++at;$=!0,j=!1,N=k[z],d(),c(ht),c(it,B.onLoad),B.h=B.height?h(B.height,"y")-D-O:B.innerHeight&&h(B.innerHeight,"y"),B.w=B.width?h(B.width,"x")-A-_:B.innerWidth&&h(B.innerWidth,"x"),B.mw=B.w,B.mh=B.h,B.maxWidth&&(B.mw=h(B.maxWidth,"x")-A-_,B.mw=B.w&&B.w<B.mw?B.w:B.mw),B.maxHeight&&(B.mh=h(B.maxHeight,"y")-D-O,B.mh=B.h&&B.h<B.mh?B.h:B.mh),n=B.href,G=setTimeout(function(){F.show()},100),B.inline?(a=o(lt).hide().insertBefore(e(n)[0]),st.one(ht,function(){a.replaceWith(H.children())}),u(e(n))):B.iframe?u(" "):B.html?u(B.html):s(B,n)?(n=l(B,n),j=t.createElement("img"),e(j).addClass(Z+"Photo").bind("error",function(){B.title=!1,u(o(lt,"Error").html(B.imgError))}).one("load",function(){var t;f===at&&(e.each(["alt","longdesc","aria-describedby"],function(t,i){var o=e(N).attr(i)||e(N).attr("data-"+i);o&&j.setAttribute(i,o)}),B.retinaImage&&i.devicePixelRatio>1&&(j.height=j.height/i.devicePixelRatio,j.width=j.width/i.devicePixelRatio),B.scalePhotos&&(r=function(){j.height-=j.height*t,j.width-=j.width*t},B.mw&&j.width>B.mw&&(t=(j.width-B.mw)/j.width,r()),B.mh&&j.height>B.mh&&(t=(j.height-B.mh)/j.height,r())),B.h&&(j.style.marginTop=Math.max(B.mh-j.height,0)/2+"px"),k[1]&&(B.loop||k[z+1])&&(j.style.cursor="pointer",j.onclick=function(){Q.next()}),j.style.width=j.width+"px",j.style.height=j.height+"px",setTimeout(function(){u(j)},1))}),setTimeout(function(){j.src=n},1)):n&&W.load(n,B.data,function(t,i){f===at&&u("error"===i?o(lt,"Error").html(B.xhrError):e(this).contents())})}var w,g,v,y,x,b,T,C,k,E,H,W,F,L,S,M,R,I,K,P,B,O,_,D,A,N,z,j,U,$,q,G,Q,J,V,X={html:!1,photo:!1,iframe:!1,inline:!1,transition:"elastic",speed:300,fadeOut:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,href:!1,title:!1,rel:!1,opacity:.9,preloading:!0,className:!1,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:void 0,closeButton:!0,fastIframe:!0,open:!1,reposition:!0,loop:!0,slideshow:!1,slideshowAuto:!0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",photoRegex:/\.(gif|png|jp(e|g|eg)|bmp|ico|webp)((#|\?).*)?$/i,retinaImage:!1,retinaUrl:!1,retinaSuffix:"@2x.$1",current:"image {current} of {total}",previous:"previous",next:"next",close:"close",xhrError:"This content failed to load.",imgError:"This image failed to load.",returnFocus:!0,trapFocus:!0,onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1},Y="colorbox",Z="cbox",et=Z+"Element",tt=Z+"_open",it=Z+"_load",ot=Z+"_complete",nt=Z+"_cleanup",rt=Z+"_closed",ht=Z+"_purge",st=e("<a/>"),lt="div",at=0,dt={},ct=function(){function e(){clearTimeout(h)}function t(){(B.loop||k[z+1])&&(e(),h=setTimeout(Q.next,B.slideshowSpeed))}function i(){M.html(B.slideshowStop).unbind(l).one(l,o),st.bind(ot,t).bind(it,e),g.removeClass(s+"off").addClass(s+"on")}function o(){e(),st.unbind(ot,t).unbind(it,e),M.html(B.slideshowStart).unbind(l).one(l,function(){Q.next(),i()}),g.removeClass(s+"on").addClass(s+"off")}function n(){r=!1,M.hide(),e(),st.unbind(ot,t).unbind(it,e),g.removeClass(s+"off "+s+"on")}var r,h,s=Z+"Slideshow_",l="click."+Z;return function(){r?B.slideshow||(st.unbind(nt,n),n()):B.slideshow&&k[1]&&(r=!0,st.one(nt,n),B.slideshowAuto?i():o(),M.show())}}();e.colorbox||(e(f),Q=e.fn[Y]=e[Y]=function(t,i){var o=this;if(t=t||{},f(),p()){if(e.isFunction(o))o=e("<a/>"),t.open=!0;else if(!o[0])return o;i&&(t.onComplete=i),o.each(function(){e.data(this,Y,e.extend({},e.data(this,Y)||X,t))}).addClass(et),(e.isFunction(t.open)&&t.open.call(o)||t.open)&&u(o[0])}return o},Q.position=function(t,i){function o(){x[0].style.width=C[0].style.width=y[0].style.width=parseInt(g[0].style.width,10)-_+"px",y[0].style.height=b[0].style.height=T[0].style.height=parseInt(g[0].style.height,10)-O+"px"}var r,s,l,a=0,d=0,c=g.offset();if(E.unbind("resize."+Z),g.css({top:-9e4,left:-9e4}),s=E.scrollTop(),l=E.scrollLeft(),B.fixed?(c.top-=s,c.left-=l,g.css({position:"fixed"})):(a=s,d=l,g.css({position:"absolute"})),d+=B.right!==!1?Math.max(E.width()-B.w-A-_-h(B.right,"x"),0):B.left!==!1?h(B.left,"x"):Math.round(Math.max(E.width()-B.w-A-_,0)/2),a+=B.bottom!==!1?Math.max(n()-B.h-D-O-h(B.bottom,"y"),0):B.top!==!1?h(B.top,"y"):Math.round(Math.max(n()-B.h-D-O,0)/2),g.css({top:c.top,left:c.left,visibility:"visible"}),v[0].style.width=v[0].style.height="9999px",r={width:B.w+A+_,height:B.h+D+O,top:a,left:d},t){var u=0;e.each(r,function(e){return r[e]!==dt[e]?(u=t,void 0):void 0}),t=u}dt=r,t||g.css(r),g.dequeue().animate(r,{duration:t||0,complete:function(){o(),$=!1,v[0].style.width=B.w+A+_+"px",v[0].style.height=B.h+D+O+"px",B.reposition&&setTimeout(function(){E.bind("resize."+Z,Q.position)},1),i&&i()},step:o})},Q.resize=function(e){var t;U&&(e=e||{},e.width&&(B.w=h(e.width,"x")-A-_),e.innerWidth&&(B.w=h(e.innerWidth,"x")),H.css({width:B.w}),e.height&&(B.h=h(e.height,"y")-D-O),e.innerHeight&&(B.h=h(e.innerHeight,"y")),e.innerHeight||e.height||(t=H.scrollTop(),H.css({height:"auto"}),B.h=H.height()),H.css({height:B.h}),t&&H.scrollTop(t),Q.position("none"===B.transition?0:B.speed))},Q.prep=function(i){function n(){return B.w=B.w||H.width(),B.w=B.mw&&B.mw<B.w?B.mw:B.w,B.w}function h(){return B.h=B.h||H.height(),B.h=B.mh&&B.mh<B.h?B.mh:B.h,B.h}if(U){var a,d="none"===B.transition?0:B.speed;H.empty().remove(),H=o(lt,"LoadedContent").append(i),H.hide().appendTo(W.show()).css({width:n(),overflow:B.scrolling?"auto":"hidden"}).css({height:h()}).prependTo(y),W.hide(),e(j).css({"float":"none"}),a=function(){function i(){e.support.opacity===!1&&g[0].style.removeAttribute("filter")}var n,h,a=k.length,u="frameBorder",f="allowTransparency";U&&(h=function(){clearTimeout(G),F.hide(),c(ot,B.onComplete)},L.html(B.title).add(H).show(),a>1?("string"==typeof B.current&&S.html(B.current.replace("{current}",z+1).replace("{total}",a)).show(),R[B.loop||a-1>z?"show":"hide"]().html(B.next),I[B.loop||z?"show":"hide"]().html(B.previous),ct(),B.preloading&&e.each([r(-1),r(1)],function(){var i,o,n=k[this],r=e.data(n,Y);r&&r.href?(i=r.href,e.isFunction(i)&&(i=i.call(n))):i=e(n).attr("href"),i&&s(r,i)&&(i=l(r,i),o=t.createElement("img"),o.src=i)})):P.hide(),B.iframe?(n=o("iframe")[0],u in n&&(n[u]=0),f in n&&(n[f]="true"),B.scrolling||(n.scrolling="no"),e(n).attr({src:B.href,name:(new Date).getTime(),"class":Z+"Iframe",allowFullScreen:!0,webkitAllowFullScreen:!0,mozallowfullscreen:!0}).one("load",h).appendTo(H),st.one(ht,function(){n.src="//about:blank"}),B.fastIframe&&e(n).trigger("load")):h(),"fade"===B.transition?g.fadeTo(d,1,i):i())},"fade"===B.transition?g.fadeTo(d,0,function(){Q.position(0,a)}):Q.position(d,a)}},Q.next=function(){!$&&k[1]&&(B.loop||k[z+1])&&(z=r(1),u(k[z]))},Q.prev=function(){!$&&k[1]&&(B.loop||z)&&(z=r(-1),u(k[z]))},Q.close=function(){U&&!q&&(q=!0,U=!1,c(nt,B.onCleanup),E.unbind("."+Z),w.fadeTo(B.fadeOut||0,0),g.stop().fadeTo(B.fadeOut||0,0,function(){g.add(w).css({opacity:1,cursor:"auto"}).hide(),c(ht),H.empty().remove(),setTimeout(function(){q=!1,c(rt,B.onClosed)},1)}))},Q.remove=function(){g&&(g.stop(),e.colorbox.close(),g.stop().remove(),w.remove(),q=!1,g=null,e("."+et).removeData(Y).removeClass(et),e(t).unbind("click."+Z))},Q.element=function(){return e(N)},Q.settings=X)})(jQuery,document,window);
\ No newline at end of file
+(function(e,t,i){function o(i,o,n){var r=t.createElement(i);return o&&(r.id=Z+o),n&&(r.style.cssText=n),e(r)}function n(){return i.innerHeight?i.innerHeight:e(i).height()}function r(e){var t=k.length,i=(z+e)%t;return 0>i?t+i:i}function h(e,t){return Math.round((/%/.test(e)?("x"===t?E.width():n())/100:1)*parseInt(e,10))}function s(e,t){return e.photo||e.photoRegex.test(t)}function l(e,t){return e.retinaUrl&&i.devicePixelRatio>1?t.replace(e.photoRegex,e.retinaSuffix):t}function a(e){"contains"in g[0]&&!g[0].contains(e.target)&&(e.stopPropagation(),g.focus())}function d(){var t,i=e.data(N,Y);null==i?(B=e.extend({},X),console&&console.log&&console.log("Error: cboxElement missing settings object")):B=e.extend({},i);for(t in B)e.isFunction(B[t])&&"on"!==t.slice(0,2)&&(B[t]=B[t].call(N));B.rel=B.rel||N.rel||e(N).data("rel")||"nofollow",B.href=B.href||e(N).attr("href"),B.title=B.title||N.title,"string"==typeof B.href&&(B.href=e.trim(B.href))}function c(i,o){e(t).trigger(i),st.trigger(i),e.isFunction(o)&&o.call(N)}function u(i){q||(N=i,d(),k=e(N),z=0,"nofollow"!==B.rel&&(k=e("."+et).filter(function(){var t,i=e.data(this,Y);return i&&(t=e(this).data("rel")||i.rel||this.rel),t===B.rel}),z=k.index(N),-1===z&&(k=k.add(N),z=k.length-1)),w.css({opacity:parseFloat(B.opacity),cursor:B.overlayClose?"pointer":"auto",visibility:"visible"}).show(),J&&g.add(w).removeClass(J),B.className&&g.add(w).addClass(B.className),J=B.className,B.closeButton?K.html(B.close).appendTo(y):K.appendTo("<div/>"),U||(U=$=!0,g.css({visibility:"hidden",display:"block"}),H=o(lt,"LoadedContent","width:0; height:0; overflow:hidden"),y.css({width:"",height:""}).append(H),O=x.height()+C.height()+y.outerHeight(!0)-y.height(),_=b.width()+T.width()+y.outerWidth(!0)-y.width(),D=H.outerHeight(!0),A=H.outerWidth(!0),B.w=h(B.initialWidth,"x"),B.h=h(B.initialHeight,"y"),H.css({width:"",height:B.h}),Q.position(),c(tt,B.onOpen),P.add(L).hide(),g.focus(),B.trapFocus&&t.addEventListener&&(t.addEventListener("focus",a,!0),st.one(rt,function(){t.removeEventListener("focus",a,!0)})),B.returnFocus&&st.one(rt,function(){e(N).focus()})),m())}function f(){!g&&t.body&&(V=!1,E=e(i),g=o(lt).attr({id:Y,"class":e.support.opacity===!1?Z+"IE":"",role:"dialog",tabindex:"-1"}).hide(),w=o(lt,"Overlay").hide(),F=e([o(lt,"LoadingOverlay")[0],o(lt,"LoadingGraphic")[0]]),v=o(lt,"Wrapper"),y=o(lt,"Content").append(L=o(lt,"Title"),S=o(lt,"Current"),I=e('<button type="button"/>').attr({id:Z+"Previous"}),R=e('<button type="button"/>').attr({id:Z+"Next"}),M=o("button","Slideshow"),F),K=e('<button type="button"/>').attr({id:Z+"Close"}),v.append(o(lt).append(o(lt,"TopLeft"),x=o(lt,"TopCenter"),o(lt,"TopRight")),o(lt,!1,"clear:left").append(b=o(lt,"MiddleLeft"),y,T=o(lt,"MiddleRight")),o(lt,!1,"clear:left").append(o(lt,"BottomLeft"),C=o(lt,"BottomCenter"),o(lt,"BottomRight"))).find("div div").css({"float":"left"}),W=o(lt,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),P=R.add(I).add(S).add(M),e(t.body).append(w,g.append(v,W)))}function p(){function i(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||e.ctrlKey||(e.preventDefault(),u(this))}return g?(V||(V=!0,R.click(function(){Q.next()}),I.click(function(){Q.prev()}),K.click(function(){Q.close()}),w.click(function(){B.overlayClose&&Q.close()}),e(t).bind("keydown."+Z,function(e){var t=e.keyCode;U&&B.escKey&&27===t&&(e.preventDefault(),Q.close()),U&&B.arrowKey&&k[1]&&!e.altKey&&(37===t?(e.preventDefault(),I.click()):39===t&&(e.preventDefault(),R.click()))}),e.isFunction(e.fn.on)?e(t).on("click."+Z,"."+et,i):e("."+et).live("click."+Z,i)),!0):!1}function m(){var n,r,a,u=Q.prep,f=++at;$=!0,j=!1,N=k[z],d(),c(ht),c(it,B.onLoad),B.h=B.height?h(B.height,"y")-D-O:B.innerHeight&&h(B.innerHeight,"y"),B.w=B.width?h(B.width,"x")-A-_:B.innerWidth&&h(B.innerWidth,"x"),B.mw=B.w,B.mh=B.h,B.maxWidth&&(B.mw=h(B.maxWidth,"x")-A-_,B.mw=B.w&&B.w<B.mw?B.w:B.mw),B.maxHeight&&(B.mh=h(B.maxHeight,"y")-D-O,B.mh=B.h&&B.h<B.mh?B.h:B.mh),n=B.href,G=setTimeout(function(){F.show()},100),B.inline?(a=o(lt).hide().insertBefore(e(n)[0]),st.one(ht,function(){a.replaceWith(H.children())}),u(e(n))):B.iframe?u(" "):B.html?u(B.html):s(B,n)?(n=l(B,n),j=t.createElement("img"),e(j).addClass(Z+"Photo").bind("error",function(){B.title=!1,u(o(lt,"Error").html(B.imgError))}).one("load",function(){var t;f===at&&(e.each(["alt","longdesc","aria-describedby"],function(t,i){var o=e(N).attr(i)||e(N).attr("data-"+i);o&&j.setAttribute(i,o)}),B.retinaImage&&i.devicePixelRatio>1&&(j.height=j.height/i.devicePixelRatio,j.width=j.width/i.devicePixelRatio),B.scalePhotos&&(r=function(){j.height-=j.height*t,j.width-=j.width*t},B.mw&&j.width>B.mw&&(t=(j.width-B.mw)/j.width,r()),B.mh&&j.height>B.mh&&(t=(j.height-B.mh)/j.height,r())),B.h&&(j.style.marginTop=Math.max(B.mh-j.height,0)/2+"px"),k[1]&&(B.loop||k[z+1])&&(j.style.cursor="pointer",j.onclick=function(){Q.next()}),j.style.width=j.width+"px",j.style.height=j.height+"px",setTimeout(function(){u(j)},1))}),setTimeout(function(){j.src=n},1)):n&&W.load(n,B.data,function(t,i){f===at&&u("error"===i?o(lt,"Error").html(B.xhrError):e(this).contents())})}var w,g,v,y,x,b,T,C,k,E,H,W,F,L,S,M,R,I,K,P,B,O,_,D,A,N,z,j,U,$,q,G,Q,J,V,X={html:!1,photo:!1,iframe:!1,inline:!1,transition:"elastic",speed:300,fadeOut:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,href:!1,title:!1,rel:!1,opacity:.5,preloading:!0,className:!1,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:void 0,closeButton:!0,fastIframe:!0,open:!1,reposition:!0,loop:!0,slideshow:!1,slideshowAuto:!0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",photoRegex:/\.(gif|png|jp(e|g|eg)|bmp|ico|webp)((#|\?).*)?$/i,retinaImage:!1,retinaUrl:!1,retinaSuffix:"@2x.$1",current:"image {current} of {total}",previous:"previous",next:"next",close:"close",xhrError:"This content failed to load.",imgError:"This image failed to load.",returnFocus:!0,trapFocus:!0,onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1},Y="colorbox",Z="cbox",et=Z+"Element",tt=Z+"_open",it=Z+"_load",ot=Z+"_complete",nt=Z+"_cleanup",rt=Z+"_closed",ht=Z+"_purge",st=e("<a/>"),lt="div",at=0,dt={},ct=function(){function e(){clearTimeout(h)}function t(){(B.loop||k[z+1])&&(e(),h=setTimeout(Q.next,B.slideshowSpeed))}function i(){M.html(B.slideshowStop).unbind(l).one(l,o),st.bind(ot,t).bind(it,e),g.removeClass(s+"off").addClass(s+"on")}function o(){e(),st.unbind(ot,t).unbind(it,e),M.html(B.slideshowStart).unbind(l).one(l,function(){Q.next(),i()}),g.removeClass(s+"on").addClass(s+"off")}function n(){r=!1,M.hide(),e(),st.unbind(ot,t).unbind(it,e),g.removeClass(s+"off "+s+"on")}var r,h,s=Z+"Slideshow_",l="click."+Z;return function(){r?B.slideshow||(st.unbind(nt,n),n()):B.slideshow&&k[1]&&(r=!0,st.one(nt,n),B.slideshowAuto?i():o(),M.show())}}();e.colorbox||(e(f),Q=e.fn[Y]=e[Y]=function(t,i){var o=this;if(t=t||{},f(),p()){if(e.isFunction(o))o=e("<a/>"),t.open=!0;else if(!o[0])return o;i&&(t.onComplete=i),o.each(function(){e.data(this,Y,e.extend({},e.data(this,Y)||X,t))}).addClass(et),(e.isFunction(t.open)&&t.open.call(o)||t.open)&&u(o[0])}return o},Q.position=function(t,i){function o(){x[0].style.width=C[0].style.width=y[0].style.width=parseInt(g[0].style.width,10)-_+"px",y[0].style.height=b[0].style.height=T[0].style.height=parseInt(g[0].style.height,10)-O+"px"}var r,s,l,a=0,d=0,c=g.offset();if(E.unbind("resize."+Z),g.css({top:-9e4,left:-9e4}),s=E.scrollTop(),l=E.scrollLeft(),B.fixed?(c.top-=s,c.left-=l,g.css({position:"fixed"})):(a=s,d=l,g.css({position:"absolute"})),d+=B.right!==!1?Math.max(E.width()-B.w-A-_-h(B.right,"x"),0):B.left!==!1?h(B.left,"x"):Math.round(Math.max(E.width()-B.w-A-_,0)/2),a+=B.bottom!==!1?Math.max(n()-B.h-D-O-h(B.bottom,"y"),0):B.top!==!1?h(B.top,"y"):Math.round(Math.max(n()-B.h-D-O,0)/2),g.css({top:c.top,left:c.left,visibility:"visible"}),v[0].style.width=v[0].style.height="9999px",r={width:B.w+A+_,height:B.h+D+O,top:a,left:d},t){var u=0;e.each(r,function(e){return r[e]!==dt[e]?(u=t,void 0):void 0}),t=u}dt=r,t||g.css(r),g.dequeue().animate(r,{duration:t||0,complete:function(){o(),$=!1,v[0].style.width=B.w+A+_+"px",v[0].style.height=B.h+D+O+"px",B.reposition&&setTimeout(function(){E.bind("resize."+Z,Q.position)},1),i&&i()},step:o})},Q.resize=function(e){var t;U&&(e=e||{},e.width&&(B.w=h(e.width,"x")-A-_),e.innerWidth&&(B.w=h(e.innerWidth,"x")),H.css({width:B.w}),e.height&&(B.h=h(e.height,"y")-D-O),e.innerHeight&&(B.h=h(e.innerHeight,"y")),e.innerHeight||e.height||(t=H.scrollTop(),H.css({height:"auto"}),B.h=H.height()),H.css({height:B.h}),t&&H.scrollTop(t),Q.position("none"===B.transition?0:B.speed))},Q.prep=function(i){function n(){return B.w=B.w||H.width(),B.w=B.mw&&B.mw<B.w?B.mw:B.w,B.w}function h(){return B.h=B.h||H.height(),B.h=B.mh&&B.mh<B.h?B.mh:B.h,B.h}if(U){var a,d="none"===B.transition?0:B.speed;H.empty().remove(),H=o(lt,"LoadedContent").append(i),H.hide().appendTo(W.show()).css({width:n(),overflow:B.scrolling?"auto":"hidden"}).css({height:h()}).prependTo(y),W.hide(),e(j).css({"float":"none"}),a=function(){function i(){e.support.opacity===!1&&g[0].style.removeAttribute("filter")}var n,h,a=k.length,u="frameBorder",f="allowTransparency";U&&(h=function(){clearTimeout(G),F.hide(),c(ot,B.onComplete)},L.html(B.title).add(H).show(),a>1?("string"==typeof B.current&&S.html(B.current.replace("{current}",z+1).replace("{total}",a)).show(),R[B.loop||a-1>z?"show":"hide"]().html(B.next),I[B.loop||z?"show":"hide"]().html(B.previous),ct(),B.preloading&&e.each([r(-1),r(1)],function(){var i,o,n=k[this],r=e.data(n,Y);r&&r.href?(i=r.href,e.isFunction(i)&&(i=i.call(n))):i=e(n).attr("href"),i&&s(r,i)&&(i=l(r,i),o=t.createElement("img"),o.src=i)})):P.hide(),B.iframe?(n=o("iframe")[0],u in n&&(n[u]=0),f in n&&(n[f]="true"),B.scrolling||(n.scrolling="no"),e(n).attr({src:B.href,name:(new Date).getTime(),"class":Z+"Iframe",allowFullScreen:!0,webkitAllowFullScreen:!0,mozallowfullscreen:!0}).one("load",h).appendTo(H),st.one(ht,function(){n.src="//about:blank"}),B.fastIframe&&e(n).trigger("load")):h(),"fade"===B.transition?g.fadeTo(d,1,i):i())},"fade"===B.transition?g.fadeTo(d,0,function(){Q.position(0,a)}):Q.position(d,a)}},Q.next=function(){!$&&k[1]&&(B.loop||k[z+1])&&(z=r(1),u(k[z]))},Q.prev=function(){!$&&k[1]&&(B.loop||z)&&(z=r(-1),u(k[z]))},Q.close=function(){U&&!q&&(q=!0,U=!1,c(nt,B.onCleanup),E.unbind("."+Z),w.fadeTo(B.fadeOut||0,0),g.stop().fadeTo(B.fadeOut||0,0,function(){g.add(w).css({opacity:1,cursor:"auto"}).hide(),c(ht),H.empty().remove(),setTimeout(function(){q=!1,c(rt,B.onClosed)},1)}))},Q.remove=function(){g&&(g.stop(),e.colorbox.close(),g.stop().remove(),w.remove(),q=!1,g=null,e("."+et).removeData(Y).removeClass(et),e(t).unbind("click."+Z))},Q.element=function(){return e(N)},Q.settings=X)})(jQuery,document,window);
\ No newline at end of file
diff --git a/slapos/runner/static/js/jquery/jqueryTabs.js b/slapos/runner/static/js/jquery/jqueryTabs.js
index 9b294ed..e07d71c 100644
--- a/slapos/runner/static/js/jquery/jqueryTabs.js
+++ b/slapos/runner/static/js/jquery/jqueryTabs.js
@@ -4,7 +4,7 @@ $(document).ready(function(){
   var fromheight = 0;
   var previoustab = null;
   if (hashes.length == 2 && hashes[1] !== ''){
-    $("#tabContaier>ul li").each(function() {
+    $("#tabContainer>ul li").each(function() {
       var $tab = $(this).find("a");
       if($tab.hasClass("active")){
         $tab.removeClass("active");
@@ -18,26 +18,26 @@ $(document).ready(function(){
     });
   }
   else{$(".tabContents:first").show(); previoustab = ".tabContents:first";} // Show the first div of tab content by default
-  $("#tabContaier ul li a").click(function(){ //Fire the click event
+  $("#tabContainer ul li a").click(function(){ //Fire the click event
     if($(this).hasClass('active')){
         return false;
     }
     fromheight = $(previoustab).height();
     var activeTab = $(this).attr("href"); // Catch the click link
-    $("#tabContaier .tabDetails").css("height", $("#tabContaier .tabDetails").height());
-    $("#tabContaier ul li a").removeClass("active"); // Remove pre-highlighted link
+    $("#tabContainer .tabDetails").css("height", $("#tabContainer .tabDetails").height());
+    $("#tabContainer ul li a").removeClass("active"); // Remove pre-highlighted link
     $(this).addClass("active"); // set clicked link to highlight state
     $(".tabContents").hide(); // hide currently visible tab content div
     $(activeTab).fadeIn(); // show the target tab content div by matching clicked link.
     var diff = fromheight - $(activeTab).height();
-    if (diff > 0){$("#tabContaier .tabDetails").animate({height: '-=' + diff + 'px'}, 850, 'swing', function() {
-      $("#tabContaier .tabDetails").css("height", "");
+    if (diff > 0){$("#tabContainer .tabDetails").animate({height: '-=' + diff + 'px'}, 850, 'swing', function() {
+      $("#tabContainer .tabDetails").css("height", "");
     });}
-    else{diff = -1*diff; $("#tabContaier .tabDetails").animate({height: '+=' + diff + 'px'}, 850, 'swing', function() {
-      $("#tabContaier .tabDetails").css("height", "");
+    else{diff = -1*diff; $("#tabContainer .tabDetails").animate({height: '+=' + diff + 'px'}, 850, 'swing', function() {
+      $("#tabContainer .tabDetails").css("height", "");
     });}
     previoustab = activeTab;
-    $("#tabContaier .tabDetails").css("height", $("#tabContaier .tabDetails").height());
+    $("#tabContainer .tabDetails").css("height", $("#tabContainer .tabDetails").height());
     return false;//this reinitialize tab index when reload page
   });
-});
+});
\ No newline at end of file
diff --git a/slapos/runner/static/js/jquery/jqueryToolTip.js b/slapos/runner/static/js/jquery/jqueryToolTip.js
index affc802..98c5ea6 100644
--- a/slapos/runner/static/js/jquery/jqueryToolTip.js
+++ b/slapos/runner/static/js/jquery/jqueryToolTip.js
@@ -5,47 +5,63 @@ $(function () {
     var hideDelayTimer = null;
     var beingShown = false;
     var shown = false;
+    var canShow = false;
     $('.popup').css('opacity', 0);
-    $('a[rel=tooltip], a[rel=tooltip-min], .popup').mouseover(function () {
-        var height = $(this).height();
-        var top = $(this).offset().top + height;
-        var left = $(this).offset().left +($(this).width()/2)-30;
-        var content = "#tooltip-" + $(this).attr('id');
-        if (hideDelayTimer) clearTimeout(hideDelayTimer);
-        if (beingShown || shown) {
-            return;
-        } else {
-            $('#jqtooltip').empty();
-            var contentValue = $(content).clone(true, true);
-            $(contentValue).appendTo('#jqtooltip');
-            $('#jqtooltip ' + content).show();
-            // reset position of info box
-            beingShown = true;
-            $('.popup').css({
-                top: top,
-                left: left,
-                display: 'block'
-            }).animate({
-                top: '-=' + distance + 'px',
-                opacity: 1
-            }, time, 'swing', function() {
-                beingShown = false;
-                shown = true;
-            });
-        }
-        return false;
-    }).mouseout(function () {
-        if (hideDelayTimer) clearTimeout(hideDelayTimer);
-            hideDelayTimer = setTimeout(function () {
-                hideDelayTimer = null;
-                $('.popup').animate({
-                    top: '-=' + distance + 'px',
-                    opacity: 0
-                }, time, 'swing', function () {
-                    $('.popup').css('display', 'none');
-                    shown = false;
-                });
-            }, hideDelay);
+    $('a[rel=tooltip], span[rel=tooltip]').click(function(){
+      if (!canShow){
+        canShow = true;
+        $(this).mouseover();
+      }
+      else{
+        $(this).mouseout();
+      }
+      return false;
+    });
+    $('a[rel=tooltip], span[rel=tooltip], .popup').mouseover(function () {
+      if (!canShow){
         return false;
+      }
+      var height = $(this).height();
+      var top = $(this).offset().top + height;
+      var left = $(this).offset().left +($(this).width()/2)-30;
+      var content = "#tooltip-" + $(this).attr('id');
+      if (hideDelayTimer) clearTimeout(hideDelayTimer);
+      if (beingShown || shown) {
+        return;
+      } else {
+        $('#jqtooltip').empty();
+        var contentValue = $(content).clone(true, true);
+        $(contentValue).appendTo('#jqtooltip');
+        $('#jqtooltip ' + content).show();
+        // reset position of info box
+        beingShown = true;
+        $('.popup').css({
+            top: top,
+            left: left,
+            display: 'block'
+        }).animate({
+            top: '-=' + distance + 'px',
+            opacity: 1
+        }, time, 'swing', function() {
+            beingShown = false;
+            shown = true;
+        });
+      }
+      return false;
+    });
+    $('a[rel=tooltip], span[rel=tooltip], .popup').mouseout(function () {
+      if (hideDelayTimer) clearTimeout(hideDelayTimer);
+      hideDelayTimer = setTimeout(function () {
+          hideDelayTimer = null;
+          $('.popup').animate({
+              top: '-=' + distance + 'px',
+              opacity: 0
+          }, time, 'swing', function () {
+              $('.popup').css('display', 'none');
+              shown = false;
+              canShow = false;
+          });
+      }, hideDelay);
+      return false;
     });
 });
\ No newline at end of file
diff --git a/slapos/runner/static/js/jquery/popupBox.js b/slapos/runner/static/js/jquery/popupBox.js
index 7ead622..2ef8544 100644
--- a/slapos/runner/static/js/jquery/popupBox.js
+++ b/slapos/runner/static/js/jquery/popupBox.js
@@ -31,10 +31,9 @@
         }
         $box.show();
         $box.css('top', + ($(window).scrollTop()) +'px');
-        $box.append('<div id="' + currentBox + '" style="display:none"><table><tr>' +
-        '<td valign="middle" class="logo ' + option.type + '_message"></td>' +
+        $box.append('<div id="' + currentBox + '" style="display:none" class="'+option.type+'"><table><tr>' +
         '<td valign="middle"><p>' + msg + '</p></td>' +
-        '<td valign="middle" class="b_close"><span id="pClose'+boxCount+'" class="pClose"></span></td></tr></table></div>');
+        '<td valign="top" class="b_close"><span id="pClose'+boxCount+'" class="pClose"></span></td></tr></table></div>');
 
         $("#pClose"+boxCount).bind("click", function() {
           close($("#"+currentBox));
@@ -58,8 +57,9 @@
       }
       function close($elt){
         $elt.unbind('click');
-        $elt.fadeOut();
-        $elt.remove();
+        $elt.fadeOut("slow", function() {
+          $elt.remove();
+        });
       }
     }
   });
diff --git a/slapos/runner/templates/account.html b/slapos/runner/templates/account.html
index 2243bc3..1dc6311 100644
--- a/slapos/runner/templates/account.html
+++ b/slapos/runner/templates/account.html
@@ -8,7 +8,7 @@
 {% endblock %}
 {% block body %}
 <h2>Web runner parameters</h2><br/>
-<div id="tabContaier">
+<div id="tabContainer">
   <ul>
     <li><a href="#tab1" class="active">Your personal information</a></li>
     <!--<li><a href="#tab2">Configurations</a></li>-->
diff --git a/slapos/runner/templates/instanceInspect.html b/slapos/runner/templates/instanceInspect.html
index 875b3e1..b24edb5 100644
--- a/slapos/runner/templates/instanceInspect.html
+++ b/slapos/runner/templates/instanceInspect.html
@@ -16,7 +16,7 @@
 <input type='hidden' name='root' id='root' value='{%if file_path != "" %}{{file_path}}{%endif%}' />
 <input type="hidden" name="partition_amount" id="partitionAmount" value="{{ partition_amount }}" />
 <h2>Instance inspection</h2><br/>
-<div id="tabContaier">
+<div id="tabContainer">
     <ul>
       <li><a href="#tab1" class="active">Process</a></li>
       <li><a href="#tab2">Connection Information</a></li>
diff --git a/slapos/runner/templates/manageRepository.html b/slapos/runner/templates/manageRepository.html
index 3ea9f66..f44fc8e 100644
--- a/slapos/runner/templates/manageRepository.html
+++ b/slapos/runner/templates/manageRepository.html
@@ -13,7 +13,7 @@
   <script src="{{ url_for('static', filename='js/ace/ace.js') }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}
 {% block body %}
-<div id="tabContaier">
+<div id="tabContainer">
   <ul>
     <li><a href="#tab1" class="active" id="cloneTab">Clone repository</a></li>
     <li><a href="#tab2" id="gitTab">Manage (GIT)</a></li>
-- 
2.30.9