Chris@2: // ====================================================================
Chris@2: // Mobile first layout.
Chris@2: // This is the layout for smalltouch_portrait which stacks all the columns
Chris@2: // at 100% width for each. Media queries cause this to be available to
Chris@2: // only the layouts that have width less than 321px.
Chris@2: // ====================================================================
Chris@2:   #main-wrapper {
Chris@2:   width: 100%;
Chris@2:   position: relative;
Chris@2:   }
Chris@2: 
Chris@2:   #main {
Chris@2:     width: 100%;
Chris@2:   }
Chris@2:   // Limits the stacking of top-column blocks to small screen touch.
Chris@2:   @media only screen and (max-width:320px) {
Chris@2:   #top-columns .column-block-wrapper,
Chris@2:   #bottom-columns .column-block-wrapper,
Chris@2:   #footer-columns .column-block-wrapper {
Chris@2:     width: 100% !important;
Chris@2:     margin-top: 1em;
Chris@2:   }
Chris@2: 
Chris@2:   #top-columns .column-block-wrapper .column-block,
Chris@2:   #bottom-columns .column-block-wrapper .column-block,
Chris@2:   #footer-columns .column-block-wrapper .column-block {
Chris@2:     height: auto !important;
Chris@2:     margin:0 !important;
Chris@2:   }
Chris@2:   }
Chris@2:   #content,
Chris@2:   #sidebar-first,
Chris@2:   #sidebar-second, {
Chris@2:     margin: 0;
Chris@2:     width: 100%;
Chris@2:     img {
Chris@2:       max-width: 100%; // Make sure all images fit within viewport
Chris@2:       height: auto; // Correct width from max-width rule above.
Chris@2:     }
Chris@2:   }
Chris@2: 
Chris@2:   #sidebar-first .section,
Chris@2:   #sidebar-second .section {
Chris@2:   //  margin:0 !important;
Chris@2:   }
Chris@2: