/*
 * Globals
 */

/* Links */
a {
  outline: none;
  text-decoration: none;
}
a:hover,
a:active {
  text-decoration: underline;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #f0f5fe;
}
body {
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  text-align: center;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: middle;
}
.site-container {
  margin-right: auto;
  margin-left: auto;
}


/*
 * Affix
 */

@media (min-width: 640px) {
  /* Handle the widths */
  .site-container {
    width: 480px; /* Must be percentage or pixels for horizontal alignment */
  }
}


/*
 * Card
 */

.card-wide.mdl-card {
  width: 100%;
  text-align: left;
}
.card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: #3f51b5;
}
.card-wide > .mdl-card__title > .mdl-card__title-text {
  font-size: 32px;
}
.card-wide > .mdl-card__actions {
  text-align: center;
}
.card-wide > .mdl-card__actions > .mdl-mini-footer__link-list {
  display: inline-flex;
}
.card-wide > .mdl-card__actions > .mdl-mini-footer__link-list > li {
  margin-left: 2px;
  margin-right: 2px;
}
.card-wide > .mdl-card__actions > .mdl-mini-footer__link-list > li > .mdl-button {
  font-size: 32px;
  height: 46px;
  width: 46px;
  line-height: 48px;
}