/********************************************************************

	ACCORD MICROSITE - site.css
	-----------------------------
	author: zak nitsch - zaknitsch@griplimited.com
	date: august 28, 2012
	updated: october 11, 2012
	
	INDEX
	-----------------------------------------
	- LINKS
	- BODY
	- WRAPPER
	- CONTAINER
	- ARTICLE
	- SECTIONS


********************************************************************/

@import url('reset.css');

.right {
	float: right;
}

.left {
	float: left;
}

.hide {
	display: none;
}

p span {
	width: 100%;
}

/*---- $LINKS ----------------------------------------*/

	/* fake links to avoid screwing with screen readers */

	.link:hover,
	article.main:hover {
		cursor: pointer;
	}

/*---- $BODY ----------------------------------------*/
	
	body {
		width: 100%;
		background: lightgrey;
		font-size: 13px;
		/*font-family: 'National-Light', Verdana, sans-serif;*/
		font-family: Verdana, sans-serif;
		font-weight: lighter;
		color: #ffffff;
	}

/*---- $WRAPPER ----------------------------------------*/

	#wrapper {
		margin: 0 auto;
		width: 980px;
	}

	.section-wrapper {
		overflow: auto;
		position: relative;
		width: 980px;
		height: 400px;
		outline: none;
	}
	
	.jspPane {
		z-index: 5;
	}
	
	.jspContainer {
		height: 415px !important;
	}
	
/*---- $HEADER ----------------------------------------*/
	
	header {
		background-color: white;
		margin: 1em auto 0 auto;
	}

	header h2 {
		font-weight: bold;
		font-size: 150%;
		padding: 0.3em;
		background: #767f82;
		color: #FFFFFF;
	}

/*---- $CONTROLS ----------------------------------------*/

	.control {
		background: red;
		height: 100%;
		width: 250px;
		position: absolute;
		z-index: 5;
	}

	.left-control {
		left: 0;
		top: 0;
	}

	.right-control {
		left: 730px;
		top: 0;
	}
	
	.jspHorizontalBar {
		left: 15px;
		z-index: 1;
	}
	
	.prev {
		background: url(../images/btn_prev.png) 0 0 no-repeat;
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 15px;
		height: 16px;
		text-indent: -99999px;
		cursor: pointer;
	}
	
	.next {
		background: url(../images/btn_next.png) 0 0 no-repeat;
		position: absolute;
		right: 0;
		top: 1px;
		display: block;
		width: 15px;
		height: 16px;
		text-indent: -99999px;
		cursor: pointer;
	}
	
	.jspHorizontalBar .jspArrow {
		visibility: hidden;
	}
	
	.jspHorizontalBar .jspTrack {
		background: url(../images/track.png) 0 1px repeat-x;
	}
	
	.section-wrapper .jspHorizontalBar {
		background: #000;
	}
	
	.jspHorizontalBar .jspDrag {
		background: url(../images/drag.png) 0 1px repeat-x;
		border-radius: 10px;
	}

	/* vertical bars */

	.section-wrapper .jspVerticalBar {
		background: transparent;
	}

	.jspVerticalBar .jspTrack {
		background: url(../images/vtrack.png) 1px 0 repeat-y;
	}

	.jspVerticalBar .jspDrag {
		background: url(../images/vdrag.png) 0 1px repeat-y;
		border-radius: 10px;
	}

/*---- $CONTAINER ----------------------------------------*/
	
	section {
		background: grey;
		height: 400px;
		position: relative;
	}

	.section-wrapper article {
		float: left;
	}
	
	.section-wrapper .mCSB_horizontal.mCustomScrollBox .mCSB_scrollTools {
		bottom: 4px;
	}
	
/*---- $ARTICLE ----------------------------------------*/

	article {
		width: 980px;
		height: 400px;
		background: #FFFFFF;
		color: #444f4f;
		overflow: hidden;
	}

	article h3 {
		font-size: 45px;
		font-family: 'National-Thin', Verdana, sans-serif;
		line-height: 80%;
		position: relative;
	}

		article.main h3 {
			letter-spacing: -2px;
		}

	article p {
		padding: 4px;
		letter-spacing: -1px;
	}

	article.alt,
	article .alt {
		background: #546984;
		color: #FFFFFF;
	}

	article.video {
		background: #000000;
		position: relative;
	}

		.video-container {
			height: 400px;
			width: 980px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

	article img {
		display: block;
	}

	iframe {
		display: block;
		margin: 0 auto;
	}

	/* $Round Button */

	.round-btn {
		border-radius: 50%;
		-webkit-border-radius: 50px;
		height: 100px;
		width: 100px;
		background: #929698;
		color: #ffffff;
		text-align: center;
		position: absolute;		
	}

		.round-btn:hover,
		article.main:hover .round-btn {
			background: #ffffff;
			color: #444f4f;
		}

	.round-btn:hover p,
	article.main:hover .round-btn p {
		background: url('../images/arrow_grey.png') no-repeat 45px 38px;	
	}
		.round-btn p {
			margin-top: 35px;
			height: 100%;
			width: auto;
			font-size: 16px;
			background: url('../images/arrow.png') no-repeat 45px 38px;
		}

	/* $More */

	.more {
		position: absolute;
		color: #ffffff;
		top: 310px;
		left: 880px;
		height: 50px;
	}
		.more p {
			background-position: 25px 30px;
			height: 100%;
		}

	/* $Half Divs */

	article div.half {
		width: 50%;
		height: 400px;
		position: relative;
	}
		article div.half:first-child {
			float: left;
		}

		article div.half:last-child {
			float: right;
		}

		article div.v-half {
			height: 200px;
		}

	.img-desc {
		position: absolute;
		font-size: 13px;
		color: #ffffff;
		top: 360px;
	}

	/* $Text-Box */

	.text-box p span.expand {
		position: absolute;
		left: 340px;
	}

	.text-box h5 {
		font-weight: bold;
		padding: 0 0 0 50px;
	}

	.text-box h5.second{
		padding: 95px 0 0 50px;
	}

	.text-box ul {
		list-style: disc;
		padding: 25px 0 0 50px;
	}

	.scroll {
		float: left;
		margin-bottom: 10px;
		height: 230px;
	  width: 490px;
		outline: 0;
	}

	/* general housekeeping */
	sup {
		font-size: 50%;
	}

	p sup {
		font-size: 80%;
		line-height: 0;
	}

	h5 sup {
		font-size: 80%;
	}

	/*.lanewatch h3.title sup {
		left: 761px;
	}*/

	sup,
	sub {
		height: 0;
		line-height: 1;
		vertical-align: baseline;
		_vertical-align: bottom;
		position: relative;

	}

	* + html sup, * + html sub { vertical-align: bottom; }

	sup {
		bottom: 1ex;
	}

	sub {
		top: .5ex;
	}

	.hondalink li.bullet {
		line-height: 100% !important;
		padding-top: 8px;
	}

	.num {
		vertical-align: 4px;
	}

	.legal {
		font-size: 10px;
	}

	
/*---- $SECTIONS ----------------------------------------*/	

	/* $COMMON */

	article.split .text-box {
		height: 400px;
		width: 100%;
	}

		article.split .text-box h3,
		article.split .text-box ul,
		article.split .text-box p {
			padding: 40px 40px 20px 37px;
			float: left;
			width: 83%;
		}

		article .text-box h3 {
			line-height: 38px;
		}

		article.split .text-box p {
			padding-top: 5px;
			line-height: 150%;
		}

		article.split div.v-half,
		article.split div.v-half {
			font-size: 22px;
			position: relative;
		}

			article.split p.low,
			article.split p.high {
				font-family: 'National-Light', Verdana, sans-serif;
				position: absolute;
				text-align: right;
				right: 15px;
				width: 50%;
			}

				article.split div.v-half p.low {
					top: 60px;
					right: 60px;
				}

				article.split div.v-half p.high {
					bottom: 70px;
					left: 60px;
					text-align: left;
					width: 60%;
				}

	/* $IMAGE DESCRIPTIONS */			

	.img-desc.right {
		right: 20px;
	}

	.img-desc.left {
		left: 120px;
	}

	/* $INTRO */

	#intro article.main {
		background: url('../images/intro.jpg');
		cursor: default;
	} 

	#intro article.main h3 {
		font-family: 'National-Light', Verdana, sans-serif;
		font-size: 45px;
		color: #ffffff;
		text-align: right;
		margin: 80px 60px 0 0;
		padding: 0;
	}

	#intro article.main h3.second {
		font-family: 'National-Thin', Verdana, sans-serif;
		margin: 0 120px 0 0;
	}

	#intro article.main p {
		text-transform: uppercase;
		font-size: 15px;
		font-family: 'National-Light', Verdana, sans-serif;
		margin: 30px 87px 0 0;
		display: block;
		width: 265px;
		background: url(../images/down-arrow.png) 223px 26px no-repeat;
		letter-spacing: 0.01em;
		line-height: 19px;
	}
	
	/* $STYLE */

	.style article.main {
		background: url('../images/style/intro.jpg');
	} 

	.style h3.title,
	.earthdreams h3.title,
	.ldw_fcw h3.title {
		font-family: 'National-Thin', Verdana, sans-serif;
		font-size: 90px;
		color: #ffffff;
		margin: 40px 0 0 50px;
		line-height: 77px;
	}

	.style h3.title,
	.earthdreams h3.title {
		letter-spacing: -3px;
	}

	.ldw_fcw h3.title {
		line-height: 55px;
	}

	.style .round-btn,
	.earthdreams .round-btn,
	.ldw_fcw .round-btn {
		top: 250px;
		left: 50px;
	}

		/* dual exhaust slide */

		.dual-exhaust > * {
			float: left;
			height: 400px;
			display: block;
		}

		.dual-exhaust .img-desc.right {
			left: 300px;
			right: 0;
		}

		.dual-exhaust .img-desc.left {
			left: 30px;
			width: 167px;
			text-align: right;
		}

		.dual-exhaust div {
			height: 345px;
			width: 270px;
		}

		.dual-exhaust:first-child {
			width:220px;
		}

			.dual-exhaust:first-child .img-desc.right {
				right: 290px;
			}

		.dual-exhaust:last-child {
			width:268px;
			float: left;
		}

		.bold.img-desc.right {
			width: 40%;
		}

		.style-copy.scroll {
			height: 250px;
		}


	/* $HONDALINK */

	.hondalink article.main {
		background: url('../images/hondalink/intro.jpg');
	} 

	.hondalink h3.title,
	.lanewatch h3.title,
	.imid h3.title {
		font-family: 'National-Thin', Helvetica, sans-serif;
		font-size: 90px;
		color: #ffffff;
		margin: 40px 0 0 747px;
		position: relative;
		letter-spacing: -3px
	}

	.hondalink h3.title {
		margin-left: 580px;
	}
/*		.hondalink h3.title sup {
			top: -21px;
			left: 320px;
		}*/

	.hondalink .round-btn,
	.lanewatch .round-btn,
	.imid .round-btn {
		top: 250px;
		left: 820px;
	}

	.hondalink .features:first-child,
	.hondalink .reply {
		width: 350px;
	}

		.hondalink article.split .text-box ul {
			padding-top: 10px;
			padding-left: 68px;
			width: 69%;
		}

		.hondalink .features .text-box li {
			margin: 5px 0;
		}

	.hondalink .features:last-child,
	.hondalink .email {
		width: 630px;
		background: #000000;
		height: 100%;
	}

	.hondalink .reply {
		background: #000000;
	}
		.hondalink .reply img {
			display: block;
			margin: 0 auto;
		}

	.hondalink .email .img-desc.right {
		right: 363px;
	}

	.hondalink .wheelcontrols:first-child {
		width: 580px;
	}

	.hondalink .wheelcontrols:last-child {
		width: 400px;
	}

	.hondalink .wheelcontrols:last-child div {
		height: 97px;
		margin: auto auto;
		margin-top: 40px;
		width: 80%;
	}

	.hondalink .wheelcontrols:last-child ul {
		list-style-type: none;
	}

	.hondalink .wheelcontrols .img-desc {
		left: 20px;
	}

	.hondalink .wheelcontrols:last-child li,
	.hondalink .aha li {
		margin: 0;
		line-height: 20px;
		width: 320px;
	}
	
	.hondalink .aha:first-child {
		width: 400px;
	}

	.hondalink .aha:last-child {
		height: 100%;
		background: #000000;
		width: 580px;
	}

	.hondalink .aha .text-box ul {
		padding-top: 10px;
	}

/* EARTH DREAMS */

.earthdreams article.main {
	background: url('../images/earthdreams/intro.jpg');
} 

.earthdreams article h3.dreams {
	width: 87%;
}

/*	.earthdreams h3.title sup {
		left: 430px;
		top: -20px;
	}*/

.earthdreams .start:first-child {
	width: 543px;
}

.earthdreams .start:last-child {
	width: 437px;
}

.earthdreams .start:last-child .vhalf {
	height: 197px;
}

.earthdreams .transmission:first-child {
	width: 541px;
}

.earthdreams .transmission:last-child {
	width: 439px;
}

.earthdreams p.panel {
	margin-top: 20px;
	font-size: 18px;
}

.ed-copy.scroll {
	height: 235px;
}

.v-tec.scroll {
	height: 200px;
}

/* LANEWATCH */

.lanewatch article.main {
	background: url('../images/lanewatch/intro.jpg');
} 

.lanewatch h3.title {
	margin-left: 0;
	margin-right: 50px;
	text-align: right;
}

/*.earthdreams h3.title sup {
	top: -17px;
	left: 416px;
}*/

	/*.lanewatch h3.title sup.asterisk {
		top: 57px;
	}*/

.lw-copy.scroll {
	height: 260px;
}

/* LDW FCW */

.ldw_fcw h3.title {
	font-size: 56px;
	margin-top: 40px;
}

.ldw_fcw article.main {
	background: url('../images/ldwfcw/intro.jpg');
} 

.ldw_fcw .fcw:first-child {
	width: 385px;
}

.ldw_fcw .fcw:last-child {
	width: 585px;
}

	.ldw.scroll {
		height: 240px;
	}

/* IMID */

.imid article.main {
	background: url('../images/imid/intro.jpg');
} 

.imid h3.title {
	margin-top: 105px;
}

.imid .steer {
	position: relative;
}

.imid .steer:first-child {
	width: 580px;
}

.imid .steer:last-child {
	width: 400px;
}

.imid .steer.right div {
	height: 198px;
}

.imid .steer p.high {
	font-size: 22px;
	position: relative;
	float: left;
	margin: 70px 0 0 40px;
	text-align: left;
	width: 100%;
}
.imid .camera {
	background: #000000;
}

	.camera .img-desc {
		right: 186px;
		top: 375px;
	}

.imid .camera img {
	margin: 0 auto;
	display: block;
}
	
	.imid-copy.scroll {
		height: 280px;
	}


/* TV Spot */
.accordtv article.main {
	background: url('../images/tvspot/intro.jpg');
} 

.accordtv h3.title {
	font-family: 'National-Thin', Helvetica, sans-serif;
	font-size: 90px;
	color: #ffffff;
	margin: 40px 0 0 670px;
	position: relative;
}

.accordtv article.main p {
	display: block;
	height: 50px;
	color: #ffffff;
	text-align: right;
	font-size: 18px;
	font-family: 'National-Light', 'National Light', Verdana, sans-serif;
	margin: 20px 57px 0 0;
	letter-spacing: 0;
	line-height: 22px;
	background: url(../images/arrow.png) no-repeat 905px 45px;
}

footer {
	display: block;
	height: 100px;
}