//
// Base styles
// --------------------------------------------------

// Use box sizing on all the things!
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout:none;
}

// We fix position the body and scroll `.content`.
body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: @font-family-default;
  font-size: @font-size-default;
  line-height: 1.5;
  color: @color-text;
  background: @color-bg;
  overflow: hidden;
}

a, input, textarea, select, button {
    outline: 0;
}

p {
    margin: 1em 0;
}

// Universal link styling
a {
  color: @color-link;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0); // Removes the dark touch outlines on links in webkit browsers.

  &:active {
    color: @color-link-active;
  }
}

.page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: @color-bg;
  z-index: 2000;
}

// Wrapper to be used around all content not in .bar-title and .bar-tab
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

// Hack to force all relatively and absolutely positioned elements still render while scrolling
// Note: This is a bug for "-webkit-overflow-scrolling: touch"
.content > * {
  //transform: translateZ(0); //这一行会导致三星 S4 android 4.2 无法滚动
}

// Pad top/bottom of content so it doesn't hide behind bars.
// Note: For these to work, content must come after both bars in the markup
.bar-nav ~ .content {
  top: @bar-base-height;
}
.bar-header-secondary ~ .content {
  top: (@bar-base-height*2);
}

// Footer bar margin
.bar-footer ~ .content {
  bottom: @bar-base-height;
}
.bar-footer-secondary ~ .content {
  bottom: (@bar-base-height*2);
}

// Tab bar margin
.bar-tab ~ .content {
  bottom: @bar-tab-height;
}
.bar-footer-secondary-tab ~ .content {
  bottom: (@bar-tab-height+@bar-base-height);
}

// Utility classes
.content-padded {
  margin: @bar-side-spacing;
}
.text-center {
  text-align: center;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.clearfix {
  .clearfix();
}