updated css

css/d3d_btns.css

@@ -56,6 +56,16 @@ img {
 	top: 200px;
 }
 
+#btnInfo {
+	right: 25px;
+	bottom: 20px;
+}
+
+#btnSettings {
+	right: 25px;
+	bottom: 90px;
+}
+
 
 
 /*
@@ -72,25 +82,27 @@ img {
 #btnsUpDown {
 	position: absolute;
 	right: 200px;
+  bottom: -75px;
 }
 
 #btnsTurnLeftRight {
 	position: absolute;
 	right: 20px;
+  bottom: -75px;
 }
 
-#btnUp {
+#btnMoveUp {
 }
 
-#btnDown {
+#btnMoveDown {
 	
 }
 
-#btnTurnLeft {
+#btnTwistLeft {
 	
 }
 
-#btnTurnRight {
+#btnTwistRight {
 	
 }
 

css/fixedPosInterface.css

@@ -1,6 +1,6 @@
 body {
 /*   This chops off any overhanging divs */
-/*  overflow:hidden;	*/
+  overflow:hidden;
 }
 
 
@@ -43,9 +43,9 @@ body {
 	height: 140px;
 }
 
-ha {
-	background: #f5f5f5 url('../images/bg.jpg') no-repeat;
-}
+/*ha {*/
+	/*background: #f5f5f5 url('../images/bg.jpg') no-repeat;*/
+/*}*/
 
   /* Portrait */
 @media screen and (orientation:portrait) {
@@ -108,16 +108,31 @@ ha {
   border-radius: 15px;
 }
 
+#mycanvas, #preview {
+  /*border: 1px solid #08c;*/
+  float: left;
+}
+
+#mycanvas {
+  width: 500px;
+  height: 450px;
+  border: 0px solid #333;
+  border-right: 2px solid #333;
+}
+
 #preview {
+  /*border: 1px solid #f8c;*/
   position: absolute;
   right: 0px;
   top: 0px;
+  width: 150px;
+  height: 450px;
 }
 
 .vertImage {
 	margin:  0px;
 	padding: 0px;
-  border: 2px solid #f0f;
+  /*border: 2px solid #f0f;*/
   max-width: 100%;
   height: auto;
   width: auto; /* for ie9 */
@@ -144,6 +159,9 @@ ha {
 	z-index: -5;
 }
 
+/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
+
+/*
 @media screen and (max-height: 700px) {
 	.bgMiddle {
 		display: none;
@@ -197,5 +215,7 @@ ha {
 	}
 }
 
+//*/
+