/* this applies to all handheld devices  */
@media only screen and (max-width: 759px) {
  .header-wrapper .header .navigation li.current, .header-wrapper .header .navigation li.section {
    /* don't display the current icon, it wouldn't look good if the navigation has 2 rows */
    background: none; }

  .footer .seperator {
    /* in the desktop version we use a seperator for footer entrys, but disable it here */
    display: none; }
  .footer .break {
    /* but for handhelds display the .break element, so we get a new line */
    display: inline; } }
/* this applies to handhelds in landscape orientation and tablests */
@media only screen and (min-width: 480px) and (max-width: 759px) {
  .layout-wrapper .layout .column {
    /* set the width so we can palce 2 columns next to each other */
    width: 45.667%; }
  .layout-wrapper .layout .column.subnavigation, .layout-wrapper .layout .column.big {
    /* big column should stay alone now */
    width: auto;
    float: none;
    clear: both; }
  .layout-wrapper .layout .column.columns-3perrow-newrow {
    /* in the desktop layout we have 3 per row, so disable it here */
    clear: none; }
  .layout-wrapper .layout .column.columns-2perrow-newrow {
    /* in this layout we have 2 per row, so enable it  */
    clear: both; } }
/* this applies to handhelds in portrait orientation */
/* TODO test all mobile devices */
@media only screen and (max-width: 479px),
	   only screen and (-webkit-min-device-pixel-ratio : 1.5),
	   only screen and (min-device-pixel-ratio : 1.5) {
  .layout-wrapper .layout .column, .layout-wrapper .layout .column.subnavigation, .layout-wrapper .layout .column.big {
    /* screen is to small to have 2 columns next to each other */
    width: auto;
    float: none;
    clear: both; } }