﻿/* Use it like this
	<div class="Corners Grey">
		<b class="CornersTop"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
		<div class="CornersContent">
			<div class="CornersContentInner">
				My content
			</div>
		</div>
		<b class="CornersBottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b><b class="b0"></b></b>
	</div>
Current classes:
	Gradient
	White
	Testimonial
*/
div.Corners {
	margin-bottom: 1em;
/*	position: relative; */
}

b.CornersTop, 
b.CornersBottom {
	background: transparent;
	display: block;
	font-size: 1px;
/*	position: relative; */
}

div.CornersContent {
	display: block;
}

/* Colors */
b.CornersTop b.b1 {
	background: #C0C0BB;
}

b.CornersTop b.b2 {
	border-left: 1px solid #C0C0BB;
	border-right: 1px solid #C0C0BB;
}

b.CornersTop b.b3 {
	border-left: 1px solid #C0C0BB;
	border-right: 1px solid #B0B0AE;
}

b.CornersTop b.b4 {
	border-left: 1px solid #C0C0BB;
	border-right: 1px solid #B0B0AE;
}

b.CornersBottom b.b0 {
	background-color: #D4D4D2;
}

b.CornersBottom b.b1 {
	background-color: #B0B0AE;
}

b.CornersBottom b.b2 {
	border-left: 1px solid #C0C0BB;
	border-right: 2px solid #B0B0AE;
}
b.CornersBottom b.b3 {
	border-left: 1px solid #C0C0BB;
	border-right: 2px solid #B0B0AE;
}

b.CornersBottom b.b4 {
	border-left: 1px solid #C0C0BB;
	border-right: 2px solid #B0B0AE;
}

div.CornersContent {
	background-color: #B0B0AE;
	border-left: 1px solid #C0C0BB;
	border-right: 1px solid #D4D4D2;
	padding-right: 1px;
}

/* Grayish */
div.Grayish div.CornersContentInner {
	background-color: #CCC;
	background-image: url("images/corner_bgr.gif");
	background-position: bottom;
	background-repeat: repeat-x;
	padding: 0.7em 1em 0.7em 1em;
}
div.Grayish b.CornersTop b.b2,
div.Grayish b.CornersTop b.b3,
div.Grayish b.CornersTop b.b4 {
	background-color: #E2E2E2;
}

div.Grayish b.CornersBottom b.b2,
div.Grayish b.CornersBottom b.b3,
div.Grayish b.CornersBottom b.b4 {
	background-color: #878787;
}


/* Gradient */
div.Gradient div.CornersContentInner {
	background-color: #F3F3EE;
	background-image: url("images/corner_bgr.gif");
	background-position: bottom;
	background-repeat: repeat-x;
	padding: 0.7em 1em 0.7em 1em;
}
div.Gradient b.CornersTop b.b2,
div.Gradient b.CornersTop b.b3,
div.Gradient b.CornersTop b.b4 {
	background-color: #F3F3EE;
}

div.Gradient b.CornersBottom b.b2,
div.Gradient b.CornersBottom b.b3,
div.Gradient b.CornersBottom b.b4 {
	background-color: #E6E8E1;
}
/* Gradient */



/* White */
div.White div.CornersContentInner {
	padding: 0.5em;
	 
}
div.White div.CornersContentInner,
div.White b.b2,
div.White b.b3,
div.White b.b4 {
	background-color: #FFFFFF !important;
	background-image: none !important; 
}

/* DarkGrey */
div.DarkGrey div.CornersContentInner {
	background-color: #999;
	background-image: url("images/corner_bgr.gif");
	background-position: bottom;
	background-repeat: repeat-x;
	padding: 0.7em 1em 0.7em 1em;
}
div.DarkGrey b.CornersTop b.b2,
div.DarkGrey b.CornersTop b.b3,
div.DarkGrey b.CornersTop b.b4 {
	background-color: #E2E2E2;
}

div.DarkGrey b.CornersBottom b.b2,
div.DarkGrey b.CornersBottom b.b3,
div.DarkGrey b.CornersBottom b.b4 {
	background-color: #878787;
}
/* DarkGrey */

/* Grey*/
div.Grey div.CornersContentInner {
	padding: 0.5em;
}

div.Grey div.CornersContentInner,
div.Grey b.b2,
div.Grey b.b3,
div.Grey b.b4 {
	background-color: #DDDDDD !important;
	background-image: none !important; 
}

/* Testimonial */
div.Testimonial div.CornersContentInner {
	padding: 0.5em;
}

div.Testimonial div.CornersContentInner,
div.Testimonial b.b2,
div.Testimonial b.b3,
div.Testimonial b.b4 {
	background-color: #E1E1DD;
}

/* Corner size b1 is outer horisontal line b4 is inner horisontal line */
div.Corners b.b0, 
div.Corners b.b1, 
div.Corners b.b2, 
div.Corners b.b3, 
div.Corners b.b4 {
	display: block;
	overflow: hidden;
}

div.Corners b.b0 {
	height: 1px;
	margin: 0 7px;
}

div.Corners b.b1 {
	height: 1px;
	margin: 0 5px;
}

div.Corners b.b2 {
	border-width: 0 2px;
	height: 1px;
	margin: 0 3px;
}

div.Corners b.b3 {
	height: 1px;
	margin: 0 2px;
}

div.Corners b.b4 {
	height: 2px;
	margin: 0 1px;
}

div.ImagesRelative img
{
	position:relative;
}