.portal-layouts {}

/* portal-layouts */

.layouts
{
	float:left;
    width:709px; /* must be divisible by number of columns (i.e. 12) */
}

.layout-100,
.layout-50-50,
.layout-25-75,
.layout-75-25,
.layout-33-66,
.layout-66-33,
.layout-33-33-33,
.layout-25-25-50,
.layout-25-50-25,
.layout-50-25-25,
.layout-25-25-25-25
{
}

/* columns */

.column-1,
.column-2,
.column-3,
.column-4
{
    float:left;
}

.layout-100 > .column-2,
.layout-100 > .column-3,
.layout-100 > .column-4,
.layout-50-50 > .column-3,
.layout-50-50 > .column-4,
.layout-25-75 > .column-3,
.layout-25-75 > .column-4,
.layout-75-25 > .column-3,
.layout-75-25 > .column-4,
.layout-33-66 > .column-3,
.layout-33-66 > .column-4,
.layout-66-33 > .column-3,
.layout-66-33 > .column-4,
.layout-33-33-33 > .column-4,
.layout-25-25-50 > .column-4,
.layout-25-50-25 > .column-4,
.layout-50-25-25 > .column-4
{
    display:none;
}	    

.layout-100 > .column-1
{
    width:100%;
}

.layout-25-75 > .column-2,
.layout-75-25 > .column-1
{
    width:75%;
}	

.layout-33-66 > .column-2,
.layout-66-33 > .column-1
{
    width:66.6%;
}

.layout-50-50 > .column-1,
.layout-50-50 > .column-2,
.layout-25-25-50 > .column-3,
.layout-25-50-25 > .column-2,
.layout-50-25-25 > .column-1
{
    width:50%;
}

.layout-33-66 > .column-1,
.layout-66-33 > .column-2,
.layout-33-33-33 > .column-1,
.layout-33-33-33 > .column-2,
.layout-33-33-33 > .column-3
{
    width:33.3%
}

.layout-25-75 > .column-1,
.layout-75-25 > .column-2,
.layout-25-25-50 > .column-1,
.layout-25-25-50 > .column-2,
.layout-25-50-25 > .column-1,
.layout-25-50-25 > .column-3,
.layout-50-25-25 > .column-3,
.layout-25-25-25-25 > .column-1,
.layout-25-25-25-25 > .column-2,
.layout-25-25-25-25 > .column-3,
.layout-25-25-25-25 > .column-4
{
    width:25%;
}