/*
	twocolumntext.css
	
	DO NOT EDIT THIS PAGE / THIS IS AN EXAMPLE
	
	for generic two column page. This allows for a base for any two-column
	page. div.mainContent is altered to allow content to flow all the way
	to the left and right.
	
	This is meant to be an example, but also sets up two things you
	want on every: the container (into which you could put a background
	image to ensure the lesser-content column is filled with color) and the 
	modification on div.mainContent (which removes the standard U-shape
	padding, allow you to color the entire U shape.)
	
	Typical css rollout usage:
	twocolumntext.css
	lr_*.css	defines widths, colors. overriding such in here
	l_*.css		styles left column
	r_*.css		styles right column
	standardsOutline.css	generic css styles standards table
*/


div#twoColumnContainer { 
	width: 788px;
	margin: 0;
	padding: 0;
	border: none;
	/*background: url(/share/i/1200.gif) repeat-y -310px;*/
} 

/*
	dimensions calculation
	total 788 w/ no padding or margins
	often we want a 10px right margin on the left div which gives us a gutter
	
	we likely want some padding left and right on each div
	say 5px each side, cut 10px from each div width
	
	If you want a gutter, cut 10px from one bar's width and add a 10px margin
	we'll do this to rightBar:
		width from 490 to 480
		add 10px left margin
*/


div#leftBar {
	float: left; 
	width: 278px;
	margin: 0;
	padding: 0 5px;
}

div#rightBar {
	float:right;
	width: 480px;
 	margin: 0 0 0 10px;
	padding: 0 5px;
}

/*
	override mainContent left/right padding
*/

div.mainContent {
	padding-right: 0px;
	padding-left: 0px;
	width: 788px;
}

/*
	make classes for widths in left/right divs
	use like this in your html:
	<div id="leftBar" class="w260">
	but remember widths defined in Bars above will override these
	since they have Sith Lords, so take out the above widths
	when you get your dimensions down. Leave the twoColumnContainer
	width alone.
*/

div.w260 {
	width: 260px;
}

div.w500 {
	width: 500px;
}