tags on the HTML page (i.e. "

(insert code here)

). Only HTML tags with the "class=" will modify the code in that specific way. */ /* The style for the code (namely the boxes you see on the website) in this website inside this CSS page is separating structure code and content code into separate classes. For instance, the "bannercontainer" is merely making a structural change to the site. It's responsible for how wide that box is, where it's positioned on the page, the background colour, and whether or not it contains a border. Meanwhile, the "bannercontent" is responsible for any kind of text that needs to be changed within that box. This can include how far the right hand side of the text is from the border itself and any special font we want to give to that text. The resoning behind this is that if we want to modify something in a given box, we don't want to accidently move something over in another box, pop the box out of allignment or any other unexplained things while modifying the content. It's really just a safety measure just in case something could mess something else up while modifying the code. It's highly unlikely that the structure can be affected unless you modify the structure code. */ body { background-color: #8080FF; } /* This modifies the HTML tag and makes the background colour outside of the biggest box on the webpage. */ .maincontainer { background-color: #194E76; width: 800px; margin-right: auto; margin-left: auto; height: 2571px; } /* This class creates the largest box that wrapss around everything else in the website (minus the background). Because it is merely a wrapper, there is no "maincontent" code. */ .logocontainer { float: left; width: 125px; margin: 0px; padding: 10px; background-color: #194e76; height: 130px; text-align: center; background-image: url('../images/Logos/iammissing_logo.png'); background-repeat: no-repeat; background-position: center center; } .bannercontainer { background-color: #194E76; width: 635px; float: right; height: 140px; padding-top: 10px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } /* This is for the content of the banner. */ .sidecontainer { width: 115px; background-color: #194E76; float: left; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 20px; } .sidecontainer a:link { color: #D0BA92; font-family: "Trebuchet MS"; text-decoration: none; font-size: small; text-align: center; } .sidecontainer a:visited { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #D0BA92; text-decoration: none; } .bodycontainer/* This is for the content of the navigation. */ { width: 635px; background-color: #FFFFFF; float: right; padding: 10px; min-height: 230px; height: 37113px; color: #002060; text-align: center; } .ambercontainer { margin-bottom: 10px; } /* This code is for the content within the box. */ .footercontainer { background-color: #194E76; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 78px; text-align: center; } .footercontainer a { color: #00FFFF; font-weight: bold; } .footercontainer a:visited { font-weight: bold; color: #951F12; } /* This is for modiufying how the content looks for the footer. */ .clear { clear: both; } /* This clear tag has a very specific purpose. Most browsers will look at these boxes and try and squish everything to the top of the site. Sometimes the boxes end up jumbling up for no apparent reason whatsoever. Since the "maincontainer" doesn't tell the browsers how long the site is (even if we enter all kinds of content in the site), text will just mysteriously run off the page past the bottom of the "maincontainer" box. Additionally, the boxes, unlike tables, don't know how to fit together properly even if we assign special floats to them. This piece of code fixes these bugs by telling the boxes where each row ends and forces the "maincontainer" box to stretch to the bottom of the page and make everything visible to the user. The line of code is invisible to the end-user, so nothing visible is actually added - it's just a bug fix. This clear tag can be found in between each row of boxes. */ .person { float: left; background-color: #FFF; padding: 5px; width: 118px; margin-top: 15px; margin-right: 30px; margin-bottom: 15px; margin-left: 0px; height: 138px; } .person img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #profile { height: 150px; } #profile img { padding-right: 10px; padding-bottom: 10px; display: block; float: left; } #sponsors img { border-style: none; border-width: 0px; margin-left: 15px; margin-right: 15px; }