#homeContainer
{
	width: 100%;
	background: url('/images/homepage/bg/2011q4-day.jpg') no-repeat top center;
	background-color: #000;
}
#homeContainer.dawn
{
	background: url('/images/homepage/bg/2011q4-dawn.jpg') no-repeat top center;
}
#homeContainer.day
{
	background: url('/images/homepage/bg/2011q4-day.jpg') no-repeat top center;
}
#homeContainer.dusk
{
	background: url('/images/homepage/bg/2011q4-dusk.jpg') no-repeat top center;
}
#homeContainer.night
{
	background: url('/images/homepage/bg/2011q4-night.jpg') no-repeat top center;
}
	#homeContent
	{
		width: 942px;
		margin: 0px auto;
		position: relative;
		overflow: hidden;
	}
		#homeContent #topBar
		{
			width: 942px;
			height: 59px;
		}	
			#homeContent h1
			{
				margin: 10px 0px 0px 0px;
				background: url('/images/homepage/homepage-title.gif') no-repeat top left;
				width: 564px;
				height: 49px;
				float: left;
			}
				#homeContent h1 span
				/*#homeContent a span*/
				{
					display: none; 
				}
			#homeContent #topBar ul
			{
				height: 10px;
				float: right;
				margin: 30px 0px 0px 0px;
				/*padding: 10px 0 10px 10px;*/				
				overflow: hidden;				
			}
				#homeContent #topBar ul li
				{
					padding: 0px;
					float: left;
					list-style-type: none;
				}
					#homeContent #topBar ul li a
					{
						display: block;
						background: url('/images/homepage/li-circle.gif') no-repeat top left;
						height: 10px;
						width: 10px;
						margin: 0px 10px 0px 0px;
						outline: none;
					}
						#homeContent #topBar ul li a:hover,
						#homeContent #topBar ul li a.active
						{
							background-position: 0px -10px;
						}

			#homeContent #slidePanel
			{
				width: 942px;
				/*height: 300px;*/
				overflow:hidden;
				position: relative;
				margin-top: 10px;
			}
				#homeContent .panel,
				#cover
				{
					width: 920px;
					height: 298px;
					background: #f1f1f1 url('/images/homepage/bg/panel-bg-gradiant.jpg') repeat-x top left;
					padding-left: 20px;
					border: 1px solid #d5d5d5;
					/*position: absolute;
					left: 0px;
					top: 0px;*/
					overflow: visible;
					/* this fixes a bug in IE that causes artefacts to appear with fade effects */
					/*background: url('/images/homepage/bg/2011q4-day-fix.jpg') no-repeat top left;*/
				}
				
				#homeContent #panel1
				{
					background: #000 url('/images/homepage/freefuel-promo.jpg') no-repeat top left;
				}
						#homeContent #panel1 .contentPanel h2
						{
							text-align: center;
						}
						
					
				
				#homeContent #panel3
				{
					background: #000 url('/images/homepage/black-promo.jpg') no-repeat top left;
				}
					#homeContent #panel3 a#linkBlackASX
					{
						position: absolute;
						top: 240px;
						left: 150px;
					}
					#homeContent #panel3 a#linkBlackShogun
					{
						position: absolute;
						top: 240px;
						left: 410px;
					}
				/*#homeContainer.dawn #homeContent .panel,
				#homeContainer.dawn #cover
				{
					background: url('/images/homepage/bg/2011q4-dawn-fix.jpg') no-repeat top left;
				}
				#homeContainer.day #homeContent .panel,
				#homeContainer.day #cover
				{
					background: url('/images/homepage/bg/2011q4-day-fix.jpg') no-repeat top left;
				}
				#homeContainer.dusk #homeContent .panel,
				#homeContainer.dusk #cover
				{
					background: url('/images/homepage/bg/2011q4-dusk-fix.jpg') no-repeat top left;
				}
				#homeContainer.night #homeContent .panel,
				#homeContainer.night #cover
				{
					background: url('/images/homepage/bg/2011q4-night-fix.jpg') no-repeat top left;
				}*/
				
					
					#homeContent .panelContent
					{
						width: 350px;
						float: right;
						margin: 0px 40px 0px 0px;
						display: inline;
					}
					
						#panel1 .panelContent /* different page layout for Black promo */
						{
							float: left;
							width: 900px;
							padding: 130px 0 0 0;
							text-align: center;
						}	
						
							#linkFreeFuelInfo
							{
								position: absolute;
								top: 224px;
								left: 377px;
							}
							#homeContent .panelContent h2
							{
								font-size: 16px;
								text-transform: uppercase;
								font-weight: bold;
								margin: 50px 0px 0px 0px;
							}

							#homeContent .panelContent h2 span
							{
								text-transform: lowercase;
							}
						#homeContent #panel2 h2 { color: #037586; font-size:20px; }	
						#homeContent #panel3 h2 { color: #bd0101; }
						#homeContent #panel4 h2 { color: #037586; font-size: 18px; margin-top: 30px;}
						#homeContent #panel5 h2 { color: #037586; }
						#homeContent #panel1 h2 { color: #fff; }
						#homeContent #panel21 p#smltxt
						{
							font-size: 10px;
							margin: 20px 0px 0px 0px;
						}
						#homeContent .panelContent p
						{
							font-size: 12px;
							font-weight: bold;
							color: #7e7e7e;
							margin: 10px 0px 0px 0px;
						}

						#homeContent #panel2 .imgImiev,
						#homeContent #panel3 .imgAsx,
						#homeContent #panel4 .imgSo,
						#homeContent #panel5 .imgIm,
						#homeContent #panel6 .imgColt,
						#homeContent #panel1 .ASX2
						{
							margin: 30px 0px 0px 20px;
							float:left;
							/*width: 520px;
							height: 265px;*/
						}

						
						#homeContent .quickLinkHomepage
						{
							display: block;
							width: 184px;
							height: 29px;
							margin-top: 12px;
						}
						
						#homeContent .quickLinkHomepage span
						{
							display: none;
						}	

		#promoBoxes
		{
			width: 942px;
			height: 110px;
			margin: 20px auto 20px auto;
			position: relative;
			overflow: hidden;
			position: relative;
		}
			#scrollingArea
			{
				width: 904px;
				height: 110px;
				position: relative;
				margin: 0px 0px 0px 20px;
				overflow: hidden;
			}
				#promoBlocks
				{
					width: 930px;
					height: 110px;
					position: absolute;
					left: 0px;
					top: 0px;
					overflow: hidden;
				}
					#promoBlocks li
					{
						list-style: none;
						position: absolute;
						top: 0px;
						left: 0px;
						display: none;
					}
					#homeContainer #promoBoxes a.promoBox
					{
						width: 288px;
						height: 110px;
						display: inline;
						float: left;
						background-color: #f4f4f4;
						margin: 0px 20px 0px 0px;
						cursor: pointer;
					}
						#homeContainer #promoBoxes .promoBox span
						{
							width: 288px;
							height: 110px;
							overflow: hidden;
							display: block;
						}
			#promoBoxes .scrollPromoButton
			{
				height: 22px;
				overflow: hidden;
				position: absolute;
				top: 45%;
				outline: none;
			}
			#prev { left: 2px; }
			#next { right: 0px; }

		#promoLinks
		{
			width: 942px;
			height: 190px;
			padding: 10px 0px 30px 15px;
			/*border-top: 1px solid #7e7e7e;*/
			margin: auto auto;
		}
			#promoLinks .list
			{
				width: 195px;
				padding: 5px 5px 5px 10px;
				display: inline;
				float: left;
				height: 190px;
				display: block;
				margin: 0px 10px 0px 10px;
				border: 1px solid #d0d0d0;
				background: #fff;
			}
				#promoLinks h3
				{
					color: #7e7e73;
					text-transform: uppercase;
					font-size: 15px;
					font-weight: bold;
					margin: 0px 0px 10px 0px;
				}
					#promoLinks h3 a
					{
						color: #7e7e73;
						font-size: 15px;
						font-weight: bold;
					}
					#promoLinks h3 span
					{
						color: #920000;
						text-transform: uppercase;
						font-size: 18px;
						font-weight: bold;
					}
				#promoLinks ul
				{
					list-style-type: none;
				}
						#promoLinks li a
						{
							background: url('/images/homepage/li-triangle.gif') no-repeat 0px 2px;
							font-size: 12px;
							color: #7e7e7e;
							padding: 0px 0px 0px 15px;
							margin: 0px 0px 5px 0px;
						}
							#promoLinks li a:hover
							{
								text-decoration: underline;
							}
							
/* ASX2 Offer Homepage Design */
#panel1 li
{
	margin-left:13px;
}
.asx2spec 
{
	margin:9px 0 5px 0;
	float:left;
	color:#373737;
}
.asx2spec ul
{

	font-size:12px;
	list-style:square;
	margin-left:5px;
}

.asx2spec li
{
	margin-left: 13px;
}

#asx2Container 
{
	/*background:#6f0;*/
} 

/* AFTERSALES Homepage Design */
#panel1 li
{
	margin-left:13px;
}
.aftersales 
{
	width:100%;
	margin:9px 0 5px 0;
	float:left;
	color:#373737;
}
.aftersales ul
{

	font-size:12px;
	list-style:square;
	margin-left:5px;
}

.aftersales li
{
	margin-left: 13px;
}

/* Social Media Sharing Links */

#shareFacebook,
#shareTwitter
{
	display: block;
}

	#shareFacebook
	{
		top: 111px;
		right: 255px;
		
	}

	#shareTwitter
	{
		top: 111px;
		right: 145px;
		
	}
