﻿@charset "utf-8";
/* Baseball Dream v1.0.0 */

/* General Used
 * ------------------------------------------------------------------------------------------- */
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; background:#111b0f;}
select { background:#fff; color:#333; border:1px solid #999; font-size:12px; }
.nowrap { white-space:nowrap; }
.container { min-width:500px; max-width:500px; min-height: 100vh; background:#000; margin:0 auto; display:block}
.pageTitle { font-size:16px; font-weight:bold; color:#ffffff; text-align:center; padding-top:50px}
.alignRight {text-align:right}
.alignCenter {text-align:center}
.alignLeft {text-align:left}
.homeplate_overall {width:30px; height:30px; background:url(../default/home_plate30.png ); color:#632523; text-align:center; line-height:1.5em; text-decoration:inherit; font-weight:bold}
.national_flag {width:30px; height:20px}
/* Every flag on the site gets the social page's rounded corner. The attribute
   selector is there because most flags are a bare img with no wrapper — this
   reaches all of them without editing the views one at a time. */
.national_flag img,
img[src*="/nation_flags/"] { border-radius:3px; }
.top_blocker {width:500px; height:40px; background:#000; text-align:center}
.bottom_blocker {width:500px; height:155px; background:#000; text-align:center}
.general_title_top { height: 30px; font-size:16px; display:inline-block; font-weight:bold; color:#FFF; text-align:center; padding: 45px 0px 5px 0px; background:#000; width:500px; line-height:30px }
.general_title_mid { height: 30px; font-size:16px; display:inline-block; font-weight:bold; color:#FFF; text-align:center; padding: 5px 0px 5px 0px; background:#000; width:500px; line-height:30px }
.general_title_bot { height: 30px; font-size:16px; display:inline-block; font-weight:bold; color:#FFF; text-align:center; padding: 5px 0px 5px 0px; background:#000; width:500px; line-height:30px }
.close_btn {color:#666; font-size:10px; text-align:right; display:inline-block; position:relative; right:5px; float:right}
.close_btn a {color:#999; font-size:10px; text-decoration:none}
.close_btn a:hover {color:#FFF; font-size:10px; text-decoration:none}
.round { border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; position:relative; behavior: url(../PIE.htc);}
.hide { display: none;}
.show { display: block;}
.overflow {overflow:hidden}
.floatLeft { float:left;}
.floatRight { float:right;}
.pages { text-align:center; padding-top:10px; color:#FFF}
.pages2 { text-align:center; padding:0px 0px 0px 0px; color:#FFF; vertical-align:baseline}
.pages a, .pages span { margin:0px 3px;}


/* Font Color & Size
 * ------------------------------------------------------------------------------------------- */
.mainRed {color:#953735}
.mainRedBold {color:#953735; font-weight:bold;}
.blue { color:#0066FF;}
.eqblue {color:#0055b5; font-weight:bold; font-style:italic}
.linkblue {color:#6a9cdb;}
.yellow {color:#FFcc05;}
.orange {color:#FF9933;}
.white {color:#FFFFFF;}
.strong { font-weight:bold;}
a.orange { color:#6a9cdb; text-decoration:none;} /*fd8500*/
a.orange:hover { color:#8ec0ff; text-decoration:none;}
a.orange:visited { color:#6a9cdb; text-decoration:none;} /*fd8500*/
.deeporange { color:#ff0000;}
a.deeporange { color:#ff0000;}
a.deeporange:hover { color:#ff0000;}
.grayThin { color:#666; font-weight: lighter;}
.gray { color:#666;}
a.gray { color:#666;}
a.gray:hover { color:#666;}
.gray a { color:#666;}
.deepgray { color:#222;}
a.deepgray { color:#222;}
a.deepgray:hover { color:#222;}
.lightgray {color: #999;}
.deepgray a {color:#222;}
.green {color:#6F0;}
.red {color:#F00;}
.PROcolor {color:#984807;}
.AAAcolor {color:#31859c;}
.AAcolor {color:#00b050;}
.Acolor {color:#eab200;}

.dis {font-size:11px; text-decoration:line-through}
.bg_black{background-color:#000 !important; color:#000;}

.font6 {font-size:6px}
.font8 {font-size:8px}
.font10 {font-size:10px}
.font12 {font-size:12px}
.font14 {font-size:14px}
.font16 {font-size:16px}
.font20 {font-size:20px}
.font30 {font-size:30px}
.font42 {font-size:42px}

.bold {font-weight:bold}
.stroke-text{ -webkit-text-stroke:5px black; -webkit-text-fill-color:transparent;}

/* Bars
 * ------------------------------------------------------------------------------------------- */
.redBar {
	background-color: #ff5c5c;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#ff5c5c), to(#a90d04));
	background-image: -moz-linear-gradient(top, #ff5c5c, #a90d04);
	background-image: -ms-linear-gradient(top, #ff5c5c, #a90d04);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5c5c), color-stop(100%, #a90d04));
	background-image: -webkit-linear-gradient(top, #ff5c5c, #a90d04);
	background-image: -o-linear-gradient(top, #ff5c5c, #a90d04);
	background-image: linear-gradient(top, #ff5c5c, #a90d04);
	-pie-background: linear-gradient(top, #ff5c5c, #a90d04);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5c5c', endColorstr='#a90d04', GradientType=0);
}

.orangeBar {
	background-color: #ffbb00;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#ffbb00), to(#fb7600));
	background-image: -moz-linear-gradient(top, #ffbb00, #fb7600);
	background-image: -ms-linear-gradient(top, #ffbb00, #fb7600);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffbb00), color-stop(100%, #fb7600));
	background-image: -webkit-linear-gradient(top, #ffbb00, #fb7600);
	background-image: -o-linear-gradient(top, #ffbb00, #fb7600);
	background-image: linear-gradient(top, #ffbb00, #fb7600);
	-pie-background: linear-gradient(top, #ffbb00, #fb7600);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbb00', endColorstr='#fb7600', GradientType=0);
}

.yellowBar {
	background-color: #fff65e;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#fff65e), to(#e9a002));
	background-image: -moz-linear-gradient(top, #fff65e, #e9a002);
	background-image: -ms-linear-gradient(top, #fff65e, #e9a002);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff65e), color-stop(100%, #e9a002));
	background-image: -webkit-linear-gradient(top, #fff65e, #e9a002);
	background-image: -o-linear-gradient(top, #fff65e, #e9a002);
	background-image: linear-gradient(top, #fff65e, #e9a002);
	-pie-background: linear-gradient(top, #fff65e, #e9a002);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff65e', endColorstr='#e9a002', GradientType=0);
}
.greenBar {
  background-color: #00ff30;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#00ff30), to(#01a41c));
  background-image: -moz-linear-gradient(top, #00ff30, #01a41c);
  background-image: -ms-linear-gradient(top, #00ff30, #01a41c);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00ff30), color-stop(100%, #01a41c));
  background-image: -webkit-linear-gradient(top, #00ff30, #01a41c);
  background-image: -o-linear-gradient(top, #00ff30, #01a41c);
  background-image: linear-gradient(top, #00ff30, #01a41c);
  -pie-background: linear-gradient(top, #00ff30, #01a41c);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff30', endColorstr='#01a41c', GradientType=0);
}

.blueBar {
  background-color:  #3333ca ;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#3333ca), to(#33339a));
  background-image: -moz-linear-gradient(top, #3333ca, #33339a);
  background-image: -ms-linear-gradient(top, #3333ca, #33339a);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3333ca), color-stop(100%, #33339a));
  background-image: -webkit-linear-gradient(top, #3333ca, #33339a);
  background-image: -o-linear-gradient(top, #3333ca, #33339a);
  background-image: linear-gradient(top, #3333ca, #33339a);
  -pie-background: linear-gradient(top, #3333ca, #33339a);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3333ca', endColorstr='#33339a', GradientType=0);
}
.whiteBar {
  background-color: #ffffff ;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#CCCCCC));
  background-image: -moz-linear-gradient(top, #ffffff, #CCCCCC);
  background-image: -ms-linear-gradient(top, #ffffff, #CCCCCC);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #CCCCCC));
  background-image: -webkit-linear-gradient(top, #ffffff, #CCCCCC);
  background-image: -o-linear-gradient(top, #ffffff, #CCCCCC);
  background-image: linear-gradient(top, #ffffff, #CCCCCC);
  -pie-background: linear-gradient(top, #ffffff, #CCCCCC);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#CCCCCC', GradientType=0);
}

.grayBar {
  background-color: #333333 ;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#666666), to(#333333));
  background-image: -moz-linear-gradient(top, #666666, #333333);
  background-image: -ms-linear-gradient(top, #666666, #333333);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666666), color-stop(100%, #333333));
  background-image: -webkit-linear-gradient(top, #666666, #333333);
  background-image: -o-linear-gradient(top, #666666, #333333);
  background-image: linear-gradient(top, #666666, #333333);
  -pie-background: linear-gradient(top, #666666, #333333);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333', GradientType=0);
}


/* Buttons
 * ------------------------------------------------------------------------------------------- */
.btn {
  cursor: pointer;
  display:inline-block;
  background-color: #e0e0e0;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e0e0e0));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e0e0e0);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e0e0e0);
  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e0e0e0);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e0e0e0);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #e0e0e0);
  -pie-background: linear-gradient(#ffffff, #ffffff 25%, #e0e0e0);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e0e0e0', GradientType=0);
  padding: 5px 14px 6px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #000;
  font-size: 13px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-transition: 0.1s linear all;
  -moz-transition: 0.1s linear all;
  -ms-transition: 0.1s linear all;
  -o-transition: 0.1s linear all;
  transition: 0.1s linear all;
  /*behavior: url(../PIE.htc);*/
}
a.btn {
  text-decoration: none;
}
.btn:hover {
  background-position: 0 -15px;
  color: #333;
  text-decoration: none;
}
.btn:focus {
  outline: 0px none;
}
.btn:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.btn.large {
  font-size: 15px;
  line-height: normal;
  padding: 9px 14px 9px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.btn.small {
  padding: 3px 7px 3px;
  font-size: 11px;
}
/* A button whose label changes length keeps its box. "Get CPU Team Offer"
   becomes "Refresh CPU Team Offer x 50" with an icon, and without a fixed
   width the longer one pushed itself onto its own line and moved everything
   after it. The text wraps inside instead. */
.btn.fixedw {
  width: 130px;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  vertical-align: middle;
}
/* Buttons standing next to each other are never allowed to touch. Site-wide,
   so a row of actions does not read as one wide button. Adjacent-sibling, so a
   lone button keeps its position and nothing shifts. */
.btn + .btn { margin-left: 4px; }
.btn.radius {
  font-size: 10px;
  line-height: normal;
  padding: 9px 14px 9px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}
/* Normalize <button class="btn"> to match <a class="btn"> visually */
button.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  vertical-align: middle;
}
.btn.blue {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  -pie-background: linear-gradient(top, #049cdb, #0064cd);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.primary {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  -pie-background: linear-gradient(top, #049cdb, #0064cd);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn.success {
  color: #000000;
  background-color: #fd8500;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fdc400), to(#fd8500));
  background-image: -moz-linear-gradient(top, #fdc400, #fd8500);
  background-image: -ms-linear-gradient(top, #fdc400, #fd8500);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdc400), color-stop(100%, #fd8500));
  background-image: -webkit-linear-gradient(top, #fdc400, #fd8500);
  background-image: -o-linear-gradient(top, #fdc400, #fd8500);
  background-image: linear-gradient(top, #fdc400, #fd8500);
  -pie-background: linear-gradient(top, #fdc400, #fd8500);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdc400', endColorstr='#fd8500', GradientType=0);
  /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
  border-color: #b97e01 #b97e01 #b97e01;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn.danger{
  color: #ffffff;
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  -pie-background: linear-gradient(top, #ee5f5b, #c43c35);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn.greenlight{
  color: #ffffff;
  background-color: #3aa605;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#48d802), to(#3aa605));
  background-image: -moz-linear-gradient(top, #48d802, #3aa605);
  background-image: -ms-linear-gradient(top, #48d802, #3aa605);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #48d802), color-stop(100%, #3aa605));
  background-image: -webkit-linear-gradient(top, #48d802, #3aa605);
  background-image: -o-linear-gradient(top, #48d802, #3aa605);
  background-image: linear-gradient(top, #48d802, #3aa605);
  -pie-background: linear-gradient(top, #48d802, #3aa605);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#48d802', endColorstr='#3aa605', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #3aa605 #3aa605 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn.error {
  color: #ffffff;
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  -pie-background: linear-gradient(top, #ee5f5b, #c43c35);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.orange {
  color: #000000;
  background-color: #fd8500;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fdc400), to(#fd8500));
  background-image: -moz-linear-gradient(top, #fdc400, #fd8500);
  background-image: -ms-linear-gradient(top, #fdc400, #fd8500);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdc400), color-stop(100%, #fd8500));
  background-image: -webkit-linear-gradient(top, #fdc400, #fd8500);
  background-image: -o-linear-gradient(top, #fdc400, #fd8500);
  background-image: linear-gradient(top, #fdc400, #fd8500);
  -pie-background: linear-gradient(top, #fdc400, #fd8500);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdc400', endColorstr='#fd8500', GradientType=0);
  /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
  border-color: #b97e01 #b97e01 #b97e01;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.info {
  background-color: #339bb9;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  -pie-background: linear-gradient(top, #5bc0de, #339bb9);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #339bb9 #339bb9 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.grass {
  color: #ffffff;
  background-color: #3f4e20;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5a6f2e), to(#3f4e20));
  background-image: -moz-linear-gradient(top, #5a6f2e, #3f4e20);
  background-image: -ms-linear-gradient(top, #5a6f2e, #3f4e20);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a6f2e), color-stop(100%, #3f4e20));
  background-image: -webkit-linear-gradient(top, #5a6f2e, #3f4e20);
  background-image: -o-linear-gradient(top, #5a6f2e, #3f4e20);
  background-image: linear-gradient(top, #5a6f2e, #3f4e20);
  -pie-background: linear-gradient(top, #5a6f2e, #3f4e20);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a6f2e', endColorstr='#3f4e20', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #3f4e20 #3f4e20 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.baseline {
  color: #ffffff;
  background-color: #953735;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#be4b48), to(#953735));
  background-image: -moz-linear-gradient(top, #be4b48, #953735);
  background-image: -ms-linear-gradient(top, #be4b48, #953735);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #be4b48), color-stop(100%, #953735));
  background-image: -webkit-linear-gradient(top, #be4b48, #953735);
  background-image: -o-linear-gradient(top, #be4b48, #953735);
  background-image: linear-gradient(top, #be4b48, #953735);
  -pie-background: linear-gradient(top, #be4b48, #953735);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#be4b48', endColorstr='#953735', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #953735 #953735 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn.perfect {
  color: #ffffff;
  background-color: #c0504d;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#d66360), to(#c0504d));
  background-image: -moz-linear-gradient(top, #d66360, #c0504d);
  background-image: -ms-linear-gradient(top, #d66360, #c0504d);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d66360), color-stop(100%, #c0504d));
  background-image: -webkit-linear-gradient(top, #d66360, #c0504d);
  background-image: -o-linear-gradient(top, #d66360, #c0504d);
  background-image: linear-gradient(top, #d66360, #c0504d);
  -pie-background: linear-gradient(top, #d66360, #c0504d);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d66360', endColorstr='#c0504d', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border: 3px solid #ddd9c3;
  border-color: #953735 #953735 #953735;
}

.btn.blk {
  color: #ffcc00;
  background-color: #111;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#333), to(#000000));
  background-image: -moz-linear-gradient(top, #333, #000);
  background-image: -ms-linear-gradient(top, #333, #000);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #000));
  background-image: -webkit-linear-gradient(top, #333, #000);
  background-image: -o-linear-gradient(top, #333, #000);
  background-image: linear-gradient(top, #333, #000);
  -pie-background: linear-gradient(top, #333, #000);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d66360', endColorstr='#000', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border: 3px solid #ddd9c3;
  border-color: #222 #222 #222;
}

.btn.floor {
  color: #000000;
  background-color: #ddd9c3;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#c4bd97), to(#ddd9c3));
  background-image: -moz-linear-gradient(top, #c4bd97, #ddd9c3);
  background-image: -ms-linear-gradient(top, #c4bd97, #ddd9c3);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c4bd97), color-stop(100%, #ddd9c3));
  background-image: -webkit-linear-gradient(top, #c4bd97, #ddd9c3);
  background-image: -o-linear-gradient(top, #c4bd97, #ddd9c3);
  background-image: linear-gradient(top, #c4bd97, #ddd9c3);
  -pie-background: linear-gradient(top, #c4bd97, #ddd9c3);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4bd97', endColorstr='#ddd9c3', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border: 3px solid #ddd9c3;
  border-color: #953735 #953735 #953735;
}

.btn.midori {
  color: #FFFFFF;
  background-color: #59de59;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#46c446), to(#59de59));
  background-image: -moz-linear-gradient(top, #46c446, #59de59);
  background-image: -ms-linear-gradient(top, #46c446, #59de59);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #46c446), color-stop(100%, #59de59));
  background-image: -webkit-linear-gradient(top, #46c446, #59de59);
  background-image: -o-linear-gradient(top, #46c446, #59de59);
  background-image: linear-gradient(top, #46c446, #59de59);
  -pie-background: linear-gradient(top, #46c446, #59de59);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#46c446', endColorstr='#59de59', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border: 3px solid #59de59;
  border-color: #3f4e20 #3f4e20 #3f4e20;
}

.btn.facebook {
  color: #ffffff;
  background-color: #4267b2;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#4a73c7), to(#4267b2));
  background-image: -moz-linear-gradient(top, #4a73c7, #4267b2);
  background-image: -ms-linear-gradient(top, #4a73c7, #4267b2);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a73c7), color-stop(100%, #4267b2));
  background-image: -webkit-linear-gradient(top, #4a73c7, #4267b2);
  background-image: -o-linear-gradient(top, #4a73c7, #4267b2);
  background-image: linear-gradient(top, #4a73c7, #4267b2);
  -pie-background: linear-gradient(top, #4a73c7, #4267b2);/*IE PIE*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a73c7', endColorstr='#953735', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #4267b2 #4267b2 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}





/* Main Pages
 * ------------------------------------------------------------------------------------------- */

/* Index Page
 * ------------------------------------------------------------------------------------------- */
.welcome { background:#333; width:500px; height:1067px; background:url(../default/welcomebg.jpg) 0 0 repeat; position:relative; z-index:1;}
.welcome .indexlogo { width:300px; height:160px; position: absolute; top:20px; left:60px;}
.welcome .welcomeWord { border:#999 0px solid; width:320px; height:280px; background:rgba(90%,90%,90%,0.1) ; position:absolute; top:360px; left:80px; padding:10px; line-height:1.6em; color:#ffcc00; font-size:23px; text-shadow: 2px 2px 2px #000; text-align:center}
.welcome .welcomeWord2 { border:#999 0px solid; width:320px; height:450px; background:rgba(90%,90%,90%,0.2) ; position:absolute; top:260px; left:80px; padding:10px; line-height:1.6em; color:#ffcc00; font-size:23px; text-shadow: 1px 1px 1px #000; text-align:center}
.logintable {clear: both; width: 100%; text-align:center;}
.logintable td {clear: both; width: 100%; text-align:center; color:#FFF; font-size:14px; padding:5px 5px 5px 5px}
.logintable input { width:150px; box-sizing:border-box; }
.pw-wrap { position:relative; display:inline-block; width:150px; }
.pw-wrap input { width:100% !important; padding-right:28px !important; box-sizing:border-box !important; }
.pw-wrap .pw-toggle { position:absolute; right:5px; top:50%; transform:translateY(-50%); color:#999; cursor:pointer; text-decoration:none; line-height:1; display:flex; align-items:center; background:none; border:none; padding:0; }
.loginBtnReg a, .loginBtnLogin a, .loginBtnFacebook a, .loginBtnGoogle a { width:120px; text-align:center;}
.loginBtnReg2 a, .loginBtnLogin2 a, .loginBtnFacebook2 a, .loginBtnGoogle2 a { width:280px; text-align:center;}
.forgetpass a {text-decoration: none; clear: both; width: 100%; text-align:center; color:#999; font-size:12px; padding:5px 5px 5px 5px}
.forgetpass a:hover {color:#FFF}
.forgetid a {text-decoration: none; clear: both; width: 100%; text-align:center; color:#999; font-size:12px; padding:5px 5px 5px 5px}
.forgetid a:hover {color:#FFF}
.termsofuse a {text-decoration: none; clear: both; width: 100%; text-align:center; color:#666; font-size:12px; padding:5px 5px 5px 5px}
.termsofuse a:hover {color:#999}
.privacypolicy a {text-decoration: none; clear: both; width: 100%; text-align:center; color:#666; font-size:12px; padding:5px 5px 5px 5px} 
.privacypolicy a:hover {color:#999}

/* Header
 * ------------------------------------------------------------------------------------------- */
.header { background:#20331d; width:500px; height:40px; position:fixed; z-index:2; top:0px}
.hamburgermenuicon {width:30px; height:30px; background:url(../default/hamburgermenuicon.png); position: absolute; top:5px; left:20px;}
.hamburgermenu { list-style-type:none; text-align:left; font-size:15px; line-height: 1.6em; }
.hamburgermenu li {list-style-type:none;*display:inline; text-decoration:none;}
.hamburgermenu li a {color:#999; ; text-decoration:none;line-height: 1.6em;}
.hamburgermenu li a:hover {color:#FFF; display:block; line-height: 1.6em; font-weight: bold; }
.hamburgermenu li .over {background:#20331d; width:250px; position:absolute; top:30px; display:none; border:none;}
.hamburgermenu li:hover .over {  display:block; z-index:101; background:#20331d; padding: 10px 30px;}
.hamburgermenu li ol li {float:none; line-height:1.5em; background:#20331d}

.gametitle { color:#FFF; font-weight:bold; font-size:20px; text-align:center; line-height:40px}
.calendaricon {width:30px; height:30px; background:url(../default/calendar.png); position: absolute; top:5px; left:400px; color:#FF0000;}
.userprofileicon {width:30px; height:30px; background:url(../default/profile30.png); position: absolute; top:5px; left:450px; color:#FF0000;}
.notification_dot a {color:#FF0000; text-align:right}
.notification_dot a:visited {color:#FF0000; text-align:right}
.notification_dot a:hover {color:#FF0000; text-align:right}

/* Theme Title
 * ------------------------------------------------------------------------------------------- */
.themetitleTopBlk {width:500px; height:40px; background:#000; text-align:center}
.themetitle { background:#000; padding:0px 0px; position:fixed; top:40px; z-index:1}
.themetitle li.back { float:left; display:inline; width:40px;}
.themetitle li.w_back { float:left; display:inline; width:440px; text-align:center; font-weight:bold; padding-right: 20px; font-size: 16px; color: #FFF; line-height: 40px;}
.themetitle li { float:left; display:inline; width:500px; text-align:center; font-weight:bold; color: #FFF; line-height: 40px;}
.themetitle li a { padding:10px; color:#666; text-decoration:none; font-size:18px; display:block; }
.themetitle li a:hover { background:#111; color:#fff; }
.themetitle li.navOn a { background:#111; color:#fff; font-weight:bold; cursor:default;text-decoration:none;}

/* Mode Menu 4
 * ------------------------------------------------------------------------------------------- */
.modemenuTopBlk {width:500px; height:40px; background:#000; text-align:center}
.modemenu { background:#000; padding:0px 0px; position:fixed; top:40px; z-index:1}
.modemenu li.back { float:left; display:inline; width:40px;}
.modemenu li.w_back { float:left; display:inline; width:115px; text-align:center;}
.modemenu li { float:left; display:inline; width:125px; text-align:center;}
.modemenu li a { padding:10px; color:#666; text-decoration:none; font-size:18px; display:block; }
.modemenu li a:hover { background:#111; color:#fff; }
.modemenu li.navOn a { background:#111; color:#fff; font-weight:bold; cursor:default;text-decoration:none;}


/* Sub Menu 3
 * ------------------------------------------------------------------------------------------- */
.submenuTopBlk {width:500px; height:40px; background:#000; text-align:center}
.submenu {width:500px; height:40px; background:#000; padding:0px 0px;}
.submenu li.back { float:left; display:inline; width:40px;}
.submenu li.w_back { float:left; display:inline; width:153px; text-align:center;}
.submenu li { float:left; display:inline; width:166px; text-align:center;}
.submenu li a { padding:10px; background:#000; color:#666; text-decoration:none; font-size:14px; display:block; }
.submenu li a:hover { background:#000; color:#fff; }
.submenu li.navOn a { background:#111; color:#fff; font-weight:bold; cursor:default;text-decoration:none;}

/* General Menu
 * ------------------------------------------------------------------------------------------- */
.genmenuTopBlk {width:500px; height:40px; background:#000; text-align:center}
.genmenu {width:500px; height:auto; background:#000; margin-top:0px; display:inline-block;}
.genmenu li.back { float:left; display:inline; width:40px;}
.genmenu li { float:left; display:inline; text-align:center; border-right:#222 1px solid}
.genmenu li a { padding:5px 5px 5px 5px; background:#000; color:#666; text-decoration:none; font-size:14px; display:block; }
.genmenu li a:hover { background:#000; color:#fff; }
.genmenu li.navOn a { background:#000; color:#fff; font-weight:bold; cursor:default; text-decoration:none;}

/* Semi Menu
 * ------------------------------------------------------------------------------------------- */
.semimenuTopBlk {width:500px; height:40px; background:#000; text-align:center}
.semimenu {width:500px; height:auto; background:#000; margin-top:0px; display:inline-block;}
.semimenu li.back { float:left; display:inline; width:40px;}
.semimenu li { float:left; display:inline; text-align:center; border-right:#222 0px solid}
.semimenu li a { padding:5px 10px 5px 5px; background:#000; color:#333; text-decoration:none; font-size:14px; display:block; }
.semimenu li a:hover { background:#111; color:#fff; }
.semimenu li.navOn a { background:#000; color:#fff; font-weight:bold; cursor:default; text-decoration:none;}


/* Swith Menu 2
 * ------------------------------------------------------------------------------------------- */
.switchmenuTopBlk {width:500px; height:40px; background:#000; text-align:center}
.switchmenu {width:500px; height:30px; background:#000; padding:5px 0px; line-height: 30px;}
.switchmenu li.back { float:left; display:inline; width:40px;}
.switchmenu li.w_back { float:left; display:inline; width:230px; text-align:center;}
.switchmenu li { float:left; display:inline; width:250px; text-align:center;}
.switchmenu li a { padding:10px; color:#666; text-decoration:none; font-size:16px; display:block; }
.switchmenu li a:hover { background:#333; color:#fff; }
.switchmenu li.navOn a { background:#000; color:#fff; font-weight:bold; cursor:default;text-decoration:none;}
.switchmenu a:hover li { background:#222; color:#fff; }

/* Triple Menu 3
 * ------------------------------------------------------------------------------------------- */
 .triplemenuTopBlk {width:500px; height:40px; background:#000; text-align:center}
 .triplemenu { width:500px; height:40px; background:#000; padding:0px 0px;}
 .triplemenu li.back { float:left; display:inline-block; width:40px; height: 40px;}
 .triplemenu li.w_back { float:left; display:inline; width:153px; text-align:center;}
 .triplemenu li { float:left; display:inline; width:163px; text-align:center;}
 .triplemenu li a { padding:10px; color:#666; text-decoration:none; font-size:16px; display:block; }
 .triplemenu li a:hover { background:#111; color:#fff; }
 .triplemenu li.navOn a { background:#000; color:#fff; font-weight:bold; cursor:default;text-decoration:none;}

/* Quater Menu 4
 * ------------------------------------------------------------------------------------------- */
.quatermenuTopBlk {width:500px; height:40px; background:#000; text-align:center}
.quatermenu { width:500px; background:#000; padding:0px 0px;}
.quatermenu li.back { float:left; display:inline; width:40px;}
.quatermenu li.w_back { float:left; display:inline; width:115px; text-align:center;}
.quatermenu li { float:left; display:inline; width:125px; text-align:center;}
.quatermenu li a { padding:10px; color:#666; text-decoration:none; font-size:16px; display:block; }
.quatermenu li a:hover { background:#111; color:#fff; }
.quatermenu li.navOn a { background:#111; color:#fff; font-weight:bold; cursor:default;text-decoration:none;}

/* Fixed Menu
 * ------------------------------------------------------------------------------------------- */
.fixed_menu { width:500px; height:65px; background:rgba(0,0,0,0.8);; position: fixed; bottom:50px; }
.fixed_menu_btn {float:left; padding:5px 0px 5px 10px}



/* Calendar
 * ------------------------------------------------------------------------------------------- */
.calendar_header_frame  {width:500px; height:200px; background:#000; display:inline-block}
.calendar_box {width:130px; height:150px; float:left; margin:5px 30px 0px 30px;display:inline-block}
.calendar_season {width:130px; background:#558ed5; color:#000; text-align:center; font-size:16px; font-weight:bold; padding: 5px 5px;}
.calendar_day {width:130px; color:#FFF; text-align:center; font-size:32px; font-weight:bold; padding:5px 5px;}
.calendar_desc {width:130px; color:#666; text-align:center; font-size:14px; padding:5px 5px;}
.calendar_server {width:130px; color:#fff; text-align:center; font-size:12px; padding:5px 5px;}

.dailylogin_frame {width:500px; height:700px; background:#000; display:inline-block}
.dailylogin_box {width:80px; height:60px; border:#222 1px solid; float:left; margin:5px 0px 5px 15px;}
.dailylogin_block { position:relative; display:inline-block;}
.dailylogin_item_pic {position:absolute; top:-7px; left:20px; width:50px; color:#999}
.dailylogin_chk {position:absolute; top:-15px; left:0px; width:80px; height:60px; z-index:1}
.dailylogin_day {position:absolute; top:-15px; left:0px; background:#222; width:18px; color:#999; font-size:12px; font-style:italic;}
.dailylogin_num { position:absolute; top:31px; left:45px; width:30px; color:#ffcc00; font-size:12px; text-align:right; font-style:italic; font-weight:bold}

.dailylogin_streak_box {width:300px; height:150px; float:left; margin-top:5px; display:inline-block}
.dailylogin_streak_title {width:290px; text-align:center; color:#FFcc00; font-size:20px; font-style:italic; font-weight:bold}
.dailylogin_streak_block { position:relative; display:inline-block;width:300px}
.dailylogin_streak_item_pic {width:75px; height:75px; margin:10px auto}
.dailylogin_streak_num { position:absolute; top:90px; left:190px; width:30px; font-size:16px; color:#ffcc00; text-align:center; font-style:italic; font-weight:bold}
.dailylogin_streak_sub {position:absolute; top:40px; left:50px; width:50px; color:#999; font-size:14px; text-align:center}
.dailylogin_streak_box .percentTitle { display:inline-block; width:55px; color:#666; font-size:12px}
.dailylogin_streak_box .progressBar { display:inline-block; width:230px; margin:0px; background:#111; font-size:12px; line-height:1.0em }
.dailylogin_streak_box .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px; overflow:visible }


/* Sign Up Page
 * ------------------------------------------------------------------------------------------- */
.signupbox {width:300px; padding:70px 0px 0px 120px}
.signupsection {width:500px; height:1067px; color:#6a9cdb; background:#000; font-size:16px; line-height:2.1em;}
.signupsection a {color:#c0504d; text-decoration:none }
.signupBtn a { width:150px; text-align:center;}


/* Create Player Page
 * ------------------------------------------------------------------------------------------- */
.create_player_sec {width:500px; height:auto;  min-height: 0;overflow: visible; background:#000; color:#333; margin-top:0; line-height:1.3em}
.create_player_choose_box {float: left; width: 214px; height: 214px; margin: 5px; color:#6a9cdb; font-size: 16px; border:#222 3px solid; border-radius:3px; padding: 10px;}
.create_player_choose_box a {text-decoration: none; color: #6a9cdb;  line-height: 1.4em;}
.create_player_choose_box a:hover {text-decoration: none; color: #ffcc00;}
.create_player_choose_box img { max-height: 130px; width: auto; display: inline-block !important; }
.create_demand {width: 460px; height: auto; color:#666; margin:20px; font-size: 14px; text-align: right;}
.create_demand td {height: 30px; padding:5px; text-align: right;}
.create_demand td.left {text-align: left;}
.create_demand th { color:#666; font-size:11px; padding:5px; }
.create_player_box {float: left; width:494px; height: auto; padding: 8px; overflow: hidden; box-sizing: border-box; background:#111; margin-bottom: 5px; color:#999; font-size: 12px; border:#222 3px solid; border-radius:3px}
.create_player_box img {float: left; margin:10px 20px; width:50px; height: 50px;}
.create_player_box .selectBtn {float: right; margin:10px 30px ; width:50px; height: 50px; line-height: 50px;}
.create_player_box.isSelected { border-color: #3ba3ff; }
.create_player_info_box {width: 430px; margin-left: 70px; line-height: 2.1em; color:#6a9cdb;}
.create_player_info_box input { background:#fff; color:#333; border:1px solid #999; padding:2px 4px; font-size:12px; }
.create_player_flash { color:#fff; background:#222; border:1px solid #555; padding:6px 10px; text-align:center; margin:6px 10px; font-size:12px; }
.create_step_nav { clear:both; text-align:center; margin:14px 0; }
.selectnational { background:#fff; color:#333; border:1px solid #999; font-size:12px; }
.create_player_info_box select { background:#fff; color:#333; border:1px solid #999; font-size:12px; }
.createbox {width:400px; padding-left:50px}
.cityRow { margin-top: 8px; }
.cityTools { margin-top: 6px; }
.cityTools .pill {  display:inline-block; padding:2px 8px; border:1px solid rgba(255,255,255,0.25); border-radius:999px;}
.cityTools a { text-decoration: underline; }
.cityHint { margin-top: 4px; }
.popMsg { margin-top: 8px; }
.popMsg .err { color:#b00020; font-weight:bold; }
.popMsg .ok  { color:#1b5e20; font-weight:bold; }
.err { color:#b00020; font-weight:bold; }
.ok  { color:#5c5; font-weight:bold; }
.nationWrap { display:flex; align-items:center; gap:8px; }
.nationFlag { width:30px; height:20px;border:1px solid rgba(0,0,0,0.25); background:#fff; object-fit:cover;}
.citySelectWrap { margin-top:6px; }
.citySelectWrap .btn.success.small { margin-left:6px; }
.citySelectWrap .chosen-container { width:260px !important; }
.randomAllWrap { margin-top:14px; }
.pickerRow { display:flex; align-items:center; gap:6px; margin:2px 0 6px 0;}
.pickerRow .pickerBtn { width:26px; flex:0 0 26px; text-align:center; padding:2px 6px; }
.pickerRow .pickerValue {width:150px; flex:0 0 150px; display:inline-block; text-align:center;}
.pickerRow .pickerExtraBtn { margin-left:6px;}
#name_inline_msg, #city_inline_msg { margin-top:6px;}
.quick_buy_sec { height:auto !important; overflow:visible; }
.quick_buy_sec::after { content:''; display:block; clear:both; }
.quick_buy_balance { clear:both; text-align:center; color:#000; font-size:15px; padding:8px 0 4px; }
.quick_buy_balance img { display:inline-block !important; vertical-align:middle; }
.quick_buy_box { height:200px; overflow:hidden; text-align:center; }
.quick_buy_box > img { display:block; margin:10px auto; }


/* User Profile
 * ------------------------------------------------------------------------------------------- */

.user_profile { border:#111 0px solid; border-top:none; padding:6px 0px; background:#000; height:auto }
.user_profile .infomation {width:500px; text-align: center; line-height: 2.1em; color:#FFF; font-size: 14px;}
.user_profile .infomation .dash{ border-bottom: #222 3px dashed;}
.user_profile .infomation .stat_title{ width:200px; text-align: left; padding:20px; display: inline-block;}
.user_profile .infomation .stat_num{ width:200px; text-align: right; color:#6a9cdb; padding:20px; display: inline-block;}
.user_profile .infomation .set_btn {margin: 5px; width:80px; height: 80px; text-align: center; color:#666; padding:10px; display: inline-block; border-radius: 16px; border: #333 2px solid;}
.user_profile .infomation a:hover .set_btn {border: #FFcc00 2px solid; background: #222; color: #FFcc00;}
.user_profile .infomation img {margin:0 auto; border: #333 3px solid; border-radius: 6px;}
.user_profile .infomation img.icon {border: none; border-radius: 0px;}
.user_profile h2 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; padding: 40px 0px 5px 0px; }
.user_profile h3 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; padding: 5px 0px 5px 0px; }
.user_profile_box {width:500px; height:184px; background:#111; color:#333; margin-top:0px; line-height:1.3em }
.user_profile_box_el {width:500px; height:170px; background:#111; color:#333; margin-top:5px; line-height:1.3em }
.user_profile_box a {color:#6a9cdb; text-decoration:none }
.user_profile_box_el a {color:#6a9cdb; text-decoration:none }
.user_profile a:hover {color:#fff; text-decoration:none }
.user_profile_pic_frame {width:55px; height:75px; padding:20px 15px; float:left}
.user_profile_edit {width:40px; font-size:12px; position:absolute; top:70px; left:5px; text-align:center; line-height:1.1em }
.user_profile_edit a {color:#333}
.user_profile_edit a:hover {color:#999}
.user_profile_gray a {color:#666; font-size:10px}
.user_profile_gray a:hover {color:#999; font-size:10px}
.user_profile_info_fixed {width:300px; height:auto; padding: 5px 0px; font-size:14px; color:#ccc; float:left; line-height:1.4em; overflow:hidden}
.user_profile_instant_btn { position:absolute; top:10px; left:380px; text-align:center;}
.user_profile_instant_btn a {color:#000}
.user_profile_common_info { position:absolute; top:-10px; left:360px; width:120px; text-align:center; color:#FFF; font-size:10px;}
.user_profile_setting_frame {width:500px; height:180px; background:#111; color:#FFF; font-size:14px; text-align:center; line-height:1.6em; padding-top:10px}


/* Other Profile
 * ------------------------------------------------------------------------------------------- */
.other_profile_sec {width:500px; height:auto; background:#000; color:#333; margin-top:5px; line-height:1.3em}
.other_profile_frame {width:500px; height:auto; vertical-align:middle; text-align:center}
.other_profile_box_1 {width:485px; height:184px; background-image:url(../default/manager.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
.other_profile_box_2 {width:485px; height:184px; background-image:url(../default/gm.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
.other_profile_box_3 {width:485px; height:184px; background-image:url(../default/owner.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
.other_profile_top {float:left; width:300px; height:60px; margin-left:10px; font-family:impact; font-weight:blod; font-size:14px; color:#fff; text-transform: uppercase; text-align:left}
.other_profile_desc { float:left; width:240px; height:auto; margin-left:20px; font-size:12px; background:rgba(10%,10%,10%,0.9); color:#fff; line-height:1.3em; padding:10px;border-radius:7px}
.other_profile_num { float:right; width:100px; padding:10px; margin:30px 10px 0px 0px; background:rgba(10%,10%,10%,0.9); color:#fff; font-size:12px; border-radius:7px; line-height:1.5em}

.other_profile_table_sec {width:500px; height:auto; background:#000; color:#fff; line-height:1.3em; padding-top:5px; display:inline-block}
.other_profile_table th { color:#FFF; height:40px; padding:9px 0px; border:none; line-height:1.3em; text-align:center; font-size:12px; padding:5px 5px}
.other_profile_table th a { color:#FFF; text-decoration:none; font-size:12px}
.other_profile_table th a:hover { text-decoration:underline; }
.other_profile_table tr { height:55px}
.other_profile_table tr.dark td { background:#000;}
.other_profile_table tr.even td { background:#111;}
.other_profile_table td { color:#999; padding:7px 5px; border-bottom:#000 1px solid; line-height:1.3em; text-align:center; font-size:12px;}
.other_profile_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.other_profile_table a:hover { color:#fff; }
.other_profile_table td .alignLeft {text-align:left; padding-left:5px; line-height:1.1em; overflow:hidden;}
.other_profile_table td .alignLeft .font6 { font-size:6px}


/* Agent Home
 * ------------------------------------------------------------------------------------------- */
.head_Pic50_frame {width:75px; height:75px; padding:20px 15px; float:left}
.head_Pic50 { position:relative; display:inline-block; min-width:50px; min-height:50px;}
.head_Pic50 img { border:#fff 1px solid; }
.head_Pic50_overall { position:absolute; top:40px; left:-9px;}
.head_Pic50_keyicon { position:absolute; top:45px; left:-5px;}
.head_Pic50_keyicon img { border:#222 0px solid; }
.head_Pic50_flag {position:absolute; top:-15px; left:-9px;}
.head_Pic50_flag img { border:#222 0px solid; }
.head_Pic50_lvl { position:absolute; top:36px; left:33px;}
.head_Pic50_lvl img { border:#222 0px solid; }
.head_Pic50_club img { border:#333 1px solid; border-radius:7px }

.fulloverview { border:#111 0px solid; border-top:none; padding:6px 0px; background:#000; height:auto }
.fulloverview  h2 { font-size:14px; font-weight:bold; color:#FFF; text-align:center; padding: 80px 0px 5px 0px; }
/* display:flow-root contains the four floats inside each row. Their widths add
   up to exactly 500px (95+175+200+30), so any sub-pixel or scrollbar pressure
   drops the right-floated button onto a second line; the floats then exceed the
   fixed 115px height and, uncontained, shove the NEXT row's floats sideways.
   That is the misaligned second player seen in the packaged app but not in a
   desktop browser. min-height lets a row grow instead of overlapping. */
.player_list_box {width:500px; min-height:115px; display:flow-root; background:#111; color:#333; margin-bottom:5px; line-height:1.2em }
.player_list_box a {color:#6a9cdb; text-decoration:none }
.player_list_box a:hover {color:#fff; text-decoration:none }
.player_list_pic_frame {width:55px; height:75px; padding:20px 15px; float:left; margin-left: 10px;}
.player_list_info_L {width:175px; height:auto; padding: 5px 0px; font-size:12px; color:#ccc; float:left; line-height:1.3em; overflow:hidden}
.player_list_info_L .percentTitle { display:inline-block; width:53px; color:#666}
.player_list_info_L .progressBar { display:inline-block; width:80px; margin:0px; background:#111; font-size:12px; line-height:1.0em }
.player_list_info_L .progressBar .percent { color:#000; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}

.player_list_info_R {width:200px; height:auto; padding: 5px 0px; font-size:12px; color:#ccc; float:left;line-height:1.3em; }
.player_list_info_R .percentTitle { display:inline-block; width:75px; color:#666}
.player_list_info_R .progressBar { display:inline-block; width:120px; margin:0px; background:#111; font-size:12px; line-height:1.0em }
.player_list_info_R .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.player_list_btn {width:30px; height:115px; float:right;}
.plsyer_list_status {width:40px; font-size:14px; position:absolute; top:70px; left:5px }

/* Player Development
 * ------------------------------------------------------------------------------------------- */
.agency_trainer_sec {width:500px; height:220px;display:inline-block; padding: 5px 0px; background:#111; font-size:14px; color:#999; line-height:1.3em; vertical-align:middle;  text-align:center}
.agency_trainer_box {width:125px; height:180px; display:inline-block; vertical-align:middle; text-align:center; float:left; line-height:1.4em; color:#CCC; font-size:12px; padding:5px 0px}
.agency_trainer_box img {width:50px; height:50px; margin: 5px 0px; border:#ccc 3px solid; border-radius:3px; background:#000}
/* The flag is a flag, not a second portrait. The rule above is written for the
   trainer's picture and takes every image in the box with it, HTML width and
   height attributes included — so without this the flag renders at 50x50 with
   a white frame, over the name underneath. */
.agency_trainer_box .national_flag {width:30px; height:20px; margin:0 auto;}
.agency_trainer_box .national_flag img {width:30px; height:20px; border:none; border-radius:3px; margin:0; background:none;}

/* Player Overview
 * ------------------------------------------------------------------------------------------- */

.player_profile_box {width:500px; height:185px; background:#111; color:#333; margin-top:5px; line-height:1.3em }
.player_profile_box a {color:#6a9cdb; text-decoration:none }
.player_profile a:hover {color:#fff; text-decoration:none }
.player_profile_pic_frame {width:55px; height:75px; padding:20px 15px; float:left}
.player_profile_edit {width:40px; font-size:12px; position:absolute; top:70px; left:5px; text-align:center; line-height:1.1em }
.player_profile_edit a {color:#333}
.player_profile_edit a:hover {color:#999}
.player_profile_info_fixed {width:300px; height:auto; padding: 5px 0px; font-size:14px; color:#ccc; float:left; line-height:1.4em; overflow:hidden}
.player_profile_instant_btn { position:absolute; top:30px; left:380px; text-align:center; color:#000}
.player_profile_select_player { position:absolute; top:-13px; width:150px ; left:320px; font-size: 12px;}
.player_profile_award_frame {width:498px; height:90px; padding:0px 1px 0px 1px; float:left}
.player_profile_award_frame h2 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; padding: 5px 0px 0px 0px; }
.player_profile_award_bg {width:71px; height:71px; background:url(../default/award_bg.png); float:left}
.player_profile_info_frame {width:500px; height:180px; margin-top:120px}
.player_profile_info_con {width:200px; height:170px; padding: 5px 5px; margin:5px 5px 0px 5px; background:#111; font-size:14px; color:#ccc; float:left;line-height:1.3em;display:inline-block }
.player_profile_info_con h2 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; background:#000; padding:5px 0px 5px 0px; }
.player_profile_info_con .percentTitle { display:inline-block; width:60px; color:#666}
.player_profile_info_con .progressBar { display:inline-block; width:100px; margin:0px; background:#111; font-size:12px; line-height:1.0em }
.player_profile_info_con .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.player_profile_info_money {width:265px; height:170px; padding: 5px 5px; margin:5px 5px 0px 0px; background:#111; font-size:14px; color:#999; float:left;line-height:1.3em; display:inline-block }
.player_profile_info_money a{color:#6a9cdb; text-decoration:none}
.player_profile_info_money h2 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; background:#000; padding: 5px 0px 5px 0px; }
.player_profile_info_money .percentTitle { display:inline-block; width:110px; color:#666}

.player_profile_hotzone {width:500px; height:280px; background:#111; font-size:14px; color:#999; display:inline-block; line-height:1.3em; margin-top:0px }
.player_profile_hotzone h2 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; padding: 3px 0px 3px 0px; background:#000 }
.player_profile_hotzone_title {width:60px; position:relative; top:30px; left:95px;}
.player_profile_hotzone_L {width:240px; height:200px; color:#fff; background:#111; display:inline-block;}
.player_profile_hotzone_R {width:240px; height:200px; color:#fff; background:#111; display:inline-block;}
.player_profile_hotzone_tank {width:110px; height:105px; float:left; padding-top:50px}
.player_profile_hotzone_lefty {width:65px; height:180px; float:left}
.player_profile_hotzone_righty {width:65px; height:180px; float:left}
.player_profile_hot {width:20px; height:20px; background:#c00000; float:left; border:#333 1px solid}
.player_profile_neu {width:20px; height:20px; background:#999; float:left; border:#333 1px solid}
.player_profile_cold {width:20px; height:20px; background:#376092; float:left; border:#333 1px solid}
.player_profile_hotzone_heatit {width:482px; height:30px; padding: 5px 0px;  font-size:14px; color:#6a9cdb; text-align:right;display:inline-block; line-height:30px  }

.player_profile_attributes {width:500px; height:auto; padding: 5px 0px; background:#111; font-size:14px; color:#999; line-height:1.3em; }
.player_profile_attributes h2 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; padding: 0px 0px 0px 0px; background:#000 }
.player_profile_attributes_L {width:240px; height:auto; color:#fff; display:inline-block; background:#111; padding-left:10px}
.player_profile_attributes_R {width:240px; height:auto; color:#fff; float:right; background:#111; padding-right:10px}
.player_profile_attributes .require_num { display:inline-block; position: relative; left: 165px ; margin:5px 0px; color:#999;  line-height:1.2em; font-size:12px; text-align: center;}
.player_profile_attributes .percentTitle { display:inline-block; width:75px; height:31px; color:#fff; padding:0px 0px 0px 0px; line-height:1.0em; font-size:12px;}
.player_profile_attributes .progressBar { display:inline-block; width:85px; height:12px; background:#222; font-size:12px; line-height:12px;}
.player_profile_attributes .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:10px;}
.player_profile_attributes .addnum {width:30px; height: 30px; line-height: 30px; color:#999; text-align:right; display:inline-block; font-size:10px;}
.player_profile_attributes .addbtn {width:30px; vertical-align:top; display:inline-block}
.player_profile_attributes_add_style {width:250px; height:50px; text-align:center; padding-top:13px}
.player_profile_attributes_add_style_right {float:right; clear:right}
.player_profile_attributes_skp {width:482px; height:30px; padding: 5px 0px;  display:inline-block; font-size:14px; color:#6a9cdb; text-align:right; display:inline-block; line-height:30px; clear:both  }

.player_profile_attributes_fielder {width:500px; height:auto; padding: 5px 0px; background:#111; font-size:14px; color:#999; line-height:1.3em; }
.player_profile_attributes_fielder h2 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; padding: 5px 0px 5px 0px; background:#000 }
.player_profile_attributes_fielder_L {width:240px; height:auto; color:#fff; display:inline-block; background:#111; padding-left:10px}
.player_profile_attributes_fielder_R {width:240px; height:auto; color:#fff; float:right; background:#111; padding-right:10px}
.player_profile_attributes_fielder .require_num { display:inline-block; position: relative; left: 165px ; margin:10px 0px; color:#999;  line-height:1.5em; font-size:12px; text-align: center;}
.player_profile_attributes_fielder .percentTitle { display:inline-block; width:75px; height:30px; color:#fff; padding:0px 0px 0px 0px; line-height:1.0em; font-size:12px;}
.player_profile_attributes_fielder .progressBar { display:inline-block; width:85px; height:12px; background:#222; font-size:12px; line-height:12px;}
.player_profile_attributes_fielder .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:10px;}
.player_profile_attributes_fielder .addnum {width:30px; height: 30px; line-height: 30px; color:#999; text-align:right; display:inline-block; font-size:10px;}
.player_profile_attributes_fielder .addbtn {width:30px; vertical-align:top; display:inline-block}
.player_profile_attributes_fielder_add_style {width:200px; height:50px; text-align:center; padding-top:30px}
.player_profile_attributes_fielder_skp {width:482px; height:30px; padding: 5px 0px;  display:inline-block; font-size:14px; color:#6a9cdb; text-align:right; display:inline-block; line-height:30px  }


.player_profile_attributes_pitcher {width:500px; height:auto; padding: 5px 0px; background:#111; font-size:14px; color:#999; line-height:1.3em; }
.player_profile_attributes_pitcher h2 { font-size:16px; font-weight:bold; color:#FFF; text-align:center; padding: 5px 0px 5px 0px; background:#000 }
.player_profile_attributes_pitcher_L {width:240px; height:auto; color:#fff; display:inline-block; background:#111; padding-left:10px}
.player_profile_attributes_pitcher_R {width:240px; height:auto; color:#fff; float:right; background:#111; padding-right:10px}
.player_profile_attributes_pitcher .require_num { display:inline-block; position: relative; left: 165px ; margin:10px 0px; color:#999;  line-height:1.5em; font-size:12px; text-align: center;}
.player_profile_attributes_pitcher .percentTitle { display:inline-block; width:75px; height:30px; color:#fff; padding:0px 0px 0px 0px; line-height:1.0em; font-size:12px;}
.player_profile_attributes_pitcher .progressBar { display:inline-block; width:85px; height:12px; background:#222; font-size:12px; line-height:12px;}
.player_profile_attributes_pitcher .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:10px;}
.player_profile_attributes_pitcher .addnum {width:30px; color:#999; text-align:right; display:inline-block; vertical-align:middle; font-size:10px;}
.player_profile_attributes_pitcher .addbtn {width:30px; vertical-align:top; display:inline-block}
.player_profile_attributes_pitcher_add_style {width:200px; height:50px; text-align:center; padding-top:30px}
.player_profile_attributes_pitcher_skp {width:480px; height:40px; padding: 5px 0px;  font-size:14px; color:#6a9cdb; text-align:right;display:inline-block; line-height:40px; clear:both  }

.player_profile_pitching_chart {width:500px; height:230px; padding: 5px 0px; background:#111; font-size:14px; color:#999; display:inline-block }
.player_profile_pitching_chart_box {width:480px; height:230px; background:#111; font-size:10px; color:#FFF; background:url(../default/pitching_chart.png)no-repeat }
.player_profile_pitching_chart_zone_L {width:105px; height:135px; position:relative; top:20px; left:0px; text-align:right; line-height:45px}
.player_profile_pitching_chart_zone_M {width:180px; height:63px; position:relative; top:15px; left:88px}
.player_profile_pitching_chart_zone_R {width:105px; height:135px; position:relative; top:-187px; left:290px}
.player_profile_pitching_chart_ver_box {width:57px; height:63px; display:inline-block; text-align:center;line-height:1.6em}
.player_profile_pitching_chart_ver_box_title {width:57px; height:63px; display:inline-block; text-align:right;line-height:1.6em; color:#666}
.player_profile_pitching_chart_hori_box_L {width:43px; height:40px; line-height:1.6em; text-align:center; padding:5px 0px 0px 20px; float:left}
.player_profile_pitching_chart_hori_box_L_title {width:40px; height:40px; line-height:1.6em; text-align:right; padding:5px 0px 0px 0px; float:left;color:#666}
.player_profile_pitching_chart_hori_box_R {width:43px; height:31px; line-height:1.6em; text-align:center; padding:3px 0px 0px 0px; float:left}
.player_profile_pitching_chart_hori_box_R_title {width:43px; height:31px; line-height:1.6em; text-align:left; padding:3px 0px 0px 3px; float:left;color:#666}

.player_profile_switcher {width:500px; height:50px; vertical-align:middle; text-align:center}
.player_profile_switcher_box {width:90px; height:50px; vertical-align:middle; text-align:center; float:left}


/* Player Stats
 * ------------------------------------------------------------------------------------------- */
.player_stats_table_sec {width:500px; height:auto; background:#000; color:#fff; line-height:1.3em; padding-top:5px; display:inline-block}
.player_stats_select_type { position:relative; top:3px; width:150px ; left:95px; font-size: 12px;}
.player_stats_table th { color:#FFF; padding:9px 0px; border:none; line-height:1.3em; text-align:center; font-size:12px; padding:5px 5px}
.player_stats_table th a { color:#FFF; text-decoration:none; font-size:12px}
.player_stats_table th a:hover { text-decoration:underline; }
.player_stats_table tr { height:auto}
.player_stats_table tr.dark { background:#000}
.player_stats_table tr.even td { background:#111}
.player_stats_table td { color:#999; padding:7px 5px; border-bottom:#000 1px solid; line-height:1.3em; text-align:center; font-size:12px;}
.player_stats_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.player_stats_table a:hover { color:#fff; }
.player_stats_table td .alignLeft {text-align:left; padding-left:5px; line-height:1.1em; overflow:hidden;}
.player_stats_table td .font6 { font-size:6px}
.player_stats_table tr.totals td {color:#fff; border:none;}

/* Player Training
 * ------------------------------------------------------------------------------------------- */
.player_training_trainers_sec {width:500px; height:220px;display:inline-block; padding: 5px 0px; background:#111; font-size:14px; color:#999; line-height:1.3em; vertical-align:middle;  text-align:center}
.player_training_trainers_box {width:125px; height:180px; display:inline-block; vertical-align:middle; text-align:center; float:left; line-height:1.4em; color:#CCC; font-size:12px; padding:5px 0px}
.player_training_trainers_box img {width:50px; height:50px; margin: 5px 0px; border:#ccc 3px solid; border-radius:3px; background:#000}
/* The flag is a flag, not a second portrait — the same rule .hire_staff_box
   needs for the same reason. Without it the line above wins over the width
   and height attributes, and a hired Personal Trainer's box grew a 50px
   bordered square that pushed his effect and Fire link out of the frame. */
.player_training_trainers_box img.flag {width:30px; height:20px; border:none; border-radius:0; margin:0 0 0 3px; vertical-align:middle; background:none}
/* Two lines whatever the name is, so the four boxes stay level and a long
   one cannot run past the bottom of a 180px box. */
.player_training_trainers_box .name {display:block; height:32px; line-height:16px; overflow:hidden}
.player_training_trainers_box .effect {display:block; height:16px; line-height:16px; overflow:hidden}
.player_training_trainers_box a  { color:#6a9cdb; text-decoration:none; font-size:12px}
.player_training_trainers_box a:hover { color:#fff; }

.player_training_sec {width:500px; height:250px; display:inline-block; padding: 5px 0px; background:#111; font-size:14px; color:#999; line-height:1.3em; }
.player_training_box {width:100px; height:150px; vertical-align:middle; text-align:center; float:left; line-height:1.3em;}
.player_training_box img {margin:5px 0px}
.player_training_bumbbells {width:480px; height:30px; padding: 5px 0px;  font-size:14px; color:#666; text-align:right; vertical-align:middle; display:inline-block  }
.player_training_clock {width:500px; height:30px;display:inline-block; margin-top:20px; color:#999; text-align:center; vertical-align:middle;}

.player_training_fielder_sec {width:500px; height:250px; display:inline-block; padding: 5px 0px; background:#111; font-size:14px; color:#999; line-height:1.3em; }
.player_training_fielder_box {width:125px; height:160px; vertical-align:middle; text-align:center; float:left; line-height:1.3em;}
.player_training_fielder_box img {margin:5px 0px}
.player_training_fielder_bumbbells {width:480px; height:30px; padding: 5px 0px;  font-size:14px; color:#666; text-align:right; vertical-align:middle; display:inline-block  }
.player_training_fielder_clock {width:500px; height:30px;display:inline-block; margin-top:20px; color:#999; text-align:center; vertical-align:middle;}

.player_training_progress_fielder_L {width:240px; height:auto; color:#fff; display:inline-block; background:#111; padding-left:10px}
.player_training_progress_fielder_L .progressBar { display:inline-block; width:110px; height:25px; background:#111; font-size:12px; line-height:1.0em; vertical-align:middle}
.player_training_progress_fielder_L .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.player_training_progress_fielder_L .addnum {width:25px; color:#999; text-align:right; display:inline-block; vertical-align:super; font-size:12px;}
.player_training_progress_fielder_L .percentTitle { display:inline-block; width:80px; height:30px; color:#fff; padding:5px 0px 0px 0px; line-height:1.0em; vertical-align:middle; font-size:14px;}
.player_training_progress_fielder_R {width:240px; height:auto; color:#fff; float:right; background:#111; padding-right:10px}
.player_training_progress_fielder_R .progressBar { display:inline-block; width:110px; height:25px; background:#111; font-size:12px; line-height:1.0em; vertical-align:middle}
.player_training_progress_fielder_R .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.player_training_progress_fielder_R .addnum {width:25px; color:#999; text-align:right; display:inline-block; vertical-align:super; font-size:12px;}
.player_training_progress_fielder_R .percentTitle { display:inline-block; width:85px; height:30px; color:#fff; padding:5px 0px 0px 0px; line-height:1.0em; vertical-align:middle; font-size:14px;}

.player_training_progress_pitcher_L {width:240px; height:auto; color:#fff; display:inline-block; background:#111; padding-left:10px}
.player_training_progress_pitcher_L .progressBar { display:inline-block; width:110px; height:25px; background:#111; font-size:12px; line-height:1.0em; vertical-align:middle}
.player_training_progress_pitcher_L .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.player_training_progress_pitcher_L .addnum {width:25px; color:#999; text-align:right; display:inline-block; vertical-align:super; font-size:12px;}
.player_training_progress_pitcher_L .percentTitle { display:inline-block; width:85px; height:30px; color:#fff; padding:5px 0px 0px 0px; line-height:1.0em; vertical-align:middle; font-size:14px;}
.player_training_progress_pitcher_R {width:230px; height:auto; color:#fff; float:right; background:#111; padding-right:10px}
.player_training_progress_pitcher_R .progressBar { display:inline-block; width:110px; height:25px; background:#111; font-size:12px; line-height:1.0em; vertical-align:middle}
.player_training_progress_pitcher_R .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.player_training_progress_pitcher_R .addnum {width:25px; color:#999; text-align:right; display:inline-block; vertical-align:super; font-size:12px;}
.player_training_progress_pitcher_R .percentTitle { display:inline-block; width:85px; height:30px; color:#fff; padding:5px 0px 0px 0px; line-height:1.0em; vertical-align:middle; font-size:14px;}


/* Offers & Msgs
 * ------------------------------------------------------------------------------------------- */
.offers_msgs_table_sec {width:490px; height:1100px; display:inline-block; padding: 5px 0px 0px 10px; background:#000; font-size:14px; color:#999; line-height:1.3em; }
.offers_msgs_table th { color:#FFF; height:30px; padding:2px 2px; border:none; line-height:1.3em; text-align:center; font-size:12px;}
.offers_msgs_table th a { color:#FFF; text-decoration:none; font-size:12px}
.offers_msgs_table th a:hover { text-decoration:underline; }
.offers_msgs_table tr { height:35px}
.offers_msgs_table tr.dark td { background:#000;}
.offers_msgs_table tr.even td { background:#111;}
.offers_msgs_table td { color:#999; padding:2px 2px; border-bottom:#000 1px solid; line-height:1.2em; text-align:center; font-size:12px;}
.offers_msgs_table td.alignRight {text-align:right;}
.offers_msgs_table td.alignLeft {text-align:left;}
.offers_msgs_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.offers_msgs_table a:hover { color:#fff; }
.make_offer_note_sec {width: 460px; height:120px; padding:5px 20px; text-align:left; background: #111; color: #666; font-size: 12px; line-height: 1.6em;}
.make_offer_note_sec .note_desc {width:320px; float: left; display:inline-block;}
.make_offer_note_sec a {width: 100px; font-size:16px; text-align: center;}
.make_offer_team_info {width: 468px; height: 100px; padding:5px 16px; text-align:center; background: #111; color: #FFF; font-size: 12px; line-height: 1.8em;}
.make_offer_team_info .offer_box {width: 156px; float: left; display:inline-block;}
.make_offer_contract {width: 468px; height: 230px; padding:5px 16px; text-align:center; background: #111; color: #FFF; font-size: 12px; line-height: 1.8em;}
.make_offer_contract .contract_box {width: 156px; float: left; display:inline-block;}
.make_offer_contract .btn_box {width: 156px; float: left; display:inline-block; text-align: center; line-height: 1.8em;}
.make_offer_contract .btn_box a {width: 100px; margin-bottom: 12px;}
.make_offer_select_team { width:130px ; font-size: 12px;}
.make_offer_select_contract { width:130px ; font-size: 12px;}
.make_offer_salary_wrap { display:inline-flex; align-items:center; width:130px; background:#ddd; border:1px solid #aaa; border-radius:3px; }
.make_offer_salary_wrap span { padding:0 3px 0 5px; color:#333; font-size:12px; flex-shrink:0; }
.make_offer_salary_input { width:0; flex:1; background:transparent; border:none; outline:none; text-align:right; font-size:12px; color:#333; padding:1px 4px 1px 0; }
.msg_read_sec {width:460px; height:900px; display:inline-block; padding: 20px 20px 0px 20px; background:#000; font-size:12px; color:#fff; line-height:1.6em; }
.msg_read_sec input { width:400px; background:#fff; color:#333; border:1px solid #666; padding:2px 4px; }
.msg_write_box { background:#fff; color:#333; }
.msg_read_box {width:420px; display: inline-block; margin: 10px 0px; border-top: #666 1px dashed; border-bottom: #666 1px dashed; padding: 20px; white-space: pre-wrap;}
.msg_write_box {width:420px; height: 300px; overflow-y:scroll; display: inline-block; margin: 10px 0px; border-top: #666 1px dashed; border-bottom: #666 1px dashed; padding: 20px;}

/* Social & Club
 * ------------------------------------------------------------------------------------------- */
.friend_list_sec {width:500px; height:auto; background:#000; color:#fff; line-height:1.3em; padding-top:5px; display:inline-block}
.friend_note_sec {width: 460px; height: auto; padding:10px 20px; text-align:center; color: #666; font-size: 10px;}
.friend_suggest_sec {width: 460px; height: 155px; padding:10px 20px; text-align:center;}
.friend_suggest_box {float: left; margin-right: 6px; width: 105px; height: 155px; background: #000; border-radius:6px; border: #222 2px solid; font-size: 12px; overflow: hidden; line-height:1.3em}
.friend_suggest_box img {border-radius:3px; border: #666 0px solid; margin: 5px 0px 2px;  }
.friend_suggest_box a { color:#6a9cdb; text-decoration:none; font-size:12px}
.friend_suggest_box a:hover { color:#fff; }
.friend_list_box {width: 430px; height: auto; margin:0px 20px 5px; padding:10px 10px;float: left; background: #000; border-radius:6px; border: #222 2px solid; font-size: 12px; overflow: hidden; line-height:1.3em}
.friend_list_box .pic_frame {float: left; width:55px; text-align: center; margin-right: 10px;}
.friend_list_box .info_frame_L {float: left; width: 235px; height: 55px; }
.friend_list_box .info_frame_R {float: left; width: 130px; height: 55px; }
.friend_list_box a { color:#6a9cdb; text-decoration:none; font-size:12px}
.friend_list_box a:hover { color:#fff; }
.friend_list_box img {border-radius:3px; border: #666 0px solid; margin: 3px 0px 1px;}
.friend_list_box li {list-style: none; height: 20px; line-height: 20px;}

.club_sec {width:500px; height:auto; background:#000; color:#fff; line-height:1.3em; padding-top:5px; display:inline-block}
.club_sec .rank_box {float:left; width:146px; height:170px; margin: 10px; background: #111; display: inline-block; text-align: center; color: #6a9cdb; border-radius: 7px;}
.club_sec .rank_box .num {font-size: 18px; color:#ffcc00; margin: 20px 0px 0px;}
.club_sec .rank_box img {width: 100px; height: 50px; border: #333 3px solid; margin: 15px 0px 15px; border-radius: 7px;}
.club_sec .rank_box img.icon { width: 20px; height: 20px; border-radius:0px; border: #666 0px solid;}
.club_sec .rank_box_champ {float:left; width:146px; height:170px; margin: 10px; background: #111; display: inline-block; text-align: center; color: #6a9cdb; border-radius: 7px;}
.club_sec .rank_box_champ .num1 {font-size: 30px; color:#ffcc00; margin: 10px; font-weight: bold;}
.club_sec .rank_box_champ img {width: 150px; height: 75px; border: #ffcc00 3px solid; border-radius: 7px; margin: 0px 0px 15px;}
.club_sec .rank_box_champ img.icon { width: 20px; height: 20px; border-radius:0px; border: #666 0px solid; margin: 0px 0px;}
.club_rank_box {width: 460px; height: auto; margin:0px 10px 5px; padding:5px 10px;float: left; background: #000; border-radius:6px; border: #222 2px solid; font-size: 12px; overflow: hidden; line-height:1.3em}
.club_rank_box .rank_num {float: left; width:30px; text-align: center; color: #FFcc00; font-size: 36px; margin-right: 10px; line-height: 70px}
.club_rank_box .rank_num.fourto100 {color: #FFF; font-size: 20px;}
.club_rank_box .pic_frame {float: left; width:55px; text-align: center; margin-right: 10px;}
.club_rank_box a { color:#6a9cdb; text-decoration:none; font-size:12px}
.club_rank_box a:hover { color:#fff; }
.club_rank_box img {border-radius:3px; border: #666 0px solid; margin: 3px 0px 1px;}
.club_rank_box .fund {float: left; width: 250px; height: 70px; color: #6a9cdb; font-size: 24px; line-height: 20px;}
.club_rank_box .fund img  { border-radius:0px; border: #666 0px solid;}
.club_rank_box .reward {float: right;  width:70px; height: 70px; text-align: center; color: #FFcc00;}
.club_rank_box .reward img {width: 40px; height: 40px;}

/* Game Matchup
 * ------------------------------------------------------------------------------------------- */
.game_matchup { border:#111 0px solid; border-top:none; padding:6px 0px; background:#000; height:auto }
.game_matchup_team_vs_box {width:500px; height:130px; background:#111;}
.game_matchup_team_vs_box a {color:#6a9cdb; text-decoration:none; font-size:12px}
.game_matchup_guest_team_box {width:177px; height:110px; background:#000; display:inline-block; text-align:center; float:left; margin:10px 0px}
.game_matchup_game_info_box {width:146px; height:110px; background:#111; display:inline-block; text-align:center; float:left; color:#FFFFFF; line-height:1.6em; font-size:12px}
.game_matchup_home_team_box {width:177px; height:110px; background:#000; display:inline-block; text-align:center; float:left; margin:10px 0px}
.game_matchup_guest_team_Pic50_frame {width:65px; height:65px; position:relative; top:10px; left:53px;}
.game_matchup_home_team_Pic50_frame {width:65px; height:65px; position:relative; top:10px; left:53px}

.pickem_frame {width:500px; height:110px;}

/* Face to Face VS Box — independent from team matchup box
 * ---------------------------------------------------------------- */
.game_matchup_face_vs_box { width:500px; background:#111; overflow:hidden; }
.game_matchup_face_vs_box a { color:#6a9cdb; text-decoration:none; font-size:12px }
.game_matchup_guest_face_box { width:177px; min-height:200px; background:#000; display:inline-block; text-align:center; float:left; padding-top:68px; box-sizing:border-box; }
.game_matchup_game_face_info_box { width:146px; min-height:200px; background:#111; display:inline-block; text-align:center; float:left; color:#FFFFFF; line-height:1.6em; font-size:12px; padding-top:78px; box-sizing:border-box; }
.game_matchup_home_face_box { width:177px; min-height:200px; background:#000; display:inline-block; text-align:center; float:left; padding-top:68px; box-sizing:border-box; }

.pickem_guest_team_box {width:177px; height:110px; background:#111; display:inline-block; text-align:center; float:left; color:#666; line-height:1.8em; font-size:12px; padding:5px 0px}
.pickem_game_info_box {width:146px; height:110px; background:#111; display:inline-block; text-align:center; float:left; color:#666; line-height:1.6em; font-size:10px; padding:5px 0px}
.pickem_home_team_box {width:177px; height:110px; background:#111; display:inline-block; text-align:center; float:left; color:#666; line-height:1.8em; font-size:12px; padding:5px 0px}

.game_matchup_probable_pitchers_frame {width:500px; height:140px; background:#111; padding:5px 0px}
.game_matchup_guest_player_box {width:250px; height:110px; background:#000; display:inline-block; float:left}
.game_matchup_guest_player_box a {color:#6a9cdb; text-decoration:none; font-size:14px}
.game_matchup_guest_player_box a:hover { color:#fff; }
.game_matchup_home_player_box {width:250px; height:110px; background:#000; display:inline-block; float:left }
.game_matchup_home_player_box a {color:#6a9cdb; text-decoration:none; font-size:14px}
.game_matchup_home_player_box a:hover { color:#fff; }
.guest_player_pic_frame {width:65px; height:65px; padding:20px 0px 0px 15px; float:left}
.home_player_pic_frame {width:65px; height:65px; padding:20px 0px 0px 15px; float:right}
.guest_pitcher_info_frame {width:162px; height:100px; padding:5px 0px; background:#000; float:left; display:inline-block}
.home_pitcher_info_frame {width:162px; height:100px; padding:5px 0px; background:#000; float:right; display:inline-block}
.guest_pitcher_name {width:122px; height:40px; background:#000; padding-left:5px; line-height:1.3em; font-size:14px; float:left; text-align:left;}
.home_pitcher_name {width:122px; height:40px; background:#000; padding-left:5px; line-height:1.3em; font-size:14px; float:right; text-align:right}
.guest_pitcher_number {width:25px; height:40px; background:#000; padding:0px 5px; color:#FFF; font-size:14px; text-align:left; line-height:1.3em;float:left}
.home_pitcher_number {width:25px; height:40px; background:#000; padding:0px 5px; color:#FFF; font-size:14px; text-align:right; line-height:1.3em;float:right;}
.guest_pitcher_stats_frame {width:40px; height:60px; background:#666; float:left; padding:0px 0px; color:#FFF; font-size:12px; text-align:center; line-height:1.3em}
.home_pitcher_stats_frame {width:40px; height:60px; background:#666; float:left; padding:0px 0px; color:#FFF; font-size:12px; text-align:center; line-height:1.3em}
.guest_pitcher_stats_title {width:40px; height:20px; background:#312421; float:left; color:#fff; font-size:12px; line-height:20px}
.home_pitcher_stats_title {width:40px; height:20px; background:#113305; float:right; color:#fff; font-size:12px; line-height:20px}
.guest_pitcher_stats {width:40px; height:40px; background:#000; float:left; color:#666; font-size:12px; line-height:40px}
.home_pitcher_stats {width:40px; height:40px; background:#000; float:left; color:#666; font-size:12px; line-height:40px}
.game_matchup_batter_frame {width:500px; height:1100px; background:#111; padding:5px 0px}
.game_matchup_batter_guest_box {width:250px; height:1100px; background:#000; display:inline-block; float:left}
.game_matchup_batter_guest_box a {color:#6a9cdb; text-decoration:none; font-size:14px}
.game_matchup_batter_guest_box a:hover { color:#fff; }
.game_matchup_batter_home_box  {width:250px; height:900px; background:#000; display:inline-block; float:right}
.game_matchup_batter_home_box a {color:#6a9cdb; text-decoration:none; font-size:14px}
.game_matchup_batter_home_box a:hover { color:#fff; }
.guest_batter_info_frame {width:162px; height:100px; padding:5px 0px; background:#000; float:left; display:inline-block}
.home_batter_info_frame {width:162px; height:100px; padding:5px 0px; background:#000; float:right; display:inline-block}
.guest_batter_name {width:122px; height:40px; background:#000; padding-left:5px; line-height:1.3em; font-size:14px; float:left; text-align:left;}
.home_batter_name {width:122px; height:40px; background:#000; padding-left:5px; line-height:1.3em; font-size:14px; float:right; text-align:right}
.guest_batter_number {width:25px; height:40px; background:#000; padding:0px 5px; color:#FFF; font-size:14px; text-align:left; line-height:1.3em;float:left}
.home_batter_number {width:25px; height:40px; background:#000; padding:0px 5px; color:#FFF; font-size:14px; text-align:right; line-height:1.3em;float:right;}
.guest_batter_stats_frame {width:40px; height:60px; background:#666; float:left; padding:0px 0px; color:#FFF; font-size:12px; text-align:center; line-height:1.3em}
.home_batter_stats_frame {width:40px; height:60px; background:#666; float:left; padding:0px 0px; color:#FFF; font-size:12px; text-align:center; line-height:1.3em}
.guest_batter_stats_title {width:40px; height:20px; background:#312421; float:left; color:#fff; font-size:12px; line-height:20px}
.home_batter_stats_title {width:40px; height:20px; background:#113305; float:right; color:#fff; font-size:12px; line-height:20px}
.guest_batter_stats {width:40px; height:40px; background:#000; float:left; color:#666; font-size:12px; line-height:40px}
.home_batter_stats {width:40px; height:40px; background:#000; float:left; color:#666; font-size:12px; line-height:40px}

/* Game Results
 * ------------------------------------------------------------------------------------------- */
.game_results_score_sec {width:500px; height:70px; color:#333; font-size:12px; background:#000; margin:auto 0}
.game_results_score_table { width:auto; text-align:center; color:#fff; margin:0 auto;}
.game_results_score_table table { margin:0 auto; }
.game_results_score_table tr {height:20px;}
.game_results_score_table td.num {width:20px;}
.game_results_score_table td.team {width:auto ;text-align:right; color:#6a9cdb; padding-right:5px}
.game_results_key_player_frame {width:500px; height:80px; background:#111;}

.game_results_key_player_frame .pic { float: left; width: 50px; height: 80px; display: block; padding-left:10px;}
.game_results_key_player_frame .pic img {border-radius: 2px;}
.game_results_key_player_frame .info { float: left; margin-left: 5px; width: 100px; height: 80px; display: inline-block; color: #FFF; font-size: 12px; line-height: 1.3em;}
.game_results_key_player_frame .info a { color:#6a9cdb; text-decoration:none }
.game_results_key_player_frame .info a:hover { color:#fff; }

.game_results_player_summary_frame {width:500px; height:auto; background:#111; padding:5px 0px}
.game_results_player_summary_table {clear: both; width: 100%; text-align:left; color:#666; padding:0px 0px; font-size:12px; }
.game_results_player_summary_table th {background:#632523; font-size:10px; color:#fff; text-align:center; height:30px}
.game_results_player_summary_table tr {background:#111; border:none}
.game_results_player_summary_table tr.dark td { background:#000}
.game_results_player_summary_table td { color:#FFF; padding:5px; border:none }
.game_results_player_summary_table td.left {color:#999; text-align:left}
.game_results_player_summary_table td.center {color:#999; text-align:center}
.game_results_player_summary_table td.right {color:#999; text-align:right}
.game_results_player_summary_table td a { color:#6a9cdb; text-decoration:none }
.game_results_player_summary_table td a:hover { color:#fff; }
.game_pbp_frame {width:495px; height:auto; background:#111; padding:5px 0px 0px 5px; font-size:10px; color:#777}
.game_pbp_frame a { color:#6a9cdb; text-decoration:none }
.game_pbp_frame a:hover { color:#fff; }
.game_pbp_table {clear: both; width: 100%; text-align:left; color:#666; padding:0px 0px; font-size:10px; }
.game_pbp_table td { color:#666; padding:1px; border:none; line-height:1.6em }
.game_pbp_frame tr.dark td {color:#666; background:#000; border:none}
.game_pbp_frame tr.player td {color:#fff; background:#000; border:none}
.game_pbp_frame tr.end td {color:#fff; background:#000; border:none; text-align:center}
.game_box_frame {width:495px; height:auto; background:#111; padding:5px 0px 0px 5px; font-size:10px; color:#777}
.game_box_frame a { color:#6a9cdb; text-decoration:none;}
.game_box_frame a:hover { color:#fff; }
.game_box_table {clear: both; width: 100%; color:#666; padding:0px 0px; font-size:10px; text-align:center }
.game_box_table th {background:#632523; font-size:10px; color: #fff;; text-align:center; height:30px}
.game_box_table td { color:#999; padding:1px; border:none; line-height:1.6em ; height:30px}
.game_box_table tr.dark td {color:#999; background:#000; border:none}
.game_box_table tr.totals td {color:#fff; background:#000; border:none; font-weight:bold}
.game_box_batting_sum_frame {width:475px; height:auto; background:#111; padding:10px 10px 0px 10px; font-size:10px; color:#777; line-height:1.8em}

/* Inventory
 * ------------------------------------------------------------------------------------------- */
.inventory_sec {width:500px; height:auto; background:#000; color:#333; margin-top:5px; line-height:1.3em}
.inventory_frame {width:500px; height:1900px; vertical-align:middle; text-align:center}
.inventory_sec .item_box {width:86px; height:65px; font-size: 14px; background:#000; float:left; margin:5px; padding-top:15px; color:#ffcc00; border:#111 2px solid; border-radius:7px; font-style:italic; text-align:center;}
.inventory_sec .item_box img {border-radius: 5px; margin-bottom: 5px; display:block; margin-left:auto; margin-right:auto;}
.inventory_sec a:hover .item_box{ border:#ffcc00 2px solid; background: #111;}

/* Guild
 *-------------------------------------------------------------------------------------------- */
.guild_sec {width:500px; background:#000; color:#333; margin-top:5px; line-height:1.3em; padding-bottom: 20px;}
.guild_sec .guild_box_2 {width:233px; height: 233px;px; color: #666; margin:5px; padding-top:5px; border:#222 2px solid; border-radius:7px; display: inline-block; text-align: center; }
.guild_sec .guild_box_2 .content2 {width:175px; height: 90px; float: left; margin:5px 30px;}
.guild_sec .guild_box_2 .content2 .guildbox {padding-top: 5px; width: 150px; height: 175px; color: #fff; display: inline-block;  text-align: center;}
.guild_sec .guild_box_2 .content2 img {margin:auto 0; width: 150px; height: 75px; display: inline-block; border-radius:3px}
/* Shop
 * ------------------------------------------------------------------------------------------- */
.shop_sec {width:500px; background:#000; color:#333; margin-top:5px; line-height:1.3em; padding-bottom: 20px;}
.shop_sec::after {content: ""; display: block; clear: both;}
/* Two lines tall whatever the name. A one-line name pulled the limit line
   and the price button up with it, so cards side by side had their buttons at
   different heights. */
.shop_sec .itemname {color:#d66360; font-size: 14px; height:42px; overflow:hidden;}
.shop_sec .number {font-size: 12px; height: 20px;}
.shop_sec .sale_box_1 {width:485px; height:184px; margin:5px; padding-top:10px; border:#222 2px solid; border-radius:7px; display: inline-block; vertical-align: top; }
.shop_sec .sale_box_1 a {width: 140px; height: 20px; line-height: 20px; text-align: center; float: right; font-size: 16px; margin:70px 10px 0px; }
.shop_sec .sale_box_1 .title { float:left; width:300px; height:auto; margin-left:10px; background:rgba(10%,10%,10%,0.5); color:#ffcc00; padding:10px; border-radius:7px}
.shop_sec .sale_box_1 .subtitle {color:#FFF; font-size: 10px; font-style: italic; margin-top: 5px;}
.shop_sec .sale_box_1 .content4 {width:275px; height: 90px; position: relative ; top: 0px; float: left; margin:20px 0px; background:rgba(10%,10%,10%,0.5);-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)); border-radius:7px}
.shop_sec .sale_box_1 .content4 .itembox {padding-top: 5px; width: 65px; height: 75px; color: #fff; display: inline-block; text-align: center;}
.shop_sec .sale_box_1 .content4 img {width: 50px; height: 50px; display: inline-block; border-radius:3px}
.shop_sec .sale_box_1 .content3 {width:205px; height: 90px; float: left; margin:20px 40px; background:rgba(10%,10%,10%,0.5);-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)); border-radius:7px}
.shop_sec .sale_box_1 .content3 .itembox {padding-top: 5px; width: 65px; height: 75px; color: #ffcc00; display: inline-block; text-align: center;}
.shop_sec .sale_box_1 .content3 img {width: 50px; height: 50px; display: inline-block; border-radius:3px}
.shop_sec .sale_box_1 .content1 {width:220px; height: 90px; position: relative ; top: 0px; float: left; margin:20px 0px 0px 20px; background:rgba(10%,10%,10%,0.5);-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)); border-radius:7px}
.shop_sec .sale_box_1 .content1 .itembox {padding-top: 5px; width: 220px; height: 55px; color: #ffcc00;  text-align: center;}
.shop_sec .sale_box_1 .content1 img {width: 50px; height: 50px; display: inline-block; border-radius:3px}
.shop_sec .sale_box_2 {width:233px; height:185px; color: #666; margin:5px; padding-top:5px; border:#222 2px solid; border-radius:7px; display: inline-block; vertical-align: top; text-align: center; }
.shop_sec .sale_box_2 .content2 {width:175px; height: 90px; float: left; margin:5px 30px;}
.shop_sec .sale_box_2 .content2 .itembox {padding-top: 5px; width: 65px; height: 75px; color: #fff; display: inline-block; text-align: center;}
.shop_sec .sale_box_2 .content2 img {width: 50px; height: 50px; display: inline-block; border-radius:3px}
.shop_sec .sale_box_2.weekly {background-image:url(../shop/weekly_bg_3.png); background-repeat: no-repeat;}
.shop_sec .sale_box_2.daily {background-image:url(../shop/daily_bg_3.png); background-repeat: no-repeat;}
.shop_sec .sale_box_2.once {background-image:url(../shop/once_bg_3.png); background-repeat: no-repeat;}
.shop_sec .sale_box_2.sale {background-image:url(../shop/sale_bg_3.png); background-repeat: no-repeat;}
.shop_sec .sale_box_2 a {width: 140px; height: 20px; line-height: 20px; text-align: center; font-size: 16px;}
.shop_sec .sale_box_3 {width:149px; height:170px; color: #666; margin:5px; padding-top:10px; border:#222 2px solid; border-radius:7px; display: inline-block; vertical-align: top; text-align: center; }
.shop_sec .sale_box_3 .itembox {padding-top: 5px; width: 65px; height: 75px; color: #fff; display: inline-block; text-align: center;}
.shop_sec .sale_box_3 .itembox img {width: 50px; height: 50px; display: inline-block; border-radius:3px}
.shop_sec .sale_box_3.weekly {background-image:url(../shop/weekly_bg_3.png); background-repeat: no-repeat;}
.shop_sec .sale_box_3.daily {background-image:url(../shop/daily_bg_3.png); background-repeat: no-repeat;}
.shop_sec .sale_box_3.once {background-image:url(../shop/once_bg_3.png); background-repeat: no-repeat;}
.shop_sec .sale_box_3.sale {background-image:url(../shop/sale_bg_3.png); background-repeat: no-repeat;}
.shop_sec .sale_box_3 a {width: 100px; height: 20px; line-height: 20px; text-align: center; font-size: 16px;}
.shop_sec img {-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)); margin-bottom: 10px;  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7))}
.shop_sec .sale_box_4 {width:485px; height:50px; line-height: 50px; margin:5px; border:#222 2px solid; border-radius:7px; display: inline-block; }
.shop_sec .sale_box_4 .headbox {float: left; width: 40px; height: 50px; background: #000; color: #111; line-height: 25px; font-size: 12px; text-align: center; border-radius:4px; display: inline-block;}
.shop_sec .sale_box_4 .headbox.sale {background: #ee005f; color: #FFF;}
.shop_sec .sale_box_4 .headbox.once {background: #381cc6; color: #FFF;}
.shop_sec .sale_box_4 .headbox.best {background: #ffcc00; color: #000;}
.shop_sec .sale_box_4 .cchbox {float: left; width: 110px; height: 50px; color: #FFcc00; margin-left: 10px; font-size:18px; display: inline-block;}
.shop_sec .sale_box_4 .countcchbox {float: left; width: auto; height: 50px; color: #333;font-size:14px; display: inline-block;}
.shop_sec .sale_box_4 a {width: 140px; height: 33px; line-height: 33px; text-align: center; float: right; font-size: 14px; padding: 6px 0px; }
.shop_sec .cart  {width:440px; height:150px; text-align: center; padding: 10px; margin:20px; border:#222 2px solid; border-radius:7px; display: inline-block; }
.shop_sec .cart .title {height: 25px; line-height: 25px; color: #ffcc00; font-size: 20px;}
.shop_sec .cart .itembox {padding-top: 5px; width: 65px; height: 75px; color: #fff; display: inline-block; text-align: center;}
.shop_sec .cart .itembox img {width: 50px; height: 50px; display: inline-block; border-radius:3px}
.shop_sec .cart .money {font-size:30px; color: #FFcc00; margin-top: 10px;}
.shop_sec .method_btn {margin:10px 0px 0px 20px; width:100px; height: 80px; text-align: center; color:#666; padding:10px; display: inline-block; border-radius: 16px; border: #333 2px solid;}
.shop_sec a:hover .method_btn {border: #FFcc00 2px solid; background: #222; color: #FFcc00;}
/* Web ATM is two words on two lines, and it goes dead while a transfer of the
   player's is still being matched -- a dead button must not light up on hover
   or it reads as clickable. */
.shop_sec .method_btn { line-height: 1.2em; }
.shop_sec .method_btn.webatm_busy { color:#555; border-color:#222; }
.shop_sec a:hover .method_btn.webatm_busy { border:#222 2px solid; background:none; color:#555; }
/* The remittance panel replaces the strip of methods, so it sits in the same
   place and keeps the page's own colours: yellow for the figures a player has
   to copy, gray for the line telling him to wait. */
.shop_sec .webatm_panel { margin:10px 20px 0; padding:12px; text-align:center; color:#ccc; font-size:14px; line-height:1.7em; border:#333 2px solid; border-radius:16px; }
.shop_sec .webatm_line { padding:4px 0; }
.shop_sec .webatm_input { width:150px; height:28px; line-height:28px; margin-right:8px; padding:0 8px; text-align:center; color:#FFcc00; background:#111; border:#333 2px solid; border-radius:6px; font-size:14px; letter-spacing:2px; }
.shop_sec .webatm_panel .btn { width:80px; height:28px; line-height:28px; font-size:14px; display:inline-block; text-align:center; }



/* Contest
 * ------------------------------------------------------------------------------------------- */
.contest_sec {width:500px; height:auto; background:#000; color:#333; margin-top:5px; line-height:1.3em; min-height:820px; padding-bottom:120px;}
.contest_frame {width:500px; height:auto; vertical-align:middle; text-align:center}
.contest_gametype_box_1 {width:485px; height:184px; background-image:url(../default/face_to_face.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
.contest_gametype_box_2 {width:485px; height:184px; background-image:url(../default/backyard.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
.contest_gametype_box_3 {width:485px; height:184px; background-image:url(../default/dreamroad.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
.contest_gametype_box_4 {width:485px; height:184px; background-image:url(../default/worldchallenge.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
.gametype_title {float:left; width:300px; height:90px; margin-left:10px; font-family:impact; font-weight:blod; font-size:22px; color:#fff; text-transform: uppercase; text-align:left}
.gametype_desc { float:left; width:220px; height:auto;margin-left:30px; background:rgba(10%,10%,10%,0.5); color:#ffcc00; padding:10px;border-radius:7px}
.gametype_btn { float:right; margin-top:50px; margin-right:10px}
.backyard_btn { float:right; width:100px; padding-top:5px; margin:30px 10px 0px 0px; background:rgba(10%,10%,10%,0.7); color:#ffcc00; font-size:12px; border-radius:7px}
.backyard_btn img { vertical-align:middle; width:25px !important; height:25px !important; display:inline !important; }
.pick_box {width:485px; height:90px; background:#000);margin:5px; border:#222 2px solid; border-radius:7px; }
.pick_box .playerHead {float:left; width:80px; height:70px; margin-top:20px; margin-left:10px;}
.pick_box .playerInfo {float:left; width:130px; height:80px; margin-top:10px; color:#FFF; font-size:10px; text-align:left; overflow:hidden}
.pick_box .playerInfo a {color:#6a9cdb; text-decoration:none}
.pick_box .playerInfo a:hover { color:#fff; }
.pick_box .playerBars {float:left; width:190px; height:80px; margin-top:10px; color:#FFF; font-size:10px; text-align:left}
.pick_box .playerBars .percentTitle { display:inline-block; width:40px; color:#666}
.pick_box .playerBars .progressBar { display:inline-block; width:100px; margin:0px; background:#111; font-size:12px; line-height:1.0em }
.pick_box .playerBars .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.pick_box .playerPick {float:left; width:75px; margin-top:10px;}
.pick_box .playerStats {float:left; width:190px; height:80px; margin-top:10px; color:#FFF; font-size:10px; text-align:center}
.pick_box .playerStats th {background:#222; width:38px; height:30px}
.pick_box .playerStats td { height:40px}

/* Task
 * ------------------------------------------------------------------------------------------- */
 .task_sec {width:500px; height:auto; background:#000; color:#333; margin-top:5px; line-height:1.3em}
 .task_frame {width:500px; height:auto; vertical-align:middle; text-align:center}
 .task_box {width:465px; height:25px; color:#999 ; margin:5px; padding:10px 10px; border:#222 2px solid; text-align:left; border-radius:7px; }
 /* Event
 * ------------------------------------------------------------------------------------------- */
 .event_sec {width:500px; height:auto; background:#000; color:#333; margin-top:5px; line-height:1.3em}
 .event_frame {width:500px; height:auto; vertical-align:middle; text-align:center}
 .event_box_drinking {width:485px; height:184px; background-image:url(../event/drinking_day.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_annual {width:485px; height:184px; background-image:url(../event/annual.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_307 {width:485px; height:184px; background-image:url(../event/307.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_508 {width:485px; height:184px; background-image:url(../event/508.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_training {width:485px; height:184px; background-image:url(../event/training_day.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_face_it {width:485px; height:184px; background-image:url(../event/face_it.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_new_season {width:485px; height:184px; background-image:url(../event/new_season.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_maintenance {width:485px; height:184px; background-image:url(../event/maintenance.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_offline {width:485px; height:184px; background-image:url(../event/offline.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_click {width:485px; height:184px; background-image:url(../event/click.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_box_pickem {width:485px; height:184px; background-image:url(../event/pickem.png); background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 /* The frame every banner shares, with no artwork of its own. An event that
    carries its own picture needs only this — which is what lets one be added
    from the admin without a stylesheet rule being written for it. */
 .event_box {width:485px; height:184px; background-repeat: no-repeat; margin:5px; padding-top:15px; border:#222 2px solid; border-radius:7px; }
 .event_title {float:left; width:300px; height:90px; margin-left:10px; font-family:impact; font-weight:blod; font-size:22px; color:#fff; text-transform: uppercase; text-align:left}
 .event_desc { float:left; position:relative; top: 144px; left: -2px; width:489px; height:40px; background:rgba(10%,10%,10%,0.8); color:#ffcc00; line-height: 40px; border-radius:7px;}
 .event_btn { float:right;}

 

/* League
 * ------------------------------------------------------------------------------------------- */
.league_profile_sec {width:500px; height:140px; background:#000; color:#333; line-height:1.3em; display:inline-block}
.league_pic {width:90px; height:90px; margin:20px 0px 10px 20px; float:left}
.league_pic img { border:#fff 1px solid; border-radius:3px}
.league_info_L {width:230px; height:90px; margin:20px 0px 10px 5px; float:left; font-size:14px; color:#FFF}
.league_info_R {width:140px; height:90px; margin:20px 0px 10px 5px; float:left; font-size:14px; color:#FFF}
.league_leaders_sec {width:500px; height:400px; background:#000; color:#333; line-height:1.2em; padding-top:10px; display:inline-block}
.league_leaders_box {width:160px; height:190px; background:#111; padding-top:5px; margin:2px 2px; float:left; font-size:12px; color:#FFF; border:#222 1px solid; border-radius:3px; text-align:center }
.league_leaders_box a { color:#6a9cdb; text-decoration:none; font-size:12px}
.league_leaders_box a:hover { color:#fff; }
.league_standings_sec {width:500px; height:auto; background:#000; color:#333; line-height:1.2em; padding-top:10px; display:inline-block}
.league_standings_box {width:240px; height:800px; background:#000; padding-top:5px; margin:2px 4px; float:left; font-size:12px; color:#FFF; border:#222 1px solid; border-radius:3px; text-align:center }
.league_standings_table th { color:#FFF; padding:9px 0px; border:none; line-height:1.3em; text-align:center; font-size:14px}
.league_standings_table tr { height:auto}
.league_standings_table tr.dark { background:#000}
.league_standings_table tr.even td { background:#111}
.league_standings_table td { color:#999; padding:7px 1px; border-bottom:#000 1px solid; line-height:1.3em; text-align:center; font-size:12px}
.league_standings_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.league_standings_table a:hover { color:#fff; }
.league_standings_table td .alignLeft {text-align:left; padding-left:5px; line-height:1.1em; overflow:hidden; width:140px}
.league_standings_table td .alignLeft .font6 { font-size:6px}

.league_map_sec {width:500px; height:auto; background:#000; color:#333; margin-top:5px; line-height:1.3em;}
.league_map_table td { color:#FFF; padding:3px 0px; border:none; line-height:1.3em; text-align:center; height:5px; font-size:12px}
.league_map_table tr { background:rgba(10%,10%,10%,0.8)}
.league_map_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.league_map_table a:hover { color:#fff; }
.league_map_table td img { border:#fff 1px solid; }

.league_Sche_sec {width:500px; height:auto; background:#000; color:#333; line-height:1.2em; padding-top:5px; display:inline-block}
.leagueScheTitle {font-size:14px; width:40px; height:80px; float:left; padding:5px 4px 0px 0px; text-align:right; color:#FFF;display:inline-block}
.leagueScheMid {width:450px; height:80px; float:left; padding:5px 0px 10px 0px; background:#000; display:inline-block}
.leagueScheTab {margin:1px; font-size:12px; float:left; width:22px; text-align:center; border:#222 1px solid; cursor: pointer; color:#333; padding:2px 0px}
.leagueScheMid .navOn {color:#FFF; background:#222}
.leagueScheTab:hover {color:#FFF; background:#666}
.league_Sche_table_sec {width:500px; height:auto; background:#000; color:#333; line-height:1.2em; padding-top:5px; display:inline-block}
.league_Sche_table td { color:#999; padding:7px 1px; border-bottom:#000 1px solid; line-height:1.3em; text-align:center; font-size:12px}
.league_Sche_table td.guest {text-align:right}
.league_Sche_table td.home {text-align:left}
.league_Sche_table tr.even td { background:#111}
.league_Sche_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.league_Sche_table a:hover { color:#fff; }

.league_stats_filter_sec {width:460px; height:auto; background:#000; color:#333; line-height:1.2em; padding:5px 5px; display:inline-block; font-size: 12px;}
/* Inputs and selects sit side by side in the filter rows, so they are given
   the same box: same border, padding, height and box-sizing. Left alone they
   measure differently — a select takes its height from the control, an input
   from its line box. */
.league_stats_filter_sec input,
.league_stats_filter_sec select {
  background:#fff; color:#333; border:1px solid #999;
  font-size:12px; line-height:16px; height:22px;
  padding:2px 4px; box-sizing:border-box; vertical-align:middle;
}
/* Breathing room between filter rows. It goes on the cells, not the row —
   padding on a tr is not rendered. */
.league_stats_filter_sec td { padding-top:5px; }
.league_stats_table_sec {width:500px; height:auto; background:#000; color:#fff; line-height:1.3em; padding-top:5px; display:inline-block}
.league_stats_table th { color:#FFF; padding:9px 0px; border:none; line-height:1.3em; text-align:center; font-size:12px; padding:5px 5px}
.league_stats_table th a { color:#FFF; text-decoration:none; font-size:12px}
.league_stats_table th a:hover { text-decoration:underline; }
.league_stats_table tr { height:auto}
.league_stats_table tr.dark { background:#000}
.league_stats_table tr.even td { background:#111}
.league_stats_table td { color:#999; padding:7px 5px; border-bottom:#000 1px solid; line-height:1.3em; text-align:center; font-size:12px;}
.league_stats_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.league_stats_table a:hover { color:#fff; }
.league_stats_table td .alignLeft {text-align:left; padding-left:5px; line-height:1.1em; overflow:hidden;}
.league_stats_table td .alignLeft .font6 { font-size:6px}

/* Free Agent
 * ------------------------------------------------------------------------------------------- */
 .free_agent_sec {width:500px; height:auto; background:#000; color:#333; margin-top:5px; line-height:1.3em}
 /* Two rows of four. Height is auto because the second row has to fit. */
 .FA_suggest_sec {width: 460px; height: auto; padding:10px 20px; text-align:center;}
 /* Same card as friend_suggest_box, taller: a free agent carries a photo with
    his overall and star badge on it, then six lines and three buttons. */
 .FA_suggest_box {float:left; margin:0px 6px 6px 0px; width:105px; height:200px; padding:20px 0px 10px; background:#000; border-radius:6px; border:#222 2px solid; font-size:12px; overflow:hidden; line-height:1.3em}
 .FA_suggest_box:nth-child(4n) {margin-right:0px}
 .FA_suggest_box a { color:#6a9cdb; text-decoration:none; font-size:12px}
 .FA_suggest_box a:hover { color:#fff; }
 /* The badges hang off the photo in three directions and the card clips: the
    flag sits 15px above it, and the overall plate and star badge about 20px
    below. The card's 20px top padding now covers the flag, so the photo only
    needs the gap underneath. */
 .FA_suggest_box .head_Pic50 { margin:0px 0px 24px }
 .FA_suggest_box .FA_card_line { display:block; padding:0px 4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
 .FA_suggest_box .FA_card_btns { padding:4px 0px 0px }
 /* Same note strip the friend list uses, under its own name so the two pages
    can drift apart without one dragging the other. */
 .FA_note {width: 460px; height: auto; padding:10px 20px; text-align:center; color:#666; font-size:12px; clear:both;}
 /* The promote strip. Its own class rather than FA_note's, which the empty
    states also use and which has to stay centred. */
 .FA_promote {width: 460px; height: auto; padding:10px 20px; text-align:right; color:#666; font-size:12px; clear:both;}
 /* The free agent list runs two across. Half a player_list_box, and with no
    button column the whole width goes to the information. */
 .FA_list_box {width:245px; min-height:115px; float:left; background:#111; color:#333; margin:0px 5px 5px 0px; line-height:1.2em}
 .FA_list_box:nth-child(2n) {margin-right:0px}
 .FA_list_box a {color:#6a9cdb; text-decoration:none}
 .FA_list_box a:hover {color:#fff; text-decoration:none}
 .FA_list_pic_frame {width:55px; height:75px; padding:20px 10px 20px 15px; float:left}
 .FA_list_info {width:150px; height:auto; padding:5px 0px; font-size:12px; color:#ccc; float:left; line-height:1.3em; overflow:hidden}


/* Postseason
 * ------------------------------------------------------------------------------------------- */

.postseason { border:#e46c0a 6px solid; padding:13px; background:#FFF;}
.postseasonSelect { float:right;}
.postseason h2 { font-size:14px; font-weight:bold; margin-bottom:5px; }
.postseasonSec { color:#FFF; padding:10px; width:480px; overflow:scroll; overflow-y:auto; height:600px; background:url(../default/bgbg.jpg) }
.postseasonSec_blank { color:#FFF; padding:10px; width:1500px;  height:1078px; margin:0 auto;  background:url(../default/bgbg.jpg) }
.postseasonSec a{ color:#6a9cdb; text-decoration:none; font-size:12px}
.postseasonSec_blank a{ color:#6a9cdb; text-decoration:none; font-size:12px}
.postseasonSec a:hover{ color:#fff; text-decoration:none;}
.postseasonSec_blank a:hover{ color:#fff; text-decoration:none;}
.postseasonSecIn { width:1500px; padding:0px 10px; position:relative;}
.postseasonSec_blankIn { width:1500px; padding:0px 10px; position:relative;}
.postseasonSecBlock { float:left; width:200px;}
.postseasonSecBlock.midBlock { padding-top:173px; width:300px;}
.postseasonSecBlock h3 { font-size:14px; font-weight:bold; text-align:center;}
.postseasonSecBlock h3.team2 { margin-top:178px;}
.postseasonSecBlock li.team8L { position:relative; border:#fff 1px solid; border-left:0px; height:120px; margin:70px 0px 120px; list-style:none}
.postseasonSecBlock li.team8L .team { background:#111; height:26px; display:inline-block;}
.postseasonSecBlock li.team8L .topList { position:absolute; top:-50%; left:-40px; margin-top:4px; width:130px; height:90px; text-align:center; padding:10px 10px 10px 0px;border-radius:7px;}
.postseasonSecBlock li.team8L .downList { position:absolute; bottom:-50%; left:-40px; margin-bottom:4px; width:130px; height:90px; text-align:center; padding:10px 10px 10px 0px; border-radius:7px;}
.postseasonSecBlock li.team8L .team label { background:#111; width:20px; height:90px; float:left; line-height:90px; display:inline-block; text-align:center; color:#FFF; font-weight:bold;}
.postseasonSecBlock li.team8L .team span { padding:5px; display:inline-block; color:#fff; width:220px; line-height:16px;}
.postseasonSecBlock li.team8L .bracket { width:100%; text-align:right; position:absolute; top:50%; right:10px; margin-top:-8px; font-family:Verdana;}
.postseasonSecBlock li.team8L .bracket a { font-size:16px; color:#fff}
.postseasonSecBlock li.team8L .bracket a:hover { color:#ffcc00; text-decoration:underline}


.postseasonSecBlock li.team8R { position:relative; border:#fff 1px solid; border-right:0px; height:120px; margin:70px 0px 120px;list-style:none}
.postseasonSecBlock li.team8R .team { background:#111; height:26px; display:inline-block;}
.postseasonSecBlock li.team8R .topList { position:absolute; top:-50%; right:0px; margin-top:4px; width:130px; height:90px; text-align:center; padding:10px 0px 10px 10px; border-radius:7px;}
.postseasonSecBlock li.team8R .downList { position:absolute; bottom:-50%; right:0px; margin-bottom:4px; width:130px; height:90px; text-align:center; padding:10px 0px 10px 10px; border-radius:7px;}
.postseasonSecBlock li.team8R .team label { background:#111; width:20px; height:90px; float:right; line-height:90px; display:inline-block; text-align:center; color:#FFF; font-weight:bold;}
.postseasonSecBlock li.team8R .team span { padding:5px; display:inline-block; color:#fff; width:220px; line-height:16px;}
.postseasonSecBlock li.team8R .bracket { width:100%; text-align:left; padding-left:10px; position:absolute; top:50%; left:0px; margin-top:-8px; font-family:Verdana;}
.postseasonSecBlock li.team8R .bracket a { font-size:16px; color:#fff}
.postseasonSecBlock li.team8R .bracket a:hover { color:#ffcc00; text-decoration:underline}

.postseasonSecBlock li.team4L { position:relative; border:#fff 1px solid; border-left:0px; height:242px; margin:162px 0px 242px; list-style:none}
.postseasonSecBlock li.team4L .team { background:#111; height:26px; display:inline-block;}
.postseasonSecBlock li.team4L .topList { position:absolute; top:-29%; left:20px; margin-top:4px; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team4L .downList { position:absolute; bottom:-28%; left:20px; margin-bottom:4px; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team4L .team span { padding:5px; display:inline-block; color:#F90; width:220px; line-height:16px;}
.postseasonSecBlock li.team4L .bracket { width:100%; text-align:center; position:absolute; top:50%; left:-5px; margin-top:-8px; font-family:Verdana;}
.postseasonSecBlock li.team4L .bracket a { font-size:16px; color:#fff}
.postseasonSecBlock li.team4L .bracket a:hover { color:#ffcc00; text-decoration:underline}

.postseasonSecBlock li.team4R { position:relative; border:#fff 1px solid; border-right:0px; height:242px; margin:162px 0px 242px; list-style:none}
.postseasonSecBlock li.team4R .team { background:#111; height:26px; display:inline-block;}
.postseasonSecBlock li.team4R .topList { position:absolute; top:-29%; right:20px; margin-top:4px; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team4R .downList { position:absolute; bottom:-28%; right:20px; margin-bottom:4px; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team4R .team span { padding:5px; display:inline-block; color:#F90; width:220px; line-height:16px;}
.postseasonSecBlock li.team4R .bracket { width:100%; text-align:center; position:absolute; top:50%; right:-5px; margin-top:-8px; font-family:Verdana;}
.postseasonSecBlock li.team4R .bracket a { font-size:16px; color:#fff}
.postseasonSecBlock li.team4R .bracket a:hover { color:#ffcc00; text-decoration:underline}

.postseasonSecBlock li.team2L { position:relative; border:#fff 1px solid; border-left:0px; height:485px; margin:88px 0px 90px; list-style:none}
.postseasonSecBlock li.team2L .team { background:#111; height:26px; display:inline-block;}
.postseasonSecBlock li.team2L .topList { position:absolute; top:-14%; left:20px; margin-top:4px; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team2L .downList { position:absolute; bottom:-15%; left:20px; margin-bottom:4px; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team2L .team span { padding:5px; display:inline-block; color:#F90; width:220px; line-height:16px;height:40px;}
.postseasonSecBlock li.team2L .bracket { width:100%; text-align:center; position:absolute; top:50%; left:-5px; margin-top:-8px; font-family:Verdana;}
.postseasonSecBlock li.team2L .bracket a { font-size:16px; color:#fff}
.postseasonSecBlock li.team2L .bracket a:hover { color:#ffcc00; text-decoration:underline}

.postseasonSecBlock li.team2R { position:relative; border:#fff 1px solid; border-right:0px; height:480px; margin:88px 0px 90px; list-style:none}
.postseasonSecBlock li.team2R .team { background:#111; height:26px; display:inline-block;}
.postseasonSecBlock li.team2R .topList { position:absolute; top:-14%; right:20px; margin-top:4px; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team2R .downList { position:absolute; bottom:-15%; right:20px; margin-bottom:4px; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team2R .team span { padding:5px; display:inline-block; color:#F90; width:220px; line-height:16px;}
.postseasonSecBlock li.team2R .bracket { width:100%; text-align:center; position:absolute; top:50%; right:-5px; margin-top:-8px; font-family:Verdana;}
.postseasonSecBlock li.team2R .bracket a { font-size:16px; color:#fff}
.postseasonSecBlock li.team2R .bracket a:hover { color:#ffcc00; text-decoration:underline}

.postseasonSecBlock ul.conference { width:400px; margin:280px -50px; position:relative; z-index:100; list-style:none}
.postseasonSecBlock li.team { float:left; background:#111; display:inline-block; height:90px; width:130px; text-align:center; padding:20px 10px; border-radius:7px;}
.postseasonSecBlock li.team span { padding:5px; display:inline-block; color:#F90; width:220px; line-height:16px;}
.postseasonSecBlock li.bracket { float:left; width:100px; text-align:center; font-family:Verdana; height:130px; line-height:130px; font-size:21px;}
.postseasonSecBlock li.bracket a { font-size:18px; color:#ffcc00}
.postseasonSecBlock li.bracket a:hover { color:#ffcc00; text-decoration:underline}

.championshipSec { position:absolute; top:230px; left:50%; margin-left:-98px; width:200px;}
.championshipSec h3 { font-size:18px; font-weight:bold; text-align:center; margin-bottom:20px; color:#FFcc00}
.championshipSec .championship { padding:20px 20px; text-align:center; background:#111; color:#fff; font-size:15px; font-weight:bold; border-radius:7px;}
.championshipSec .championship a { font-size:18px;}

/* Team
 * ------------------------------------------------------------------------------------------- */
.team_profile_sec {width:500px; height:150px; background:#000; color:#333; line-height:1.3em; display:inline-block}
.team_info_pic {width:90px; height:90px; margin:20px 0px 10px 20px; float:left}
.team_pic {width:75px; height:80px; float:left}
.team_buy {width:75px; float:left; text-align:center}
.team_buy_sec {width: 500px; background: #000; text-align: center;}
.team_buy_sec .purchase_info  {width:440px; height:auto; text-align: center; padding: 10px; margin:10px 20px; color: #FFF; border:#222 2px solid; border-radius:7px; display: inline-block; line-height: 1.6em; }
.team_buy_sec .purchase_info .title {height: 25px; line-height: 25px; color: #ffcc00; font-size: 20px;}
.team_buy_sec .purchase_info .teambox {padding-top: 10px; width: 200px; height: 75px; color: #6a9cdb; display: inline-block; text-align: center;}
.team_buy_sec .purchase_info .teambox img {width: 75px; height: 75px; display: inline-block; border-radius:3px}
.team_buy_sec .purchase_info .terms {width: 400px; font-size:14px; color: #666; margin: 10px 15px; text-align: left; line-height: 2.1em;}
.team_buy_sec .method_btn {margin:10px 0px 0px 10px; width:120px; height: 120px; text-align: center; color:#666; padding:10px; display: inline-block; border-radius: 16px; border: #333 2px solid; font-size: 14px; line-height: 1.6em;}
.team_buy_sec .method_btn img {width: 50px; height: 50px; display: inline-block; border-radius:3px}
.team_buy_sec a:hover .method_btn {border: #FFcc00 2px solid; background: #222; color: #FFcc00;}


.team_pic img { border:#fff 1px solid; border-radius:3px}
.team_info_L {width:230px; height:90px; margin:20px 0px 10px 5px; float:left; font-size:12px; color:#FFF}
.team_info_L a { color:#6a9cdb; text-decoration:none; font-size:12px}
.team_info_L a:hover { color:#fff; }
.team_info_R {width:20px; height:150px; float:right; font-size:12px; color:#FFF}
.team_color_pri {width:20px; height:120px; float:right;}
.team_color_sec {width:20px; height:30px; float:right;}
.team_banner_sec {width:500px; height:70px; background:#000; display:flex; align-items:center; justify-content:center;}
.team_banner_sec .no_title {color:#444; font-size:12px; font-style:italic;}
.team_banner_box {width:auto; height:60px; margin:0 auto; text-align:center}
.team_banner_champ {width:40px; height:60px; background:url(../default/banner_champ.png ); text-align:center; color:#FFF; line-height:30px; display:inline-block; font-size:10px}
.team_banner_cof {width:30px; height:45px; background:url(../default/banner_cof.png ); text-align:center; color:#FFF; line-height:30px; display:inline-block; font-size:8px}

.team_roster_info_sec {width:500px; height:125px; background:#000; color:#fff; line-height:1.3em; padding-top:0px; display:inline-block}
.team_roster_info_box {width:230px; height:125px; float:left; padding:5px 10px; display:inline-block; font-size:14px}
.team_doc_info_sec {width:500px; height:125px; background:#000; color:#fff; line-height:1.3em; padding-top:0px; display:inline-block}
.team_doc_info_box {width:110px; height:125px; float:left; padding:5px 0px; display:inline-block; font-size:12px; line-height:1.4em; color:#CCC; text-align:center;}
.team_doc_info_box img {width:50px; height:50px; border:#ccc 3px solid; border-radius:3px; background:#000}
.team_doc_info_box_R {width:150px; height:125px; float:left; padding:5px 10px; display:inline-block; font-size:12px; color:#CCC;}

.team_trade_info_sec {width:500px; height:170px; background:#000; color:#fff; padding-top:0px; display:inline-block}
.team_trade_info_box {width:485px; height:170px; float:left; padding:0px 10px; display:inline-block; font-size:12px}
.team_trade_info_box li {line-height: 1.6em;}

.team_staff_name {width:500px; height:30px; line-height:30px; text-align: center;}
.team_staff_sec {width:500px; height:auto; overflow:hidden; background:#000; color:#fff; line-height:1.3em; padding-top:0px; display:inline-block}
.team_staff_box {width:125px; height:196px; float:left; padding:5px 0px; display:inline-block; font-size:12px; line-height:1.5em; color:#CCC; text-align:center;}
.team_staff_owner_box {width:500px; height:196px; float:left; padding:5px 0px; display:inline-block; font-size:12px; line-height:1.5em; color:#CCC; text-align:center;}
.team_staff_owner_box img {width:50px; height:50px; border:#ccc 3px solid; border-radius:3px; margin: 8px;}
.team_staff_box img {width:50px; height:50px; border:#ccc 3px solid; border-radius:3px; margin: 8px; }
/* The job title over exactly two lines, as .hire_staff_box .name does for a
   person's name: "General Manager" wraps and "Owner" does not, and without a
   fixed block the portraits below them step out of line with each other. */
.team_staff_box .role, .team_staff_owner_box .role {display:block; height:36px; line-height:18px; overflow:hidden;}
/* Same flag as the hire dialog, so the two read as the same card. */
.team_staff_box img.flag, .team_staff_owner_box img.flag {width:30px; height:20px; border:none; border-radius:0; margin:2px;}

.team_table_sec {width:500px; height:auto; background:#000; color:#fff; line-height:1.3em; padding-top:5px; display:inline-block}
.team_table th { color:#FFF; height:30px; padding:2px 3px; border:none; line-height:1.3em; text-align:center; font-size:12px;}
.team_table th.right {text-align:right; padding-right: 5px;}
.team_table th.left {text-align:left; padding-left: 5px;}
.team_table th a { color:#FFF; text-decoration:none; font-size:12px}
.team_table th a:hover { text-decoration:underline; }
.team_table tr { height:35px}
.team_table tr.dark td { background:#000;}
.team_table tr.even td { background:#111;}
.team_table td { color:#999; padding:2px 2px; border-bottom:#000 1px solid; line-height:1.1em; text-align:center; font-size:12px;}
.team_table td img {display:inline !important; vertical-align:middle;}
.team_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.team_table a:hover { color:#fff; }
.team_table td .alignRight {text-align:right; line-height:1.1em; overflow:hidden; padding-right: 5px; }
.team_table td .alignLeft {text-align:left; line-height:1.1em; overflow:hidden;}
.team_table td .alignLeft .font6 { font-size:6px}

.team_vs_league_sec {width:500px; height:100px; background:#000; color:#fff; line-height:1.5em; padding-top:5px; display:inline-block; font-size:12px;}
.team_vs_league_box_L {width:240px; float:left}
.team_vs_league_box_L .percentTitle { display:inline-block; width:60px; color:#999; font-size:12px; padding-left:15px }
.team_vs_league_box_L .progressBar { display:inline-block; width:100px; margin:0px; background:#111; font-size:12px; line-height:1.0em }
.team_vs_league_box_L .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.team_vs_league_box_L .vsRank { display:inline-block; width:30px; color:#fff; padding-left:10px; font-size:9px}
.team_vs_league_box_R {width:250px; float:left}
.team_vs_league_box_R .percentTitle { display:inline-block; width:140px; color:#999; font-size:12px; padding-left:15px }
.team_vs_league_box_R .num { display:inline-block; width:50px;  font-size:12px; line-height:1.3em; text-align:right }
.team_vs_league_box_R .vsRank { display:inline-block; width:30px; color:#fff; padding-left:10px; font-size:6px}

.top_threats_sec {width:500px; height:130px; background:#000; display:flex; gap:7px;}
.top_threats_box {width:162px; height:100px; background:#000; font-size:12px; flex-shrink:0; overflow:hidden;}
.top_threats_title {font-size:12px; line-height:25px; padding-left:5px}
.top_threats_title_bg {width:162px; height:25px; font-size:12px}
.top_threats_title_under {width:162px; height:3px; font-size:12px}
.top_threats_title a { color:#FFF; text-decoration:none; font-size:12px; padding:5px}
.top_threats_title a:hover { color:#FFF; text-decoration:underline}
.top_threats_pic_frame {width:60px; height:60px; padding:5px 0px 0px 10px; display:inline-block; float:left}
.top_threats_info { width:92px; height:30px; background:#000; display:inline-block; float:left; margin-top:3px; color:#FFF; line-height:1.5em}
.top_threats_info .infoTitle { width:30px; color:#999;}

.depth_chart_sec {width:500px; height:1000px; background:#000}
.team_name_bg {width:500px; height:30px;}
.team_name_bg_thin {width:500px; height:5px;}
.team_name {width:490px; height:30px; color:#FFF; line-height:30px; padding-left:10px}
.depth_chart_box {width:500px; height:340px; background:url(../default/ballpark.png ) no-repeat; position:relative; overflow:hidden}
.depth_chart_box a { font-style: italic; text-decoration:none; color:#666}
.depth_chart_box a:hover { text-decoration:underline; color:#111}
.team_name_bottom {width:200px; height:30px; color:#000; line-height:30px; padding-left:10px; display:inline-block}
.depth_chart_CF_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:200px; top:25px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}
.depth_chart_LF_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:90px; top:40px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}
.depth_chart_RF_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:310px; top:40px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}
.depth_chart_3B_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:123px; top:160px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}
.depth_chart_SS_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:135px; top:107px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}
.depth_chart_2B_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:260px; top:107px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}
.depth_chart_1B_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:270px; top:160px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}
.depth_chart_C_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:200px; top:218px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}
.depth_chart_P_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:390px; top:95px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px; max-height:240px; overflow:hidden}
.depth_chart_DH_box {width:100px; height:auto; background:rgba(80%,80%,80%,0.9); position:absolute; left:30px; top:230px; border-radius:3px; color:#000; text-align:center; font-size:10px; padding:2px 2px}



.ballpark_sec {width:500px; height:900px; background:#000}
.ballpark_name_bg {width:500px; height:30px;}
.ballpark_name_bg_thin {width:500px; height:5px;}
.ballpark_name {width:490px; height:30px; color:#FFF; line-height:30px; padding-left:10px}
.ballpark_box {width:500px; height:380px;}
.ballpark_name_bottom {width:200px; height:30px; color:#000; line-height:30px; padding-left:10px; display:inline-block}

.ballpark_fan_support {width:130px; height:30px; position:relative; left:10px; top:5px; color:#999; font-size:12px; line-height:1.3em;}
.ballpark_fan_support .progressBar { display:inline-block; width:120px; margin:0px; background:#111; font-size:12px; line-height:1.0em }
.ballpark_fan_support .progressBar .percent { color:#111; display:inline-block; text-align:center; min-width:8%; margin:0px; font-size:12px;}
.ballpark_rating {width:130px; height:30px; position:relative; left:360px; top:-25px; color:#999; font-size:12px; line-height:1.3em; text-align:right; white-space:nowrap;}
.ballpark_rating img {display:inline !important; vertical-align:middle;}
.ballpark_capacity {float:right; display:inline-block; color:#000; line-height:30px; padding-right:10px}
.ballpark_info_box {width:500px; height:450px; background:#000; color:#999; font-size:12px; line-height:1.3em}
.ballpark_info_seats {width:280px; height:auto; display:inline-block; float:left; color:#666; padding:5px 0px 0px 10px}
.ballpark_seat_color_1 {background:#f3b23a; color:#f3b23a;}
.ballpark_seat_color_2 {background:#69baeb; color:#69baeb;}
.ballpark_seat_color_3 {background:#f7ef69; color:#f7ef69;}
.ballpark_seat_color_4 {background:#f37979; color:#f37979;}
.ballpark_seat_color_5 {background:#8aca9e; color:#8aca9e;}
.ballpark_seat_color_6 {background:#fb9e24; color:#fb9e24;}
.ballpark_seat_color_7 {background:#4565b2; color:#4565b2;}
.ballpark_seat_color_8 {background:#ba9aca; color:#ba9aca;}
.ballpark_seat_color_9 {background:#ce8dc5; color:#ce8dc5;}
.ballpark_seat_color_10 {background:#920015; color:#920015;}
.ballpark_seat_color_11 {background:#fbf000; color:#fbf000;}
.ballpark_seat_color_12 {background:#89d471; color:#89d471;}
.ballpark_seat_color_13 {background:#5f1280; color:#5f1280;}
.ballpark_seat_color_14 {background:#b8bcbd; color:#b8bcbd;}
.ballpark_seat_color_15 {background:#016128; color:#016128;}
.ballpark_seat_color_16 {background:#00b1bb; color:#00b1bb;}
.ballpark_seat_color_17 {background:#96dcb7; color:#96dcb7;}
.ballpark_seat_color_18 {background:#783910; color:#783910;}
.ballpark_seat_color_19 {background:#b9844e; color:#b9844e;}
.ballpark_seat_color_20 {background:#e2b795; color:#e2b795;}
.ballpark_info_facility {width:200px; height:200px; display:inline-block; float:left; color:#666; padding:5px 0px 0px 5px}

/* A regular day holds three games; a postseason day is a best-of-seven and
   holds up to seven, which 125px cannot. The boxes size to their content with
   125px as the floor, and the section wraps as a flex line so a tall box lifts
   its own row rather than stranding the ones after it, which is what floats of
   unequal height do. */
.team_schedule_sec {width:500px; height:auto; display:flex; flex-wrap:wrap; align-items:stretch}
.team_schedule_sec .day_box {width:98px; height:auto; min-height:125px; float:none; display:block; color:#666; border:solid 1px #111; text-align:left; font-size:10px;}
.team_schedule_sec .day_box a { color:#777; text-decoration:none; font-size:10px}
.team_schedule_sec .day_box a:hover {color:#FFF}
.team_schedule_sec .day_box.today {background:#444}
.team_schedule_sec .day_box.today a { color:#fff; text-decoration:none; font-size:10px}
.team_schedule_sec .day_box.today a:hover {color:#999}
.team_schedule_sec .day_box.event {background:#222}
.team_schedule_sec .day_box.event a { color:#999; text-decoration:none; font-size:10px}
.team_schedule_sec .day_box.event a:hover {color:#fff}
.team_schedule_sec .day_box.home {background:#000}
.team_schedule_sec .day_box.home a { color:#666; text-decoration:none; font-size:10px}
.team_schedule_sec .day_box.home a:hover {color:#fff}
.team_schedule_sec .day_box.guest {background:#111}
.team_schedule_sec .day_box.guest a { color:#666; text-decoration:none; font-size:10px}
.team_schedule_sec .day_box.guest a:hover {color:#fff}
.team_schedule_sec .day_box .day_team { text-align:left}
.team_schedule_sec .day_title {width:98px; height:15px; text-align:center; color:#FFF; font-size:12px}

.team_stats_player_filter_sec {width:460px; height:auto; background:#000; color:#333; line-height:1.2em; padding:5px 5px; display:inline-block; font-size: 12px;}
.team_stats_player_table_sec {width:500px; height:auto; background:#000; color:#fff; line-height:1.3em; padding-top:5px; display:inline-block}
.team_stats_player_table th { color:#FFF; padding:9px 0px; border:none; line-height:1.3em; text-align:center; font-size:12px; padding:5px 5px}
.team_stats_player_table th a { color:#FFF; text-decoration:none; font-size:12px}
.team_stats_player_table th a:hover { text-decoration:underline; }
.team_stats_player_table tr { height:auto}
.team_stats_player_table tr.dark { background:#000}
.team_stats_player_table tr.even td { background:#111}
.team_stats_player_table td { color:#999; padding:7px 5px; border-bottom:#000 1px solid; line-height:1.3em; text-align:center; font-size:12px;}
.team_stats_player_table a { color:#6a9cdb; text-decoration:none; font-size:12px}
.team_stats_player_table a:hover { color:#fff; }
.team_stats_player_table td .alignLeft {text-align:left; padding-left:5px; line-height:1.1em; overflow:hidden;}
.team_stats_player_table td .alignLeft .font6 { font-size:6px}


/* Team Colors
 * ------------------------------------------------------------------------------------------- */
.mainColor1 { background-color:#11213b !important; color:#11213b;}
.mainColor2 { background-color:#cb181b !important; color:#cb181b;}
.mainColor3 { background-color:#0c783f !important; color:#0c783f;}
.mainColor4 { background-color:#50668b !important; color:#50668b;}
.mainColor5 { background-color:#2755a2 !important; color:#2755a2;}
.mainColor6 { background-color:#273b78 !important; color:#273b78;}
.mainColor7 { background-color:#492b83 !important; color:#492b83;}
.mainColor8 { background-color:#e46c0a !important; color:#e46c0a;}
.mainColor9 { background-color:#009a50 !important; color:#009a50;}
.mainColor10 { background-color:#04808a !important; color:#04808a;}
.mainColor11 { background-color:#000000 !important; color:#000000;}
.mainColor12 { background-color:#9f0608 !important; color:#9f0608;}
.mainColor13 { background-color:#206e46 !important; color:#206e46;}
.mainColor14 { background-color:#6f121a !important; color:#6f121a;}
.mainColor15 { background-color:#4088b8 !important; color:#4088b8;}
.mainColor16 { background-color:#fab92b !important; color:#fab92b;}
.mainColor17 { background-color:#7f7f7f !important; color:#7f7f7f;}
.mainColor18 { background-color:#7030a0 !important; color:#7030a0;}
.mainColor19 { background-color:#984807 !important; color:#984807;}
.mainColor20 { background-color:#215968 !important; color:#215968;}
.secColor1 { background-color:#fac458 !important; color:#fac458;}
.secColor2 { background-color:#ed5b28 !important; color:#ed5b28;}
.secColor3 { background-color:#ffa827 !important; color:#ffa827;}
.secColor4 { background-color:#009a50 !important; color:#009a50;}
.secColor5 { background-color:#604a7b !important; color:#604a7b;}
.secColor6 { background-color:#00b0f0 !important; color:#00b0f0;}
.secColor7 { background-color:#93cddd !important; color:#93cddd;}
.secColor8 { background-color:#9f217e !important; color:#9f217e;}
.secColor9 { background-color:#aaaaaa !important; color:#aaaaaa;}
.secColor10 { background-color:#ff5d5d !important; color:#ff5d5d;}
.secColor11 { background-color:#000000 !important; color:#000000;}
.secColor12 { background-color:#ff0000 !important; color:#ff0000;}
.secColor13 { background-color:#a6a6a6 !important; color:#a6a6a6;}
.secColor14 { background-color:#4f81bd !important; color:#4f81bd;}
.secColor15 { background-color:#8eb4e3 !important; color:#8eb4e3;}
.secColor16 { background-color:#ffff00 !important; color:#ffff00;}
.secColor17 { background-color:#92d050 !important; color:#92d050;}
.secColor18 { background-color:#43c989 !important; color:#43c989;}
.secColor19 { background-color:#cbb178 !important; color:#cbb178;}
.secColor20 { background-color:#29e3da !important; color:#29e3da;}

/* 21-26, added to fill the picker's two rows. The primary set takes six dark
 * shades and the secondary set six light ones: a club's main colour is what
 * the tables and headers are painted in, and the secondary is the accent
 * sitting on top of it. */
.mainColor21 { background-color:#3f2a56 !important; color:#3f2a56;}
.mainColor22 { background-color:#8c3b1e !important; color:#8c3b1e;}
.mainColor23 { background-color:#14524b !important; color:#14524b;}
.mainColor24 { background-color:#4d4d4d !important; color:#4d4d4d;}
.mainColor25 { background-color:#6b1f3a !important; color:#6b1f3a;}
.mainColor26 { background-color:#1f3d6b !important; color:#1f3d6b;}
.secColor21 { background-color:#d94f70 !important; color:#d94f70;}
.secColor22 { background-color:#f2a65a !important; color:#f2a65a;}
.secColor23 { background-color:#6cc24a !important; color:#6cc24a;}
.secColor24 { background-color:#57b8d9 !important; color:#57b8d9;}
.secColor25 { background-color:#b39ddb !important; color:#b39ddb;}
.secColor26 { background-color:#d9c89e !important; color:#d9c89e;}


/* Team colour picker
 * -------------------------------------------------------------------------------------------
 * A tidy grid rather than a wrapping run of inline spans, so the two rows line
 * up under each other. The chosen colour is marked by a white ring on the chip
 * itself — there is no separate "currently using" swatch, which only repeated
 * one of the twenty-six sitting right beside it. */
.color-grid {display:grid; grid-template-columns:repeat(13, 26px); gap:4px;}
.color-chip {display:block; box-sizing:border-box; width:26px; height:18px; border:1px solid #444; cursor:pointer;}
.color-chip-on {border:2px solid #fff;}


/* Relocation city search
 * -------------------------------------------------------------------------------------------
 * The results of a city search, as a short scrolling list. A club may only
 * move to a city the server handed back, so this list is the only way to
 * choose one — there is no free text box to type into. */
.reloc_hits {max-height:132px; overflow-y:auto; border:1px solid #333; width:280px; margin:4px 0;}
.reloc_hit {display:block; padding:2px 6px; font-size:11px; color:#ccc; text-decoration:none;}
.reloc_hit:hover {background:#222; color:#fff;}
.reloc_hit_on {background:#333; color:#FFcc05;}


/* Footer
 * ------------------------------------------------------------------------------------------- */
.footer {text-align:center; width:500px; height:50px; background:#222; color:#555; font-size:10px; line-height:2.1em; position:fixed; bottom:0px; z-index:1; padding-top:5px}


/* Advertisment Banner
 * ------------------------------------------------------------------------------------------- */
.mobile_ad_320_50 {width:320px; height:50px; background:#fff; float:left }


/*POPWINDOWS
 * ------------------------------------------------------------------------------------------- */
#fancybox-close { top: 0 !important; right:0 !important; }
.popwinTitle { background:#632523; padding:10px; height:15px; text-align:center}
.popwinTitle h3 { font-size:15px; font-weight:bold; color:#ffffff;}
.popwinContent { padding:20px;}
.popwinAction { text-align:center; padding:10px; border-top:#CCC 1px dashed;}
.popwinAction .btn { margin-right:10px;}

#generalPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
.generalPopTitle {background:#632523; line-height: 30px; height:30px; text-align:center; font-size:15px; font-weight:bold; color:#ffffff;}
.generalPopTitle a {color:#000; text-decoration:none; font-size:14px; text-align:right}
.generalPopTitle a:hover {color:#fff;}
.generalPopContent { padding:20px; text-align:center; line-height:1.5em}
.generalPopContent .itemsection {width:380px; height:200px; margin:0 auto;}
.generalPopContent .itembox {width:75px; height:75px; background:#222; float:left; margin:3px; border:#bd7471 4px solid; border-radius:7px;}
.generalPopContent .itembox_mid {width:75px; height:75px; background:#222; margin:0 auto; border:#632523 4px solid; border-radius:7px; }
.generalPopContent img {-webkit-filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.7)); margin-bottom: 10px;  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.7))}
.generalPopContent img.icon {border: none; margin: 0px; filter: none;}
.generalPopContent .mainRedBold {color:#953735; font-weight:bold;}
.generalPopContent .buy_team_terms { width:460px; height:230px;  display:inline-block; text-align:left; margin-top:10px}
.generalPopAction { text-align:center; padding:10px; border-top:#222 1px dashed;}
.generalPopAction .btn { margin-right:10px;}

#choose_createPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#choose_createPitcherPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#choose_createFielderPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#drink_greencowPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
.drink_greencowPopAction { text-align:center; padding:10px; border-top:#222 1px dashed; height: 60px;}
.drink_greencowPopAction .btn { float: left; display: inline-block; width: 66px; height: 40px;  margin:0px 5px; padding: 5px 8px 6px;}
.drink_greencowPopAction .btn.cancel {display: inline-block; width: 55px; line-height: 40px;}
#edit_playerPhotoPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#edit_playerNamePop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#edit_playerNicknamePop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#add_pitch_stylePop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#releasePop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#quick_healPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#leave_teamPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#refresh_dumbbellPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
.refresh_dumbbellPopAction { text-align:center; padding:10px; border-top:#222 1px dashed; height: 60px;}
.refresh_dumbbellPopAction .btn { float: left; line-height: 20px; display: inline-block; width: 108px; height: 40px; margin:0px 7px; padding: 5px 9px 6px;}
.refresh_dumbbellPopAction .btn.cancel {display: inline-block; width: 55px; height: 40px; line-height: 40px;}
#training_selectPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
.training_selectPopAction { text-align:center; padding:10px 10px 10px 8px; border-top:#222 1px dashed; height: 80px;}
.training_selectPopAction .btn { float: left; display: inline-block; width: 65px; height: 55px; margin-right:8px; padding: 5px 9px 6px;}
/* Cancel is narrower than the three duration cards beside it, the same way it
   is in drink_greencowPopAction and refresh_dumbbellPopAction. Without the
   width it took a full 89px card's worth, four of those need 404px, the row
   has 390px, and Cancel wrapped to a second line — outside a container that
   declares height:80px, so it hung below the popup over the page behind. */
.training_selectPopAction .btn.cancel {display: inline-block; width: 55px; line-height: 55px;}
#lucky_starPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#not_enoughPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}

#bailoutPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#addCapitalPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#morale_boostPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#locker_roomPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#break_throughPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
.break_throughPopContent {padding:20px; text-align:center; line-height:1.5em}
.break_throughPopContent img {border: #000 2 solid;}
.break_throughPopAction { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-top:#222 1px dashed; min-height:80px; }
.break_throughPopAction img { border: #000 2 solid; border-radius: 5px; background: #111; margin-right: 5px; }
.break_throughPopAction .btn { display:inline-block; width:110px; height:55px; line-height:55px; padding:5px 4px 6px; }
.break_throughPopAction .btn.floor { width:70px; }

#quick_buyPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
.quick_buy_sec {width: 390px; height: 400px; padding:10px; text-align:center; }
.quick_buy_box {float: left; margin:2px 2px; border-radius:6px; width: 125px; height: 200px; color:#FFF ; font-size: 12px; overflow: hidden; background:#222; line-height:1.4em}
.quick_buy_box img {width:50px; height:50px; border:#333 3px solid; border-radius:3px; display:block; margin:10px auto; }
.quick_buy_box img.icon {width:15px; height:15px; border:none; margin:2px; }
#create_confirmPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
#assignPop { border:#222 6px solid; border-radius:3px; width:408px; background:#000; text-align:center;}
.assignPopTitle { line-height: 30px; height:30px; text-align:center; font-size:15px; font-weight:bold; color:#ffffff;}
.assignPopTitle a {color:#000; text-decoration:none; font-size:14px; text-align:right}
.assignPopTitle a:hover {color:#fff;}

#batting_orderPop { border:#222 6px solid; border-radius:3px; width:408px; background:#000; text-align:center;}
#pitching_rotationPop { border:#222 6px solid; border-radius:3px; width:408px; background:#000; text-align:center;}
#hire_friendPop { border:#222 6px solid; border-radius:3px; width:408px; background:#000; text-align:center;}
.hire_friendTitle { line-height: 30px; height:30px; text-align:center; font-size:15px; font-weight:bold; color:#ffffff;}
.hire_friend_sec {width: 365px; height: 200px; padding:20px; text-align:center; line-height:1.5em}
.hire_friend_box {float: left; width: 90px; height: 130px; font-size: 12px; overflow: hidden;}
.hire_friend_box img {width:50px; height:50px; border:#ccc 3px solid; border-radius:3px; margin-top: 5px; }
.hire_friend_box a {color:#000; text-decoration:none; font-size:14px; text-align:right}
.hire_friend_box a:hover {color:#fff;}
/* position:relative, or the .pop-close-circle inside goes looking for a
   positioned ancestor and lands somewhere off the dialog entirely — which is
   why this popup appeared to have no close button. .generalPop has always had
   it; this one was written without. */
#hire_staffPop { position:relative; border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}
/* Grown by the height of the wage line the cards now carry. */
.hire_staff_sec {width: 365px; height: 260px; padding:20px; text-align:center; }
.hire_staff_sec .info {margin-top: 230px; font-size: 12px; color: #111;}
/* 240, not 200: portrait, flag, name, level, effect, wage, price and the Hire
   button come to a shade under it, and at 200 with overflow hidden the button
   was simply cut off the bottom of every card. Raised to 240 when the wage
   line was added. */
.hire_staff_box {float: left; margin:0px 2px; border-radius:6px; width: 117px; height: 240px; color:#FFF ; font-size: 12px; overflow: hidden; background:#222; line-height:1.3em}
.hire_staff_box img {width:50px; height:50px; border:#ccc 3px solid; border-radius:3px; margin: 10px; }
.hire_staff_box img.icon {width:15px; height:15px; border:none; margin:2px; }
/* The flag is a flag, not a second portrait. Without its own rule the one
   above wins over the width and height attributes and gives it a 3px border. */
.hire_staff_box img.flag {width:30px; height:20px; border:none; border-radius:0; margin:2px; }
/* Two lines whatever the effect says, so three cards keep their Hire buttons
   on one level instead of stepping down the row. */
.hire_staff_box .effect {display:block; height:32px; line-height:16px; overflow:hidden;}
/* Two lines for the name as well, so a one-word name and a long one leave the
   card the same height and the Hire buttons stay level. */
.hire_staff_box .name {display:block; height:32px; line-height:16px; overflow:hidden;}
/* #111 as .hire_staff_sec .info already uses on this same pale panel — the
   inherited body colour is for the dark page behind it, not for here. */
.hire_staff_wallet { padding:0 20px 10px; font-size:16px; color:#111; text-align:center; }
.hire_staff_wallet img.icon { width:20px; height:20px; vertical-align:middle; margin:0 2px 0 4px; }
/* A price on an action button reads at the same size as the one in the wallet
   line above it. Without a rule here the image renders at its natural size. */
.generalPopAction img.icon { width:20px; height:20px; vertical-align:middle; margin:0 0 0 3px; }

#hire_personal_trainerPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}

#editMascotPop { border:#632523 6px solid; border-radius:3px; width:408px; background:#ddd9c3; text-align:center;}


#contract_offerPop, .contract_offerPop {border:#000 0px solid; border-radius:3px; width:420px; max-height:500px; background:url(../default/paper.png) 0 0; position:relative; overflow:hidden; color:#000;}
#contract_offerPop *, .contract_offerPop * { color:#000; }
.pop-close-circle { position:absolute; top:6px; right:8px; color:#333; font-size:14px; font-weight:bold; text-decoration:none; z-index:1; }
.pop-close-circle:hover { color:#f00; }
.contract_offer_boxes { overflow:hidden; }
.contract_offerHeadBox .team_name_line { font-size:16px; line-height:22px; padding-top:9px; }
.contract_offerTitle { line-height: 30px; height:30px; text-align:center; font-size:15px; font-weight:bold; color:#000;}
.contract_offerHeadBox img {float: left; display:inline-block; margin-right: 10px;}
.contract_offerContent { padding:5px 15px; text-align:left; line-height:1.6em}
.contract_offerContent .date {float: right; display:inline-block; font-size: 10px; padding-top: 10px; line-height: 1.5em; text-align:center}
.contract_offerContent .dash{ text-align:center; border-top:#222 1px dashed;}
.contract_offerContent .to_player { text-align:center; padding: 10px;}
.contract_offerContent .box {width: 195px; float: left; display: inline-block;line-height:1.8em; font-size: 14px;}
.contract_offerContent .terms {width: 380px; font-size: 10px ; float: left; display: inline-block;line-height:1.8em; border-bottom:#222 1px dashed; padding: 10px;}
.contract_offerContent .terms li {line-height: 1.8em;}
.contract_offerContent .refuse {width: 160px; float: left; position: relative; bottom: -5px; padding: 20px;  display: inline-block;}
.contract_offerContent .refuse a {color: #f0ece0; font-size: 20px; text-decoration: none;}
.contract_offerContent .refuse a:hover { color: #f00;}
.contract_offerContent .sign {width: 200px; float: right; position: relative; right: 25px; bottom: 55px;  display: inline-block; border-bottom:#000 1px solid; text-align: center;}
.contract_offerContent .sign a {color: #f0ece0; font-size: 20px; font-family: Segoe Script, Vladimir Script, Pristina, Edwardian Script ITC ; text-decoration: none;}
.contract_offerContent .sign a:hover { color: #000;}


/* Modal / Popup Overlay
 * Shared across all pages (Vue: .pop-mask/.pop-center, legacy PHP: #popMask/#generalPop)
 * ------------------------------------------------------------------------------------------- */
.bd-modal-mask {
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.65);
  z-index:9998;
}
.bd-modal-overlay {
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  background:rgba(0,0,0,0.65);
  z-index:9998;
}
.bd-modal-center {
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:9999;
}

/* Vue popup: mask + flex-centered wrapper (no baseline gap)
 * Usage: .pop-mask for overlay, .pop-center for centering container */
.pop-mask {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  z-index:9998;
}
.pop-center {
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.pop-center > * {
  pointer-events:auto;
}

/* bd_result_note: game result status note (e.g. "FINAL: Team A 5, Team B 3") */
.bd_result_note { width:500px; background:#000; color:#fff; text-align:center; padding:5px 0; font-size:13px; }

/* switchmenu image alignment (used when switchmenu items have images) */
.switchmenu li a img { display:inline-block !important; vertical-align:middle; }
.switchmenu li img { display:inline-block !important; vertical-align:middle; }

/* Contest pick overlay: scrollable full-screen panel (different from pop-center which centers) */
.contest_pick_overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9998;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:40px; overflow-y:auto;
}
.contest_pick_panel {
  background:#000; border:1px solid #333; width:490px;
  max-height:85vh; overflow-y:auto; position:relative; flex-shrink:0;
}
.contest_pick_header {
  background:#111; padding:8px 10px; display:flex; align-items:center;
  justify-content:space-between; border-bottom:1px solid #222;
  position:sticky; top:0; z-index:1;
}
.contest_pick_title { color:#fff; font-size:14px; font-weight:bold; }
.contest_pick_close { background:none; border:none; color:#666; font-size:16px; cursor:pointer; }
.contest_pick_close:hover { color:#fff; }
.contest_pick_footer { padding:12px 10px; border-top:1px solid #1a1a1a; text-align:center; }
.contest_hint_msg { text-align:center; font-size:11px; margin-top:6px; color:#666; }
.contest_error_msg {
  background:#1a0000; border:1px solid #c0504d; color:#ff8080;
  padding:8px 10px; margin:8px 10px; font-size:12px;
}

/* Player pick rows inside contest pick panel */
.player_pick_row {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-bottom:1px solid #1a1a1a; cursor:pointer;
}
.player_pick_row:hover { background:#0d0d0d; }
.player_pick_row.selected { background:#0d1a00; border-left:3px solid #66ff00; }
.player_pick_row.disabled { opacity:0.4; cursor:not-allowed; }
.player_pick_row .pick_pos { width:28px; flex-shrink:0; font-size:11px; font-weight:bold; text-align:center; }
.player_pick_row .pick_name { flex:1; font-size:13px; color:#fff; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player_pick_row .pick_ovr { font-size:13px; font-weight:bold; flex-shrink:0; }
.player_pick_row .pick_stat { font-size:11px; flex-shrink:0; color:#666; }
.player_pick_row .pick_check { flex-shrink:0; font-size:13px; font-weight:bold; }

/* Contest lineup display (selected players in pick panel) */
.contest_lineup_display { background:#050505; border-bottom:1px solid #1a1a1a; }
.contest_lineup_entry {
  display:flex; align-items:center; gap:6px;
  padding:5px 10px; border-bottom:1px solid #111; font-size:12px;
}
.contest_lineup_name { flex:1; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contest_rm_btn { background:none; border:none; color:#444; cursor:pointer; font-size:12px; padding:2px 4px; }
.contest_rm_btn:hover { color:#c0504d; }

/* generalPop: full-site standard popup box
 * Close button (.pop-close-circle) is a direct child of .generalPop, position:absolute top-right corner */
.generalPop {
  position:relative;
  border:#632523 6px solid;
  border-radius:3px;
  width:408px;
  background:#ddd9c3;
  text-align:center;
  color:#333;
}
/* The colour classes are written for the dark page, and .generalPop is a pale
   panel (#ddd9c3). Yellow on it measures 1.06:1 -- an Achievement Reward read
   "Dream Hot Dog x 10" in a colour barely distinguishable from the card behind
   it. Re-stated here in the same hues at a legibility that works on this
   background: every one of these clears 4.5:1, where they scored 1.06, 1.42,
   1.50 and 2.00 before.

   Scoped to the pale areas only -- the title bar is dark red with white text
   and must keep it -- and done here rather than in eight views, so a ninth
   popup inherits the fix instead of repeating the bug. */
.generalPopContent .yellow,   .hire_staff_wallet .yellow   { color:#6b5000; }
.generalPopContent .orange,   .hire_staff_wallet .orange   { color:#7a4200; }
.generalPopContent .linkblue, .hire_staff_wallet .linkblue { color:#1f4d80; }
.generalPopContent .white,    .hire_staff_wallet .white    { color:#2b2b2b; }
.generalPopContent .gray,     .hire_staff_wallet .gray     { color:#555555; }
.generalPopContent .red,      .hire_staff_wallet .red      { color:#a80000; }
.generalPop .generalPopTitle {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#632523;
  line-height:30px;
  height:30px;
  font-size:15px;
  font-weight:bold;
  color:#fff;
}
/* Popup body text is one size everywhere: 16px, the body default, stated here
   rather than inherited so it cannot drift. Emphasis is carried by mainRedBold
   on the words that matter — an item's name, how many you hold, a club's name
   — not by making the rest smaller.
   The descendant selectors beat the font10/font12 utilities, which fourteen
   pages had reached for inside a popup and which is what made the same dialog
   look different depending on where it opened. */
.generalPop .generalPopContent {
  padding:20px;
  text-align:center;
  line-height:1.8em;
  color:#333;
  font-size:16px;
}
.generalPop .generalPopContent .font6,
.generalPop .generalPopContent .font10,
.generalPop .generalPopContent .font12 { font-size:16px; }
.generalPop .generalPopContent .pop-field {
  text-align:center;
  margin:4px 0;
}
.generalPop .generalPopContent input[type="text"] {
  color:#333;
  background:#fff;
  border:1px solid #999;
  border-radius:3px;
  padding:4px 6px;
  width:220px;
  font-size:13px;
  display:inline-block;
  margin:2px 0;
}
.generalPop .generalPopContent input[type="file"] {
  display:none;
}
.generalPop .generalPopContent textarea {
  color:#333;
  background:#fff;
  border:1px solid #999;
  border-radius:3px;
  padding:4px 6px;
  font-size:13px;
}
.generalPop .generalPopContent select {
  color:#333;
  background:#fff;
  border:1px solid #999;
  border-radius:3px;
  padding:2px 4px;
  font-size:13px;
}
.generalPop .generalPopContent .pop-file-btn {
  display:inline-block;
  cursor:pointer;
  padding:3px 10px;
  font-size:12px;
  border:1px solid #aaa;
  border-radius:3px;
  background:linear-gradient(to bottom,#fff,#e0e0e0);
  color:#333;
  margin-left:4px;
}
.generalPop .generalPopAction {
  text-align:center;
  padding:10px;
  border-top:#222 1px dashed;
}
.generalPop .generalPopAction .btn {
  margin-right:10px;
}

/* teamPop: team page popup — border uses team's main color, full black theme */
.generalPop.teamPop {
  background: #000 !important;
}
.generalPop.teamPop.mainColor1  { border-color:#11213b !important; }
.generalPop.teamPop.mainColor2  { border-color:#cb181b !important; }
.generalPop.teamPop.mainColor3  { border-color:#0c783f !important; }
.generalPop.teamPop.mainColor4  { border-color:#50668b !important; }
.generalPop.teamPop.mainColor5  { border-color:#2755a2 !important; }
.generalPop.teamPop.mainColor6  { border-color:#273b78 !important; }
.generalPop.teamPop.mainColor7  { border-color:#492b83 !important; }
.generalPop.teamPop.mainColor8  { border-color:#e46c0a !important; }
.generalPop.teamPop.mainColor9  { border-color:#009a50 !important; }
.generalPop.teamPop.mainColor10 { border-color:#04808a !important; }
.generalPop.teamPop.mainColor11 { border-color:#555    !important; }
.generalPop.teamPop.mainColor12 { border-color:#9f0608 !important; }
.generalPop.teamPop.mainColor13 { border-color:#206e46 !important; }
.generalPop.teamPop.mainColor14 { border-color:#6f121a !important; }
.generalPop.teamPop.mainColor15 { border-color:#4088b8 !important; }
.generalPop.teamPop.mainColor16 { border-color:#fab92b !important; }
.generalPop.teamPop.mainColor17 { border-color:#7f7f7f !important; }
.generalPop.teamPop.mainColor18 { border-color:#7030a0 !important; }
.generalPop.teamPop.mainColor19 { border-color:#984807 !important; }
.generalPop.teamPop.mainColor20 { border-color:#215968 !important; }
.generalPop.teamPop .generalPopContent {
  background: #000;
  color: #ccc;
  height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}
.generalPop.teamPop .generalPopAction {
  background: #000;
  border-top-color: #333;
}
.generalPop.teamPop .team_table th {
  background: #000 !important;
  color: #999;
  position: sticky;
  top: 0;
  z-index: 1;
}
.generalPop.teamPop .pop-close-circle {
  background: #000;
  color: #fff;
  border-color: inherit;
}
.generalPop.teamPop.mainColor1  .pop-close-circle { border-color:#11213b; }
.generalPop.teamPop.mainColor2  .pop-close-circle { border-color:#cb181b; }
.generalPop.teamPop.mainColor3  .pop-close-circle { border-color:#0c783f; }
.generalPop.teamPop.mainColor4  .pop-close-circle { border-color:#50668b; }
.generalPop.teamPop.mainColor5  .pop-close-circle { border-color:#2755a2; }
.generalPop.teamPop.mainColor6  .pop-close-circle { border-color:#273b78; }
.generalPop.teamPop.mainColor7  .pop-close-circle { border-color:#492b83; }
.generalPop.teamPop.mainColor8  .pop-close-circle { border-color:#e46c0a; }
.generalPop.teamPop.mainColor9  .pop-close-circle { border-color:#009a50; }
.generalPop.teamPop.mainColor10 .pop-close-circle { border-color:#04808a; }
.generalPop.teamPop.mainColor11 .pop-close-circle { border-color:#555;    }
.generalPop.teamPop.mainColor12 .pop-close-circle { border-color:#9f0608; }
.generalPop.teamPop.mainColor13 .pop-close-circle { border-color:#206e46; }
.generalPop.teamPop.mainColor14 .pop-close-circle { border-color:#6f121a; }
.generalPop.teamPop.mainColor15 .pop-close-circle { border-color:#4088b8; }
.generalPop.teamPop.mainColor16 .pop-close-circle { border-color:#fab92b; }
.generalPop.teamPop.mainColor17 .pop-close-circle { border-color:#7f7f7f; }
.generalPop.teamPop.mainColor18 .pop-close-circle { border-color:#7030a0; }
.generalPop.teamPop.mainColor19 .pop-close-circle { border-color:#984807; }
.generalPop.teamPop.mainColor20 .pop-close-circle { border-color:#215968; }
.generalPop.teamPop .pop-close-circle:hover {
  background: #111;
}

/* The item picture at the top of a popup. Three views had written this same
   declaration into their own scoped styles, which meant a fourth popup could
   not reach it without writing it a fourth time. */
.pop-img { display:block; margin:0 auto 10px; }

/* Every popup on a pale panel reads black.
 *
 * The panels are #ddd9c3 but most of them never set a text colour, so their
 * words inherited whatever the dark page behind them was using — light grey
 * on cream, which is close to unreadable. .generalPop had been given color
 * (#333) at some point and the others had not, which is why the same popup
 * could be legible in one place and a ghost in another. This states it once
 * for all of them.
 *
 * The title bars are excluded: they are dark red with white text, and a rule
 * that blackened them would hide the close button and the title itself. */
#generalPop,
#hire_staffPop,
#hire_personal_trainerPop,
#editMascotPop,
#drink_greencowPop { color:#333; }
#generalPop .generalPopContent,
#hire_staffPop .hire_staff_sec,
#hire_personal_trainerPop .generalPopContent,
#editMascotPop .generalPopContent,
#drink_greencowPop .generalPopContent { color:#333; }

/* Close button: dark circle at top-right corner of .generalPop */
.pop-close-circle {
  position:absolute;
  right:-14px;
  top:-14px;
  width:26px;
  height:26px;
  line-height:24px;
  text-align:center;
  background:#3a1210;
  border:2px solid #7a3230;
  border-radius:50%;
  color:#ddd;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  display:block;
  z-index:1;
}
.pop-close-circle:hover {
  background:#222;
  color:#fff;
}
.pages1 {
  text-align:center;
  margin:8px 0 4px;
  color:#666;
  font-size:12px;
}
.pages1 .btn {
  padding:2px 6px;
  margin:0 2px;
}

/* Language selector modal
 * user_profile.php
 * ------------------------------------------------------------------------------------------- */
.bd-lang-modal {
  display:none;
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  background:rgba(0,0,0,0.55);
  z-index:9999;
}
.bd-lang-modal-inner {
  width:320px;
  max-width:90%;
  margin:12% auto;
  background:#fff;
  border-radius:12px;
  padding:14px;
}
.bd-lang-modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.bd-lang-modal-title { font-weight:700; font-size:16px; }
.bd-lang-modal-close { text-decoration:none; font-size:18px; }
.bd-lang-modal-body { margin-top:12px; }
.bd-lang-btn { display:block; text-align:center; margin:8px 0; }

/* Flash message
 * contest_face_pick.php
 * ------------------------------------------------------------------------------------------- */
.bd_flash {
  clear:both;
  width:640px;
  max-width:95%;
  margin:8px auto 10px auto;
  padding:8px 30px 8px 12px;
  border:1px solid #555;
  background:#ddd9c3;
  color:#111;
  text-align:center;
  font-size:12px;
  box-sizing:border-box;
  position:relative;
}
.bd_flash .bd_flash_close {
  position:absolute;
  right:8px; top:5px;
  display:block;
  width:18px; height:18px;
  line-height:18px;
  text-align:center;
  color:#000;
  text-decoration:none;
  font-weight:bold;
}

/* Popup action forms
 * generalPopAction / drink_greencowPopAction — contest pages
 * ------------------------------------------------------------------------------------------- */
.popupSubmitForm { margin:0; display:block; }
.generalPopAction form { margin:0; display:inline; }
.generalPopAction button.btn { border:0; cursor:pointer; }
.generalPopAction button.disabled { cursor:default; }
.generalPopAction button.btn,
.drink_greencowPopAction button.btn {
  font-family:inherit;
  font-size:12px;
  line-height:18px;
  padding:4px 10px;
  margin:0 2px;
  display:inline-block;
  vertical-align:middle;
  box-sizing:border-box;
  height:auto;
  min-height:0;
  border-width:1px;
  border-style:solid;
  cursor:pointer;
}
.generalPopAction .btn.disabled,
.drink_greencowPopAction .btn.disabled { cursor:default; opacity:.45; }
.generalPopAction .btn img,
.drink_greencowPopAction .btn img { vertical-align:middle; }
.drink_greencowPopAction .btn,
#drink_greencowPop .btn { white-space:nowrap; }
.drink_greencowPopAction .popupBtnLabel { display:inline-block; vertical-align:middle; }
.playerBars .btn.small img { vertical-align:middle; }

/* Tab red notification dot
 * calendar.php header tabs
 * ------------------------------------------------------------------------------------------- */
.tabDot {
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
  background:#ff2b2b;
  margin-left:6px;
  vertical-align:middle;
}

/* Daily login state opacity overrides
 * calendar.php
 * ------------------------------------------------------------------------------------------- */
.dailylogin_state_future { opacity:.55; }
.dailylogin_state_missed { opacity:.9; }
.dailylogin_state_makeup_available { opacity:1; }

/* Empty state message
 * agent_home.php, game_matchup.php, inventory pages
 * ------------------------------------------------------------------------------------------- */
.bd-empty { padding:12px; color:#999; }
.bd-empty-lg { padding:20px; color:#999; text-align:center; }

/* Form feedback messages
 * signup.php
 * ------------------------------------------------------------------------------------------- */
.bd-msg-error { color:#b00020; margin-bottom:10px; }
.bd-msg-success { color:#0a7d2c; margin-bottom:10px; }

/* Clearfix utility
 * ------------------------------------------------------------------------------------------- */
.bd-clear { clear:both; }
.contract_offerContent .sign .fixed { color: #000; font-size: 20px; font-family: Segoe Script, Vladimir Script, Pristina, Edwardian Script ITC ; text-decoration: none;}

/* Click feedback & popup entrances
 * -------------------------------------------------------------------------------------------
 * Two effects, both built from transform and opacity only, both off when the
 * reader has asked for reduced motion. Gold is the brand's #FFCC05 — the same
 * value .yellow already carries — and nothing here introduces a new colour.
 */

/* ── Button press ──
 * Down, gold, and a small rebound: about 200ms end to end, closer to an arcade
 * cabinet button than to a bounce. The element never leaves its place in the
 * layout, so a row of buttons cannot shift while one is pressed. */
.bd-click-fx { position: relative; }

.bd-click-fx.bd-pressing {
  animation: bdPress 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bdPress {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.94); box-shadow: 0 0 0 2px rgba(255, 204, 5, 0.35), 0 0 12px rgba(255, 204, 5, 0.55); }
  70%  { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(255, 204, 5, 0.18), 0 0 8px rgba(255, 204, 5, 0.25); }
  100% { transform: scale(1); box-shadow: none; }
}

/* The impact flash: one compact gold ring that leaves from the button's edge
   rather than a circle crawling out of the click point. */
.bd-click-fx .bd-ripple {
  position: absolute;
  left: -3px; top: -3px; right: -3px; bottom: -3px;
  border: 2px solid #FFCC05;
  border-radius: inherit;
  opacity: 0.9;
  pointer-events: none;
  animation: bdRipple 300ms ease-out forwards;
}

@keyframes bdRipple {
  0%   { transform: scale(0.92); opacity: 0.9; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* ── Popup entrance ──
 * The ordinary one: a short fade and a small step up in scale. Everything that
 * opens gets this, because a dialog appearing from nothing reads as a glitch. */
.bd-popup-enter {
  animation: bdPopIn 210ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bdPopIn {
  0%   { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* The full burst, for the moments that have earned it — a Lucky Star, an
   achievement, a breakthrough. Overshoots to 1.06 and settles. */
.bd-popup-burst-enabled {
  animation: bdPopBurst 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bdPopBurst {
  0%   { transform: scale(0.72); opacity: 0; }
  65%  { transform: scale(1.06); opacity: 1; }
  82%  { transform: scale(0.98); }
  100% { transform: scale(1); opacity: 1; }
}

/* The rays sit behind the panel and never take a click. The layer is square
   and centred so every ray leaves from the same point. */
.bd-popup-burst {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
}

/* The panel is 420px wide and taller than it is not, so a ray that only
   reaches 90px from the centre is entirely behind it and nothing is seen. Each
   ray hangs from the centre point (transform-origin at its top), is rotated
   into place, and is then pushed outward far enough to clear the panel before
   it is drawn. */
.bd-popup-burst .bd-ray {
  position: absolute;
  left: 0; top: 0;
  width: 8px;
  height: 220px;
  margin-left: -4px;
  background: linear-gradient(to bottom, rgba(255, 204, 5, 0), #FFCC05);
  transform-origin: 50% 0%;
  opacity: 0;
  animation: bdRay 700ms ease-out forwards;
}

/* Every third ray is white, so the fan reads as light rather than as a solid
   gold disc. */
.bd-popup-burst .bd-ray.bd-ray-white {
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #ffffff);
}

@keyframes bdRay {
  0%   { opacity: 0; transform: rotate(var(--bd-ray-angle)) translateY(150px) scaleY(0.2); }
  25%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--bd-ray-angle) + 14deg)) translateY(260px) scaleY(1); }
}

/* A handful of gold diamonds thrown clear of the panel. Deliberately few —
   this is an impact, not confetti. */
.bd-popup-burst .bd-spark {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: #FFCC05;
  transform: rotate(45deg);
  opacity: 0;
  animation: bdSpark 820ms ease-out forwards;
}

@keyframes bdSpark {
  0%   { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(0.4); }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--bd-spark-x), var(--bd-spark-y)) rotate(225deg) scale(1.3); }
}

/* A single gold ring thrown out past the panel. The rays and sparks read as
   detail; this is the part that is seen from the corner of the eye. */
.bd-popup-burst .bd-ring {
  position: absolute;
  left: 0; top: 0;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border: 5px solid #FFCC05;
  border-radius: 50%;
  opacity: 0;
  animation: bdRing 640ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bdRing {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(6); }
}

/* The burst is a sibling of the panel, not a child of it.
 *
 * Inside the panel it would be hidden behind an opaque #ddd9c3 background, and
 * the rule that tried to fix that — position:relative on every direct child —
 * caught .pop-close-circle, which is absolute for a reason, and dropped it into
 * the flow. So the layer goes next to the panel in .pop-center, which is
 * already a centred fixed overlay, and simply paints under it. */
.pop-center > .bd-popup-burst {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 0;
  /* .pop-center > * turns pointer events back on for its children; the burst
     is decoration and must not take a click meant for the panel. */
  pointer-events: none;
}
.pop-center > .generalPop,
.pop-center > .contract_offerPop,
.pop-center > .pop-container,
.pop-center > #generalPop { position: relative; z-index: 1; }

/* ── Reduced motion ──
 * No rays, no sparks, no rebound. The popup still appears and everything still
 * works; it simply arrives instead of bursting. */
@media (prefers-reduced-motion: reduce) {
  .bd-click-fx.bd-pressing { animation: none; }
  .bd-click-fx .bd-ripple { display: none; }
  .bd-popup-burst { display: none; }
  .bd-popup-enter,
  .bd-popup-burst-enabled { animation: bdPopFade 120ms linear; }
  @keyframes bdPopFade { from { opacity: 0; } to { opacity: 1; } }
}

/* All-Star Fan Voting day strip
 * league_detail.php — the seven days of the race, one badge each, split evenly
 * across the standard 500px column. The art carries its own day label, so the
 * state is opacity alone: dimmed for a day you are not on, full for the one
 * you are.
 * ------------------------------------------------------------------------------------------- */
.as_day_strip {display:flex; width:500px; background:#000}
.as_day_strip li {flex:1 1 0; display:block; float:none; text-align:center}
/* The height is the cell's own, not the image's. An anchor sized only by what
   it contains disappears when the artwork does, taking the click with it. */
.as_day_strip li a {display:block; padding:2px 0px; text-decoration:none; min-height:70px}
/* Stands in for a day tile that would not load, so the cell is still a day
   you can read and press. */
.as_day_strip li .as_day_no {display:block; line-height:70px; font-size:18px; color:#888}
.as_day_strip li.navOn .as_day_no {color:#fff}
.as_day_strip li img {display:block; margin:0px auto; opacity:0.45}
.as_day_strip li a:hover img {opacity:0.8}
.as_day_strip li.navOn img {opacity:1}

/* All-Star Fan Voting tab strips
 * league_detail.php — conference and position, each split into equal cells so
 * a two-tab row and an eleven-tab row both fill the column instead of
 * bunching at the left. .genmenu sizes its cells by their text, which is right
 * for menus of unequal names and wrong for a row of positions.
 * ------------------------------------------------------------------------------------------- */
.as_tabs {display:flex; width:500px; background:#000; margin-top:10px}
.as_tabs li {flex:1 1 0; display:block; float:none; text-align:center; border-right:#222 1px solid}
.as_tabs li:last-child {border-right:none}
.as_tabs li a {padding:5px 2px; background:#000; color:#666; text-decoration:none; font-size:14px; display:block}
.as_tabs li a:hover {color:#fff}
.as_tabs li.navOn a {color:#fff; font-weight:bold; cursor:default}

/* All-Star Fan Voting cards
 * league_detail.php — three to a row, laid out like .league_leaders_box but
 * not that class: League Leaders uses it on the same page and must not change
 * with this. The leader's border is the brand's own #FFCC05 and everybody
 * else keeps the ordinary #222, so the gold means something. Link colours are
 * the site's #999 resting / #FFF hovered, as .close_btn and .forgetpass
 * already use. Fixed height so a card with a long club name is the same size
 * as one without and the rows stay level.
 * ------------------------------------------------------------------------------------------- */
.as_vote_sec {width:500px; height:auto; background:#000; color:#333; padding-top:10px; display:inline-block}
.as_vote_box {width:160px; height:250px; background:#111; padding-top:10px; margin:2px 2px; float:left;
  font-size:12px; color:#FFF; overflow:hidden; border:#222 1px solid; border-radius:3px;
  text-align:center; line-height:1.3em}
/* The leader, and only the leader, is picked out in the brand's gold. */
.as_vote_lead {border-color:#FFCC05}
.as_vote_box > div {margin-bottom:12px}
.as_vote_box a {color:#6a9cdb; text-decoration:none; font-size:12px}
.as_vote_box a:hover {color:#fff}
.as_vote_box a.lightgray {color:#999}
.as_vote_box a.lightgray:hover {color:#fff}
.as_vote_box .as_vote_logo {vertical-align:middle; margin-right:10px}
.as_vote_box .as_vote_pic {vertical-align:middle}
.as_vote_box .national_flag {margin:0px auto 12px auto}

/* All-Star finalists — three to a table row
 * league_detail.php — each cell is one man shown the way the roster shows him:
 * the club badge beside the portrait, and the portrait carrying its own flag,
 * overall and position via .head_Pic50_*. Those classes are absolutely
 * positioned against the frame, so the pair needs a positioned inline-block of
 * its own to sit in rather than the table cell.
 *
 * Its own section, not .league_standings_box: that one is 240px wide and 800px
 * tall because it holds a conference's whole standings table two abreast.
 * Three portraits do not fit across 240px, and eleven positions of it came to
 * nearly nine thousand pixels of mostly empty box.
 * ------------------------------------------------------------------------------------------- */
.as_finalist_sec {width:500px; height:auto; background:#000; display:inline-block; margin-top:5px}
.as_finalist_cell {width:33%; text-align:center; vertical-align:top}
/* The home plate hangs 20px below the 50px portrait (.head_Pic50_overall is
   at top:40 and 30px tall), so the bottom padding has to clear it or the
   name underneath is sat on. */
.as_finalist_pics {display:inline-block; position:relative; padding:15px 10px 24px 10px}
.as_finalist_pics .as_finalist_logo {vertical-align:top; margin-right:10px}
.as_finalist_pics .head_Pic50 {display:inline-block; position:relative}
/* A block of its own on a new line. Inline after the frame, it ran up the
   right-hand side of the portrait and under the home plate. */
.as_finalist_name {display:block; clear:both; line-height:1.3em}

/* -------------------------------------------------------------------------------------------
 * Home Run Derby — the bracket
 *
 * Eight men are seeded on qualification, four go through, and it is a knockout
 * from there: two semi-finals, then the final. Read top to bottom rather than
 * left to right, because the page is 500px wide and four columns of portraits
 * across that is 125px a man — the badge and the face alone are 110 of it.
 *
 * The player cell is the finalists' one, class for class. He is the same
 * person on both pages and there is no reason for him to be drawn twice.
 * ------------------------------------------------------------------------------------------- */
/* Centred, so the champion's single card sits in the middle of the page
   rather than against its left edge. */
.as_derby_sec {width:500px; height:auto; background:#000; display:inline-block;
  margin-top:5px; text-align:center}
/* Four across for the qualification field: 25% of 500 is 125px. */
.as_derby_seed_cell {width:25%; text-align:center; vertical-align:top}
/* Two matchups abreast in the semi-finals, one centred in the final. */
.as_derby_matchup {width:300px; display:inline-block; vertical-align:top; margin:5px 2px;
  background:#111; border:1px solid #333}
.as_derby_matchup_final {width:300px; display:inline-block; vertical-align:top; margin:5px 2px;
  background:#111; border:1px solid #6b5a1e}
/* The two men in a matchup stand side by side, the way they faced each other.
   Half of 300px gives each 150px, more room than the qualification cells and
   enough that a long name does not break over three lines. */
.as_derby_slot {display:inline-block; width:50%; box-sizing:border-box; vertical-align:top;
  padding:2px 0; border-right:1px solid #222}
.as_derby_slot:last-child {border-right:none}
/* The champion stands alone, so he takes the whole box. */
.as_derby_slot_solo {width:100%; border-right:none}
.as_derby_slot_win {background:#1a1608}
/* The flag hangs 15px above the portrait and 9px to the left of it, so the
   club badge needs more than 9px of clearance or the flag lands on it. At
   150px the default 10px of side padding still fits; the gap is set here
   anyway so both halves of a matchup measure the same. */
.as_derby_slot .as_finalist_pics {padding:15px 0 24px 0}
.as_derby_slot .as_finalist_logo {margin-right:12px}

/* Qualification stacks the badge under the portrait rather than beside it: at
   125px a cell they do not fit side by side, and when they wrapped the flag
   came down on the badge.
 *
 * column-reverse rather than reordering the markup, so the one card component
 * still serves the bracket and the finalists.
 *
 * The gap has to clear what hangs below the portrait. The overall's home plate
 * sits at top:40 and the level badge at top:36, both 30px tall, so the lowest
 * of them ends 20px past the 50px portrait. 22px clears it with two to spare;
 * anything less and the badge wears the home plate. */
.as_derby_seed_cell .as_finalist_pics {
  display:flex; flex-direction:column-reverse; align-items:center; padding:15px 0 2px 0}
.as_derby_seed_cell .as_finalist_logo {margin:22px 0 0 0}
/* The home run count, which is the whole point of the round. */
.as_derby_hr {display:block; font-size:20px; line-height:1em}
.as_derby_hr_label {font-size:10px}
/* The line under a matchup that says a tie had to be swung off. */
.as_derby_tie {display:block; font-size:10px; padding:2px 6px}
