.oirl .bottom { vertical-align: bottom; }
.oirl .super { vertical-align: super; }
.oirl .sub { vertical-align: sub; }
.oirl .bold { font-weight: bold; }
.oirl .smaller { font-size: 75%; }
.oirl-light {
color: black;
background-color: #fff;
}
.oirl-dark {
color: #fff;
background-color: black;
}
.oirl-data-box {
width: 490px;
height: 60px;
margin: 15px auto;
padding: 5px;
border-radius: 13px;
box-shadow: 2px 2px;
font-family: "helvetica neue", helvetica, sans-serif;
}
.oirl-light.oirl-data-box { border: 1px dotted black; }
.oirl-dark.oirl-data-box { border: 1px dotted #fff; }
.oirl-data-box .oirl-data {
position: relative;
width: 30%;
float: left;
margin: 3px 5px 0;
font-size: 16px;
line-height: normal;
}
.oirl-data-box .oirl-data-value {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.oirl-data-box .oirl-data-desc {
position: absolute;
bottom: -5px; left: 5px;
font-size: 11px;
font-weight: bold;
color: #999;
} .entry-content {
container-type: inline-size;
container-name: entry-content;
}
@container entry-content (width < 500px) {
.oirl-data-box {
height: 140px;
margin: 0 5px 10px;
width: unset;
}
.oirl-data-box .oirl-data {
width: 95%;
height: 33px;
margin: 0 5px 10px;
}
} .oirl-total-box { text-align: center; }
.oirl-light.oirl-total-box,
.oirl-dark.oirl-total-box {
color: inherit;
background-color: inherit;
}
.oirl-total-box .oirl-data {
display: inline-block;
margin: 3px auto;
padding: 5px;
border-radius: 5px;
}
.oirl-light.oirl-total-box .oirl-data {
color: #000;
border: 1px solid #666;
background-color: #bbb;
}
.oirl-dark.oirl-total-box .oirl-data {
color: #fff;
border: 1px solid #999;
background-color: #444;
}
.oirl-counter {
font-size: 175%;
vertical-align: middle;
margin: 0 2px;
border-radius: 5px; }
.oirl-light span.oirl-counter > span {
padding: 0 2px;
background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe)); background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0 ); }
.oirl-light span.oirl-counter {
padding: 2px;
background: #e2e2e2;
background: -moz-linear-gradient(top, #fefefe 0%, #d1d1d1 50%, #dbdbdb 51%, #e2e2e2 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #fefefe), color-stop(50%, #d1d1d1), color-stop(51%, #dbdbdb), color-stop(100%, #e2e2e2));
background: -webkit-linear-gradient(top, #fefefe 0%, #d1d1d1 50%, #dbdbdb 51%, #e2e2e2 100%);
background: -o-linear-gradient(top, #fefefe 0%, #d1d1d1 50%, #dbdbdb 51%, #e2e2e2 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #d1d1d1 50%, #dbdbdb 51%, #e2e2e2 100%);
background: linear-gradient(to bottom, #fefefe 0%, #d1d1d1 50%, #dbdbdb 51%, #e2e2e2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e2e2e2', GradientType=0 );
}
.oirl-dark span.oirl-counter > span {
padding: 0 2px;
background: #4c4c4c;
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #4c4c4c), color-stop(12%, #595959), color-stop(25%, #666666), color-stop(39%, #474747), color-stop(50%, #2c2c2c), color-stop(51%, #000000), color-stop(60%, #111111), color-stop(76%, #2b2b2b), color-stop(91%, #1c1c1c), color-stop(100%, #131313));
background: -webkit-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: -o-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: -ms-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: linear-gradient(to bottom, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
}
.oirl-dark span.oirl-counter {
padding: 2px;
background: #4c4c4c;
background: -moz-linear-gradient(top, #131313 0%, #1c1c1c 12%, #2b2b2b 25%, #111111 39%, #000000 50%, #2c2c2c 51%, #474747 60%, #666666 76%, #595959 91%, #4c4c4c 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #131313), color-stop(12%, #1c1c1c), color-stop(25%, #2b2b2b), color-stop(39%, #111111), color-stop(50%, #000000), color-stop(51%, #2c2c2c), color-stop(60%, #474747), color-stop(76%, #666666), color-stop(91%, #595959), color-stop(100%, #4c4c4c));
background: -webkit-linear-gradient(top, #131313 0%, #1c1c1c 12%, #2b2b2b 25%, #111111 39%, #000000 50%, #2c2c2c 51%, #474747 60%, #666666 76%, #595959 91%, #4c4c4c 100%);
background: -o-linear-gradient(top, #131313 0%,#1c1c1c 12%, #2b2b2b 25%, #111111 39%, #000000 50%, #2c2c2c 51%, #474747 60%, #666666 76%, #595959 91%, #4c4c4c 100%);
background: -ms-linear-gradient(top, #131313 0%, #1c1c1c 12%, #2b2b2b 25%, #111111 39%, #000000 50%, #2c2c2c 51%, #474747 60%, #666666 76%, #595959 91%, #4c4c4c 100%);
background: linear-gradient(to bottom, #131313 0%, #1c1c1c 12%, #2b2b2b 25%, #111111 39%, #000000 50%, #2c2c2c 51%, #474747 60%, #666666 76%, #595959 91%, #4c4c4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#4c4c4c', GradientType=0 );
} .ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 450px;
color: #333;
background-color: #ccc;
-webkit-box-shadow: 0 0 5px #aaa;
-moz-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}