/* $Id: layout-fixed.css,v 1.5.2.3 2009/02/13 19:20:19 johnalbin Exp $ */

/*
 * LAYOUT STYLES
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Zen Columns layout method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow
 */


/** body **/
 body {
   margin: 0;
   padding: 0;
 }

  #page,
  #closure-blocks
  {
    /*
     * If you want to make the page a fixed width and centered in the viewport,
     * this is the standards-compliant way to do that. See also the ie.css file
     * for the necessary IE5 hack to center a div.
     */
    margin-left: auto;
    margin-right: auto;
    width: 980px;
  }

  #page-inner
  {
  }

  #navigation-top,
  #navigation
  {
    position: absolute; /* Take the named anchors out of the doc flow    */
    left: -10000px;     /* and prevent any anchor styles from appearing. */
  }

  #skip-to-nav
  {
    float: right;
    margin: 0 !important;
    font-size: 0.8em;
  }

  #skip-to-nav a:link, #skip-to-nav a:visited
  {
    color: #fff; /* Same as background color of page */
  }

  #skip-to-nav a:hover
  {
    color: #000;
    text-decoration: none;
  }

  /* Alternatively, the skip-to-nav link can be completely hidden until a user tabs
     to the link. Un-comment the following CSS to use this technique. */
  /*
  #skip-to-nav a, #skip-to-nav a:hover, #skip-to-nav a:visited
  {
    position: absolute;
    left: 0;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  #skip-to-nav a:active, #skip-to-nav a:focus
  {
    position: static;
    width: auto;
    height: auto;
  }
  */

  
  /* This is a five layout (w/four column override for home page) with a 20 pixel gutter between sections. */

  /* Column width: 172px
   * Gutter: 20px
   * 
   *   20 | 172 | 20 | 172 | 20 | 172 | 20 | 172 | 20 | 172 | 20       
   *
   *
   *     192    |                 596                 |    192
   *
   *
   *     192    |           404            |        384



     Grid: 980    Gutter: 20
     Quick reference: 

     5 col:          4 col: 

     1/5: 172        1/4: 220
     2/5: 364        2/4: 460
     3/5: 556        3/4: 700
     4/5: 748        4/4: 940
     5/5: 940

   */


  /* --- GRID SETTINGS ---- */

  /* col widths include gutter to allow the last column to have a margin-right */

  .autocol-st .subterm-block {
    width: auto;
  }
  div.auto-col-wide,
  .auto-col-n .node,
  div.auto-col-n.node {
    width: auto;
  }
  
  .one-col-st .subterm-block {
    width: 192px;
  }
  div.one-col-wide,
  .one-col-n .node,
  div.one-col-n.node {
    width: 172px;
  }


  .two-col-st .subterm-block  {
    width: 384px;
  }
  div.two-col-wide,
  .two-col-n .node,
  div.two-col-n.node {
    width: 364px;
  }


  .three-col-st .subterm-block {
    width: 576px;
  }
  div.three-col-wide,
  .three-col-n .node,
  div.three-col-n.node  {
    width: 556px;
  }


  .four-col-st .subterm-block {
    width: 768px;
  }
  div.four-col-wide,
  .four-col-n .node,
  div.four-col-n.node {
    width: 748px;
  }
  
  .five-col-st .subterm-block {
    width: 960px;
  }
  div.five-col-wide,
  .five-col-n .node,
  div.five-col-n.node {
    width: 940px;
  }
  
  .dd.full-width,
div.full-width.node, 
.full-width-n .node,
div.full-width-n.node {
  width: 100%;
  float: left;
}

.full-col-st .subterm-block
div.full-col-st.subterm-block {
  width: 100%;
  float: left;
}
  

  /* ---------------------- */

   #page,
   #closure-blocks
   {
     margin-left: auto;
     margin-right: auto;
     width: 980px;
   }

   #header-blocks
   {
     clear: both; /* Clear the logo */
   }

  /** main (container for everything else) **/
   #main
   {
     position: relative;
     background: white;
   }
   .region-main {
     padding: 0;
   }

  /** content **/
   #content,
   .no-sidebars #content
   {
     float: left;
     width: 980px;
     margin-left: 0;
     margin-right: -980px; /* Negative value of #content's width + left margin. */
     padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
   }

   #navbar
   {
     float: left;
     width: 100%;
     margin-left: 0;
     margin-right: -100%; /* Negative value of #navbar's width + left margin. */
     padding: 0; /* DO NOT CHANGE. Add padding or margin to #navbar-inner. */
     overflow: visible;
     position: absolute;
   }

   #navbar-inner {
   position: absolute;
   }

   .navbar ul /* Primary and secondary links */
   {
     margin: 0;
     padding: 0;
     text-align: left;
   }

   .navbar li /* A simple method to get navbar links to appear in one line. */
   {
     float: left;
     padding: 0;
   }



  .sidebar-left #content
  {
    width: 788px;
    margin-left: 192px; /* The width of #sidebar-left. */
    margin-right: -980px; /* Negative value of #content's width + left margin. */
  }

  .sidebar-right #content
  {
    width: 788px;
    margin-left: 0;
    margin-right: -788px; /* Negative value of #content's width + left margin. */
  }

  .two-sidebars #content
  {
    width: 596px;
    margin-left: 192px; /* The width of #sidebar-left */
    margin-right: -788px; /* Negative value of #content's width + left margin. */
  }

  /** sidebar-left **/
    #sidebar-left
    {
      float: left;
      width: 192px;
      margin-left: 0;
      margin-right: -192px; /* Negative value of #sidebar-left's width + left margin. */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
    }

  /** sidebar-right **/
    #sidebar-right
    {
      float: left;
      width: 192px;
      margin-left: 788px; /* Width of content + sidebar-left. */
      margin-right: -980px; /* Negative value of #sidebar-right's width + left margin. */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
    }


    .region-left
    {
      margin: 0 0 0 20px;
      padding: 0;
    }

    .region-right
    {
      margin: 0 20px 0 0;
      padding: 0;
    }

    .region-content {
      margin: 20px;
      padding: 0;
    }


    /* THE MARGIN REQUIRED TO COMPENSATE FOR THE HEIGHT OF THE NAVIGATION */

    .region-content, .region-left, .region-right {
      margin-top: 60px;
    }

    /* THE DEFAULT MARGIN UNDERNEATH SIDEBAR BLOCKS */

    .region-left .block, .region-right .block {
      margin-bottom: 20px;
    }




    /* --------- OVERRIDE FOR 4-col ---------  
    (taxonomy term view template: front page)

    You could override something else, like node pages.

    other examples: body.t24
                    body.n 
                    body.wt24

    */

    .col4 .autocol-st .subterm-block {
      width: auto;
    }
    .col4 .auto-col-wide,
    .col4 .auto-col-n .node,
    .col4.auto-col-n .node,
    .col4 .auto-col-n.node {
      width: auto;
    }
    

    .col4 .one-col-st .subterm-block
    {
      width: 240px;
    }

    .col4 .one-col-wide,
    .col4 .one-col-n .node,
    .col4.one-col-n .node,
    .col4 .one-col-n.node {
      width: 220px;
    }


    .col4 .two-col-st .subterm-block {
      width: 480px;
    }
    .col4 .two-col-wide,  
    .col4 .two-col-n .node,
    .col4.two-col-n .node,
    .col4 .two-col-n.node {
      width: 460px;
    }


    .col4 .three-col-st .subterm-block {
      width: 720px;
    }
    .col4 .three-col-wide,  
    .col4 .three-col-n .node,
    .col4.three-col-n .node,
    .col4 .three-col-n.node  {
      width: 700px;
    } 


    .col4 .four-col-st .subterm-block  {
      width: 960px;
    }

    .col4 .four-col-wide,  
    .col4 .four-col-n .node,
    .col4.four-col-n .node {
      width: 940px;
    }


    .col4.sidebar-left #content
    {
      width: 740px;
      margin-left: 240px; /* The width of #sidebar-left. */
      margin-right: -980px; /* Negative value of #content's width + left margin. */
    }

    .col4.sidebar-right #content
    {
      width: 740px;
      margin-left: 0;
      margin-right: -740px; /* Negative value of #content's width + left margin. */
    }

    .col4.two-sidebars #content
    {
      width: 500px;
      margin-left: 240px; /* The width of #sidebar-left */
      margin-right: -740px; /* Negative value of #content's width + left margin. */
    }

    /** sidebar-left **/
    .col4  #sidebar-left
      {
        float: left;
        width: 240px;
        margin-left: 0;
        margin-right: -240px; /* Negative value of #sidebar-left's width + left margin. */
        padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
      }

    /** sidebar-right **/
    .col4  #sidebar-right
      {
        float: left;
        width: 240px;
        margin-left: 740px; /* Width of content + sidebar-left. */
        margin-right: -980px; /* Negative value of #sidebar-right's width + left margin. */
        padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
      }


/* --------- OVERRIDE FOR 3-col ---------  
    (taxonomy term view template: front page)

    You could override something else, like node pages.

    other examples: body.t24
                    body.n 
                    body.wt24

    */

    .col3 .autocol-st .subterm-block {
      width: auto;
    }
    .col3 .auto-col-wide,
    .col3 .auto-col-n .node,
    .col3.auto-col-n .node,
    .col3 .auto-col-n.node {
      width: auto;
    }
    

    .col3 .one-col-st .subterm-block
    {
      width: 320px;
    }

    .col3 .one-col-wide,
    .col3 .one-col-n .node,
    .col3.one-col-n .node,
    .col3 .one-col-n.node {
      width: 300px;
    }


    .col3 .two-col-st .subterm-block {
      width: 640px;
    }
    .col3 .two-col-wide,  
    .col3 .two-col-n .node,
    .col3.two-col-n .node,
    .col3 .two-col-n.node {
      width: 620px;
    }


    .col3 .three-col-st .subterm-block {
      width: 980px;
    }
    .col3 .three-col-wide,  
    .col3 .three-col-n .node,
    .col3.three-col-n .node,
    .col3 .three-col-n.node  {
      width: 960px;
    } 

    .col3.sidebar-left #content
    {
      width: 620px;
      margin-left: 320px; /* The width of #sidebar-left. */
      margin-right: -940px; /* Negative value of #content's width + left margin. */
    }

    .col3.sidebar-right #content
    {
      width: 620px;
      margin-left: 0;
      margin-right: -940px; /* Negative value of #content's width + left margin. */
    }

    .col3.two-sidebars #content
    {
      width: 300px;
      margin-left: 300px; /* The width of #sidebar-left */
      margin-right: -640px; /* Negative value of #content's width + left margin. */
    }

    /** sidebar-left **/
    .col3  #sidebar-left
      {
        float: left;
        width: 320px;
        margin-left: 0;
        margin-right: -320px; /* Negative value of #sidebar-left's width + left margin. */
        padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
      }

    /** sidebar-right **/
    .col3  #sidebar-right
      {
        float: left;
        width: 320px;
        margin-left: 760px; /* Width of content + sidebar-left. */
        margin-right: -980px; /* Negative value of #sidebar-right's width + left margin. */
        padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
      }

  
  
  /* --------- OVERRIDE FOR 6-col ---------  
    (taxonomy term view template: front page)

    You could override something else, like node pages.

    other examples: body.t24
                    body.n 
                    body.wt24

    */

    .col6 .autocol-st .subterm-block {
      width: auto;
    }
    .col6 .auto-col-wide,
    .col6 .auto-col-n .node,
    .col6.auto-col-n .node,
    .col6 .auto-col-n.node {
      width: auto;
    }
    

    .col6 .one-col-st .subterm-block
    {
      width: 160px;
    }

    .col6 .one-col-wide,
    .col6 .one-col-n .node,
    .col6.one-col-n .node,
    .col6 .one-col-n.node {
      width: 140px;
    }


    .col6 .two-col-st .subterm-block {
      width: 320px;
    }
    .col6 .two-col-wide,  
    .col6 .two-col-n .node,
    .col6.two-col-n .node,
    .col6 .two-col-n.node {
      width: 300px;
    }

    .col6 .three-col-st .subterm-block {
      width: 480px;
    }
    .col6 .three-col-wide,  
    .col6 .three-col-n .node,
    .col6.three-col-n .node,
    .col6 .three-col-n.node  {
      width: 460px;
    } 
    
    .col6 .four-col-st .subterm-block {
      width: 640px;
    }
    .col6 .four-col-wide,  
    .col6 .four-col-n .node,
    .col6.four-col-n .node,
    .col6 .four-col-n.node  {
      width: 620px;
    } 
    
    .col6 .five-col-st .subterm-block {
      width: 800px;
    }
    .col6 .five-col-wide,  
    .col6 .five-col-n .node,
    .col6.five-col-n .node,
    .col6 .five-col-n.node  {
      width: 780px;
    } 
    
    .col6 .six-col-st .subterm-block {
      width: 960px;
    }
    .col6 .six-col-wide,  
    .col6 .six-col-n .node,
    .col6.six-col-n .node,
    .col6 .six-col-n.node  {
      width: 940px;
    } 

    .col6.sidebar-left #content
    {
      width: 820px;
      margin-left: 160px; /* The width of #sidebar-left. */
      margin-right: -980px; /* Negative value of #content's width + left margin. */
    }

    .col6.sidebar-right #content
    {
      width: 820px;
      margin-left: 0;
      margin-right: -980px; /* Negative value of #content's width + left margin. */
    }

    .col6.two-sidebars #content
    {
      width: 660px;
      margin-left: 160px; /* The width of #sidebar-left */
      margin-right: -820px; /* Negative value of #content's width + left margin. */
    }

    /** sidebar-left **/
    .col6  #sidebar-left
      {
        float: left;
        width: 160px;
        margin-left: 0;
        margin-right: -160px; /* Negative value of #sidebar-left's width + left margin. */
        padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
      }

    /** sidebar-right **/
    .col6  #sidebar-right
      {
        float: left;
        width: 160px;
        margin-left: 720px; /* Width of content + sidebar-left. */
        margin-right: -980px; /* Negative value of #sidebar-right's width + left margin. */
        padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
      }

  
      /* Imagecache default sizes 

        Grid: 980    Gutter: 20
        Quick reference: 

        1/5: 172        1/4: 220
        2/5: 364        2/4: 460
        3/5: 556        3/4: 700
        4/5: 748        4/4: 940
        5/5: 940

      */

      /* 1/5 col pod preset */
      div.pod-preset-pod {
        width: 172px;
        height: 125px;
      }

      /* 2/4 col carousel */ 
      div.pod-preset-carousel {
        width: 460px;
        height: 200px;
      }

      div.pod-preset-thumbnail {
        width: 120px;
        height: 150px;
        background-position: top center;
      }

      /* ------------ */