Initial commit

main.css

@@ -0,0 +1,223 @@
+body {
+/*background:rgba(0,80,80,0.7);	*/
+}
+
+.button {
+	border:1px solid rgba(50,50,50,0.5);
+	width:25px;
+	height:25px;
+	border-radius:13px;
+	display:inline-block;
+    background: rgba(70,70,70,0.5);
+	padding:0px;
+	margin:px;
+	text-align:center;
+	vertical-align:middle;
+	font-weight: bold;	
+	position:absolute;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.25), 0px 1px 1px rgba(0,0,0,0.25), 1px 0px 1px rgba(0,0,0,0.25);
+}
+
+.button_4, .button_5, .button_6, .button_7 {	
+	width:35px;
+	height:20px;
+	border-radius:8px;
+}
+
+.button_8 {
+	width:30px;
+	height:15px;
+	border-radius:4px;
+}
+
+.button_9 {
+	border:0px;
+	background:transparent;
+	height:25px;
+	width:25px;
+}
+
+
+.button::after { 
+	position:relative;
+	color: rgba(250,250,250,0.5);
+	font-size:13px;
+}
+
+.button_0::after {
+	content:"✕";
+	color: rgba(80,120,200,0.5);	
+	font-size:22px;
+	top:-4px;
+}
+
+.button_1::after {
+	content:"○";
+	color: rgba(200,120,80,0.5);
+	font-size:41px;
+	top:-14px;	
+}
+
+.button_2::after {
+	content:"□";
+	color: rgba(250,80,80,0.5);
+	font-size:35px;
+	top:-12px;
+}
+
+.button_3::after {
+	content:"△";
+	color: rgba(60,200,100,0.5);
+	font-size:23px;
+	top:-3px;	
+}
+
+.button_4::after {
+	content:"L1";
+}
+
+.button_5::after {
+	content:"R1";
+}
+
+.button_6::after {
+	content:"L2";
+}
+
+.button_7::after {
+	content:"R2";
+}
+
+.button_10::after {
+	content:"L3";
+	top:2px;
+}
+
+.button_11::after {
+	content:"R3";
+	top:2px;
+}
+
+#button_9_border {
+	position:relative;
+	top:3px;
+}
+
+.button_12, .button_13, .button_14, .button_15  { 
+	border:0px;
+	background:transparent;
+	height:25px;
+	width:25px;
+ }
+
+.button_12 {
+	left:46px;
+	top:14px;
+}
+.button_13 {
+	left:46px;
+	top:63px;
+}
+
+.button_14 {
+	left:21px;
+	top:39px;
+}
+.button_15 {
+	left:70px;
+	top:39px;
+}
+
+.button_3 {
+	left:226px;
+	top:12px;
+}
+.button_0 {
+	left:226px;
+	top:61px;
+}
+
+.button_2 {
+	left:201px;
+	top:37px;
+}
+.button_1 {
+	left:250px;
+	top:37px;
+}
+
+.button_4 {
+	left:2px; 
+	top: 1px;
+}
+.button_6 {
+	left:80px; 
+	top: 1px;
+}
+
+.button_5 {
+	left:260px; 
+	top: 1px;	
+	
+}
+.button_7 {
+	left:182px; 
+	top: 1px;	
+}
+
+.button_8 {
+	left:111px;
+	top:42px;	
+}
+
+.button_9 {
+	left:161px;
+	top:37px;	
+}
+
+.button_10 {
+	position:relative;
+	border:1px solid rgba(250,200,150,0.5);
+}
+
+.button_11 {
+	position:relative;
+	border:1px solid rgba(250,200,150,0.5);
+}
+
+
+#buttons {
+	position:absolute;
+	transform: scale(0.9);
+}
+
+
+.axisbox {
+   border-radius:20px;	
+   border:1px solid red;
+   width:40px;
+   height:40px;
+   position:absolute;
+   top: 65px;
+   border:1px solid rgba(50,50,50,0.5);
+   background: rgba(70,70,70,0.5);
+}
+	
+.axisbox_0 {	
+	left:105px;
+}
+
+.axisbox_1 {
+	left:155px;
+}
+
+.axis{
+    margin-left:-5px;
+	margin-top:-5px;
+	border-radius:5px;	
+	border:1px solid black;
+	width:10px;
+	height:10px;
+	display:block;
+	position:relative;
+}