+div#headlines-toolbar span.r {
+ float: right;
+ position: relative;
+ background : #ecf4ff;
+ border-left: 5px solid white;
+ padding : 0 4px 0px 4px;
+ text-align : right;
+}
+
+/* http://css-tricks.com/adobe-like-arrow-headers/ */
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ div#headlines-toolbar span.r:before,
+ div#headlines-toolbar span.r:after {
+ content: "";
+ position: absolute;
+ /* Pushed down half way, will get pulled back up half height of triangle
+ ensures centering if font-size or line-height changes */
+ top: 50%;
+ width: 0;
+ height: 0;
+ }
+ div#headlines-toolbar span.r:before {
+ left: -12px;
+ /* Triangle */
+ border-top: 8px solid transparent;
+ border-bottom: 8px solid transparent;
+ border-right: 8px solid white;
+ /* Pull-up */
+ margin-top: -8px;
+ }
+ div#headlines-toolbar span.r:after {
+ /* Smaller and different position triangle */
+ left: -5px;
+ border-top: 6px solid transparent;
+ border-bottom: 6px solid transparent;
+ border-right: 6px solid #ecf4ff;
+ margin-top: -6px;
+ }
+}
+
+div#headlines-toolbar span.r span.error {
+ color : red;
+}
+
+div#headlines-toolbar span.r a {
+ color : gray;