<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
    lang="en"
    metal:use-macro="here/main_template/macros/master"
    i18n:domain="eea">
    <body>
    <metal:block fill-slot="portlets_one_slot" tal:define="global frontpage_view here/@@frontpage_highlights">
		            		 <!-- example of left menu navigation -->
		            		 <tal:leftmenu replace="structure python:here.getSubNavigation('default','indicators','yes','indicatorswhatsnew')" />
                                         <tal:promotion metal:use-macro="here/portlet_promotions/macros/all" />
					 <tal:promotionlist define="promotionCategoryFolder nocall:here/promotions/educational|nothing">
					    <metal:rss use-macro="here/portlet_promotions/macros/promotion-list" />
					 </tal:promotionlist>
	                         <!-- end of left menu navigation start -->
		                     <!-- Local search on left column -->
                     		<div class="localSearch roundedBox lightBGC">
								<h4 tal:content="string:Search for publications"></h4>
								<form method="get" action="available.asp" id="form1" name="form1">
								<input type="hidden" name="type" value="search" />

								<div class="field">
									<label i18n:translate="">Title</label>
					        		<div class="formHelp" i18n:translate="">Use of AND/OR/* is supported.</div>
					        		<div></div>
									<input type="text" name="search" value="" size="17" maxlength="50" tabindex="1" />
							        <input type="submit" value="Search" class="searchButton" i18n:attributes="value" 
							               id="Submit1" name="Submit1" tabindex="2" />
					      		</div>

							  </form>
							</div>
		</metal:block>
        <metal:block fill-slot="portlets_two_slot">

        				<dl class="portlet" id="portlet-login">
							    <dt class="portletHeader">
							        <a href="http://readme.eea.europa.eu/login_form" tal:content="string:Authentication"></a>
							    </dt>
							    <dd class="portletItem">
							        <form action="http://readme.eea.europa.eu/login_form" name="loginform" method="post">
							            <div class="field">
							                <label rel="__ac_name" tal:content="string:Login Name"></label>
							                <br />
							                <input size="10" alt="Login Name" onclick="showCookieMessage('cookies_message')" tabindex="20001" name="__ac_name" value="" type="text" />
							            </div>

							            <div class="field">
							                <label rel="__ac_password" tal:content="string:Password"></label>
							                <br />
							                <input size="10" alt="Password" 
							                       onclick="showCookieMessage('cookies_message')" 
							                       tabindex="20002" name="__ac_password" type="password" />
							                <input class="standardButton" name="submit" value="Log in" i18n:attributes="value" 
							                       alt="Log in" onclick="javascript:return setLoginVars('__ac_name','login_name','__ac_password','pwd_empty','js_enabled','cookies_enabled')" tabindex="20003" type="submit" />
							            </div>

							            <div id="cookies_message" class="portalMessage" style="display: none;" i18n:translate="">
							                Cookies are not enabled. You must 
							                   <tal:block i18n:name="link"><a href="enabling_cookies" tal:content="string:enable cookies"></a></tal:block>
							                   before you can log in.
							            </div>

							        </form>
							    </dd>

							    <dd class="portletItem ">
							        <a class="link-info" href="/mail_password_form" i18n:translate="">
							           Forgot your password?
							      	</a>
							    </dd>

							    <dd class="portletItem ">
									 <a class="link-user" href="/join_form" i18n:translate="">
          							  New user?
       							     </a>
							    </dd>

							</dl>
                            <br />
							<dl class="portlet portlet-rss" id="portlet-latest-reports">

							    <dt class="portletHeader">
							        <a href="#" i18n:translate="">Latest publications</a>
							    </dt>
				                <dt class="portletItem" >
							        <a href="#" tal:content="string:Report 22"></a>
							    </dt>

							    <dd class="portletItem date" tal:content="string:07 Dec 2005"></dd>

							    <dd class="portletItem thumbnail-right">
							        <a href="#">
							            <img src="report2.png" /></a>
							    </dd>
							    <dd class="portletItem link">
							        <a href="#" tal:content="string:Read report"></a>
							    </dd>

							    <dd class="portletItem" tal:content="string:Amet, consectetuer adipscing elit, sed diam nonummy nibh euismod tincidunt ut.">
			
							    </dd>

							    <dt class="portletItem">
							        <a href="#" tal:content="string:Briefing AB"></a>
							    </dt>

							    <dd class="portletItem date" tal:content="string:04 Dec 2005"></dd>

							    <dd class="portletItem thumbnail-right">
							        <a href="#">
							            <img src="report2.png" /></a>
							    </dd>
							    <dd class="portletItem link">
							        <a href="#" tal:content="string:Read report"></a>
							    </dd>

							    <dd class="portletItem" tal:content="string:Amet, consectetuer adipscing elit, sed diam nonummy nibh euismod tincidunt ut.">
					
							    </dd>
							    <dd class="portletFooter"></dd>

							</dl>

							<dl class="portlet portlet-rss" id="portlet-latest-maps">
 							    <dt class="portletHeader">
							        <a href="#" tal:content="string:Latest maps"></a>
							    </dt>
							    <dt class="portletItem">
							        <a href="#" tal:content="string:Map 1"></a>
							    </dt>

							    <dd class="portletItem date" tal:content="string:07 Dec 2005"></dd>

							    <dd class="portletItem thumbnail-right">
							        <a href="#" >
							            <img src="map1.png" /></a>
							    </dd>
							    <dd class="portletItem link">
							        <a href="#" tal:content="string:See map"></a>
							    </dd>

							    <dd class="portletItem" tal:content="string:Amet, consectetuer adipscing elit, sed diam nonummy nibh euismod tincidunt ut.">
							        
							    </dd>

							    <dt class="portletItem">
							        <a href="#" tal:content="string:Map 2"></a>
							    </dt>

							    <dd class="portletItem date" tal:content="string:04 Dec 2005"></dd>

							    <dd class="portletItem thumbnail-right">
							        <a href="#"><img src="map2.png" /></a>
							    </dd>
							    <dd class="portletItem link">
							        <a href="#" tal:content="string:See map"></a>
							    </dd>

							    <dd class="portletItem" tal:content="string:Amet, consectetuer adipscing elit, sed diam nonummy nibh euismod tincidunt ut.">
					
							    </dd>
							    <dd class="portletFooter"></dd>
							</dl>

        </metal:block>
        <metal:main fill-slot="main">
                              <h1 tal:content="string:Heading of level 1 - Page title"></h1>
                              <div class="documentDescription" tal:content="string:This is the description or introduction for this page. It is styled as teaser."></div>
<tal:figure-right
     tal:define="global figure python:getattr(here, 'lynx.jpg');">
                 <!--<metal:thefigure use-macro="here/media_macros/macros/figure-right" />       -->
</tal:figure-right>
<p tal:content="string:Here is 2&lt;sup&gt;nd&lt;/sup&gt; paragraph. Lorem ipsum dolor
    &lt;a href=&quot;file://///Readme/documentation/Redesign2006/phaseA4implementation/unvisitedpage.html&quot;&gt;unvisited link&lt;/a&gt;,
    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
    sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor &lt;span class=&quot;figure-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;figure&quot; title=&quot;See map&quot;&gt;&lt;img src=&quot;map1.png&quot; alt=&quot;map thumbnail&quot; /&gt;&lt;/a&gt;&lt;/span&gt; sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    vero eos et accusam et justo duo dolores et ea rebum."></p>
<p tal:content="string:Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, &lt;a href=&quot;#&quot;&gt;visited link&lt;/a&gt;
eirmod. Here comes a short quotation:&lt;q&gt;This is a short quotation&lt;/q&gt; tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet."></p>
<blockquote><p tal:content="string:This is a long quotation. This is a long quotation. This is a long
quotation. This is a long quotation. This is a long quotation.
(that is marked&nbsp; up with &lt;blockquote&gt;)"></p>
<p class="source" tal:content="string:by John What"></p></blockquote>

<h2 tal:content="string:Heading of level 2"></h2>
<div class="figure-right"
     tal:define="global figure python:getattr(here, 'mbi_highlight_small.jpg');">
                 <!--<metal:thefigure use-macro="here/media_macros/macros/figure-plus" />       -->
</div>

<p tal:content="string:Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.">
</p>
<h3 tal:content="string:Heading of level 3"></h3>

<h4 tal:content="string:Heading of level 4"></h4>

<h5 tal:content="string:Heading of level 5"></h5>

<h6 tal:content="string:Heading of level 6"></h6>
<hr />
<h2 tal:content="string:Rounded corners boxes"></h2>
<p tal:content="string:Here you see an example of how to apply background with rounded corners to a div tag."></p>
<div class="roundedBox lightBGC">
<h4 tal:content="string:Light rounded box"></h4>
<p tal:content="string:This text appears on a rounded corners light background color"></p>
</div>
<br />
<div class="roundedBox mediumBGC">
<h4 tal:content="string:Dark rounded box"></h4>
<p tal:content="string:This text appears on a rounded corners dark background color"></p>
</div>
<h2 tal:content="string:Scope / Local search"></h2>


		<div class="localSearch roundedBox lightBGC">
			<h4 tal:content="string:Search on data set and application"></h4>
			<form method="get" action="available.asp" id="form2" name="form2">
			<input type="hidden" name="type" value="search" />

			<div class="field">
				<label tal:content="string:Title"></label>
        		<div class="formHelp" tal:content="string:Enter one or more keywords for a search. Use of AND/OR is supported."></div>
        		<div></div>
				<input type="text" name="search" value="" size="30" maxlength="50" tabindex="1" />
		        <input type="submit" value="Search" i18n:attributes="value" class="searchButton" id="Submit2" name="Submit2" tabindex="2" />
      		</div>

		  </form>
		</div>

<hr />
<h2 tal:content="string:CSS3 Multicolumn (Firefox only)"></h2>
<div id="multicolumn">
<p tal:content="string:Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc."></p>
<p tal:content="string:Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl."></p>
</div>
<hr />
<h2 tal:content="string:Auto-Link-Icons"></h2>
<p tal:content="string:Link types are automatically detected on client side by a javascript which will add the necessary class icon before the link. Here you see some examples:"></p>
<h3 tal:content="string:Icons based on protocols"></h3>
<p>
<a href="http://www.externalsite.eu" tal:content="string:external link"></a>,
<a href="https://www.externalsite.eu" tal:content="string:secure link"></a>,
<a href="ftp://externalsite.eu" tal:content="string:FTP link"></a>,
<a href="callto://externalsite.eu" tal:content="string:callto link"></a>,
<a href="mailto:any@any.eu" tal:content="string:mailto link"></a>
<br />
<strong tal:content="string:Test links"></strong>: 
 <a href="https://www.eea.europa.eu" tal:content="string:new EEA domain link"></a>, 
 <a href="https://www.eea.europa.eu/document.pdf" tal:content="string:PDF on new EEA domain link"></a>, 
 <a href="https://reports.eea.europa.eu/document.ppt" tal:content="string:Presentation on old EEA domain"></a>
</p>
<h3 tal:content="string:Some popular file extensions"></h3>
<p>
<a href="/document.pdf" tal:content="string:PDF document"></a>,
<a href="/doc.doc" tal:content="string:Word document"></a>,
<a href="/pres.zip" tal:content="string:Zip archive"></a>,
<a href="/doc.xls" tal:content="string:Excel link"></a>,
<a href="/download.asp?fileid=456&amp;filetype=.pdf" tal:content="string:Fake PDF file extension"></a> <tal:block content="string:(just add file extension in the URL as query at the end!)"></tal:block>,
</p>
<p><tal:block tal:content="string:There are more icons detected, see "></tal:block><a href="all_icons" tal:content="string:list of all icons available"></a></p>
<hr />
<h2 tal:content="string:Lists"></h2>

<h3 tal:content="string:A nested undordered list:"></h3>
<ul>
  <li tal:content="string:Coffee"></li>
  <li tal:content="string:Tea">
    <ul>
    <li tal:content="string:Black tea"></li>
    <li tal:content="string:Green tea">
      <ul>
      <li tal:content="string:China"></li>
      <li tal:content="string:Africa"></li>
      </ul>
    </li>
    </ul>
  </li>
  <li tal:content="string:Milk"></li>
</ul>
<h3 tal:content="string:A nested ordered list:"></h3>
<ol>
  <li tal:content="string:Coffee"></li>
  <li>
    Tea
    <ol>
    <li tal:content="string:Black tea"></li>
    <li tal:content="string:Green tea">
      <ol>
      <li tal:content="string:China"></li>
      <li tal:content="string:Africa"></li>
      </ol>
    </li>
    </ol>
  </li>
  <li tal:content="string:Milk"></li>
</ol>
<h3 tal:content="string:Terms, glossary, definition lists and other tags used for explanations:"></h3>

<dl>
  <dt tal:content="string:Coffee"></dt>
  <dd tal:content="string:Black hot drink"></dd>
  <dt tal:content="string:Milk"></dt>
  <dd tal:content="string:White cold drink"></dd>
</dl>
<p>
    <tal:block content="string:Abbreviations: "></tal:block><abbr tal:content="string:UN"></abbr>
    <br />
    <tal:block content="string:Links to EEA glossary, Gemet or other terminologies webpages: "></tal:block><a class="explain" href="#" tal:content="string:Ozone depletion"></a>
</p>
<h3  tal:content="string:Other various tags"></h3>
<p  tal:content="string:The pre tag is good for displaying formulas, computer code or other already formatted text:"></p>
<pre class="roundedBox" tal:content="string:for i = 1 to 10
     print i
next i">
</pre>

<h2 tal:content="string:Tables"></h2>
<h3 tal:content="string:Zebra static content listing"></h3>
          <table id="your-zebra-content-id" class="datatable">
	    <caption class="hiddenStructure" tal:content="string:Static Content listing"></caption>
            <thead>
                <tr>
                  <th tal:content="string:&nbsp;Title&nbsp;"></th>
                  <th tal:content="string:&nbsp;Size&nbsp;"></th>
                  <th tal:content="string:&nbsp;Modified&nbsp;"></th>
                  <th tal:content="string:&nbsp;State&nbsp;"></th>
                  <th tal:content="string:&nbsp;Other&nbsp;"></th>
                </tr>
            </thead>

            <tbody>
                     <tr>
                    <td tal:content="string:Title 1"></td>
                    <td tal:content="string:10 kB"></td>
                    <td>2006-01-10 10:20</td>
                    <td tal:content="string:Published"></td>
                    <td tal:content="string:Blabla"></td>
                   </tr>
                   <tr class="zebraeven">
                    <td tal:content="string:Title 2"></td>
                    <td tal:content="string:20 kB"></td>
                    <td>2006-03-13 10:20</td>
                    <td tal:content="string:Unpublished"></td>
                    <td tal:content="string:Blabla2"></td>
                   </tr>
                   <tr>
                    <td tal:content="string:Title 3"></td>
                    <td tal:content="string:50 kB"></td>
                    <td>2006-02-10 10:20</td>
                    <td tal:content="string:Unpublished"></td>
                    <td tal:content="string:Blabla3"></td>
                   </tr>
                   <tr class="zebraeven">
                    <td tal:content="string:Title 4"></td>
                    <td tal:content="string:20 kB"></td>
                    <td>2006-03-13 10:20</td>
                    <td tal:content="string:Unpublished"></td>
                    <td tal:content="string:Blabla4"></td>
                   </tr>                   
            </tbody>
        </table>
<h3 tal:content="string:Simple sortable table, client-side"></h3>
<p tal:content="string:In order to have a client-side sortable table via javascript you just need to add the class 'listing' to the table. See source code."></p>
		<table id="your-table-id" class="listing">
	    <caption class="hiddenStructure" tal:content="string:Content listing"></caption>
            <thead>
                <tr>
                  <th tal:content="string:&nbsp;Title&nbsp;"></th>
                  <th tal:content="string:&nbsp;Size&nbsp;"></th>
                  <th tal:content="string:&nbsp;Modified&nbsp;"></th>
                  <th tal:content="string:&nbsp;State&nbsp;"></th>
                  <th class="nosort" tal:content="string:&nbsp;Non sortable column&nbsp;"></th>
                </tr>
            </thead>

            <tbody>
                   <tr>
                    <td tal:content="string:Title 1"></td>
                    <td tal:content="string:10 kB"></td>
                    <td>2006-01-10 10:20</td>
                    <td tal:content="string:Published"></td>
                    <td tal:content="string:Blabla"></td>
                   </tr>
                   <tr class="zebraeven">
                    <td tal:content="string:Title 2"></td>
                    <td tal:content="string:20 kB"></td>
                    <td>2006-03-13 10:20</td>
                    <td tal:content="string:Unpublished"></td>
                    <td tal:content="string:Blabla2"></td>
                   </tr>
                   <tr>
                    <td tal:content="string:Title 3"></td>
                    <td tal:content="string:50 kB"></td>
                    <td>2006-02-10 10:20</td>
                    <td tal:content="string:Unpublished"></td>
                    <td tal:content="string:Blabla3"></td>
                   </tr>
            </tbody>
        </table>


<h3 tal:content="string:Complex sortable datatable, client-side"></h3>
<p >
<tal:block content="string:The example is copied and adjusted from "></tal:block>
<a href="http://reports.eea.europa.eu/GH-98-96-518-EN-C/en/page007.html" tal:content="string:http://reports.eea.europa.eu/GH-98-96-518-EN-C/en/page007.html"></a>
</p>
<table id="your-sortable-datatable-id" class="listing">
<caption class="hiddenStructure" tal:content="string:Sortable complex table"></caption>
<col style="width:11em" />
<col style="width:6em" />
<col style="width:6em" />
<col style="width:6em" />
  <thead>
    <tr>
        <th scope="col" class="scope-col nosort"></th>
        <th scope="col" class="scope-col nosort" colspan="3" tal:content="string:(Mio t CO&lt;sub&gt;2&lt;/sub&gt;)"></th>
    </tr>
    <tr>
        <th scope="col" class="scope-col" tal:content="string:COUNTRY"></th>
        <th scope="col" class="scope-col number">1985</th>
        <th scope="col" class="scope-col number">1990</th>
        <th scope="col" class="scope-col number">1994</th>

    </tr>
  </thead>
  <tbody>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Austria"></td>
                <td class="number">54</td>
                <td class="number">58</td>
                <td class="number">57</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Belgium"></td>
                <td class="number">105</td>
                <td class="number">111</td>
                <td class="number">117</td>

            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Denmark"></td>
                <td class="number">61</td>
                <td class="number">53</td>
                <td class="number">63</td>
            </tr>

            <tr>
                <td scope="row" class="scope-row" tal:content="string:Finland"></td>
                <td class="number">48</td>
                <td class="number">53</td>
                <td class="number">61</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:France"></td>
                <td class="number">378</td>
                <td class="number">368</td>
                <td class="number">349</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Germany"></td>
                <td class="number">1088</td>
                <td class="number">992</td>
                <td class="number">897</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Greece"></td>
                <td class="number">58</td>
                <td class="number">73</td>
                <td class="number">78</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Ireland"></td>
                <td class="number">26</td>
                <td class="number">31</td>
                <td class="number">32</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Italy"></td>
                <td class="number">350</td>
                <td class="number">402</td>
                <td class="number">393</td>

            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Luxembourg"></td>
                <td class="number">12</td>
                <td class="number">12</td>
                <td class="number">12</td>
            </tr>

            <tr>
                <td scope="row" class="scope-row" tal:content="string:Netherlands"></td>
                <td class="number">145</td>
                <td class="number">157</td>
                <td class="number">164</td>
            </tr>
            <tr>

                <td scope="row" class="scope-row" tal:content="string:Portugal"></td>
                <td class="number">26</td>
                <td class="number">40</td>
                <td class="number">45</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Spain"></td>
                <td class="number">183</td>
                <td class="number">209</td>
                <td class="number">229</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:Sweden"></td>
                <td class="number">60</td>
                <td class="number">52</td>
                <td class="number">56</td>
            </tr>
            <tr>
                <td scope="row" class="scope-row" tal:content="string:United Kingdom"></td>
                <td class="number">556</td>
                <td class="number">579</td>
                <td class="number">550</td>
            </tr>
            <tr class="sum">
                <td scope="row" class="scope-row" tal:content="string:EU15 total"></td>
                <td class="number">3150</td>
                <td class="number">3190</td>
                <td class="number">3103</td>
            </tr>
  </tbody>
</table>

<h3 tal:content="string:Sortable server-side"></h3>
<p  tal:content="string:In the server-side sortable table the arrow images are in the HTML (not in CSS or via Javascript). You do not need to use the class 'listing'."></p>
	<table class="sortable">
	<caption class="hiddenStructure" tal:content="string:Sortable server-side table"></caption>
	<thead>
	<tr>
	<th class="sorted" scope="col"><a
	 rel="nofollow"
	 href="#" tal:content="string:Id"><img
	 src="/styles/sortup.gif" width="12" height="12" alt=""/></a></th>
	<th scope="col"><a
	 rel="nofollow"
	 href="#" tal:content="string:Title"><img
	 src="/styles/sortnot.gif" width="12" height="12" alt=""/></a></th>
	<th scope="col"><a
	 rel="nofollow"
	 href="#" tal:content="string:Period"><img
	 src="/styles/sortnot.gif" width="12" height="12" alt=""/></a></th>
	<th scope="col"><span tal:content="string:Not sortable"></span></th>
	</tr>
	</thead>
	<tbody>
	<tr class="zebraeven">
	<td tal:content="string:A"></td>
	<td tal:content="string:Greek Period"></td>
	<td tal:content="string:1000 BC - 323 BC"></td>
	<td tal:content="string:Filler 1"></td>
	</tr>
	<tr>
	<td tal:content="string:B"></td>
	<td tal:content="string:Roman Age"></td>
	<td tal:content="string:500 BC - 600"></td>
	<td tal:content="string:Filler 2"></td>
	</tr>
	<tr class="zebraeven">
	<td tal:content="string:C"></td>
	<td tal:content="string:Middle Ages"></td>
	<td tal:content="string:600 - 1350"></td>
	<td tal:content="string:Filler 3"></td>
	</tr>
	<tr >
	<td tal:content="string:D"></td>
	<td tal:content="string:Renaissance"></td>
	<td tal:content="string:1380 - 1480"></td>
	<td tal:content="string:Filler 4"></td>
	</tr>
	<tr class="zebraeven">
	<td tal:content="string:E"></td>
	<td tal:content="string:Colonial Expansion"></td>
	<td tal:content="string:1480 - 1580"></td>
	<td tal:content="string:Filler 5"></td>
	</tr>
	<tr >
	<td tal:content="string:F"></td>
	<td tal:content="string:Enlightenment"></td>
	<td tal:content="string:1740 - 1800"></td>
	<td tal:content="string:Filler 6"></td>
	</tr>
	<tr class="zebraeven">
	<td tal:content="string:G"></td>
	<td tal:content="string:Unification/Union"></td>
	<td tal:content="string:1957 - "></td>
	<td tal:content="string:Filler 7"></td>
	</tr>
	</tbody>
	</table>
        </metal:main>

    </body>
</html>

