Fynmark.org beyond everything

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, p, blockquote,
pre, form, fieldset {margin: 0;	padding: 0;}
/* Don't change the above code, it makes sure everything's set to defaults before you go and code, otherwise Internet Explorer will display everything wonkey. */
 
body {
	width:100%; /* This makes sure that everything visible in out HTML file can be made to be the width of the screen, but below I'll explain why it isn't. */
	height:auto; /* The height of the page changes depending on how much stuff is in it accordingly; it's dynamic. */
	margin:auto; /* This I actually don't know why it's like this, but when it's not things tend to be a bit messed up. */
	background-color:#808080; /* The background color of the entire page. Ours is gray for visibility's sake. See footnote 1 for more info. */
	text-align:center; /* Everything in the page is aligned to the center. (Pages are left-aligned by default, like in text editors). */
	font-family: Verdana; /* This makes everything in the page be in this font, if not declared otherwise below. */
	font-size:12px; /* Font size of all text, unless otherwise specified below. */
}
 
img {
	border:none;
} /* A good idea to set images as having no border, otherwise they have a border the color of the link colors. */
 
a { /* These are links. This is for overall links. */
	outline:none; /* So when you click on them you don't get an ugly dotted outline. */
	color:#FFFF00; /* The font color of the link. */
	text-decoration:none; /* Means the link text isn't underlined, ourlined, or in any way styled. Beginners shouldn't change this. */
}
 
a:hover { /* This link property is the styling for when your mouse hovers over the link. */
	outline:none; /* Precaution like above. */
	color:#FFFF64; /* Color of the text when you hover over the link. */
	text-decoration:underline; /* Text is underlined when you hover over it. */
}
 
a:visited { /* This link property is the styling of the link after it's been clicked and the user has been to where the link leads. */
	outline:none; /* I prefer to keep all the styling the same as the overall links one. That way links don't appear different when the user returns to the page. */
	color:#FFFF00;
	text-decoration:none;
}
 
#container { /* Styling for the that DIV that hold all your stuff: Header, Content */
	width:600px; /* Makes it so that everything's no wider than 600px */
	height:auto; /* Again, height changes dynamically */
	margin: 0 auto; /* This centers this DIV, the "Container." */
	text-align:center; /* Self explanatory from here on. */
}
 
#header { /* Styling for everything inside the header DIV. */
	width:100%; /* The width of this section extends to 100% of it's allowed width, 600px. */
	height:300px; /* Height of everything in it. */
	margin: 0 auto; /* Same as Container; Centers the div. */
	margin-top:50px; /* Margin pushes the content, here, from the top. It is now 50px lower. */
	background-color:#FF0000; /* The background color of this section. This case, red. */
	text-align:center; /* Text. Align. Center. */
	color:#FF7A00; /* Orange for display purposes. */
}
 
#nav { /* This is the styling for the Navigation. We'll keep it simple for now. */
	height:auto;
	margin: 0 auto;
	margin-top:30px; /* Pushes anything to the top of it 20px to the top. */
}
 
#nav ul,li { /* Styling for the List with the links. */
	margin: 0 auto;
	list-style-type:none; /* So the list doesn't have the bullet points. */
	display:inline; /* So the list displays horizontally instead of vertically. */
	margin-left:20px; /* Pushes anything to the left of it left 20px. */
	margin-right:20px; /* Pushes anything to the right of it right 20px. */
}
 
#content {
	width:580px;
	height:auto;
	margin: 0 auto;
	margin-top:20px;
	padding:10px 10px 10px 10px; /* Content background extended 10px to top, right, bottom, left. Note: Padding does increase the width, so you have to decrease the section width to make up for it. */
	background-color:#0000FF; /* Background color's blue. */
	text-align:left; /* Text. Align. LEFT. */
}
 
 
/*
***Footnote 1: Colors are always in hex codes, or codes consisting of letters A-Z and numerals 0-9. If you don't have Photoshop, a good way to find out what the code for your color is by using something like this, go to this link: http://www.ficml.org/jemimap/style/color/wheel.html
___
 
****You can also use the Firefox plugin for Firefox users Colorzilla. "It gives you an eyedropper on the bottom left hand of your browser. and when you go over anything on screen it will give you the RGB/Hex/file name. It is super helpful. I love it." --SlantedMindz, a Web Designer.
 
Link to Plugin: https://addons.mozilla.org/en-US/firefox/addon/271
*/