1 

     2 /**

     3  * @file

     4  * Stark layout method

     5  *

     6  * To avoid obscuring CSS added to the page by Drupal or a contrib module, the

     7  * Stark theme itself has no styling, except just enough CSS to arrange the page

     8  * in a traditional "Header, sidebars, content, and footer" layout.

     9  *

    10  * This layout method works reasonably well, but shouldn't be used on a

    11  * production site because it can break. For example, if an over-large image

    12  * (one that is wider than 20% of the viewport) is in the left sidebar, the

    13  * image will overlap with the #content to the right. The exception to this

    14  * is IE6 which will just hide the navigation block completely in these

    15  * instances due to a positioning bug.

    16  */

    17 

    18 #content,

    19 #sidebar-first,

    20 #sidebar-second {

    21   float: left;

    22   display: inline;

    23   position: relative;

    24 }

    25 

    26 #content {

    27   width: 100%;

    28 }

    29 body.sidebar-first #content {

    30   width: 80%;

    31   left: 20%; /* LTR */

    32 }

    33 body.sidebar-second #content {

    34   width: 80%;

    35 }

    36 body.two-sidebars #content {

    37   width: 60%;

    38   left: 20%;

    39 }

    40 

    41 #sidebar-first {

    42   width: 20%;

    43   left: -80%; /* LTR */

    44 }

    45 

    46 body.two-sidebars #sidebar-first {

    47   left: -60%; /* LTR */

    48 }

    49 

    50 #sidebar-second {

    51   float: right; /* LTR */

    52   width: 20%;

    53 }

    54 

    55 .section {

    56   margin: 10px;

    57 }