@CHARSET "UTF-8; body { font-family: Verdana, Arial, sans-serif; } #tabs { height: 500px; width: 700px; margin: 0 auto; } .circle { width: 60px; height: 37px; border-radius: 36px; border: 2px solid black; text-align: center; padding-top: 23px; font-size: 12px; margin: 5px auto; display: block; } .circle.red { background-color: #ff1732; color: #000b40; } .circle.green { background-color: green; color: #ffffff; } .circle.yellow { background-color: #ffed4c; color: #000000; } .circle.black { background-color: #000000; color: #ffffff; } .buzzer { width: 95px; } .inner-tabs-container { position: relative; width: 530px; height: 400px; left: 120px; top: 400px; margin-top: -400px; } .lampel { border: 2px solid white; padding: 15px; height: 64px; width: 204px; margin: 0 auto; } .lampel .circle { display: inline-block; margin: 0px; } /* Vertical Tabs ----------------------------------*/ .ui-tabs-vertical .ui-tabs-nav { -moz-transform: rotate(-90deg) translate(0, 100%); -moz-transform-origin: 0% 100%; -o-transform: rotate(-90deg) translate(0, 100%); -o-transform-origin: 0% 100%; -webkit-transform: rotate(-90deg) translate(0, 100%); -webkit-transform-origin: 0% 100%; transform: rotate(-90deg) translate(0, 100%); transform-origin: 0% 100%; width: 400px; top: 358px; position: relative; left: -4px; margin-bottom: -46px !important; } .ui-tabs-vertical .ui-tabs-panel { margin-left: 50px; }