.tab-initial_setup { } .tab-initial_setup .section { clear: both; padding-bottom: 8px; } .tab-initial_setup .section a { display: block; float: left; width: 160px; height: 24px; line-height: 24px; text-align: center; color: white; border: 1px solid #c0c0c0; background-color: #5569d0; } .tab-initial_setup .section a:hover { background-color: #424d84; } .tab-initial_setup .section a.calibrating { background-color: #4f4f4f; } .tab-initial_setup .section a.calibrating:hover { cursor: default; background-color: #4f4f4f; } .tab-initial_setup .section a.backup { width: 75px; margin-right: 10px; } .tab-initial_setup .section a.restore { width: 75px; } .tab-initial_setup .section p { margin-left: 180px; padding: 5px; border: 1px dotted silver; } #interactive_block { float: left; margin-top: 10px; height: 300px; width: 400px; border: 1px solid silver; background-color: white; } #interactive_block .model { display: block; margin: 10px 0 0 10px; font-weight: bold; } #interactive_block a.reset { position: absolute; display: block; margin-left: 10px; margin-top: 240px; width: 100px; height: 23px; line-height: 23px; color: white; text-align: center; border: 1px solid silver; background-color: blue; z-index: 100; } #interactive_block a.reset:hover { text-decoration: none; } #perspective { -webkit-perspective: 800; -webkit-perspective-origin: 50% 150px; /* 150px = (350px / 2) - 25px */ } #cube { position: relative; top: 110px; left: 150px; /* (916px / 2) - 50px */ height: 100px; width: 100px; -webkit-transform-style: preserve-3d; } #cubePITCH { -webkit-transform-style: preserve-3d; } #cubeROLL { -webkit-transform-style: preserve-3d; } #cube .face { position: absolute; color: white; font-size: 25px; text-align: center; } #cube .face.one { width: 100px; height: 200px; line-height: 200px; -webkit-transform: rotateX(-90deg) translateZ(-50px); background-color: purple; } #cube .face.two { width: 100px; height: 50px; line-height: 50px; -webkit-transform: translateZ(100px); background-color: blue; } #cube .face.three { width: 200px; height: 50px; line-height: 50px; -webkit-transform: rotateY(90deg); background-color: green; } #cube .face.four { width: 100px; height: 50px; line-height: 50px; -webkit-transform: rotateY(180deg) translateZ(100px); background-color: black; } #cube .face.five { width: 200px; height: 50px; line-height: 50px; -webkit-transform: rotateY(-90deg) translateZ(100px); background-color: red; } #cube .face.six { width: 100px; height: 200px; line-height: 200px; -webkit-transform: rotateX(90deg) translateZ(100px); background-color: silver; } .tab-initial_setup .battery, .tab-initial_setup .acc-trim { float: left; display: block; margin-top: 10px; margin-left: 25px; width: 145px; border: 1px solid silver; } .tab-initial_setup .battery .head, .tab-initial_setup .acc-trim .head { display: block; text-align: center; line-height: 20px; font-weight: bold; border-bottom: 1px solid silver; background-color: #ececec; } .tab-initial_setup .battery .fields { padding: 5px; } .tab-initial_setup .battery .bat-voltage { padding-left: 20px; } .tab-initial_setup .acc-trim dl { padding: 5px; } .tab-initial_setup .acc-trim dt { float: left; width: 50px; margin-bottom: 4px; } .tab-initial_setup .acc-trim dd { margin-left: 50px; margin-bottom: 4px; } .tab-initial_setup .acc-trim input { width: 80px; height: 20px; line-height: 20px; border: 1px solid silver; text-align: center; } .tab-initial_setup .acc-trim a.update { display: block; margin-right: 5px; margin-bottom: 5px; margin-left: 55px; width: 80px; height: 20px; line-height: 20px; color: white; text-align: center; border: 1px solid silver; background-color: #6f1515; } .tab-initial_setup .acc-trim a.update:hover { cursor: default; } .tab-initial_setup .acc-trim a.update.active { background-color: #0fab16; } .tab-initial_setup .acc-trim a.update.active:hover { cursor: pointer; background-color: #13d81d; } .tab-initial_setup .compass-wrapper { float: left; margin-top: 20px; margin-left: 180px; border: 1px solid silver; border-radius: 50%; } .tab-initial_setup #compass { position: relative; width: 150px; height: 150px; border: 6px dashed silver; border-radius: 50%; } .tab-initial_setup #compass span { position: absolute; font-weight: bold; } .tab-initial_setup #compass span:nth-child(1) { left: 70px; top: 5px; } .tab-initial_setup #compass span:nth-child(2) { right: 5px; top: 70px; } .tab-initial_setup #compass span:nth-child(3) { left: 70px; bottom: 5px; } .tab-initial_setup #compass span:nth-child(4) { left: 5px; top: 70px; } .tab-initial_setup #compass .pointer { position: absolute; height: 150px; width: 150px; -webkit-transform: rotate(0deg); } .tab-initial_setup #compass .pointer .tip { position: absolute; margin-top: 14px; margin-left: -6px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid red; } .tab-initial_setup #compass .pointer .stick { position: absolute; display: block; margin-top: -22px; margin-right: 69px; width: 4px; height: 30px; background-color: black; } .tab-initial_setup #compass .value { position: relative; top: 75px; left: 53px; width: 40px; height: 16px; line-height: 16px; text-align: center; background-color: #f2f2f2; border: 1px solid silver; }