.sly-sprite-addon       { background-position: 0 -32px;     }
.sly-sprite-addon-child { background-position: -32px -32px; }

.sly-addonlist {
	list-style: none;

	.sly-addon, .sly-addon-child, .error {
		margin-top: 10px;
		position: relative;
		z-index: 1;
	}

	.details {
		.border-radius(4px);
		padding: 6px;
	}

	.details, .children {
		.clearfix;

		li {
			list-style: none;
		}
	}

	.name h2 {
		color: #4D4646;
		line-height: 26px;
		font-size: 1.4em;
		letter-spacing: -.01em;
		text-shadow: 1px 1px 0px rgba(255,255,255,.8);
	}

	.name { float: left; }

	.children {
		margin-left: 40px;

		h2 {
			margin-bottom: 0;
			font-size: 17px;
			line-height: 20px;
		}

		.buttons {
			height: 20px;
			line-height: 20px;
		}
	}

	.sly-button {
		margin-left: 10px;
		display: inline;
	}

	del.sly-button {
		color: inherit;
		text-decoration: line-through;
		cursor: default;
		height: 20px;
		opacity: 0.4;
	}

	.buttons {
		float: right;
		height: 26px;
		line-height: 26px;
	}

	.depsinfo {
		clear: right;
		float: none;
		font-size: 11px;
		height: 18px;
		line-height: 18px;
	}

	.version {
		float: left;
		overflow: hidden;
	}

	.deps {
		float: right;

		span {
			cursor: help;
			border-bottom: 1px dotted @md_grey;
		}
	}

	/* status map */

	/*
	a   is activated
	i   is installed
	c   is compatible
	ch  has children
	ca  has active children
	d   has dependencies (is required)
	r   has requirements
	ro  requirements are OK (all required addOns are available)
	u   usable (addOn exists, is compatible and has only usable requirements)

	Append '0' to the letters above to get the 'false' class and 1 for the 'true' class.
	*/

	/* reset */
	.buttons > span {
		display: none;
	}

	.buttons.depsinfo > span {
		display: inline;
	}

	.u0.c1           > .details .unusable     { display: inline; }
	.u0.c0           > .details .incompatible { display: inline; }
	.u1.c1.i0.ro1    > .details .install      { display: inline; }
	.u1.c1.i0.ro0    > .details .fullinstall  { display: inline; }
	.u1.c1.i1.a0.ro0 > .details .fullactivate { display: inline; }
	.i1              > .details .reinstall    { display: inline; }
	.i1.d0           > .details .uninstall    { display: inline; }
	.i1.a0.ro1       > .details .activate     { display: inline; }
	.i1.a1.d0        > .details .deactivate   { display: inline; }
	.i1.a1.d1        > .details .hasdeps      { display: inline; }
	.i1              > .details .reinit       { display: inline; }

	/* hide all controls for addOns which have non-active parents */
	.sly-pkg.a0 .sly-pkg-child .details {
		.install, .fullinstall, .activate {
			display: none !important;
		}
	}

	.sly-pkg.i0 .sly-pkg-child.i0 {
		display: none !important;
	}

	/* hide all controls if an addOn is not compatible and was forcefully disabled */
	.i1.a0.c0, .i1.a0.ro0.u0 {
		.reinit, .reinstall, .uninstall, .activate {
			display: none !important;
		}
	}

	/* color map */

	.i0 > .details {
		background-color: #DDD;
		color: #8D8686;

		.sly-button {
			border-color: #B7B7B7;

			&:active {
				border-color: #8A8A8A;
			}
		}
	}

	.i1.a1 > .details {
		background-color: #FFF;
		color: #4D4646;
	}

	.i1.a0 > .details {
		background-color: #E6E6E6;
		color: #8D8686;

		h2 {
			color: #8D8686;
		}

		.sly-button {
			border-color: #C0C0C0;

			&:active {
				border-color: #939393;
			}
		}
	}

	/* loading indicator */

	.blocker {
		position: absolute;
		left: 0;
		right: -22px;
		top: 0;
		z-index: 2;
	}

	.sly-addon > .blocker       { height: 56px; }
	.sly-addon-child > .blocker { height: 48px; }

	.working > .blocker {
		background: url(../loading.gif) right center no-repeat;
	}

	/* error message */

	.error {
		display: none;

		.sly-message {
			border: 0 none;
		}
	}
}

.sly-addon-help {
	dt {
		width: 100px;
		float: left;
	}

	dd {
		margin-left: 100px;
	}
}
