diff --git a/debian/changelog b/debian/changelog
index 3ce35a76..7461d478 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,4 +1,4 @@
-hedera-web (1.328-deb8) stable; urgency=low
+hedera-web (1.337-deb8) stable; urgency=low
 
   * Initial Release.
 
diff --git a/web/forms/ecomerce/basket/style.css b/web/forms/ecomerce/basket/style.css
index c250a813..7893b0dc 100644
--- a/web/forms/ecomerce/basket/style.css
+++ b/web/forms/ecomerce/basket/style.css
@@ -52,6 +52,7 @@
 	float: left;
 	border-radius: 50%;
 	height: 3.2em;
+	width: 3.2em;
 }
 .basket .line > p
 {
diff --git a/web/forms/ecomerce/basket/ui.xml b/web/forms/ecomerce/basket/ui.xml
index 629c3036..7fba5f82 100755
--- a/web/forms/ecomerce/basket/ui.xml
+++ b/web/forms/ecomerce/basket/ui.xml
@@ -55,7 +55,6 @@
 							class="photo"
 							directory="catalog"
 							subdir="200x200"
-							show-full="true"
 							full-dir="900x900"/>
 						<p class="concept">
 							<htk-text form="iter" column="Article"/> 
diff --git a/web/forms/ecomerce/catalog/catalog.js b/web/forms/ecomerce/catalog/catalog.js
index 9117a6db..076f7077 100644
--- a/web/forms/ecomerce/catalog/catalog.js
+++ b/web/forms/ecomerce/catalog/catalog.js
@@ -87,12 +87,6 @@ Vn.Catalog = new Class
 			Vn.Node.setText (this.$('method'), _('Warehouse'));
 	}
 	
-	,typeRenderer: function (builder, form)
-	{
-		var link = builder.$('link');
-		link.href = this.hash.make ({'type': form.get ('tipo_id')}, true);
-	}
-	
 	,onItemsChange: function (model, status)
 	{
 		if (status !== Db.Model.Status.CLEAN)
@@ -241,98 +235,42 @@ Vn.Catalog = new Class
 		this.hideMenuCallback = null;
 	}
 	
-	,onBasketClick: function ()
-	{
-		if (!Vn.Cookie.check ('hedera_guest'))
-			this.hash.set ({'form': 'ecomerce/basket'});
-		else
-			Htk.Toast.showError (_('YouMustBeLoggedIn'));
-	}
-	
-	,onConfigureClick: function ()
-	{
-		if (!Vn.Cookie.check ('hedera_guest'))
-			this.hash.set ({'form': 'ecomerce/checkout'});
-		else
-			Htk.Toast.showError (_('YouMustBeLoggedIn'));
-	}
-	
-	,nameRenderer: function (renderer, form)
-	{
-		renderer.subtitle = form.get ('producer');
-	}
-
-	,amountRender: function (renderer, form)
-	{
-		var amount = form.get ('amount');
-		var grouping = form.get ('grouping');
-
-		if (amount && grouping)
-			renderer.value = amount / grouping;
-		else
-			renderer.value = null;
-	}
-
-	,amountChanged: function (renderer, row, newValue)
-	{
-		var model = this.$('items-model');
-		model.set (row, 'amount', newValue * model.get (row, 'grouping'));
-	}
-
-	,catRenderer: function (column, form)
-	{
-		switch (form.get ('Categoria'))
-		{
-			case 'A2':
-				column.td.className = 'second-category';
-				break;
-			case 'B1':
-				column.td.className = 'third-category';
-				break;
-			default:
-				column.td.className = '';
-		}
-	}
-
-	,onInfoClick: function  (button, form)
-	{
-		var descNode = this.$('description');
-		Vn.Node.removeChilds (descNode);
-		
-		var desc = form.get ('description');
-		
-		if (!desc)
-			desc = _('No info available');
-
-		descNode.appendChild (document.createTextNode (desc));
-		
-		this.$('desc-popup').show (button.getNode ());
-	}
-
-	,onGridAddItemClick: function (button, form)
-	{
-		this.showAmountPopup (button.getNode (), form.row);
-	}
-	
-	,onAddItemClick: function  (column, value, row, button)
-	{
-		this.showAmountPopup (button, row);
-	}
-	
-	,showAmountPopup: function (button, row)
+	,isGuest: function ()
 	{
 		if (Vn.Cookie.check ('hedera_guest'))
 		{
 			Htk.Toast.showError (_('YouMustBeLoggedIn'));
-			return;
+			return true;
 		}
+		
+		return false;
+	}
+	
+	,onBasketClick: function ()
+	{
+		if (this.isGuest ())
+			return;
 
-		var itemId = this.$('items-model').get (row, 'item_id')
-		this.$('lots-batch').addValue ('item', itemId);
+		this.hash.set ({'form': 'ecomerce/basket'});
+	}
+	
+	,onConfigureClick: function ()
+	{
+		if (this.isGuest ())
+			return;
+
+		this.hash.set ({'form': 'ecomerce/checkout'});
+	}
+
+	,onAddItemClick: function (button, form)
+	{
+		if (this.isGuest ())
+			return;
 
-		this.itemRow = row;
 		this.onEraseClick ();
-		this.$('lots-popup').show (button);
+		this.$('card').row = form.row;
+		this.$('card-item').value = form.get ('item_id');
+		this.$('card-popup').show (button.getNode ());
 	}
 	
 	,onAddLotClick: function (column, value, row, button)
@@ -361,16 +299,8 @@ Vn.Catalog = new Class
 			Htk.Toast.showError (_('NoMoreAmountAvailable'));
 	}
 	
-	,onEraseClick: function ()
-	{
-		this.$('amount').value = 0;
-		this.items = {};
-	}
-	
 	,onConfirmClick: function ()
 	{
-		var model = this.$('items-model');
-	
 		var sql = '';
 		var batch = new Sql.Batch ();
 		var query = new Sql.String ({query: 'CALL basket_item_add (#warehouse, #item, #amount);'});
@@ -382,7 +312,7 @@ Vn.Catalog = new Class
 			amountSum += amount;
 		
 			batch.addValue ('warehouse', warehouse);
-			batch.addValue ('item', model.get (this.itemRow, 'item_id'));
+			batch.addValue ('item', this.$('card-item').value);
 			batch.addValue ('amount', amount);
 			sql += query.render (batch);
 		}
@@ -391,26 +321,30 @@ Vn.Catalog = new Class
 		{
 			this.conn.execQuery (sql);
 
-			var itemName = model.get (this.itemRow, 'Article');
+			var itemName = this.$('card').get ('Article');
 			Htk.Toast.showMessage (
 				sprintf (_('Added%dOf%s'), amountSum, itemName));
 		}
 
-		this.$('lots-popup').hide ();
+		this.$('card-popup').hide ();
+	}
+	
+	,onEraseClick: function ()
+	{
+		this.$('amount').value = 0;
+		this.items = {};
+	}
+	
+	,onPopupClose: function ()
+	{
+		this.onEraseClick ();
+		this.$('card').row = -1;
+		this.$('card-item').value = undefined;
 	}
 	
 	,onStatusChange: function (model)
 	{
-		this.$('lots-popup').reset ();
-	}
-	
-	,gridRenderer: function (res, form)
-	{
-		if (!form.get ('description'))
-		{
-			var button = res.$('info-button').getNode ();
-			button.style.display = 'none';
-		}
+		this.$('card-popup').reset ();
 	}
 });
 
@@ -597,32 +531,5 @@ Vn.Filter = new Class
 			this._label.nodeValue = _('Loading...');
 		}
 	}
-})
-
-Vn.ColumnItem = new Class
-({
-	Extends: Htk.Column
-	,Tag: 'vn-column-item'
-
-	,render: function (tr)
-	{
-		var td = this.parent (tr);
-		td.style.textAlign = 'left';
-
-		if (this.value)
-		{
-			var node = document.createTextNode (
-				Vn.Value.format (this.value, this._format));
-			td.appendChild (node);
-		}
-
-		if (this.subtitle)
-		{
-			td.appendChild (document.createElement ('br'));
-			td.appendChild (document.createTextNode (this.subtitle));
-		}
-
-		return td;
-	}
-})
+});
 
diff --git a/web/forms/ecomerce/catalog/style.css b/web/forms/ecomerce/catalog/style.css
index 7e3de3c1..b94cc19e 100644
--- a/web/forms/ecomerce/catalog/style.css
+++ b/web/forms/ecomerce/catalog/style.css
@@ -7,7 +7,7 @@
 
 .htk-toast
 {
-	margin-left: -11em;
+	margin-left: -10.5em;
 }
 
 /* Topbar */
@@ -150,71 +150,40 @@
 	margin-top: 1em;
 }
 
-/* Item description */
-
-.desc-popup
-{
-	padding: 1em;
-	max-width: 15em;
-}
-
-/* Lots popup*/
-
-.lots-popup .footer
-{
-	text-align: center;
-	background-color: #009688;
-	color: white;
-	line-height: 2em;
-	padding: .4em;
-}
-.lots-popup .footer > button
-{
-	margin: 0;
-}
-.lots-popup .erase
-{
-	float: left;
-}
-.lots-popup .confirm
-{
-	float: right;
-}
-.lots-popup .erase > img,
-.lots-popup .confirm > img
-{
-	display: block;
-	height: 1em;
-}
-
 /* Items */
 
-.catalog .second-category
+.item-info
+{
+	position: relative;
+}
+.item-info .second-category
 {
 	font-weight: bold;
 	color: orange;
 }
-.catalog .third-category
+.item-info .third-category
 {
 	font-weight: bold;
 	color: red;
 }
-.catalog .price
+.item-info .from
+{
+	font-size: .8em;
+	font-style: italic;
+}
+.item-info .price
 {
 	color: green;
 	font-size: 1.1em;
 }
-.catalog .footer-message
-{
-	padding-bottom: 1em;
-	text-align: center;
-}
-.catalog .item-info > h2
+.item-info > h2
 {
+	padding: 0;
+	padding-bottom: .1em;
 	font-weight: normal;
 	font-size: 1.1em;
 }
-.catalog .item-info > p
+.item-info > p
 {
 	margin: 0;
 	padding: 0;
@@ -224,11 +193,18 @@
 	white-space: nowrap;
 	overflow: hidden;
 }
-.catalog .item-info > .producer
+.item-info .producer
 {
 	text-transform: uppercase;
 	font-weight: bold;
-	padding: .15em 0;
+	padding: 0;
+	padding-bottom: .2em;
+	font-size: 1em;
+}
+.item-info > .aval-price
+{
+	position: absolute;
+	bottom: 0;
 }
 .catalog .item-info > .htk-button
 {
@@ -239,10 +215,72 @@
 {
 	vertical-align: middle;
 }
-.catalog .item-info .from
+
+/* Card */
+
+
+.card-popup
 {
-	font-size: .8em;
-	font-style: italic;
+	overflow: auto;
+}
+.item-card
+{
+	font-size: .9em;
+	width: 20em;
+}
+.item-card .top
+{
+	padding: 1em;
+	border-bottom: 1px solid #DDD;
+}
+.item-card .item-info
+{
+	margin-left: 9em;
+	height: 8em;
+}
+.item-card .htk-image
+{
+	height: 8em;
+	width: 8em;
+	float: left;
+	border-radius: .3em;
+}
+.item-card .desc
+{
+	clear: both;
+	margin: 0;
+	margin-top: 1em;
+	font-size: .9em;
+}
+.item-card .lots-grid tr
+{
+	height: 3em;
+}
+.item-card .footer
+{
+	text-align: center;
+	background-color: #009688;
+	color: white;
+	line-height: 2em;
+	padding: .4em;
+}
+.item-card .footer > button
+{
+	margin: 0;
+}
+.item-card .erase
+{
+	float: left;
+}
+.item-card .confirm
+{
+	float: right;
+}
+.item-card .erase > img,
+.item-card .confirm > img
+{
+	display: block;
+	height: 1em;
 }
 
 /* List view */
@@ -288,7 +326,6 @@
 .list-view .item-info > h2
 {
 	font-size: 1em;
-	padding: 0;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
@@ -299,8 +336,6 @@
 }
 .list-view .item-info > .aval-price
 {
-	position: absolute;
-	bottom: 0;
 	right: .3em;
 }
 .list-view .item-info > .htk-button
@@ -348,14 +383,8 @@
 	bottom: 0;
 	margin: .6em;
 }
-.grid-view .item-info > h2
-{
-	padding-top: 0;
-}
 .grid-view .item-info > .aval-price
 {
-	position: absolute;
-	bottom: 0;
 	right: 2.8em;
 }
 .grid-view .item-info .add-button
diff --git a/web/forms/ecomerce/catalog/ui.xml b/web/forms/ecomerce/catalog/ui.xml
index a667114d..660b435c 100755
--- a/web/forms/ecomerce/catalog/ui.xml
+++ b/web/forms/ecomerce/catalog/ui.xml
@@ -1,5 +1,6 @@
 <vn>
 <vn-group>
+	<vn-param id="card-item"/>
 	<vn-param id="realm" on-changed="onRealmChange"/>
 	<vn-param id="type" on-changed="onTypeChange"/>
 	<vn-param id="search" on-changed="onFilterChange"/>
@@ -39,6 +40,16 @@
 			<sql-value param="producer"/>
 		</sql-filter-item>
 	</sql-filter>
+	<db-form id="basket" on-ready="onBasketReady">
+		<db-model property="model">
+			<custom>
+				SELECT o.id, o.date_send, ag.description agency, v.code method
+					FROM basket o
+						JOIN vn2008.Agencias ag ON ag.Id_Agencia = o.agency_id
+						JOIN vn2008.Vistas v ON v.vista_id = o.delivery_method_id
+			</custom>
+		</db-model>
+	</db-form>
 	<db-query id="basket-lines">
 		<custom>
 			SELECT item_id, warehouse_id, SUM(amount) amount
@@ -46,7 +57,10 @@
 				GROUP BY warehouse_id
 		</custom>
 	</db-query>
-	<db-model result-index="2" id="items-model" on-status-changed="onItemsChange">
+	<db-model
+		id="items-model"
+		result-index="2"
+		on-status-changed="onItemsChange">
 		<custom>
 			CREATE TEMPORARY TABLE tmp.bionic_calc
 			(INDEX (item_id))
@@ -56,8 +70,8 @@
 				WHERE #filter;
 			CALL bionic_calc ();
 			SELECT a.Id_Article item_id, a.description, b.available, b.price,
-			p.name producer, a.Foto, a.Article, a.Categoria, a.Medida,
-			IF(a.Tallos > 1, a.Tallos, NULL) Tallos, c.str color, o.str origin
+			b.producer, a.Foto, a.Article, a.Categoria, a.Medida,
+			IF(a.Tallos > 1, a.Tallos, NULL) Tallos, c.str color
 				FROM tmp.bionic_item b
 					JOIN vn2008.Articles a ON a.Id_Article = b.item_id
 		    		LEFT JOIN vn2008.producer p ON p.producer_id = a.producer_id
@@ -73,7 +87,30 @@
 			</custom>
 		</sql-batch>
 	</db-model>
-	<db-model id="item-lots" result-index="1" on-status-changed-after="onStatusChange">
+	<db-form id="card" model="items-model"/>
+	<sql-batch id="card-batch">
+		<custom>
+			<item name="item" param="card-item"/>
+		</custom>
+	</sql-batch>
+	<db-form id="card-extend">
+		<db-model
+			property="model"
+			batch="card-batch"
+			on-status-changed-after="onStatusChange">
+			<custom>
+				SELECT a.description, o.str origin
+					FROM vn2008.Articles a
+						LEFT JOIN vn_locale.origin_view o ON o.origin_id = a.id_origen
+					WHERE a.Id_Article = #item
+			</custom>
+		</db-model>
+	</db-form>
+	<db-model
+		id="item-lots"
+		result-index="1"
+		on-status-changed-after="onStatusChange"
+		batch="card-batch">
 		<custom>
 			CALL bionic_from_item (#item);
 			SELECT p.warehouse_id, w.name warehouse, p.grouping, p.price, p.rate, l.available
@@ -82,18 +119,7 @@
 					JOIN vn2008.warehouse w ON w.id = p.warehouse_id
 				ORDER BY warehouse_id, grouping;
 		</custom>
-		<sql-batch property="batch" id="lots-batch"/>
 	</db-model>
-	<db-form id="basket" on-ready="onBasketReady">
-		<db-model property="model">
-			<custom>
-				SELECT o.id, o.date_send, ag.description agency, v.code method
-					FROM basket o
-						JOIN vn2008.Agencias ag ON ag.Id_Agencia = o.agency_id
-						JOIN vn2008.Vistas v ON v.vista_id = o.delivery_method_id
-			</custom>
-		</db-model>
-	</db-form>
 </vn-group>
 <div id="title">
 	<h1 id="title-text"><t>Catalog</t></h1>
@@ -122,7 +148,6 @@
 		id="grid-view"
 		empty-message="_Choose filter from right menu"
 		form-id="item"
-		renderer="gridRenderer"
 		model="items-model">
 		<custom>
 		<div class="box item-box">
@@ -131,33 +156,15 @@
 				subdir="200x200"
 				form="item"
 				column="Foto"
-				full-dir="900x900"
-				editable="true"/>
+				full-dir="900x900"/>
 			<div class="item-info">
 				<htk-button
 					form="item"
 					column="id"
 					tip="_AddToBasket"
 					image="image/add.svg"
-					on-click="onGridAddItemClick"
+					on-click="onAddItemClick"
 					class="add-button"/>
-				<htk-button
-					form="item"
-					column="id"
-					tip="_More info"
-					image="image/info.svg"
-					on-click="onInfoClick"
-					id="info-button"
-					class="info-button"/>
-				<div class="aval-price">
-					<htk-text form="item" column="available"/> 
-					<span class="from">
-						<t>from</t>
-					</span> 
-					<span class="price">
-						<htk-text form="item" column="price" format="%.2d€"/>
-					</span>
-				</div>
 				<h2>
 					<htk-text form="item" column="Article"/>
 				</h2>
@@ -172,6 +179,15 @@
 					<t>Color</t> <htk-text form="item" column="color"/>
 					<htk-text form="item" column="Tallos" format="_, %.0d Units"/>
 				</p>
+				<div class="aval-price">
+					<htk-text form="item" column="available"/> 
+					<span class="from">
+						<t>from</t>
+					</span> 
+					<span class="price">
+						<htk-text form="item" column="price" format="%.2d€"/>
+					</span>
+				</div>
 			</div>
 		</div>
 		</custom>
@@ -393,8 +409,43 @@
 		class="desc-popup"
 		id="description"/>
 </htk-popup>
-<htk-popup id="lots-popup">
-	<div property="child-node" class="lots-popup">
+<htk-popup
+	id="card-popup"
+	class="card-popup"
+	modal="true"
+	on-closed="onPopupClose">
+	<div property="child-node" class="item-card">
+		<div class="top">
+			<htk-image
+				directory="catalog"
+				subdir="200x200"
+				form="card"
+				column="Foto"
+				full-dir="900x900"
+				editable="true"/>
+			<div class="item-info">
+				<h2>
+					<htk-text form="card" column="Article"/>
+				</h2>
+				<p class="producer">
+					<htk-text form="card" column="producer"/>
+				</p>
+				<p>
+					<t>Size</t> <htk-text form="card" column="Medida"/>, 
+					<t>Category</t> <htk-text form="card" column="Categoria"/>
+				</p>
+				<p class="color">
+					<t>Color</t> <htk-text form="card" column="color"/>
+					<htk-text form="card" column="Tallos" format="_, %.0d Units"/>
+				</p>
+				<p>
+					<t>Origin</t> <htk-text form="card-extend" column="origin"/>
+				</p>
+			</div>
+			<p class="desc">
+				<htk-text form="card-extend" column="description" id="desc"/>
+			</p>
+		</div>
 		<htk-grid class="lots-grid" model="item-lots" show-header="false">
 			<htk-column-text title="_Store" column="warehouse"/>
 			<htk-column-spin title="_Price" column="price" unit="€" digits="2"/>
diff --git a/web/forms/ecomerce/checkout/checkout.js b/web/forms/ecomerce/checkout/checkout.js
index fc00e589..75588aaa 100644
--- a/web/forms/ecomerce/checkout/checkout.js
+++ b/web/forms/ecomerce/checkout/checkout.js
@@ -93,7 +93,7 @@ Vn.Checkout = new Class
 	
 	,agencySteps: ['method', 'date', 'address', 'agency', 'confirm-agency']
 	,deliverySteps: ['method', 'date', 'address', null, 'confirm-delivery']
-	,pickupSteps: ['method', 'date', 'pickup', null, 'confirm-pickup']
+	,pickupSteps: ['method', 'date', 'address', 'pickup', 'confirm-pickup']
 	
 	,stepFunc: function (stepIndex)
 	{
diff --git a/web/js/db/form.js b/web/js/db/form.js
index 9f2b5893..4aee703a 100644
--- a/web/js/db/form.js
+++ b/web/js/db/form.js
@@ -96,6 +96,8 @@ Db.Form = new Class
 				
 			if (ready)
 				this.signalEmit ('ready');
+
+			this.iterChanged ();
 		}
 	}
 
diff --git a/web/js/htk/field/image.js b/web/js/htk/field/image.js
index 6b447dcc..f9c142f2 100644
--- a/web/js/htk/field/image.js
+++ b/web/js/htk/field/image.js
@@ -1,8 +1,6 @@
 /**
  * Class to display or edit an image. Also it allows to show it's full version.
  **/
-var fullImage = null;
- 
 Htk.Image = new Class
 ({
 	Extends: Htk.Field
diff --git a/web/js/htk/popup.js b/web/js/htk/popup.js
index 4166c96e..51708096 100644
--- a/web/js/htk/popup.js
+++ b/web/js/htk/popup.js
@@ -66,6 +66,7 @@ Htk.Popup = new Class
 		var div = this.createElement ('div');
 		div.className = 'htk-popup';
 		
+		this._bgMouseDownHandler = this._bgMouseDown.bind (this);
 		this.parent (props);
 	}
 
@@ -99,32 +100,35 @@ Htk.Popup = new Class
 			return;
 		}
 	
-		this.node.addEventListener ('mousedown', this._stopEvent);
-
-		this._hideHandler = this.hide.bind (this);
-		document.addEventListener ('mousedown', this._hideHandler);
+		this.node.addEventListener ('mousedown', this._onMouseDown.bind (this));
 
 		if (this.isModal ())
 		{
-			this._background = document.createElement ('div');
-			this._background.className = 'htk-background';
-			document.body.appendChild (this._background);
-
-			setTimeout (this._onOpacityTimeout.bind (this), 0);
+			var bg = this._bg = document.createElement ('div');
+			bg.className = 'htk-background';
+			bg.addEventListener ('mousedown', this._bgMouseDownHandler);
 
 			Vn.Node.addClass (this.node, 'modal');
+			bg.appendChild (this.node);
+
+			document.body.appendChild (bg);
+			setTimeout (this._onOpacityTimeout.bind (this), 0);
+		}
+		else
+		{
+			document.addEventListener ('mousedown', this._bgMouseDownHandler);
+			document.body.appendChild (this.node);
 		}
 		
 		this._isOpen = true;
-		document.body.appendChild (this.node);
 		this.reset ();
 		setTimeout (this._onResetTimeout.bind (this), 0);
 	}
 	
 	,_onOpacityTimeout: function ()
 	{
-		if (this._background)
-			this._background.style.opacity = 1;
+		if (this._bg)
+			this._bg.style.opacity = 1;
 	}
 
 	,_onResetTimeout: function ()
@@ -137,13 +141,16 @@ Htk.Popup = new Class
 		if (!this._isOpen)
 			return;
 
+		var style = this.node.style;
+		style.height = '';
+		style.width = '';
+
 		var margin = 20;
 		var dblMargin = margin * 2;
 		var width = this.node.offsetWidth;
 		var height = this.node.offsetHeight;
 		var innerWidth = Vn.Browser.getInnerWidth ();
 		var innerHeight = Vn.Browser.getInnerHeight ();
-		var style = this.node.style;
 
 		if (width + dblMargin > innerWidth)
 		{
@@ -191,23 +198,32 @@ Htk.Popup = new Class
 		if (!this._isOpen)
 			return;
 
-		if (this._background)		
+		if (this._bg)		
 		{
-			Vn.Node.remove (this._background);
+			Vn.Node.remove (this._bg);
 			Vn.Node.removeClass (this.node, 'modal');
+			this._bg = null;
 		}
-	
-		this.node.removeEventListener ('mousedown', this._stopEvent)
-		document.removeEventListener ('mousedown', this._hideHandler);
+		else
+			document.removeEventListener ('mousedown', this._bgMouseDownHandler);
+
 		Vn.Node.remove (this.node);
 		this._parent = null;
 		this._isOpen = false;
 		this.signalEmit ('closed');
 	}
 	
-	,_stopEvent: function (e)
+	,_bgMouseDown: function (e)
 	{
-		e.stopPropagation ();
+		if (e !== this._lastEvent)
+			this.hide ();
+			
+		this._lastEvent = null;
+	}
+	
+	,_onMouseDown: function (e)
+	{
+		this._lastEvent = e;
 	}
 });
 
diff --git a/web/js/htk/style.css b/web/js/htk/style.css
index fd6b4c17..b2c06930 100644
--- a/web/js/htk/style.css
+++ b/web/js/htk/style.css
@@ -386,19 +386,20 @@ td.cell-image .htk-image
 	text-align: center;
 	overflow: auto;
 	max-height: 40em;
+	overflow: visible;
 }
 .htk-toast > div
 {
+	margin: .5em 0;
 	padding: .5em 2%;
-	margin: .5em 2%;
 	border-radius: 0.1em;
-	box-shadow: 0 0 0.4em #666;
-	width: 92%;
+	box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
+	width: 96%;
 }
 .htk-toast > .message
 {
-	background-color: #B3E5FC;
-	color: #037;
+	background-color: #BBFFBB;
+	color: #363;
 }
 .htk-toast > .warning
 {
@@ -428,11 +429,6 @@ td.cell-image .htk-image
 {
 	border-radius: 0.1em;
 }
-.htk-popup.modal
-{
-	font-size: 1.2em;
-}
-
 .htk-background
 {
 	position: fixed;
@@ -445,6 +441,10 @@ td.cell-image .htk-image
 	opacity: 0;
 	transition: opacity 200ms ease-in-out;
 }
+.htk-background > .htk-popup
+{
+	font-size: 1.2em;
+}
 
 /* Assistant */