/* www.obiwebs.be */
/* BuildingBlocks FCE to create columns in BE of TYPO3 site */
/* Code by Koen Van Nuffelen and Kris D'Aes */

div.col {float: left; border:0px none; margin: 0; padding: 0; }                       /* put columns of a group next to each other */
div.col > div {overflow:hidden;}
div.col-left > div {margin: 0 25px 10px 0;}        /* glue to left side, only space on the right */
div.col-mid > div   {margin: 0 25px 10px 25px;}    /* space on both sides */
div.col-right > div  {margin: 0 0 10px 25px;}      /* glue to right side, only space on the left */

div.col50-50,
div.col33-34-11,
div.col25-25-25-25,
div.col33-67,
div.col67-33,
div.col25-75,
div.col75-25,
div.col25-50-25,
div.col25-25-50,
div.col50-25-25  {width: 100%;}

div.col25  {width: 25%; }
div.col33  {width: 33%;}
div.col34  {width: 34%;}
div.col50  {width: 50%;}
div.col67  {width: 67%;}
div.col75  {width: 75%;}

div.col50-50.linebetween .col-2  {width: 49%; border-left: 1px solid #D4D4D4 }   /* optional line between columns */

div#content > div { margin-bottom: 10px; }

div.col-left {
  clear: both;    /* every left column on a new row, don't change */
}

div.col50-50:after,
div.col33-34-11:after,
div.col25-25-25-25:after,
div.col33-67:after,
div.col67-33:after,
div.col25-75:after,
div.col75-25:after,
div.col25-50-25:after,
div.col25-25-50:after,
div.col50-25-25:after { clear: both; display: block;  content: "."; height: 0; visibility: hidden;}

/* Responsive */

@media (min-width : 1px) and (max-width : 479px)  {
div.col25,
div.col33,
div.col34,
div.col50,
div.col67,
div.col75  {width: 100%;}
div.col-left > div {margin: 0;}
div.col-mid > div   {margin: 0;}
div.col-right > div  {margin: 0;}
div.col50-50 .col-2  {border: none }   /* remove optional line between columns */
}

@media (min-width : 480px) and (max-width : 1023px)  {
  div.col25  {width: 50%; }
  div.col-1.col25 > div {margin: 14px 10px 10px 0;}
  div.col-2.col25 > div {margin: 14px 0 10px 10px;}
  div.col-3.col25 > div {margin: 14px 10px 10px 0;}
  div.col-4.col25 > div {margin: 14px 0 10px 10px;}
  div.col50-50 .col-2  {border: none }   /* remove optional line between columns */
  div.col25-75 div.col25,
  div.col75-25 div.col25 {width: 25%;}
}