/*** right column Full width box.
Change the colors to suit. The standard box has a white background, and the
box2 has a colored background ***

IE has difficulty with dashed and dotted. Dotted will show as dashed, and dashed can be dodgy anyway. 
So you are far better to use the solid property, as I have done here. At least you know you will get the same display in
every browser. Maybe Microsoft will produce a decent standards compliant browser ones day...but I doubt it*/


div.full-width-box-light-grey {
   background-color: #e9e9e9;
	margin: 10px 0px 10px 0px;
	padding: 15px;
   border: 1px solid #000066;
	
}


div.full-width-box {
   background-color: #e1e1c6;
	margin: 15px 0px 10px 0px;
	padding: 15px;
   border: 1px solid #000066;
	
}
	
/*** right column Half of width box left ***/
div.half-width-box-left {
   background-color: #ffffff;
	margin: 3px;
	border: 1px solid #000066;
	padding: 10px;
	width: 50%;
	float: left;
	
}
/*** right column Half of width box right ***/
div.half-width-box-right {
   background-color: #ffffff;
	margin: 3px;
	border: 1px solid #000066;
	padding: 10px;
	width: 50%;
	float: right;
	
}



/* the border of the image inside your half width textbox can be changed.
Its set to #5F8B8C at the moment. You can also change the solid
to either dashed or dotted if you want to*/

/*** Picture inside the text ***/
.img-float-left {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: 2px solid #000066;
}

.img-float-left-no-border {
	float: left;
	padding: 2px;
	margin-right: 5px;
}

.img-float-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 2px solid #000066;
}

.img-float-right-no-border {
	float: right;
	padding: 2px;
	margin-left: 5px;
}

.bggrey {
	background: #e9e9e9;
}

.bggreyer {
	background: #e1e1c6;
}

/*** Clearing of a float ***/
div.clear {
	clear: both;
	width: 100%;
	height: 1px;
}