@import "h5bp.less";

/* Mixin's and Variables
   ========================================================================== */

/* Variables */
@yellow: #fff200;
@green: #8dc63f;
@ltblue: #00b3e3;
@blue: #7daed3;
@orange: #fbb034;
@purple: #b096da;
@ltpurple: #e2baad;

/* Vertical Centering */
.vert1 {display:table; height:100%;}
.vert2 {display:table-cell; vertical-align: middle;}


/* Global
   ========================================================================== */

html,body{height:100%; background:#393a3b;}
.container{width:960px-20px; padding:0 10px; margin:0 auto; position:relative;}
.wrapper{height:auto; min-height:100%; margin-bottom:-142px;}
.push{height:142px;}

header {
	height:274px; .nimbus; margin-bottom:57px;
	#logo {
		float:left;
		-webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, .3);
		box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, .3);
		
		&:hover {
			-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .3);
			box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .3);
		}
	}
	nav {
		margin:55px -15px 0; float:right;
		li {display:block; float:left; margin:0 15px;}
		a {display:block; font-size:16px; letter-spacing:0; color:#fff; text-transform:uppercase; text-shadow:0px 4px 5px rgba(0,0,0,.18); font-weight:700;}
		li.active a, a:hover {color:@yellow; text-decoration:none;}
	}
}

.main{
	position:relative; min-width:960px; background:url('../img/int/bg_texture.jpg') repeat-x; padding:57px 0 120px; color:#d7d8d8; font-size:15px; line-height:20px;
	a {color:@yellow;}
	p+p {margin-top:20px;}
	h1 + .intro {margin-top:20px;}
	h2 + p {margin-top:15px;}
	figure + .nowrap {padding-top:17px;}
}


footer {
	height:142px; background:#292828; font-size:12px; color:#939392;
	a {color:inherit;}
	.container {height:142-30px; padding-top:30px; background:url('../img/int/bg_footer.png') right top no-repeat;}
	.products {position:relative; top:-67px; float:left; margin:0 -6px -67px 0;}
	.social {
		float:left; margin-left:22px;
		a {display:inline-block; width:30px; height:28px; background:url('../img/int/sprite.png') no-repeat; text-indent:-9999px; margin-left:8px;}
		.facebook {background-position:0 0;}
		.twitter {background-position:-30px 0;}
		.youtube {background-position:-60px 0;}
		.instagram {background-position:-90px 0;}
	}
	.logo {position:relative; top:-5px;}
	.cm-form {
		text-align:right; position:relative; top:-20px;
		label {font-size:12px;}
		input[type="text"] {display:inline-block; background:#2f2e2f; border-color:#232323 #232323 #494849; width:240px;}
		input[type="submit"] {display:inline-block; margin-left:10px; position:relative; top:2px;}
		label.error {display:none !important;}
		input.error {border-color:#ab2d22 !important;}
		.inline-radios {
			text-align:left; padding-left:7px; margin:3px 0 0; color:#b6b7b9;
			label {display:inline-block; text-transform:none;}
			input {display:inline-block; margin:0 1px 0 5px;}
		}
	}
	.cm-form-thankyou {text-align:right; font-size:14px; margin-top:-4px;}
}


/* Mixin's & Variables
   ========================================================================== */

/* Fonts! */
.nimbus-condensed {font-family:"nimbus-sans-condensed",sans-serif;}
.nimbus {font-family:"nimbus-sans",sans-serif; letter-spacing:-1px;}
.arial {font-family:arial,helvetica,sans-serif;}

/* Container Link */
.darkbox {
	padding:18px; background:#333;
	strong {color:#fff;}
}
.linkit {display:block; position:absolute; left:0; top:0; z-index:9; width:100%; height:100%; background:url('../img/int/x.gif'); text-indent:-9999px;}

/* Image Border */
.img-frame {padding:20px; background-color:#2e2d2e;}


/* Interface
   ========================================================================== */

/* Header Image Banner */
.banner {position:absolute; top:0; left:0; width:100%; min-width:960px; height:274px; background:url('../img/int/bg_subpage.jpg') #292728 top center no-repeat;}

/* Yellow Band */
.yellow-band {
	display:inline-block; padding:0 14px; font-size:16px; height:28px; line-height:28px; color:#292828; font-weight:bold; .nimbus; background:url('../img/int/yellow_band_small.png') left -28px repeat-x; text-transform:none !important; text-decoration:none !important;
	& + .yellow-band {margin-left:2px;}
}
a.yellow-band:hover {background-position:0 0;}

.icon {
	display:inline-block; background:url('../img/int/sprite.png') no-repeat; vertical-align:middle;
	&.play {width:20px; height:20px; background-position:0 -28px; margin-right:5px;}
}

/* Wraping Headline */
.header-wrap {
	position:absolute; left:-5px; top:-3px; padding-bottom:5px; background:url('../img/int/bg_headerwrap.png') left bottom no-repeat; line-height:inherit;
	.yellow-band {-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .8); box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .8);}
}

/* Blog Articles */
.blog-listings,
.blog-detail {
	article + article {margin-top:40px;}
	figure {.img-frame;}
	h3 {
		font-size:28px; line-height:28px; text-transform:none; padding:0 0 10px; color:#fff; 
		a {display:block; color:#fff; text-decoration:none; padding-top:3px;}
	}
	.meta {.accent;}
	.image-meta {margin-top:5px; .accent; font-style:italic;}
}
.blog-listings figure {float:left; .gutter-right;}
.blog-detail {
	figure {float:right; .gutter-left;}
	.article img {padding-top:5px; max-width:100%;}
}

/* Tips Listings */
.tips-listings {
	margin:-20px -10px; padding:0; list-style:none;
	li {display:block; .grid6; float:left; margin:20px 10px;}
	.clear + li {clear:left;}
}

/* Events Listings */
.events-listings {
	padding-right:20px;
	p {margin-top:15px !important;}
	figure {.img-frame; float:right; .gutter-left;}
	h3 {padding-bottom:40px;}
}

/* Past Events */
.past-events {
	article {margin:12px 0 0; float:left; width:50%;}
	.clear+article {clear:left;}
	p {padding-right:20px;}
}

/* Products Listings */
.products-listings {
	figure {float:right;}
	.grid8 {float:left;}
	h2 {font-size:53px; margin-top:-7px; .nimbus; font-weight:700;}
	h3 {font-size:28px; line-height:30px; .nimbus-condensed;}
	p {margin-top:15px;}
	.product-icon {position:relative; top:10px; margin-right:22px;}
}

/* Meet Team Listings */
.team-listings {
	margin:-20px 0 0 -20px; padding:0; list-style:none;
	li {display:block; float:left; width:260px; padding:20px 20px 35px; margin:20px 0 0 20px; background:#2e2d2e;}
	h2 a {
		display:block; margin:15px 0 0; font-size:26px; line-height:28px; color:#fff;
		&:hover {color:@yellow; text-decoration:none;}
	}
	.clear+li {clear:left;}
}

/* Back Link */
.back {font-size:12px; position:absolute; left:10px; top:-48px; z-index:9;}

/* Facebook Like Box */
.fb-like-box {background-color:#333333; padding:10px;}

/* Horz Rule */
.hr {display:block; margin:45px auto 25px; height:26px; background:url('../img/int/hr_full.png') center no-repeat;}
.grid9 .hr {height:24px; background-image:url('../img/int/hr_700.png');}
.grid8 .hr {height:24px; background-image:url('../img/int/hr_620.png');}

/* Add This */
#sharetools {
	width:940px; padding:0 10px; position:absolute; top:288px; left:50%; margin-left:-480px;
	.share {float:right;}
	.share+.share {margin-right:15px;}
	.share.fb {position:relative; top:-3px;}
}
#fb-root {display:none;}

/* Product Icons */
.product-icon {
	display:inline-block; width:55px; height:55px; background:url('../img/int/icon_hero_products.png') no-repeat;
	&.clean {background-position:0 0;}
	&.lube {background-position:-55px 0;}
	&.protect {background-position:-110px 0;}
	&.active {display:block;}
}

/* Form Basics */
label {
	display:block; font-size:14px; line-height:20px; color:#b6b7b9; text-transform:uppercase; font-weight:bold; margin-bottom:5px;
	em {text-transform:none; font-weight:400; font-style:none;}
}
input,textarea {display:block; background:#4d4e4f; border:1px solid; border-color:#3b3c3d #424243 #848586; color:#D7D8D8; padding:6px;}
select {display:block; padding:6px; margin-bottom:5px;}
label.error,label span {color:#ab2d22;}
label.error {font-size:11px; line-height:14px; padding-top:2px; text-transform:none; margin-bottom:-10px;}
input[type="submit"] {.yellow-band; width:auto !important; border:none;}

/* Contact Form */
.contact-form {
	background:#2e2d2e; padding:20px;
	h3 {text-transform:none;}
	.header-wrap {
		position:relative; left:-25px; width:920px; margin-bottom:25px;
		.yellow-band {display:block; padding-left:26px;}
	}
	input,textarea,select {width:255px;}
	select {position:relative; top:7px;}
	fieldset {margin:-7px 0;}
	fieldset + h3 {margin-top:40px;}
	.col {.grid4; float:left; margin:7px 0 !important;}
	.double-col {
		.col; width:600px;
		textarea {width:586px; max-width:586px; height:130px;}
	}
	.col-header {height:60px;}
	.half {width:150px; float:left;}
	.state,select.small {width:130px;}
	.zip {width:105px;}
	.chzn-container {width:269px !important;}
	.chzn-drop {width:267px !important;}
	.chzn-choices {margin-bottom:-1px !important;}
}

/* Site Map */
#sitemap {
	margin:20px 0 -10px; padding:0; list-style:none;
	li {display:block; margin:10px 0; font-weight:bold;}
	li:before {content:'- ';}
}

/* Header Riders */
#page_2 header {background:url('../img/copy/riders/products.png') no-repeat;}
#page_3 header {background:url('../img/copy/riders/our-story.png') no-repeat;}
#page_4 header {background:url('../img/copy/riders/events.png') no-repeat;}
#page_5 header {background:url('../img/copy/riders/tips.png') no-repeat;}
#page_6 header {background:url('../img/copy/riders/contact.png') no-repeat;}
#page_7 header {background:url('../img/copy/riders/blog.png') no-repeat;}
#page_23 header {background:url('../img/copy/riders/where-to-buy.png') no-repeat;}

/* Video Overlay */
.video-link {
	display:inline-block; font-weight:700; margin-top:40px; font-size: 18px;
	.icon.play {display:inline-block; margin-top: -3px;}
}
.video-overlay {
	display:none; background:#000; padding:20px;
	.close {display:block; position:absolute; width:40px; height:40px; right:-40px; top:0; background:url('../img/int/sprite.png') 0 -48px no-repeat; cursor:pointer;}
}

/* Homepage
   ========================================================================== */

#homepage {
	header {height:106px; margin:0 auto;}
	.banner {height:546px; background-image:url('../img/int/bg_home_hero.jpg');}
	.hero {height:349px; padding-top:50px; position:relative; .nimbus;}
	.hero-pager {
		position:absolute; z-index:9; margin:-17px 0; padding:0; list-style:none;
		li {display:block; margin:17px 0;}
		a {display:block; width:369px; height:57px; background:url('../img/int/clean_lube_protect.png') no-repeat; text-indent:-9999px;}
		.clean {background-position:0 0;}
		.lube {background-position:0 -114px;}
		.protect {background-position:0 -228px;}
		.activeSlide {
			.clean {background-position:0 -57px;}
			.lube {background-position:0 -171px;}
			.protect {background-position:0 -285px;}
		}
	}
	.hero-slides {
		width:100%;
		div {width:100%;}
		figure {float:right; position:relative; bottom:-25px;}
		.product-icon {
			display:block; position:absolute; top:240px; left:0px;
		}
		p {position:absolute; top:242px; left:67px; color:#ffffff; font-size:20px; line-height:24px; text-shadow:0px 4px 20px rgba(0,0,0,.7);}
	}
	.hero-progress {float:left; position:absolute; top:284px; left:4px; z-index:10; width:68px; height:68px;}
	.jCProgress {margin:0 !important;}
	
	.explore {
		position:relative; top:-4px; min-width:960px; height:46px;
		a {display:block; position:absolute; left:-500px; top:0; z-index:20;}
		a:hover {left:-495px;}
	}
	.main {top:-6px; padding-top:62px;}
	.pathways {
		margin:0 -10px; padding:0; list-style:none; color:#d5d5d5; font-size:15px;
		li {display:block; width:300-40px; height:310px; margin:0 10px; padding:20px 20px 15px; background:#2f2e2f; float:left; position:relative;}
		figure {position:relative; margin-bottom:15px;}
		h4 a {font-size:24px; color:#ffffff; text-transform:none;}
		li:hover h4 a {color:#fff200; text-decoration:none;}
		li:hover .yellow-band {background-position:0 0;}
		li>span {color:#a09e9e; font-size:12px;}
		p {margin-top:10px;}
	}
	#sharetools {display:none;}
}

#where-to-buy {
	.darkbox {margin:15px 0;}
	.by-region {display:none;}
	input {width:170px;}
	select {width:182px;}
	ul {margin:-10px 0; padding:0; list-style:none;}
	li {display:block; float:left; width:33%; margin:10px 0;}
	.clear + li {clear:left;}
	li p {padding-right:15px;}
}
#gmap {
	&,strong {color:#000;}
	a {color:blue;}
}


/* Typeography
   ========================================================================== */
textarea,input,body {font-family:arial,helvetica,sans-serif; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6 {margin:0; .nimbus; color:#fff; text-transform:uppercase;}
h2,h4 {font-weight:900;}
h1,h3 {font-size:53px; line-height:54px; .nimbus;}
h2 {font-size:28px; line-height:30px; .nimbus-condensed; margin-bottom:2px;}
h4 {font-size:22px; line-height:24px;}
h5 {font-size:15px; line-height:20px; text-transform:uppercase; color:#fff;}

p{margin:0;}

a{text-decoration:none; color:;}
a:hover{text-decoration:underline;}

.intro {font-size:22px; line-height:26px; color:#d7d8d8; .nimbus-condensed;}
p.intro, .intro p {padding-right:20px;}
.accent {font-size:12px; color:#b7b7b7;}
.yellow {color:@yellow;}
.green {color:@green;}
.ltblue {color:@ltblue;}
.blue {color:@blue;}
.orange {color:@orange;}
.purple {color:@purple;}
.ltpurple {color:@ltpurple;}
.bold,strong {font-weight:700;}
.exsmall{}
.sm{font-size:12px; line-height:18px;}
.medium{}
.large{}
.exlarge{}




/* ==|== non-semantic helper classes ======================================== */
.grid1 {width:60px;} .grid2 {width:140px;} .grid3 {width:220px;} .grid4 {width:300px;}
.grid5 {width:380px;} .grid6 {width:460px;} .grid7 {width:540px;} .grid8 {width:620px;}
.grid9 {width:700px;} .grid10 {width:780px;} .grid11 {width:860px;} .grid12 {width:940px;}
.gutter-left {margin-left:20px;} .gutter-right {margin-right:20px;}

.mt1em{margin-top:1em !important;} .ml1em{margin-left:1em !important;} .mr1em{margin-right:1em !important;}
.mt5{margin-top:5px !important;} .ml5{margin-left:5px !important;} .mr5{margin-right:5px !important;}
.mt10{margin-top:10px !important;} .ml10{margin-left:10px !important;} .mr10{margin-right:10px !important;}
.mt15{margin-top:15px !important;} .ml15{margin-left:15px !important;} .mr15{margin-right:15px !important;}
.mt20{margin-top:20px !important;} .ml20{margin-left:20px !important;} .mr20{margin-right:20px !important;}
.mt25{margin-top:25px !important;} .ml25{margin-left:25px !important;} .mr25{margin-right:25px !important;}
.mt30{margin-top:30px !important;} .ml30{margin-left:30px !important;} .mr30{margin-right:30px !important;}
.mt35{margin-top:30px !important;} .ml35{margin-left:30px !important;} .mr35{margin-right:30px !important;}
.mt40{margin-top:40px !important;} .ml40{margin-left:40px !important;} .mr40{margin-right:40px !important;}
.mt45{margin-top:45px !important;} .ml45{margin-left:45px !important;} .mr45{margin-right:45px !important;}
.mt50{margin-top:53px !important;} .ml50{margin-left:53px !important;} .mr50{margin-right:53px !important;}
.mt70{margin-top:70px !important;} .ml70{margin-left:70px !important;} .mr70{margin-right:70px !important;}

.left{float:left;}
.right{float:right;}
.text-right {text-align:right;}
.center{text-align:center;}
.nowrap{overflow:hidden;}
.nomargin{margin:0;}
.block {display:block;}

@import "chosen.less";
@import "print.less";