element of the page, it is used to constrain our content to 800 pixels wide centered in the browser. We apply a background image to it, and center align the text */ #main { margin: 15px auto; /* margin 15 for top and bottom so it doesn't stick to the very top of the browser, side margins to auto so it centers itself in the page */ width: 780px; background-color: #640b0c; text-align: center; border: 2px solid #000; } #header /* header for all pages*/ { width: 780px; height: 256px; background: #fff url('header.gif') no-repeat top left; } #header_email /* holds the email address and phone number in the upper left corner of the header*/ { position:relative; left:10px; top:-30px; float: left; } #header_address /* holds the street address in the upper right corner of the header*/ { position:relative; right:10px; top:-30px; float: right; } #header_hook /* holds the street address in the upper right corner of the header*/ { position:relative; top: 100px; } /* Navigation */ #nav /* notice we are NOT setting a width here,

's default to 100%, and since that works with our design we keep it */ { margin: auto; width: 90%; position: relative; top: 90px; } #nav ul /* pinpoint the

's default to block level, meaning that each has its own line in the page flow, here we want them side by side */ margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; } #nav ul li a { display: block; /* 's default to inline, but we want them to have a height and width so we set them to block */ text-decoration: none; /* do not display the default underline */ color: #000; } /* Content */ #contentWrapper /* this element will contain the page content */ { min-height: 300px; /* with no content a
will have a default height of 0, so tell the browser to keep it at a certain height regardless */ width: 728px; margin-top: 0px; margin-left: 0px; margin-right: 0px; text-align: left; vertical-align: top; padding: 20px 20px 20px 20px; background-color: #fff; border:6px solid #640b0c; border-top: 0px; } .prepend {margin-left: 10px;} /* give ourselves some classes we can apply to any element to give it 10 pixels of margin left */ .append {margin-right: 20px;} .top {margin-top: 10px;} .bottom {margin-bottom: 10px;} /* Footer */ #footer { width: 770px; background-color: #640b0c; color: #fff; text-align: left; padding: 5px 5px 5px 5px; } #footer .navigation { float: left; font-size: .5em; float: left; } #footer .navigation a { color: #fff; text-decoration: none; } #footer .navigation a:hover { color: #bbdece; } /* Clear Floats */ /* these are the clearfix rules for elements whose children float */ .clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } .clearboth {clear: both;} .floatleft {float: left;} .floatright {float: right;}