#content {
	background:#000 url(../../images/pagespecific/default/content-bg.jpg) center bottom no-repeat;
	padding:0;
	min-height:502px;
}



#content .hero {
	background: url("../../images/pagespecific/default/Hero_empty_bg.jpg") no-repeat scroll 0 0 transparent;
    margin-bottom: 24px;
    min-height: 278px;
    padding-left: 360px;
    padding-right: 256px;
    padding-top: 40px;
    position: relative;
}
#content .hero .button {
	bottom: 40px;
    left: 388px;
    position: absolute;
}
#content .hero .button a {
	display: block;
    height: 57px;
    text-indent: -9999px;
    width: 247px;
}

#content .hero .button-video {
	bottom: 64px;
    left: 691px;
    position: absolute;
}
#content .hero .button-video a {
	display: block;
    height: 208px;
    text-indent: -9999px;
    width: 180px;
}


#content .hero h2 {
	color: #FFFFFF;
    height: 64px;
    text-indent: -9999em;
    width: 322px;
    margin-bottom:0;
}
#content .hero p {
	color: #FFFFFF;
    padding: 0 0 0 9px;
    text-indent:-5553px;
}


#content .row {
	clear:both;
	overflow:hidden;
	margin-bottom:10px;
}

#content .features {
	overflow:hidden;
}

/* feature sizes */

	/* Full Width "size-1" */
	#content .size-1 {
		background:skyblue;
		width:945px;
		margin:0 10px;
		min-height:192px;
	}

	/* Half Width "size-2" */
	#content .size-2 {
		background:skyblue;
		width:468px;
		float:left;
		margin-left:10px;
		min-height:192px;
	}
	#content .size-2-b /*this is a margin modifier to fix the width, as you can't have 0.5px*/{
		margin-left:9px;
	}

	/* One Thirds width "size-333" */
	#content .size-333 {
		width:308px;
		float:left;
		margin-left:10px;
		min-height:192px;
	}
	
	
	/* Two Thirds width "size-3", used in conjuntion with "size-4" */
	#content .size-3 {
		background:skyblue;
		width:707px;
		float:left;
		margin-left:10px;
		min-height:192px;
	}
	
	/* Quarter Width "size-4" */
	#content .size-4 {
		background:skyblue;
		width:229px;
		float:left;
		margin-left:10px;
		min-height:192px;
	}
	#content .size-4-b /*this is a margin modifier to fix the width, as you can't have 0.5px*/{
		margin-left:9px;
	}
	
	/* Eighth Width "size-8" */
	#content .size-8 {
		background:skyblue;
		width:110px;
		float:left;
		margin-left:10px;
		min-height:192px;
	}
	#content .size-8-b {
		margin-left:9px;
	}
	#content .size-8-c {
		margin-left:8px;
	}


#content .size-333 .feature-top {
	background:url(../../images/pagespecific/default/feature-top.png) 0 0 no-repeat;
	height:4px;
}

#content .size-333 .feature-rep {
	background:url(../../images/pagespecific/default/feature-bg.png) left bottom no-repeat;
	overflow:hidden;
	padding:4px 2px 40px 0px;
	position:relative;
	min-height:180px;
}

#content .sport .feature-rep {
	background:url(../../images/pagespecific/default/feature-bg-sport.png) left bottom no-repeat;
}
#content .sport .feature-top {
	background:url(../../images/pagespecific/default/feature-top-sport.png) left bottom no-repeat;
}
#content .sport .feature-rep div.image a {
	display:block;
	width:108px;
	height:168px;
}

#content .size-333 .feature-rep .image {
	float:left;
	width:128px;
	padding-left:21px;
	padding-bottom:12px;
}

#content .size-333 .feature-rep .copy {
	float:left;
	width:138px;
	margin-left:12px;
}


#content .size-333 .feature-rep h3 {
	color:#54a4ca;
	font-size:1.42em;
	text-transform:uppercase;
	margin-top:12px;
	margin-bottom:5px;
}

#content .size-333 .feature-rep p {
	color:#fff;
	font-size:1.2em;
}

#content .size-333 p.button {
	position:absolute;
	bottom:41px;
	right:17px;
}

#content .size-333 p.button a {
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	background:url(../../images/pagespecific/default/feature-arrow.png) right no-repeat;
	padding-right:22px;
}
#content .size-333 p.button a:hover {
	text-decoration:underline;
}