/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.8.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2017 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/.chosen-container{position:relative;display:inline-block;vertical-align:middle;font-size:13px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.chosen-container *{-webkit-box-sizing:border-box;box-sizing:border-box}.chosen-container .chosen-drop{position:absolute;top:100%;z-index:1010;width:100%;border:1px solid #aaa;border-top:0;background:#fff;-webkit-box-shadow:0 4px 5px rgba(0,0,0,.15);box-shadow:0 4px 5px rgba(0,0,0,.15);clip:rect(0,0,0,0)}.chosen-container.chosen-with-drop .chosen-drop{clip:auto}.chosen-container a{cursor:pointer}.chosen-container .chosen-single .group-name,.chosen-container .search-choice .group-name{margin-right:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;color:#999}.chosen-container .chosen-single .group-name:after,.chosen-container .search-choice .group-name:after{content:":";padding-left:2px;vertical-align:top}.chosen-container-single .chosen-single{position:relative;display:block;overflow:hidden;padding:0 0 0 8px;height:25px;border:1px solid #aaa;border-radius:5px;background-color:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(20%,#fff),color-stop(50%,#f6f6f6),color-stop(52%,#eee),to(#f4f4f4));background:linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background-clip:padding-box;-webkit-box-shadow:0 0 3px #fff inset,0 1px 1px rgba(0,0,0,.1);box-shadow:0 0 3px #fff inset,0 1px 1px rgba(0,0,0,.1);color:#444;text-decoration:none;white-space:nowrap;line-height:24px}.chosen-container-single .chosen-default{color:#999}.chosen-container-single .chosen-single span{display:block;overflow:hidden;margin-right:26px;text-overflow:ellipsis;white-space:nowrap}.chosen-container-single .chosen-single-with-deselect span{margin-right:38px}.chosen-container-single .chosen-single abbr{position:absolute;top:6px;right:26px;display:block;width:12px;height:12px;background:url(js/extern/chosen-sprite.png) -42px 1px no-repeat;font-size:1px}.chosen-container-single .chosen-single abbr:hover{background-position:-42px -10px}.chosen-container-single.chosen-disabled .chosen-single abbr:hover{background-position:-42px -10px}.chosen-container-single .chosen-single div{position:absolute;top:0;right:0;display:block;width:18px;height:100%}.chosen-container-single .chosen-single div b{display:block;width:100%;height:100%;background:url(js/extern/chosen-sprite.png) no-repeat 0 2px}.chosen-container-single .chosen-search{position:relative;z-index:1010;margin:0;padding:3px 4px;white-space:nowrap}.chosen-container-single .chosen-search input[type=text]{margin:1px 0;padding:4px 20px 4px 5px;width:100%;height:auto;outline:0;border:1px solid #aaa;background:url(js/extern/chosen-sprite.png) no-repeat 100% -20px;font-size:1em;font-family:sans-serif;line-height:normal;border-radius:0}.chosen-container-single .chosen-drop{margin-top:-1px;border-radius:0 0 4px 4px;background-clip:padding-box}.chosen-container-single.chosen-container-single-nosearch .chosen-search{position:absolute;clip:rect(0,0,0,0)}.chosen-container .chosen-results{color:#444;position:relative;overflow-x:hidden;overflow-y:auto;margin:0 4px 4px 0;padding:0 0 0 4px;max-height:240px;-webkit-overflow-scrolling:touch}.chosen-container .chosen-results li{display:none;margin:0;padding:5px 6px;list-style:none;line-height:15px;word-wrap:break-word;-webkit-touch-callout:none}.chosen-container .chosen-results li.active-result{display:list-item;cursor:pointer}.chosen-container .chosen-results li.disabled-result{display:list-item;color:#ccc;cursor:default}.chosen-container .chosen-results li.highlighted{background-color:#3875d7;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(20%,#3875d7),color-stop(90%,#2a62bc));background-image:linear-gradient(#3875d7 20%,#2a62bc 90%);color:#fff}.chosen-container .chosen-results li.no-results{color:#777;display:list-item;background:#f4f4f4}.chosen-container .chosen-results li.group-result{display:list-item;font-weight:700;cursor:default}.chosen-container .chosen-results li.group-option{padding-left:15px}.chosen-container .chosen-results li em{font-style:normal;text-decoration:underline}.chosen-container-multi .chosen-choices{position:relative;overflow:hidden;margin:0;padding:0 5px;width:100%;height:auto;border:1px solid #aaa;background-color:#fff;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(1%,#eee),color-stop(15%,#fff));background-image:linear-gradient(#eee 1%,#fff 15%);cursor:text}.chosen-container-multi .chosen-choices li{float:left;list-style:none}.chosen-container-multi .chosen-choices li.search-field{margin:0;padding:0;white-space:nowrap}.chosen-container-multi .chosen-choices li.search-field input[type=text]{margin:1px 0;padding:0;height:25px;outline:0;border:0!important;background:0 0!important;-webkit-box-shadow:none;box-shadow:none;color:#999;font-size:100%;font-family:sans-serif;line-height:normal;border-radius:0;width:25px}.chosen-container-multi .chosen-choices li.search-choice{position:relative;margin:3px 5px 3px 0;padding:3px 20px 3px 5px;border:1px solid #aaa;max-width:100%;border-radius:3px;background-color:#eee;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),to(#eee));background-image:linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-size:100% 19px;background-repeat:repeat-x;background-clip:padding-box;-webkit-box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);color:#333;line-height:13px;cursor:default}.chosen-container-multi .chosen-choices li.search-choice span{word-wrap:break-word}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close{position:absolute;top:4px;right:3px;display:block;width:12px;height:12px;background:url(js/extern/chosen-sprite.png) -42px 1px no-repeat;font-size:1px}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover{background-position:-42px -10px}.chosen-container-multi .chosen-choices li.search-choice-disabled{padding-right:5px;border:1px solid #ccc;background-color:#e4e4e4;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),to(#eee));background-image:linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);color:#666}.chosen-container-multi .chosen-choices li.search-choice-focus{background:#d4d4d4}.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close{background-position:-42px -10px}.chosen-container-multi .chosen-results{margin:0;padding:0}.chosen-container-multi .chosen-drop .result-selected{display:list-item;color:#ccc;cursor:default}.chosen-container-active .chosen-single{border:1px solid #5897fb;-webkit-box-shadow:0 0 5px rgba(0,0,0,.3);box-shadow:0 0 5px rgba(0,0,0,.3)}.chosen-container-active.chosen-with-drop .chosen-single{border:1px solid #aaa;border-bottom-right-radius:0;border-bottom-left-radius:0;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(20%,#eee),color-stop(80%,#fff));background-image:linear-gradient(#eee 20%,#fff 80%);-webkit-box-shadow:0 1px 0 #fff inset;box-shadow:0 1px 0 #fff inset}.chosen-container-active.chosen-with-drop .chosen-single div{border-left:none;background:0 0}.chosen-container-active.chosen-with-drop .chosen-single div b{background-position:-18px 2px}.chosen-container-active .chosen-choices{border:1px solid #5897fb;-webkit-box-shadow:0 0 5px rgba(0,0,0,.3);box-shadow:0 0 5px rgba(0,0,0,.3)}.chosen-container-active .chosen-choices li.search-field input[type=text]{color:#222!important}.chosen-disabled{opacity:.5!important;cursor:default}.chosen-disabled .chosen-single{cursor:default}.chosen-disabled .chosen-choices .search-choice .search-choice-close{cursor:default}.chosen-rtl{text-align:right}.chosen-rtl .chosen-single{overflow:visible;padding:0 8px 0 0}.chosen-rtl .chosen-single span{margin-right:0;margin-left:26px;direction:rtl}.chosen-rtl .chosen-single-with-deselect span{margin-left:38px}.chosen-rtl .chosen-single div{right:auto;left:3px}.chosen-rtl .chosen-single abbr{right:auto;left:26px}.chosen-rtl .chosen-choices li{float:right}.chosen-rtl .chosen-choices li.search-field input[type=text]{direction:rtl}.chosen-rtl .chosen-choices li.search-choice{margin:3px 5px 3px 0;padding:3px 5px 3px 19px}.chosen-rtl .chosen-choices li.search-choice .search-choice-close{right:auto;left:4px}.chosen-rtl.chosen-container-single .chosen-results{margin:0 0 4px 4px;padding:0 4px 0 0}.chosen-rtl .chosen-results li.group-option{padding-right:15px;padding-left:0}.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div{border-right:none}.chosen-rtl .chosen-search input[type=text]{padding:4px 5px 4px 20px;background:url(js/extern/chosen-sprite.png) no-repeat -30px -20px;direction:rtl}.chosen-rtl.chosen-container-single .chosen-single div b{background-position:6px 2px}.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b{background-position:-12px 2px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi),only screen and (min-resolution:1.5dppx){.chosen-container .chosen-results-scroll-down span,.chosen-container .chosen-results-scroll-up span,.chosen-container-multi .chosen-choices .search-choice .search-choice-close,.chosen-container-single .chosen-search input[type=text],.chosen-container-single .chosen-single abbr,.chosen-container-single .chosen-single div b,.chosen-rtl .chosen-search input[type=text]{background-image:url(js/extern/chosen-sprite@2x.png)!important;background-size:52px 37px!important;background-repeat:no-repeat!important}}/*
    Document   : gui.css
    Created on : Feb 13, 2013, 11:52:30 PM
    Author     : james
    Description: Stylesheet for the GUI for the Button Men Online Game
*/

html {
    height:99%;
}

body {
    height:98%;
}

div {
    text-align: center;
}

div#buttonSelectDiv {
    margin-top: 24px;
}

div#container {
    min-height:100%;
    position:relative;
}

div#c_body {
    padding-bottom:100px;   /* height of the footer */
}

div#c_footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;           /* height of the footer */
}

div#login_header {
    text-align: left;
}

div.login {
    text-align: left;
    padding-left: 5px;
    padding-bottom: 5px;
}

div#login_header p {
    padding: 5px;
    margin: 0;
}

div#login_header table {
    /* to cancel the margin: auto used to center other tables */
    margin: 0;
}

div.chosen-container,
div.chosen-single,
div.chosen-drop,
div.chosen-results {
    text-align: left;
}

div.help_column {
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    display: inline-block;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 640px;
}

div.help_column p {
    text-align: left;
}

div.help_column p.byline {
    direction:rtl;
    font-style: italic;
    padding-top: 0.3em;
    text-align: right;
    text-indent: 2em;
}

div.help_column p.die_details {
    text-indent: 2em;
}

div.help_column ul {
    text-align: left;
}

div.help_column li {
    padding-bottom: 0.3em;
}

div.follow_tournament {
    padding-bottom: 20px;
}

h2.monitorMessage {
    color: #800000;
    margin-bottom: 0;
}

div.monitorTimestamp {
    font-size: 0.9em;
}

div.status_player {
    width: 100%;
}

div.status_opponent {
    width: 100%;
}

div.dice_player {
    white-space: nowrap;
}

div.dice_opponent {
    white-space: nowrap;
}

div.battle_mat_player_overlay {
    border-bottom-right-radius: 30px;
    padding: 5px 20px;
}

div.battle_mat_opponent_overlay {
    border-top-left-radius: 30px;
    padding: 5px 20px;
}

.compactMode td.button_opponent,
.compactMode td.button_player {
    display: none;
}

.compactMode div.battle_mat_player,
.compactMode div.battle_mat_player_overlay {
    border-radius: 30px 30px 0px 0px;
}

.compactMode div.battle_mat_opponent,
.compactMode div.battle_mat_opponent_overlay {
    border-radius: 0px 0px 30px 30px;
}

div.cantWin {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}

table {
    table-layout: auto;
    border: thin;
    border-collapse: collapse;
    empty-cells: hide;
    margin: auto;
}

table.spaced {
    border-collapse: separate;
    empty-cells: show;
}

table.dice {
    padding: 0px;
}

td {
    text-align: center;
    /*border: 1px solid black;*/
    padding: 0.2em 0.2em;
}

td.empty {
    width: 80px;
}

td.left {
    text-align: left;
}

table.twocolumn > tbody > tr > td,
table.twocolumn > tr > td {
    width: 50%;
}

td.logtable table,
td.logtable td.logmessage {
    width: 100%;
}

td.chat {
    text-align: right;
}

tfoot td {
    text-align: center;
}

.hiddenChatForm {
    display: none;
}

.logtable .new, .action_desc_div .new {
    background-color: #ffffcc;
}

td.chooseswing {
    vertical-align: top;
}

td.button_player {
    vertical-align: top;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}

td.button_opponent {
    vertical-align: bottom;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

td.button_prepostgame {
    padding-top: 10px;
    padding-bottom: 10px;
}

td.battle_mat {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

td.logtable {
    vertical-align: top;
}

th {
    text-align: center;
    /*border: 1px solid black;*/
    padding: 0.2em 2em;
    font-size: 1.1em;
    font-weight: bold;
}

input.text {
    margin: 0.2em;
}

input.swing {
    width: 20px;
}

/* Taken from
   http://stackoverflow.com/questions/3790935/
          can-i-hide-the-html5-number-input-s-spin-box
*/

input[type='number'] {
    -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.player1_toggle {
    margin-left: 80px;
}

select option.greyed {
    background-color: #aaaaaa;
}

select option.yellowed {
    background-color: #ffff00;
}

select.center {
    text-align: center;
}

.action_desc_div {
    padding: 5px;
}

.action_desc_span {
    padding: 2px 5px;
    border-radius: 5px;
}

.turbo_div {
    padding: 5px;
    margin: 7px;
}

.turbo_span {
    padding: 9px 9px;
    border-radius: 5px;
    margin: 5px;
}

.turbo_subspan {
    padding: 6px 6px;
    border-radius: 5px;
    margin-left: 12px;
    background: none repeat scroll 0 0 #ffffff;
}

.turbo_subspan.disabled_turbo {
    background: none repeat scroll 0 0 #d7d7d7;
}

.disabled_turbo {
    color: grey;
}

#turbo_die_info_table {
    margin-top: 6px;
}

.winner_name {
    font-size: 150%;
    font-weight: bold;
}

.die_container {
    background-size: 50px 50px;
    min-width: 50px;
    display: inline-block;
    vertical-align: middle;
    color: blue;
    margin: 4px;
    cursor: default;
}

.die_img {
    height: 49px;
    width: 49px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: auto;
    background-position: center center;
}

.die_img.card {
    height: 60px;
    background-size: 85%
}

.die_img.clickable_warrior {
  -webkit-mask-image: linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.5) 25%,
    black 75%,
    black 100%
  );
  mask-image: linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.5) 25%,
    black 75%,
    black 100%
  );
}

.die_container_dead .die_overlay {
    color: white;
}

.die_container_dead span {
    text-decoration: line-through;
}

.die_container_dead span.suit_red {
    text-decoration-color: white;
}

/* This matches any .die_container_dead element that immediately follows a
   .die_container_alive */
.die_container_alive + .die_container_dead {
    margin-left: 40px;
}

.recipe_greyed {
    background-color: #cccccc;
}

.recipe_inuse {
    background-color: #ffa500;
}

.recipe_irrelevant_for_initiative {
    color: #cccccc;
}

.recipe_irrelevant_for_initiative span.suit_black {
    color: #cccccc;
}

.recipe_irrelevant_for_initiative span.suit_red {
    color: #cccccc;
}

.die_overlay {
    position:relative;
    font-size: 21px;
    line-height: 25px;
    top: 13px;
}

/* add a special Firefox-specific adjustment to fix die value centration */
@supports (-moz-appearance:none) {
    .die_overlay {
        top: 15px;
    }
}

.card .die_overlay {
    line-height: 37px;
}

.die_number_player {
    color: black;
}

.die_number_opponent {
    color: black;
}

.die_recipe {
    position:relative;
    top:20px;
    color:black;
}

.die_recipe_player {
    position: relative;
    color: black;
    white-space: nowrap;
}

.die_recipe_opponent {
    position: relative;
    color: black;
    white-space: nowrap;
}

.title2 {
    font-size: 1.1em;
    font-weight: bold;
    padding: 0.2em;
}

/* border to indicate dice selected in attacks */

.die_border {
    width: 50px;
    margin: auto;
}

.selected .die_border {
    border: 2px solid red;
}

/* class for making the element focus outline invisible:
 * default is visible when this class is not present */
.hide_focus {
    outline: 0;
}

span.current_browser_only {
    padding-left: 20px;
    color: gray;
}

span.skill_title {
    font-weight: bold;
    line-height: 1.5;
}

span.skill_desc {
    border-bottom: 1px dotted #000000;
    text-decoration: none;
    cursor: default;
}

span.prefs_desc {
    border-bottom: 1px dotted #000000;
    text-decoration: none;
    cursor: default;
}

span.suit_black {
    color: black;
}

.die_container_dead span.suit_black {
    color: white;
}

span.suit_red {
    color: red;
}

span.info_icon {
    color: white;
    background: #000080;
    border-radius: 50%;
    padding: 1px;
    vertical-align: super;
    text-align: center;
    font-size: 0.6em;
    display: inline-block;
    width: 1em;
    cursor: default;
}

.unselected_player {
    border-bottom-right-radius: 1em;
}

.unselected_opponent {
    border-top-left-radius: 1em;
}

table.profileTable thead td {
    font-size: 2em;
    font-weight: bold;
    padding-top: 1em;
    padding-bottom: 1em;
}

table.prefsTable td.label {
    text-align: right;
    width: 50%;
    vertical-align: top;
}

table.prefsTable td.label_color {
    vertical-align: middle;
}

table.profileTable td.label {
    text-align: right;
    max-width: 400px;
    vertical-align: top;
    font-weight: bold;
    padding-right: 5px;
}

table.prefsTable td.value {
    text-align: left;
    width: 50%;
    vertical-align: top;
}

table.prefsTable textarea {
    width: 300px;
}

table.profileTable td.value,
table.profileTable td.missingValue {
    text-align: left;
    max-width: 400px;
    vertical-align: top;
    padding-left: 5px;
}

table.profileTable td.missingValue {
    font-style: italic;
}

table.profileTable td.partialValue {
    text-align: left;
    max-width: 200px;
    vertical-align: top;
}

table.profileTable td.emphasize{
    background-color: #ffcc66;
}

table.activePlayerList td.player,
table.activePlayerList th.player {
    text-align: right;
    padding-right: 10px;
    width: 50%;
}

table.activePlayerList td.player a {
    color: black;
}

table.activePlayerList td.idleness,
table.activePlayerList th.idleness {
    text-align: left;
    padding-left: 10px;
}

.pseudoLink {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.playerFlag {
    cursor: default;
    vertical-align: middle;
    margin: 0px 3px;
}

#newgame_create_table th,
#newgame_create_table td {
    vertical-align: top;
    padding: 0.2em 0.6em;
    width: 50%;
}

#newgame_create_table th {
    text-align: right;
}

#newgame_create_table td {
    text-align: left;
}

.gameDescInput {
    width: 250px;
}

.gameDescDisplay {
    font-style: italic;
    size: 0.8em;
}

.warning {
    color: red;
}

/* Lists (Overview, Game History, Tournaments) */
span.pre-caret {
    display: inline-block;
    margin-right: 0.4em;
}

div.listHolder {
    margin-bottom: 3em;
}

table.gameList a, table.tournamentList a {
    color: black;
}

table.gameList tfoot a, table.tournamentList tfoot a {
    color: blue;
}

table.gameList th, table.tournamentList th {
    background-color: #cccccc;
}

table.gameList tbody, table.tournamentList tbody
{
    border-top: 2px solid #cccccc;
    border-bottom: 2px solid #cccccc;
}

table.gameList tbody td:first-child,
table.gameList tbody th:first-child,
table.tournamentList tbody td:first-child,
table.tournamentList tbody th:first-child
{
    border-left: 2px solid #cccccc;
}

table.gameList tbody td:last-child,
table.gameList tbody th:last-child,
table.tournamentList tbody td:last-child,
table.tournamentList tbody th:last-child
{
    border-right: 2px solid #cccccc;
}

table.gameList tr.spacer td,
table.tournamentList tr.spacer td{
    border-left: none;
    border-right: none;
    border-top: 2px solid #cccccc;
    border-bottom: 2px solid #cccccc;
}

table.gameList thead:after,
table.gameList tfoot:before,
table.tournamentList thead:after,
table.tournamentList tfoot:before {
    line-height: 1em;
    content: "-";
    color: white; /* to hide text */
    display: block;
}

table.gameList input[type=text],
table.tournamentList input[type=text]{
    width: 70px;
}

table.gameList select,
table.tournamentList select{
    max-width: 120px;
}

#history_page table.gameList th,
#history_page table.gameList thead td,
#history_page table.gameList tfoot td {
    padding: 0.2em 0.4em;
}

#history_page table.gameList th {
    white-space: nowrap;
    cursor: default;
}

#history_page table.gameList tfoot th {
    cursor: default;
}

table.gameList span.sortButton,
table.gameList span.pageLink {
    cursor: pointer;
    margin: 0.2em;
    display: inline-block;
}

table.gameList img.calendar {
    vertical-align: middle;
    margin: 0.2em;
}

/* END: Game lists */

/* Forum */

div.forum,
div.forum div,
div.forum td {
    text-align: left;
    word-wrap: break-word;
}

div.forum .pseudoLink {
    color: black;
    cursor: pointer;
}

div.forum div.breadcrumb {
    font-size: 1.2em;
}

div.forum > .floatThead-container table {
    border-collapse: separate;
    border-spacing: 0em;
}

div.forum > table {
    width: 100%;
    max-width: 960px;
    border-collapse: separate;
    border-spacing: 0 0.5em;
    table-layout: fixed;
}

div.forum > .floatThead-container table td,
div.forum > table td {
    border: 2px solid #cccccc;
    vertical-align: top;
    padding: 0.2em 0.4em;
}

div.forum td.heading {
    background-color: #cccccc;
    vertical-align: middle;
}

/*
  This is, sadly, necessary to compensate for the dummy row in this table,
  which is, sadly, necessary to make it respect the cell widths when using
  table-layout: fixed, which is necessary to make word-wrap: break-word work.
*/
div.forum .posts .dummy td {
    margin: 0px;
    border: 0px;
    padding: 0px;
    height: 0px;
}

div.forum .mainBreadcrumb {
    font-size: 1.1em;
    font-weight: bold;
}

div.forum .boards .mainBreadcrumb {
    font-size: 1.2em;
    font-weight: bold;
}

div.forum .subHeader {
    margin: 0.2em 0 0.2em 1.2em;
}

div.forum .subHeader .linksBack {
    float: left;
}

div.forum .subHeader .linksWithin {
    float: right;
}

div.forum .subHeader .linksWithin a {
    color: black;
    text-decoration: underline;
    cursor: pointer;
}

div.forum td.notes {
    background-color: #cccccc;
    white-space: nowrap;
    /*
      If we showed the right border from the left cell and the left border from
      the right one, it would look like one double-thick monster border.
      So don't do that.
    */
    border-left: 0;
    width: 160px;
}

div.forum tr:first-child td.notes {
    text-align: center;
    vertical-align: middle;
}

div.forum td.attribution {
    background-color: #cccccc;
    width: 160px;
}

div.forum table.posts td.attribution {
    /* This is so we don't get the borders from both cells together */
    border-right: 0;
}

div.forum table.threads td.attribution {
    /* This is so we don't get the borders from both cells together */
    border-left: 0;
}

div.forum td.attribution .name {
    font-weight: bold;
}

div.forum td.attribution .postAnchor {
    color: white;
    text-decoration: none;
    margin-right: 0.4em;
}

div.forum .minor {
    font-size: 0.8em;
}

div.forum .new {
    text-align: center;
    color: black;
    background-color: white;
    font-weight: bold;
    width: 4em;
    margin: 0.4em auto 0.2em auto;
    border-radius: 0.5em;
}

div.forum td.body,
div.forum td.title {
    min-width: 600px;
}

div.forum td.body {
    padding-top: 0.4em;
}

div.forum td.body hr {
    color: #cccccc;
    border: 1px solid #cccccc;
    margin: 0.6em 0 0.1em 0;
}

div.forum td.body .postFooter {
    font-size: 0.8em;
    color: #777777;
}

div.forum .boards td.title {
    background-color: #dddddd;
}

div.forum td.title a,
div.forum td.attribution a {
    color: black;
}

div.forum td.deleted {
    color: #cccccc;
}

div.forum .threads tr.writePost {
    display: none;
}

div.forum tr.writePost td.attribution {
    background-color: #dddddd;
    font-size: 0.8em;
    text-align: left;
    vertical-align: top;
}

div.forum tr.writePost td.attribution .help {
    margin-left: 1em;
}

div.forum tr.writePost td.attribution .subHelp {
    margin-left: 2em;
}

div.forum tr.writePost input.title {
    width: 99%;
    display: block;
}

div.forum tr.writePost textarea,
div.forum tr td.editBody textarea {
    width: 99%;
    height: 16em;
    display: block;
}

/* Weirdly, text inputs and textareas default to using different fonts */
div.forum tr.writePost input[type=text],
div.forum tr.writePost textarea,
div.forum tr td.editBody textarea {
    font-family: sans-serif;
    font-size: 1em;
    margin-bottom: 0.4em;
}

div.forum tr.writePost td,
div.forum tr td.editBody {
    text-align: right;
}

div.forum td.markRead {
    text-align: left;
    border: 0;
}

div.forum div.splitLeft {
    display: inline-block;
    text-align: left;
    width: 60%;
}

div.forum div.splitRight {
    display: inline-block;
    text-align: right;
    width: 40%;
}

div.forum div.splitRight span.postTag {
    color: #e0e0e0;
    margin-right: 2em;
}

/* END: Forum*/

/* BB Code (OK technically also forum but chat too) */

.chatBold {
    font-weight: bold;
}

.chatItalic {
    font-style: italic;
}

.chatUnderlined {
    text-decoration: underline;
}

.chatStruckthrough {
    text-decoration: line-through;
}

.chatCode {
    font-family: monospace;
}

.chatQuote {
    background: rgba(0, 0, 0, .05);
    border: 1px solid grey;
    margin: 0.5em 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    padding-bottom: 0.2em;
    text-align: left;
}

/*
  This matches any br element that immediately follows a .chatQuote, in order
  to make the newline after a quotation optional.
*/
.chatQuote + br {
    display: none;
}

.chatQuotee {
    font-weight: bold;
    font-size: 0.7em;
    margin-bottom: 0.4em;
    text-align: left;
}

.chatSpoiler:not(.chatExposedSpoiler),
.chatSpoiler:not(.chatExposedSpoiler) .chatQuoteBody {
    color: black;
    background-color: black;
    cursor: default;
    pointer-events: auto;
}

/* make spoiler links not clickable until they are exposed */
.chatSpoiler:not(.chatExposedSpoiler) a {
    color: black;
    background-color: black;
    cursor: default;
    pointer-events: none;
}

.chatExposedSpoiler,
.chatExposedSpoiler a,
.chatExposedSpoiler .chatQuoteBody {
    color: black;
    background-color: #eeeeee;
    cursor: default;
    pointer-events: auto;
}

/* END: BB Code */

#buttons_page div.setBox {
    display: inline-block;
    width: 250px;
    margin: 10px;
    padding: 10px;
    vertical-align: top;
}

#buttons_page div.setBox a.buttonSetLink {
    font-size: 1.2em;
}

#buttons_page div.singleButton {
    width: 800px;
    margin: auto;
}

#buttons_page div.returnLink {
    margin: 50px;
}

#buttons_page div.buttonBox {
    width: 250px;
    margin: 10px;
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
}

#buttons_page .unimplemented {
    background: #dddddd;
}

#buttons_page div.singleButton div.buttonBox {
    width: 300px;
}

#buttons_page div.secondaryDetails {
    width: 350px;
    margin: 20px;
    display: inline-block;
    vertical-align: middle;
}

#buttons_page p.flavorText {
    font-style: italic;
}

#buttons_page p.tags {
    margin-top: 40px;
}

#buttons_page p.tournamentLegal {
    font-weight: bold;
}

#buttons_page div.singleButton div.buttonName {
    font-weight: bold;
    font-size: 2em;
}

#buttons_page table.skills th {
    white-space: nowrap;
    text-align: right;
}

#buttons_page table.skills td {
    text-align: left;
}

#buttons_page table.skills th, #buttons_page table.skills td {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: top;
}

#buttons_page table.skills p {
    margin-top: 0;
}

#buttons_page table.skills p.interaction {
    font-style: italic;
}

#zoom {
    background-color: green;
}

/* HELP PAGES */
.help {
    text-align: left;
}

#skills_page .directory {
    margin-bottom: 30px;
}

#skills_page .directory div.item {
    display: inline-block;
    width: 120px;
    margin: 10px;
    padding: 10px;
    vertical-align: top;
}

#skills_page .directory .item .symbol {
    font-size: 3em;
    font-weight: bold;
}

#skills_page .directory .item .symbol a {
    color: black;
    text-decoration: none;
}

#skills_page .directory .item a.link {
    font-size: 1.2em;
}

#skills_page hr {
    margin-top: 30px;
    margin-bottom: 30px;
}

#skills_page .descriptions {
    width: 800px;
    margin: auto;
}

#skills_page table.skills th {
    white-space: nowrap;
    text-align: right;
}

#skills_page table.skills td {
    text-align: left;
}

#skills_page table.skills th, #skills_page table.skills td {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: top;
}

#skills_page table.skills p {
    margin-top: 0;
    margin-bottom: 1em;
}

#skills_page table.skills p.interaction {
    font-style: italic;
}