/* wrap this in a media query that always evaluates to true
   but which effectively hides the code from IE <= 8
   in which the counter CSS isn't working 
   *** I thought generated content works in at least IE8 
       maybe it's because of the double-colon syntax
       is it worth adding an expression to do this instead? 
   */
@media only all
{

	   
	
	/* ordered-list with reverse-counting
	   to reset this it requires a style attribute defining "counter-reset:item n"
	   where "n" is (number of items + 1) to count from (n - 1) to (1) */
	ol[class].count-backwards
	{
		list-style-type:none;
		margin-left:2px !important;
	}
	ol[class].count-backwards > li
	{
		counter-increment:start-from -1;
	}
	ol[class].count-backwards > li::before
	{
		content:counter(start-from) ". ";
	}
	
	
	
	/* ordered-lists with custom numbering, to supercede <ol start> and <li value> 
	   this is also set up to handle override style attributes 
	   that can reset the numbering at the start of an ordered-list or -item
	   eg. at the beginning, we can make the list start counting from 3:
	   		<ol class="bespoke" style="counter-reset:bespoke 2">
	   			<li>3. ...</li>
	   			<li>4. ...</li>
	   or part-way through, we can make the list re-start counting from 7:
			<ol class="bespoke">
				<li>1. ...</li>
				<li style="counter-reset:bespoke 6">7. ...</li>
				<li>8. ...</li>
	   */
	ol[class].bespoke, ol[class].bespoke ol
	{
		list-style-type:none;
		text-indent:-1.7em;
		counter-reset:bespoke;
	}
	ol[class].bespoke ol
	{
		text-indent:-2.1em;
	}
	ol[class].bespoke ul
	{ 
		text-indent:0; 
	}
	ol[class].bespoke > li, ol[class].bespoke ol > li
	{
		counter-increment:bespoke;
	}
	ol[class].bespoke > li::before, ol[class].bespoke ol > li::before
	{
		content:counter(bespoke) ".\00a0";
	}
	


/* close media wrapper */	
}