style.css

body, html {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
}

#content {
    position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}

#myApp {
    position: absolute;
}
#online {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

#online iframe {
    width: 100%;
    height: 100%;
}

#offline-footer, #online-footer {
    height: 0; /* set to zero so it's not clicked on when opacity: 0 */
    width: 100%;
    overflow: hidden;
    color: #FFFFFF;
    background-color: #444;
    position: absolute;
    z-index: 2;
    bottom:0;
    opacity: 0;
    text-align: center;
    padding-top:10px;
    -webkit-transition: all;
    transition: all;
    transition-duration: 1s;
    font-family: Arial, Helvetica, sans-serif;
 }

 #offline-footer .button, #online-footer .button {
    min-width: 100px;
 }

 #offline-msg {
    margin-bottom: 5px;
 }

.fade-in {
    opacity: 1 !important;
    height: 88px !important;
}

  /**
 * Ionic Buttons
 * --------------------------------------------------
 */
.button {
  border-color: transparent;
  background-color: #f8f8f8;
  color: #444;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 12px;
  min-width: 52px;
  min-height: 47px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  vertical-align: top;
  text-align: center;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 42px;
  cursor: pointer; }
  .button:hover {
    color: #444;
    text-decoration: none; }
  .button.active, .button.activated {
    background-color: #e5e5e5; }
  .button:after {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    content: ' '; }
  .button .icon {
    vertical-align: top;
    pointer-events: none; }
  .button .icon:before, .button.icon:before, .button.icon-left:before, .button.icon-right:before {
    display: inline-block;
    padding: 0 0 1px 0;
    vertical-align: inherit;
    font-size: 24px;
    line-height: 41px;
    pointer-events: none; }
  .button.icon-left:before {
    float: left;
    padding-right: .2em;
    padding-left: 0; }
  .button.icon-right:before {
    float: right;
    padding-right: 0;
    padding-left: .2em; }
  .button.button-block, .button.button-full {
    margin-top: 10px;
    margin-bottom: 10px; }
  .button.button-light {
    border-color: transparent;
    background-color: #fff;
    color: #444; }
    .button.button-light:hover {
      color: #444;
      text-decoration: none; }
    .button.button-light.active, .button.button-light.activated {
      background-color: #fafafa; }
    .button.button-light.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #ddd; }
    .button.button-light.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-light.button-outline {
      border-color: #ddd;
      background: transparent;
      color: #ddd; }
      .button.button-light.button-outline.active, .button.button-light.button-outline.activated {
        background-color: #ddd;
        box-shadow: none;
        color: #fff; }
  .button.button-stable {
    border-color: transparent;
    background-color: #f8f8f8;
    color: #444; }
    .button.button-stable:hover {
      color: #444;
      text-decoration: none; }
    .button.button-stable.active, .button.button-stable.activated {
      background-color: #e5e5e5; }
    .button.button-stable.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #b2b2b2; }
    .button.button-stable.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-stable.button-outline {
      border-color: #b2b2b2;
      background: transparent;
      color: #b2b2b2; }
      .button.button-stable.button-outline.active, .button.button-stable.button-outline.activated {
        background-color: #b2b2b2;
        box-shadow: none;
        color: #fff; }
  .button.button-positive {
    border-color: transparent;
    background-color: #1495cf;
    color: #fff; }
    .button.button-positive:hover {
      color: #fff;
      text-decoration: none; }
    .button.button-positive.active, .button.button-positive.activated {
      background-color: #0c60ee; }
    .button.button-positive.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #387ef5; }
    .button.button-positive.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-positive.button-outline {
      border-color: #387ef5;
      background: transparent;
      color: #387ef5; }
      .button.button-positive.button-outline.active, .button.button-positive.button-outline.activated {
        background-color: #387ef5;
        box-shadow: none;
        color: #fff; }
  .button.button-calm {
    border-color: transparent;
    background-color: #11c1f3;
    color: #fff; }
    .button.button-calm:hover {
      color: #fff;
      text-decoration: none; }
    .button.button-calm.active, .button.button-calm.activated {
      background-color: #0a9dc7; }
    .button.button-calm.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #11c1f3; }
    .button.button-calm.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-calm.button-outline {
      border-color: #11c1f3;
      background: transparent;
      color: #11c1f3; }
      .button.button-calm.button-outline.active, .button.button-calm.button-outline.activated {
        background-color: #11c1f3;
        box-shadow: none;
        color: #fff; }
  .button.button-assertive {
    border-color: transparent;
    background-color: #ef473a;
    color: #fff; }
    .button.button-assertive:hover {
      color: #fff;
      text-decoration: none; }
    .button.button-assertive.active, .button.button-assertive.activated {
      background-color: #e42112; }
    .button.button-assertive.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #ef473a; }
    .button.button-assertive.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-assertive.button-outline {
      border-color: #ef473a;
      background: transparent;
      color: #ef473a; }
      .button.button-assertive.button-outline.active, .button.button-assertive.button-outline.activated {
        background-color: #ef473a;
        box-shadow: none;
        color: #fff; }
  .button.button-balanced {
    border-color: transparent;
    background-color: #33cd5f;
    color: #fff; }
    .button.button-balanced:hover {
      color: #fff;
      text-decoration: none; }
    .button.button-balanced.active, .button.button-balanced.activated {
      background-color: #28a54c; }
    .button.button-balanced.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #33cd5f; }
    .button.button-balanced.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-balanced.button-outline {
      border-color: #33cd5f;
      background: transparent;
      color: #33cd5f; }
      .button.button-balanced.button-outline.active, .button.button-balanced.button-outline.activated {
        background-color: #33cd5f;
        box-shadow: none;
        color: #fff; }
  .button.button-energized {
    border-color: transparent;
    background-color: #ffc900;
    color: #fff; }
    .button.button-energized:hover {
      color: #fff;
      text-decoration: none; }
    .button.button-energized.active, .button.button-energized.activated {
      background-color: #e6b500; }
    .button.button-energized.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #ffc900; }
    .button.button-energized.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-energized.button-outline {
      border-color: #ffc900;
      background: transparent;
      color: #ffc900; }
      .button.button-energized.button-outline.active, .button.button-energized.button-outline.activated {
        background-color: #ffc900;
        box-shadow: none;
        color: #fff; }
  .button.button-royal {
    border-color: transparent;
    background-color: #886aea;
    color: #fff; }
    .button.button-royal:hover {
      color: #fff;
      text-decoration: none; }
    .button.button-royal.active, .button.button-royal.activated {
      background-color: #6b46e5; }
    .button.button-royal.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #886aea; }
    .button.button-royal.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-royal.button-outline {
      border-color: #886aea;
      background: transparent;
      color: #886aea; }
      .button.button-royal.button-outline.active, .button.button-royal.button-outline.activated {
        background-color: #886aea;
        box-shadow: none;
        color: #fff; }
  .button.button-dark {
    border-color: transparent;
    background-color: #444;
    color: #fff; }
    .button.button-dark:hover {
      color: #fff;
      text-decoration: none; }
    .button.button-dark.active, .button.button-dark.activated {
      background-color: #262626; }
    .button.button-dark.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #444; }
    .button.button-dark.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-dark.button-outline {
      border-color: #444;
      background: transparent;
      color: #444; }
      .button.button-dark.button-outline.active, .button.button-dark.button-outline.activated {
        background-color: #444;
        box-shadow: none;
        color: #fff; }

.button-small {
  padding: 2px 4px 1px;
  min-width: 28px;
  min-height: 30px;
  font-size: 12px;
  line-height: 26px; }
  .button-small .icon:before, .button-small.icon:before, .button-small.icon-left:before, .button-small.icon-right:before {
    font-size: 16px;
    line-height: 19px;
    margin-top: 3px; }

.button-large {
  padding: 0 16px;
  min-width: 68px;
  min-height: 59px;
  font-size: 20px;
  line-height: 53px; }
  .button-large .icon:before, .button-large.icon:before, .button-large.icon-left:before, .button-large.icon-right:before {
    padding-bottom: 2px;
    font-size: 32px;
    line-height: 51px; }

.button-icon {
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
  padding: 0 6px;
  min-width: initial;
  border-color: transparent;
  background: none; }
  .button-icon.button.active, .button-icon.button.activated {
    border-color: transparent;
    background: none;
    box-shadow: none;
    opacity: 0.3; }
  .button-icon .icon:before, .button-icon.icon:before {
    font-size: 32px; }

.button-clear {
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
  padding: 0 6px;
  max-height: 42px;
  border-color: transparent;
  background: none;
  box-shadow: none; }
  .button-clear.button-clear {
    border-color: transparent;
    background: none;
    box-shadow: none;
    color: #b2b2b2; }
  .button-clear.button-icon {
    border-color: transparent;
    background: none; }
  .button-clear.active, .button-clear.activated {
    opacity: 0.3; }

.button-outline {
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
  background: none;
  box-shadow: none; }
  .button-outline.button-outline {
    border-color: #b2b2b2;
    background: transparent;
    color: #b2b2b2; }
    .button-outline.button-outline.active, .button-outline.button-outline.activated {
      background-color: #b2b2b2;
      box-shadow: none;
      color: #fff; }

.padding > .button.button-block:first-child {
  margin-top: 0; }

.button-block {
  display: block;
  clear: both; }
  .button-block:after {
    clear: both; }

.button-full,
.button-full > .button {
  display: block;
  margin-right: 0;
  margin-left: 0;
  border-right-width: 0;
  border-left-width: 0;
  border-radius: 0; }

button.button-block,
button.button-full,
.button-full > button.button,
input.button.button-block {
  width: 100%; }

a.button {
  text-decoration: none; }
  a.button .icon:before, a.button.icon:before, a.button.icon-left:before, a.button.icon-right:before {
    margin-top: 2px; }

.button.disabled,
.button[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none; }