body {
  cursor: default;
  /* Chrome 64+ breaks underlines unless the following property is set (https://www.chromestatus.com/feature/5631679087509504) */
  text-decoration-skip-ink: none;
}

p {
  padding-bottom: 1.2em;
}

.bold {
  font-weight: bold;
}

.bolder {
  font-weight: bolder;
}

/* Used in GameInputPanel.showError */
.word {
  font-family: monospace;
  font-weight: bold;
  font-size: 150%;
}

.subTitle {
  font-weight: bold;
  text-align: right;
  color: #fff;
  white-space: nowrap;
}

#tstats {
  float: right;
  padding-right: 10px;
}

#tstats .userNameLabel {
  font-weight: bold;
  color: #fff;
  max-width: 60ex;
}

#tstats .datarow {
  color: #fff;
}

.mainUserInfoBox {
  font-size: 90%;
}

.mainUserInfoBoxWpm {
  /*
  TODO: remove this class (now using .TypingSpeedWidget)
   */
  padding-right: 4px;
}

.mainUserInfoBox .MainUserInfoEditor a {
  margin-right: 5px;
  white-space: nowrap;
}

.TypingSpeedWidget .lblWpm {
  margin-right: .5em;
}

.blogLink img {
  margin-left: 2px;
}

.view {
  margin-left: auto;
  margin-right: auto;
}

.mainViewportHolder {
  width: 644px;
  margin-left: auto;
  margin-right: auto;
}

.mainViewport {
  width: 644px;
  margin-left: auto;
  margin-right: auto;
}

.eastWidget {
  padding-left: 20px;
  padding-bottom: 33px;
  background-color: white;
}

#tr_textHeader {
  text-align: center;
}

#tr_textHeader h2 {
  vertical-align: top;
}

#tr_textHeader h1 {
  padding-top: 0;
}

.OptionsWidget {
  margin-top: 1.5em;
}

.OptionsWidgetBody {
  margin-top: .25em;
}

ul.OptionsWidgetBody li {
  /* display the list horizontally to match the original design (which used unicode bullet chars rather than a <ul>) */
  float: left;
  margin-left: 3ch;
}

ul.OptionsWidgetBody li:first-child {
  margin-left: 5ch;
}

.TyperacerDebugPanel {
  border: 2px solid gray;
  border-radius: 10px;
  padding: 5px;
}

.gameView {
  width: 100%;
}

.gameView .gameStatusLabel {
  font-weight: bold;
  font-size: 120%;
  color: #3B5998;
}

.gameView .gameStatusLabel-flashOn {
  color: red;
}

.gameView .navControls {
  margin-top: 10px;
}

.gameView .raceAgainLink {
  font-size: 125%; /* font-weight:bold;*/
}

.gameView .raceAgainLink-flashOn {
  color: #C60;
}

/*TODO: this is the a:hover color from theme.css; extract this value to a shared constant if we ever start using a CSS framework*/
.gameView .timeDisplay {
  margin-left: 60px;
  font-size: 120%;
}

.gameView .timeDisplay .time {
  font-weight: bold;
}

.gameView .timeDisplay .time-flashOn {
  color: red;
}

.gameView .wpmPrompt {
  font-size: 120%;
  font-weight: bold;
  margin-right: 10px;
}

.gameView .wpm {
  font-weight: bold;
  font-size: 120%;
  width: 4em;
}

.gameView .inputPanel {
  margin-top: 10px;
  width: 100%;
  /* Underlines shouldn't cross over glyph descenders (https://addictinggames.atlassian.net/browse/TR-407) */
  text-decoration-skip-ink: auto;
  text-decoration-skip-ink: all;  /* for browsers that support "all" (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink#browser_compatibility) */
}

.gameView .inputPanel .prompt {
  font-size: 120%;
  color: #3B5998;
  font-weight: bold;
}

.gameView .inputPanel .game-typing-feedback {
  color: red
}

.unselectable {
  /*
    No need to select text anywhere except text boxes
    @see http://stackoverflow.com/questions/69430/is-there-a-way-to-make-text-unselectable-on-an-html-page
  */
  -moz-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gameView .inputPanel .hideableWords {
  font-family: Arial, serif;
  font-size: 26px;
  margin: 10px 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 649px) {
  .gameView .inputPanel .hideableWords {
    white-space: normal !important;
  }
}

.gameView .inputPanel .nonHideableWords {
  font-family: Arial, serif;
  font-size: 20px;
  margin: 10px 0 2px 0;
}

.gameView .inputPanel .logographicWords {
  font-family: Arial, serif;
  font-size: 20px;
  margin: 10px 0 2px 0;
}

.gameView .inputPanel .txtInput.txtLogographicInput {
  overflow: hidden;
  height: 50px;
  font-size: 20px;
}

/* using overflow to hide the scrollbars, so that input aligns with the words */
.gameView .inputPanel .txtInput {
  color: #555;
  width: 98%;
  height: 35px;
  font-family: Arial, serif;
  font-size: 26px;
  margin-top: 2px;
  margin-bottom: 10px;
  background: transparent none repeat scroll 0;
  border-width: medium;
}

/* using width: 98% because right border will get cut off if we use 100% */
.gameView .inputPanel .txtInput-unfocused {
  color: #CCC;
}

.gameView .inputPanel .txtInput-error {
  background-color: #d08383;
}

/* CSS sprite with 2 arrows */
.arrowPopup-error {
  background-image: url("images/arrows60px.cache.gif");
  background-position: 0 35px;
}

.wpmInfoPopup .gwt-RadioButton {
  font-weight: bold;
}

.wpmInfoPopup .pnlControls {
  text-align: right;
}

.wpmInfoPopup .pnlControls a {
  padding-left: 2ex;
}

.typoAlertPopup {
  max-width: 450px;
  font-size: 1.2em;
}

.typoAlertErrorText {
  font-weight: bold;
  font-size: 1.5em;
  background-color: #d08383;
  padding: 0 4px; /* text-decoration:underline;*/
}

.scoreboardContainer {
  max-height: 300px;
  /*
  TODO: might want to make the max-height relative to the height of the viewport, e.g. max-height: 40vh;
    (see https://css-tricks.com/fun-viewport-units/)
   */
  padding-right: 1ex;
}

.scoreboard {
  width: 100%;
}

.scoreboard .row {
  width: 100%;
}

.scoreboard .row .progressBar {
  background-color: transparent;
  border-bottom-style: dashed;
  border-color: goldenrod;
  margin-top: 6px;
}

.scoreboard .row .progressBar .avatar {
  display: inline-block; /* we have to set display:inline-block; otherwise the avatar div will fill the entire width of ProgressBar, so it won't move*/
  white-space: nowrap; /* we have to set white-space: nowrap; because we never want the avatar image to appear on the next line (below .nameContainer) */
}

.scoreboard .row .progressBar .avatar .nameContainer {
  width: 100px; /* We make it approximately wide-enough to display "Could be you" on a single line */
  display: inline-block; /* we have to set display:inline-block; because by default the div has display:block, which wont allow the avatar img to appear next to it; see http://stackoverflow.com/a/9189873/1965404 */
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
}

.scoreboard .row .progressBar .avatar .nameContainer .lblName {
  overflow: hidden; /* "overflow" value must be different from "visible" in order for the ellipsis to be inserted */
  text-overflow: ellipsis;
  padding-right: 5px; /* we add some padding-right because the last letter of text in the widget to gets partially clipped when italicized; see http://stackoverflow.com/a/33614210/1965404 */
}

.scoreboard .row .progressBar .avatar .nameContainer .lblUsername {
  padding-right: 5px; /* for proper alignment, we want to match the padding to that of .lblName */
}

.scoreboard .row .progressBar .avatar-self {
  font-weight: bold;
}

.scoreboard .row .progressBar .avatar-dead {
  font-style: italic;
  color: gray;
  font-weight: normal;
}

.scoreboard .row .progressBar .avatar {
  cursor: help;
}

.scoreboard .row .rankPanel {
  margin-left: 10px;
}

.scoreboard .row .rankPanel .rankPanelWpm-self {
  font-size: 150%;
  font-weight: bold;
}

.userNameLabel {
  cursor: help;
}

.userNameLabel-self {
  font-weight: bold;
}

.countdownPopup {
  font-size: 120%;
  background-color: #a4e3ff;
  border-style: solid;
  border-width: 2px;
}

.countdownPopup .timeDisplay {
  font-size: 200%;
}

.basicCountdownPopup {
  height: 165px;
}

.basicCountdownPopup .lightLabel {
  padding: 8px;
  font-weight: bold;
}

.basicCountdownPopup .timeDisplay {
  padding: 0 10px 10px 0;
}

/*.horizontalCountdownPopup {padding: 5px;}*/
.horizontalCountdownPopup .trafficLight {
  display: block;
}

.horizontalCountdownPopup .lightLabel {
  padding-left: 10px;
  width: 220px;
  min-width: 200px;
}

.horizontalCountdownPopup .timeDisplay {
  padding: 0 5px;
}

.horizontalCountdownPopup .playerControls {
  padding: 5px 3px 2px 3px;
  font-size: 75%
}

.helpPopup .dialogContent {
  max-width: 400px;
}

.imgHelp {
  cursor: help;
}

.practiceViewHelpPopup {
  max-width: 400px;
}

.PlayerInfoPopup .rankIcon {
  width: 30px;
  height: 30px;
}

.PlayerInfoPopup .Caption {
  font-weight: bold;
  cursor: move;
  vertical-align: top;
  max-width: 425px;
  /* inlined version of images/dragHandleMini.cache.png (inlined using http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ ): */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAACCAYAAACQahZdAAAAAXNSR0IArs4c6QAAABVJREFUCNdjWLBgwWoGBgYGdBoDAADwSAeiiU6SagAAAABJRU5ErkJggg==) repeat-y;
  *background: url(images/dragHandleMini.cache.png) repeat-y; /* since IE6&7 don't support data URLs, we can target just those browsers by prepending a * to the property name */
  /*
  The following rules were added just to support having the above "drag handle" (background image) surrounded by
  padding space on all sides:
  - instead of the 5px all-around padding used by .trPopupDialog, here we have to emulate the same visual effect by
    breaking up those 5px of space that we want into 2 components:
    1) a 3px transparent border (to provide some padding outside the drag handle image) and to fill out
    the remaining 2px of space that we want, we set 2px padding inside the borders, except on the left, where we use
    6px of padding to ensure that the text doesn't overlap with our background image, which itself takes up 5px of space.
  - the background-clip: padding-box; rule ties it all together to create the desired look*/
  border: 3px solid transparent;
  background-clip: padding-box;
  padding: 2px 2px 2px 6px;
  border-bottom: none;
  white-space: normal; /*allow wrapping the name if it's too long*/
}

.PlayerInfoPopup .dialogContent {
  font-size: 85%;
}

.PlayerInfoPopup .lblAccountType {
  font-style: italic;
}

.PlayerInfoPopup .pitLink {
  margin-left: 10px;
}

.PlayerInfoPopup .btnPin {
  margin-left: 10px;
}

.PlayerInfoPopup .statsGrid {
  padding-left: 4px;
}

.UserInfoContextMenu {
  background-color: white;
  border-style: solid;
  border-width: 1px;
}

.UserInfoContextMenu .lblUserName {
  font-weight: bold;
  margin: 5px;
  border-bottom: solid 1px;
  max-width: 200px;
}

.UserInfoContextMenu .gwt-MenuBar-vertical table {
  width: 100%; /* have the menu options take up the entire width of the popup */
}

.gwt-MenuBar {
  background-color: white;
}

.gwt-MenuItem {
  white-space: nowrap;
}

.gwt-MenuItem-selected {
  background-color: #ddd;
  cursor: pointer;
}

.gwt-DisclosurePanel .header {
  cursor: pointer;
}

.gwt-RadioButton * {
  cursor: pointer;
}

.exceptionNoticePopup .dialogContent {
  max-width: 250px;
}

.exceptionNoticePopup a {
  color: #00F;
}

.exceptionNoticePopup a:hover {
  color: #00A;
}

/*
TODO: can use the .InvitationUrlWidget class instead of .roomInvitePopup for the following styles
  (NOTE: will have to update the .roomInvitePopup rules in styles\src\dialog-box.scss)
*/
.roomInvitePopup .urlDescription {
  margin: 8px 0 0 0;
}

.roomInvitePopup .urlTextbox {
  width: 496px;
  background-color: #F7F7F7;
  font-family: monospace;
  font-size: 110%;
  margin: 4px 0;
}

.roomInvitePopup .pnlControls {
  margin-top: .25em;
}

.roomInvitePopup .pnlControls .ImageButtonWithText {
  margin-right: 1ch;
}

.roomIdleDisconnectPopup .dialogContent {
  max-width: 300px;
}

.roomIdleDisconnectPopup .lnkRejoin {
  font-size: 120%;
}

.editUserPopup .dialogContent {
  max-width: 400px;
}

.flaggingPopup .dialogContent {
  max-width: 250px;
}

.signUpForm {
  width: 100%;
}

.signUpForm .sectionHeaderRow {
  color: #3B5998;
  font-weight: bold;
  padding-top: 5px;
}

.signUpForm .loading-message {
  margin-left: 10px;
}

.signUpForm .UsernameInputWidget {
  border-spacing: 0;
}

.signUpForm .UsernameInputWidget td {
  padding-right: 4px;
}

.fieldCorrectMsg {
  color: darkgreen;
}

.SocialNetworkLoginButtons .ImageButton {
  margin-left: 2px;
}

/* TODO: styles like this can be extracted to per-module stylesheets */

.statsView {
  margin-top: 10px;
}

.statsView .highScoresView .highScoresFooter {
  font-style: italic;
  font-size: 90%;
  margin-top: 10px;
  text-align: left;
}

.statsView .highScoresView .highScoresFooter .lnkRefresh {
  font-style: normal;
  margin-right: 1ch;
}

.statsView .highScoresView .highScoresFooter .timeDisplay {
  display: inline-block;
}

.statsView .StatsTable .nameColumn {
  overflow: hidden;
}

.emptyListLabel {
  margin: 10px 0 0 20px;
  font-style: italic;
}

.StatsTable {
  width: 100%;
}

.StatsTable table {
  width: 100%;
}

.StatsTable .headerRow {
  font-style: normal;
  font-weight: bold;
}

/* prevents the UIV from taking up the entire td cell */
.StatsTable .userNameLabel .gwt-Label {
  display: inline;
}

.dataListViewFooter {
  text-align: center;
}

.userStatViewLabel-asterisked {
  cursor: help;
  font-style: italic;
  color: gray;
}

.userStatViewAsteriskedPopup .dialogContent {
  max-width: 300px;
}

.gwt-TabBar .gwt-TabBarItem {
  cursor: pointer;
  padding: 5px;
  text-decoration: underline;
  color: #F70;
}

.gwt-TabBar .gwt-TabBarItem-selected {
  font-weight: bold;
}

.southWidget {
  margin-top: 10px;
  margin-bottom: 10px
}

.textInfoView {
  width: 100%;
}

.textInfoView .textInfoHeader {
  font-size: 120%;
  font-weight: bold;
  margin: 10px 0 10px 0;
  color: #3B5998;
}

.textInfoView .textInfoTitle {
  font-size: 125%;
}

.textInfoView .textInfoTitle a {
  color: #466;
}

.textInfoView .textInfoContributor {
  margin-top: 1ex;
}

.textInfoView .productImage {
  padding-right: 5px;
  white-space: nowrap;
}

/* white-space: nowrap; prevents the 1px img from wrapping to a new line and hence using up an extra 16px of vertical space (at least in WebKit) */
.textInfoView .tblOwnStats {
  margin-top: 1ex;
  color: #3B5998;
}

.textInfoView .tblOwnStatsNumber {
  padding-left: 1ch;
  font-size: 125%;
  font-weight: bold;
  color: #466;
  font-family: sans-serif;
}

/*using sans-serif because the lucida font looks like crap in bold on Firefox & Opera */
.textInfoView .timeDisplay {
  margin-left: 0;
}

/* override the margin-left style specified by .gameView .timeDisplay */
.textInfoView .tblOwnStatsNumber.datetime {
  font-size: 100%;
}

.textInfoView .tblOwnStatsNumber-good {
  color: #99cc00; /*color: #3B5998;*/
}

.textInfoView .tblOwnStatsNumber-bad {
  color: #d08383; /*color: #3B5998;*/
}

.textInfoView .tblOwnStats .notFinishedMsg {
  font-style: italic;
}

.textInfoView .textStatsViewHeader { /*font-size:120%;*/
  font-weight: bold;
  padding: 2px 10px;
}

.practiceViewScoresPopup {
  max-width: 500px;
}

.DemoteSkillLevelPopup {
  max-width: 480px;
}

/*.textInfoView .textInfoFooterAds {margin-left:10px; margin-top: 20px;}*/
.LanguageChooserPopup {
  max-width: 500px;
}

.InstaGibPopup {
  max-width: 400px;
}

.SignUpPromptPopup {
  max-width: 400px;
}

.SignUpPromptPopup-facebookInvite {
  max-width: 600px;
}

.SignUpPromptPopup .promptLine {
  margin: 10px 10px;
}

.SignUpPromptPopup .wallPubLink {
  font-size: 150%;
  margin: 10px 10px;
}

.SignUpPromptPopup .lnkSignUp {
  font-size: 150%;
}

.SignUpPromptPopup .lnkLogin {
  font-style: italic;
}

.SignUpPromptPopup ul {
  padding: 10px 25px;
}

.SignUpPromptPopup li {
  padding: 5px 0;
}

.SignUpPromptPopup .linkContainer {
  margin-left: 50px;
  margin-bottom: 20px;
}

.NeedAccountMessage {
  margin: 20px 0 0 20px;
}

.NeedAccountMessage .NeedAccountMessageText {
  margin-right: 1ch;
  font-style: italic;
}

.NeedAccountMessage a {
  white-space: nowrap;
}

.TextStatsView .gwt-TabBar .gwt-TabBarFirst {
  display: none;
}

/* we don't want this spacer that TabBar inserts here */
.TextStatsView .gwt-TabBar .gwt-TabBarItem {
  padding: 2px 20px 2px 0;
  min-width: 120px;
}

/* assigning explicit min-width so that tab doesn't change size when selected (as a result of font becoming bold, hence wider) */
.TextStatsView .gwt-TabBar .gwt-TabBarItem img {
  vertical-align: middle;
  padding-right: 5px;
}

/* style for the tab icon */

.UserGameResultsView .LinkButtonGroupLink {
  margin-left: 5px;
}

.UserGameResultsView .LinkButtonGroupLink-selected {
  font-style: italic;
}

.UserGameResultsView .GameResultsChartView {
  margin-top: 2em;
}

.UserGameResultsView .GameResultsChartView .LinkButtonGroupLink {
  margin-left: 4px;
  margin-right: 4px;
}

.UserGameResultsView .GameResultsChartView .LinkButtonGroupLink-selected {
  font-weight: bold;
  font-style: normal;
}

.GameResultInfoPopup {
  width: 644px;
}

.GameResultInfoPopup .textInfoView .fullTextStr {
  font-size: 125%;
  font-family: serif;
  background-color: #F1FFFF;
  padding: .5ch 1ch;
  border-radius: 1ch 1ch 1ch 0;
}

.GameResultInfoPopup .textInfoView .fullTextStr:before {
  content: open-quote;
  font-size: 125%;
  font-weight: bold;
}

/* see https://developer.mozilla.org/en-US/docs/Web/CSS/quotes */
.GameResultInfoPopup .textInfoView .fullTextStr:after {
  content: close-quote;
  font-size: 125%;
  font-weight: bold;
}

.GameResultInfoPopup .textInfoView .textInfoAttribution {
  margin-top: 1ex;
}

.room {
  width: 100%;
}

.room .roomSection {
  margin-bottom: 5px;
}

.room .room-title {
  font-weight: bold;
}

.chatView {
  width: 100%;
}

.chatView .chatSectionTitle {
  font-weight: bold;
}

.chatView .messagesPanel {
  height: 150px;
  width: 100%;
  border: 2px solid;
}

.chatView .messagesPanel .message div {
  display: inline;
}

/* gets UIV to be displayed inline */
.chatView .messagesPanel .message .systemMessage {
  font-style: italic;
}

.chatView .messagesPanel .userNameLabel {
  font-weight: bold;
  margin-right: 5px;
}

.chatView .users-list {
  width: 150px;
  height: 150px;
  border: 2px solid;
  overflow: auto;
}

.chatView .txtChatMsgInput {
  width: 100%;
}

.chatView .txtChatMsgInput-unfocused {
  color: #CCC;
}

.challengePromptDialog {
  max-width: 405px;
}

.challengePromptDialog .challengePrompt {
  margin-bottom: 10px;
}

.typingChallengeDialog .challengePrompt {
  margin-bottom: 10px;
}

.typingChallengeDialog .challengeClockPanel {
  font-size: 120%;
  margin-bottom: 10px;
}

.typingChallengeDialog .challengeClockPanel .timeDisplay {
  font-weight: bold;
}

.typingChallengeDialog .challengeClockPanel .timeDisplay .time-flashOn {
  color: red;
}

.typingChallengeDialog .challengeTimePrompt {
  margin-right: 10px;
}

.typingChallengeDialog .challengeImg {
  border: 2px solid;
}

.typingChallengeDialog .challengeTextArea {
  margin-top: 10px;
  width: 410px;
  margin-bottom: 10px;
}

.typingChallengeResultDialog {
  max-width: 400px;
}

.typingChallengeResultDialog .resultStats {
  font-size: 120%;
}

.typingChallengeResultDialog .resultExplanation {
  margin-top: 10px;
}

.typingChallengeResultDialog .retryPrompt {
  margin-top: 10px;
}

.AdvancedTextBox-unfocused {
  color: #CCC;
}

/** We only want DirtyComboBox to have grayed-out text when it's inside of editAccountForm */
.DirtyComboBox-unfocused {
  color: inherit;
}

/* use the default color value */
.editAccountForm .DirtyComboBox-unfocused {
  color: #CCC;
}

/* gray out the text */

/* ChromePanel styling notes:
   - originally we were using 3 background sprite images to implement the horizontal, vertical, and corners of the ChromePanel
   - starting Mar 16, 2013, we're inlining each individual image as a data URL:
     each of these data urls is based on the corresponding gif (e.g. .chrome_t is derived from images/chrome_t.gif), the encoding generated using http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
   - however, IE6&7 don't support data URLs, so for them we retain the original images, using the * hack (http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/)
   - the first 4 are borders and the last 4 are corners
*/
.chrome_t {
  background: url(data:image/gif;base64,R0lGODlhAQAFAMIFAOnp6e/v7/Pz8/f39/n5+f///////////yH5BAEKAAcALAAAAAABAAUAAAMECCFDCQA7);
  *background: url(images/chrome_v.cache.png) 0 -5px; /* we can target IE6&7 only by prepending a * to the property */
}

.chrome_b {
  background: url(data:image/gif;base64,R0lGODlhAQAFAMIFAOnp6e/v7/Pz8/f39/n5+f///////////yH5BAEKAAcALAAAAAABAAUAAAMESCMBCQA7);
  *background: url(images/chrome_v.cache.png) 0 0;
}

.chrome_l {
  background: url(data:image/gif;base64,R0lGODlhBQABAMIFAOnp6e/v7/Pz8/f39/n5+f///////////yH5BAEKAAcALAAAAAAFAAEAAAMECCFDCQA7);
  *background: url(images/chrome_h.cache.png) 0 0;
}

.chrome_r {
  background: url(data:image/gif;base64,R0lGODlhBQABAMIFAOnp6e/v7/Pz8/f39/n5+f///////////yH5BAEKAAcALAAAAAAFAAEAAAMESCMBCQA7);
  *background: url(images/chrome_h.cache.png) -5px 0;
}

.chrome_bl {
  background: url(data:image/gif;base64,R0lGODlhBQAFAOMMAOvr6+zs7O3t7e/v7/Dw8PHx8fLy8vT09Pb29vf39/r6+vz8/P///////////////yH5BAEKAA8ALAAAAAAFAAUAAAQRMBikFiAnqSLKoYNAGMwGBBEAOw==);
  *background: url(images/chrome_corners.cache.png) 0 0;
}

.chrome_br {
  background: url(data:image/gif;base64,R0lGODlhBQAFAOMMAOvr6+zs7O3t7e7u7vDw8PLy8vX19fb29vf39/j4+Pr6+vz8/P///////////////yH5BAEKAA8ALAAAAAAFAAUAAAQTcClUhEqGAGTKEAUxBIcACAcTAQA7);
  *background: url(images/chrome_corners.cache.png) 0 -5px;
}

.chrome_tl {
  background: url(data:image/gif;base64,R0lGODlhBQAFAOMMAObm5ufn5+jo6Ovr6+zs7O3t7e/v7/Hx8fLy8vX19ff39/j4+P///////////////yH5BAEKAA8ALAAAAAAFAAUAAAQTkK0CwhpilCKIOcBgIElQHIkSAQA7);
  *background: url(images/chrome_corners.cache.png) 0 -10px;
}

.chrome_tr {
  background: url(data:image/gif;base64,R0lGODlhBQAFAOMLAObm5ufn5+jo6Onp6evr6+3t7fDw8PLy8vPz8/X19ff39////////////////////yH5BAEKAA8ALAAAAAAFAAUAAAQTUACBViEjoGPKEAliEICSHIUQAQA7);
  *background: url(images/chrome_corners.cache.png) 0 -15px
}

.chrome_m {
  background-color: #fafafa;
}

.loading-message {
  font-style: italic;
  color: #666666;
  text-align: center;
}

/* hide the AddThis tracking swf (see /doc/postmortems/add_this_flash_tracking_cookie.txt for more info) */
#atffc {
  display: none;
}

#atff {
  display: none;
}

.GoogleyPagingControls .lnkPageNumber {
  margin: 0 5px;
}

.GoogleyPagingControls .lblPageNumber {
  margin: 0 5px;
  font-weight: bold;
}

.colSortArrow {
  margin-left: 2px;
  vertical-align: middle;
}

.colSortArrow svg {
  width: 10px;
  height: 10px;
}

.colSortArrow svg .triangle {
  fill: #666;
  /* rotate the triangle by half a turn to make it point downward */
  transform: rotate(0.5turn);
  transform-origin: center;
}

/* Leave 20px padding around the main viewport */
.newEastWidget {
  padding-left: 25px;
}

.newWestWidget {
  padding-right: 25px;
}

.newNorthWidget { /*padding-bottom:25px;*/
}

.newSouthWidget {
  padding-top: 25px;
}

.adblockWarning {
  max-width: 728px;
  /*background-color:#00D5FF;*/
  background-color: #a4e3ff;
  border: 2px solid;
  padding: 2px;
}

/* WebKit-based browsers don't put any padding around the text inside a button */
.gwt-Button {
  padding: 2px 6px;
  cursor: pointer;
}

.keyboardShortcutsReference li {
  list-style-position: inside; /* otherwise list bullets stick outside the popup's left boundary */
  margin-top: 4px;
}

.keyboardShortcutsReference table {
  /* The following 2 properties emulate a cellspacing=4 attribute in CSS: */
  border-spacing: 4px;
  border-collapse: separate;
}

.keyboardShortcutsReference td:first-child {
  font-weight: bold;
  font-size: 1.25em;
  font-family: monospace;
  margin-bottom: 4px;
  padding-right: 20px;
}

.gwt-PopupPanelGlass {
  background-color: #000;
  opacity: 0.5 !important;
}

.ScoreMenuButton {
  margin-left: 10px;
}

.ScoreMenuButton a {
  margin-left: 5px;
}

/* EG ad styles */
.newNorthWidget > .embedded_ad_wrapper {
  min-height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1150px) {
  .newNorthWidget {
    display: none;
  }
}

.newEastWidget > .embedded_ad_wrapper {
  width: 300px;
  /* removed for playwire. */
  /*min-height: 600px;*/
  overflow-x: hidden;
}

@media only screen and (max-width: 1150px) {
  .newEastWidget {
    display: none;
  }
}

.newWestWidget > .embedded_ad_wrapper {
  width: 300px;
  min-height: 600px;
  overflow-x: hidden;
}

@media only screen and (max-width: 1550px) {
  .newWestWidget {
    display: none;
  }
}

.newSouthWidget > .embedded_ad_wrapper {
  min-height: 90px;
  min-width: 728px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1150px) {
  .newSouthWidget {
    display: none;
  }
}

/* hide the empty GDPR consent iframe; see https://github.com/TeachMeInc/typeracer-application/issues/196 */
iframe[name="__cmpLocator"] {
  display: none;
}

/*
  NOTE: the .TypingLogReplayPlayer styles are inherited from TypingLog.css (included in the TypingLog gwt module)
  But we can define additional styles for it here:
*/
.TypingLogReplayPlayer .WordsWithErrors ol.content {padding-left: 4ch;}


/* sideblocks styles */

.sidebarBlocks {
  width: 300px;
}

.sidebarBlocks iframe {
  width: 100%;
  min-height: 600px;
  box-sizing: border-box;
}

.mainViewportHolder .sidebarBlocks {
  width: 100%;
}

.mainViewportHolder .sidebarBlocks iframe {
  width: 100%;
  min-height: 270px;
  border: none;
}

/* change theme popup */
.trPopupDialog.ChangeThemePopup .popupContent {
  font-size: 120%;
}

.trPopupDialog.ChangeThemePopup .popupContent .dialogContent {
  font-size: 140%;
  padding: 1em;
}

.progressBar .avatarContainer {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 72px;
  height: 30px;
}