tweak positioning, landinage page wording

client/about.html

@@ -14,7 +14,7 @@ <h1><a href="/">Multiplayer<span>Set</span></a></h1>
     <div id="wrap">
       <ul id="explanation">
         <li class="message cornered">
-          <div class="sidebar">
+          <div class="sidebar sidecol">
             <p>MultiplayerSet exists thanks to the following open source projects:</p>
             <ul>
               <li><a href="http://headjs.com/">headJS</a>, by Tero Piirainen</li>
@@ -52,6 +52,9 @@ <h1><a href="/">Multiplayer<span>Set</span></a></h1>
         <li>
           <a class="button" href="/game/public/"><h2>Join a public game</h2></a>
         </li>
+        <li>
+          <a class="button spaced" href="/"><h2>Home</h2></a>
+        </li>
         <li class="message cornered" id="display_ad">
           <script>
           google_ad_client = "ca-pub-6528147086648678";
@@ -62,9 +65,6 @@ <h1><a href="/">Multiplayer<span>Set</span></a></h1>
           </script>
           <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
         </li>
-        <li>
-          <a class="button" href="/"><h2>Home</h2></a>
-        </li>
       </ul>
     </div></div>
     <script src="/load.js"></script>

client/index.html

@@ -96,22 +96,20 @@ <h1><a href="/">Multiplayer<span>Set</span></a></h1>
         </p>
         <div class="clear"></div>
         </li>
-        <li><h2>How to play</h2></li>
+        <li><h2>Starting a game</h2></li>
         <li class="message cornered full">
         <p>
         If you want to play with friends, hit <b>start a private game</b> in the top
-        left of this page. You will receive a link you can use to invite other people
-        to join.
+        left corner. You can use the URL of your game room to invite your friends.
         </p>
         <p>
         If you want to get into a game quickly, hit <b>join a public game</b>. You will
-        be placed into a game that will start as soon as three people are present. You
-        can still invite your friends to join a public game in the same way.
+        be placed into a game that will start as soon as three people are present. While
+        the room fills up, you can warm up in an unscored practice game.
         </p>
         <p>
-        Once in a game, click cards to build sets. Click on any part of the board to
-        clear your current selection. Type messages and hit enter to talk to the
-        other players in the game.
+        Click cards to build sets. To clear your current selection, click on any part
+        of the board. Type messages and hit enter to talk to the other players.
         </p>
         <h3>Hints</h3>
         <p>
@@ -131,6 +129,9 @@ <h3>Hints</h3>
         <li>
           <a class="button" href="/game/public/"><h2>Join a public game</h2></a>
         </li>
+        <li>
+          <a class="button spaced" href="/about/"><h2>About</h2></a>
+        </li>
         <li class="message cornered" id="display_ad">
           <script>
           google_ad_client = "ca-pub-6528147086648678";
@@ -141,9 +142,6 @@ <h3>Hints</h3>
           </script>
           <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
         </li>
-        <li>
-          <a class="button" href="/about/"><h2>About</h2></a>
-        </li>
       </ul>
     </div></div>
     <script src="/load.js"></script>

client/style.css

@@ -351,11 +351,11 @@ li li { list-style: circle; }
   height: 100%;
   display:block;
 }
+.spaced { margin: 30px 0; }
 .button:hover { background: #eee; }
 li#display_ad {
   width: 240px;
   height: 250px;
-  margin-bottom: 15px;
   background: #cecece;
 }
 .sidebar {
@@ -371,4 +371,9 @@ li#display_ad {
   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
   z-index: -1;
 }
+.sidecol {
+  margin: -5px -415px 0 0;
+  padding: 10px;
+  width: 370px;
+}
 .set .cardwrap { float: left; }