/* COLUMN LAYOUT (FIXED + FLEX)
--------------------------------------------------------------*/
.column-layout {
    border-width: 1px 1px 0 1px;
    border-style: dashed;
	margin-bottom: 10px;
	}

.column-layout .row {
	overflow: hidden;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
	}

.column-layout .col-one, .column-layout .col-two, .column-layout .col-three {
    float: left;
    overflow: hidden;
	} 

.column-layout .row .cell {
    padding: 2px 5px;
    word-wrap:break-word; 
	}

/* COLOUR USED FOR GRID LINE (background-repeat.gif would also need updating to match any changes) */
.column-layout, .column-layout .row {    
    border-color: #628439; /* colour used for grid line */}
    
/* TWO CELL */
.layout-2cell .row .cell-one {
    float: left;
	}

.layout-2cell .row .cell-two {
    margin-left: 110px; /* this value is the width of the cell plus horizontal padding */
	}
    
/* FOUR CELL */
.layout-4cell {
    overflow: hidden;
    background: url(../../images/background-repeat.gif) repeat-y 50% top;
	}

.layout-4cell .col-one, .layout-4cell .col-two {
    width: 50%;
	} 

.layout-4cell .row .cell-one {
    float: left; 
	}

.layout-4cell .row .cell-two {
    margin-left: 110px; /* this value is the width of the cell plus horizontal padding */
	}


/* SIX COL */
.layout-6cell {
    background: url(../../images/background-repeat.gif) repeat-y 33% top;
    overflow: hidden; 
	}

.layout-6cell .row {
    background: url(../../images/background-repeat.gif) repeat-y 66% top; 
	}

.layout-6cell .col-one, .layout-6cell .col-two, .layout-6cell .col-three {
    width: 33%; 
	} 
    
.layout-6cell .row .cell-one {
    float: left; 
	}

.layout-6cell .row .cell-two {
    margin-left: 110px; /* this value is the width of the cell plus horizontal padding */
	}
	
/* COLUMN LAYOUT (FLEX + FLEX)
--------------------------------------------------------------*/
.layout-2cell-flex .row .cell, .layout-3cell-flex .row .cell,
.layout-4cell-flex .row .cell, .layout-5cell-flex .row .cell {word-wrap: normal; }

/* TWO COL */
.layout-2cell-flex {
    background: url(../../images/background-repeat.gif) repeat-y 50% top; 
	}

.layout-2cell-flex .row .col-one, .layout-2cell-flex .row .col-two {
    width: 49.9%;
	}
    

/* THREE COL */
.layout-3cell-flex {
    background: url(../../images/background-repeat.gif) repeat-y 33.3% top; 
	}

.layout-3cell-flex .wrap-one {
    background: url(../../images/background-repeat.gif) repeat-y 66.6% top; 
	}

.layout-3cell-flex .row .col-one, .layout-3cell-flex .row .col-two, .layout-3cell-flex .row .col-three {
    width: 33.3%; 
	}
    
      
/* FOUR COL */
.layout-4cell-flex {
    background: url(../../images/background-repeat.gif) repeat-y 50% top; 
	}

.layout-4cell-flex .wrap-one {
    background: url(../../images/background-repeat.gif) repeat-y 24.9% top; 
	}
    
.layout-4cell-flex .row {
    background: url(../../images/background-repeat.gif) repeat-y 74.9% top; 
	}

.layout-4cell-flex .col-one, .layout-4cell-flex .col-two {
    width: 50%; 
	} 

.layout-4cell-flex .row .cell-one, .layout-4cell-flex .row .cell-two {
    float: left;
    padding: 2px 1%;
    width: 48%; 
	}

    
/* SIX COL */
.layout-6cell-flex {
    background: url(../../images/background-repeat.gif) repeat-y 33.3% top; 
	}

.layout-6cell-flex .wrap-one {
    background: url(../../images/background-repeat.gif) repeat-y 66.6% top; 
	}
    
.layout-6cell-flex .col-one, .layout-6cell-flex .col-two, .layout-6cell-flex .col-three {
    width: 33.3%; 
	} 

.layout-6cell-flex .row .cell-one, .layout-6cell-flex .row .cell-two {
    float: left;
    padding: 2px 2%;
    width: 46%; 
	}

/* SIX COL with borders */

.borders .row {background: url(../../images/background-repeat.gif) repeat-y 16.65% top;}
.borders .wrap-two {background: url(../../images/background-repeat.gif) repeat-y 50% top;}
.borders .wrap-three {background: url(../../images/background-repeat.gif) repeat-y 83.35% top;}