Update documentation

* Add new outline setting for rectangle and ellipse tool.
* Add size label in Brush preview, remove red "size line".
* Update all related screenshots.
* Reshot all tool setup images due to fixed small close button.
* Introduce "floatright" and "floatright2" in _doc.css to align
  screenshots nicely to the text beside it.

documentation/_doc.css

@@ -160,7 +160,18 @@ ul {
 	margin-bottom: 15px;
 	margin-top: 15px;
 	min-height: 42px;
-}
-.box-info {
 	background: #e4ffde url(icons/info-box_32.png) 15px 15px no-repeat;
 }
+
+/* Image with text floating to the right */
+.floatright {
+	border:none;
+	padding:0em 1em 2em 0;
+	float:right
+}
+
+.floatright2 {
+	border:none;
+	padding:2.5em 1em 2em 0;
+	float:right
+}

documentation/menus.html

@@ -29,19 +29,19 @@ <h2>The menus</h2>
 <p>Most menus and their items are standard or don't need much explanation. Also, a short help text appears in the status bar, if you hover over an item. Let's just move quickly through them and concentrate on the  not immediately obvious ones:</p>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/menus_artpaint.png" style="border:none;padding:15px;float:right" alt="Menu: ArtPaint" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/menus_artpaint.png" class="floatright2" alt="Menu: ArtPaint" /></td><td style="vertical-align: top">
 <h3>ArtPaint</h3>
 <p>Everything related to the application itself:<br />
 Start a <span class="menu">New project…</span>, open the <span class="menu">Settings…</span> panel, this <span class="menu">User manual…</span>, info <span class="menu">About ArtPaint</span>, and <span class="menu">Close</span> the current project or <span class="menu">Quit</span> ArtPaint altogether.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/menus_file.png" style="border:none;padding:15px;float:right;float:right" alt="Menu: File" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/menus_file.png" class="floatright2" alt="Menu: File" /></td><td style="vertical-align: top">
 <h3>File</h3>
 <p>All the file handling:<br />
 <span class="menu">Open/Save…</span> image and project files, the latter are specific to ArtPaint and contain layers and meta data. For quick access, the submenus for <span class="menu">Recent images/projects</span> list recently opened files.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/menus_edit.png" style="border:none;padding:15px;float:right" alt="Menu: Edit" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/menus_edit.png" class="floatright2" alt="Menu: Edit" /></td><td style="vertical-align: top">
 <h3>Edit</h3>
 <p><span class="menu">Undo/Redo</span> the last action (the number of reversible actions can be adjusted in the settings).</p>
 
@@ -56,7 +56,7 @@ <h3>Edit</h3>
 A right-click sets the rotation point. Holding <span class="key">SHIFT</span> snaps to 22.5° angles.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/menus_selection.png" style="border:none;padding:15px;float:right" alt="Menu: Selection" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/menus_selection.png" class="floatright2" alt="Menu: Selection" /></td><td style="vertical-align: top">
 <h3><a id="selection" name="selection">Selection</a></h3>
 <p>You can select <span class="menu">All</span> of the layer, or only <span class="menu">All non-transparent</span> pixels. You can un-select everything with <span class="menu">None</span> or <span class="menu">Invert</span> the selection.</p>
 
@@ -67,18 +67,18 @@ <h3><a id="selection" name="selection">Selection</a></h3>
 <p>With <span class="menu">Hide borders</span> the ant-line demarcating the selection can be turned off/on, in case you need an infestation-free view of your work of art.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/menus_layer.png" style="border:none;padding:15px;float:right" alt="Menu: Layer" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/menus_layer.png" class="floatright2" alt="Menu: Layer" /></td><td style="vertical-align: top">
 <h3>Layer</h3>
 <p><span class="menu">Add</span> creates a new layer. You can <span class="menu">Delete</span>, <span class="menu">Duplicate</span> or <span class="menu">Merge down</span> (i.e. merge with one below) the currently active layer.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/menus_canvas.png" style="border:none;padding:15px;float:right" alt="Menu: Canvas" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/menus_canvas.png" class="floatright2" alt="Menu: Canvas" /></td><td style="vertical-align: top">
 <h3>Canvas</h3>
 <p><span class="menu">Rotate ±90°</span> will rotate the whole canvas clockwise/counter-clockwise.</p>
 <p><span class="menu">Resize…</span> and <span class="menu">Crop…</span> open a panel to enter values manually, but you can also manipulate the canvas directly in the window. Hold <span class="key">SHIFT</span> to lock the aspect ratio.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/menus_window.png" style="border:none;padding:15px;float:right" alt="Menu: Window" /></td><td>
+<tr><td style="vertical-align: top"><img src="./images/menus_window.png" class="floatright2" alt="Menu: Window" /></td><td style="vertical-align: top">
 <h3>Window</h3>
 <p><span class="menu">Zoom in/out</span> or <span class="menu">Set zoom level</span> between 25% and 800%.</p>
 
@@ -87,7 +87,7 @@ <h3>Window</h3>
 <p>Last is a list of the special panels which are described under <a href="other_windows.html">The other windows</a>. It's a good idea to memorize the shortcuts to them.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/menus_add-ons.png" style="border:none;padding:15px;float:right" alt="Menu: Add-ons" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/menus_add-ons.png" class="floatright2" alt="Menu: Add-ons" /></td><td style="vertical-align: top">
 <h3>Add-ons</h3>
 <p>Here you'll find all available add-ons, see <a href="./add-ons.html">The add-ons</a>.</p>
 </td></tr>

documentation/other_windows.html

@@ -30,9 +30,7 @@ <h2>The other windows</h2>
 <p><span class="key">ALT</span>&#160;<span class="key">TAB</span> will hide/show all these windows for an unobscured view of the canvas.</p>
 
 <table summary="layout">
-<tr><td colspan="2" style="vertical-align: top"><img src="./images/windows_colors.png" style="border:none;padding:0px;float:left" alt="Window: Colors" /></td></tr>
-<tr><td></td>
-<td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/windows_colors.png" class="floatright2" alt="Window: Colors" /></td><td style="vertical-align: top">
 <h3><a id="colors" name="colors">Colors</a></h3>
 <p>You can choose a different <span class="menu">Color model</span> from the menu: <span class="menu">RGB</span>, <span class="menu">CMYK</span>, <span class="menu">HSV</span>, <span class="menu">CIELAB</span> or <span class="menu">BeOS</span>. The additional "A" slider is the alpha channel, aka transparency.</p>
 <p>When in RGB mode, holding <span class="key">SHIFT</span> when clicking a slider sets the other sliders to that same value. It's a quick way to set a shade of gray.</p>
@@ -44,10 +42,10 @@ <h3><a id="colors" name="colors">Colors</a></h3>
 
 <p>Under <span class="menu">Color set</span> you can create a <span class="menu">New color set</span> with 8 to 64 colors, <span class="menu">Delete current set</span> and <span class="menu">Open/save color set</span>.</p>
 
-<p>The little arrow widgets beside the palette let you switch between the available color sets.</p>
+<p>The little arrow widgets beside the palette let you switch between the available color sets. You can give each set an individual name with the text field between those arrow widgets.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/windows_layers.png" style="border:none;padding:15px;float:right" alt="Window: Layers" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/windows_layers.png" class="floatright2" alt="Window: Layers" /></td><td style="vertical-align: top">
 <h3><a id="layers" name="layers">Layers</a></h3>
 <p>Here you see all layers stacked up on each other, with a checkbox that controls if a layer is visible.</p>
 
@@ -58,7 +56,7 @@ <h3><a id="layers" name="layers">Layers</a></h3>
 <p>At the top is a slider to set a layer's transparency (<span class="menu">Alpha</span>) and a menu to set a blending <span class="menu">Mode</span>. Since ArtPaint implements these modes similarly to other graphics applications, you can find in-depth explanations for them online, e.g. in the <a href="https://helpx.adobe.com/photoshop/using/blending-modes.html">Photoshop help</a> or the <a href="https://docs.gimp.org/en/gimp-concepts-layer-modes.html">GIMP docs</a>.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/windows_tools+setup.png" style="border:none;padding:15px;float:right" alt="Window: Tools &amp; Tool setup" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/windows_tools+setup.png" class="floatright2" alt="Window: Tools &amp; Tool setup" /></td><td style="vertical-align: top">
 <h3><a id="tools" name="tools">Tools &amp; Tool setup</a></h3>
 <p>Here you find all the available tools. By changing the Tools window size, you can re-arrange the icons.</p>
 
@@ -69,20 +67,19 @@ <h3><a id="tools" name="tools">Tools &amp; Tool setup</a></h3>
 <p>All tools and their settings (and keyboard key) are described on the pages of <a href="./tools.html">The tools</a>.</p>
 </td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/windows_brushes.png" style="border:none;padding:15px;float:right" alt="Window: Brushes" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/windows_brushes.png" class="floatright2" alt="Window: Brushes" /></td><td style="vertical-align: top">
 <h3><a id="brushes" name="brushes">Brushes</a></h3>
 
 <p>In this window you configure the brush that can be used with various tools by ticking the checkmark "<span class="menu">Use current brush</span>":<br />
-<a href="./tools/freehand.html">Freehand</a>, <a href="./tools/straight-line.html">Straight Line</a>, <a href="./tools/transparency.html">Transparency</a>, and <a href="./tools/eraser.html">Eraser</a>.</p>
+See <a href="./tools/freehand.html">Freehand</a>, <a href="./tools/straight-line.html">Straight Line</a>, <a href="./tools/transparency.html">Transparency</a>, and <a href="./tools/eraser.html">Eraser</a>.</p>
 
 <p>First you decide on the shape of the brush, either <span class="menu">Ellipse</span> or <span class="menu">Rectangle</span>.</p>
 
-<p>The <span class="menu">Size</span> slider does the obvious.</p>
+<p>The <span class="menu">Size</span> slider does the obvious. Its value is also visible in the bottom left corner of the preview box.</p>
 
 <p><span class="menu">Aspect</span> deforms the shape of the brush. "0" being completely circular/square, up to "-10" to "+10" squashes the brush to become taller than wide and vice-versa.</p>
 
-<p><span class="menu">Angle</span> will rotate the brush up to 90° to the left or right. "0" being the upright default. Alternatively, you can click-and-drag the brush in the preview box at the top. Hold <span class="key">SHIFT</span> to snap to 45° angles.<br />
-The red line under the brush represents its scale: full-length means the representation is 1:1, half-length is 1:2 and so forth.</p>
+<p><span class="menu">Angle</span> will rotate the brush up to 90° to the left or right. "0" being the upright default. Alternatively, you can click-and-drag the brush in the preview box at the top. Hold <span class="key">SHIFT</span> to snap to 45° angles.</p>
 
 <p>Lastly, <span class="menu">Hardness</span> sets how crisp the brush edges are.</p>
 

documentation/settings.html

@@ -29,20 +29,20 @@ <h2>The settings</h2>
 <p>The settings panel provides a few options, separated into four tabs:</p>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/settings_windows.png" style="border:none;padding:15px;float:right" alt="Settings: Windows" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/settings_windows.png" class="floatright2" alt="Settings: Windows" /></td><td style="vertical-align: top">
 <h3>Windows</h3>
 <p>With these checkboxes, you decide which windows to always <span class="menu">Keep in front</span> of, i.e. float above, the canvas.</p></td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/settings_undo.png" style="border:none;padding:15px;float:right" alt="Settings: Undo" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/settings_undo.png" class="floatright2" alt="Settings: Undo" /></td><td style="vertical-align: top">
 <h3>Undo</h3>
 <p>Depending on the amount of memory available and size and number of projects and layers you work with, you can set the number of revertable actions to <span class="menu">Off</span>, <span class="menu">Unlimited</span>, or choose <span class="menu">Adjustable</span> and set the number of <span class="menu">Undo steps</span> explicitly.</p></td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/settings_transparency.png" style="border:none;padding:15px;float:right" alt="Settings: Transparency" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/settings_transparency.png" class="floatright2" alt="Settings: Transparency" /></td><td style="vertical-align: top">
 <h3>Transparency</h3>
 <p>You can change the <span class="menu">Colors</span> of the checker pattern that's used to represent transparency, and also its <span class="menu">Grid size</span>.<br />
 <span class="button">Defaults</span> reverts to the standard grid size and light/dark gray colors.</p></td></tr>
 
-<tr><td style="vertical-align: top"><img src="./images/settings_misc.png" style="border:none;padding:15px;float:right" alt="Settings: Miscellaneous" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/settings_misc.png" class="floatright2" alt="Settings: Miscellaneous" /></td><td style="vertical-align: top">
 <h3>Miscellaneous</h3>
 <p>You can set the mouse pointer to <span class="menu">Tool cursor</span> and have a small icon of the active tool beside it, or &mdash; to avoid obscuring even a few pixels &mdash; set to <span class="menu">Cross-hair cursor</span>.</p>
 <p><span class="menu">Show brush size</span> draws the outline of the currently set brush around the mouse pointer. A sort of preview where the paint will hit the canvas.</p>

documentation/tools/airbrush.html

@@ -28,7 +28,7 @@
 <h2>The Airbrush tool  - <span class="key">A</span></h2>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/airbrush.png" style="border:none;padding-right:15px;float:right" alt="Setup: Airbrush tool" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/airbrush.png" class="floatright" alt="Setup: Airbrush tool" /></td><td style="vertical-align: top">
 
 <p>This tool emulates a real-world airbrush.<br />
 You can set the <span class="menu">Size</span> of the airbrush and its <span class="menu">Flow</span>, i.e. how much paint is sprayed how quickly.</p>

documentation/tools/blur.html

@@ -28,7 +28,7 @@
 <h2>The Blur tool - <span class="key">U</span></h2>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/blur.png" style="border:none;padding-right:15px;float:right" alt="Setup: Blur tool" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/blur.png" class="floatright" alt="Setup: Blur tool" /></td><td style="vertical-align: top">
 
 <p> This tool applies a blur effect.<br />
 You can either set the <span class="menu">Size</span> of your blur tool or opt to <span class="menu">Use current brush</span> with the currently configured tip in the <a href="../other_windows.html#brushes">Brushes</a> window.</p>

documentation/tools/color-picker.html

@@ -28,7 +28,7 @@
 <h2>The Color Picker tool - <span class="key">C</span></h2>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/color-picker.png" style="border:none;padding-right:15px;float:right" alt="Setup: Color Picker tool" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/color-picker.png" class="floatright" alt="Setup: Color Picker tool" /></td><td style="vertical-align: top">
 
 <p>With this tool, you can pick the color under the mouse pointer and use it as new foreground color.<br />
 If you'd like the average color over several pixels, adjust the <span class="menu">Size</span> slider. It represents the side length of the sample square that the mouse pointer centers on.</p>

documentation/tools/ellipse.html

@@ -28,10 +28,13 @@
 <h2>The Ellipse tool - <span class="key">P</span></h2>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/ellipse.png" style="border:none;padding-right:15px;float:right" alt="Setup: Ellipse tool" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/ellipse.png" class="floatright" alt="Setup: Ellipse tool" /></td><td style="vertical-align: top">
 
 <p>This tool creates an ellipse.<br />
-If you don't activate <span class="menu">Fill ellipse</span>, only an outline is drawn.</p>
+You can adjust the <span class="menu">Outline width</span> with the slider, or choose to <span class="menu">Fill ellipse</span> instead.</p>
+
+<p><span class="menu">Enable rotation</span> and you get to rotate the ellipse after you've drawn it.<br />
+Holding <span class="key">SHIFT</span> snaps to 22.5° angles.</p>
 
 <p><span class="menu">Enable antialiasing</span> to avoid jagged edges.</p>
 

documentation/tools/eraser.html

@@ -28,7 +28,7 @@
 <h2>The Eraser tool - <span class="key">E</span></h2>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/eraser.png" style="border:none;padding-right:15px;float:right" alt="Setup: Eraser tool" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/eraser.png" class="floatright" alt="Setup: Eraser tool" /></td><td style="vertical-align: top">
 
 <p>You can either set the <span class="menu">Size</span> of your eraser or opt to <span class="menu">Use current brush</span> with the currently configured tip in the <a href="../other_windows.html#brushes">Brushes</a> window.</p>
 

documentation/tools/fill.html

@@ -28,7 +28,7 @@
 <h2>The Fill tool - <span class="key">I</span></h2>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/fill.png" style="border:none;padding-right:15px;float:right" alt="Setup: Fill tool" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/fill.png" class="floatright" alt="Setup: Fill tool" /></td><td style="vertical-align: top">
 
 <p>The fill tool applies the foreground color to the the object you left-click, and the background color if right-clicked.<br />
 The <span class="menu">Tolerance</span> decides if pixels on the current layer are similar enough to the color of the pixel you clicked on to be changed to the new color. A very low tolerance dyes only pixels of the exact same color. A higher tolerance will also dye shades of that color.</p>

documentation/tools/freehand-line.html

@@ -28,7 +28,7 @@
 <h2>The Freehand Line tool - <span class="key">F</span></h2>
 
 <table summary="layout">
-<tr><td style="vertical-align: top"><img src="./images/freehand-line.png" style="border:none;padding-right:15px;float:right" alt="Setup: Freehand Line" /></td><td style="vertical-align: top">
+<tr><td style="vertical-align: top"><img src="./images/freehand-line.png" class="floatright" alt="Setup: Freehand Line" /></td><td style="vertical-align: top">
 <p>This tool lets you draw freely.<br />
 You can either set the <span class="menu">Width</span> of your brush or opt to <span class="menu">Use current brush</span> with the currently configured tip in the <a href="../other_windows.html#brushes">Brushes</a> window.</p>