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

/* ########################################################
   TwoCols2
   ########################################################
    
    | Header                               |
    |______________________________________|
    | TrailNav               PageFunctions |
    |______________________________________|
    |                          |           |
    | Primary                  | Secondary |
    |                          |           |
    |                          |           |
    |                          |           |
    |__________________________|___________|
    | PageFunctions                        |
    |______________________________________|
    |                                      |
    | Footer                               |
    
    <Align>
        <Template>
            <Header />
            <Content>
                <Page>
                    <TrailNav />
                    <PageFunctions-Top />
                    <PageContent>
                        <Primary />
                        <Secondary />
                    </PageContent>
                    <PageFunctions-Bottom />
                </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 {
}
#Page-Inner {
    padding-left: 25px;
}

    #Page #PageContent {
    }
    #Page #PageContent-Inner {
    }
    
        #Page #PageContent #Primary {
        }
        #Page #PageContent #Primary-Inner {
            padding-right: 25px;
        }

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

            #Page #PageContent #Primary #SubArticles {
            }

        #Page #PageContent #Secondary {
        }
        #Page #PageContent #Secondary-Inner {
            padding-right: 24px;

            font-size: 91.7%;
        }

/* ########################################################
   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. 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 this approach.) Other settings (e.g. padding, margin,
   position) should be equal to the full width of the column.
   ######################################################## */

/* Right column width */

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

/* ########################################################
   Fixed 3 column design elements. 
   DON'T CHANGE.
   ######################################################## */

#Content {
	position: relative; 
	float: left;
	width: 100%;                          /* Ensures consistent page layout in IE7, IE6, FF, otherwise they all treat the page width slightly differently. Note: Could cause problems if margin/padding/border is placed on this element. */
}
#Content-Inner {
    position: relative; 
    float: none;                      /* Not ideal! See methodology notes. */
	min-width: 1px;		              /* Fixes sideways float problem in IE7. */
}
* html #Content-Inner {
    /* IE6 Only */
    float: left;                      /* Fixes invisibility problems in IE6, assuming #Content also has a float. */
}
    
    #Page {
        position: relative;
        float: left;
	    width: 100%;                      /* Fixes float and width issues in FF and IE6 when content does not push to 100%. Note: Could cause problems if margin/padding/border is placed on this element. */
    }
    * 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;
            width: 100%;                  /* See methodology notes. Could cause issues adding margin/padding/borders. */
        }
        #Page #PageContent-Inner {
            position: relative;
            float: left;
            width: 100%;                  /* See methodology notes. Could cause issues adding margin/padding/borders. */
        }

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

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

    #Tertiary {
        display: none;
    }