@charset "UTF-8";
/*---	BASE
		---------------------
---*/
p.pullout-item img { margin-right: 0; }

/*---	CONTAINER
		-------------------------------------
---*/
.pullout-left,
.pullout-right { 
	_height: 1em; 
	-moz-column-count: 0;
}

.pullout-left {
	*margin-left: 0;
	*display: inline-block;

}


.pullout-left:after, /* IE 8 Beta */
.pullout-right:after /* IE 8 Beta */ {
	content: "\0020";
	clear: both;
	display: block;
	height: 0;
}

.pullout-left::after, 
.pullout-right::after {
	content: "\0020";
	clear: both;
	display: block;
	height: 0;
}


/*---	ITEM ALIGNMENT
		float items then,
		for IE sub7, 
			if pullout left or right, 
				stretch the item to 100% and set a gutter width between the item and other content.
			if wrap, 
				reset item height to auto and use gutter defined for left or right
		for Others, 
			if pullout left or right,
				add a margin to other content equal to the item and gutter width
			if wrap,
				add gutter between item and other content
---*/

.pullout-item {
	
	_height: 100%;/*---IE sub7---*/
}

.pullout-left .pullout-item {
	float: left;
	margin-top: 0px;
	margin-left: 0 !important;
	_margin-right: 6px; /*---TODO: supposed to be 10px, where's the extra coming from? ---*/
	_margin-bottom: 100%;
}

.left-wrap .pullout-item,
.right-wrap .pullout-item { 
	_height: auto;/*---IE sub7---*/
	_margin-bottom: auto;
}

.right-wrap .pullout-item { clear: right; }

.left-wrap .pullout-item { clear: left; }

.pullout-left .compact {
	display: table;
}

.pullout-left .compact::after {
	display: none;
}



.pullout-right .pullout-item {
	float: right;
	margin-right: 0 !important;
	_margin-left: 6px; /*---TODO: supposed to be 10px, where's the extra coming from? ---*/
}

div.left-wrap>.pullout-item { margin-right: 10px;

}

.pullout-left>span { display: block; }

/*--- These 2 IE workarounds below for direct child support look insane, but the override rules are VERY tricky when it comes to properties like 
display (other properties like border work fine without all this). Here I'm Adding the '*' before the className to negate it's importance-- 
allowing me style the display of all spans within another element differently ---*/

*.pullout-left span,
*.pullout-left *.pullout-left span { _display: block; }

*.pullout-left *.pullout-left * span,
*.pullout-left * span { _display: inline; }

div.right-wrap>.pullout-item { margin-left: 10px; }

a.pullout-left,
a.pullout-right {
	display: block;
	_cursor: hand;
}

div.pullout-wrap>* { margin-left: 0; }

div.left-wrap>.pullout-item { margin-right: 10px; }

div.right-wrap>.pullout-item { margin-left: 10px; }

.left-180 .pullout-item,
.right-180 .pullout-item { width: 180px; }

.left-155 .pullout-item,
.right-155 .pullout-item { width: 155px; }

.left-140 .pullout-item,
.right-140 .pullout-item { width: 140px; }

.left-125 .pullout-item,
.right-125 .pullout-item { width: 125px; }

.left-112 .pullout-item,
.right-112 .pullout-item { width: 112px; }

.left-100 .pullout-item,
.right-100 .pullout-item { width: 100px; }

.left-90 .pullout-item,
.right-90 .pullout-item { width: 90px; }

.left-80 .pullout-item,
.right-80 .pullout-item { width: 80px; }

.left-72 .pullout-item,
.right-72 .pullout-item { width: 72px; }

.left-71 .pullout-item,
.right-71 .pullout-item { width: 71px; }

.left-51 .pullout-item,
.right-51 .pullout-item { width: 51px; }

.left-60 .pullout-item,
.right-60 .pullout-item { width: 60px; }

.left-50 .pullout-item,
.right-50 .pullout-item { width: 50px; }

.left-40 .pullout-item,
.right-40 .pullout-item { width: 40px; }

.left-20 .pullout-item,
.right-20 .pullout-item { width: 20px; }

.left-16 .pullout-item,
.right-16 .pullout-item { width: 16px; }

.left-16 .pullout-item { margin-right: 0; /*---TODO: 4px seems to be the munged value added to IE, why? ---*/ }

.right-16 .pullout-item { margin-left: 0; /*---TODO: 4px seems to be the munged value added to IE, why? ---*/ }

.left-180>* { margin-left: 190px !important; }

.right-180>* { margin-right: 190px !important; }

.left-155>* { margin-left: 165px !important; }

.right-155>* { margin-right: 165px !important; }

.left-140>* {
	margin-left: 150px !important;
	
}

.right-140>* { margin-right: 150px !important; }

.left-125>* { margin-left: 135px !important; }

.right-125>* { margin-right: 135px !important; }

.left-112>* { margin-left: 122px !important; }

.right-112>* { margin-right: 122px !important; }

.left-100>* { margin-left: 110px !important; }

.right-100>* { margin-right: 110px !important; }

.left-90>* { margin-left: 100px !important; }

.right-90>* { margin-right: 100px !important; }

.left-80>* { margin-left: 90px !important; }

.right-80>* { margin-right: 90px !important; }

.left-72>* { margin-left: 82px !important; }

.right-72>* { margin-right: 82px !important; }

.left-71>* { margin-left: 81px !important; }

.right-71>* { margin-right: 81px !important; }

.left-60>* { margin-left: 70px !important; }

.right-60>* { margin-right: 70px !important; }

.left-50>* { margin-left: 60px !important; }

.right-50>* { margin-right: 60px !important; }

.left-51>* { margin-left: 61px !important; }

.right-51>* { margin-right: 61px !important; }

.left-40>* { margin-left: 50px !important; }

.right-40>* { margin-right: 50px !important; }

.left-20>* { margin-left: 28px !important; }

.right-20>* { margin-right: 28px !important; }

.left-16>* { margin-left: 20px !important; }

.right-16>* { margin-right: 20px !important; }