/*! jQuery-Dynameter by Tzechiu Lei * http://tze1.com/dynameter/ * v0.5.6 * 2014-06-13 * Copyright (c) 2014 Tzechiu Lei. MIT license. */ div.dm-wrapperDiv { display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; zoom: 1; overflow: hidden; width: 200px; height: 100px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; line-height: 1; } div.dm-wrapperDiv * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; zoom: 1; } div.dm-wrapperDiv div { position: absolute; bottom: 0; left: 0; } div.dm-wrapperDiv div.dm-bgClrDiv, div.dm-wrapperDiv div.dm-maskDiv { width: 200px; height: 100px; } div.dm-wrapperDiv div.dm-bgClrDiv, div.dm-wrapperDiv div.dm-maskDiv { -webkit-border-radius: 100px 100px 0 0; -moz-border-radius: 100px 100px 0 0; -ms-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; border: 2px solid #999999; border-bottom: 0; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } div.dm-wrapperDiv div.dm-bgClrDiv.normal { background-color: #228b22; } div.dm-wrapperDiv div.dm-bgClrDiv.warn { background-color: #daa520; } div.dm-wrapperDiv div.dm-bgClrDiv.error { background-color: #ff0000; } div.dm-wrapperDiv div.dm-maskDiv { background-color: #dddddd; z-index: 4; } div.dm-wrapperDiv div.dm-innerDiv { bottom: 0; left: 20px; -webkit-border-radius: 80px 80px 0 0; -moz-border-radius: 80px 80px 0 0; -ms-border-radius: 80px 80px 0 0; border-radius: 80px 80px 0 0; border-bottom: 1px solid #eeeeee; width: 160px; height: 80px; padding-top: .7em; background-color: #eeeeee; text-align: center; text-transform: uppercase; z-index: 5; } div.dm-wrapperDiv div.dm-innerDiv p { margin: 3px auto; width: auto; max-width: 85%; overflow: hidden; text-align: center; } div.dm-wrapperDiv div.dm-innerDiv p.dm-valueP { font-size: 210%; line-height: .85; } div.dm-wrapperDiv div.dm-innerDiv p.dm-unitP { margin-top: 0; font-size: 75%; font-weight: normal; } div.dm-wrapperDiv div.dm-innerDiv p.dm-labelP { font-size: 100%; }