/* Cascading Style Sheets */ 
/* www.andreas.com/faq-csstwocols.html */ 

/* Two Columns: This is a two-column layout with a variable-width header section, a fixed-width navigation menu section, and a variable-width content section. */ 

/* The following is based on http://bluerobot.com/web/layouts/layout1.html. To understand how this works, I simplified the code and added explanations. The files are twocolumns.html and twocolumns.css. Both are at www.andreas.com/faq-csstwocols.html */

/* You can strip out most or all of the comments. You might want to keep a comment that leads back to www.andreas.com so you can recover the original and figure out how it works. */

/* =================================================================================== */
/* The first two items (<H1> and <p>) are ordinary CSS. You can modify these as you like. */

h1 {
	font:verdana;
	color:"blue";
	}
p {
	font:11px, verdana;
	}

/* =================================================================================== */
/* The remainder of this CSS defines the position of the cells. Since we are accustomed to using tables for layout, I call these "cells," but they're not really cells. */ 	

/* This layout uses CSS to set the positioning for <div> items. In the HTML code, there are three div sections and each one has an identity: header, menu, and content. The order doesn't matter in your HTML; you can place these in any order. HTML and CSS will render them to the proper location in the browser. */ 

#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

/* =================================================================================== */
#Header {
/* The following item sets the cell's distance from the browser's borders. The distances are relative: the cell is set to five pixels from the top and bottom. This lets the user resize the browser and the cell will resize as well. */
	margin:5px 50px 5px 50px;    /* This sets the cell's margin relative to the browser's walls.*/
							   /* FromTop FromRight Bottom FromLeft */
	padding:10px 0px 0px 10px; /* This sets the padding within the cell. */
							   /* FromTop FromRight Bottom FromLeft*/
	
/* This controls the cell's height. */
/* For IE5: height = [correct height] + [top padding] + [top and bottom border widths] */
	height:33px; 			/* 14px + 17px + 2px = 33px */

/* The following creates a border around the cell. This section is optional. It's useful when designing so you can see the cell. You can remove it afterwards. */

	border-style:solid;
	border-color:"green";   /* Sets color for the border */
	border-width:1px; 		/* Sets thickness for the top border */
	background-color:"#ccccff"; /* This colors the cell. */

/* The Tantek Celik hack. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. In the following three lines, the incorrect IE5/Win value is first, while the correct value is below. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. See http://glish.com/css/hacks.asp for details. */

	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px; 			/* the correct height */
	}

/* This is called the "Be nice to Opera 5" rule. It feeds correct 
length values to user agents that exhibit the parsing error exploited above, yet get 
the CSS box model right and understand the CSS2 parent-child selector. You should include
the "Be Nice to Opera 5" rule whenever you use the Tantek Celik hack. */

body>#Header {height:14px;}

/* =================================================================================== */
/* This section controls the content cell's position. Similar to the header cell, this is relative positioning, which lets the user resize the browser and the cell will resize as well. */

#Content {
	margin:0px 50px 0px 170px;  /* FromTop FromRight Bottom FromLeft */
/* The margin line sets the cell's margin relative to the browser's walls. The last value is the important one: it sets the cell 200 pixels from the left side. */
	padding:10px;               /* This sets the padding within the cell. */
								/* FromTop FromRight Bottom FromLeft*/

/* The following creates a border around the cell. This section is optional. It's useful when designing so you can see the cell. You can remove it afterwards. */
	border-style:solid;
	border-color:"blue";   /* Sets color for the border */
	border-width:1px; 		/* Sets thickness for the top border */
	background-color:"#ffffcc"; /* This colors the cell. */
	}

/* =================================================================================== */
/* This section controls the menu's position. Unlike the header or content cells, this uses absolute positioning. */

#Menu {
	position:absolute;
	top:89px; 
	left:60px;
	width:100px;
	padding:10px;
	background-color:#ffcccc;
	border:1px solid;
	line-height:1px;

/* Again, the Tantek Celik hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}

/* Again, "Be Nice to Opera 5". */
body>#Menu {width:150px;}

/* =================================================================================== */
/* End of CSS */