Creating new files for mac and windows, and working on Section 1 in all three version...

diff --git a/mac.html b/mac.html
new file mode 100644 (file)
index 0000000..e984827
--- /dev/null
+++ b/mac.html
@@ -0,0 +1,65 @@
+<!-- ~~~~~~~~~ Section 1: Get the pieces  ~~~~~~~~~ -->
+               <section class="row" id="section1">
+                       <div>
+                               <!-- ~~~~~~~~~ section title + graphics + intro ~~~~~~~~~ -->
+                               <div class="section-intro">
+                                       <div class="sidebar">
+                                               <h2><em>#1</em> Get the pieces</h2>
+                                       </div><!-- /.sidebar -->
+                                       <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
+                                       <div class="main">
+<p>Before starting, you'll need Thunderbird or a similar desktop email program installed on your computer. Email programs are another way to access the same email accounts you can access in a browser (like GMail), but provide extra features.</p>
+                                               <p>If you are already have one of these, you can skip to <a href="#step-1b">Step 1.b</a>.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End .section-intro -->
+
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
+                               <div id="step-1a" class="step">
+                                       <div class="sidebar">
+                                               <p><img src="static/img/screenshots/step1a-install-wizard.png" alt="Step 1.A: Install Wizard" /></p>
+                                       </div><!-- /.sidebar -->
+                                       <div class="main">
+                                               <h3><em>Step 1.a</em> Set your email program up with your email account (if it isn't already)</h3>
+                                               <p>Open your email program and follow the wizard that sets it up with your email account.</p>
+                                       
+                                               <!-- ~~~~~~~~~ Troubleshooting  ~~~~~~~~~ -->
+                                               <div class="troubleshooting">
+                                                       <h4>Troubleshooting</h4>
+                                                       <dl>
+                                                               <dt>What's a wizard?</dt>
+                                                                       <dd>A wizard is a series of windows that pop up to make it easy to get something done on a computer, like installing a program. You click through it, selecting options as you go.</dd>
+                                                               <dt>My email program can't find my account or isn't downloading my mail?</dt>
+                                                                       <dd>Before Googling, we recommend you start by asking other people who use your email system, to figure out the correct settings.</dd>
+                                                       </dl>
+                                               </div><!-- /.troubleshooting -->
+
+                                       </div><!-- End .main -->
+                               </div><!-- End #step1-a .step -->
+
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
+
+                               <div id="step-1b" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 1.b</em>Install GnuPG</h3>
+                                               <p><a rel="external" href="https://releases.gpgtools.org/GPG%20Suite%20-%202013.10.22.dmg">Download GPG Suite</a>, a software package that includes GnuPG. Install it, clicking through the installation wizard with all the default settings. If it opens any windows after installation, you can close them.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step1b .step -->
+
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
+                               <div id="step-1c" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 1.c</em> Install the Enigmail plugin for your email program</h3>
+                                               <p>In your email program's menu, select Add-ons (it may be in the Tools section). Make sure Extensions is selected on the left. Do you see Enigmail? if so, skip this step.</p>
+                                               <p>If not, search "Enigmail" with the search bar in the upper right. You can take it from here. Restart your email program when you're done.</p>
+                                               <!-- ~~~~~~~~~ Troubleshooting  ~~~~~~~~~ -->
+                                               <div class="troubleshooting">
+                                                       <h4>Troubleshooting</h4>
+                                                       <dl>
+                                                               <dt>I can't find the menu?</dt>
+                                                               <dd>In many new email programs, it's represented by an image of three stacked horizontal bars.</dd>
+                                                       </dl>
+                                               </div><!-- /.troubleshooting -->
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-1c .step -->
+                       </div>
+               </section><!-- End #section1 -->

diff --git a/windows.html b/windows.html
new file mode 100644 (file)
index 0000000..dbebd00
--- /dev/null
+++ b/windows.html
@@ -0,0 +1,65 @@
+<!-- ~~~~~~~~~ Section 1: Get the pieces  ~~~~~~~~~ -->
+               <section class="row" id="section1">
+                       <div>
+                               <!-- ~~~~~~~~~ section title + graphics + intro ~~~~~~~~~ -->
+                               <div class="section-intro">
+                                       <div class="sidebar">
+                                               <h2><em>#1</em> Get the pieces</h2>
+                                       </div><!-- /.sidebar -->
+                                       <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
+                                       <div class="main">
+<p>Before starting, you'll need any one of these desktop email programs installed on your computer: <a href="http://www.fossamail.org">FossaMail</a> or Thunderbird. Email programs are another way to access the same email accounts you can access in a browser (like GMail), but provide extra features.</p>
+                                               <p>If you are already have one of these, you can skip to <a href="#step-1b">Step 1.b</a>.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End .section-intro -->
+
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
+                               <div id="step-1a" class="step">
+                                       <div class="sidebar">
+                                               <p><img src="static/img/screenshots/step1a-install-wizard.png" alt="Step 1.A: Install Wizard" /></p>
+                                       </div><!-- /.sidebar -->
+                                       <div class="main">
+                                               <h3><em>Step 1.a</em> Set your email program up with your email account (if it isn't already)</h3>
+                                               <p>Open your email program and follow the wizard that sets it up with your email account.</p>
+                                       
+                                               <!-- ~~~~~~~~~ Troubleshooting  ~~~~~~~~~ -->
+                                               <div class="troubleshooting">
+                                                       <h4>Troubleshooting</h4>
+                                                       <dl>
+                                                               <dt>What's a wizard?</dt>
+                                                                       <dd>A wizard is a series of windows that pop up to make it easy to get something done on a computer, like installing a program. You click through it, selecting options as you go.</dd>
+                                                               <dt>My email program can't find my account or isn't downloading my mail?</dt>
+                                                                       <dd>Before Googling, we recommend you start by asking other people who use your email system, to figure out the correct settings.</dd>
+                                                       </dl>
+                                               </div><!-- /.troubleshooting -->
+
+                                       </div><!-- End .main -->
+                               </div><!-- End #step1-a .step -->
+
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
+
+                               <div id="step-1b" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 1.b</em>Install GnuPG</h3>
+                                               <p><a rel="external" href="http://files.gpg4win.org/gpg4win-2.2.1.exe">Download GPG4win</a>, a software package that includes GnuPG. Install it, clicking through the installation wizard with all the default settings. If it opens any windows after installation, you can close them.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step1b .step -->
+
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
+                               <div id="step-1c" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 1.c</em> Install the Enigmail plugin for your email program</h3>
+                                               <p>In your email program's menu, select Add-ons (it may be in the Tools section). Make sure Extensions is selected on the left. Do you see Enigmail? if so, skip this step.</p>
+                                               <p>If not, search "Enigmail" with the search bar in the upper right. You can take it from here. Restart your email program when you're done.</p>
+                                               <!-- ~~~~~~~~~ Troubleshooting  ~~~~~~~~~ -->
+                                               <div class="troubleshooting">
+                                                       <h4>Troubleshooting</h4>
+                                                       <dl>
+                                                               <dt>I can't find the menu?</dt>
+                                                               <dd>In many new email programs, it's represented by an image of three stacked horizontal bars.</dd>
+                                                       </dl>
+                                               </div><!-- /.troubleshooting -->
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-1c .step -->
+                       </div>
+               </section><!-- End #section1 -->