Merge branch 'bryan'

2 files changed, 260 insertions, 112 deletions

diff --git a/examples/adding_up_to_10/css/mytest.css b/examples/adding_up_to_10/css/mytest.css
index 8ede8d9..cdd2bc1 100644
--- a/examples/adding_up_to_10/css/mytest.css
+++ b/examples/adding_up_to_10/css/mytest.css
@@ -1,71 +1,195 @@
-#mainmain {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-}
-
 #main {
-    height: 100%;
-    width: 70%;
-    float: left;
-}
-
-#mainTop {
-    height:50%;
-    width:100%;
+height:95%;
+width:100%;
+position:absolute;
 }
-#mainBottom {
-    height:50%;
-    width:100%;
+#action {
+float:left;
+height:100%;
+position:relative;
+width:80%;
 }
 #sidebar {
-    background:blue none repeat scroll 0 0;
-    float:left;
-    height:100%;
-    width:30%;
-}
-#mainTopLeft {
-    width:40%;
-    height:100%;
-    background:yellow;
-    float:left;
-}
-
-#mainTopMiddle {
-    width:20%;
-    height:100%;
-    background:red;
-    float:left;
-}
-
-#mainTopRight {
-    width:40%;
-    height:100%;
-    background:green;
-    float:left;
-}
-
-
-
-#mainBottomLeft {
-    float:left;
-    width:33.3%;
-    height:100%;
-    background:yellow;
-}
-
-
-#mainBottomMiddle {
-    float:left;
-    width:33.3%;
-    height:100%;
-    background:red;
-}
-
-
-#mainBottomRight {
-    float:left;
-    width:33.3%;
-    height:100%;
-    background:green;
+-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%;
+}
+#actionBottom {
+clear:both;
+float:left;
+height:50%;
+position:relative;
+width:100%;
+}
+#actionTopLeft {
+-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 {
+-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 {
+-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%;
+}
+#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%;
+}
+#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%;
+}
+#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%;
+}
+#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:50%;
+position:relative;
+top:40%;
+width:40%;
+}
+#plussign {
+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%;
+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%;
+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 2645605..9f76bc5 100755
--- a/examples/adding_up_to_10/mytest.html
+++ b/examples/adding_up_to_10/mytest.html
@@ -12,52 +12,76 @@
 </head>
 
 <body>
-<div id="mainmain">
-<div id="main">
-<div id="mainTop">
-<!--<canvas id="mainTopCanvas"></canvas>-->
-<div id="mainTopLeft"></div>
-<div id="mainTopMiddle"></div>
-<div id="mainTopRight"></div>
-blah
-
-</div>
-
-<div id="mainBottom">
-<!-- <canvas id="mainBottomCanvas"></canvas> -->
-<div id="mainBottomLeft"></div>
-<div id="mainBottomMiddle"></div>
-<div id="mainBottomRight"></div>
-
-</div>
-
-</div>
-<div id="sidebar">
-<!-- <canvas id="sidebarCanvas"></canvas> -->
-<div id="sidebarTop"></div>
-<div id="sidebarMiddle"></div>
-<div id="sidebarBottom"></div>
-
-
-</div>
-
-
-</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="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="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>
 
-</html>
\ No newline at end of file
+</html>