/**
 * GRIDS.CSS
 * 
 * @note		Classes and styles to use for nested grids and columns.
 * @author		mraichelson
 * 
 */
/**
 * @section display-based styles
 */
@media screen,projection {
	div.tier {
		/*margin-bottom:20px;I think this need to be removed and put in as a padding-bottom in the wrapper div*/
		position:relative;
		z-index:1;
		background-image:url(http://media.charlotteobserver.com/design/bg-column.gif);
		background-position:bottom right;
		background-repeat:repeat-y;
	}
	div.vendor_tier {
		margin-bottom:20px;
		position:relative;
		z-index:1;
	}
	div.no-columns {
		background-image:none !important;
	}
		div.fulltier {
			border-top:1px solid #ccc;
			border-bottom:1px solid #ccc;
			padding:20px 0;
		}
	div.content {
		width:656px;
		float:left;
	}
	div.vendor_content {
	}
		div.gridunit {
			background-position:0 0;
			background-repeat:repeat-y;
			height:100%;
			margin-bottom:8px;
		}
			div.gridunit div.gridunit {
				height:auto;
				background-color:#fff;
			}
			div.grid-a-b-c-d { background-image:url(http://media.charlotteobserver.com/design/cols-a-b-c-d.gif); }
			div.grid-ab-c-d { background-image:url(http://media.charlotteobserver.com/design/cols-ab-c-d.gif); }
			div.grid-abc-d { background-image:url(http://media.charlotteobserver.com/design/cols-abc-d.gif); }
			div.grid-ab-cd { background-image:url(http://media.charlotteobserver.com/design/cols-ab-cd.gif); }
			div.grid-a-bc-d { background-image:url(http://media.charlotteobserver.com/design/cols-a-bc-d.gif); }
			div.grid-a-bcd { background-image:url(http://media.charlotteobserver.com/design/cols-a-bcd.gif); }
		div.grid-a {
			width:152px;
			float:left;
			margin-right:16px;
		}
			div.grid-ab {
				width:320px;
				float:left;
				margin-right:16px;
			}
			#special-coverage div.grid-ab { margin-right:0; width:320px; }
			div.grid-abc {
				width:488px;
				float:left;
				margin-right:0;
			}
			#special-coverage div.grid-abc { margin-right:0; }
			div.grid-abcd {
				width:100%;
			}
		div.grid-b {
			width:152px;
			float:left;
			margin-right:16px;
		}
			div.grid-bc {
				width:320px;
				float:left;
				margin-right:16px;
			}
			div.grid-bcd {
				width:488px;
				float:right;
			}
		div.grid-c {
			width:152px;
			float:left;
			margin-right:11px;
		}
			div.grid-cd {
				width:320px;
				float:right;
				margin-left:-5px;
			}
		div.grid-d {
			width:152px;
			float:right;
		}
		div#special-coverage div.grid-d {
			display:inline;
			margin-right:6px;
		}
	div.grid-ads { padding:20px 0 0; }
	div.rail {
		width:317px;
		float:right;
	}
		div.rail2 {
			padding:0 8px;
			background-image:url(http://media.charlotteobserver.com/design/bg-rail-top.gif);
			background-repeat:repeat-x;
		}
		div.railunit {
			margin-bottom:8px;
			padding-bottom:0;
		}
			div.rail-a {
				width:146px;
				float:left;
			}
			div.rail-b {
				width:146px;
				float:right;
			}
			div.rail-ab {}
	div.nested { border-bottom:10px solid #fff; }
	/**
	 * @section No Right Margin
	 * @notes may need to be applied to some grid units to prevent column wrapping in IE6.
	 */
	div.nrm { margin-right:0 !important; }
}
/**
 * @section print-based styles
 */
@media print {
	div.grid-a {
		width: 25%;
		margin-right:1%;
		float:left;
	}
		div.grid-ab {
			width:50%;
			margin-right:1%;
			float:left;
		}
		div.grid-abc {
			width:75%;
			margin-right:0;
			float:left;
		}
		div.grid-abcd {}
	div.grid-b {
		width:24%;
		margin-right:1%;
		float:left;
	}
		div.grid-bc {
			width:49%;
			margin-right:0;
			float:left;
		}
		div.grid-bcd {
			width:73%;
			float:right;
		}
	div.grid-c {
		width:24%;
		margin-right:0;
		float:left;
	}
		div.grid-cd {
			width:49%;
			float:right;
		}
	div.grid-d {
		width:24%;
		float:right;
	}
}

/**
 * See http://positioniseverything.net/easyclearing.html
 * for a description of this code.
 * 
 * This code is applied to ALL media.
 * 
 * @section		fix clearing of floated items without structural markup
 */
	.clearfix:after, #pagebody:after, .tier:after, .gridunit:after, .vendor_tier:after, 
	.railunit:after, #pagefooter:after, #mcclatchy:after, #main-nav ul.subnav:after,
	#cb-quicksearch:after
		{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
	.clearfix, #pagebody, .tier, .vendor_tier, .gridunit, .railunit, #pagefooter, 
	#mcclatchy, #main-nav ul.subnav, #cb-quicksearch
		{ display:inline-table; }
	/* Hides from IE-mac \*/
	* html .clearfix, * html #pagebody, * html .tier, *html .vendor_tier, * html .gridunit,
	* html .railunit, * html #pagefooter, * html #mcclatchy, * html #main-nav ul.subnav,
	* html #cb-quicksearch
		{ height:1%; }
	*+html .clearfix, *+html #pagebody, *+html .tier, *+html .vendor_tier, *+html .gridunit,
	*+html .railunit, *+html #pagefooter, *+html #mcclatchy, *+html #main-nav ul.subnav,
	*+html #cb-quicksearch
		{ height:1%; }
	.clearfix, #pagebody, .tier, .vendor_tier, .gridunit, .railunit, #pagefooter,
	#mcclatchy, #main-nav ul.subnav, #cb-quicksearch
		{ display:block; }
	/* End hide from IE-mac */