.blueSquareBorder_content
{
	background-color: White;
	float: left;
}

/* This css border uses a single image and slices it by position. Also known as spriting 
   (Using a Sprite in CSS)
   The reasoning behind this is it optimizes the image download greatly by downloading
   only one image instead of many.
 */

.blueSquareBorder_top-left
{
	background: url(../../Images/Panels/blue-square/blue-square_sprite.png) 0 -183px no-repeat; 
	height: 21px;
	width: 21px;
	font-size: 2px;
	float: left;
}

.blueSquareBorder_top-right
{
	background: url(../../Images/Panels/blue-square/blue-square_sprite.png) 0 -234px no-repeat; 
	height: 21px;
	width: 21px;
	float: right;
	
	font-size: 2px;
}

.blueSquareBorder_bottom-left
{
	background: url(../../Images/Panels/blue-square/blue-square_sprite.png) 0 -30px no-repeat; 
	height: 21px;
	width: 21px;
	float: left;
}

.blueSquareBorder_bottom-right
{
	background: url(../../Images/Panels/blue-square/blue-square_sprite.png) 0 -81px no-repeat; 
	height: 21px;
	width: 21px;
	float: right;
}

.blueSquareBorder_top
{
	background: url(../../Images/Panels/blue-square/blue-square_sprite.png) 0 -285px repeat-x; 
	height: 21px;
	width: 21px;
	float: left;
}

.blueSquareBorder_bottom
{
	background: url(../../Images/Panels/blue-square/blue-square_sprite.png) 0 -132px repeat-x; 
	height: 21px;
	width: 21px;
	float: left;
}

.blueSquareBorder_left
{
	background-image: url(../../Images/Panels/blue-square/blue-square_left.png);
	background-repeat:repeat-y; 
	width: 21px;
	float: left;
}

.blueSquareBorder_right
{
	background-image: url(../../Images/Panels/blue-square/blue-square_right.png);
	background-repeat:repeat-y; 
	width: 21px;
	float: right;
}