worked in all but one of the notes from issue 262

css/editor.css

@@ -114,9 +114,10 @@ img {
   padding-right: 2em;
   white-space: nowrap;
   cursor: pointer;
+  font-size: 14px;
 }
 
-@media screen and (max-width: 940px) {
+@media screen and (max-width: 980px) {
   #nav-options .responsive,
   #nav-options .responsive:hover,
   #nav-options .nav-item.responsive.enabled {
@@ -137,7 +138,7 @@ img {
   }
 }
 
-@media screen and (max-width: 755px) {
+@media screen and (max-width: 785px) {
   #editor-pane-nav-options {
     border: none;
   }
@@ -157,11 +158,11 @@ img {
   }
   #hints-nav-item {
     margin-left: 0px !important;
-    left: 300px !important;
+    left: 310px !important;
   }
 }
 
-@media screen and (max-width: 590px) {
+@media screen and (max-width: 620px) {
   #editor-nav-item.nav-item,
   #preview-nav-item.nav-item {
     display: none !important;
@@ -184,6 +185,7 @@ img {
 #nav-options #editor-nav-item.nav-item,
 #nav-options #preview-nav-item.nav-item {
   cursor: default;
+  font-size: 16px;
 }
 
 #nav-options .nav-item.enabled,
@@ -396,22 +398,30 @@ img {
 
 #hints-nav-item {
   left: 100%;
-  margin-left: -90px;
+  margin-left: -100px;
   position: absolute;
   top: 13px;
 
   color: #3D59FE !important;
   opacity: 1 !important;
 }
 
-#hints-nav-item.on:before {
-  content: "☑ ";
-  color: black !important;
+#hints-nav-item .checkbox {
+  display: inline-block;
+  border: 1px solid grey;
+  border-radius: 2px;
+  background-color: white;
+  background-image: url("../img/checkbox-gradient.png");
+  background-repeat: repeat-x;
+  background-position: left center;
+  color: black;
+  width: 10px;
+  height: 10px;
+  line-height: 10px;
 }
 
-#hints-nav-item.off:before {
-  content: "☐ ";
-  color: black !important;
+#hints-nav-item .checkbox.off {
+  color: transparent;
 }
 
 

css/modals.css

@@ -80,7 +80,8 @@
 .thimble-title {
   position: relative;
   top: -2em;
-  text-align: center;
+  text-align: left;
+  padding-left: 5px;
 
   font-weight: bold;
   font-family: "myriad-pro", sans-serif;
@@ -102,7 +103,7 @@
 }
 
 
-.thimble-title:before {
+.thimble-grey-bar .thimble-title:before {
   content: "▾ ";
   padding-left: 1em;
 }
@@ -127,7 +128,7 @@
   margin: 0 auto 1em;
   padding-left: 1em;
   padding-top: 5px;
-  width: 320px;
+  width: 370px;
 }
 
 .thimble-url-box a {
@@ -143,6 +144,7 @@
   text-align: left;
   position: relative;
   padding: 2px 10px;
+  font-size: 14px;
 }
 
 .thimble-additionals ul {

index.html

@@ -53,7 +53,8 @@
               <li data-size="large">Large</li>
             </ul>
           </div>
-          <div id="hints-nav-item"  class="nav-item on" title="Disable HTML and CSS hints and suggestions">Show hints</div>
+          <div id="hints-nav-item"  class="nav-item" title="Disable HTML and CSS hints and suggestions">
+            <span class="checkbox on">✓</span> Show hints</div>
         </div>
         <div id="preview-pane-nav-options">
           <!-- previous, save draft, publish -->

js/fc/ui/context-sensitive-help.js

@@ -30,7 +30,7 @@ define(["./mark-tracker"], function(MarkTracker) {
       cursorHelpMarks.clear();
 
       // people may not want helpful hints
-      if ($("#hints-nav-item").hasClass("off")) return;
+      if ($("#hints-nav-item .checkbox").hasClass("off")) return;
 
       var help = helpIndex.get(codeMirror.getCursorIndex());
 

js/main.js

@@ -125,7 +125,7 @@ define("main", function(require) {
 
   // make hints on/off actually work
   $("#hints-nav-item").click(function() {
-    var hints = $(this);
+    var hints = $(".checkbox",$(this));
     if (hints.hasClass("on")) {
       hints.removeClass("on").addClass("off");
       // make sure to hide the help, in case it's active when this option's selected