changing layout in mytest.html

2 files changed, 233 insertions, 156 deletions

diff --git a/examples/adding_up_to_10/css/mytest.css b/examples/adding_up_to_10/css/mytest.css
index b3c9ce1..cdd2bc1 100644
--- a/examples/adding_up_to_10/css/mytest.css
+++ b/examples/adding_up_to_10/css/mytest.css
@@ -1,134 +1,195 @@
 #main {
-    position: absolute;
-    height: 100%;
-    width: 100%;
+height:95%;
+width:100%;
+position:absolute;
 }
-
 #action {
-    float:left;
-    height:100%;
-    position:relative;
-    width:70%;
+float:left;
+height:100%;
+position:relative;
+width:80%;
 }
 #sidebar {
-    background:blue none repeat scroll 0 0;
-    float:left;
-    height:100%;
-    position:relative;
-    width:30%;
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:blue none repeat scroll 0 0;
+float:left;
+height:100%;
+position:relative;
+width:20%;
 }
 #actionTop {
-    height:50%;
-    position:relative;
-    width:100%;
+height:50%;
+position:relative;
+width:100%;
 }
 #actionBottom {
-    clear:both;
-    float:left;
-    height:50%;
-    position:relative;
-    width:100%;
+clear:both;
+float:left;
+height:50%;
+position:relative;
+width:100%;
 }
 #actionTopLeft {
-    background:yellow none repeat scroll 0 0;
-    float:left;
-    height:100%;
-    position:relative;
-    width:40%;
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:yellow none repeat scroll 0 0;
+float:left;
+height:100%;
+position:relative;
+width:40%;
 }
 #actionTopMiddle {
-    background:red none repeat scroll 0 0;
-    float:left;
-    height:100%;
-    position:relative;
-    width:20%;
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:red none repeat scroll 0 0;
+float:left;
+height:100%;
+position:relative;
+width:20%;
 }
 #actionTopRight {
-    background:green none repeat scroll 0 0;
-    float:left;
-    height:100%;
-    position:relative;
-    width:40%;
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+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;
-    height:100%;
-    position:relative;
-    width:33.3%;
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:yellow none repeat scroll 0 0;
+float:left;
+height:100%;
+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;
-    height:100%;
-    position:relative;
-    width:33.3%;
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:red none repeat scroll 0 0;
+float:left;
+height:100%;
+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;
-    height:100%;
-    position:relative;
-    width:33.3%;
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:green none repeat scroll 0 0;
+float:left;
+height:100%;
+position:relative;
+width:33.3%;
 }
 #actionTopLeftBox {
-    -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%;
+-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%;
+-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:50%;
+position:relative;
+top:40%;
+width:40%;
 }
 #plussign {
-    position: absolute;
+left:33%;
+position:absolute;
+top:60%;
 }
-
 #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%;
-}
-
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:blue none repeat scroll 0 0;
+height:40%;
+position:absolute;
+right:50%;
+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%;
-}
-
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:black none repeat scroll 0 0;
+bottom:20%;
+height:30%;
+position:absolute;
+right:40%;
+top:40%;
+width:40%;
+}
+.actionBottom {
+position:relative;
+}
+.actionBottomBox {
+left:30%;
+position:absolute;
+right:30%;
+}
+#sidebarTop {
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:blue none repeat scroll 0 0;
+clear:both;
+float:left;
+height:33%;
+width:100%;
+position:relative;
+}
+#sidebarMiddle {
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:red none repeat scroll 0 0;
+clear:both;
+float:left;
+height:33%;
+width:100%;
+}
+#sidebarBottom {
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:green none repeat scroll 0 0;
+clear:both;
+float:left;
+height:33%;
+width:100%;
+}
+#timer {
+height:60%;
+width:60%;
+display:block;
+margin:auto;
+}
+#scorebox {
+height:60%;
+width:60%;
+display:block;
+margin:auto;
+}
\ No newline at end of file
diff --git a/examples/adding_up_to_10/mytest.html b/examples/adding_up_to_10/mytest.html
index 209b9a8..9f76bc5 100755
--- a/examples/adding_up_to_10/mytest.html
+++ b/examples/adding_up_to_10/mytest.html
@@ -13,58 +13,74 @@
 
 <body>
   <div id="main">
-<div id="action">
-<div id="actionTop">
-
-<div id="actionTopLeft">
-<img id="actionTopLeftBox" src="assets/generic/images/yellowBox.png" alt="" />
-<canvas id="actionTopLeftCanvas"></canvas>
-
-</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>
-
-<div id="actionBottom">
-<!-- <canvas id="actionBottomCanvas"></canvas> -->
-<div id="actionBottomLeft"></div>
-<div id="actionBottomMiddle"></div>
-<div id="actionBottomRight"></div>
-
-</div>
-
-</div>
-<aside id="sidebar">
-<!-- <canvas id="sidebarCanvas"></canvas> -->
-<div id="sidebarTop"></div>
-<div id="sidebarMiddle"></div>
-<div id="sidebarBottom"></div>
-
-
-</aside>
-
-
-</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=""/>
--->
+    <div id="action">
+      <div id="actionTop">
+
+	<div id="actionTopLeft">
+	  <img id="actionTopLeftBox" src="assets/generic/images/yellowBox.png" alt="" />
+	  <canvas id="actionTopLeftCanvas"></canvas>
+
+	</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="actionTopRightCanvas"></canvas>
+	</div>
+
+      </div>
+
+      <div id="actionBottom">
+	<!-- <canvas id="actionBottomCanvas"></canvas> -->
+	<div id="actionBottomLeft" class="actionBottom">
+	  <img class="actionBottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
+	  <canvas class="actionBottomBox"> </canvas>
+	</div>
+	<div id="actionBottomMiddle" class="actionBottom">
+	  <img class="actionBottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
+	  <canvas class="actionBottomBox"> </canvas>
+	</div>
+	<div id="actionBottomRight" class="actionBottom">
+	  <img class="actionBottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
+	  <canvas id="actionBottomRightCanvas" class="actionBottomBox"> </canvas>
+	</div>
+
+      </div>
+
+    </div>
+    <aside id="sidebar">
+      <section id="sidebarTop">
+	<img id="timer" class="sidebarItem" src="assets/generic/images/scorebox.png" alt=""/>
+      </section>
+      <section id="sidebarMiddle">
+	<img id="scorebox" class="sidebarItem" src="assets/generic/images/scorebox.png" alt=""/>
+      </section>
+      <section id="sidebarBottom">
+	<img id="chimp" class="sidebarItem" src="assets/generic/images/normalChimp_200x209.png" alt=""/>
+      <button id="buttonReset" class="sidebarItem">RESET</button>
+
+      </section>
+
+
+    </aside>
+
+
+  </div>
+
+  <!--
+      <img id="actionTopLeftBox" src="assets/generic/images/yellowBox.png" alt=""/>
+      <img id="actionTopRightBox" src="assets/generic/images/yellowBox.png" alt=""/>
+      <img id="actionBottomLeftBox" src="assets/generic/images/yellowBox.png" alt=""/>
+      <img id="actionBottomMiddleBox" src="assets/generic/images/yellowBox.png" alt=""/>
+      <img id="actionBottomRightBox" 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>