/* Within each row, columns are floated (all floated left, except for the last one which is floated right. We need the row to expand downwards to the bottom of the columns it contains, and it won't do this automatically because the columns are floated. So, this is a technique to insert some invisible content after the elements, and which pull down the bottom of the row. */

.row:after,
.expands:after,
ul.plugin-list li:after	{
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
    }

/* vertical margins on each row - adjust to taste */

div.row {
    clear: both;
    margin: .5em 0 .2em;
    height:100%;
    }

div.row div.row {
    margin: .25em 0 .25em;
    height: 100%; /* why do we do this? */
    }

div.plugin  {margin-bottom: 1em;}
div.plugin div.row  {margin: 0; padding: 0;}

/* column widths

These need to be ordered carefully.

Firstly, single-width columns - .column - need to come before double and triple-width ones, so that they don't override them. We could solve this with chained selectors - /column.doublecolumn - but of course IE6 is too stupid to recognise these

Secondly, if a column has *both* double and triple columns:

    the semantic editor treats it as a double, so:
    the presentation system in arkestra_utilities/output_libraries/plugin_widths.py will do the same, so:
    doublecolumns must come last

A different issue here is that WebKit has rounding errors. Mostly they don't matter, but they are cumulative. So,
a 48% of a 960px width should be 460.8 (i.e. 461); Safari computes this as 460.

As the columns add up, so do the rounding errors.

 */

/* single widths */

.columns1 .column,
.column .columns1 .column   { width: 100%;}

.columns2 .column,
.column .columns2 .column   {width: 48%;}

.columns3 .column,
.column .columns3 .column   {width: 30.67%; }

.columns4 .column,
.column .columns4 .column	{width: 22%;}

.columns5 .column,
.column .columns5 .column 	{width: 16.8%;}

.columns6 .column,
.column .columns6 .column	{width: 13.33%;}

/* note to self - there is a reason for this inefficient multiplicity of styles that could be rationalised: IE6. */

/* triple widths */

.columns4 .triplecolumn,
.column .columns4 .triplecolumn     {width: 74%;}

.columns5 .triplecolumn,
.column .columns5 .triplecolumn     {width: 58.4%;}

.columns6 .triplecolumn,
.column .columns6 .triplecolumn     {width: 48%;}

/* double widths */

.columns3 .doublecolumn,
.column .columns3 .doublecolumn     {width: 65.4%;}

.columns4 .doublecolumn,
.column .columns4 .doublecolumn     {width: 48%;}

.columns5 .doublecolumn,
.column .columns5 .doublecolumn     {width: 37.73%;}

.columns6 .doublecolumn,
.column .columns6 .doublecolumn     {width: 30.67%; }

/* all rows float left except the last, which floats right
all rows have a left margin except the first, which has none */

.row .column	{
	float: left;
	margin-left: 4%;
	}

/* hand adjustments to tweak spaces between columns because of WebKit rounding errors */

/*.row.columns2 .column-2,
.row.columns6 .column-3,
.row.columns3 .column-2 {
    margin-left: 4.1%;
    }

.row.columns6 .column-5 {
    margin-left: 3.9%;
    }
*/
.row li.column {
    list-style: none;
    font-size: 1em;
    display: block;
    clear: none;
    }

div.column.firstcolumn,
li.column.firstcolumn	{
	margin-left: 0;
	}

div.column.lastcolumn,
li.column.lastcolumn	{
	float: right;
	clear: right;
	margin-left: 0 !important;
	}