- interfaces scales vertically

- on tablets and smartphones it automatically fills the width
- doesn't *do* much yet
- drawing doesn't scale to the viewport of the draw area yet
- preview on the right doesn't either.

css/d3d_btns.css

@@ -0,0 +1,105 @@
+/*.logo {
+	background: #f5f5f5 url('../img/logo_full.png') no-repeat left top;
+}
+
+@media screen and (max-width: 500px) {
+	.logo {
+		background: #f5f5f5 url('../img/logo_small.png') no-repeat left top;
+	}
+}*/
+
+img {
+	z-index: 5;
+}
+
+/*
+
+	INTERFACE BUTTONS
+
+*/
+
+#btnNew {
+	left: 10px;
+	top: 10px;
+}
+
+#btnPrevious {
+	left: 20px;
+	top: 180px;
+	z-index: 10;
+}
+
+#btnNext {
+	left: 126px;
+	top: 186px;
+	z-index: 10;
+}
+
+#btnSave {
+	left: 20px;
+	top: 240px;
+}
+
+#btnOops {
+	left: 20px;
+/*	bottom: 150px;*/
+	top: 450px;
+}
+
+#btnPrint {
+	right: 15px;
+	top: 15px;
+}
+
+#btnStop {
+	right: 20px;
+	top: 200px;
+}
+
+
+
+/*
+
+	DRAW AREA
+
+*/
+
+
+#drawAreaContainer > .buttons {
+	margin: 5px;
+}
+
+#btnsUpDown {
+	position: absolute;
+	right: 200px;	
+}
+
+#btnsTurnLeftRight {
+	position: absolute;
+	right: 20px;	
+}
+
+#btnUp {
+}
+
+#btnDown {
+
+}
+
+#btnTurnLeft {
+
+}
+
+#btnTurnRight {
+
+}
+
+.btn {
+	position: absolute;
+	-webkit-user-select: none;
+	cursor: hand;
+}
+
+
+
+

css/fixedPosInterface.css

@@ -0,0 +1,201 @@
+body {
+/*   This chops off any overhanging divs */
+/*  overflow:hidden;	*/
+}
+
+
+.button {
+	display: table;
+}
+
+.big {
+	background: #a6e19c;
+	border: 1px solid #222;
+	height: 64px;
+	width: 64px;
+	display: table-cell;
+	vertical-align: middle;
+	text-align: center;
+	border-radius: 32px;
+	-moz-border-radius: 32px;
+	-webkit-border-radius: 32px;
+}
+.small {
+	background: #a3d5f7;
+	border: 1px solid #222;
+	height: 40px;
+	width: 40px;
+	display: table-cell;
+	vertical-align: middle;
+	text-align: center;
+	border-radius: 20px;
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+}
+
+#logo {
+	position: absolute;
+	/*left: 50%;*/
+	/*margin-left: -220px;*/
+	top: 20px;
+	left: 315px;
+	width: 400px;
+	height: 140px;
+}
+
+ha {
+	background: #f5f5f5 url('../images/bg.jpg') no-repeat;
+}
+
+  /* Portrait */
+@media screen and (orientation:portrait) {
+  body {
+/*    background-color: #08F;*/
+  }
+
+  #landscape {
+  	display: none;
+  }
+  #portrait {
+  	display: block;
+  }
+}
+  /* Landscape */
+@media screen and (orientation:landscape) {
+  body {
+/*    background-color: #8F0;*/
+  }
+
+  #landscape {
+  	display: block;
+  }
+  #portrait {
+  	display: none;
+  }
+}
+
+.container {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  border: 2px solid #333;
+  width: 1024px;
+	min-height: 500px;
+	max-height: 768px;
+	height: 100%;
+/*  height: 768px;*/
+}
+
+#d3dlogo {
+	position: absolute;
+	top:  15px;
+	left: 31%;
+  content:url("../img/logo_full.png");
+}
+
+#svg {
+  cursor: hand;
+}
+
+#drawAreaContainer {
+  position: absolute;
+  top: 193px;
+  left: 193px;
+  width: 650px;
+  height: 450px;
+  background-color: white;
+  border: 4px solid black;
+  border-radius: 15px;
+}
+
+#preview {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
+
+.vertImage {
+	margin:  0px;
+	padding: 0px;
+  border: 2px solid #f0f;
+  max-width: 100%;
+  height: auto;
+  width: auto; /* for ie9 */
+}
+
+
+.bgTop {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: -5;
+}
+.bgMiddle {
+	display: block;
+	position: absolute;
+	top: 30%;
+	left: 0px;
+	z-index: -5;
+}
+.bgBottom {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	z-index: -5;
+}
+
+@media screen and (max-height: 700px) {
+	.bgMiddle {
+		display: none;
+	}
+
+	#d3dlogo {
+    content:url("../img/logo_small.png");
+    margin-top:  7px;
+  }
+
+  #btnsUpDown, #btnsTurnLeftRight {
+  	zoom: 0.96;
+  }
+
+	#btnPrint {
+		right: 10px;
+		top:  10px;
+	}
+
+	.btn {
+		zoom: 0.96;
+	}
+
+	#drawAreaContainer {
+	  top: 128px;
+	  height: 350px;
+	}
+}
+
+@media screen and (max-height: 500px) {
+	#d3dlogo {
+		zoom: 0.8;
+		left: 34%;
+  }
+
+  #btnsUpDown, #btnsTurnLeftRight {
+  	zoom: 0.9;
+  }
+
+	#btnPrint {
+		right: 6px;
+	}
+
+	.btn {
+		zoom: 0.9;
+	}
+
+	#drawAreaContainer {
+	  top: 110px;
+	  height: 350px;
+	}
+}
+
+
+