BodySystems style sheet


* {
	margin: 0;
	padding: 0;
}

This rule overrides all default browser settings for margins, so that I may set my own for each element.


body {
	background-color: #7A7A7A;
}

This makes the background color dark grey.


#wrapper {
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	border-right: 5px solid #3054C4;
	border-left: 5px solid #3054C4;
	border-top: 5px solid #3054C4;
}

The wrapper is the main container for all the content on the site. The auto margins center it on the viewport.


#disclaimer {
	font-size: 0.8em;
	border-bottom: 5px solid #3054C4;
}

This div styles my disclaimer with smaller font size.


#navigation ul { 
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

#navigation ul li { 
	display: inline;
}

#navigation ul li a { 
	text-decoration: none;
	padding: .2em 1em;
	background-color: #3054C4;
	color: #FFF;
}
	
#navigation ul li a:hover {
	background-color: #7A7A7A;
	color: #FFF
}


#navigation ul li #active {
	color: #FFF;
	background-color: #7A7A7A;
}

All these rules create the horizontal list navigation that appears on each page. The ul rules remove the bullets and center the text of each li item. Display:inline makes the list an inline element, so that it displays horizontally instead of each li starting on a new line. The a rules remove the default underline, and changes the background and font colors. The a:hover rules make the links turn gray on mouseover. And the #active rule makes the current page dark gray.


.overview img {
	width: 75px;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
	clear: both;
}

.overview {
	border: 1px solid;
	background-color: #C6C6C6;
	height: 100px;
	margin-right: 25px;
	margin-left: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
}

.overview a {
	font-size: 1.2em;
	text-decoration: none;
	color: #3054C4;
}

.overview p {
	margin: 10px;
}

I created the class "overview" so that I could show snippets of each product on the homepage. I thought that for this type of commercial website the most important thing to put on the homepage was all the products they're trying to sell. The .overview rules create the gray boxes for each product. I made the images a little smaller and floated them to the left. I made the name of each product a link to the full descriptions on the products page and styled these links as a larger font.


p {
	margin: 15px;
}

This rule creates space around each paragraph (necessary since I used the universal rule to remove all default margins).


#main {
	margin-left: 25px;
	margin-right: 25px;
}

I created the div "main" for all the content on the pages that wasn't the header, navigation, or footer.


#main h1 {
	font-size: 1.2em;
	color: #3054C4;
	border-bottom: 1px solid #3054C4;
	margin-top: 15px;
	margin-left: 15px;
	margin-bottom: 15px;
}

I made the h1s nice and large, and gave them a bottom border, which ends up looking like a horizontal rule (making the content stand out).


#main h2 {
	font-size: 1em;
	color: #3054C4;
	margin-top: 10px;
	margin-left: 15px;
}

This rule makes the h2s slightly larger and blue.


#main img {
	float: left;
	padding: 10px;
}

This rule makes the images in the main content area float left with text wrapping around them. The padding makes room between the picture and the surrounding text.


#main li {
	margin-left: 15px;
	list-style-position: inside;
}

This rule makes the lists align with the text, rather than the bullets hanging off to the left.


a {
	text-decoration: none;
	color: #3054C4
}

This rule overrides the default underlining of links, which I think is very ugly.


a:hover {
	text-decoration: underline;
}

Since I removed the underlining of links in the previous rule, I decided that there should be some indicator to people that links are links. So this rule makes links underlined when people put the mouse over them.


a:visited { color: #7A7A7A; }

This style makes the visited links the dark gray that matches my color scheme, rather than the default (ugly) purple.


ul.product-nav {
	list-style-type: none;
	margin-top: 5px;
}

The product-nav is a class I assigned to the small internal navigation on the products page. It's a list, but I didn't want bullet points. This rule removes the bullets.


#footer {
	clear: both;
	background-color: #3054C4;
	color: #FFF;
}

#footer p {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

I styled my footer with the clear rule so that it always stays at the bottom of the page. The background color is the blue that I also used for the border.


fieldset {
	background-color: #C6C6C6;
	padding: 15px;
	border: 2px solid;
	width: 500px;
	margin-left: 20px;
}

The fieldset element contains the form on the order page. I assigned a set width, border, and background color to set the form off from the rest of the page.


#subbutton {
	margin-left: 15px;
}

The subbutton id styles the submit button on the order form. This margin makes it align with the rest of the form.


p.explanation {
	background-color: #C6C6C6;
	padding: 5px;
}

This class is applied to these css explanations on this page. I set them off with a grey background so that they would be easy to read.


pre {
	margin-left: 15px;
}

I used the pre element for the css code on this page, so that the original spacing is preserved (and so it still looks like css). The margin makes it align with the paragraph styles.