#graphcontainer { position: relative; margin: 27px 0 50px; overflow: visible; /* for #graph.none #graphads, visible for category #middleads */ } #graphcontainer h3 { position: absolute; bottom: -34px; right: 12px; width: 600px; margin: 0; font-size: 11pt; color: #999; text-transform: uppercase; text-align: right; } #graphcontainer h3 strong { color: #666; } div#sharebar { position: absolute; top: -17px; right: 11px; } #graph { position: relative; min-height: 375px; margin: 0 0 14px; padding: 0; background: url(/img/v1/graph-bars-bg.png) no-repeat 0 0; } h4#graphtop { margin: 0; padding: 7px 0 0; font-size: 10pt; font-weight: normal; color: #666; text-align: center; } h4#graphtop a { /* display: block; font-size: 0.9em; */ } h4#graphbtm { position: absolute; bottom: -19px; right: 0; z-index: -1; height: 19px; margin: 0; background: url(/img/v1/graph-bars-btm.png) no-repeat 0 0; } #graph ul { list-style: none; margin: -5px 0 0; padding: 0; } #graph ul li { margin-bottom: 3px; } #graph.c1 ul li { margin-bottom: 20px; } #graph.c2 ul li { margin-bottom: 17px; } #graph.c3 ul li { margin-bottom: 14px; } #graph.c4 ul li { margin-bottom: 11px; } #graph ul li a { display: block; overflow: hidden; margin-right: 14px; color: #333; } #graph ul li a strong { height: 36px; font-weight: normal; text-transform: capitalize; white-space: nowrap; } #graph ul li a:hover strong { color: #600; text-decoration: underline; } #graph ul li a em { position: absolute; display: block; /* overflow: hidden; */ left: 0; } #graph ul li a em.ab { z-index: 2; } #graph ul li a em span { display: block; } #graph ul li a em.ab span { height: 40px; } #graph ul li a em.ab span.bar { float: left; background: url(/img/v1/graph-bars-nocircle.png) no-repeat 100% 0; } #graph ul li:nth-child(even) a em.ab span.bar { background-position: 100% -50px; } #graph ul li a em.ab span.bar span { float: right; width: 48px; height: 48px; margin: 0 18px 0 35px; padding: 0; font-size: 16pt; font-weight: bold; font-style: normal; text-shadow: 1px 1px 1px #999; line-height: 48px; text-align: center; background: url(/img/v1/graph-bars-circle.png) no-repeat 100% 0; } #graph ul li a em.ab span.bar.d1 span { font-size: 17pt; } #graph ul li a em.ab span.bar.d2 span { font-size: 16pt; } #graph ul li a em.ab span.bar.d3 span { font-size: 15pt; } #graph ul li a em.ab span.bar.d4 span { font-size: 13pt; letter-spacing: -1px; } /* side labels */ #graph.sidelabels { background-position: 265px 0; } #graph.sidelabels h4#graphtop { width: 265px; } #graph.sidelabels ul li a { text-decoration: none; background: url(/img/v1/graph-label-bg.png) no-repeat 0 6px; } #graph.sidelabels ul li a strong { float: left; overflow: hidden; margin-top: 6px; padding: 0 14px; font-size: 13pt; line-height: 36px; text-overflow: ellipsis; text-shadow: 1px 1px 1px #999; } #graph.sidelabels ul li a em { left: 275px; width: 605px; } #graph.sidelabels h4#graphbtm { width: 100%; background-position: 265px 0; } /* nhtsa bars */ #graph.sidelabels.nhtsa ul li { padding-bottom: 17px; } #graph.sidelabels ul li a em.nhtsa { margin-top: 42px; } #vehicle #graph.sidelabels ul li a em.nhtsa { display: none; } #graph.sidelabels ul li a em.nhtsa span.bar { overflow: visible; float: left; margin-left: 0; padding-left: 4px; font-size: 0.9em; line-height: 1.3; white-space: nowrap; background-color: rgba(100,100,100,0.3); border-radius: 0 3px 3px 0; box-shadow: 1px 1px 2px 0 #999; } #graph.sidelabels ul em.nhtsa span.bar { background-color: #ccc; } /* ie8 sucks */ /* nhtsa-only bars */ #vehicle #graph.sidelabels ul li.nhtsa { margin-bottom: 0; padding-bottom: 7px; } #graph.sidelabels ul li.nhtsa a { } #vehicle #graph.sidelabels ul li.nhtsa a strong { height: auto; line-height: 23px; background: none; } #graph.sidelabels ul li.nhtsa a em.nhtsa { margin-top: 10px; } #category #graph.sidelabels ul li.nhtsa a em span.bar { font-size: 1.6em; font-style: normal; font-weight: bold; } #category #graph.sidelabels ul li.nhtsa a em span.bar span { padding-left: 14px; padding-right: 7px; } /* wide */ #graph.wide { background-position: 340px 0; } #graph.wide h4#graphtop { width: 340px; } #graph.wide ul { } #graph.wide ul li a { background-image: url(/img/v1/graph-label-wide-bg.png); } #graph.wide ul li a strong { width: 312px; padding-left: 14px; font-size: 13pt; text-shadow: -1px 1px 1px #ccc; text-align: right; background: none; } #graph.wide ul li a:hover strong { /* color: #900; */ } #graph.wide ul li.l1 a strong { font-size: 12pt; } #graph.wide ul li.l2 a strong { font-size: 11.5pt; } #graph.wide ul li.l3 a strong { font-size: 10.5pt; } #graph.wide ul li.l4 a strong { font-size: 9pt; } #graph.wide ul li.l5 a strong { font-size: 8pt; } #graph.wide ul li a em { left: 350px; width: 530px; } #graph.wide h4#graphbtm { background-position: 340px 0; } /* problemlist */ #graph.problemlist ul li a em span.bar { background-image: url(/img/v1/graph-bars-nocircle.png); } #graph.problemlist ul li a em span.bar span { float: left; width: 48px; margin-left: 11px; background: url(/img/v1/graph-bars-circle.png) no-repeat 0 0; } #graph.problemlist ul li a cite { position: absolute; left: 14px; z-index: 1; display: block; margin: 13px 0 0 55px; padding: 0 4px; font-size: 12pt; text-transform: uppercase; font-style: normal; font-weight: bold; color: #000; border-radius: 4px; background-color: rgba(255,255,255,0.6); } #graph.problemlist ul li:nth-child(even) a em span.bar { background-position: 100% 0; } /* #graph.problemlist ul li a em span.bar { opacity: 0.8; } #graph.problemlist ul li a:hover em span span { background-image: url(/img/graphs/bar4.png); } #graph.problemlist ul li a em span span span { text-align: left; } */ #graph div#loading { position: absolute; top: 40px; left: 420px; width: 100px; padding: 14px 14px 7px; font-size: 18pt; font-weight: bold; color: #666; text-shadow: 0 0 2px #fff; text-align: center; background-color: rgba(255,255,255,0.7); border-radius: 14px; box-shadow: 0 0 7px 0 #999 inset; } #graph.none div#loading { display: none; } #graph div#loading p { font-size: 11pt; } /* ie */ #graph div#loading { word-wrap: break-word; } /* because otherwise IE doesn't consider trailing periods wrappable characters?? */ #graph ul li a { cursor: hand; }