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

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

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

            #Page #PageContent #Primary #SubArticles {
            }

        #Page #PageContent #Secondary {
        }
        #Page #PageContent #SecondaryInner {
        }

/* ####################################
   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: 240px;             /* Note that the right column overlaps this padding when the content fills the screen (by using a negative margin). */
    }
        
    #Page #PageContent #Secondary {
        width: 220px;                     /* RC width minus #Secondary padding/margin/border. */
        margin-left: -220px;
    }

/* ####################################
   Fixed 2 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. */
}
#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;
	    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 #PageContentInner {
            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;
    }