/*
 * Windows Phone 8 theme for Smart Mobile Studio
 * --
 * Colors:
 * --
 * ButtonFace: #1ba1e2
 * Dialog: #1f1f1f
 * --
 */

:focus {
    outline: 0;
}

/* Apply to all elements */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;

  /* Define "normal" boxing */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;


  /* no tap highlight color */
	-webkit-tap-highlight-color: transparent;
     -moz-tap-highlight-color: transparent;
      -ms-tap-highlight-color: transparent;
       -o-tap-highlight-color: transparent;
          tap-highlight-color: transparent;

  /* no border style by default */
  -webkit-border-style: none;
     -moz-border-style: none;
      -ms-border-style: none;
       -o-border-style: none;
          border-style: none;

  /* Turn off font resizing */
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;

    -webkit-font-smoothing: always;
       -moz-font-smoothing: always;
        -ms-font-smoothing: always;
            font-smoothing: always;

  /* do not allow to select anything by default */
	-webkit-user-select: none;
	        user-select: none;

  font-family: "Segoe WP", Helvetica, sans-serif;
}

html, body {
  /* Android basics */
  -webkit-touch-callout: none;

  /* default to black screen */
  background-color: #000;

  /* No overflow, means no scrolling */
  overflow: hidden;
}

button { background: none; }

ul {
  cursor: default;
  list-style: none;
  font-size: small;
}

ul li {
  color: #fff;
  margin: 0 0 2px 0;
  cursor: hand;

  padding: 8px;
  background: #1ba1e2;
}

ul li:active { }

/**
 * TW3CustomControl
 * @purpose TW3CustomControl control style
 * @status done
 */
.TW3CustomControl {
  cursor: default;
  background-color: #fff;
}

/**
 * TW3ScrollContentIndicator
 * @purpose TW3ScrollContentIndicator style
 * @status done
 */
.TW3ScrollContentIndicator {
  background-color: #9e2b83;
  border: solid 1px #9A9A9A;
}

/**
 * TW3CustomForm
 * @purpose TW3CustomForm control style
 * @status done
 */
.TW3CustomForm, .TW3Form {
  /* This forces the browsers that support it to
     use the GPU rather than CPU for movement */
  -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
       -o-transform: translateZ(0);

   background: #000;
}

/**
 * TW3BlockBox:
 * In order to emulate modal dialogs we use
 * a single DIV to cover the active form.
 * This div prevents the user from clicking
 * on the underlying controls - thus forcing
 * the user to deal with the dialog, which is
 * hosted as a child of the TW3BlockBox control
 */

.TW3BlockBox {
  overflow: hidden;
  -webkit-touch-callout: none;
  background-color: rgba(0, 0, 0, 0.5);
}

/**
 * @purpose TW3AlertDialog control
 * @status done
 */
.TW3AlertDialog {
  font-size: medium;
  background: #1f1f1f;

  z-index: 1000;
  padding: 10px;

  text-align: center;
}

/**
 * @purpose TW3AlertDialog title & text
 * @status done
 * @todo It will be nice if there will be a style
 *       for title separated from text
 */
.TW3AlertDialog .TW3LabelText {
  color: #fff;
  font-size: medium;
  font-weight: normal;
}

.TW3AlertDialog .Header{
  color: #fff;
  background: #999;
  font-size: medium;
  font-weight: bold;
  line-height: 32px; 
}

/**
 * TW3Label
 * @purpose TW3Label control style
 * @status done
 */
.TW3Label, TW3LabelText {
  color: #fff;
  font-size: small;
	cursor: default;
}

.TW3Label:disabled,
.TW3LabelText:disabled {
  opacity: 0.5;
}

/**
 * TW3Button
 * @purpose TW3Button control style
 * @status done
 */
.TW3Button,
.TW3AlertButton {
  color: #fff;
  font-size: normal;

  border: 2px solid #fff;

  -webkit-text-size-adjust: auto;
     -moz-text-size-adjust: auto;
      -ms-text-size-adjust: auto;
       -o-text-size-adjust: auto;
}

.TW3Button:active:enabled {
  background: #1ba1e2;
}

.TW3AlertButton:active:enabled {
  background: #999;
}
.TW3AlertButton:focus {
    background: #444;
}

.TW3Button:disabled { border: 2px solid #666666; }

/**
 * TW3EditBox
 * TW3EditBox
 * TW3ComboBox
 * @purpose 
 * @status done
 */
.TW3Memo,
.TW3EditBox,
.TW3ComboBox {
  color: #fff;
  background: #000;
  border: 2px solid #fff;
  border-radius: 0;
  resize: none;
  padding: 4px;
	-webkit-user-select: auto;
}

  .TW3EditBox:focus {
    color: #000;
    background: #999;
  }

/**
 * TW3ToolButton
 * @purpose TW3ToolButton control style
 * @status done
 */
.TW3ToolButton {
  font-size: normal;
  color: white;

  border: 2px solid #fff;
  border-radius: 50px;

  -webkit-text-size-adjust: auto;
     -moz-text-size-adjust: auto;
      -ms-text-size-adjust: auto;
       -o-text-size-adjust: auto;
}

.TW3ToolButton:active:enabled {
  color: #fff;
  background: #1ba1e2;
}

.TW3ToolButton:disabled {
  cursor: wait;
	opacity: 0.5;
}

/**
 * TW3Toolbar
 * @purpose TW3Toolbar control
 * @status done
 */
.TW3Toolbar {
  cursor: default;
  background: #1f1f1f;
  padding: 4px 0;
}

.TW3Toolbar button {
  width: 32px;
}

.TW3ToolbarButton,
.TW3ToolbarButtonSelected {

  margin-top: 4px;
  color: #fff;

  border: 2px solid #fff;
  border-radius: 50%;
  width: 32px;

  font-size: small;
  text-align: center;
  text-transform: uppercase;

}

.TW3ToolbarButtonSelected {
  background: #1ba1e2;
}

  .TW3ToolbarButton:focus { border: 5px solid white; }

  .TW3ToolbarButton:disabled { background-color: transparent; }

.ButtonDown {
  border:2px inset;
}


/**
 * TW3Panel
 * @purpose TW3Panel control style
 * @status done
 */
.TW3Panel {
  cursor: inherited;
  resize: none;
  font-size: medium;
  background-color: white;
}

/**
 * TW3ToggleSwitch
 * @purpose TW3ToggleSwitch control style
 * @status done
 */
.TW3ToggleSwitch {
  border: 2px solid #fff;
  background: #000;

  font-size: small;

	overflow: hidden;
}

.TW3ToggleOnLabel .TW3LabelText { color: #1ba1e2; }

.TW3ToggleOnLabel,
.TW3ToggleOffLabel {
  text-align: center;
  cursor: default;
}

.TW3ToggleOnLabel {
  background: #1ba1e2;
 }

.TW3ToggleKnob {
  background: #fff;
  border: 2px solid #000;
}

  .TW3ToggleKnob:hover { }

/**
 * TW3ListBox
 * @purpose TW3ListBox control style
 * @status done
 */
.TW3Listbox {
  padding: 1px;
  border: 2px solid #fff;
  font-size: normal;
}

  .TW3Listbox .TW3LabelText { color: #000; }

.TW3ListBoxItemSelected {
  color: #fff;
  font-size: small;
  background: #1ba1e2;
}

  .TW3ListBoxItemSelected .TW3LabelText { color: #fff; }

/**
 * TW3HeaderControl
 * @purpose Style for TW3HeaderControl
 * @status done
 */
.TW3HeaderControl {
  cursor: default;
  background: #1f1f1f;
}

.TW3HeaderControl:disabled {
  cursor: wait;
  opacity: 0.5;
}

/**
 * TW3ProgressBar
 * @purpose ProgressBar
 * @status done
 */
.TW3ProgressBar,
.TW3ProgressMeter {
  overflow: hidden;

  -webkit-touch-callout: none;
}

.TW3ProgressBar { background: #292929; }

/**
 * TW3ProgressMeter
 * @purpose Content of ProgressBar
 * @status done
 */
.TW3ProgressMeter { background: #1ba1e2; }

/**
 * TW3Scrollbar
 * @purpose Style for TW3Scrollbar
 * @status done
 */
.TW3ScrollBar {
  background: #1f1f1f;
}

.TW3ScrollbarUpBtn,
.TW3ScrollbarDownBtn,
.TW3ScrollbarLeftBtn,
.TW3ScrollbarRightBtn {
  overflow: hidden;
}

.TW3ScrollbarUpBtn:active,
.TW3ScrollbarDownBtn:active,
.TW3ScrollbarLeftBtn:active,
.TW3ScrollbarRightBtn:active {
  background: #1ba1e2;
}

.TW3ScrollbarDownBtn:hover,
.TW3ScrollbarUpBtn:hover,
.TW3ScrollbarLeftBtn:hover,
.TW3ScrollbarRightBtn:hover {
  cursor: pointer;
}

.TW3ScrollbarHandle {
  background: #1ba1e2;
  overflow: hidden;
}

.TW3ScrollbarHandle:active { }

.TW3ScrollbarHandsle:Hover {
  cursor: pointer;
}

.TW3HorizontalScrollbar,
.TW3VerticalScrollbar {
  background: white;

  overflow: hidden;
  -webkit-touch-callout: none;
}

.TW3HorizontalScrollbar,
.TW3VerticalScrollbar {
  padding: 0;
  background: #1f1f1f;
}

.TW3VerticalScrollbar:disabled,
.TW3HorizontalScrollbar:disabled {
  cursor: wait;
  opacity: 0.5;
}

/* =============================================
 * Page Animation: BACKSCROLL
 * ============================================= */

@-webkit-keyframes BACKSCROLL {
  0% {
    -webkit-transform: translateZ(0);
    background-position: 0% 0%;
  }
  100% {
    background-position: -557px 0%;
    -webkit-transform: translateZ(0);
  }
}

@-moz-keyframes BACKSCROLL {
  0% {
    -webkit-transform: translateZ(0);
    background-position: 0% 0%;
  }
  100% {
    background-position: -557px 0%;
    -webkit-transform: translateZ(0);
  }
}

/* =============================================
 * Page Animation: MOVE-LEFT
 * ============================================= */

@-webkit-keyframes MOVE-LEFT {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0px);
    }
}

@-webkit-keyframes MOVE-OUT-LEFT {
    0% {
        -webkit-transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}

@-moz-keyframes MOVE-LEFT {
    0% {
        -moz-transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(0px);
    }
}


@-moz-keyframes MOVE-OUT-LEFT {
    0% {
      -moz-transform: translateX(0%);
      }
    100% {
      -moz-transform: translateX(-100%);
      }
}

/* =============================================
 * Page Animation: MOVE-Right
 * ============================================= */

@-webkit-keyframes MOVE-RIGHT {
    0% {
        -webkit-transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0%);
        visibility: none;
    }
}

@-webkit-keyframes MOVE-OUT-RIGHT {
    0% {
        -webkit-transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(100%);
        visibility: none;
    }
}

@-moz-keyframes MOVE-RIGHT {
    0% {
        -moz-transform: translateX(-100%);
    }
    100% {
        -moz-transform: translateX(0%);
    }
}

@-moz-keyframes MOVE-OUT-RIGHT {
    0% {
        -moz-transform: translateX(0%);
    }
    100% {
        -moz-transform: translateX(100%);
        visibility: none;
    }
}

/* =============================================
 * Page Animation: ROTATE-FOREVER
 * ============================================= */

@-webkit-keyframes ROTATE-FOREVER {
  from {
    -webkit-transform: none;
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes ROTATE-FOREVER {
  from {
    -moz-transform: none;
  }
  to {
    -moz-transform: rotate(360deg);
  }
}