.hidden { display: none; }
.debug { border: 1px solid red; }
.maximized { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.centered { position: absolute; left: 50%; top: 50%; }
.textAlignCenter { text-align: center; }
.textAlignLeft { text-align: left; }
.textAlignRight { text-align: right; }

sup { vertical-align: inherit; position: relative; top: -0.5em; }
sub { vertical-align: inherit; position: relative; top: 0.3em; }

.wbScreen {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 16px;
}

.wbView { 
  border: 0; margin: 0; padding: 0; 
  box-sizing: border-box;
}
.wbView * { 
  box-sizing: border-box;
}
.wbWidget { border: 1px solid red; }
.wbNavigationBar .wbLabel { text-align: center; }
.wbViewController { 
  background: white; border: 2px solid #fc0; 
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  overflow: hidden;
}
.wbNavigationController { }
.wbNavigationController > .wbBox {
  position: absolute;
  top: 44px; left: 0; right: 0; bottom: 0;
}
.wbButton {
  display: inline-block;
  border: 1px solid black;
  margin: 6px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.3);
  cursor: pointer;
}
.wbButton:active {
  background: rgba(0,0,0,0.5);
}

.wbScreen {
  border: 10px solid blue;
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  margin: 0; padding: 0;
  background: gray;
}

.wbToolbar {
  height: 44px;
  background: transparent;
  border: 0px solid transparent;
}

.wbNavigationBar { 
  position: absolute; left: 0; right: 0;
  height: 44px;
  background: #666;
  border: 1px solid black;
  overflow: hidden;
  background-image: -webkit-gradient(
    linear, left bottom, left top,
    color-stop(0.29, rgb(71,71,71)),
    color-stop(0.91, rgb(151,151,156))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(71,71,71) 29%,
    rgb(151,151,156) 91%
  );  
}
.wbToolbar .wbButton,
.wbNavigationBar .wbButton {
  color: white;
  font-size: 14px;
  line-height: 20px;
}

.wbNavigationViewController .wbNavigationBar { top: 0;  }
.wbNavigationViewController .wbToolbar { bottom: 0; }

.wbNavigationBar > .wbLabel {
  font-size: 24px;
  color: white;
  border: 0;
  line-height: 42px;
}

.wbScrollView   { overflow: auto; }

.wbListView .sectionLabel { 
  background: rgba(0,0,0,0.4); color: white; padding: 4px 10px; 
  font-size: 18px;
}

.wbListView.listStyleGrouped { padding: 30px 40px; background: #ddd; }
.wbListView.listStyleGrouped .sectionLabel { 
  text-shadow:0px 1.4px white; 
  padding: 10px 10px;
  background: transparent; color: #444;
}
.wbListView.listStyleGrouped .sectionData { 
  border: 1px solid gray;
  border-radius: 10px;
  overflow: hidden;
}
.wbListView.listStyleGrouped section { 
  margin-bottom: 20px;
  border-radius: 10px;
}
.wbListView.listStyleGrouped .wbListViewCell { 
  background: white; border-right: 1px solid silver; 
}

.wbListViewCell { 
  border-bottom: 1px solid silver; 
  font-size: 18px;
  min-height: 40px; 
}

.wbListViewCell .wbLabel.textLabel 
{ text-align: left; padding: 10px 10px 2px 10px; }
.wbListViewCell .wbLabel.detailTextLabel 
{ color: gray;  padding: 2px 10px 10px 10px; }

.wbListViewCell.wbListCellStyleWidget > .contentView > .wbLabel 
{
  width: 160px;
  text-align: right;
  font-size: 86%;
  float: left;
  border: 1px solid orange;
  color: #666;
}
.wbListViewCell.wbListCellStyleWidget  > .contentView > .wbWidget {
  padding: 8px;
  margin-left: 160px;
}

.wbWidget input {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  border: 0; margin: 0; padding: 1px;
}

.wbBoolean { border: 1px solid green; }