+Shapes, +Background, +Fill/Stroke, +Line Join

Web/css/main.css

@@ -301,7 +301,8 @@ form[role="dialog"][data-type="value-selector"] menu button::-moz-focus-inner {
   border: none;
   outline: none;
 }
-form[role="dialog"][data-type="value-selector"] menu button {
+form[role="dialog"][data-type="value-selector"] menu button,
+.button {
   width: calc(49.5%);
   height: 3.8rem;
   margin: 0 0 1rem;
@@ -326,13 +327,15 @@ form[role="dialog"][data-type="value-selector"] menu button {
 }
 /* Press (default & affirmative) */
 form[role="dialog"][data-type="value-selector"] menu button:active,
-form[role="dialog"][data-type="value-selector"] menu button.affirmative:active {
+form[role="dialog"][data-type="value-selector"] menu button.affirmative:active,
+.button:active {
   border-color: #008aaa;
   background: #008aaa;
   color: #333;
 }
 /* affirmative */
-form[role="dialog"][data-type="value-selector"] menu button.affirmative {
+form[role="dialog"][data-type="value-selector"] menu button.affirmative,
+.button.affirmative {
   background-image: url(value_selector/images/ui/affirmative.png);
   background-color: #00caf2;
   border-color: #008eab;
@@ -344,7 +347,8 @@ form[role="dialog"][data-type="value-selector"] menu button,
 form[role="dialog"][data-type="value-selector"] menu button:first-child {
   margin: 0;
 }
-form[role="dialog"][data-type="value-selector"] menu button.full {
+form[role="dialog"][data-type="value-selector"] menu button.full,
+.button.full {
   width: 100%;
 }
 /* Right to left tweaks */
@@ -368,8 +372,8 @@ body {
   outline: none;
 }
 .hidden {
-  display: none;
-  visibility: none;
+  display: none !important;
+  visibility: none !important;
 }
 div#container {
   position: absolute;
@@ -426,7 +430,8 @@ button {
   left: 97%;
 }
 .picker,
-.about {
+.about,
+.tour {
   font-family: 'MozTT-Light';
   width: 30rem;
   height: 24.6rem;
@@ -437,10 +442,12 @@ button {
   margin-left: -15rem;
 }
 .picker .color-picker,
-.about .color-picker {
+.about .color-picker,
+.tour .color-picker {
   margin: 0;
 }
-.about {
+.about,
+.tour {
   background: #262626;
   padding: 1rem 2rem;
   height: 23rem;
@@ -451,22 +458,35 @@ button {
   box-shadow: 0 0 0.3rem black;
 }
 .about a,
+.tour a,
 .about a:link,
+.tour a:link,
 .about a:visited,
-.about a:active {
+.tour a:visited,
+.about a:active,
+.tour a:active {
   color: white;
 }
-.about .close {
+.about .close,
+.tour .close {
   background: #262626;
   color: white;
   border: 1px solid gray;
 }
-.about p {
+.about p,
+.tour p {
   font-size: 11pt;
 }
-.about span {
+.about span,
+.tour span {
   font-size: 8pt;
 }
+.tour .button {
+  width: 30rem;
+  position: absolute;
+  bottom: 1rem;
+  left: 1.8rem;
+}
 header {
   width: 100%;
   height: 5.3rem;
@@ -507,8 +527,9 @@ header #title {
   left: -2rem;
 }
 #menu {
-  height: 100%;
   width: 15rem;
+  height: 100%;
+  display: block;
   background: #262626;
   position: absolute;
   left: -15rem;
@@ -518,7 +539,7 @@ header #title {
   font-size: 8pt;
   transition: left 0.2s ease-out;
   border-collapse: collapse;
-  overflow: hidden;
+  overflow-y: auto;
 }
 #menu.pulled {
   left: 0;
@@ -538,6 +559,9 @@ header #title {
   padding: 0 0.6rem;
   cursor: pointer;
 }
+#menu p {
+  width: 65%;
+}
 #menu span {
   float: right;
   font-size: 7pt;
@@ -590,13 +614,14 @@ header #title {
   background-image: url('imgs/redo.png');
 }
 #menu .options {
-  display: block;
+  display: table-row;
+  vertical-align: top;
   margin-top: 1rem;
 }
 #menu .bottom {
+  width: 100%;
   position: absolute;
   bottom: 5rem;
-  width: 100%;
 }
 #menu .bottom button[class^='icon'] {
   margin-left: 3.5rem;

Web/css/main.less

@@ -3,7 +3,6 @@
 @import 'seekbars';
 @import 'value_selector';
 
-
 html, body {
   margin: 0;
   font-size: 10px;
@@ -20,8 +19,8 @@ html, body {
 }
 
 .hidden {
-  display: none;
-  visibility: none;
+  display: none !important;
+  visibility: none !important;
 }
 
 div#container {
@@ -84,7 +83,7 @@ button {
   left: 97%;
 }
 
-.picker, .about {
+.picker, .about, .tour {
   font-family: 'MozTT-Light';
   width: 30rem;
   height: 24.6rem;
@@ -99,7 +98,7 @@ button {
   }
 }
 
-.about {
+.about, .tour {
   background: #262626;
   padding: 1rem 2rem;;
   height: 23rem;
@@ -127,6 +126,15 @@ button {
   }
 }
 
+.tour {
+  .button {
+    width: 30rem;
+    position: absolute;
+    bottom: 1rem;
+    left: 1.8rem;
+  }
+}
+
 header {
   width: 100%;
   height: 5.3rem;
@@ -174,8 +182,9 @@ header {
 
 
 #menu {
-  height: 100%;
   width: 15rem;
+  height: 100%;
+  display: block;
   background: #262626;
   position: absolute;
   left: -15rem;
@@ -185,7 +194,7 @@ header {
   font-size: 8pt;
   transition: left 0.2s ease-out;
   border-collapse: collapse;
-  overflow: hidden;
+  overflow-y: auto;
 
   &.pulled {
     left: 0;
@@ -204,6 +213,9 @@ header {
     padding: 0 0.6rem;
     cursor: pointer;
   }
+  p {
+    width: 65%;
+  }
   span {
     float: right;
     font-size: 7pt;
@@ -260,13 +272,14 @@ header {
   }
 
   .options {
-    display: block;
+    display: table-row;
+    vertical-align: top;
     margin-top: 1rem;
   }
   .bottom {
+    width: 100%;
     position: absolute;
     bottom: 5rem;
-    width: 100%;
     button[class^='icon'] {
       margin-left: 3.5rem;
     }

Web/css/value_selector.less

@@ -144,7 +144,7 @@ form[role="dialog"][data-type="value-selector"] menu button::-moz-focus-inner {
   outline: none;
 }
 
-form[role="dialog"][data-type="value-selector"] menu button {
+form[role="dialog"][data-type="value-selector"] menu button, .button {
   width: calc((100% - 1rem) / 2);
   height: 3.8rem;
   margin: 0 0 1rem;
@@ -170,14 +170,14 @@ form[role="dialog"][data-type="value-selector"] menu button {
 
 /* Press (default & affirmative) */
 form[role="dialog"][data-type="value-selector"] menu button:active,
-form[role="dialog"][data-type="value-selector"] menu button.affirmative:active {
+form[role="dialog"][data-type="value-selector"] menu button.affirmative:active, .button:active {
   border-color: #008aaa;
   background: #008aaa;
   color: #333;
 }
 
 /* affirmative */
-form[role="dialog"][data-type="value-selector"] menu button.affirmative {
+form[role="dialog"][data-type="value-selector"] menu button.affirmative, .button.affirmative {
   background-image: url(value_selector/images/ui/affirmative.png);
   background-color: #00caf2;
   border-color: #008eab;
@@ -192,7 +192,7 @@ form[role="dialog"][data-type="value-selector"] menu button:first-child {
   margin: 0;
 }
 
-form[role="dialog"][data-type="value-selector"] menu button.full {
+form[role="dialog"][data-type="value-selector"] menu button.full, .button.full {
   width: 100%;
 }