﻿/* for 2 side-by-side divs, inside the container or any kind of content
 * area, flattened in responsive view*/
.col2-container {
    width: 100% ;
}

.col2-container:after {
   content: " ";
   display: block;
   height: 0;
   clear: both;
}

/* .col2 just floats both left, if you want one to be the "top" but it
 * needs to be on the right, you'll need to col2-left and col2-right the
 * individual divs, see the item detail page for some of this, needed when
 * unfolding 2col layouts in responsive view  */
.col2, .col2-left, .col2-right {
    width: 48% ;
    float: left ;
}

.col2-right {
    float: right ;
}

/* col3 works like col2 just one more col */
.col3-container {
    width: 100% ;
}

.col3-container:after {
   content: " ";
   display: block;
   height: 0;
   clear: both;
}

.col3, .col3-left, .col3-right, .col3-center {
    width: 33% ;
    float: left ;
}

/*
.col3-right {
    float: right ;
}

*/
