/**
 * Variables
 *
 */
/**
 * Typography
 *
 */
h1 {
  font-size: 138.5%;
}
h2 {
  font-size: 123.1%;
}
h3 {
  font-size: 108%;
}
h1,
h2,
h3 {
  margin: 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: bold;
}
abbr,
acronym {
  border-bottom: 1px dotted #000;
  cursor: help;
}
em {
  font-style: italic;
}
blockquote,
ul,
ol,
dl {
  margin: 1em;
}
ol,
ul,
dl {
  margin-left: 2em;
}
ol li {
  list-style: decimal outside;
}
ul li {
  list-style: disc outside;
}
dl dd {
  margin-left: 1em;
}
th,
td {
  border: 1px solid #000;
  padding: .5em;
}
th {
  font-weight: bold;
  text-align: center;
}
caption {
  margin-bottom: .5em;
  text-align: center;
}
p,
fieldset,
table {
  margin-bottom: 1em;
}
a {
  text-decoration: none;
}
small {
  font-size: 75%;
}
/**
 * Buttons
 *
 */
.btn-success,
.btn-error,
.btn-warning,
.btn-secondary {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  display: inline-block;
  zoom: 1;
  line-height: normal;
  white-space: nowrap;
  vertical-align: baseline;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 100%;
  padding: .5em 1.5em;
  /*
  color: #444;
  color: rgba(0,0,0,.8);
  border: 1px solid #999;
  border: 0 rgba(0,0,0,0);
  background-color: #E6E6E6;
  */
  text-decoration: none;
  border-radius: 2px;
  -webkit-transition: 0.1s linear -webkit-box-shadow;
  -moz-transition: 0.1s linear -moz-box-shadow;
  -ms-transition: 0.1s linear box-shadow;
  -o-transition: 0.1s linear box-shadow;
  transition: 0.1s linear box-shadow;
}
.btn-success {
  background: #1cb841;
  /* this is a green */
}
.btn-error {
  background: #ca3c3c;
  /* this is a maroon */
}
.btn-warning {
  background: #df7514;
  /* this is an orange */
}
.btn-secondary {
  background: #42b8dd;
  /* this is a light blue */
}
.btn-large {
  font-size: 110%;
}
/**
 * Misc (For all devices)
 *
 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
body {
  font: 14px "Lucida Grande", sans-serif, Arial, Helvetica;
}
canvas,
#start-screen {
  width: 640px;
  height: 480px;
  position: absolute;
  left: auto;
  top: auto;
}
#start-screen {
  background-image: url("../images/start-bg.png");
  background-repeat: no-repeat;
}
.hide {
  visibility: hidden;
}
.ui-wrapper,
.ui-start {
  width: 1024px;
}
.ui-wrapper .ui-header,
.ui-start .ui-header {
  height: 32px;
  background: #eee;
  padding: 0px;
  margin: 0px;
  padding-bottom: 8px;
}
.ui-wrapper .ui-header .notification-area,
.ui-start .ui-header .notification-area,
.ui-wrapper .ui-header .status-area,
.ui-start .ui-header .status-area {
  padding: 0px;
  margin: 0px;
}
.ui-wrapper .ui-header .notification-area p,
.ui-start .ui-header .notification-area p,
.ui-wrapper .ui-header .status-area p,
.ui-start .ui-header .status-area p {
  padding-top: 16px;
  margin: 0px;
}
.ui-wrapper .ui-header .notification-area,
.ui-start .ui-header .notification-area {
  float: left;
  text-align: center;
  width: 656px;
}
.ui-wrapper .ui-header .status-area,
.ui-start .ui-header .status-area {
  float: right;
  text-align: right;
  width: 368px;
}
.ui-wrapper .ui-header .status-area .cash,
.ui-start .ui-header .status-area .cash,
.ui-wrapper .ui-header .status-area #time,
.ui-start .ui-header .status-area #time {
  font-weight: bold;
  margin: 0px;
  padding: 0px;
}
.ui-wrapper .ui-header .status-area .cash,
.ui-start .ui-header .status-area .cash {
  float: left;
  margin-right: 30px;
}
.ui-wrapper .ui-header .status-area #time,
.ui-start .ui-header .status-area #time {
  float: right;
  margin-right: 16px;
}
.ui-content {
  background-image: url("../images/bg_test_2.png");
  background-repeat: no-repeat;
}
.ui-content {
  width: 1024px;
  height: 512px;
}
.ui-content .left,
.ui-content .right {
  height: 496px;
}
.ui-content .left {
  background-image: url("../images/SB-bg.png");
  background-repeat: no-repeat;
  width: 640px;
  margin: 16px 0px 0px 16px;
  float: left;
}
.ui-content .right {
  width: 352px;
  margin: 16px 16px 0px 0px;
  float: right;
  overflow: hidden;
}
.ui-content .right table {
  width: 100%;
  border: none;
  padding: 0px;
  margin: 0px;
  border-collapse: collapse;
}
.ui-content .right table p {
  text-align: left;
}
.ui-content .right th,
.ui-content .right td {
  background-image: url("../images/button_bg.png");
  background-repeat: repeat-x;
  border: 1px solid black;
  cursor: pointer;
}
.ui-content .right th:hover,
.ui-content .right td:hover {
  /* */
}
.ui-content .right .no-bg,
.ui-content .right .no-bg:hover {
  background-image: none;
  border: none;
}
.ui-content .right .buy-area {
  margin-bottom: 10px;
}
.ui-content .right .status-area {
  margin-bottom: 6px;
}
.ui-content .right .status-area p {
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.ui-content .right .person-area td {
  width: 33.3333%;
}
.ui-content .right .person-area .person {
  text-align: center;
}
.ui-content .right .person-area .person-coder-img {
  background-color: #87c12e;
}
.ui-content .right .person-area .person-manager-img {
  background-color: #b6334c;
}
.ui-content .right .hidden {
  display: none;
}
.no-margin-bottom {
  margin-bottom: 4px;
}
.no-margin-top {
  margin-top: 0px;
  margin-bottom: 8px;
}
.gray {
  color: #747474;
}
.visiblee {
  display: block;
}
#notification {
  font-size: 16px;
  font-weight: bold;
}