var borderBox = function(){
	var elementList = document.getElementsByClassName("contentBox");
	for (var i=0; i<elementList.length; i++){
		var obj = elementList[i];
		var content = obj.innerHTML;
		
		//don't do it twice!
		if (content.indexOf("leftSide") == -1) {
		
			//Top divs and the start of the middle divs
			var divLeft = document.createElement('div');
			divLeft.className = 'leftSide';
			
			var divRight = document.createElement('div');
			divRight.className = 'rightSide';
			
			var topLeft = document.createElement('div');
			topLeft.className = 'topLeft';
			
			var topRight = document.createElement('div');
			topRight.className = 'topRight';
			
			var bottomLeft = document.createElement('div');
			bottomLeft.className = 'bottomLeft';
			
			var bottomRight = document.createElement('div');
			bottomRight.className = 'bottomRight';
			
			var childNodes = obj.childNodes;
			var children = [];
			$A(childNodes).each(function(node) {
				children.push(obj.removeChild(node));
			});
			
			obj.appendChild(divLeft);
			
			divLeft.appendChild(divRight);
			divRight.appendChild(topLeft);
			topLeft.appendChild(topRight);
			
			$A(children).each(function(el) { divRight.appendChild(el); });
			
			divRight.appendChild(bottomLeft);
			bottomLeft.appendChild(bottomRight);			
			
			// don't rewrite obj.innerHTML because it breaks the [media] tag in IE
//			obj.innerHTML = 
//							"<div class='leftSide'><div class='rightSide'>" //borders for left and right
//							+ "<div class='topLeft'><div class='topRight'></div></div>"
//	
//							+ obj.innerHTML +
//							"<div class='bottomLeft'><div class='bottomRight'></div></div>"
//						   + "</div></div>";
					   
		}
	}
}