adding more boxes to mytest.html

2 files changed, 104 insertions, 57 deletions

diff --git a/examples/adding_up_to_10/css/mytest.css b/examples/adding_up_to_10/css/mytest.css
index f5e2945..b3c9ce1 100644
--- a/examples/adding_up_to_10/css/mytest.css
+++ b/examples/adding_up_to_10/css/mytest.css
@@ -5,88 +5,130 @@
 }
 
 #action {
-    height: 100%;
-    width: 70%;
-    float: left;
+    float:left;
+    height:100%;
+    position:relative;
+    width:70%;
 }
-
 #sidebar {
     background:blue none repeat scroll 0 0;
     float:left;
     height:100%;
+    position:relative;
     width:30%;
 }
-
 #actionTop {
     height:50%;
-    width: 100%;
-    float: left;
+    position:relative;
+    width:100%;
 }
 #actionBottom {
+    clear:both;
+    float:left;
     height:50%;
-    width: 100%;
-    float: left;
-    clear: both;
+    position:relative;
+    width:100%;
 }
-
 #actionTopLeft {
-    width:40%;
-    height:100%;
-    background:yellow;
+    background:yellow none repeat scroll 0 0;
     float:left;
+    height:100%;
+    position:relative;
+    width:40%;
 }
-
 #actionTopMiddle {
-    width:20%;
-    height:100%;
-    background:red;
+    background:red none repeat scroll 0 0;
     float:left;
+    height:100%;
+    position:relative;
+    width:20%;
 }
-
 #actionTopRight {
-    width:40%;
-    height:100%;
-    background:green;
+    background:green none repeat scroll 0 0;
     float:left;
+    height:100%;
+    position:relative;
+    width:40%;
 }
-
-
-
 #actionBottomLeft {
+    -moz-background-clip:border;
+    -moz-background-inline-policy:continuous;
+    -moz-background-origin:padding;
+    background:yellow none repeat scroll 0 0;
     float:left;
-    width:33.3%;
     height:100%;
-    background:yellow;
+    position:relative;
+    width:33.3%;
 }
-
-
 #actionBottomMiddle {
+    -moz-background-clip:border;
+    -moz-background-inline-policy:continuous;
+    -moz-background-origin:padding;
+    background:red none repeat scroll 0 0;
     float:left;
-    width:33.3%;
     height:100%;
-    background:red;
+    position:relative;
+    width:33.3%;
 }
-
-
 #actionBottomRight {
+    -moz-background-clip:border;
+    -moz-background-inline-policy:continuous;
+    -moz-background-origin:padding;
+    background:green none repeat scroll 0 0;
     float:left;
-    width:33.3%;
     height:100%;
-    background:green;
+    position:relative;
+    width:33.3%;
 }
-
 #actionTopLeftBox {
-    position: absolute;
-    right: 10%;
-    bottom: 20%
-    height:  40%;
-    width: 40%;
-    background: blue;
+    -moz-background-clip:border;
+    -moz-background-inline-policy:continuous;
+    -moz-background-origin:padding;
+    background:blue none repeat scroll 0 0;
+    height:40%;
+    left:40%;
+    position:absolute;
+    top:40%;
+    width:40%;
 }
-
 #actionTopLeftCanvas {
+    -moz-background-clip:border;
+    -moz-background-inline-policy:continuous;
+    -moz-background-origin:padding;
+    background:black none repeat scroll 0 0;
+    bottom:20%;
+    height:30%;
+    left:40%;
+    position:relative;
+    top:40%;
+    width:40%;
+}
+#plussign {
     position: absolute;
-    right: 10%;
+}
 
+#actionTopRightBox {
+    -moz-background-clip:border;
+    -moz-background-inline-policy:continuous;
+    -moz-background-origin:padding;
+    background:blue none repeat scroll 0 0;
+    height:40%;
+    right:40%;
+    position:absolute;
+    top:40%;
+    width:40%;
+}
 
+#actionTopRightCanvas {
+    -moz-background-clip:border;
+    -moz-background-inline-policy:continuous;
+    -moz-background-origin:padding;
+    background:black none repeat scroll 0 0;
+    bottom:20%;
+    height:30%;
+    right:40%;
+    position:absolute;
+    top:40%;
+    width:40%;
 }
+
diff --git a/examples/adding_up_to_10/mytest.html b/examples/adding_up_to_10/mytest.html
index aa9e2f0..209b9a8 100755
--- a/examples/adding_up_to_10/mytest.html
+++ b/examples/adding_up_to_10/mytest.html
@@ -21,8 +21,13 @@
 <canvas id="actionTopLeftCanvas"></canvas>
 
 </div>
-<div id="actionTopMiddle"></div>
-<div id="actionTopRight"></div>
+<div id="actionTopMiddle">
+<img id="plussign" src="assets/generic/images/plussign.png" alt=""/>
+</div>
+<div id="actionTopRight">
+<img id="actionTopRightBox" src="assets/generic/images/yellowBox.png" alt=""/>
+<canvas id="actionTopLeftCanvas"></canvas>
+</div>
 
 </div>
 
@@ -48,17 +53,17 @@
 </div>
 
 <!--
-<img id="topLeftBox" src="assets/generic/images/yellowBox.png" alt="">
-<img id="topRightBox" src="assets/generic/images/yellowBox.png" alt="">
-<img id="bottomLeftBox" src="assets/generic/images/yellowBox.png" alt="">
-<img id="bottomMiddleBox" src="assets/generic/images/yellowBox.png" alt="">
-<img id="bottomRightBox" src="assets/generic/images/yellowBox.png" alt="">
-<img id="plussign" src="assets/generic/images/plussign.png" alt="">
-<img id="timer" src="assets/generic/images/scorebox.png" alt="">
-<img id="scorebox" src="assets/generic/images/scorebox.png" alt="">
-<img id="chimp" src="assets/generic/images/normalChimp_200x209.png" alt="">
-<img id="sidebar" src="assets/generic/images/sidebar.png" alt="">
-<img id="chimp" src="assets/generic/images/normalChimp_200x209.png" alt="">
+<img id="topLeftBox" src="assets/generic/images/yellowBox.png" alt=""/>
+<img id="topRightBox" src="assets/generic/images/yellowBox.png" alt=""/>
+<img id="bottomLeftBox" src="assets/generic/images/yellowBox.png" alt=""/>
+<img id="bottomMiddleBox" src="assets/generic/images/yellowBox.png" alt=""/>
+<img id="bottomRightBox" src="assets/generic/images/yellowBox.png" alt=""/>
+<img id="plussign" src="assets/generic/images/plussign.png" alt=""/>
+<img id="timer" src="assets/generic/images/scorebox.png" alt=""/>
+<img id="scorebox" src="assets/generic/images/scorebox.png" alt=""/>
+<img id="chimp" src="assets/generic/images/normalChimp_200x209.png" alt=""/>
+<img id="sidebar" src="assets/generic/images/sidebar.png" alt=""/>
+<img id="chimp" src="assets/generic/images/normalChimp_200x209.png" alt=""/>
 -->
 
 </body>