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

	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%;
}

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

}

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

sup {
	bottom: 3ex;
}

sub {
	top: .5ex;
}

/*---- $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: 42px;
		position: relative;
	}
		article h3 sup {
			bottom: 5ex;
			font-size: 24%
		}

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

	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,
	object {
		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: 20px;
			background-position: 45px 38px;
			font-family: 'National-Light', Verdana, sans-serif;
		}

		
	#red {
		display: none;
		height: 40px;
		width: 40px;
		background: red;
		top: 350px;
		left: 880px;
	}

	/* $More */

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

	/* $Arrow */

	.arrow {
		background: url('../images/arrow.png') no-repeat;
	}

	/* $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 40px;
	}

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

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

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

	/* general housekeeping */
	h3.title sup {
		font-size: 18%;
		letter-spacing: 0;
		bottom: 6ex;
	}

	.bullet {
		list-style-type: disc;
	}
	
	.num {
		vertical-align: 3px;
	}

	
/*---- $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.split .text-box h3 {
			padding-left: 37px;
		}

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

		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%;
				}

		p.fine {
			font-size: 10px;
			letter-spacing: 0;
		}

	/* $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: 37px;
		color: #ffffff;
		margin: 80px 0 -12px 603px;
		padding: 0;
		letter-spacing: -2px;
	}

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

	#intro article.main p {
		display: block;
	    font-family: 'National-Light',Verdana,sans-serif;
	    font-size: 17px;
	    margin: 30px 35px 0 0;
	    text-transform: uppercase;
	    width: 335px;
	    letter-spacing: 0;
	}
	
		#intro article.main p img {
			display: inline;
		}
	
	/* $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: 89px;
	}

	.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;
			top: 353px;
		}

		.dual-exhaust .img-desc.left {
			top: 347px;
			left: 20px;
			width: 179px;
			text-align: right;
		}

		.dual-exhaust div {
			height: 344px;
			width: 268px;
		}

		.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: 30%;
		}

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


	/* $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;
	}

	.hondalink h3.title {
		margin-left: 580px;
		margin-top: 110px;
	}

	.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 {
			font-size: 11px;
		    line-height: 13px;
		    padding-left: 55px;
		    padding-right: 20px;
		    padding-top: 10px;
		    width: auto;
		}

		.hondalink .features .text-box li {
			margin: 2px 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: 25px auto 15px auto;
		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 0 5px 0;
		line-height: 15px;
		width: 305px;
		font-size: 12px;
	}
	
	.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 .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: 15px;
}

.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;
	font-size: 70px;
	line-height: 62px;
}

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

/* LDW FCW */

.ldw_fcw h3.title {
	font-size: 56px;
	margin-top: 35px;
	letter-spacing: -2px;
}

.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 h3.title {
	margin-left: 540px;
	margin-top: 82px;
	line-height: 45px;
}

.imid h3.title q { display: block; }
	.imid h3.title span {
		font-size: 37px;
	  line-height: 45px;
		letter-spacing: -2px;
	  margin-top: 30px;
	  display: block;
	}

	* + html .imid h3.title span { margin-top: 0; }

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

.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: 300px;
}
.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: 64px;
	color: #ffffff;
	margin: 45px 0 0 527px;
	position: relative;
}

.accordtv article.main p {
	background: none repeat scroll 0 0 transparent;
    color: #FFFFFF;
    float: right;
    font-family: 'National-Light', 'National Light', Verdana,sans-serif;
    font-size: 18px;
    margin: 25px 90px 0 0;
    text-align: right;
    width: 300px;
    letter-spacing: 0;
    line-height: 20px;
}