/* MATHCAMP WEBSITE LAYOUT SHEET */ /* Created Jan 2010 by Marisa */ /* Last Updated Jan 2010 by Marisa */ /* This stylesheet contains the LARGE-SCALE BUILDING BLOCKS OF THE PAGE. They put things in the right places. */ /* Overall Structure: -- sets the background color, helps make the footer sticky WRAPPER -- 800px wide, 100% tall HEADER -- 800px wide, 102 px tall, bottom margin of 11px (where 11px is this layout's standard margin) HEADER-MAIN -- 666px wide, 102px tall, absolutely positioned (relative to HEADER) flush left HEADER-RIGHT -- several pieces, each of them 134px wide, absolutely positioned (relative to HEADER) flush right and down from the top MAIN NAV BAR -- 800px wide, 26px tall, uses a sprite (which is 800 x 52 px) and a list MAIN -- 800px wide, height not specified LEFT MENU WRAPPER -- 168px wide, height not specified. Floats left. LEFT MENU PANE -- 151px wide, height not specified. Contains the left menu bar. INFO PANE -- 599px wide, height not specified. Has a left-margin the size of the left menu (168px). WIDE INFO PANE -- alternative to LEFT MENU WRAPPER + INFO PANE, for pages (like "request a brochure") with no left menu. 756px wide. FOOTER -- 800px wide, 42px high, stuck to the bottom */ html, body { background-color: #C8C8CD; margin:0; padding:0; height:100%; font-size:62.5%; /* padding-bottom:42px; */ /* height of the footer */ } #wrapper { background-color: #FFFFFF; /* padding-bottom:42px; */ /* height of the footer */ position:relative; /* so we can absolutely control the contents */ width:800px; /* width of all content */ text-align:left; height:auto; /* important to make the footer sticky */ height:100%; /* important to make the footer sticky */ min-height:100%; /* important to make the footer sticky */ margin:0 auto -42px; /* important to make the footer sticky */ } #header{ position:relative; background-color: #323237; width:800px; height:102px; margin-bottom:11px; } #header-main { position:absolute; left:0px; top:0px; float:left; } #header-right-contactus { position:absolute; right:0px; top:11px; } #header-right-brochure { position:absolute; right:0px; top:31px; } #header-right-search { position:absolute; right:0px; top:51px; } #header-right-go { position:absolute; right:0px; top:73px; width:134px; } #header-right-search-box { position:absolute; right:32px; top:73px; width:92px; height:16px; } #header-right-search-box input { border:0px; width:92px; height:14px; } #header-right-go-button { position:absolute; right:11px; top:73px; width:21px; height:16px; } .go-button { border: 0px; background: url('content/headerright_gobutton.gif') no-repeat top right; width:21px; height:16px; } #main-nav-bar { position:relative; width:800px; height:26px; margin-top:-6px; margin-bottom:0px; /*border:1px solid orange; */ } #main-nav-bar li { position:absolute; list-style:none; margin:0; padding:0; top:0; } #main-nav-bar li, #main-nav-bar a { height:26px; /* Each button has the same height, define it here */ display:block; } #navbar-GetToKnowMathcamp{left:0px;width:158px;} #navbar-GetToKnowMathcamp{background:url('content/navsprite.gif') 0 -26px;} #navbar-GetToKnowMathcamp a:hover { background:url("content/navsprite.gif") 0px 0px no-repeat; } #navbar-ForProspectiveApplicants{left:158px;width:144px;} #navbar-ForProspectiveApplicants{background:url('content/navsprite.gif') -158px -26px;} #navbar-ForProspectiveApplicants a:hover { background:url("content/navsprite.gif") -158px 0px no-repeat; } #navbar-ForCurrentStudents{left:302px;width:113px;} #navbar-ForCurrentStudents{background:url('content/navsprite.gif') -302px -26px;} #navbar-ForCurrentStudents a:hover { background:url("content/navsprite.gif") -302px 0px no-repeat; } #navbar-ForAlumni{left:415px;width:57px;} #navbar-ForAlumni{background:url('content/navsprite.gif') -415px -26px;} #navbar-ForAlumni a:hover { background:url("content/navsprite.gif") -415px 0px no-repeat; } #navbar-ForParents{left:472px;width:56px;} #navbar-ForParents{background:url('content/navsprite.gif') -472px -26px;} #navbar-ForParents a:hover { background:url("content/navsprite.gif") -472px 0px no-repeat; } #navbar-ForTeachersAndCoaches{left:528px;width:127px;} #navbar-ForTeachersAndCoaches{background:url('content/navsprite.gif') -528px -26px;} #navbar-ForTeachersAndCoaches a:hover { background:url('content/navsprite.gif') -528px 0px no-repeat; } #navbar-ForJobSeekers{left:655px;width:79px;} #navbar-ForJobSeekers{background:url('content/navsprite.gif') -655px -26px;} #navbar-ForJobSeekers a:hover { background:url("content/navsprite.gif") -655px 0px no-repeat; } #navbar-ForDonors{left:734px;width:66px;} #navbar-ForDonors{background:url('content/navsprite.gif') -734px -26px;} #navbar-ForDonors a:hover { background:url("content/navsprite.gif") -734px 0px no-repeat; } #main{ position:relative; float:left; background-color: #FFFFFF; width:800px; /* padding-bottom:42px; /* equal to height of footer */ } #footer{ position:relative; clear:left; background-color: #FFFFFF; width:800px; height:42px; margin:0 auto; } #footer-image-map { position:absolute; left:0px; bottom:0px; } #left-menu-wrapper { width:168px; background-color: #DCDCE1; /* position:relative; */ float:left; display: inline; margin-top:11px; } #left-menu-pane { width:151px; background-color: #EBEBEE; /* position:relative; */ padding-left: 11px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; margin-top:0px; } #info-pane { /* float:left; */ width:588px; /* used to be 599 px */ background-color: #FFFFFF; margin-left:168px; margin-top:22px; padding-left:22px; /* used to be 11px */ padding-right:22px; } #wide-info-pane { /* width:756px; */ background-color: #FFFFFF; margin-top:22px; padding-left:22px; padding-right:22px; } /* END OF FILE */