/*
this setup implies I have to add defs for future screen sizes - I have yet to find a general rule for ALL screens [if at all possible]
column width snaps to discrete number of cols since cols do not overflow so col width is approximate
*/
/************************************/

@media screen and (max-width: 1366px)
{
   .article > ul
   {
      -webkit-column-width: 20em;
         -moz-column-width: 20em;
              column-width: 20em;
   }
}

@media screen and (max-height: 1366px) and (orientation: portrait)
{
   .article li { height: 16%; }
}

@media screen and (max-width: 1366px) and (orientation: landscape)
{
   .article li { height: 31%; }
}

/************************************/

@media screen and (max-width: 1024px)
{
   .article > ul
   {
      -webkit-column-width: 22em;
         -moz-column-width: 22em;
              column-width: 22em;
   }
}

@media screen and (max-height: 1024px) and (orientation: portrait)
{
   .article li { height: 19%; }
}

/************************************/

@media screen and (max-width: 966px)
{
   .article > ul
   {
      -webkit-column-width: 20em;
         -moz-column-width: 20em;
              column-width: 20em;
   }
}

@media screen and (max-width: 855px)
{
   .article > ul
   {
      -webkit-column-width: 18em;
         -moz-column-width: 18em;
              column-width: 18em;
   }
}

@media screen and (max-height: 966px) and (orientation: portrait)
{
   .article li { height: 19%; }
}

/************************************/

@media screen and (max-width: 604px)
{
   .article > ul
   {
      -webkit-column-width: 15em;
         -moz-column-width: 15em;
              column-width: 15em;
   }
}
   /* in-page menu (min-width: 803px) */
@media screen and (min-width: 803px) and (max-width: 1024px)
{
   .article li { height: 45%; }
}

   /* animated menu (max-width: 803px) */
@media screen and (max-height: 760px) and (max-width: 803px)
{
   .article li { height: 48%; }
}

/************************************/

@media screen and (max-width: 598px)
{
   .article > ul
   {
      -webkit-column-width: 15em;
         -moz-column-width: 15em;
              column-width: 15em;
   }
}

@media screen and (max-height: 430px)
{
   .article li { height: 100%; }
}