/* Replaces the old twitter_follow.jpg.
   132x24 - the height of the language flags beside it. Any bigger and
   the black area overwhelms the light header at once. */
#twitter a.ot-x { display: inline-block; width: 132px; height: 24px;
  background: #000; color: #fff; text-align: center; border-radius: 4px;
  font: bold 11px/24px Arial, Helvetica, sans-serif; text-decoration: none;
  letter-spacing: .2px; white-space: nowrap; }
#twitter a.ot-x:hover { background: #2a2a2a; color: #fff; text-decoration: none; }

/* Turned white, whichever variant of the brand toolkit is used. Only
   the colour changes, the shape stays. */
#twitter a.ot-x img { height: 11px; width: auto; vertical-align: -1px;
  margin-right: 6px; filter: brightness(0) invert(1); }

/* ot-header-align */
/* With "div#" in front, or the rules in site.css win through their
   higher specificity - the loading order does not help there. */
div#twitter { width: auto; height: auto; right: 6px; }

/* The 100px gap was for the font size icons, which are gone. Without
   them the row of links hung in the air. */
div#topmenu { right: 6px; }
div#topmenu li:last-child a { padding-right: 0; }

/* The flags move up: the button ends at 6 and is 132 wide, so it
   starts at 138 - plus a 14px gap. */
div#languages { right: 152px; }

/* ot-twitter-top: stood 6px higher than the flags (-115 against -109) */
div#twitter { top: -109px; }