.box, .box > .header, .box > .body, .box > .pic {
	display: block; position: relative;
	margin: 0; padding: 0;
}

.box {
	margin: 0 0 20px; padding: 10px;
	border: solid 1px $main-border-color;
	@include border-radius(3px);
	text-align: left;
	background: #fff;
	
	&.shadow { @include box-shadow( 0 3px 3px 0 rgba(0, 0, 0, 0.20) ); }
	&.left-pic { padding-left: 110px; }
	&.no-press { margin: 0; }
	
	
	& > .pic {
		margin: 0 10px 0 -100px;
		width: 100px;
		float: left;
		border: solid 1px $main-border-color;
	}
	& > .header {
		padding: 5px 10px 5px;
		border-bottom: solid 1px $main-border-color;
		
		&, h1, h2, h3, h4, h5, h6, p, span, .h1, .h2, .h3, .h4, .h5, .h6 {
			margin: 0; padding: 0 5px 2px;
			color: $brand-color;
			line-height: 27px;
			font-size: 18px;
		}
		
		&.blank { border-bottom: solid 1px transparent; }
		i, i:before {
			color: #999;
			margin-right: 2px;
		}
	}
	.pic + .header { padding-left: 0; margin-left: 10px; }
	
	& > .body {
		padding: 10px 10px 5px;
	}
}






.list-box {
	display: table; position: relative;
	margin: 0 0 10px; padding: 5px 0;
	background-color: #fff;
	width: 100%;
	border-spacing: 10px 0;
	&.inactive { opacity: .5; }
	& > * {
		display: table-cell; position: relative;
		vertical-align: middle;
		text-align: left;
		&.pic_box { width: 30px; .pic { width: 30px; } }
		&.name { width: 30%; @include readFont; color: #333; }
		&.email { width: 30%; }
		&.state { width: 20%; }
		&.actions { width: 17%; text-align: right; }
	}
	&.nice {
		@include box-shadow( 0 1px 2px 0 rgba(0,0,0,.42) );
	}
	
	&.sm {
		margin: 0 0 1px;
		border-spacing: 5px 0;
		border-top: solid 1px rgba(255,255,255,.75);
		border-bottom: solid 1px rgba(0,0,0,.23);
		background: #eeeeee;
		& > * {
			&.name { width: 95%; }
			&.pic_box > .pic { width: 24px; }
		}
		&.three {
			& > .name { width: 65%; }
			& > .positions { width: 30%; text-align: right; }
		}
		&:hover {
			background: #fff;
		}
		&.dark {
			background-color: #333;
			color: #fff; 
			@include antialiased_text;
			border-top: solid 1px rgba(255,255,255,.75);
			border-bottom: solid 1px rgba(0,0,0,.75);
		}
		&.ui-draggable-dragging {
			width: 210px;
			z-index: 995;
			@include rotation( -7 );
			border: dashed 1px orange;
			background: #fff;
		}
	}
}


.feature-box {
	.feature-heading {
		font-size: 35px;
		line-height: 40px;
		margin: 0 0 20px;
		text-shadow: 0 1px 0 #fff;
	}
	p.loud, p.highlight { font-size: 24px; }
	p.highlight { font-style: italic; color: #555; }
	&.ready {
		.feature-icon {
			margin: 0 auto 20px;
			border: solid 5px transparentize($brand-color, 0.5);
			i { background: $brand-color; }
		}
	}
	&.pending {
		.feature-heading { font-size: 25px; margin: 0 0 10px; }
		p.loud, p.highlight { font-size: 15px; }
	}
}