/* Purpose: SiteMasterLayout.css defines universal layout-related styles for the site in terms of background colors, page width, and multi-column layouts NOTE: For the most part, we totally separate layout-related styles from font-related styles. SiteMasterLayout.css should not contain any font definitions except for extremely limited exceptions. Revision History: ----------------- 2008-Oct - CSS Refresh of layout, other HTML standards improvements. Previous versions of the site relied solely on -style layouts. Not good. Better, much better now. (EYang) */ html { /* placeholder */ } body { margin: 0px; padding: 0px; width: auto; /* auto-width at level sets up auto-margins for entire site; see MasterBodyOuterContainer for more notes */ /* placeholder for background color image */ xxxbackground-image: url('images/siteMasterLayoutBodyOlive.gif'); background-position: top right; background-repeat: repeat-y; /* placeholder color - background image is preferred */ xxxbackground-color: #000000; } div { /* placeholder */ } #MasterBodyOuterContainer { /* ALERT! use of margin-left, margin-right, and width is the preferred way to horizontally center the entire web site according to Ch. 3 of the Zen Garden book. As of Jan 2008, we consider usage of browsers that do not support auto-margins to be negligible. See external documentation. (EYang, Jan 2008) */ margin-left: auto; margin-right: auto; width: 900px; /* 920px accommodates 1/16/08 version of background images; please note that the 2-col and 3-col .css layout files contain the actual background image references that create illusion of multi-column layout */ /* you can activate background-color for debugging only...*/ background-color: #ffffff; position: relative; /* relative positioning at outermost container allows for absolute positioning within it */ } #GlobalBannerContainer { /* BEGIN - centering of this container within MasterBodyOuterContainer (narrower width clears the drop shadows in the gutter) */ margin-left: auto; margin-right: auto; xxxwidth: 504px; /* matching image width guarantees its centering when image not really as wide as overall whitespace width (EYang, Aug 2008) */ /* END - centering of this container within MasterBodyOuterContainer */ xxxheight: 107px; /* height of container must equal height of background image EXACTLY */ xxxbackground-image: url('images/SanFranciscoUltimateLeagueBanner.jpg'); background-repeat: no-repeat; background-color: Transparent; /* just in case image doesn't load, then let previously defined color show through */ } #GlobalMenuOuterContainer, #LocalMenuOuterContainer { /* placeholder */ } #GlobalMenuInnerContainerRow1, #LocalMenuInnerContainerRow1 { position: relative; /* change to relative / left=200px / width=900px accommodates shadow background image (EYang, Dec 2007) */ left: 0px; xxxborder-top: solid 1px #b5dcfd; /* #b5dcfd = original sful.org color scheme (2002) */ xxxborder-bottom: solid 1px #b5dcfd; /* #b5dcfd = original sful.org color scheme (2002) */ height: 18px; /* required definition for CSS-horizontal lists */ padding: 5px; } #GlobalMenuInnerContainerRow1 ul { margin-left: 0; padding-left: 0; display: inline; } #GlobalMenuInnerContainerRow1 ul li { margin-left: 0; xxxpadding: 3px 45px; /* 3px 15px; */ list-style: none; display: inline; } #LocalMenuInnerContainerRow1 ul { margin-left: 0; padding-left: 0; display: inline; } #LocalMenuInnerContainerRow1 ul li { margin-left: 0; xxxpadding: 3px 60px; /* 3px 15px; */ list-style: none; display: inline; } #GlobalMenuInnerContainerRow2, #LocalMenuInnerContainerRow2 { text-align: right; padding-top: 10px; } /* END - styling for

elements horizontally */ a.globalMenuLink:link { /* badass TBD */ } a.globalMenuLink:visited { /* badass TBD */ } a.globalMenuLink:hover { /* badass TBD */ } a.globalMenuLink:active { /* badass TBD */ } #HomePageMissionStatementOuterContainer { display: none; } /* id="ColumnSetOuterContainer" defined in .Master files */ #ColumnSetOuterContainer { /* BEGIN - centering of this container within MasterBodyOuterContainer (narrower width clears the drop shadows in the gutter) */ margin-left: auto; margin-right: auto; width: 900px; /* END - centering of this container within MasterBodyOuterContainer */ position: relative; /* required for absolute positioning of individual containers for Col1-Col3 */ } /* id="Col1OuterContainer" defined in .Master files */ #Col1OuterContainer { position: absolute; /* FF change - Col2 is the only one in document flow (EYang, Dec 2007) */ top: 0px; width: 0px; /* placeholder */ /* you can activate background-color for debugging only, but production implementation includes background image with color of *this* column, so background-color definition is redundant */ /* background-color: #660000;*/ } /* id="Col1InnerContainer" defined in .Master files */ #Col1InnerContainer { padding: 5px 5px 5px 5px; /* z-index: 100; */ } /* id="Col2OuterContainer" defined in .Master files */ #Col2OuterContainer { position: relative; /* FF change - Col2 is the only one in document flow (EYang, Dec 2007) */ left: 0px; /* if implementing 2-col design, then set left edge of Col2 matches width of Col1 */ top: 0px; width: 900px; /* FF change - beware how "left=" attribute relates to "width=", then width of MasterBodyOuterContainer (EYang, Dec 2007) */ z-index: 1; /* FF change - Col2OuterContainer overlaps Col3, so set z-index to make sure Col3 hyperlinks and controls show through (EYang, Dec 2007) */ } /* id="Col2InnerContainer" defined in .Master files */ #Col2InnerContainer { position: relative; left: 0px; top: 0px; /* width of Col2 varies by 2-Col and 3-Col cases, see complementary layout files */ /* width: ????px; */ padding: 0px; /* 5px 5px 5px 5px; */ /* you can activate background-color for debugging only, but production implementation includes background image with color of *this* column, so background-color definition is redundant */ /* background-color: #ffffff;*/ } /* h1SfulHomePage is included only for consistency or compliance with document standards, but we don't really want it to show up in the web browser - printable page OK though */ #h1SfulHomePage { display: none; } /* id="Col2Footer" defined in .Master files */ #Col2Footer { /* FF change - Col2 is the only one in document flow; thus, we rely on the footer definition with height set artificially high to make sure it vertically spans the height of cols 1 & 3 (EYang, Dec 2007) */ height: 768px; /* we've heard some complaints about 1024; let's try 768 for now (EYang, Jan 2008) */ } /* BEGIN - search control definitions from prototype (11th hour changes for September 2007 go-live) */ .searchControl /* not sure why, but attempt to move this to local