From 7b99febba1bf0276e8d81941337b2344fb567b91 Mon Sep 17 00:00:00 2001
From: Matt Pass <matt@mattpass.com>
Date: Thu, 25 Jun 2015 13:33:00 +0100
Subject: [PATCH] floatingContainer added and CSS class & pseudo set

DOM elem has an ID as a hook so we can target later
Class sets a 55px square block for a 11x11 grid of 5px squares, hidden
to begin with, also with border for contrast and image-rendering value
of pixelated, so we get sharp pixels squares at our 5x zoom
Pseudo class added, 3px square as it has a 1px border, positioned to sit
over the 6th square (centre) in our 11px square grid
---
 index.php         | 1 +
 lib/ice-coder.css | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/index.php b/index.php
index 46cea3c..ec85d43 100644
--- a/index.php
+++ b/index.php
@@ -121,6 +121,7 @@ $t = $text['index'];
 	<div class="popupVCenter">
 		<div class="popup" id="mediaContainer"></div>
 	</div>
+	<div class="floatingContainer" id="floatingContainer"></div>
 </div>
 
 <div id="loadingMask" class="blackMask" style="visibility: visible" onContextMenu="return false">
diff --git a/lib/ice-coder.css b/lib/ice-coder.css
index 823faa3..78e5064 100644
--- a/lib/ice-coder.css
+++ b/lib/ice-coder.css
@@ -31,6 +31,8 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
 .blackMask {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; background-color: rgba(0,0,0,0.8); text-align: center; z-index: 100}
 .blackMask .popupVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
 .popupVCenter .popup {#position: relative; #top: -50%; text-align: center; color: #fff; font-size: 10px}
+.floatingContainer {position: absolute; top: 0; left: 0; width: 55px; height: 55px; visibility: hidden; border: solid 1px #444; image-rendering: pixelated}
+.floatingContainer:before {position: absolute; display: inline-block; width: 3px; height: 3px; left: 25px; top: 25px; content: ''; border: solid 1px #b00}
 .whiteGlow {box-shadow: 0 0 8px 2px rgba(255,255,255,0.6)}
 
 .spinner {width: 50px; height: 50px; margin: 20px auto; background: #fff;