@import url('../../Default/global/Global.css');

/* ############################################################################
   ## 
   ##  TwoCols2
   ##
   ############################################################################ 
    
   | Header                               |
   |______________________________________|
   | TrailNav               PageFunctions |
   |______________________________________|
   |                          |           |
   | Primary                  | Secondary |
   |                          |           |
   |                          |           |
   |                          |           |
   |__________________________|___________|
   | PageFunctions                        |
   |______________________________________|
   |                                      |
   | Footer                               |
   
   <Align>
       <Template>
           <AccessibilityToolbar />
           <Header />
           <Content>
               <Page>
                   <TrailNav />
                   <PageFunctionsTop />
                   <PageContent>
                       <Primary />
                       <Secondary />
                   </PageContent>
                   <PageFunctionsBottom />
               </Page>
               <Tertiary />
           </Content>
           <Footer />
       </Template>
   </Align>
*/

/* ####################################
   Custom Design Options
    
   ADD RULES HERE.
   
   - Note that certain rules are overridden by the fixed design elements below.
   - DO NOT use padding, margins, borders on #Primary, #Secondary, #Tertiary,
     in this section. See notes in the next section if it's absolutely
     necessary to use these options on outer containers.
   ################################# */

#Page {
    padding-bottom: 2em;
}
#PageInner {
}

    #Page #PageContent {
    }
    #Page #PageContentInner {
    }
    
        #Page #PageContent #Primary {
        }
        #Page #PageContent #PrimaryInner {
        }

            #Page #PageContent #Primary #PageBody {
            }
            
            #Page #PageContent #Primary #SubContainers {
            }

            #Page #PageContent #Primary #SubArticles {
            }

        #Page #PageContent #Secondary {
        }
        #Page #PageContent #SecondaryInner {
            margin-left: 16px;
            padding: 16px 0 16px 16px;
            border-left: #c8c8c8 1px solid;
        }

/* ####################################
   Column Widths 
   
   DON'T ADD RULES HERE. ONLY MODIFY VALUES.
   
   Avoid use of padding, margins, borders on #Primary, #Secondary, #Tertiary,
   as this will affect the column widths. Generally it's easier to put these
   settings on the "Inner" elements (in which case, specify them in the
   section above). However some designs require settings on the outer elements.
   If padding, margins, borders are necessary on the outer containers, make 
   sure that widths are re-calculated properly. You should ONLY need to modify
   the "width: #px;" attributes in these cases. (Borders are usually set in 
   pixel sizes and by nature, "%" or "em" widths are not compatible with the
   approach used in these stylesheets.) Other settings (e.g. padding, margin)
   should be equal to the full width of the column.
   ################################# */

/* Right column width */

    #Page #PageContent #PrimaryInner {
        padding-right: 289px;             /* Note that the right column overlaps this padding when the content fills the screen (by using a negative margin). */
    }
        
    #Page #PageContent #Secondary {
        width: 289px;                     /* RC width minus #Secondary padding/margin/border. */
        margin-left: -289px;
    }

/* Only change these where the design is fixed width AND margin/padding/borders are required on these elements. Avoid changes if possible. Widths other than 100% remove the ability for the page to easily change to fluid width. */

    #Content {
        width: 100%;                      /* Specifying a width ensures consistent page layout in IE7, IE6, FF, otherwise they all treat the page width slightly differently. */
    }

    #Page {
        width: 100%;                      /* Specifying a width fixes float and width issues in FF and IE6 when content does not push to 100% width. */
    }
    
        #Page #PageContent {
            width: 100%;                  /* Specifying a width ensures consistent layout on all pages regardless of content. */
        }

        #Page #PageContentInner {
            width: 100%;                  /* Specifying a width ensures consistent layout on all pages regardless of content. */
        }
        
            #Page #PageContent #Primary {
                width: 100%;        /* Specifying a width ensures consistent layout on all pages regardless of content. */
            }

/* ####################################
   Fixed 2 Column Design Elements 
   
   DON'T CHANGE.
   
   ################################# */

#Content {
    position: relative; 
    float: left;
}
#ContentInner {
    position: relative; 
    float: none;                          /* Not ideal! See methodology notes. */
    min-width: 1px;                       /* Fixes sideways float problem in IE7. */
}
* html #ContentInner {
    /* IE6 Only */
    float: left;                          /* Fixes invisibility problems in IE6, assuming #Content also has a float. */
}
    
    #Page {
        position: relative;
        float: left;
    }
    * html #Page {
        /* IE6 Only */
        overflow: hidden;                 /* Fixes creeping Tertiary problem in IE6 when content is at minimum width at the cost of removing the left/right scrollbar. */
    }
    
        #Page #PageContent {
            position: relative;
            float: left;
        }
        #Page #PageContentInner {
            position: relative;
            float: left;
        }

            #Page #PageContent #Primary {
                position: relative;
                float: left;
            }

            #Page #PageContent #Secondary {
                position: relative;
                float: right;
            }

    #Tertiary {
        display: none;
    }