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

#viewfinder {
  position: absolute;
  z-index: 25;
}

#controls {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 45px;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

#switch-button, #capture-button, #misc-button {
  position: absolute;
}

#switch-button, #misc-button {
  height: 45px;
  width: 33%;
}

#switch-button span,
#capture-button span,
#gallery-button span,
#cancel-pick span
{
  -moz-transition: 0.2s ease-in-out;
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
}

#switch-button {
  left: 66%;
}

#misc-button {
  text-align: center;
  left: 0;
}

#video-timer {
  position:relative;
  top:50%;
  margin-top:-0.5em;
}

#gallery-button {
  display: block;
  width: 100%;
  height: 100%;
}

#gallery-button.hidden {
  display:none;
}

#gallery-button span {
  background-image: url(images/grid.png);
}

#gallery-button[disabled=disabled] {
  display: none;
}

#cancel-pick {
  display:block;
  width: 100%;
  height: 100%;
}

#cancel-pick.hidden {
  display:none
}

#cancel-pick span {
  background-image: url(images/actionicon_cancel.png);
}

#capture-button[disabled=disabled] {
  opacity: 0.5;
}

#switch-button[disabled=disabled] {
  opacity: 0.5;
}

#capture-button {
  background-color: #03a2b4;
  border-radius: 100px;
  left: 33%;
  height: 100px;
  width: 33%;
  top: -28px;
}

#video-timer {
  display: none;
  color: white;
}

/* Specific to when we are capturing video */
.capturing #video-timer {
  display: block;
}

.capturing #gallery-button {
  display: none;
}

.capturing #capture-button {
  background-color: #d3361c;
}

.video.capturing #capture-button span {
  background-image: url(images/stop.png);
}

/* Swap the camera and video icons depending on mode */
.video #switch-button span {
  background-image: url(images/camera.png);
}

.camera #switch-button span {
  background-image: url(images/video.png);
}

.camera #capture-button span {
  background-image: url(images/camera.png);
}

.video #capture-button span {
  background-image: url(images/video.png);
}

#focus-ring {
  position: absolute;
  z-index: 100;
  display: none;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
}

#focus-ring[data-state=focused] {
  border: 4px solid rgba(0, 255, 0, 0.3);
  display: block;
}

#focus-ring[data-state=focusing] {
  border: 4px solid rgba(0, 0, 0, 0.8);
  display: block;
}

#focus-ring[data-state=fail] {
  border: 4px solid rgba(255, 0, 0, 0.3);
  display: block;
}

/*
 * The overlay is where we display messages like Scanning, No Videos,
 * No SD card and SD Card in Use along with instructions for resolving
 * the issue.  The user can't interact with the app while the overlay
 * is displayed.
 */
#overlay {
  /* it takes up the whole screen */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* almost transparent gray */
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100;
}

/*
 * The overlay content area holds the text of the overlay.
 * It has borders and a less transparent background so that
 * the overlay text shows up more clearly
 */
#overlay-content {
  background:
  url(images/ui/pattern.png) repeat left top,
  url(images/ui/gradient.png) no-repeat left top;
  background-size: auto auto, 100% 100%;
  /* We can't use shortand with background size because is not implemented yet:
  https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
  overflow: hidden;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: "MozTT", Sans-serif;
  font-size: 0;
  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
  created by white-spaces and break lines in the code betewen inline-block elements */
  color: #fff;
  padding: 110px 25px 0px 25px;
}

#overlay-title {
  font-weight: normal;
  font-size: 1.9rem;
  color: #fff;
  margin: 0 5px -10px 5px;
}

#overlay-text {
  padding: 10px 5px 0 5px;
  border-top: 1px solid #686868;	
  font-weight: 300;
  font-size: 2.5rem;
  color: #ebebeb;
}

.hidden {
  display: none;
}

#hud {
  position: absolute;
  top: 20px;
  height: 75px;
  left: 0;
  right: 0;
  z-index: 50;
}

#hud a {
  position: absolute;
  z-index: 50;
  height: 75px;
  width: 75px;
  border: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(images/hud_button_underlay.png);
}

#hud a:after {
  content: " ";
  display: block;
  position: relative;
  z-index: 60;
  height: 75px;
  width: 75px;
  background: transparent;
  background-position: center center;
  background-repeat: no-repeat;
}

#hud a:active {
  background-image: url(images/hud_button_underlay_focus.png);
}

#toggle-camera {
  right: 20px;
}

#toggle-flash {
  left: 20px;
}

#toggle-camera[data-mode=back]:after {
  background-image: url(images/toggle_front.png);
}
#toggle-camera[data-mode=front]:after {
  background-image: url(images/toggle_back.png);
}

#toggle-flash[data-mode=on]:after {
  background-image: url(images/flash_on.png);
}
#toggle-flash[data-mode=off]:after {
  background-image: url(images/flash_off.png);
}
#toggle-flash[data-mode=auto]:after {
  background-image: url(images/flash_auto.png);
}
#toggle-flash[data-mode=torch]:after {
  background-image: url(images/flash_torch.png);
}