Commits

Matthew Schinckel  committed b46355f

Added heaps of stuff

  • Participants
  • Parent commits 6893a96

Comments (0)

Files changed (53)

File css/aristo.css

+/* *CSS 3 Docs
+ * *http://qooxdoo.org/documentation/general/webkit_css_styles
+ * *http://trac.webkit.org/browser/trunk/LayoutTests//fast/css */
+* {
+  font-family: "Arial";
+  font-size: 14px;
+  font-weight: bold; }
+
+input[type="checkbox"] {
+  -khtml-appearance: none;
+  background: url(../images/check-box-bezel.png) no-repeat;
+  width: 15px;
+  height: 16px; }
+  input[type="checkbox"]:checked {
+    background: url(../images/check-box-bezel-selected.png) no-repeat; }
+input[type="radio"] {
+  -khtml-appearance: none;
+  background: url(../images/radio-bezel.png) no-repeat;
+  width: 17px;
+  height: 17px; }
+  input[type="radio"]:checked {
+    border: none;
+    background: url(../images/radio-bezel-selected.png) no-repeat; }
+
+button {
+  margin: 5px;
+  -khtml-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  -webkit-border-image: url(../images/button-bezel.png) 2 2 2 2 stretch stretch;
+  -moz-border-image: url(../images/button-bezel.png) 2 2 2 2 stretch stretch;
+  padding: 3px 8px;
+  color: #4f4f4f;
+  -webkit-transition: -webkit-box-shadow 0.2s linear;
+  text-shadow: 0px 1px 1px white; }
+  button.default {
+    color: #1c4257;
+    -webkit-border-image: url(../images/default-button-bezel.png) 2 2 2 2 stretch stretch;
+    -moz-border-image: url(../images/default-button-bezel.png) 2 2 2 2 stretch stretch; }
+
+.hud button {
+  font-size: 11px;
+  color: white;
+  padding: 0;
+  -webkit-border-image: url(../images/hud/button-bezel.png) 9 13 10 13/8px 13px 9px 13px repeat repeat;
+  -moz-border-image: url(../images/hud/button-bezel.png) 9 13 10 13/8px 13px 9px 13px repeat repeat;
+  text-shadow: none; }
+
+button.hud {
+  font-size: 11px;
+  color: white;
+  padding: 0;
+  -webkit-border-image: url(../images/hud/button-bezel.png) 9 13 10 13/8px 13px 9px 13px repeat repeat;
+  -moz-border-image: url(../images/hud/button-bezel.png) 9 13 10 13/8px 13px 9px 13px repeat repeat;
+  text-shadow: none; }
+button:hover:not(:disabled) {
+  -webkit-box-shadow: 0 0 15px #d4d4d4;
+  -moz-box-shadow: 0 0 15px #d4d4d4; }
+button.default:hover {
+  -webkit-box-shadow: 0 0 15px #a1cae2;
+  -moz-box-shadow: 0 0 15px #a1cae2; }
+
+.hud button:hover {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none; }
+
+button.hud:hover {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none; }
+button:active:not(:disabled) {
+  -webkit-border-image: url(../images/button-bezel-highlighted.png) 2 2 2 2 stretch stretch;
+  -moz-border-image: url(../images/button-bezel-highlighted.png) 2 2 2 2 stretch stretch; }
+button.default:active {
+  -webkit-border-image: url(../images/default-button-bezel-highlighted.png) 2 2 2 2 stretch stretch;
+  -moz-border-image: url(../images/default-button-bezel-highlighted.png) 2 2 2 2 stretch stretch; }
+
+.hud button:active {
+  -webkit-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13/8px 13px 9px 13px repeat repeat;
+  -moz-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13/8px 13px 9px 13px repeat repeat; }
+
+button.hud:active {
+  -webkit-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13/8px 13px 9px 13px repeat repeat;
+  -moz-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13/8px 13px 9px 13px repeat repeat; }
+button:disabled {
+  opacity: 0.5; }
+
+::-webkit-scrollbar {
+  width: 17px;
+  height: 17px; }
+::-webkit-scrollbar-button:vertical:end {
+  background: url(../images/scroller-down-arrow.png) no-repeat;
+  width: 17px;
+  height: 20px; }
+::-webkit-scrollbar-button:vertical:start {
+  background: url(../images/scroller-up-arrow.png) no-repeat;
+  width: 17px;
+  height: 22px; }
+::-webkit-scrollbar-button:horizontal:start {
+  background: url(../images/scroller-left-arrow.png) no-repeat;
+  width: 22px;
+  height: 17px; }
+::-webkit-scrollbar-button:horizontal:end {
+  background: url(../images/scroller-right-arrow.png) no-repeat;
+  width: 22px;
+  height: 17px; }
+::-webkit-scrollbar-thumb:vertical {
+  -webkit-border-image: url(../images/scroller-vertical-knob.png) 8 0 8 0/8px 0 8px 0 stretch repeat; }
+::-webkit-scrollbar-thumb:horizontal {
+  -webkit-border-image: url(../images/scroller-horizontal-knob.png) 7 9 7 9/7px 9px 7px 9px stretch repeat; }
+::-webkit-scrollbar-track-piece:vertical:start {
+  background-image: url(../images/scroller-up-arrow-track.png), url(../images/scroller-vertical-track.png);
+  background-repeat: no-repeat, repeat-y; }
+::-webkit-scrollbar-track-piece:vertical:end {
+  background-image: url(../images/scroller-down-arrow-track.png), url(../images/scroller-vertical-track.png);
+  background-repeat: no-repeat, repeat-y;
+  background-position: bottom left, 0 0; }
+::-webkit-scrollbar-track-piece:horizontal:end {
+  background-image: url(../images/scroller-right-arrow-track.png), url(../images/scroller-horizontal-track.png);
+  background-repeat: no-repeat, repeat-x;
+  background-position: bottom right, 0 0; }
+::-webkit-scrollbar-track-piece:horizontal:start {
+  background-image: url(../images/scroller-left-arrow-track.png), url(../images/scroller-horizontal-track.png);
+  background-repeat: no-repeat, repeat-x; }
+::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
+  display: block; }
+::-webkit-scrollbar-button:start:increment, ::-webkit-scrollbar-button:end:decrement {
+  display: none; }
+
+/* Turn on single button up on top, and down on bottom */
+/* Turn off the down area up on top, and up area on bottom */
+input[type="range"] {
+  -khtml-appearance: none;
+  -webkit-border-image: url(../images/slider-horizontal-track.png) 2 4 2 4/2px 4px 2px 4px repeat repeat;
+  height: 5px;
+  padding: 0; }
+
+::-webkit-slider-thumb {
+  -khtml-appearance: none;
+  background: url(../images/slider-knob.png) no-repeat;
+  width: 23px;
+  height: 24px; }
+  ::-webkit-slider-thumb:active {
+    background: url(../images/slider-knob-highlighted.png) no-repeat; }
+
+/*This doesn't seem to be implemented yet */
+input, textarea {
+  font-size: 12px;
+  color: black !important;
+  font-weight: normal;
+  padding: 4px !important;
+  border: none; }
+
+::-webkit-input-placeholder {
+  color: #bdc7d3; }
+
+.copy {
+  cursor: copy; }
+
+.progress {
+  cursor: progress; }
+
+header, .header {
+  display: block;
+  height: 30px;
+  width: 300px;
+  padding: 10px;
+  text-align: center;
+  border-bottom: 2px solid #979797;
+  background: #c2c2c2;
+  background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c2c2c2));
+  background: -moz-linear-gradient(left top, left bottom, from(#eaeaea), to(#c2c2c2));
+  text-shadow: 0px 1px 1px white;
+  color: #2c2c2c; }
+
+.hud {
+  -webkit-border-radius: 3px;
+  color: white;
+  background: -webkit-gradient(linear, left top, left bottom, from(#525252), color-stop(0.3, #212121), color-stop(0.33, #1d1d1d), to(#1d1d1d));
+  background: -moz-linear-gradient(left top, left bottom, from(#525252), color-stop(0.3, #212121), color-stop(0.33, #1d1d1d), to(#1d1d1d));
+  height: 100px;
+  width: 200px; }
+
+nav {
+  display: block;
+  width: 100%;
+  height: 33px;
+  background: -webkit-gradient(linear, left top, left bottom, from(#030303), to(#44474b));
+  background: -moz-linear-gradient(left top, left bottom, from(#030303), to(#44474b));
+  clear: both; }
+  nav a {
+    display: block;
+    float: left;
+    padding: 10px;
+    color: #a5a5a5;
+    font-size: 11px;
+    font-weight: normal;
+    text-shadow: 0px 1px 1px black;
+    text-decoration: none; }
+    nav a:hover, nav a.active {
+      background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#bbe1f7));
+      background: -moz-linear-gradient(left top, left bottom, from(#81afc8), to(#bbe1f7));
+      color: #1c4257;
+      text-shadow: 0px 1px 1px white; }

File css/jqui.css

+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  vertical-align: baseline;
+  background: transparent; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after {
+  content: "";
+  content: none; }
+
+q:before, q:after {
+  content: "";
+  content: none; }
+
+/* remember to define focus styles! */
+:focus {
+  outline: 0; }
+
+/* remember to highlight inserts somehow! */
+ins {
+  text-decoration: none; }
+
+del {
+  text-decoration: line-through; }
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+button, input[type="button"], input[type="submit"], .button, .button-set label, .button-set input[type="radio"] {
+  margin: 5px;
+  -khtml-appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: url(../img/button-bg.png) repeat-x;
+  text-align: center;
+  line-height: 1.4em;
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  text-decoration: none;
+  color: #4f4f4f;
+  color: #4f4f4f;
+  border: 1px solid #b1b1b1;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  padding: 2px 16px; }
+  button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:hover, .button-set label:hover, .button-set input[type="radio"]:hover {
+    color: #333333; }
+  button:hover:not(:disabled), button:active:not(:disabled), input[type="button"]:hover:not(:disabled), input[type="button"]:active:not(:disabled), input[type="submit"]:hover:not(:disabled), input[type="submit"]:active:not(:disabled), .button:hover:not(:disabled), .button:active:not(:disabled), .button-set label:hover:not(:disabled), .button-set label:active:not(:disabled), .button-set input[type="radio"]:hover:not(:disabled), .button-set input[type="radio"]:active:not(:disabled) {
+    color: #333333;
+    border-color: #a5a5a5;
+    -moz-box-shadow: 0px 0px 5px #c5c5c5;
+    -webkit-box-shadow: 0px 0px 5px #c5c5c5;
+    box-shadow: 0px 0px 5px #c5c5c5; }
+  button:checked, button:checked + label, input[type="button"]:checked, input[type="button"]:checked + label, input[type="submit"]:checked, input[type="submit"]:checked + label, .button:checked, .button:checked + label, .button-set label:checked, .button-set label:checked + label, .button-set input[type="radio"]:checked, .button-set input[type="radio"]:checked + label {
+    background-position: 0px -66px; }
+    button:checked:active:not(:disabled), button:checked + label:active:not(:disabled), input[type="button"]:checked:active:not(:disabled), input[type="button"]:checked + label:active:not(:disabled), input[type="submit"]:checked:active:not(:disabled), input[type="submit"]:checked + label:active:not(:disabled), .button:checked:active:not(:disabled), .button:checked + label:active:not(:disabled), .button-set label:checked:active:not(:disabled), .button-set label:checked + label:active:not(:disabled), .button-set input[type="radio"]:checked:active:not(:disabled), .button-set input[type="radio"]:checked + label:active:not(:disabled) {
+      background-position: 0px -66px; }
+  button:active:not(:disabled), input[type="button"]:active:not(:disabled), input[type="submit"]:active:not(:disabled), .button:active:not(:disabled), .button-set label:active:not(:disabled), .button-set input[type="radio"]:active:not(:disabled) {
+    background-position: 0px -66px; }
+  button.default, button[type="submit"], input[type="button"].default, input[type="button"][type="submit"], input[type="submit"].default, input[type="submit"][type="submit"], .button.default, .button[type="submit"], .button-set label.default, .button-set label[type="submit"], .button-set input[type="radio"].default, .button-set input[type="radio"][type="submit"] {
+    background-position: 0px -33px;
+    color: #1c4257;
+    border: 1px solid #3f94c3; }
+    button.default:hover:not(:disabled), button.default:active:not(:disabled), button[type="submit"]:hover:not(:disabled), button[type="submit"]:active:not(:disabled), input[type="button"].default:hover:not(:disabled), input[type="button"].default:active:not(:disabled), input[type="button"][type="submit"]:hover:not(:disabled), input[type="button"][type="submit"]:active:not(:disabled), input[type="submit"].default:hover:not(:disabled), input[type="submit"].default:active:not(:disabled), input[type="submit"][type="submit"]:hover:not(:disabled), input[type="submit"][type="submit"]:active:not(:disabled), .button.default:hover:not(:disabled), .button.default:active:not(:disabled), .button[type="submit"]:hover:not(:disabled), .button[type="submit"]:active:not(:disabled), .button-set label.default:hover:not(:disabled), .button-set label.default:active:not(:disabled), .button-set label[type="submit"]:hover:not(:disabled), .button-set label[type="submit"]:active:not(:disabled), .button-set input[type="radio"].default:hover:not(:disabled), .button-set input[type="radio"].default:active:not(:disabled), .button-set input[type="radio"][type="submit"]:hover:not(:disabled), .button-set input[type="radio"][type="submit"]:active:not(:disabled) {
+      color: #122a38;
+      border-color: #3a8ab6;
+      -moz-box-shadow: 0px 0px 5px #46a5d9;
+      -webkit-box-shadow: 0px 0px 5px #46a5d9;
+      box-shadow: 0px 0px 5px #46a5d9; }
+    button.default:active:not(:disabled), button[type="submit"]:active:not(:disabled), input[type="button"].default:active:not(:disabled), input[type="button"][type="submit"]:active:not(:disabled), input[type="submit"].default:active:not(:disabled), input[type="submit"][type="submit"]:active:not(:disabled), .button.default:active:not(:disabled), .button[type="submit"]:active:not(:disabled), .button-set label.default:active:not(:disabled), .button-set label[type="submit"]:active:not(:disabled), .button-set input[type="radio"].default:active:not(:disabled), .button-set input[type="radio"][type="submit"]:active:not(:disabled) {
+      background-position: 0px -99px; }
+  button:disabled, button.disabled, button:disabled + label, input[type="button"]:disabled, input[type="button"].disabled, input[type="button"]:disabled + label, input[type="submit"]:disabled, input[type="submit"].disabled, input[type="submit"]:disabled + label, .button:disabled, .button.disabled, .button:disabled + label, .button-set label:disabled, .button-set label.disabled, .button-set label:disabled + label, .button-set input[type="radio"]:disabled, .button-set input[type="radio"].disabled, .button-set input[type="radio"]:disabled + label {
+    opacity: 0.5;
+    filter: Alpha(Opacity=50);
+    cursor: default; }
+    button:disabled:hover, button.disabled:hover, button:disabled + label:hover, input[type="button"]:disabled:hover, input[type="button"].disabled:hover, input[type="button"]:disabled + label:hover, input[type="submit"]:disabled:hover, input[type="submit"].disabled:hover, input[type="submit"]:disabled + label:hover, .button:disabled:hover, .button.disabled:hover, .button:disabled + label:hover, .button-set label:disabled:hover, .button-set label.disabled:hover, .button-set label:disabled + label:hover, .button-set input[type="radio"]:disabled:hover, .button-set input[type="radio"].disabled:hover, .button-set input[type="radio"]:disabled + label:hover {
+      -moz-box-shadow: 0 0 0 0;
+      -webkit-box-shadow: 0 0 0 0;
+      box-shadow: 0 0 0 0;
+      color: #4f4f4f; }
+      button:disabled:hover[type="submit"], button:disabled:hover.default, button.disabled:hover[type="submit"], button.disabled:hover.default, button:disabled + label:hover[type="submit"], button:disabled + label:hover.default, input[type="button"]:disabled:hover[type="submit"], input[type="button"]:disabled:hover.default, input[type="button"].disabled:hover[type="submit"], input[type="button"].disabled:hover.default, input[type="button"]:disabled + label:hover[type="submit"], input[type="button"]:disabled + label:hover.default, input[type="submit"]:disabled:hover[type="submit"], input[type="submit"]:disabled:hover.default, input[type="submit"].disabled:hover[type="submit"], input[type="submit"].disabled:hover.default, input[type="submit"]:disabled + label:hover[type="submit"], input[type="submit"]:disabled + label:hover.default, .button:disabled:hover[type="submit"], .button:disabled:hover.default, .button.disabled:hover[type="submit"], .button.disabled:hover.default, .button:disabled + label:hover[type="submit"], .button:disabled + label:hover.default, .button-set label:disabled:hover[type="submit"], .button-set label:disabled:hover.default, .button-set label.disabled:hover[type="submit"], .button-set label.disabled:hover.default, .button-set label:disabled + label:hover[type="submit"], .button-set label:disabled + label:hover.default, .button-set input[type="radio"]:disabled:hover[type="submit"], .button-set input[type="radio"]:disabled:hover.default, .button-set input[type="radio"].disabled:hover[type="submit"], .button-set input[type="radio"].disabled:hover.default, .button-set input[type="radio"]:disabled + label:hover[type="submit"], .button-set input[type="radio"]:disabled + label:hover.default {
+        color: #1c4257; }
+    button:disabled:active + label, button.disabled:active + label, button:disabled + label:active + label, input[type="button"]:disabled:active + label, input[type="button"].disabled:active + label, input[type="button"]:disabled + label:active + label, input[type="submit"]:disabled:active + label, input[type="submit"].disabled:active + label, input[type="submit"]:disabled + label:active + label, .button:disabled:active + label, .button.disabled:active + label, .button:disabled + label:active + label, .button-set label:disabled:active + label, .button-set label.disabled:active + label, .button-set label:disabled + label:active + label, .button-set input[type="radio"]:disabled:active + label, .button-set input[type="radio"].disabled:active + label, .button-set input[type="radio"]:disabled + label:active + label {
+      background-position: 0 0; }
+  button[type="radio"], input[type="button"][type="radio"], input[type="submit"][type="radio"], .button[type="radio"], .button-set label[type="radio"], .button-set input[type="radio"][type="radio"] {
+    display: none; }
+  button[left-icon="action"], input[type="button"][left-icon="action"], input[type="submit"][left-icon="action"], .button[left-icon="action"], .button-set label[left-icon="action"], .button-set input[type="radio"][left-icon="action"] {
+    padding-top: 0;
+    padding-left: 8px; }
+    button[left-icon="action"]:before, button[left-icon="action"]:after, input[type="button"][left-icon="action"]:before, input[type="button"][left-icon="action"]:after, input[type="submit"][left-icon="action"]:before, input[type="submit"][left-icon="action"]:after, .button[left-icon="action"]:before, .button[left-icon="action"]:after, .button-set label[left-icon="action"]:before, .button-set label[left-icon="action"]:after, .button-set input[type="radio"][left-icon="action"]:before, .button-set input[type="radio"][left-icon="action"]:after {
+      position: relative;
+      padding: 1px 0; }
+    button[left-icon="action"]:before, input[type="button"][left-icon="action"]:before, input[type="submit"][left-icon="action"]:before, .button[left-icon="action"]:before, .button-set label[left-icon="action"]:before, .button-set input[type="radio"][left-icon="action"]:before {
+      content: url(../img/blank.png);
+      width: 16px;
+      height: 16px;
+      background: url(../img/icon-sprite.png);
+      background-position-x: 0px;
+      background-position-y: 0px;
+      margin-right: 4px; }
+    button[left-icon="action"]:hover:before, input[type="button"][left-icon="action"]:hover:before, input[type="submit"][left-icon="action"]:hover:before, .button[left-icon="action"]:hover:before, .button-set label[left-icon="action"]:hover:before, .button-set input[type="radio"][left-icon="action"]:hover:before {
+      width: 16px;
+      height: 16px;
+      background: url(../img/icon-sprite.png);
+      background-position-x: 0px;
+      background-position-y: 0px;
+      background-position-y: -16px; }
+  button[right-icon], input[type="button"][right-icon], input[type="submit"][right-icon], .button[right-icon], .button-set label[right-icon], .button-set input[type="radio"][right-icon] {
+    padding-top: 0;
+    padding-right: 8px; }
+    button[right-icon]:before, button[right-icon]:after, input[type="button"][right-icon]:before, input[type="button"][right-icon]:after, input[type="submit"][right-icon]:before, input[type="submit"][right-icon]:after, .button[right-icon]:before, .button[right-icon]:after, .button-set label[right-icon]:before, .button-set label[right-icon]:after, .button-set input[type="radio"][right-icon]:before, .button-set input[type="radio"][right-icon]:after {
+      position: relative;
+      padding: 1px 0; }
+    button[right-icon]:after, input[type="button"][right-icon]:after, input[type="submit"][right-icon]:after, .button[right-icon]:after, .button-set label[right-icon]:after, .button-set input[type="radio"][right-icon]:after {
+      content: url(../img/blank.png);
+      width: 16px;
+      height: 16px;
+      background: url(../img/icon-sprite.png);
+      background-position-x: 0px;
+      background-position-y: 0px;
+      margin-left: 4px; }
+    button[right-icon]:hover:after, input[type="button"][right-icon]:hover:after, input[type="submit"][right-icon]:hover:after, .button[right-icon]:hover:after, .button-set label[right-icon]:hover:after, .button-set input[type="radio"][right-icon]:hover:after {
+      width: 16px;
+      height: 16px;
+      background: url(../img/icon-sprite.png);
+      background-position-x: 0px;
+      background-position-y: 0px;
+      background-position-y: -16px; }
+
+.button-set {
+  margin: 0 7px; }
+  .button-set * {
+    -moz-appearance: none; }
+  .button-set label {
+    margin-left: 0;
+    margin-right: -5px;
+    border-radius: 0px;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    -khtml-border-radius: 0px; }
+  .button-set .first, .button-set :first-child + label {
+    border-bottom-left-radius: radius;
+    -moz-border-radius-bottomleft: radius;
+    -webkit-border-bottom-left-radius: radius;
+    -khtml-border-bottom-left-radius: radius;
+    border-top-left-radius: radius;
+    -moz-border-radius-topleft: radius;
+    -webkit-border-top-left-radius: radius;
+    -khtml-border-top-left-radius: radius; }
+  .button-set .last, .button-set :last-child {
+    border-top-right-radius: radius;
+    -moz-border-radius-topright: radius;
+    -webkit-border-top-right-radius: radius;
+    -khtml-border-top-right-radius: radius;
+    border-bottom-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    -khtml-border-bottom-right-radius: 3px; }
+
+input[type="radio"], input[type="checkbox"], input[type="range"] {
+  -khtml-appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none; }
+  input[type="radio"]:disabled, input[type="checkbox"]:disabled, input[type="range"]:disabled {
+    opacity: 0.5;
+    filter: Alpha(Opacity=50); }
+input[type="radio"] {
+  width: 16px;
+  height: 16px;
+  background: url(../img/icon-sprite.png);
+  background-position-x: -112px;
+  background-position-y: 0px; }
+  input[type="radio"]:checked {
+    background-position-y: -16px; }
+input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  background: url(../img/icon-sprite.png);
+  background-position-x: -96px;
+  background-position-y: 0px; }
+  input[type="checkbox"]:checked {
+    background-position-y: -16px; }
+input[type="range"] {
+  margin: 10px 0;
+  height: 5px;
+  background: url(../img/slider-bg-h.png) repeat-x; }
+  input[type="range"]::-webkit-slider-thumb {
+    -khtml-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: url(../img/icon-sprite.png);
+    background-position-x: -112px;
+    background-position-y: 0px; }
+
+.tab-bar, *[role="tabbed-browser"] {
+  position: relative;
+  display: block;
+  list-style-type: none;
+  left: 0;
+  right: 0;
+  top: 0; }
+  .tab-bar li, .tab-bar *[role="tab-bar"] span, *[role="tabbed-browser"] li, *[role="tabbed-browser"] *[role="tab-bar"] span {
+    list-style-type: none;
+    position: relative;
+    display: inline-block;
+    padding: 4px 8px;
+    border: 1px solid gray;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    -khtml-border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    -khtml-border-top-right-radius: 3px;
+    background: url(../img/button-bg.png) repeat-x; }
+    .tab-bar li.active, .tab-bar *[role="tab-bar"] span.active, *[role="tabbed-browser"] li.active, *[role="tabbed-browser"] *[role="tab-bar"] span.active {
+      border-bottom-color: white;
+      background: white;
+      z-index: 2; }
+    .tab-bar li a, .tab-bar *[role="tab-bar"] span a, *[role="tabbed-browser"] li a, *[role="tabbed-browser"] *[role="tab-bar"] span a {
+      display: block;
+      text-align: center;
+      line-height: 1.4em;
+      text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+      font-size: 12px;
+      text-decoration: none;
+      color: #4f4f4f;
+      font-weight: bold;
+      width: 100%; }
+      .tab-bar li a:hover, .tab-bar *[role="tab-bar"] span a:hover, *[role="tabbed-browser"] li a:hover, *[role="tabbed-browser"] *[role="tab-bar"] span a:hover {
+        color: #333333; }
+    .tab-bar li:disabled, .tab-bar *[role="tab-bar"] span:disabled, *[role="tabbed-browser"] li:disabled, *[role="tabbed-browser"] *[role="tab-bar"] span:disabled {
+      opacity: 0.5;
+      filter: Alpha(Opacity=50); }
+  .tab-bar .tab-content, .tab-bar *[role="tab-content"], *[role="tabbed-browser"] .tab-content, *[role="tabbed-browser"] *[role="tab-content"] {
+    display: block;
+    border: 1px solid gray;
+    position: relative;
+    top: -1px;
+    padding: 1em 1.4em; }
+
+p.error, p.success, p.help, p.notice {
+  border: 1px solid;
+  padding: 7px 10px 10px 10px;
+  margin: 8px 0; }
+
+p.error {
+  color: #7a5050;
+  border-color: #f4a0a0;
+  background-color: #fff0f0; }
+  p.error:before, p.error:after {
+    position: relative;
+    padding: 1px 0; }
+  p.error:before {
+    content: url(../img/blank.png);
+    width: 16px;
+    height: 16px;
+    background: url(../img/icon-sprite.png);
+    background-position-x: 0px;
+    background-position-y: -80px;
+    margin-right: 4px; }
+
+p.success {
+  color: #506250;
+  border-color: #a0c4a0;
+  background-color: #f0fff0; }
+  p.success:before, p.success:after {
+    position: relative;
+    padding: 1px 0; }
+  p.success:before {
+    content: url(../img/blank.png);
+    width: 16px;
+    height: 16px;
+    background: url(../img/icon-sprite.png);
+    background-position-x: -16px;
+    background-position-y: -80px;
+    margin-right: 4px; }
+
+p.notice {
+  color: #4b4b79;
+  border-color: #9696f2;
+  background-color: #e1e1ff; }
+  p.notice:before, p.notice:after {
+    position: relative;
+    padding: 1px 0; }
+  p.notice:before {
+    content: url(../img/blank.png);
+    width: 16px;
+    height: 16px;
+    background: url(../img/icon-sprite.png);
+    background-position-x: -32px;
+    background-position-y: -80px;
+    margin-right: 4px; }
+
+p.help {
+  color: #696940;
+  border-color: #d2d280;
+  background-color: #ffffc0; }
+  p.help:before, p.help:after {
+    position: relative;
+    padding: 1px 0; }
+  p.help:before {
+    content: url(../img/blank.png);
+    width: 16px;
+    height: 16px;
+    background: url(../img/icon-sprite.png);
+    background-position-x: -48px;
+    background-position-y: -80px;
+    margin-right: 4px; }
+
+progress, .progress {
+  -webkit-appearance: none;
+  margin: 10px 0;
+  width: 500px;
+  background: url(../img/button-bg.png) repeat-x;
+  border: 1px solid silver;
+  background-position-y: -70px;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  height: 12px; }
+  progress div, .progress div {
+    display: block;
+    background: url(../img/button-bg.png) repeat-x;
+    background-position-y: -44px;
+    max-width: 100%;
+    height: 100%;
+    border-bottom-left-radius: radius;
+    -moz-border-radius-bottomleft: radius;
+    -webkit-border-bottom-left-radius: radius;
+    -khtml-border-bottom-left-radius: radius;
+    border-top-left-radius: radius;
+    -moz-border-radius-topleft: radius;
+    -webkit-border-top-left-radius: radius;
+    -khtml-border-top-left-radius: radius; }
+
+.spinner, *[role="spinner"], *[role="progress-indeterminate"] {
+  height: 48px;
+  width-min: 48px;
+  background: url(../img/spinner.gif) no-repeat center;
+  background-size: 48px; }
+
+*[role="resizeable"] {
+  width: 250px;
+  height: 25px;
+  border: 1px solid gray;
+  background-color: silver;
+  border-radius: 15px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  -khtml-border-radius: 15px; }
+  *[role="resizeable"] div.handle {
+    display: block;
+    width: 15px;
+    height: 100%; }
+    *[role="resizeable"] div.handle.left {
+      cursor: w-resize;
+      float: left; }
+    *[role="resizeable"] div.handle.right {
+      cursor: e-resize;
+      float: right; }
+
+*[role='disclosure'] {
+  border: 1px solid silver;
+  padding: 10px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -khtml-border-radius: 8px; }
+  *[role='disclosure'] .header {
+    font-size: 16px;
+    cursor: pointer;
+    padding-top: 0;
+    padding-left: 8px; }
+    *[role='disclosure'] .header:before, *[role='disclosure'] .header:after {
+      position: relative;
+      padding: 1px 0; }
+    *[role='disclosure'] .header:before {
+      content: url(../img/blank.png);
+      width: 16px;
+      height: 16px;
+      background: url(../img/icon-sprite.png);
+      background-position-x: -48px;
+      background-position-y: -32px;
+      margin-right: 4px; }
+    *[role='disclosure'] .header:hover:before {
+      width: 16px;
+      height: 16px;
+      background: url(../img/icon-sprite.png);
+      background-position-x: -48px;
+      background-position-y: -32px;
+      background-position-y: -48px; }
+  *[role='disclosure'] .content {
+    display: none;
+    padding: 5px 0; }
+  *[role='disclosure'].disclosed .header {
+    padding-top: 0;
+    padding-left: 8px; }
+    *[role='disclosure'].disclosed .header:before, *[role='disclosure'].disclosed .header:after {
+      position: relative;
+      padding: 1px 0; }
+    *[role='disclosure'].disclosed .header:before {
+      content: url(../img/blank.png);
+      width: 16px;
+      height: 16px;
+      background: url(../img/icon-sprite.png);
+      background-position-x: -32px;
+      background-position-y: -32px;
+      margin-right: 4px; }
+    *[role='disclosure'].disclosed .header:hover:before {
+      width: 16px;
+      height: 16px;
+      background: url(../img/icon-sprite.png);
+      background-position-x: -32px;
+      background-position-y: -32px;
+      background-position-y: -48px; }
+  *[role='disclosure'].disclosed .content {
+    display: block; }
+
+.datepicker {
+  width: 175px;
+  border-radius: 6px;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  -khtml-border-radius: 6px;
+  -moz-box-shadow: 1px 4px 6px grey;
+  -webkit-box-shadow: 1px 4px 6px grey;
+  box-shadow: 1px 4px 6px grey;
+  position: absolute;
+  display: none;
+  background-color: white;
+  z-index: 500; }
+  .datepicker header {
+    text-align: center;
+    line-height: 1.4em;
+    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+    font-size: 12px;
+    text-decoration: none;
+    color: #4f4f4f;
+    background: url(../img/button-bg.png) repeat-x;
+    font-weight: bold;
+    padding: 6px;
+    border-bottom: 1px solid gray; }
+    .datepicker header:hover {
+      color: #333333; }
+    .datepicker header div {
+      display: inline-block; }
+      .datepicker header div.prev {
+        width: 16px;
+        height: 16px;
+        background: url(../img/icon-sprite.png);
+        background-position-x: -64px;
+        background-position-y: 0px;
+        float: left;
+        cursor: pointer; }
+        .datepicker header div.prev:hover {
+          background-position-y: -16px; }
+      .datepicker header div.next {
+        width: 16px;
+        height: 16px;
+        background: url(../img/icon-sprite.png);
+        background-position-x: -48px;
+        background-position-y: 0px;
+        float: right;
+        cursor: pointer; }
+        .datepicker header div.next:hover {
+          background-position-y: -16px; }
+  .datepicker table {
+    margin: 10px;
+    align: center; }
+    .datepicker table tr {
+      margin: 0 2px; }
+    .datepicker table td {
+      margin: 0;
+      font-size: 10px;
+      text-align: center;
+      padding: 5px;
+      cursor: pointer; }
+      .datepicker table td.weekend {
+        color: #4f4f4f; }
+      .datepicker table td.other-month {
+        cursor: auto; }
+        .datepicker table td.other-month:hover {
+          background-color: white; }
+      .datepicker table td.today {
+        background-color: #ededed;
+        color: #414141; }
+      .datepicker table td:hover {
+        background-color: #fcfcfc;
+        color: #767676; }
+      .datepicker table td.selected {
+        color: red; }
+  .datepicker footer {
+    padding: 2px;
+    text-align: center; }
+    .datepicker footer a.today {
+      cursor: pointer; }
+
+* {
+  font-family: "Helvetica";
+  font-size: 11px;
+  line-height: 125%; }
+
+body {
+  margin: 25px; }

File image-source/Icons.acorn

Binary file modified.

File images/button-bezel-highlighted.png

Added
New image

File images/button-bezel.png

Added
New image

File images/check-box-bezel-selected.png

Added
New image

File images/check-box-bezel.png

Added
New image

File images/default-button-bezel-highlighted.png

Added
New image

File images/default-button-bezel.png

Added
New image

File images/hud/button-bezel-highlighted.png

Added
New image

File images/hud/button-bezel.png

Added
New image

File images/radio-bezel-selected.png

Added
New image

File images/radio-bezel.png

Added
New image

File images/scroller-down-arrow-highlighted.png

Added
New image

File images/scroller-down-arrow-track.png

Added
New image

File images/scroller-down-arrow.png

Added
New image

File images/scroller-horizontal-knob.png

Added
New image

File images/scroller-horizontal-track.png

Added
New image

File images/scroller-left-arrow-track.png

Added
New image

File images/scroller-left-arrow.png

Added
New image

File images/scroller-right-arrow-track.png

Added
New image

File images/scroller-right-arrow.png

Added
New image

File images/scroller-up-arrow-track.png

Added
New image

File images/scroller-up-arrow.png

Added
New image

File images/scroller-vertical-knob.png

Added
New image

File images/scroller-vertical-track.png

Added
New image

File images/select.png

Added
New image

File images/slider-horizontal-track.png

Added
New image

File images/slider-knob-highlighted.png

Added
New image

File images/slider-knob.png

Added
New image

File images/slider-vertical-track.png

Added
New image

File img/icon-sprite.png

Old
Old image
New
New image
-// $(function(){
+$(function(){
 /* 
  * jQUI - a simpler jQuery UI
  * (c) 2010 Matthew Schinckel <matt@schinckel.net>
  *
  */
 
+/*
+ *  Clicking on a cell in a datepicker closes the datepicker, sending the
+ *  selected date back to the date field.
+ *  
+ *  Clicking outside of a datepicker closes the datepicker.
+ *  
+ */
+ 
+function datepicker(dp, field) {
+  function draw(){
+    // See if there is an element with the id datepicker already.
+    if ($('#datepicker')[0]) return;
+    
+  }
+  
+  function redraw(){
+    // Redraw the datepicker, with the month that needs to be drawn.
+    var date = dp.attr('date');
+    // Go to the first Sunday on or before the start of the month.
+    
+  }
+
+  function nextMonth(e) {
+    // Go to the next month.
+    var date = dp.attr('date');
+    // date = date + one_month();
+    redraw();
+    e.stopPropagation();
+  };
+  function prevMonth(e) {
+    // Go to the previous month.
+    var date = dp.attr('date');
+    // date = date - one_month();
+    redraw();
+    e.stopPropagation();
+  };
+  
+  function returnDate() {
+    field.val(dp.attr('date'));
+    cancel();
+  };
+  
+  function selectDate() {
+    // Get the element that was clicked on.
+    var date = $(this).attr('date');
+    // set the date to this.
+    dp.attr('date', date);
+    returnDate();
+  };
+  function selectToday() {
+    dp.attr('date', new Date().toISOString().split('T')[0]);
+    returnDate();
+  };
+  
+  function cancel() { 
+    // Remove the attachment to a field.
+    dp.undelegate('td', 'click');
+    $("body").unbind('click');
+    // Hide the datepicker. Or destroy it?
+    dp.hide();
+  };
+  
+  // The setup.
+  // Show the datepicker over the input element it represents.
+  dp.show().css(field.position());
+  // Make all clicks on cells select their date.
+  dp.delegate('td', 'click', selectDate);
+  // Make the next/prev month buttons work.
+  dp.find('.next').click(nextMonth);
+  dp.find('.prev').click(prevMonth);
+  // Make the "Today" button work.
+  dp.find('.today').click(selectToday);
+  // Make clicking outside of the datepicker cancel.
+  $("body").bind('click', cancel);
+  
+}
+
   // Install datepickers on all relevant fields.
 
 
+
+$(function(){
+  $('input[type="date"], input[type="week"]').click(
+    function(e){
+      datepicker($('.datepicker'), $(this));
+      e.stopPropagation();
+    });
+});
 /*
  *    Progressbar
+ *  
+ *  Hmm. Webkit already has <progress> elements.
+ *  
+ */
+ 
+ 
+ 
+/*
+ *    Disclosure
  *
+ *  A single disclosable area.
  *
  */
- 
-// });
+
+function disclosure(selector){
+  $(selector).each(
+    function(i, el){
+      $(el).click(function(){
+        // slideToggle() is a nicer effect, but toggleClass() allows for
+        // better CSS integration.
+        // $(this).find('.content').slideToggle();
+        $(this).toggleClass('disclosed');
+      });
+    });
+}
+
+$(function(){
+  disclosure($("[role='disclosure']"));
+});
+
+});

File sass/_datepicker.sass

+
+.datepicker
+  width: 175px
+  +rounded-border(6px)
+  +box-shadow(1px,4px,6px,grey)
+  position: absolute
+  display: none
+  background-color: white
+  z-index: 500
+  header
+    +button-text
+    +bg-x($button-bg)
+    font-weight: bold
+    padding: 6px
+    border-bottom: 1px solid gray
+    div
+      display: inline-block
+      &.prev
+        +hover-icon(circle-triangle-w)
+        float: left
+        cursor: pointer
+      &.next
+        +hover-icon(circle-triangle-e)
+        float: right
+        cursor: pointer
+  table
+    margin: 10px
+    align: center
+    tr
+      margin: 0 2px
+    td
+      margin: 0
+      font-size: 10px
+      text-align: center
+      padding: 5px
+      &.weekend
+        color: $button-color
+      cursor: pointer
+      &.other-month
+        cursor: auto
+        &:hover
+          background-color: white
+      &.today
+        background-color: $button-color * 3
+        color: $button-color / 1.2
+      &:hover
+        background-color: $button-color * 3.2
+        color: $button-color * 1.5
+      &.selected
+        color: red
+      
+  footer
+    padding: 2px
+    text-align: center
+    a.today
+      cursor: pointer

File sass/_disclosure.sass

+*[role='disclosure']
+  border: 1px solid silver
+  padding: 10px
+  +rounded-border(8px)
+  .header
+    font-size: 16px
+    cursor: pointer
+    +hover-icon-before(triangle-e)
+  .content
+    display: none
+    padding: 5px 0
+  &.disclosed
+    .header
+      +hover-icon-before(triangle-s)
+    .content
+      display: block
+    

File sass/_icons.sass

+=icon($name, $hover: false, $checked: false, $hovering: false)
+  +square($icon-size)
+  background: url(unquote("#{$icon-source}"))
+  @if $name == error or $name == alert
+    +icon-pos(1,6,$hover,$checked,$hovering)
+  @if $name == info or $name == notice
+    +icon-pos(3,6,$hover,$checked,$hovering)
+  @if $name == help
+    +icon-pos(4,6,$hover,$checked,$hovering)
+  @if $name == success
+    +icon-pos(2,6,$hover,$checked,$hovering)
+  @if $name == calendar
+    +icon-pos(5,6,$hover,$checked,$hovering)
+  @if $name == circle-close
+    +icon-pos(1,1,$hover,$checked,$hovering)
+  @if $name == circle-triangle-n
+    +icon-pos(2,1,$hover,$checked,$hovering)
+  @if $name == circle-triangle-s
+    +icon-pos(3,1,$hover,$checked,$hovering)
+  @if $name == circle-triangle-e
+    +icon-pos(4,1,$hover,$checked,$hovering)
+  @if $name == circle-triangle-w
+    +icon-pos(5,1,$hover,$checked,$hovering)
+  @if $name == close
+    +icon-pos(1,3,$hover,$checked,$hovering)
+  @if $name == triangle-n
+    +icon-pos(2,3,$hover,$checked,$hovering)
+  @if $name == triangle-s
+    +icon-pos(3,3,$hover,$checked,$hovering)
+  @if $name == triangle-e
+    +icon-pos(4,3,$hover,$checked,$hovering)
+  @if $name == triangle-w
+    +icon-pos(5,3,$hover,$checked,$hovering)
+  @if $name == thumb
+    +icon-pos(8,1,$hover,$checked,$hovering)
+  @if $name == checkbox
+    +icon-pos(7,1,$hover,$checked,$hovering)
+  @if $name == radio
+    +icon-pos(8,1,$hover,$checked,$hovering)
+  
+=hover-icon($name)
+  +icon($name, true)
 
+=toggle-icon($name)
+  +icon($name, false, true)
 
-=icon
-  +square($icon-size)
-  background: 
-    image: url(unquote("#{$icon-source}"))
-
-=icon-pos($x, $y)
+=icon-pos($x, $y, $hover: false, $checked: false, $hovering: false)
   background-position:
     x: -$icon-size * ($x - 1)
     y: -$icon-size * ($y - 1)
-  &:hover, &:checked
+  @if $hover == true
+    &:hover
+      background-position-y: -$icon-size * $y
+  @if $checked == true
+    &:checked
+      background-position-y: -$icon-size * $y
+  @if $hovering == true
     background-position-y: -$icon-size * $y
 
-=icon-pos-no-hover($x, $y)
-  +icon-pos($x, $y)
-  &:hover
-    background-position-y: -$icon-size * ($y - 1)
-  &:hover:checked
-    background-position-y: -$icon-size * $y
+=before-after
+  &:before, &:after
+    position: relative
+    padding: 1px 0
+    
+=icon-before($name)
+  +before-after
+  &:before
+    content: url(unquote($blank-image))
+    +icon($name)
+    margin-right: 4px
 
-=icon-pos-before-after($x, $y)
-  &:before, &:after
-    background-position:
-      x: -$icon-size * ($x - 1)
-      y: -$icon-size * ($y - 1)
-  &:hover:before, &:hover:after
-    background-position-y: -$icon-size * $y
+=hover-icon-before($name)
+  padding-top: 0
+  +icon-before($name)
+  padding-left: 8px
+  &:hover:before
+    +icon($name, false, false, true)
+    
 
-=icon-before-after($l: 0, $r: 0, $t: 0, $b: 0)
-  content: url(unquote($blank-image))
-  +icon
-  position: relative
-  top: -$t
-  padding-bottom: $t
+=icon-after($name, $hover: false)
+  +before-after
+  &:after
+    content: url(unquote($blank-image))
+    +icon($name)
+    margin-left: 4px
 
-  
-=icon-before($x, $y, $l: 0, $r: 0, $t: 0, $b: 0)
-  +icon-pos-before-after($x,$y)
-  &:before
-    +icon-before-after($l,$r,$t,$b)
-    margin: 0 8px 0 0
-
-=icon-after($x,$y,$l: 0, $r: 0, $t: 0, $b: 0)
-  +icon-pos-before-after($x,$y)
-  &:after
-    +icon-before-after($l,$r,$t,$b)
-    margin: 0 0 0 8px
-    
-// TODO: Have icons and hover-icons
-
-=icon-alert
-  +icon-pos(1,5)
-=icon-error
-  +icon-alert
-=icon-info
-  +icon-pos(3,5)
-=icon-notice
-  +icon-info
-=icon-help
-  +icon-pos(4,5)
-=icon-check
-  +icon-pos(2,5)
-=icon-success
-  +icon-check
-
-=icon-circle-close
-  +icon-pos(1,1)
-=icon-circle-triangle-n
-  +icon-pos(2,1)
-=icon-circle-triangle-s
-  +icon-pos(3,1)
-=icon-circle-triangle-e
-  +icon-pos(4,1)
-=icon-circle-triangle-w
-  +icon-pos(5,1)
-
-=icon-close
-  +icon-pos(1,3)
-
-.icon
-  +icon
-  display: inline-block
-  overflow: hidden
-  text-indent: -999999px
-  
-  &.icon-circle-close
-    +icon-circle-close
-  &.icon-circle-triangle-n
-    +icon-circle-triangle-n
-  &.icon-circle-triangle-s
-    +icon-circle-triangle-s
-  &.icon-circle-triangle-e
-    +icon-circle-triangle-e
-  &.icon-circle-triangle-w
-    +icon-circle-triangle-w
-  
-  &.icon-close
-    +icon-close
-  
-  &.icon-alert
-    +icon-alert
-  &.icon-info
-    +icon-info
-  &.icon-notice
-    +icon-notice
-  &.icon-help
-    +icon-help
-  &.icon-check
-    +icon-success
+=hover-icon-after($name)
+  padding-top: 0
+  +icon-after($name)
+  padding-right: 8px
+  &:hover:after
+    +icon($name, false, false, true)

File sass/_input.sass

-$button-border-colour: #b6b6b6
-$button-text-colour: #4f4f4f
-$button-border-colour-hover: #9d9d9d
-$button-text-colour-hover: #313131
-$button-border-colour-active: #7096ab
-$button-text-colour-active: #1c4257
-$button-border-colour-selected: $button-border-colour-hover
-$button-text-colour-selected: $button-text-colour-hover
-$button-border-colour-default: $button-border-colour-active
-$button-text-colour-default: $button-text-colour-active
+$button-color: #4f4f4f
+$button-color-active: #1c4257
 
+// hover -> 0.65
+// border -> 2.25
+// shadow -> 2.75
+
+=button-color($color)
+  color: $color
+  border: 1px solid $color * 2.25
+  &:hover:not(:disabled), &:active:not(:disabled)
+    color: $color * 0.65
+    border-color: $color * 2.1
+    +box-shadow(0px, 0px, 5px, $color * 2.5)
+    
 =button-text
   text-align: center
-  color: $button-text-colour
   line-height: 1.4em
   text-shadow: 0px 1px 0px rgba(255,255,255,0.8)
-  font-size: 14px
+  font-size: 12px
   text-decoration: none
-  font-weight: bold
+  color: $button-color
+  &:hover
+    color: $button-color * 0.65
   
 button, input[type="button"], input[type="submit"], .button, .button-set label, .button-set input[type="radio"]
   margin: 5px
   -webkit-appearance: none
   +bg-x($button-bg)
   +button-text
+  +button-color($button-color)
   &:checked, &:checked + label
     background-position: 0px -66px
-    border-color: $button-border-colour-selected
-    color: $button-text-colour-selected
-    &:hover:not(:disabled), &:active:not(:disabled)
-      border-color: $button-border-colour-selected
-      color: $button-text-colour-selected
     &:active:not(:disabled)
       background-position: 0px -66px
-  &:hover:not(:disabled)
-    +box-shadow(0px, 0px, 8px, rgba(212,212,212,1))
-    border-color: $button-border-colour-hover
-    color: $button-text-colour-hover
   &:active:not(:disabled)
     background-position: 0px -66px
   &.default, &[type="submit"]
     background-position: 0px -33px
-    border-color: $button-border-colour-default
-    color: $button-text-colour-default
-    &:hover, &:active:not(:disabled)
-      color: $button-text-colour-default
-      border-color: $button-border-colour-default
+    +button-color($button-color-active)
     &:active:not(:disabled)
       background-position: 0px -99px
   &:disabled, &.disabled, &:disabled + label
     &:hover
       +box-shadow(0,0,0,0)
-      color: $button-text-colour
+      color: $button-color
       &[type="submit"], &.default
-        color: $button-text-colour-default
+        color: $button-color-active
     &:active + label
       background-position: 0 0
     +opacity(50)
   display: inline-block
   position: relative
   cursor: pointer
-  border: 1px solid $button-border-colour
   +rounded-border(3px)
-  padding: 4px 8px
+  padding: 2px 16px
   
   &[type="radio"]
     display: none
   // TODO: make the icons in the before/after selectors hover too.
 
   &[left-icon="action"]
-    +icon-before(1,1)
+    +hover-icon-before(circle-close)
   
   &[right-icon]
-    +icon-after(2,1)
+    +hover-icon-after(circle-close)
 
 .button-set
   margin: 0 7px
     -webkit-appearance: none
     &:disabled
       +opacity(50)
-  &[type="radio"], &[type="checkbox"]
-    +icon
-    +icon-pos-no-hover(8,1)
+  &[type="radio"]
+    +toggle-icon(radio)
   &[type="checkbox"]
-    +icon-pos-no-hover(7,1)
+    +toggle-icon(checkbox)
   &[type="range"]
     margin: 10px 0
     height: 5px
     +bg-x($range-bg)
-    &:hover:not(:disabled)::-webkit-slider-thumb
-      +icon-pos(6,2)
-        
     &::-webkit-slider-thumb
       -khtml-appearance: none
-      +icon
-      +icon-pos(6,1)
+      +icon(thumb)
+

File sass/_messages.sass

-$error-border-color: #f2c0c0
-$error-bg-color: #fce0e0
-$success-border-color: #c0f2c0
-$success-bg-color: #e0fce0
-$notice-border-color: #c0c0f2
-$notice-bg-color: #e0e0fc
-$help-border-color: #e2e2a0
-$help-bg-color: #fcfce0
+$error-color: #f4a0a0
+$success-color: #a0c4a0
+$notice-color: #9696f2
+$help-color: #d2d280
 
 p.error, p.success, p.help, p.notice
   border: 1px solid
-  padding: 8px 10px 10px 10px
-  margin: 10px 0
-  +icon-before(0,0,2px,0)
-    
-      
+  padding: 7px 10px 10px 10px
+  margin: 8px 0
+
+=msg-color($color)
+  color: $color * 0.5
+  border-color: $color
+  background-color: $color * 1.5
+  
 p.error
-  border-color: $error-border-color
-  background-color: $error-bg-color
-  &:before
-    +icon-error
+  +msg-color($error-color)
+  +icon-before(error)
 
 p.success
-  border-color: $success-border-color
-  background-color: $success-bg-color
-  &:before
-    +icon-success
+  +msg-color($success-color)
+  +icon-before(success)
 
 p.notice
-  border-color: $notice-border-color
-  background-color: $notice-bg-color
-  &:before
-    +icon-notice
+  +msg-color($notice-color)
+  +icon-before(notice)
 
 p.help
-  border-color: $help-border-color
-  background-color: $help-bg-color
-  &:before
-    +icon-help
+  +msg-color($help-color)
+  +icon-before(help)

File sass/_progress_bar.sass

-.progress-bar, *[role="progress-bar"]
+progress, .progress
+  -webkit-appearance: none
   margin: 10px 0
   width: 500px
   +bg-x($button-bg)
   border: 1px solid silver
-  background-position-y: -75px
+  background-position-y: -70px
   +rounded-border(3px)
-  height: 24px
-  .value
+  height: 12px
+  div
+    display: block
     +bg-x($button-bg)
-    background-position-y: -34px
+    background-position-y: -44px
     max-width: 100%
     height: 100%
     +rounded-border-left(3px)

File sass/_tabs.sass

     a
       display: block
       +button-text
+      font-weight: bold
       +full-width
     &:disabled
       +opacity(50)

File sass/jqui.sass

 @import messages
 @import progress_bar
 @import resizeable
+@import disclosure
+@import datepicker
 
 *
   font-family: "Helvetica"

File test/index.haml

+!!! 5
+%html
+  %head
+    %title jQUI Test
+    %link{:rel=>:stylesheet, :href=>"../css/jqui.css", :type=>"text/css"}
+    %script{:src=>"../js/jquery-1.4.2.min.js"}
+    %script{:src=>"../js/jqui.js"}
+    
+  %body
+    %div.tab-demo
+      %h2 Tab Demo
+      %ul{:role=>"tabbed-browser"}
+        - 1.upto(5) do |i|
+          %li
+            %a{:href=>"tab#{i}.html"} Tab #{i}
+        %div{:role=>"tab-content"} Tab content goes here.
+
+      %h3 HTML5 Tab bar
+      %section{:role=>"tabbed-browser"}
+        %header{:role=>"tab-bar"}
+          - 1.upto(5) do |i|
+            %li
+              %a{:href=>"tab#{i}.html"} Tab #{i}
+              
+        %section{:role=>"tab-content"}
+          Tab content goes here
+      
+    %div.button-demo
+      %h2 Button Demo
+      %h3 Buttons
+      %button Button
+      %button{:disabled=>:disabled} Disabled Button
+      %button.default Default Button
+      %br
+      %div.button Div Button
+      %div.button.disabled Disabled Div Button
+      %div.button.default Default Div Button
+      %br
+      %input{:type=>:button, :value=>"Input Button"}
+      %input{:type=>:button, :value=>"Disabled Input Button", :disabled=>:disabled}
+      %input.default{:type=>:button, :value=>"Default Input Button"}
+      %input{:type=>:submit, :value=>"Input Submit"}
+      %input{:type=>:submit, :value=>"Disabled Input Submit", :disabled=>:disabled}
+      
+      %h3 Icon buttons
+      %button{"left-icon"=>:action} Left Icon
+      %button{"left-icon"=>:action, "right-icon"=>:close} Left & Right Icons
+      
+      %h3 Button set
+      %div.button-set
+        %input#radio1{:type=>:radio, :name=>"button-set"}
+        %label{:for=>:radio1} Choice 1
+        %input#radio2{:type=>:radio, :name=>"button-set", :checked=>:checked}
+        %label{:for=>:radio2} Choice 2
+        %input#radio3{:type=>:radio, :name=>"button-set"}
+        %label{:for=>:radio3} Choice 3
+        %input#radio4{:type=>:radio, :name=>"button-set", :disabled=>:disabled}
+        %label{:for=>:radio4} Disabled
+      
+      %h3 Radio buttons
+      %input#radio-a{:type=>:radio, :name=>"radio"}
+      %input#radio-b{:type=>:radio, :name=>"radio", :checked=>:checked}
+      %input#radio-c{:type=>:radio, :name=>"radio"}
+      
+      %h3 Disabled radio buttons
+      %input{:type=>:radio, :name=>"radio-dis", :disabled=>:disabled}
+      %input{:type=>:radio, :name=>"radio-dis", :disabled=>:disabled, :checked=>:checked}
+      
+      %h3 Checkboxes
+      %input{:type=>:checkbox}
+      %input{:type=>:checkbox, :checked=>:checked}
+      
+      %h3 Disabled checkboxes
+      %input{:type=>:checkbox, :disabled=>:disabled}
+      %input{:type=>:checkbox, :checked=>:checked, :disabled=>:disabled}
+  
+  %div.dialog-demo
+    %h2 Dialog demo
+    %h3 Modal dialog
+    %button{:role=>"dialog-source", :href=>"dialog.html", :modal=>:true} Open Modal Dialog
+    
+    %h3 Non-modal dialog
+    %button{:role=>"dialog-source", :href=>"dialog.html"} Open Non Modal Dialog
+    
+  %div.html5-demo
+    %h2 HTML5 demo
+    %h3 Number fields
+    %input{:type=>:range, :style=>"width:350px", :value=>"26"}
+    %br
+    %input{:type=>:range, :style=>"width:350px", :value=>"26", :disabled=>:disabled}
+    %br
+    %input{:type=>:number, :min=>0, :max=>21, :value=>11}
+  
+    %h3 Placeholder
+    %input{:type=>:text, :placeholder=>"Placeholder text"}
+    
+    %h3 Email, URL
+    %input{:type=>:email, :placeholder=>"Enter email address"}
+    %br
+    %input{:type=>:url, :placeholder=>"Enter website address"}
+    
+    %h3 Datepicker
+    %h2 Datepicker fields
+    %input{:type=>:date}
+    %input{:type=>:month}
+    %input{:type=>:week}
+    %input{:type=>:time}
+    %input{:type=>:datetime}
+    %input{:type=>"datetime-local"}
+    
+    %h2 Datepicker inline
+    %div.datepicker
+      %header
+        %div.prev
+        %div.month April
+        %div.year 2010
+        %div.next
+      %content
+        %table
+          %thead
+            %tr
+              - %W{Sunday Monday Tuesday Wednesday Thursday Friday Saturday}.each do |day|
+                %th{:class=>"#{day[0..0] == 'S' ? 'weekend' : 'weekday'}"}
+                  %span{:title => "#{day}"} #{day[0..1]}
+          %tbody
+            - i = -3
+            - 5.times do |j|
+              %tr
+                - 7.times do |k|
+                  %td{:class=>"#{'other-month' if i < 1 or i > 30} #{'weekend' if k == 0 or k == 6} #{'today' if i == 25}", :date=>"#{'2010-04-' + (i > 0 and i < 10 ? "0" + i.to_s : i.to_s) if i > 0 and i < 31}"} #{i if i > 0 and i < 31}
+                  - i += 1
+      %footer
+        %a.today Select Today
+        
+    %h3 Search
+    %input{:type=>:search, :placeholder=>:Google}
+    
+    %h3 Colour picker
+    %input{:type=>:color}
+  
+  %div.scrollbar-demo
+    %h2 Scrollbars
+    %div
+      %p Text goes here
+  
+  %div.status-demo
+    %h2 Highlight / Error / Success
+    %p.error
+      %b Error:
+      needs more cowbell.
+    %p.success
+      %b Success:
+      your data was saved.
+    %p.notice
+      %b Did you know:
+      that bananas are seedless, and thus likely to go extinct.
+    %p.help
+      %b Help:
+      These boxes contain useful help.
+  
+  %div.progress-bar-demo
+    %h2 Progress bar
+    %div.progress{:max=>100, :value=>22}
+      %div
+    
+    %progress{:max=>100, :value=>22}
+    
+    %script
+      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 5 + "%";})}, 1000);
+      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 3 + "%";})}, 700);
+      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 1 + "%";})}, 1200);
+      
+    %h2 Spinner
+    %div.spinner
+  
+  %div.resizeable-demo
+    %h2 Resizeable demo
+    %div{:role=>:resizeable, :left=>:true, :right=>:true}
+      %div.handle.left
+      %div.handle.right
+  
+  %div.disclosure-demo
+    %h2 Disclosure demo
+    %div{:role=>:disclosure}
+      %div.header Disclose
+      %div.content
+        %p
+          Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.

File test/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <title>jQUI Test</title>
+    <link href='../css/jqui.css' rel='stylesheet' type='text/css' />
+    <script src='../js/jquery-1.4.2.min.js'></script>
+    <script src='../js/jqui.js'></script>
+  </head>
+  <body>
+    <div class='tab-demo'>
+      <h2>Tab Demo</h2>
+      <ul role='tabbed-browser'>
+        <li>
+          <a href='tab1.html'>Tab 1</a>
+        </li>
+        <li>
+          <a href='tab2.html'>Tab 2</a>
+        </li>
+        <li>
+          <a href='tab3.html'>Tab 3</a>
+        </li>
+        <li>
+          <a href='tab4.html'>Tab 4</a>
+        </li>
+        <li>
+          <a href='tab5.html'>Tab 5</a>
+        </li>
+        <div role='tab-content'>Tab content goes here.</div>
+      </ul>
+      <h3>HTML5 Tab bar</h3>
+      <section role='tabbed-browser'>
+        <header role='tab-bar'>
+          <li>
+            <a href='tab1.html'>Tab 1</a>
+          </li>
+          <li>
+            <a href='tab2.html'>Tab 2</a>
+          </li>
+          <li>
+            <a href='tab3.html'>Tab 3</a>
+          </li>
+          <li>
+            <a href='tab4.html'>Tab 4</a>
+          </li>
+          <li>
+            <a href='tab5.html'>Tab 5</a>
+          </li>
+        </header>
+        <section role='tab-content'>
+          Tab content goes here
+        </section>
+      </section>
+    </div>
+    <div class='button-demo'>
+      <h2>Button Demo</h2>
+      <h3>Buttons</h3>
+      <button>Button</button>
+      <button disabled='disabled'>Disabled Button</button>
+      <button class='default'>Default Button</button>
+      <br />
+      <div class='button'>Div Button</div>
+      <div class='button disabled'>Disabled Div Button</div>
+      <div class='button default'>Default Div Button</div>
+      <br />
+      <input type='button' value='Input Button' />
+      <input disabled='disabled' type='button' value='Disabled Input Button' />
+      <input class='default' type='button' value='Default Input Button' />
+      <input type='submit' value='Input Submit' />
+      <input disabled='disabled' type='submit' value='Disabled Input Submit' />
+      <h3>Icon buttons</h3>
+      <button left-icon='action'>Left Icon</button>
+      <button left-icon='action' right-icon='close'>Left & Right Icons</button>
+      <h3>Button set</h3>
+      <div class='button-set'>
+        <input id='radio1' name='button-set' type='radio' />
+        <label for='radio1'>Choice 1</label>
+        <input checked='checked' id='radio2' name='button-set' type='radio' />
+        <label for='radio2'>Choice 2</label>
+        <input id='radio3' name='button-set' type='radio' />
+        <label for='radio3'>Choice 3</label>
+        <input disabled='disabled' id='radio4' name='button-set' type='radio' />
+        <label for='radio4'>Disabled</label>
+      </div>
+      <h3>Radio buttons</h3>
+      <input id='radio-a' name='radio' type='radio' />
+      <input checked='checked' id='radio-b' name='radio' type='radio' />
+      <input id='radio-c' name='radio' type='radio' />
+      <h3>Disabled radio buttons</h3>
+      <input disabled='disabled' name='radio-dis' type='radio' />
+      <input checked='checked' disabled='disabled' name='radio-dis' type='radio' />
+      <h3>Checkboxes</h3>
+      <input type='checkbox' />
+      <input checked='checked' type='checkbox' />
+      <h3>Disabled checkboxes</h3>
+      <input disabled='disabled' type='checkbox' />
+      <input checked='checked' disabled='disabled' type='checkbox' />
+    </div>
+  </body>
+  <div class='dialog-demo'>
+    <h2>Dialog demo</h2>
+    <h3>Modal dialog</h3>
+    <button href='dialog.html' modal='true' role='dialog-source'>Open Modal Dialog</button>
+    <h3>Non-modal dialog</h3>
+    <button href='dialog.html' role='dialog-source'>Open Non Modal Dialog</button>
+  </div>
+  <div class='html5-demo'>
+    <h2>HTML5 demo</h2>
+    <h3>Number fields</h3>
+    <input style='width:350px' type='range' value='26' />
+    <br />
+    <input disabled='disabled' style='width:350px' type='range' value='26' />
+    <br />
+    <input max='21' min='0' type='number' value='11' />
+    <h3>Placeholder</h3>
+    <input placeholder='Placeholder text' type='text' />
+    <h3>Email, URL</h3>
+    <input placeholder='Enter email address' type='email' />
+    <br />
+    <input placeholder='Enter website address' type='url' />
+    <h3>Datepicker</h3>
+    <h2>Datepicker fields</h2>
+    <input type='date' />
+    <input type='month' />
+    <input type='week' />
+    <input type='time' />
+    <input type='datetime' />
+    <input type='datetime-local' />
+    <h2>Datepicker inline</h2>
+    <div class='datepicker'>
+      <header>
+        <div class='prev'></div>
+        <div class='month'>April</div>
+        <div class='year'>2010</div>
+        <div class='next'></div>
+      </header>
+      <content>
+        <table>
+          <thead>
+            <tr>
+              <th class='weekend'>
+                <span title='Sunday'>Su</span>
+              </th>
+              <th class='weekday'>
+                <span title='Monday'>Mo</span>
+              </th>
+              <th class='weekday'>
+                <span title='Tuesday'>Tu</span>
+              </th>
+              <th class='weekday'>
+                <span title='Wednesday'>We</span>
+              </th>
+              <th class='weekday'>
+                <span title='Thursday'>Th</span>
+              </th>
+              <th class='weekday'>
+                <span title='Friday'>Fr</span>
+              </th>
+              <th class='weekend'>
+                <span title='Saturday'>Sa</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class='other-month weekend ' date=''></td>
+              <td class='other-month  ' date=''></td>
+              <td class='other-month  ' date=''></td>
+              <td class='other-month  ' date=''></td>
+              <td class='  ' date='2010-04-01'>1</td>
+              <td class='  ' date='2010-04-02'>2</td>
+              <td class=' weekend ' date='2010-04-03'>3</td>
+            </tr>
+            <tr>
+              <td class=' weekend ' date='2010-04-04'>4</td>
+              <td class='  ' date='2010-04-05'>5</td>
+              <td class='  ' date='2010-04-06'>6</td>
+              <td class='  ' date='2010-04-07'>7</td>
+              <td class='  ' date='2010-04-08'>8</td>
+              <td class='  ' date='2010-04-09'>9</td>
+              <td class=' weekend ' date='2010-04-10'>10</td>
+            </tr>
+            <tr>
+              <td class=' weekend ' date='2010-04-11'>11</td>
+              <td class='  ' date='2010-04-12'>12</td>
+              <td class='  ' date='2010-04-13'>13</td>
+              <td class='  ' date='2010-04-14'>14</td>
+              <td class='  ' date='2010-04-15'>15</td>
+              <td class='  ' date='2010-04-16'>16</td>
+              <td class=' weekend ' date='2010-04-17'>17</td>
+            </tr>
+            <tr>
+              <td class=' weekend ' date='2010-04-18'>18</td>
+              <td class='  ' date='2010-04-19'>19</td>
+              <td class='  ' date='2010-04-20'>20</td>
+              <td class='  ' date='2010-04-21'>21</td>
+              <td class='  ' date='2010-04-22'>22</td>
+              <td class='  ' date='2010-04-23'>23</td>
+              <td class=' weekend ' date='2010-04-24'>24</td>
+            </tr>
+            <tr>
+              <td class=' weekend today' date='2010-04-25'>25</td>
+              <td class='  ' date='2010-04-26'>26</td>
+              <td class='  ' date='2010-04-27'>27</td>
+              <td class='  ' date='2010-04-28'>28</td>
+              <td class='  ' date='2010-04-29'>29</td>
+              <td class='  ' date='2010-04-30'>30</td>
+              <td class='other-month weekend ' date=''></td>
+            </tr>
+          </tbody>
+        </table>
+      </content>
+      <footer>
+        <a class='today'>Select Today</a>
+      </footer>
+    </div>
+    <h3>Search</h3>
+    <input placeholder='Google' type='search' />
+    <h3>Colour picker</h3>
+    <input type='color' />
+  </div>
+  <div class='scrollbar-demo'>
+    <h2>Scrollbars</h2>
+    <div>
+      <p>Text goes here</p>
+    </div>
+  </div>
+  <div class='status-demo'>
+    <h2>Highlight / Error / Success</h2>
+    <p class='error'>
+      <b>Error:</b>
+      needs more cowbell.
+    </p>
+    <p class='success'>
+      <b>Success:</b>
+      your data was saved.
+    </p>
+    <p class='notice'>
+      <b>Did you know:</b>
+      that bananas are seedless, and thus likely to go extinct.
+    </p>
+    <p class='help'>
+      <b>Help:</b>
+      These boxes contain useful help.
+    </p>
+  </div>
+  <div class='progress-bar-demo'>
+    <h2>Progress bar</h2>
+    <div class='progress' max='100' value='22'>
+      <div></div>
+    </div>
+    <progress max='100' value='22'></progress>
+    <script>
+      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 5 + "%";})}, 1000);
+      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 3 + "%";})}, 700);
+      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 1 + "%";})}, 1200);
+    </script>
+    <h2>Spinner</h2>
+    <div class='spinner'></div>
+  </div>
+  <div class='resizeable-demo'>
+    <h2>Resizeable demo</h2>
+    <div left='true' right='true' role='resizeable'>
+      <div class='handle left'></div>
+      <div class='handle right'></div>
+    </div>
+  </div>
+  <div class='disclosure-demo'>
+    <h2>Disclosure demo</h2>
+    <div role='disclosure'>
+      <div class='header'>Disclose</div>
+      <div class='content'>
+        <p>
+          Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.
+        </p>
+      </div>
+    </div>
+  </div>
+</html>

File test/tab1.haml

+%p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat. Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna. Vivamus eget accumsan mauris. Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Cras dignissim tincidunt molestie. Suspendisse rutrum dignissim tortor quis mollis. Sed tempor feugiat ligula in imperdiet. Quisque molestie viverra erat in adipiscing.

File test/tab1.html

+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat. Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna. Vivamus eget accumsan mauris. Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Cras dignissim tincidunt molestie. Suspendisse rutrum dignissim tortor quis mollis. Sed tempor feugiat ligula in imperdiet. Quisque molestie viverra erat in adipiscing.</p>

File test/tab2.haml

+%p Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.

File test/tab2.html

+<p>Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.</p>

File test/tab3.haml

+%p
+  Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.

File test/tab3.html

+<p>
+  Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.
+</p>

File test/tab4.haml

+%p
+  Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus. Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.

File test/tab4.html

+<p>
+  Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus. Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.
+</p>

File test/tab5.haml

+%p
+  Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.

File test/tab5.html

+<p>
+  Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.
+</p>