/* rules for nested grids in content area */
@media screen,projection {
	/* left column 2/3 width, right column 1/3 width */
	div.cols-2-1 {}
		div.cols-2-1 div.a { float:left; display:inline; width:358px; }
			div.cols-2-1 div.a div.box {background-image:url(/include/swell/img/box-358.gif);}
			div.cols-2-1 div.a div.box .end {background-image:url(/include/swell/img/end-358.gif);}
		div.cols-2-1 div.b { float:right; display:inline; width:180px; }
			div.cols-2-1 div.b div.box {background-image:url(/include/swell/img/box-180.gif);}
			div.cols-2-1 div.b div.box .end {background-image:url(/include/swell/img/end-180.gif);}
	/* left column 1/3 width, right column 2/3 width */
	div.cols-1-2 {}
		div.cols-1-2 div.a { float:left; display:inline; width:180px; }
			div.cols-1-2 div.a div.box {background-image:url(/include/swell/img/box-180.gif);}
			div.cols-1-2 div.a div.box .end {background-image:url(/include/swell/img/end-180.gif);}
		div.cols-1-2 div.b { float:right; display:inline; width:358px; }
			div.cols-1-2 div.b div.box {background-image:url(/include/swell/img/box-358.gif);}
			div.cols-1-2 div.b div.box .end {background-image:url(/include/swell/img/end-358.gif);}
	/* left column 1/2 width, right column 1/2 width */
	div.cols-1-1 {}
		div.cols-1-1 div.a { float:left; display:inline; width:266px; }
		div.cols-1-1 div.b { float:right; display:inline; width:266px; }
		div.cols-1-1 div.box {background-image:url(/include/swell/img/box-266.gif);}
		div.cols-1-1 div.box .end {background-image:url(/include/swell/img/end-266.gif);}
	/* three columns, each 1/3 width */
	/* ! no boxes in 3-column view ! */
	div.cols-1-1-1 { background-image:url(/include/swell/img/bg-cols-1-1-1.gif); background-repeat:repeat-y; background-position:50% 0; }
		div.cols-1-1-1 div.a { float:left; display:inline; width:160px; margin-left:10px; }
		div.cols-1-1-1 div.b { float:left; display:inline; width:160px; margin-left:25px; }
		div.cols-1-1-1 div.c { float:left; display:inline; width:160px; margin-left:25px; }
	/* for nested "box" areas */
	div.box { margin:0 0 2em; padding:0.5em 0 0; background-position:0 0.5em; background-repeat:no-repeat; background-image:url(/include/swell/img/box-full.gif);}
	div.box div.img { border-bottom:1px solid #E0DED8; }
	div.box div.pad { padding:1em; }
	div.box .end { height:auto !important; height:8px; min-height:8px; background-position:bottom left; background-repeat:no-repeat; padding:0; margin:-8px 0 0 !important; margin:0; background-image:url(/include/swell/img/end-full.gif); }
	/* because insert boxes share common elements with grid boxes, they're kept here */
	div.insert { width:180px; background-image:url(/include/swell/img/box-180.gif); background-repeat:no-repeat; }
		div.insert div.img { border-bottom:1px solid #E0DED8;}
		div.insert div.pad { padding:1em; }
		div.insert div.end { background-image:url(/include/swell/img/end-180.gif); height:auto !important; height:8px; min-height:8px; background-position:bottom left; background-repeat:no-repeat; }
	/* action and information boxes share common ideas with boxes */
	div.action { background-image:url(/include/swell/img/action-full.gif); background-repeat:no-repeat; padding:5px 10px; }
		div.action h3, div.action h4 { color:#413228; font-size:1.1em; margin-bottom:1em; height:1%; }
		div.cols-2-1 div.a div.action,
		div.cols-1-2 div.b div.action
			{ background-image:url(/include/swell/img/action-358.gif); }
		div.cols-2-1 div.b div.action,
		div.cols-1-2 div.a div.action
			{ background-image:url(/include/swell/img/action-180.gif); }
		div.cols-1-1 div.action { background-image:url(/include/swell/img/action-266.gif); }
		div.cols-1-1-1 div.action { background-image:url(/include/swell/img/action-160.gif); }
	div.information { background-image:url(/include/swell/img/information-full.gif); background-repeat:no-repeat; padding:5px 10px; }
		div.information h3, div.information h4 { color:#354E67; font-size:1.1em; margin-bottom:1em; height:1%; }
		div.cols-2-1 div.a div.information,
		div.cols-1-2 div.b div.information
			{ background-image:url(/include/swell/img/information-358.gif); }
		div.cols-2-1 div.b div.information,
		div.cols-1-2 div.a div.information
			{ background-image:url(/include/swell/img/information-180.gif); }
		div.cols-1-1 div.information { background-image:url(/include/swell/img/information-266.gif); }
		div.cols-1-1-1 div.information { background-image:url(/include/swell/img/information-160.gif); }
	/* nesting column groups inside action or information blocks */
		div.action div.cols-1-1 div.a,
		div.action div.cols-1-1 div.b,
		div.information div.cols-1-1 div.a,
		div.information div.cols-1-1 div.b
			{ width:256px; }
		div.action div.cols-1-1,
		div.information div.cols-1-1
			{ background-image:url(/include/swell/img/bg-cols-1-1.gif); background-repeat:repeat-y; background-position:50% 0; }
}
@media print {
	/* left column 2/3 width, right column 1/3 width */
	div.cols-2-1 {}
		div.cols-2-1 div.a { float:left; display:inline; width:65%; }
		div.cols-2-1 div.b { float:right; display:inline; width:30%; }
	/* left column 1/3 width, right column 2/3 width */
	div.cols-1-2 {}
		div.cols-1-2 div.a { float:left; display:inline; width:30%; }
		div.cols-1-2 div.b { float:right; display:inline; width:65%; }
	/* left column 1/2 width, right column 1/2 width */
	div.cols-1-1 {}
		div.cols-1-1 div.a { float:left; display:inline; width:49%; }
		div.cols-1-1 div.b { float:right; display:inline; width:49%; }
	/* three columns, each 1/3 width */
	div.cols-1-1-1 {}
		div.cols-1-1-1 div.a { float:left; display:inline; width:31%; margin-left:1%; }
		div.cols-1-1-1 div.b { float:left; display:inline; width:31%; margin-left:1%; }
		div.cols-1-1-1 div.c { float:left; display:inline; width:31%; margin-left:1%; }
	div.insert { width:180px; border:1px solid #000; }
	div.box { margin:0 0 1em; font-size:0.9em; border:1px solid #999; }
	div.pad { padding:1em; }
}
@media handheld {
	div.insert { display:none; }
}

/* fix clearing on nested column sets */
 	div.cols-2-1:after,
	div.cols-1-2:after,
	div.cols-1-1:after,
	div.cols-1-1-1:after {
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}
	div.cols-2-1,
	div.cols-1-2,
	div.cols-1-1,
	div.cols-1-1-1
		{display: inline-table; margin-bottom:1em;}
	/* Hides from IE-mac \*/
	* html div.cols-1-2,
	* html div.cols-2-1,
	* html div.cols-1-1,
	* html div.cols-1-1-1 {
		height:1%;
	}
	*+html div.cols-1-2,
	*+html div.cols-2-1,
	*+html div.cols-1-1,
	*+html div.cols-1-1-1 {
		height:1%;
	}
	div.cols-2-1,
	div.cols-1-2,
	div.cols-1-1,
	div.cols-1-1-1 {
		display:block;
	}
	/* End hide from IE-mac */
