/* University of Washington Bothell ===== Base CSS Document ===== 5 column grid for all pages using standard template Required structural elements to effective use the grid Header Footer ===== Designed by Jason Beard: jbeard@uwb.edu ===== */ body{ } /* Use for testing where the virtual columns are */ #overlay960x5{ background:url(960base.png) repeat-y center top; position:absolute; z-index:30000; width:100%; height:1500px; display:none; } /* ==================================================================================================== */ /* ============================================= The Grid ============================================= */ /* Use these classes on an element to identify how many columns the block spans. */ .span_1, .span_2, .span_3, .span_4, .span_5 { display: block; float: left; position: relative; } .span_1 { width: 176px; } /* One column */ .span_2 { width: 368px; } /* Two columns plus one gutter */ .span_3 { width: 560px; } /* Three columns plus two gutters */ .span_4 { width: 752px; } /* Four columns plus three gutters */ .span_5 { width: 944px; } /* Five columns plus four gutters, sans 8px gutters on left and right*/ /* Use these classes on an element to identify in what column the block begins. Since all elements are shifted 960px to the left by default, the 'columns' have negative margins to move content over by the specified amount. 8px L/R padding is for the gutters. */ .column_1, .column_2, .column_3, .column_4, .column_5 { float:left; left:960px; } .column_1 { margin-left: -960px; padding: 0 8px;} /* start in column 1 */ .column_2 { margin-left: -768px; padding: 0 8px;} /* start in column 2 */ .column_3 { margin-left: -576px; padding: 0 8px;} /* start in column 3 */ .column_4 { margin-left: -384px; padding: 0 8px;} /* start in column 4 */ .column_5 { margin-left: -192px; padding: 0 8px;} /* start in column 5 */ /* Maintain consistent column structure inside columns*/ .column_2 .column_1{ /* not possible */ } .column_2 .column_2{ margin-left: -960px; padding: 0 8px 0 0; } /* start in column 2; removes additional 8px left padding */ .column_2 .column_3{ margin-left: -768px; padding: 0 8px; } /* start in column 3 */ .column_2 .column_4{ margin-left: -576px; padding: 0 8px; } /* start in column 4 */ .column_2 .column_5{ margin-left: -384px; padding: 0 0 0 8px; } /* start in column 5; removes additional 8px right padding; not possible in standard template */ .column_3 .column_1{ /* not possible */ } .column_3 .column_2{ /* not possible */ } / .column_3 .column_3{ margin-left: -960px; padding: 0 8px 0 0; } /* start in column 3; removes additional 8px left padding */ .column_3 .column_4{ margin-left: -768px; padding: 0 8px; } /* start in column 4 */ .column_3 .column_5{ margin-left: -576px; padding: 0 0 0 8px; } /* start in column 5; removes additional 8px right padding; not possible in standard template */ .column_4 .column_1{ /* not possible */ } .column_4 .column_2{ /* not possible */ } .column_4 .column_3{ /* not possible */ } .column_4 .column_4{ margin-left: -960px; padding: 0 8px 0 0; } /* start in column 4; removes additional 8px left padding*/ .column_4 .column_5{ margin-left: -768px; padding: 0 0 0 8px; } /* start in column 5; removes additional 8px right padding; not possible in standard template */ /* These are unused .push-1 { margin: 0 -192px 1.5em 192px;} .push-2 { margin: 0 -384px 1.5em 384px;} .push-3 { margin: 0 -576px 1.5em 576px;} .push-4 { margin: 0 -768px 1.5em 768px;} .push-5 { margin: 0 -960px 1.5em 960px;} .push-1, .push-2, .push-3, .push-4, .push-5 {float:right;position:relative;} */ /* ==================================================================================================== */ /* ======================================= Structural Elements ======================================== */ #containerWrapper{ /* Wraps everything. Child of */ background:#ffffff; } #container{ } /* Child of #containerWrapper */ /* .structuralElement creates a row across the width of the whole viewport. Backgrounds can be set to span 100%. Usage (base): #headerWrapper, #globalNavigationWrapper, Usage (homepage): #topSectionWrapper, #focusItemsWrapper, #siteMapNavigationWrapper Usage (standard): #bannerWrapper, #breadcrumbsWrapper, #contentWrapper*/ .structuralElement{ float: left; width: 100%; display: block; position: relative; } /* .structuralSubElement creates a centered 960px wide container. Required for all children of structuralElement.*/ .structuralSubElement{ width:960px; margin:0 auto; } /* ==================================================================================================== */ /* =========================================== Page Sections ========================================== */ /* ============================================== Header ============================================== */ #headerWrapper{ background: #39275b url(/uwbothell/media/templateimages/base/headerBackground.gif) repeat-x; z-index:1000; } #header{ /* contains #logo and #search */ position:relative; height:70px; /* required for bg to show */ } /* ------------------------ Header Logo (Block)------------------------ */ #header #logo{ /* container and shadow*/ background: transparent url(/uwbothell/media/templateimages/base/headerLogoBackground.png) center top no-repeat; /* logo shadow */ color:#ffffff; font-size:160%; position:absolute; z-index:2000; height:168px; } #header #logo a{ background:#39275b url(/uwbothell/media/templateimages/base/headerLogo.jpg) center top no-repeat; display:block; height:160px; width: 176px; } #header #logo a span{ position: absolute; left: -5000px; } #header{ /* contains #logo and #search */ position:relative; height:70px; /* required for bg to show */ } /* ------------------------ Header Logo (Wide)------------------------ */ #header #logo-wide{ /* container and shadow*/ color:#ffffff; font-size:160%; position:absolute; z-index:2000; height:92px; margin-left:-952px; } #header #logo-wide a{ background:transparent url(/uwbothell/media/templateimages/base/headerLogoWide.png) center top no-repeat; display:block; height:91px; width:530px; margin-left:68px; } #header #logo-wide a span{ position: absolute; left: -5000px; } /* ------------------------ Header Search ------------------------ */ #header #search { position:relative; text-align:right; margin-top:25px; margin-bottom:8px; } #header #search label{ position:absolute; left:0px; top:-5000px; width:1px; height:1px; overflow:hidden; } #header #search form{ margin:0; padding:0; } #header #search input{ font-size:10px; margin:0; } /* Google Search text box*/ #header #search #plc_lt_zoneHeader_pageHeader_GoogleSearchBox_txtWord, /* standard*/ #header #search #plc_lt_zoneSearch_GoogleSearchBox_txtWord /* homepage */ { font-size:11px; width:174px; } /* ------------------------ Header ScreenReaderLinks ------------------------ */ #header .screenReaderLinks{ /*applies only to header; other divs in the page have no style*/ font-size:100%; position: absolute; left: -5000px; } /* ------------------------ GlobalNavigation ------------------------ */ #globalNavigationWrapper{ background:#a48957; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; } #globalNavigation ul{ list-style-type:none; margin-left:0; } #globalNavigation ul li{ float:left; display:block; } #globalNavigation ul li a{ color:#ffffff; text-decoration:none; display:block; padding:3px 7px 3px 7px; } #globalNavigation ul li a:hover{ color:#cccccc; text-decoration:none; } /* #globalNavigation ul li a{ color:#ffffff; text-decoration:none; display:block; padding:3px 7px 3px 7px; } #globalNavigation ul li a:hover{ color:#39275b; text-decoration:none; background-color:#fff; } */ /* ============================================== Footer ==============================================*/ #footer{ background: #39275b url(/uwbothell/media/templateimages/base/footerBackground.jpg) repeat-x center top; clear:both; text-align:center; color:#ffffff; padding-top:70px; height:100px; position:relative; } #footer .structuralSubElement{ } #footer a{ color: #ffffff; text-decoration:underline; } #footer a:hover{ color: #f0d576; } #footer address, #contact{ } #footer address{ text-align:left; } #footer address .plc_lt_zoneFooter_pageFooter_ContactInfo_Department{ /*Department name*/ font-weight:bold; } #footer #contact{ text-align:right; } #footer #copyright{ padding-top: 1em; padding-bottom: 1em; }