style.css

   1 /*.centerText {
   2         position: absolute;
   3
   4         margin-top: 103px;
   5         margin-left: 21px;
   6         width: 307px;
   7         display: -webkit-inline-box;
   8         -webkit-box-orient: horizontal;
   9 }**/
  10 body {
  11         margin: 0px;
  12         height: 768px;
  13         width: 1024px;
  14 }
  15
  16 #velocity {
  17         //position: absolute;
  18         width: auto;
  19         font-size: 95px;
  20         font-weight: bold;
  21         color: white;
  22         font-family: "droid sans";
  23 }
  24
  25 #velocityUnits {
  26         /*position: relative;
  27         //float: right;
  28         //width: 75px;*/
  29         margin-top: 63px;
  30         color: white;
  31         font-family: "droid sans";
  32         font-size: 15.5px;
  33         font-weight: bold;
  34         /*margin: 213px 70px*/
  35 }
  36
  37 #mainbox {
  38         background: url("assets/tachometer-background.jpg") top left no-repeat;
  39 }
  40
  41 #infoarea {
  42         background-color: #B1AFB0;
  43         width: 275px;
  44         height: 150px;
  45         display: table;
  46         border-collapse: collapse;
  47         border-spacing: 10px;
  48         margin-left: 15px;
  49         margin-top: 20px;
  50         border-top-color: #E89820;
  51         border-bottom-color: #E89820;
  52         border-top-width: 3px;
  53         border-bottom-width: 3px;
  54         border-top-style: solid;
  55         border-bottom-style: solid;
  56 }
  57
  58 #velocityTable {
  59         margin-top: 110px;
  60         margin-left: 79px;
  61         width: 307px;
  62         display: table;
  63 }
  64
  65 .row {
  66         display: table-row;
  67         margin: 0px auto;
  68 }
  69
  70 .underborder {
  71         border-bottom: 2px solid black;
  72         height: auto;
  73 }
  74
  75 .centerText {
  76         vertical-align: bottom;
  77         margin-top: 103px;
  78         margin-left: 21px;
  79         width: 307px;
  80 }
  81
  82 .hbox {
  83         width: 100%;
  84         display: -webkit-box;
  85         -webkit-box-orient: horizontal;
  86 }
  87
  88 .vbox {
  89         display: -webkit-box;
  90         -webkit-box-orient: vertical;
  91         width: 100%;
  92         height: 100%;
  93 }
  94
  95 .leftAlignText {
  96         width: 50%;
  97         text-align: left;
  98         font-family: "droid sans";
  99         font-size: 20px;
 100         color: white;
 101         padding: 0px 10px;
 102         display: table-cell;
 103         font-weight: bold;
 104 }
 105 .rightAlignText {
 106         width: 50%;
 107         text-align: right;
 108         font-family: "droid sans";
 109         color: white;
 110         font-size: 20px;
 111         padding: 0px 10px;
 112         display: table-cell;
 113         font-weight: bold;
 114 }
 115
 116 .middleText {
 117         vertical-align: middle;
 118 }
 119
 120 .needleParent {
 121         position: relative;
 122         background: url("assets/dial-main-bg.png") top left no-repeat;
 123         height: 607px;
 124         width: 626px;
 125         //-webkit-border-radius: 360px;
 126 }
 127
 128 .centerCircle {
 129     position: absolute;
 130         z-index: 140;
 131         margin-top: 110px;
 132         margin-left: 120px;
 133         background: url("assets/dial-main-center-bg.png") top left no-repeat;
 134         height: 390px;
 135         width: 382px;
 136         //-webkit-border-radius: 250px;
 137         //-webkit-box-shadow: 10px 0px 25px orange;
 138 }
 139
 140 .needle {
 141         position: absolute;
 142 }
 143
 144 .gauge {
 145         position: relative;
 146 }
 147
 148 #wheel {
 149         -webkit-transform:rotate(0deg);
 150         -webkit-transform-origin: 50% 50%;
 151                 -webkit-transition: all;
 152 }
 153
 154 #iatNeedle {
 155         z-index: 110;
 156         background-color: red;
 157         height: 55px;
 158         width: 3px;
 159         left: 50%;
 160         bottom: 50%;
 161         -webkit-transform:rotate(143deg);
 162         -webkit-transform-origin: 50% 100%;
 163         -webkit-transition: all 1ms;
 164         -webkit-border-radius: 5px;
 165 }
 166
 167 #loadNeedle {
 168         z-index: 110;
 169         background-color: red;
 170         height: 55px;
 171         width: 3px;
 172         left: 50%;
 173         bottom: 50%;
 174         -webkit-transform:rotate(270deg);
 175         -webkit-transform-origin: 50% 100%;
 176         -webkit-transition: all 1ms;
 177         -webkit-border-radius: 5px;
 178 }
 179
 180 #throttleNeedle {
 181         z-index: 110;
 182         background-color: red;
 183         height: 55px;
 184         width: 3px;
 185         left: 50%;
 186         bottom: 50%;
 187         -webkit-transform:rotate(270deg);
 188         -webkit-transform-origin: 50% 100%;
 189         -webkit-transition: all 1ms;
 190         -webkit-border-radius: 5px;
 191 }
 192
 193 #rpmNeedle {
 194         z-index: 110;
 195         background-color: #E89820;
 196         height: 258px;
 197         width: 17px;
 198         left: 51%;
 199         bottom: 51%;
 200         -webkit-transform-origin: 50% 100%;
 201         -webkit-transition: all 1ms;
 202         -webkit-border-radius: 17px;
 203 }
 204
 205 #engineCoolantNeedle {
 206         z-index: 120;
 207         background-color: white;
 208         height: 288px;
 209         width: 7px;
 210         left: 50%;
 211         bottom: 50%;
 212         -webkit-transform:rotate(340deg);
 213         -webkit-transform-origin: 50% 100%;
 214         -webkit-transition: all 1ms;
 215         -webkit-border-radius: 5px;
 216 }
 217
 218 #oilTempNeedle {
 219         z-index: 130;
 220         background-color: white;
 221         height: 288px;
 222         width: 7px;
 223         left: 50%;
 224         bottom: 50%;
 225         -webkit-transform:rotate(225deg);
 226         -webkit-transform-origin: 50% 100%;
 227         -webkit-transition: all 1ms;
 228         -webkit-border-radius: 5px;
 229 }