Template:Layoutbox/styles.css

.layout-box-wrapper {
	background:#f6f6f6;
	border:1px solid #ccc;
}

.layout-box-section {
	background:#eee;
    font-weight:700; 
    padding:.5em;
}

.layout-box-section-1 {
    border-bottom:1px solid #ccc;
}

.layout-box-section-2 {
    border-top:1px solid #ccc;
}

/* DESTRUCTIVE STYLES */
.layout-box-wrapper.destructive {
	background:#faeded;
	border:1px solid #fa7d7d;
}

.layout-box-wrapper.destructive .layout-box-section {
	background:#fac8c8;
}

.layout-box-wrapper.destructive .layout-box-section-1 {
    border-bottom:1px solid #fa7d7d;
}

.layout-box-wrapper.destructive .layout-box-section-2 {
    border-top:1px solid #fa7d7d;
}

/* HESITATIVE STYLES */
.layout-box-wrapper.hesitative {
	background:#faf6ed;
	border:1px solid #fad67d;
}

.layout-box-wrapper.hesitative .layout-box-section {
	background:#faecc8;
}

.layout-box-wrapper.hesitative .layout-box-section-1 {
    border-bottom:1px solid #fad67d;
}

.layout-box-wrapper.hesitative .layout-box-section-2 {
    border-top:1px solid #fad67d;
}

/* PROGRESSIVE STYLES */
.layout-box-wrapper.progressive {
	background:#f1f5fc;
	border:1px solid #abd5f5;
}

.layout-box-wrapper.progressive .layout-box-section {
	background:#d0e5f5;
}

.layout-box-wrapper.progressive .layout-box-section-1 {
    border-bottom:1px solid #abd5f5;
}

.layout-box-wrapper.progressive .layout-box-section-2 {
    border-top:1px solid #abd5f5;
}

/* SUCCESSIVE STYLES */
.layout-box-wrapper.successive {
	background:#f2fcf1;
	border:1px solid #abf5b7;
}

.layout-box-wrapper.successive .layout-box-section {
	background:#daf5d0;
}

.layout-box-wrapper.successive .layout-box-section-1 {
    border-bottom:1px solid #abf5b7;
}

.layout-box-wrapper.successive .layout-box-section-2 {
    border-top:1px solid #abf5b7;
}