html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  color: white;
  font-family: 'MozTT', sans-serif;
  font-size: 10px;
  background: black;
}

a {
  outline: 0;
}

a:hover, a:active, a:focus {
  outline: 0;
}

html * {
  overflow: hidden;
}

.font-regular {
  font-family: 'MozTT';
}

.font-semibold {
  font-family: 'MozTT';
  font-weight: 600;
}

.font-light {
  font-family: 'MozTT';
}

.contact-primary-info {
  font-size: -moz-calc(15*0.226rem);
  color: black;
}

.contact-secondary-info {
  font-size: -moz-calc(6*0.226rem);
  color: white;
}

.grid-wrapper {
  width: 100%;
  height: 100%;
}

.grid-v-align {
  vertical-align: middle;
}

.grid-row {
  display: table-row;
}

.grid-cell {
  display: table-cell;
}

.grid {
  display: table;
  table-layout: fixed;
}

.center {
  text-align: center;
}

#views {
  top: 0;
  height: 100%;
  width: 100%;
}

#views > *[role=tabpanel] {
  height: 100%;
  width: 100%;
}

body.hidden *[data-l10n-id] {
  visibility: hidden;
}

/* Call screen */
#call-screen {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: black;
  -moz-transform: translateY(-100%);
  z-index: 100;

  -moz-transition: -moz-transform 0.5s ease;
}

#call-screen.displayed {
  -moz-transform: translateY(0);
}

#main-container {
  position: relative;
  height: 100%;
  background: transparent;
}

#actions-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15.5rem;
}

#call-options {
  height:9.5rem;
}

#co-advanced {
  opacity: 1.0;
  height: 9.5rem;
}

.co-advanced-option {
  background: rgba(0,0,0,.8);
  height: 9.5rem;
  width: 100%;
  border: 0;
  border-top: 1px solid #3A3A3A;
  border-bottom: 1px solid #3A3A3A;
  border-right: 1px solid #3A3A3A;
}

#co-advanced span.grid-cell:last-child .co-advanced-option {
  border-right: 0px;
}

#speaker span {
  display:inline-block;
  background-color: #DDD;
  background:url('images/ActionIcon_40x40_bluetooth.png') ;
  background-size: 4rem 4rem;
  width:4rem;
  height:4rem;
  opacity: 1.0;
}

#speaker.speak  > span {
  background:url('images/ActionIcon_40x40_bluetooth_active.png');
}

#callbar {
  background:rgba(0,0,0,.8);
  opacity: 1.0;
}

#callbar-hang-up {
  float: left;
  height: 6.5rem;
  width: 100%;
}

.callbar-button {
  height: 4rem;
  border:0;
  border-radius:.3rem;
  display: block;
}

#callbar-hang-up-action {
  background: -moz-linear-gradient(top, #ff0000 1%, #ce0000 100%);
  opacity: 1.0;
  margin: 1rem .5rem 1.5rem 1.5rem;
}

#callbar-hang-up.full-space > #callbar-hang-up-action {
  margin: 1rem 1.5rem 1.5rem 1.5rem;
}

#callbar-hang-up-action > div {
  margin: 0 auto;
  background-image: url('images/ActionIcon_40x40_hangup.png');
  background-repeat: no-repeat;
  background-size: 4rem 4rem;
  background-position: center;
  width: 4rem;
  height: 4rem;
}

#calls {
  position: absolute;
  top: 0;
  width: 100%;
  height: 22rem;

  z-index: 500;
}

#calls > section {
  position: relative;
  height: 9rem;

  font-size: 1.8em;
  line-height: 7rem;
  background-color: #01c5ed;

  transition: opacity 0.3s linear;
  opacity: 1;
}

#calls > section div {
  padding-left: 2rem;
  padding-right: 1.5rem;
}

#calls > section .number {
  height: 4rem;
  padding: 2rem 2rem 0 2rem;
  background: #01c5ed;
  font-size: 1.6em;
  line-height: 4rem;
  color: black;
}

#calls > section .additionalContactInfo {
  height: 2rem;
  padding: 0 2rem 2rem 2rem;
  background: #01c5ed;
  font-size: 1.4rem;
  line-height: 2rem;
  color: white;
}

#calls > section .duration {
  position: absolute;
  top: 12rem;
  left: 0;
  height: 8rem;
  padding: 2rem;
  font-size: 2.6em;
  font-weight: 300;
  line-height: 8rem;
}