body {
  width: 100%;
  clear: both;
  *zoom: 1;
}
body:before,
body:after {
  content: "";
  display: table;
}
body:after {
  clear: both;
}
/*div.center, #body-inner, #header-logo, #top-container {*/
div.center,
#body-inner,
#top-container {
  width: 100%;
  max-width: 1024px;
  /*width: 960px;*/

  margin: 0 auto;
  overflow: hidden;
}
.cf {
  clear: both;
  *zoom: 1;
}
.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.always-full-width {
  display: inline;
  float: left;
  width: 97.91666666666666%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/* ====================================== header ====================================== */
header#top {
  display: inline;
  float: left;
  width: 97.91666666666666%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
  margin-bottom: 1em;
}
#header-logo {
  clear: both;
  display: inline;
  float: left;
  width: 97.91666666666666%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.header h1 {
  font-size: 3.2em;
}
/* ====================================== login & invite organiser ====================================== */
#login {
  display: inline;
  float: left;
  width: 64.58333333333334%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
  margin-left: 17.708333333333332%;
}
#login input[type="email"],
#login input[type="password"] {
  width: 100%;
}
#login #inner {
  width: 65%;
  margin: auto auto;
}
#normal-signup {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/* ====================================== signup ====================================== */
.signup-send-with-help .wizard-buttons {
  display: inline;
  float: left;
  width: 31.25%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.signup-send-with-help .help-box {
  display: inline;
  float: left;
  width: 64.58333333333334%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.amend-players-send-with-help .wizard-buttons {
  display: inline;
  float: left;
  width: 43.75%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.amend-players-send-with-help .help-box {
  display: inline;
  float: left;
  width: 52.083333333333336%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.team-name-create,
.team-name-squad {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.main-login,
.alt-login {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/* ====================================== dash ====================================== */
.area1 {
  display: inline;
  float: left;
  width: 97.91666666666666%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.dash-component {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.status-block {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.status-lo {
  display: inline;
  float: left;
  width: 31.25%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.status {
  width: 85%;
  float: left;
}
.game-info {
  clear: left;
  float: right;
}
.empty-box {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.top-5 {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/* ====================================== createGame ====================================== */
.create-game-details {
  display: inline;
  float: left;
  width: 97.91666666666666%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.create-game-details .create-when,
.create-game-details .create-where {
  width: 49%;
  float: left;
  margin-bottom: 1em;
}
/* ====================================== sendOutTeams (& others) ====================================== */
.quick-instructions {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.quick-instructions .date-box {
  float: right;
}
.team-selection .player-box {
  display: inline;
  float: left;
  width: 31.25%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.send-with-help .wizard-buttons,
.send-with-help .help-box {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/* ====================================== response ====================================== */
.response-feedback .action-box {
  display: inline;
  float: left;
  width: 77.08333333333334%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.response-feedback .quick-response .response-box {
  width: 16em;
}
.date-container {
  display: inline;
  float: left;
  width: 18.75%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.date-container .date-box {
  float: right;
}
.game-messages,
.players-to-play {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/* ====================================== enterResult ====================================== */
.result-team-selection {
  display: inline;
  float: left;
  width: 64.58333333333334%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.result-team-selection .result-container {
  display: block;
  width: 103.125%;
  margin: 0 -1.5625%;
  clear: both;
  *zoom: 1;
}
.result-team-selection .result-container:before,
.result-team-selection .result-container:after {
  content: "";
  display: table;
}
.result-team-selection .result-container:after {
  clear: both;
}
.result-team-selection .result-container .player-box {
  display: inline;
  float: left;
  width: 46.875%;
  margin-left: 1.5625%;
  margin-right: 1.5625%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.result-team-selection .result-container .player-box {
  display: inline;
  float: left;
  width: 46.875%;
  margin-left: 1.5625%;
  margin-right: 1.5625%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.result-team-selection .result-container .team-result-box,
.result-team-selection .result-container .draw-box {
  display: inline;
  float: left;
  width: 46.875%;
  margin-left: 1.5625%;
  margin-right: 1.5625%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.result-team-selection .result-container .small-button {
  display: block;
  margin: 0 auto;
  min-width: 50%;
}
.result-team-selection .result-container .draw-box {
  margin-left: 26.041666666666668%;
}
.non-players {
  display: inline;
  float: left;
  width: 31.25%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.help-box {
  display: inline;
  float: left;
  width: 97.91666666666666%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/* ====================================== squadStats ====================================== */
.stats-this-month,
.stats-last-month {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.stats-all-time {
  display: inline;
  float: left;
  width: 97.91666666666666%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.stats-config {
  display: inline;
  float: left;
  width: 64.58333333333334%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
.stats-help {
  display: inline;
  float: left;
  width: 31.25%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/* ====================================== listGames ====================================== */
.game-list li {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin-left: 1.0416666666666665%;
  margin-right: 1.0416666666666665%;
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------- MEDIA Q 768 -----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  #body-inner,
  .header,
  #top-container {
    width: 100%;
  }
  /* ====================================== header ====================================== */
  .header h1 {
    font-size: 2.8em;
  }
  /* ====================================== login & invite organiser ====================================== */
  #login {
    display: inline;
    float: left;
    width: 81.25%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
    margin-left: 9.374999999999998%;
  }
  #login #inner {
    width: 80%;
  }
  /* ====================================== signup ====================================== */
  .signup-send-with-help .wizard-buttons .big-button {
    width: 100%;
  }
  .team-name-create {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .team-name-squad {
    display: none;
  }
  /* ====================================== dash ====================================== */
  .dash-component {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .status-block {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .status {
    width: 90%;
  }
  .empty-box,
  .top-5 {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  /* ====================================== createGame ====================================== */
  .create-game-details {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .create-game-details .create-when,
  .create-game-details .create-where {
    width: 99%;
    float: left;
  }
  /* ====================================== sendOutTeams (& others) ====================================== */
  .team-selection .player-box {
    display: inline;
    float: left;
    width: 47.91666666666667%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .team-selection .reserve-players {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .send-with-help .wizard-buttons input {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  /* ====================================== response ====================================== */
  .response-feedback .action-box {
    display: inline;
    float: left;
    width: 64.58333333333334%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .date-container {
    display: inline;
    float: left;
    width: 31.25%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .game-messages,
  .players-to-play {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  /* ====================================== enterResult ====================================== */
  .result-team-selection {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .result-team-selection .result-container {
    display: block;
    width: 102.08333333333333%;
    margin: 0 -1.0416666666666665%;
    clear: both;
    *zoom: 1;
  }
  .result-team-selection .result-container:before,
  .result-team-selection .result-container:after {
    content: "";
    display: table;
  }
  .result-team-selection .result-container:after {
    clear: both;
  }
  .result-team-selection .result-container .player-box {
    display: inline;
    float: left;
    width: 47.91666666666667%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .result-team-selection .result-container .team-result-box {
    display: inline;
    float: left;
    width: 47.91666666666667%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .non-players {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  /* ====================================== squadStats ====================================== */
  .stats-config {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .stats-help {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------- MEDIA Q 480 -----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  /* ====================================== header ====================================== */
  .header h1 {
    font-size: 2.0em;
  }
  .header h1 span span {
    display: none;
  }
  .header h2 {
    display: none;
  }
  /* ====================================== login & invite organiser ====================================== */
  #login,
  #normal-signup {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  #login #inner {
    width: 95%;
  }
  /* ====================================== signup ====================================== */
  .wizard-buttons .big-button {
    width: 100%;
  }
  .signup-send-with-help .wizard-buttons,
  .signup-send-with-help .help-box {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .amend-players-send-with-help .wizard-buttons,
  .amend-players-send-with-help .help-box {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .main-login,
  .alt-login {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  /* ====================================== dash ====================================== */
  .dash-component {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .status-block {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .status-lo {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
    clear: both;
    *zoom: 1;
  }
  .status-lo:before,
  .status-lo:after {
    content: "";
    display: table;
  }
  .status-lo:after {
    clear: both;
  }
  .status {
    width: 70%;
    margin: 4px auto;
    float: none;
  }
  .empty-box,
  .top-5 {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
    margin-bottom: 1em;
  }
  /* ====================================== sendOutTeams ====================================== */
  .team-selection .player-box {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .send-with-help .wizard-buttons,
  .send-with-help .help-box {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .send-with-help .wizard-buttons .big-button {
    width: 100%;
  }
  /* ====================================== response ====================================== */
  .response-feedback .quick-response {
    float: left;
  }
  .response-feedback .quick-response .response-box {
    width: auto;
  }
  /* ====================================== enterResult ==========f============================ */
  .result-team-selection {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .result-team-selection .result-container {
    display: block;
    width: 102.08333333333333%;
    margin: 0 -1.0416666666666665%;
    clear: both;
    *zoom: 1;
  }
  .result-team-selection .result-container:before,
  .result-team-selection .result-container:after {
    content: "";
    display: table;
  }
  .result-team-selection .result-container:after {
    clear: both;
  }
  .result-team-selection .result-container .player-box {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .result-team-selection .result-container .team-result-box {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  .result-team-selection .result-container .draw-box {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  /* ====================================== squadStats ====================================== */
  .stats-this-month,
  .stats-last-month {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
  /* ====================================== listGames ====================================== */
  .game-list li {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin-left: 1.0416666666666665%;
    margin-right: 1.0416666666666665%;
  }
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------- MEDIA Q 320 -----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 320px) {
  .game-info {
    clear: left;
    float: none;
  }
  .game-info .date-box {
    display: block;
    width: inherit;
  }
  .game-info .quick-response {
    width: 100%;
  }
}