Adjust picture, add figure to spec, adjust default styling of figures.

Author: tabatkins

css3-flexbox/Overview.html

@@ -1575,7 +1575,11 @@ <h3 id=flex-property><span class=secno>7.1. </span> The ‘<a
    class=css>0</code>’.</span>
 
   <p> The keyword ‘<code class=property>none</code>’ computes to ‘<code
-   class=css>0 0 auto</code>’.
+   class=css>0 0 auto</code>’. <figure> <img height=240
+   src="images/rel-vs-abs-flex.svg" width=504> <figcaption> A diagram showing
+   the difference between "absolute" flex (starting from a basis of zero) and
+   "relative" flex (starting from a basis of the item's content size).
+   </figcaption> </figure>
 
   <h3 id=flex-examples><span class=secno>7.2. </span> Common Values of ‘<a
    href="#flex"><code class=property>flex</code></a>’</h3>

css3-flexbox/Overview.src.html

@@ -1086,6 +1086,16 @@ <h3 id='flex-property'>
 
 	<p>
 		The keyword 'none' computes to ''0 0 auto''. 
+	
+	<figure>
+		<img src='images/rel-vs-abs-flex.svg' width='504' height='240'>
+		<figcaption>
+			A diagram showing the difference between "absolute" flex
+			(starting from a basis of zero)
+			and "relative" flex
+			(starting from a basis of the item's content size).
+		</figcaption>
+	</figure>
 
 
 <h3 id='flex-examples'>

css3-flexbox/images/rel-vs-abs-flex.svg

@@ -25,7 +25,7 @@ body {
 
 /* Pagination */
 h1, h2, h3, h4, h5, h6 { page-break-after: avoid }
-div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
+figure, div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
 div.example { page-break-inside: avoid }
 dt { page-break-after: avoid }
 
@@ -215,36 +215,37 @@ ul.index {
 s, del {text-decoration: line-through; color: red}
 u, ins {text-decoration: underline; background: #bfa}
 
-div.figure, div.sidefigure {
+div.figure, div.sidefigure, figure {
 	text-align: center;
 	margin: 2.5em 0;
 }
-div.sidefigure {
+div.sidefigure, figure.sidefigure {
 	float: right;
 	width: 50%;
 	margin: 0 0 0.5em 0.5em
 }
-div.figure img, div.sidefigure img {
+div.figure img, div.sidefigure img, figure img,
+div.figure object, div.sidefigure object, figure object {
 	display: block;
 	margin: auto;
 	max-width: 100%
 }
-p.caption, caption {
+p.caption, figcaption, caption {
 	text-align: center;
 	font-style: italic;
 	font-size: 90%;
 }
-p.caption:before {
+p.caption:before, figcaption:before {
 	content: "Figure " counter(figure) ". ";
 	font-weight: bold;
 }
-p.caption {
+p.caption, figcaption {
 	counter-increment: figure;
 }
 
 /* DL list is indented, but figure inside it is not */
 dd { margin-left: 2em }
-dd div.figure { margin-left: -2em }
+dd div.figure, dd figure { margin-left: -2em }
 
 sup {
 	vertical-align: super;