/* Rohan Carousel */
* { margin: 0; padding: 0;}

h3 { font-size: 16px; margin-bottom: 5px;}

#main-container {
	width: 100%;
}

#content { 	
	margin: 0 auto;
	width: 500px;

	font-family: Arial, sans-serif;
}

.box, .box-2, .box-3, .box-4 { 
	width: 500px;
	height: auto;
	clear: both;
	overflow: hidden;
	margin-bottom: 30px;
}

.clear { clear: both; overflow: hidden; height: auto;}

.box .content { height: auto; clear: both; overflow: hidden; margin-bottom: 20px; background: red;}
.box .content img { float: left; margin-right: 10px;}
.box .content p { float: right; width: 430px;}

.box-2 .content { background: orange;}
	.box-2 .content .image { float: left; text-align: center; width: 40px; height: auto; 
	line-height: 200px; font-size: 60px; font-weight: bold; background: red;}
	.box-2 .content .copy { float: right; width: 450px;}

.box-3 .content { background: blue; color: #FFF;}
	.box-3 .content .image { display: inline; width: 40px; height: 40px; line-height: 200px; background: red;}
	.box-3 .content .copy { float: right; width: 450px;}

/* Final version: Use this for cross browser compatbility. IE7-6 needs specific height for the image. */
.box-4 .content { background: blue; color: #FFF;}
	.box-4 .content .image { display: table-cell; text-align: center; vertical-align: middle; width: 60px; height: 100px; font-size: 60px; font-weight: bold;}
	.box-4 .content .image * { vertical-align: middle;}
	.box-4 .content .copy { display: table-cell; text-align: left; width: 450px;}