diff --git a/data/style/default.css b/data/style/default.css
index ae2d0183f..8f0bf590c 100644
--- a/data/style/default.css
+++ b/data/style/default.css
@@ -1,19 +1,370 @@
-body {background-color: #3E2723; color: #fff}
-div.recipe, div.index { font-family: Times, serif; font-size: 10pt; margin: auto; max-width: 760px; background-color: #FFF8E1; padding: 1em; margin-top: 1em; color: rgba(0,0,0,0.7)}
+@charset "UTF-8";
 
-div.recipe img {border-radius: 10%; height: 200px; float: right;}
-div.recipe img:hover {border: 1px solid black;}
-foo {height: initial; position: absolute; top: 10px; left: 10px}
-span.label { font-weight: bold }
+/* this stylesheet is designed to work with the modified "html5" html_exporter.py by andrearicci
+    unluckilly all the @media print statement at the end doesn't work when the CSS is embedded (single recipe export)*/
 
-h3 {font-family: Calibri, Sans-Serif; font-size: 120%; font-weight: bold; color: #6d4c41; border-bottom: 1px solid #ffa000; margin-top: 0px; margin-bottom: 0px;}
+body {
+    /*font-size: 160%;*/
+    font: 160% Georgia, "Times New Roman", Times, serif;
+    line-height: 1.6;
+}
 
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    font-family: "georgia" serif;
+    text-transform: capitalize;
+    page-break-after: avoid;
+    -webkit-column-span: all;
+    /* Chrome, Safari, Opera */
+    column-span: all;
+    margin-bottom: 0;
+}
 
-div.header p {margin-top: 0; margin-bottom: 0.2em}
-div.ing { padding: 1em; background-color: #FFE57F}
-ul.ing { margin-top: 0px; padding-left: 0px; color: rgba(0,0,0,1); font-size: 100%;}
-li.ing { list-style: none; border-top: 0.3em }
-div.header p.title { font-family: Calibri, Sans-Serif; font-size: 35pt; font-weight: bold; color: #3E2723; border-bottom: 8px solid #ff6f00; min-height: 200px; vertical-align: bottom; margin-bottom: 20px; position: relative; padding-top: 30px}
-div.header p.title span.label {display: none}
-div.recipe div {margin-bottom: 20px;}
-div.recipe div p {margin-top: 0}
\ No newline at end of file
+h1 {
+    font-size: 2rem;
+    margin-top: 0;
+}
+
+h2 {
+    font-size: 1.4rem;
+}
+
+h3 {
+    font-size: 1.2rem;
+}
+p {
+    margin: 0;
+    padding: 0;
+}
+
+p+p {
+    text-indent: 2rem;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+    /*font-family: verdana,sans-serif;*/
+    display: inline-block;
+    width: 100%;
+    font-style: italic;
+}
+
+aside a {
+    font-size: 1rem;
+}
+
+a:hover {
+    color: #fff;
+    background-color: #666;
+}
+
+div.recipe, div.index {}
+
+article {
+    font-size: 1.2rem;
+    max-width: 80%;
+    margin: auto;
+    padding: 1rem;
+    margin-top: 1rem;
+    display: -webkit-box;
+    /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box;
+    /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -ms-flexbox;
+    /* TWEENER - IE 10 */
+    display: -webkit-flex;
+    /* NEW - Chrome */
+    display: flex;
+    /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    align-content: -content: space-between;
+}
+
+
+/*flexbox elements*/
+
+header {
+    width: 100%;
+    margin-top: 0;
+}
+
+figure {}
+
+aside {}
+
+section {}
+
+
+/*section.ing {width: 100%;}*/
+
+section.instructions {
+    width: 100%;
+    -webkit-column-gap: 3em;
+    /* Chrome, Safari, Opera */
+    -moz-column-gap: 3em;
+    /* Firefox */
+    column-gap: 3em;
+    -webkit-column-rule: 1px solid silver;
+    /* Chrome, Safari, Opera */
+    -moz-column-rule: 1px solid silver;
+    /* Firefox */
+    column-rule: 1px solid silver;
+    page-break-inside: avoid;
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid;
+    -webkit-columns: 30rem 3;
+    -moz-columns: 30rem 3;
+    columns: 30rem 3;
+}
+
+
+}
+section.modifications {
+    width: 100%;
+}
+
+/**** Styling *****/
+figure {}
+span.label {
+    font-weight: bold;
+}
+
+/*INDEX button*/
+nav {
+    /*display: inline-block;*/
+
+    width: auto;
+    float: right;
+    position: fixed;
+    right: 0;
+    margin-right: .5rem;
+}
+nav a {
+    font-family: verdana, sans-serif;
+    font-size: .8em;
+    font-weight: 400;
+    text-transform: uppercase;
+    text-decoration: none;
+    margin: .5em;
+    padding: 0 .3em;
+    color: white;
+    -webkit-border-radius: .3em;
+    -moz-border-radius: .3em;
+    border-radius: .3em;
+    background-color: rgba(125, 125, 125, 0.5);
+}
+nav a:visited {
+    background-color: rgba(125, 125, 125, 0.5);
+}
+nav a:hover, nav a:focus {
+    background-color: rgba(125, 0, 100, 0.5);
+}
+header {
+    width: 100%;
+    z-index: 100;
+    padding: 1em;
+    text-align: left;
+}
+aside {
+    text-align: center;
+}
+aside table {
+    border-collapse: collapse;
+    width: auto;
+    margin: auto;
+    text-align: center;
+}
+aside tr, aside td, aside th {
+    margin: 0;
+    padding: 0;
+}
+aside td {
+    text-align: left;
+    vertical-align: baseline;
+}
+aside th {
+    text-align: right;
+    font-size: .8rem;
+    padding-right: 1rem;
+    vertical-align: baseline;
+}
+
+/*INGREDIENTS*/
+section.ing {
+    /*padding: 1rem;
+    margin: .5rem;
+    border-top: solid 2px;
+    border-bottom: solid 2px;*/
+    /*margin: 1rem 0;
+    padding: 1rem 0;*/
+}
+.ing li:nth-child(odd) {
+    background-color: #eee;
+}
+.ing li:nth-child(even) {
+    background-color: #fff;
+}
+ul li {
+    margin: 0;
+    padding: 0;
+    text-indent: 0;
+}
+li.ing {
+    list-style: none;
+    border-top: 0.3em;
+}
+ul.ing {
+    margin: 0;
+    padding: 0;
+}
+
+/*SUBGROUP*/
+.inggroup {
+    font-weight: bold;
+    list-style: none;
+    text-indent: 2rem;
+    background-color: transparent !important;
+}
+.inggroup .ing {
+    font-weight: normal;
+}
+
+/*INDEX styles*/
+body.index {
+    text-align: center;
+    background-color: #fff;
+}
+.index table {
+    font-size: 1.2rem;
+    border-collapse: collapse;
+    position: relative;
+    text-align: left;
+    margin: auto;
+}
+.index tr:nth-child(odd) {
+    background-color: #eee;
+}
+.index td {
+    padding: 0 .6em;
+    vertical-align: baseline;
+}
+.index thead tr {
+    position: sticky;
+    background-color: #fff !important;
+    font-variant: small-caps;
+}
+.index .category, .index .cuisine, .index .rating, .index .yields {
+    font-size: .8rem;
+}
+.index a:hover {
+    margin-left: -.8rem;
+    padding-left: .8rem;
+}
+
+/*DEBUG*/
+@media all and (max-width: 1200px) {
+    article {
+        -webkit-flex-flow: column wrap;
+        flex-flow: column wrap;
+        max-width: 90%;
+        width: 90%;
+    }
+
+    section.ing {
+        width: 90%;
+        border-top: 2px dotted silver;
+        border-bottom: 2px dotted silver;
+        margin-top: 1rem;
+    }
+}
+@media all and (max-width: 800px) {
+    article {
+        -webkit-flex-flow: column wrap;
+        flex-flow: column wrap;
+        max-width: 100%;
+        width: 100%;
+    }
+
+    section.ing {
+        width: 100%;
+    }
+}
+
+/*PRINT STYLES*/
+@media print {
+    * {
+        color: black;
+        background-color: white;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        break-after: avoid;
+    }
+
+    section {
+        break-inside: avoid;
+        widows: 3;
+        orphans: 3;
+    }
+
+    body {
+        font-size: 12pt;
+    }
+
+    nav {
+        display: none;
+    }
+
+    .recipe, .index {
+        font-size: 10pt;
+        max-width: 100%;
+    }
+
+    .ing {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    figure {
+        max-width: 4.5cm;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    a:link:after {
+        content: " (" attr(href) ") ";
+    }
+
+    .ing li::before {
+        content: "☐ "
+    }
+
+    li.inggroup::before {
+        content: ""
+    }
+
+    .inggroup .ing li::before {
+        content: "☐ "
+    }
+
+    .index tr {
+        border-bottom: .1pt dotted silver
+    }
+
+    .index a:link:after {
+        content: "";
+    }
+
+    @page {
+        margin: 0.5cm;
+    }
+}
diff --git a/gourmet/plugins/import_export/html_plugin/html_exporter.py b/gourmet/plugins/import_export/html_plugin/html_exporter.py
index b137cdf87..a99d6d88a 100644
--- a/gourmet/plugins/import_export/html_plugin/html_exporter.py
+++ b/gourmet/plugins/import_export/html_plugin/html_exporter.py
@@ -6,6 +6,7 @@
 HTML_HEADER_START = """<!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8">
   """
 HTML_HEADER_CLOSE = """<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      </head>"""
@@ -46,13 +47,15 @@ def __init__ (self, rd, r, out, conv=None,
                                change_units=change_units,
                                do_markup=True,
                                use_ml=True)
-        
+
     def htmlify (self, text):
         t=text.strip()
         #t=xml.sax.saxutils.escape(t)
         t="<p>%s</p>"%t
-        t=re.sub('\n\n+','</p><p>',t)
-        t=re.sub('\n','<br>',t)
+        # AR I want P and not break
+        # t=re.sub('\n\n+','</p><p>',t)
+        # t=re.sub('\n','<br>',t)
+        t=re.sub('\n+','</p><p>',t)
         return t
 
     def get_title (self):
@@ -64,6 +67,8 @@ def write_head (self):
         if self.start_html:
             self.out.write(HTML_HEADER_START)
             self.out.write("<title>%s</title>"%self.get_title())
+	        # self.out.write('<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->') # AR want to add html5shiv but can't get it work :-( says indent error?
+
             if self.css:
                 if self.embed_css:
                     self.out.write("<style type='text/css'><!--\n")
@@ -76,8 +81,18 @@ def write_head (self):
                     self.out.write("<link rel='stylesheet' href='%s' type='text/css'>"%self.make_relative_link(self.css))
             self.out.write(HTML_HEADER_CLOSE)
             self.out.write('<body>')
-        self.out.write('<div class="recipe" itemscope itemtype="http://schema.org/Recipe">')
-        
+
+            ########## AR we should set an IF statement: only if multi-page export + can the word 'Index' be translated to different languages? Also we have to check if the ouput is correct: *.htm? *.html?
+            self.out.write('<nav><a href="index.html">Index</a></nav>')
+
+ ############ changed DIV to ARTICLE
+ # but we shall give it an unique ID  - how's the unique filename created?
+            self.out.write('<article class="recipe" itemscope itemtype="http://schema.org/Recipe">')
+
+        ############# insert recipe title h1 ###############
+        #    def write_title (self):
+            self.out.write('<header><h1  itemprop="name">%s</h1></header>'%self.get_title())
+
     def write_image (self, image):
         imgout = os.path.join(self.imagedir_absolute,"%s.jpg"%self.imgcount)
         while os.path.isfile(imgout):
@@ -89,7 +104,8 @@ def write_image (self, image):
         o.write(image)
         o.close()
         # we use urllib here because os.path may fsck up slashes for urls.
-        self.out.write('<img src="%s" itemprop="image" alt="%s">'%(
+        #### AR added FIGURE wrapper
+        self.out.write('<figure><img src="%s" itemprop="image" alt="%s"></figure>'%(
                                                                             self.make_relative_link("%s%s.jpg"%(self.imagedir,
                                                                                     self.imgcount)
                                                                             ),
@@ -97,40 +113,43 @@ def write_image (self, image):
                                                                   )
                        )
         self.images.append(imgout)
-        
+
     def write_inghead (self):
-        self.out.write('<div class="ing"><h3>%s</h3><ul class="ing">'%_('Ingredients'))
+        self.out.write('<section class="ing"><h2>%s</h2><ul class="ing">'%_('Ingredients')) # AR changed DIV to SECTION
 
     def write_text (self, label, text):
         attr = gglobals.NAME_TO_ATTR.get(label,label)
         if attr == 'instructions':
-            self.out.write('<div class="%s"><h3 class="%s">%s</h3><div itemprop="recipeInstructions">%s</div></div>' % (attr,label,label,self.htmlify(text)))
+            self.out.write('<section class="%s"><h2 class="%s">%s</h2><div itemprop="recipeInstructions">%s</div></section>' % (attr,label,label,self.htmlify(text))) # AR changed DIV to SECTION
         else:
-            self.out.write('<div class="%s"><h3 class="%s">%s</h3>%s</div>' % (attr,label,label,self.htmlify(text)))
+            self.out.write('<section class="%s"><h2 class="%s">%s</h2>%s</section>' % (attr,label,label,self.htmlify(text))) # AR changed DIV to SECTION
 
     def handle_italic (self, chunk): return "<em>" + chunk + "</em>"
     def handle_bold (self, chunk): return "<strong>" + chunk + "</strong>"
     def handle_underline (self, chunk): return "<u>" + chunk + "</u>"
 
     def write_attr_head (self):
-        self.out.write("<div class='header'>")
+        self.out.write("<aside><table>") ##### AR changed DIV to ASIDE and P structure to TABLE, with TH and TD
 
     def write_attr (self, label, text):
         attr = gglobals.NAME_TO_ATTR.get(label,label)
         if attr=='link':
             webpage = text.strip('http://')
             webpage = webpage.split('/')[0]
-            self.out.write('<a href="%s">'%text +
+            self.out.write('<tr><td colspan="2"><a href="%s">'%text +
                            _('Original Page from %s')%webpage +
-                           '</a>\n')
+                           '</a></td></tr>\n')
         elif attr == 'rating':
             rating, rest = text.split('/', 1)
-            self.out.write('<p class="%s" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"><span class="label">%s:</span> <span itemprop="ratingValue">%s</span><span>/%s</span></p>\n' % (attr, label.capitalize(), rating, rest))
+            # AR with the TH tag we don't need the label class any more to style it. I leave it for compatibility with the CSS
+            # AR WISH -  change the rating numbers to stars (filled: &#x2605; and empty: &#x2606;)
+            # AR we have to fix itemprop="ratinCount" span to have only "5" and not the word "stars"
+            self.out.write('<tr class="%s" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"><th scope="row" class="label">%s:</th> <td><span itemprop="ratingValue">%s</span>/<span itemprop="ratingCount">%s</span></td></tr>\n' % (attr, label.capitalize(), rating, rest))
         else:
             itemprop = None
-            if attr == 'title':
-                itemprop = 'name'
-            elif attr == 'category':
+            # if attr == 'title':         ############## AR how to COMPLETELY remove? (it has been moved to H1)
+            #    itemprop = 'name'
+            if attr == 'category':
                 itemprop = 'recipeCategory'
             elif attr == 'cuisine':
                 itemprop = 'recipeCuisine'
@@ -143,19 +162,20 @@ def write_attr (self, label, text):
             elif attr == 'instructions':
                 itemprop = 'recipeInstructions'
             if itemprop:
-                self.out.write('<p class="%s"><span class="label">%s:</span> <span itemprop="%s">%s</span></p>\n' % (attr, label.capitalize(), itemprop, xml.sax.saxutils.escape(text)))
+                # AR with the TH tag we don't need the label class any more to style it. I leave it for compatibility with the CSS
+                self.out.write('<tr class="%s"><th scope="row" class="label">%s:</th> <td itemprop="%s">%s</td></tr>\n' % (attr, label.capitalize(), itemprop, xml.sax.saxutils.escape(text)))
             else:
-                self.out.write("<p class='%s'><span class='label'>%s:</span> %s</p>\n"%(attr, label.capitalize(), xml.sax.saxutils.escape(text)))
-        
+                self.out.write('<tr class="%s"><th scope="row" class="label">%s:</th> <td>%s</td></tr>\n'%(attr, label.capitalize(), xml.sax.saxutils.escape(text)))
+
     def write_attr_foot (self):
-        self.out.write("</div>")
-    
+        self.out.write("</table></aside>")
+
     def write_grouphead (self, name):
         self.out.write("<li class='inggroup'>%s:<ul class='ing'>"%name)
 
     def write_groupfoot (self):
         self.out.write("</ul></li>")
-                            
+
     def write_ingref (self, amount, unit, item, refid, optional):
         link=False
         if self.link_generator:
@@ -170,6 +190,38 @@ def write_ingref (self, amount, unit, item, refid, optional):
                 self.out.write("'>")
         self.write_ing (amount, unit, item, optional=optional)
         if link: self.out.write("</a>")
+## AR WISH: could we separate amount and unit from ingredient? for different styling. Maybe in a table like:
+			# <table class="ing">
+			# 	<caption>Ingredienti</caption>           # multi-language
+			# 	<thead>
+			# 	<tr>
+			# 		<th scope="col">quantita'</th>        # multi-language
+			# 		<th scope="col">ingrediente</th>     # multi-language
+			# 	</tr>
+			# </thead>
+            # <tbody
+			# 	<tr itemprop="recipeIngredient">        # ingredient line
+			# 		<td>12 g</td>
+			# 		<td>onion</td>
+			# 	</tr>
+			# 	<tr itemprop="recipeIngredient">
+			# 		<td>2 cloves</td>
+			# 		<td>garlic</td>
+			# 	</tr>
+            				# <tr class="group">                          # a line that separates groups in the same table
+            				# 	<th colspan="2">theh group title </th>
+            				# </tr>
+			# 	<tr itemprop="recipeIngredient">        # ingredient line
+			# 		<td>4</td>
+			# 		<td>tomato</td>
+			# 	</tr>
+			# 	<tr itemprop="recipeIngredient">        # ingredient line
+			# 		<td>2 cups</td>
+			# 		<td>olive oil</td>
+			# 	</tr>
+			# </tbody>
+            # </table>
+
 
     def write_ing (self, amount=1, unit=None,
                    item=None, key=None, optional=False):
@@ -177,14 +229,14 @@ def write_ing (self, amount=1, unit=None,
         for o in [amount, unit, item]:
             if o: self.out.write(xml.sax.saxutils.escape("%s "%o))
         if optional:
-            self.out.write("(%s)"%_('optional'))
+            self.out.write("(%s)"%_('optional')) ### AR WISH: also give to he LI a class="optional" to allow a different styling of optional ingredients
         self.out.write("</li>\n")
-    
+
     def write_ingfoot (self):
-        self.out.write('</ul>\n</div>\n')
+        self.out.write('</ul>\n</section>\n') # AR closing SECTION tag
 
     def write_foot (self):
-        self.out.write("</div>\n")
+        self.out.write("</article>\n") # AR closing ARTICLE tag
         if self.end_html:
             self.out.write('\n</body>\n</html>')
 
@@ -198,7 +250,7 @@ def make_relative_link (self, filename):
         return linkify(filename)
 
 class website_exporter (ExporterMultirec):
-    def __init__ (self, rd, recipe_table, out, conv=None, ext='htm', copy_css=True,
+    def __init__ (self, rd, recipe_table, out, conv=None, ext='html', copy_css=True, # AR changed to *.html
                   css=os.path.join(gglobals.style_dir,'default.css'),
                   imagedir='pics' + os.path.sep,
                   index_rows=['title','category','cuisine','rating','yields'],
@@ -235,7 +287,7 @@ def __init__ (self, rd, recipe_table, out, conv=None, ext='htm', copy_css=True,
                                   ext=self.ext,
                                   exporter=html_exporter,
                                   exporter_kwargs=self.exportargs)
-        
+
     def write_header (self):
         self.indexfn = os.path.join(self.outdir,'index%s%s'%(os.path.extsep,self.ext))
         self.indexf = open(self.indexfn,'w')
@@ -251,16 +303,16 @@ def write_header (self):
         else:
             self.indexf.write("<link rel='stylesheet' href='%s' type='text/css'>"%self.make_relative_link(self.css))
         self.indexf.write(HTML_HEADER_CLOSE)
-        self.indexf.write('<body>')
-        self.indexf.write('<div class="index"><table class="index">\n<tr>')
+        self.indexf.write('<body class="index">')
+        self.indexf.write('<table class="index">\n<thead>\n<tr>') # removed the DIV and moved its class to BODY
         for r in self.index_rows:
             self.indexf.write('<th class="%s">%s</th>'%(r,gglobals.REC_ATTR_DIC[r]))
-        self.indexf.write('</tr>\n')    
+        self.indexf.write('</tr></thead>\n<tbody>\n')
 
     def recipe_hook (self, rec, filename, exporter):
         """Add index entry"""
         # we link from the first row
-        
+
         self.indexf.write(
             """<tr><td class="%s">
                      <a href="%s">%s</a>
@@ -276,7 +328,7 @@ def recipe_hook (self, rec, filename, exporter):
         self.added_dict[rec.id]=filename
 
     def write_footer (self):
-        self.indexf.write('</table></div></body></html>')
+        self.indexf.write('</tbody></table></body></html>')
         self.indexf.close()
 
     def generate_link (self, id):
@@ -301,4 +353,3 @@ def linkify (filename):
     ret = filename.replace('\\','/')
     ret = filename.replace(' ','%20')
     return xml.sax.saxutils.escape(filename)
-