Annotated CSS

Tag Formatting

Sets the borders, margins,and paddings for the entire document to zero.

* {
	border:0;
	margin:0;
   	padding:0;
}				

Makes a repeating banana background with a brown background color. Sets the font to 12 pixels Arial with a line height of 1 1/2 times larger than normal.

body {
	background-image:url(../media/plain.png);
	background-color:#3E1D11;
	color:#464823;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:1.5em;
}				

Sets level 1 headings to be all upercase, 36 pixels, Eras Bold ITC font that is orange. It has a cushion of 10 pixels above and below itself and is aligned to the left.

h1 {
	font-family: Eras Bold ITC, Cooper Black, Apple Chancery, Georgia, Geneva;
	font-size: 36px;
	text-transform:uppercase;
	padding:10px 0px 10px 0px;
	color:#FE6703;
	text-align:left;
}				

Sets level 2 headings to have 10 pixels of space below it.

h2 {
	margin:0px 0px 10px 0px;
}				

Sets level 3 headings to a brown color that is 16 pixes, underlined and aligned to the center. It has 5 pixels of spacing above and below it.

h3 {
	color:#3E1D11;
	margin:5px 0px 5px 0px;
	font-size:16px;
	text-decoration:underline;
	text-align:center;
}				

Sets level 4 headings to a green color that is bold, 15 pixels in size and has 8 pixels of space above it.

h4 {
	font-size:15px;
	font-weight:bold;
	margin:8px 0px 1px 0px;
	color:#5C6731;
}				

Sets level 5 headings to a brown color that is 12 pixels in size and has 3 pixels of space above it.

h5 {
	color:#3E1D11;
	margin-top:3px;
	font-size: 12px;
}				

Sets text inside paragraphs to a line height 2 times the regular size with space on the bottom of 4 pixels and cushion on the top and bottom of 5 pixels.

p {
	padding:5px 0px 5px 0px;
	margin-bottom:4px;
	line-height:2em;
}				

Sets links to a green color and removes the underline.

a {
	color:#5C6731;
	text-decoration:none;
}				

Sets unvisited links to green cream color and removes the underline.

a:link {
	color:#655F49;
	text-decoration:none;
}				

Sets links that have been visited to a green color.

a:visited {
	color:#464823;
}				

Sets links that are being hovered over to have white text with an orange background if the image for the hover effect does not load. This also gives a cushion of 2 pixels on topand 1 pixel on the bottom.

a:hover {
	color:#fff;
	background-image:url(../media/navHover.png);
	background-color:#FDAA03;
	padding:2px 0px 1px 0px;
}				

Sets links that are in the process of being active to a grey color.

a:active {
	color:#bdb5b3;
}				

Sets the background image of the page that the user is currently on. Also sets a backup color of brown for the background. This also sets the font color to orange and gives a cushion of 4 pixels on top, 6 to the right, 2 on the bottom, and 6 to the left.

body#homePage a#home,
body#actorsPage a#actors,
body#makersPage a#makers,
body#newPage a#new,
body#trailerPage a#trailer
	{
	background-image:url(../media/navOver.png);
	background-color:#3E1D11;
	color:#FD9803;
	padding:4px 6px 2px 6px;
}				

ID Formatting

Sets the content in a main block which is 900 pixels wide and will be centered in the browser. This tag has a background color of green and a border around it that is 2 pixels, solid all the way around, and the color is a darker green than the background is. This is where the footer gets its background color from.

#wrapper {
	width:900px;
	background-color:#59642F;
	border: solid 2px #464823;
	margin:0px auto 0px auto;
	padding:0px 0px 0px 0px;
}				

Used to contain all the contents of the site. It has a background color of an off white and is the same width as the wrapper. This works in collaberation with the wrapper to make the footer exist without having to set a defined space for it in the footer class.

#insideBox {
	width: 100%;
	background-color:#DED5CD;
}				

Sets the area for the image at the top of the page and the navigation bar

#heading {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border-bottom: 1px solid #3E1D11;
}				

This makes the logo float to the right.

#logo {
	float:right;
	padding:0px 0px 0px 0px;
}				

Adds a background image to the navigation bar to make it look as though the links were buttons. Sets the background color to green and adds a cushion of 2 pixels on the top and 1 pixel on the bottom. Also this makes the navigation bar come after the header image and puts bars on the top and bottom of it by using a solid brown border that is 3 pixels. Finally this makes the navigation links align to the right and makes the text bold.

#nav {
	background-image:url(../media/navbut.png);
	background-color:#59642F;
	border-top: 3px solid #3E1D11;
	border-bottom: 3px solid #3E1D11;
	margin:0px 0px 0px 0px;
	padding: 2px 0px 1px 0px;
	font-weight:bold;
	clear:both;
	text-align:right;
}				

Sets an unordered list that is in the nav ID to have 18 pixels of space to its left.

#nav ul {
	margin-left:18px;
}				

This makes the navigation in a horizontal line and removes the bullet points fom it. It also sets the color of the list to brown and puts 5 pixels of space to the right of the list.

#nav li {
	list-style-type:none;
	display:inline;
	color:#3E1D11;
	margin:0px 5px 0px 0px;
}				

Sets a space of 5 pixels to the left and right of links that are in the navigation and removes the underline. This also sets the color to brown and makes the font size 17 pixels.

#nav a {
	margin:0px 5px 0px 5px;
	list-style-type:none;
	color:#3E1D11;
	font-size:17px;
	text-decoration:none;
}				

Holds all the content together and adds a cushion of 20 pixels to it.

#content {
	overflow:hidden;
	padding:20px;
}				

Holds the main content separate from the side bar content and adds 40 pixels of space the left to keep this block from the sidebar. Floating makes this block to the right of the sidebar.

#contentMain {
	float:left;
	width:524px;
	margin:0px 0px 0px 40px;

}				

Sets the sidebar block to be to the left of the main content and defines its width to 249 pixels.

#contentSub {
	float:left;
	width:249px;
}
				

Makes level 2 headers in the sidebar 22 pixels in size.

#contentSub h2 {
	font-size:22px;
}				

Sets the actual contents of the sidebar to be contained in a width of 205 pixels with cushions of 6 pixels on each side of it to keep the 1 pixel solid green border from being too close to the text. Also sets the font to white and the background to be an image of a gradient and then a brown color below if needed.

#sideBar {
	width:205px;
	color:#fff;
	border:solid 1px #464823;
	background:url(../media/bk_request.gif) repeat-x;
	background-color:#3e1d11;
	padding:6px 6px 6px 6px;
}				

Sets links in the sidebar to be an off white that is aligned in the cent and 13 pixels in size.

#sideBar a {
	color:#DED5CD;
	font-size:13px;
	text-align:center;
}				

Makes links in the sidebar have a space of 10 pixels above it and 30 pixels below it.

#sideBar li {
	margin:10px 0px 0px 30px;
}				

Makes unordered list in the sidebar have a picture of a banana for its bullet point.

#sideBar ul {
	list-style-image:url("../media/banana.png");
}				

Aligns all the text in the footer to the center while making the font color brown and have 1 pixel of cushion to the top of it. This also makes the background a gradiant due to its image and puts a line above it to separate the footer from the rest of the content through the use of a 1 pixels solid brown border.

#footer {
	color:#3E1D11;
	text-align:center;
	border-top:1px solid #3E1D11;
	background-image:url(../media/footer.png);
	padding:1px 0px 0px 0px;
}				

Causes links in the footer to be brown.

#footer a{
	color:#3E1D11;
}				

Makes the content in the division be aligned in the centern with 20 pixels of space to the top and 5 pixels of cushion to the top as well.

#trailer {
	text-align:center;
	margin-top:20px;
	padding-top:5px;
}				

Makes the video have a green background color and makes a cushion of 30 pixels around it so that the background can acutally be seen. Also applies a 1 pixel border around the green background that is sold and dark brown.

#trailerBG object {
	background-color:#636E35;
	padding:15px;
	border:1px solid #3e1d11;

}				

Class Formatting

Makes things in this class float to the left and gives 10 pixels of space to the right of it.

.floatLeft {
	float:left;
	margin-right:10px;
}				

Makes things in this class float to the right and gives 10 pixels of space to the left of it.

.floatRight {
	float:right;
	margin-left:10px;
}				

Makes images that are the the floatRight class have a solid 1 pixel brown border around it.

.floatRight img {
	border:1px solid #3E1D11;
}				

Gives 5 pixels of cushion to the left of this class.

.padLeft {
	padding-left:5px;
}				

Makes things in this claa have a font color of yellow.

.colorYellow {
	color:#ECEC00;
}				

Makes list items in the colorYellow class yellow.

.colorYellow li{
	color:#ECEC00;
}				

Makes unordered lists in the colorYellow class yellow.

.colorYellow ul{
	color:#ECEC00;
}