JS-DualShock3-Monitor/main.css

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;
}