@import "../ripe/all";

* {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}

body {
	margin: 30px;
}

.box {
	width: 400px;
	margin: 50px 0;
}

.clearfix {
	.clearfix;
}

.left {
	.left;
}

.right {
	.right;
}

.text-left {
	.text-left;
}

.text-right {
	.text-right;
}

.text-center {
	.text-center;
}

.border {
	.border(#ccc, 3px);
}

.gradient {
	.gradient(red, blue);
}

.background-opacity {
	.gradient(rgba(0, 0, 0, .5));
}

.size1 {
	.text-size(30px, 1);
}

.size2 {
	.text-size(30px, 2);
}

.square {
	.size(100px);
}

.shadow {
	.shadow();
}

.inset-shadow {
	.inset-shadow();
}

.color {
	.color;
}

.color-reverse {
	.color-reverse;
}

.opacity {
	.opacity(0.5);
}

.text-overflow {
	.text-overflow;
}

.line-limit-1 {
	.text-line(1em);
}

.line-limit-2 {
	.text-line(1em, 2);
}

.content {
	height: 100px;
	border: 1px solid #ccc;
	.color-reverse;
}

.col-loop(11, 12);

.col {
	float: left;
}

.center {
	.center;
}

.middle {
	line-height: 40px;
	.middle(40px);
}

.transition {
	.transition;
}