basic style pass on documentation pane.

css/app.css

@@ -62,7 +62,7 @@ h2 {
     font-size: 25px;
     line-height: 1.25;
     font-weight: bold;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
 }
 
 h3:last-child,
@@ -94,8 +94,13 @@ h5 {
 }
 
 p {
+    font-size: 15px;
     margin:0;
-    padding:0;
+    padding-bottom:20px;
+}
+
+p:last-child {
+    padding-bottom: 0;
 }
 
 em {
@@ -628,10 +633,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     top: 120px;
 }
 
-.inspector-body::-webkit-scrollbar {
-    background: #fff;
-}
-
 .inspector-inner {
     padding: 20px;
     position: relative;
@@ -1552,28 +1553,14 @@ div.combobox {
 }
 
 .help-wrap {
-    background:#f1f1f1;
     position: absolute;
-    height: 100%;
     top:60px;
-    padding-left:40px;
-    padding-top:10px;
-    padding-right:20px;
-    padding-bottom:150px;
+    bottom: 30px;
+    padding: 20px 20px 20px 50px;
     left: 0;
     overflow-y: scroll;
 }
 
-.help-wrap .left-content {
-    background: #fff;
-    margin-right:130px;
-    border-radius: 4px;
-    padding:10px;
-}
-
-.help-wrap .left-content .body p {
-    padding: 0 0 5px 0;
-}
 
 .help-wrap .left-content .body p code {
     padding:2px 4px;
@@ -1581,23 +1568,33 @@ div.combobox {
 }
 
 .help-wrap .toc {
-    width:120px;
+    /* This is two columns, 41.66666 x .4 = 16.6666 */
+    width:40%;
     float:right;
+    margin-left: 20px;
+    margin-bottom: 20px;
+    padding-left: 5px
 }
 
-.help-wrap .toc li {
+.help-wrap .toc li a {
+    display: block;
     font-weight: bold;
-    border-bottom: 1px solid #ccc;
-    padding:2px;
+    border: 1px solid #CCC;
+    border-bottom: 0px;
+    padding:2px 5px;
 }
 
-.help-wrap .toc a.selected {
-    color:#222;
+.help-wrap .toc li a.selected {
+    background: #eef0ff;
 }
 
-.help-wrap .toc li:last-child {
-    font-weight: bold;
-    border: 0;
+.help-wrap .toc li:first-child a {
+    border-radius: 4px 4px 0 0;
+}
+
+.help-wrap .toc li:last-child a {
+    border-bottom: 1px solid #CCC;
+    border-radius: 0 0 4px 4px
 }
 
 /* Map
@@ -2186,7 +2183,7 @@ a.success-action.twitter:before {
     height: 20px;
     overflow: visible;
     width: 10px;
-    background: #EBEBEB;
+    background: white;
     border-left: 1px solid #DDD;
 }
 ::-webkit-scrollbar-button {

img/source/sprite.svg

@@ -13,7 +13,7 @@
    height="320"
    id="svg12393"
    version="1.1"
-   inkscape:version="0.48.2 r9819"
+   inkscape:version="0.48.1 r9760"
    sodipodi:docname="sprite.svg"
    inkscape:export-filename="/Users/tmcw/src/iD/img/sprite.png"
    inkscape:export-xdpi="90"
@@ -38,12 +38,12 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="27.487791"
-     inkscape:cx="474.16358"
-     inkscape:cy="307.60208"
+     inkscape:zoom="1"
+     inkscape:cx="473.6954"
+     inkscape:cy="307.27342"
      inkscape:document-units="px"
      inkscape:current-layer="layer12"
-     showgrid="true"
+     showgrid="false"
      inkscape:window-width="1483"
      inkscape:window-height="804"
      inkscape:window-x="131"
@@ -201,6 +201,10 @@
        orientation="1,0"
        position="460,310"
        id="guide6106" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="480,345"
+       id="guide3361" />
   </sodipodi:namedview>
   <metadata
      id="metadata12398">
@@ -210,7 +214,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -2069,10 +2073,9 @@
          inkscape:export-ydpi="90" />
     </g>
     <path
-       inkscape:connector-curvature="0"
-       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.75000000000000000"
-       d="m 491.72727,1.9999967 c -2.45454,0 -5.72727,2 -5.72727,2 l 0,11.0000003 c 0,0 3.27273,-1.5 5.72727,-1.5 2.45454,0 3.27273,1 3.27273,1 0,0 0.81819,-1 3.27273,-1 2.45454,0 5.72727,1.5 5.72727,1.5 l 0,-11.0000003 c 0,0 -3.27273,-2 -5.72727,-2 -2.45454,0 -3.27273,2 -3.27273,2 0,0 -0.81819,-2 -3.27273,-2 z m 0,3 c 1.63637,0 2.27273,0.9999999 2.27273,0.9999999 l 0,1 c 0,0 -0.63636,-0.9999999 -2.27273,-0.9999999 -1.63636,0 -3.72727,0.9999999 -3.72727,0.9999999 l 0,-1 c 0,0 2.09091,-0.9999999 3.72727,-0.9999999 z m 6.54546,0 c 1.63636,0 3.72727,0.9999999 3.72727,0.9999999 l 0,1 c 0,0 -2.09091,-0.9999999 -3.72727,-0.9999999 -1.63637,0 -2.27273,0.9999999 -2.27273,0.9999999 l 0,-1 c 0,0 0.63636,-0.9999999 2.27273,-0.9999999 z m -6.54546,2 c 1.63637,0 2.27273,0.9999999 2.27273,0.9999999 l 0,1.0000002 c 0,0 -0.63636,-1.0000001 -2.27273,-1.0000001 -1.63636,0 -3.72727,1.0000001 -3.72727,1.0000001 l 0,-1.0000002 c 0,0 2.09091,-0.9999999 3.72727,-0.9999999 z m 6.54546,0 c 1.63636,0 3.72727,0.9999999 3.72727,0.9999999 l 0,1.0000002 c 0,0 -2.09091,-1.0000001 -3.72727,-1.0000001 -1.63637,0 -2.27273,1.0000001 -2.27273,1.0000001 l 0,-1.0000002 c 0,0 0.63636,-0.9999999 2.27273,-0.9999999 z m -6.54546,2.0000002 c 1.63637,0 2.27273,0.9999999 2.27273,0.9999999 l 0,1.0000002 c 0,0 -0.63636,-1.0000001 -2.27273,-1.0000001 -1.63636,0 -3.72727,1.0000001 -3.72727,1.0000001 l 0,-1.0000002 c 0,0 2.09091,-0.9999999 3.72727,-0.9999999 z m 6.54546,0 c 1.63636,0 3.72727,0.9999999 3.72727,0.9999999 l 0,1.0000002 c 0,0 -2.09091,-1.0000001 -3.72727,-1.0000001 -1.63637,0 -2.27273,1.0000001 -2.27273,1.0000001 l 0,-1.0000002 c 0,0 0.63636,-0.9999999 2.27273,-0.9999999 z m -6.54546,6.0000001 c -2.45454,0 -5.72727,1 -5.72727,1 l 0,1 7,-1 1,1 1,-6e-6 1,6e-6 1,-1 7,0.999998 0,-1 c 0,0 -3.27273,-1 -5.72727,-1 -2.45454,0 -3.27273,1 -3.27273,1 0,0 -0.81819,-1 -3.27273,-0.999998 z"
-       id="path8697"
-       sodipodi:nodetypes="sccscsccscssccsccssccsccssccsccssccsccssccsccssccsccsscccccccccscs" />
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 465 4 L 462 6 L 462 16 L 463 17 L 468 17 L 469 18 L 471 18 L 472 17 L 477 17 L 478 16 L 478 6 L 475 4 L 473 4 L 470 6 L 467 4 L 465 4 z M 464 8 L 468 8 L 468 9 L 464 9 L 464 8 z M 472 8 L 476 8 L 476 9 L 472 9 L 472 8.40625 L 472 8 z M 464 10 L 468 10 L 468 11 L 464 11 L 464 10 z M 472 10 L 476 10 L 476 11 L 472 11 L 472 10 z M 464 12 L 468 12 L 468 13 L 464 13 L 464 12 z M 472 12 L 476 12 L 476 13 L 472 13 L 472 12 z "
+       transform="translate(25,-3.0624999e-6)"
+       id="path3363" />
   </g>
 </svg>

js/id/ui.js

@@ -54,7 +54,7 @@ iD.ui = function(context) {
 
         container.append('div')
             .style('display', 'none')
-            .attr('class', 'help-wrap col6');
+            .attr('class', 'help-wrap fillL col5');
 
         container.append('div')
             .attr('class', 'map-control zoombuttons')

js/id/ui/help.js

@@ -11,9 +11,8 @@ iD.ui.Help = function(context) {
                 .select('.help-wrap')
                 .html('');
 
-            var toc = pane.append('div')
-                .attr('class', 'toc')
-                .append('ul');
+            var toc = pane.append('ul')
+                .attr('class', 'toc');
 
             function clickHelp(d) {
                 doctitle.text(d.title);

js/id/ui/preset_grid.js

@@ -211,7 +211,7 @@ iD.ui.PresetGrid = function(context, entity) {
                     .style('max-height', '200px')
                     .style('opacity', '1');
 
-                presetinspect.append('h2')
+                presetinspect.append('h3')
                     .text(d.name());
 
                 var tag = {key: Object.keys(d.tags)[0]};