/* 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. Complementary layout files: * SiteMasterLayout2Col.css for 2-column layouts * SiteMasterLayout3Col.css for 3-column layouts Revision History: ----------------- 2008-Jun - Additions for new page CalendarEventWebcastMain.aspx. (EYang) 2008-Feb - Added new debug definitions for troubleshooting Lagan integration issue with "Mozilla" browser window. The debug definitions were applied to ContentDisplay.aspx to find issue resolution. (EYang) 2008-Jan - Initial Release for BerkeleyExtranetSite project. (EYang) */ /* V3 = revisiting centering methods. Based on our research (see 1/16/08 emails), and key information listed in Ch. 3 of the Zen Garden book we have decided to discard the "negative margins" method in favor of "preferred" auto-margins. (EYang, Jan 2008) */ html { /* margin: 0px; */ /* REMOVE - very late corrections (EYang, Jan 2008) */ /* padding: 0px; */ /* REMOVE - very late corrections (EYang, Jan 2008) */ } body { /* margin: 30px 10%; */ /* REMOVE - very late corrections (EYang, Jan 2008) */ margin: 0px; padding: 0px; background-color: #999f7f; width: auto; /* auto-width at level sets up auto-margins for entire site; see MasterBodyOuterContainer for more notes */ /* overall site design is olive-colored background with multi-column layout overlaid on top of it; color #999f7f is not web safe, so it's better to implement this color as an image rather than background-color definition */ background-image: url('images/siteMasterLayoutBodyOlive.gif'); background-position: top right; background-repeat: repeat-y; /* you can activate background-color for debugging only, but production implementation includes background image with color for the left and right gutters of all pages, so background-color definition is mostly redundant (would only show up if user's screen exceeded image width, or sometimes shows up when HTML-wrapping errors show up) (EYang, Dec 2007) */ /* background-color: #999f7f; *//* #999f7f = olive-colored background that sits behind white-colored columns and main body of all pages */ } div { /* margin: 0px; */ /* REMOVE - very late corrections (EYang, Jan 2008) */ /* padding: 0px; */ /* REMOVE - very late corrections (EYang, Jan 2008) */ } /* id="MasterBodyOuterContainer" defined in .Master files */ #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: 920px; /* 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 */ } /* id="GlobalBannerContainer" defined in GlobalSiteHeader.ascx */ #GlobalBannerContainer { /* 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 */ height: 75px; /* height of container must equal height of background image EXACTLY */ /*background: #999f7f url('images/globalSiteHeader.jpg') no-repeat; */ background-image: url('images/globalSiteHeader.jpg'); background-repeat: no-repeat; background-color: Transparent; /* just in case image doesn't load, then let previously defined color show through */ } /* id="GlobalMenuContainer" defined in GlobalSiteHeader.ascx */ #GlobalMenuContainer { /* 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 */ height: 25px; /* FF change, 25px with relative-top positioning = 3px had been looking great in IE6 (EYang, Dec 2007) */ background-color: #660000; /* global menu text is white on maroon background */ } /* id="GlobalSearchContainer" defined in GlobalSiteHeader.ascx */ #GlobalSearchContainer { /* 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 */ height: 30px; /* 30px, changed from 26px, slightly reduces the chance of inadvertently triggering global menu dropdown when pointing mouse at search textbox */ /* 000066 = royal-blue, reviewed by SLC (BLavin, Oct 2007) */ /* 666666 = dark gray, proposed (EYang, Dec 2007) */ /* 000033 = darker blue, proposed (BLavin, Dec 2007) */ background-color: #000033; } /* id="ColumnSetOuterContainer" defined in .Master files */ #ColumnSetOuterContainer { /* BEGIN - centering of this container within MasterBodyOuterContainer (narrower width clears the drop shadows in the gutter) */ background-color: #660000; top: 0px; left: 0px; margin-left: auto; margin-right: auto; width: 900px; height:786px; /* 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) style="left: 0px; top: 0px; height: 710px"*/ height: 730px; top: 0px; width: 165px; /* width matches width in background image */ /* 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: 1px 1px 1px 1px; /*5px 5px 5px 5px;*/ /* z-index: 100; */ } /* id="Col2OuterContainer" defined in .Master files */ #Col2OuterContainer { position: absolute; /* FF change - Col2 is the only one in document flow (EYang, Dec 2007) */ left: 165px; /*165px; /* left edge of Col2 matches width of Col1 */ top: 0px; /* width: 135px;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) */ width: 735px; height:730px; background-color: #660000; /*style="width: 572px; left: 165px; top: 0px;"*/ } /* 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: 1px 1px 1px 1px; /* 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;*/ } /* 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