[css3-conditional] Make examples represent slighty better practices.

Addresses issue raised in
http://lists.w3.org/Archives/Public/www-style/2012Dec/0224.html
which is issue 1 in the LCWD disposition of comments.

Author: dbaron

css3-conditional/Overview.html

@@ -12,11 +12,11 @@
    rel=dcterms.rights>
   <meta content="CSS Conditional Rules Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-02-06 name=dcterms.issued>
+  <meta content=2013-02-07 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/css3-conditional/"
    name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
-  <meta content="http://www.w3.org/TR/2013/ED-css3-conditional-20130206/"
+  <meta content="http://www.w3.org/TR/2013/ED-css3-conditional-20130207/"
    name=dcterms.identifier>
   <link href="../default.css" rel=stylesheet type="text/css">
   <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
@@ -33,14 +33,14 @@
 
    <h1>CSS Conditional Rules Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 February
     2013</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><a href="http://www.w3.org/TR/2013/ED-css3-conditional-20130206/">
-     http://www.w3.org/TR/2013/ED-css3-conditional-20130206/</a>
+    <dd><a href="http://www.w3.org/TR/2013/ED-css3-conditional-20130207/">
+     http://www.w3.org/TR/2013/ED-css3-conditional-20130207/</a>
 
     <dt>Latest version:
 
@@ -364,6 +364,7 @@ <h2 id=processing><span class=secno>2. </span>Processing of conditional
    <p>For example, this rule:
 
    <pre>@media print {
+  /* hide navigation controls when printing */
   #navigation { display: none }
 }</pre>
 
@@ -386,8 +387,10 @@ <h2 id=processing><span class=secno>2. </span>Processing of conditional
 
   <div class=example>For example, with this set of nested rules:
    <pre>@media print { // rule (1)
+  /* hide navigation controls when printing */
   #navigation { display: none }
   @media (max-width: 12cm) { // rule (2)
+    /* keep notes in flow when printing to narrow pages */
     .note { float: none }
   }
 }</pre>
@@ -496,15 +499,18 @@ <h2 id=at-media><span class=secno>5. </span>Media-specific style sheets:
   <div class=example>
    <p>This ‘<code class=css>@media</code>’ rule:
 
-   <pre>@media print, (max-width: 600px) {
-  #extra_navigation { display: none }
+   <pre>@media screen and (min-width: 35em),
+       print and (min-width: 40em) {
+  #section_navigation { float: left; width: 10em; }
 }</pre>
 
-   <p>has the condition ‘<code class=css>print, (max-width:
-    600px)</code>’, which is true for print media and for devices whose
-    width is at most 600px. When either of these is true, the condition of
-    the rule is true, and the rule ‘<code class=css>#extra_navigation {
-    display: none }</code>’ is applied.
+   <p>has the condition ‘<code class=css>screen and (min-width: 35em),
+    print and (min-width: 40em)</code>’, which is true for screen displays
+    whose viewport is at least 35 times the initial font size and for print
+    displays whose viewport is at least 40 times the initial font size. When
+    either of these is true, the condition of the rule is true, and the rule
+    ‘<code class=css>#section_navigation { float: left; width: 10em;
+    }</code>’ is applied.
   </div>
 
   <p>In terms of the grammar, this specification extends the <a

css3-conditional/Overview.src.html

@@ -193,6 +193,7 @@ <h2 id="processing">Processing of conditional group rules</h2>
 <div class="example">
 <p>For example, this rule:</p>
 <pre>@media print {
+  /* hide navigation controls when printing */
   #navigation { display: none }
 }</pre>
 <p>causes a particular CSS rule (making elements with ID "navigation" be
@@ -215,8 +216,10 @@ <h2 id="processing">Processing of conditional group rules</h2>
 
 <div class="example">For example, with this set of nested rules:
 <pre>@media print { // rule (1)
+  /* hide navigation controls when printing */
   #navigation { display: none }
   @media (max-width: 12cm) { // rule (2)
+    /* keep notes in flow when printing to narrow pages */
     .note { float: none }
   }
 }</pre>
@@ -308,13 +311,21 @@ <h2 id="at-media">Media-specific style sheets:  the '@media' rule</h2>
 
 <div class="example">
 <p>This '@media' rule:</p>
-<pre>@media print, (max-width: 600px) {
-  #extra_navigation { display: none }
+<pre>@media screen and (min-width: 35em),
+       print and (min-width: 40em) {
+  #section_navigation { float: left; width: 10em; }
 }</pre>
-<p>has the condition ''print, (max-width: 600px)'', which is
-true for print media and for devices whose width is at most 600px.  When
-either of these is true, the condition of the rule is true, and the rule
-''#extra_navigation { display: none }'' is applied.
+<p>has the condition
+''screen and (min-width: 35em), print and (min-width: 40em)'',
+which is true for screen displays
+whose viewport is at least 35 times the initial font size
+and for print displays
+whose viewport is at least 40 times the initial font size.
+When either of these is true,
+the condition of the rule is true,
+and the rule
+''#section_navigation { float: left; width: 10em; }''
+is applied.</p>
 </div>
 
 <p>In terms of the grammar, this specification extends the