.tab-initial_setup { height: 100%; } .tab-initial_setup .section { clear: both; padding-bottom: 8px; } .tab-initial_setup .section a { display: block; float: left; width: 170px; height: 24px; line-height: 24px; text-align: center; font-weight: bold; border: 1px solid silver; background-color: #ececec; } .tab-initial_setup .section a:hover { background-color: #dedcdc; } .tab-initial_setup .section a.calibrating { background-color: #c1c1c1; } .tab-initial_setup .section a.calibrating:hover { cursor: default; background-color: #c1c1c1; } .tab-initial_setup .section a.backup { width: 80px; margin-right: 10px; } .tab-initial_setup .section a.restore { width: 80px; } .tab-initial_setup .section p { margin-left: 180px; padding: 5px; border: 1px dotted silver; } #interactive_block { float: left; position: relative; height: calc(100% - 142px); width: calc(100% - 522px); border: 1px solid silver; background-color: white; } #interactive_block .model { float: left; height: 15px; margin: 10px 0 0 10px; font-weight: bold; } #interactive_block .modelMixDiagram { position: absolute; top: 32px; left: 10px; height: 30%; /* interactive_block height set to inherit */ } #interactive_block .modelMixAirplane { /* Position airplane correctly */ height: 35%; padding-left: 0px; } #interactive_block .modelMixCustom { /* Position question mark correctly */ height: 20%; /* resize question mark */ padding-left: 25px; } #interactive_block .heading { float: right; height: 15px; margin: 10px 10px 0 0; font-weight: bold; } #interactive_block a.reset { position: absolute; display: block; bottom: 10px; right: 10px; height: 28px; line-height: 28px; padding: 0 15px 0 15px; text-align: center; font-weight: bold; border: 1px solid silver; background-color: #ececec; z-index: 100; } #interactive_block a.reset:hover { background-color: #dedcdc; } #perspective { height: calc(100% - 25px); -webkit-perspective: 800; } #cube { position: relative; top: calc(50% - 50px); /* - half of height */ left: calc(50% - 50px); /* - half of width */ 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: 100%; height: 200px; line-height: 200px; font-size: 20px; -webkit-transform: rotateX(-90deg) translateZ(-50px); background-color: purple; } #cube .face.two { width: 100%; 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: 100%; 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: 100%; height: 200px; line-height: 200px; -webkit-transform: rotateX(90deg) translateZ(100px); background-color: silver; } .tab-initial_setup .block_wrapper { font-size: 0; } .tab-initial_setup .battery, .tab-initial_setup .throttle, .tab-initial_setup .acc-trim, .tab-initial_setup .magnetometer, .tab-initial_setup .info { display: inline-block; vertical-align: top; margin: 0 0 10px 10px; font-size: 12px; border: 1px solid silver; } .tab-initial_setup .battery .head, .tab-initial_setup .throttle .head, .tab-initial_setup .acc-trim .head, .tab-initial_setup .magnetometer .head, .tab-initial_setup .info .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, .tab-initial_setup .throttle .fields, .tab-initial_setup .magnetometer .fields, .tab-initial_setup .info .fields { padding: 5px 5px 3px 5px; } .tab-initial_setup .acc-trim .fields { padding: 5px 5px 3px 5px; } .tab-initial_setup .magnetometer .fields { padding: 5px 5px 5px 5px; } .tab-initial_setup .battery dt { float: left; width: 105px; height: 22px; margin-bottom: 2px; line-height: 22px; } .tab-initial_setup .battery dd { height: 22px; margin-left: 105px; margin-bottom: 2px; line-height: 22px; } .tab-initial_setup .battery input { width: 68px; height: 20px; line-height: 20px; border: 1px solid silver; text-align: center; } .tab-initial_setup .throttle dt { float: left; width: 90px; height: 22px; margin-bottom: 2px; line-height: 22px; } .tab-initial_setup .throttle dd { height: 22px; margin-left: 90px; margin-bottom: 2px; line-height: 22px; } .tab-initial_setup .throttle input { width: 60px; height: 20px; line-height: 20px; border: 1px solid silver; text-align: center; } .tab-initial_setup .acc-trim dt { float: left; width: 65px; height: 22px; line-height: 22px; margin-bottom: 2px; } .tab-initial_setup .acc-trim dd { height: 22px; margin-left: 65px; margin-bottom: 2px; } .tab-initial_setup .acc-trim input { width: 60px; height: 20px; line-height: 20px; border: 1px solid silver; text-align: center; } .tab-initial_setup .magnetometer dt { float: left; width: 90px; height: 20px; line-height: 22px; margin-bottom: 2px; } .tab-initial_setup .magnetometer dd { height: 20px; line-height: 22px; margin-left: 90px; margin-bottom: 2px; } .tab-initial_setup .magnetometer input { width: 60px; height: 20px; line-height: 20px; border: 1px solid silver; text-align: center; } .tab-initial_setup .info dt { float: left; width: 99px; height: 20px; line-height: 20px; } .tab-initial_setup .info dd { width: 76px; height: 20px; line-height: 20px; margin-left: 99px; } .tab-initial_setup .buttons { width: calc(100% - 20px); position: absolute; bottom: 10px; } .tab-initial_setup .update { display: block; float: right; height: 28px; line-height: 28px; padding: 0 15px 0 15px; text-align: center; font-weight: bold; border: 1px solid silver; background-color: #ececec; } .tab-initial_setup .update:hover { background-color: #dedcdc; }