/* 0.0 CSS LEGEND
--------------------------------------------------

Website Styles
Created: 10.20.09
Author: Jeremy Fields

1.0 HTML
2.0 SITE-WRAPPER
3.0 SITE-BRANDING
4.0 SITE-NAVIGATION
5.0 SITE-CONTENT
	5.1 CONTENT-MAIN
	5.2 CONTENT-SUB
6.0 SITE INFO

--------------------------------------------------
*/


/* @group 1.0 HTML
--------------------------------------------------*/
body, html {
	background: #000;
	font-family: Arial, sans-serif;
	text-align: center;
}
a {
	
}
a:hover {
	
}

div#AccessibilityLinks {
	left: -9999px;
	position: absolute;
	top: -9999px;
}
/* @end */


/* @group 2.0 SITE-WRAPPER
--------------------------------------------------*/
div#site-wrapper {
	margin: 22px auto 0 auto;
	position: relative;
	width: 970px;
}

/* Activities Page */
body#activities div#site-wrapper div#bobby {
	background: transparent url(../images/bobby.png) no-repeat 0 0;
	bottom: 0;
	height: 267px;
	position: absolute;
	left: 574px;
	width: 200px;
	z-index: 150;
}
/* @end */


/* @group 3.0 SITE-BRANDING
--------------------------------------------------*/
div#site-branding {
	background: transparent url(../images/site-branding.png) no-repeat;
	height: 149px;
	overflow: hidden;
	position: relative;
	width: 970px;
	z-index: 200;
}
div#site-branding h1 {
	left: -9999px;
	position: absolute;
	top: -9999px;
}
/* @end */


/* @group 4.0 SITE-NAVIGATION
--------------------------------------------------*/
div#site-navigation {
	height: 149px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 970px;
	z-index: 300;
}
div#site-navigation ul,
div#site-navigation ul li {
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}
div#site-navigation a {
	background: transparent url(../images/site-navigation.jpg) no-repeat 0 0;
	display: block;
	height: 27px;
	outline: none;
	position: absolute;
	text-indent: -9999px;
	top: 112px;
}
div#site-navigation li#nav-home a {
	background-position: 0 110px;
	height: 110px;
	left: 35px;
	top: 20px;
	width: 229px;
}
div#site-navigation li#nav-advantage a {
	background-position: 0 0;
	left: 492px;
	width: 87px;
}
div#site-navigation li#nav-products a {
	background-position: -99px 0;
	left: 591px;
	width: 77px;
}
div#site-navigation li#nav-shop a {
	background-position: -188px 0;
	left: 680px;
	width: 79px;
}
div#site-navigation li#nav-activities a {
	background-position: -278px 0;
	left: 770px;
	width: 78px;
}
div#site-navigation li#nav-contact a {
	background-position: -368px 0;
	left: 860px;
	width: 70px;
}

div#site-navigation li#nav-advantage a:hover,
body#advantage div#site-navigation li#nav-advantage a { background-position: 0 -27px; }
div#site-navigation li#nav-products a:hover,
body#products div#site-navigation li#nav-products a { background-position: -99px -27px; }
div#site-navigation li#nav-shop a:hover { background-position: -188px -27px; }
div#site-navigation li#nav-activities a:hover,
body#activities div#site-navigation li#nav-activities a { background-position: -278px -27px; }
div#site-navigation li#nav-contact a:hover,
body#contact div#site-navigation li#nav-contact a { background-position: -368px -27px; }
/* @end */


/* @group 5.0 SITE-CONTENT
--------------------------------------------------*/
div#site-content {
	background: #fff url(../images/site-content.gif) repeat-y 722px 0;
	border-top: 25px solid #fff;
	border-bottom: 12px solid #fff;
	color: #000;
	font-size: 12px;
	line-height: 1.5;
	margin: -15px auto 0 auto;
	overflow: hidden;
	padding: 0 12px 0 12px;
	position: relative;
	text-align: left;
	width: 910px;
	z-index: 100;
}
div#site-content h2,
div#site-content h3 {
	margin: 0 0 1em 0;
}

/* Home Page */
body#index div#site-content {
	background-image: url(../images/site-content-home.jpg);
	background-position: 0 0;
	border: none;
	padding: 25px 8px 8px 190px;
	width: 736px;
}

/* Products Page */
body#products div#site-content {
	background-image: none;
}

/* Contact Page */
body#contact div#site-content {
	background-image: url(../images/site-content-contact.gif);
	background-position: 642px 0;
	padding-left: 35px;
	width: 887px;
}
/* @end */


/* @group 5.1 CONTENT-MAIN
--------------------------------------------------*/
div#content-main {
	float: left;
	overflow: hidden;
	width: 700px;
}
div#content-main p.aside {
	font-size: 10px;
	line-height: 1.3;
	margin: 0;
}

/* Home Page */
body#index div#content-main {
	height: 305px;
	overflow: hidden;
	width: 736px;
}
body#index div#content-main p {
	line-height: 1.6;
	margin-left: 12px;
}
body#index div#content-main strong {
	color: #00529c;
}
body#index div#content-main div#flash-home {
	float: right;
	height: 305px;
	margin-left: 20px;
	overflow: hidden;
}

/* Activities Page */
body#activities div#content-main {
	background: transparent url(../images/bobby.jpg) no-repeat bottom left;
	padding-bottom: 355px;
	padding-left: 5px;
	width: 695px;
}
body#activities div#content-main img {
	padding-top: 10px;
}

/* Advantage Page */
body#advantage div#flash-advantages {
	height: 320px;
	margin: 20px 0 5px 0;
	width: 700px;
}

/* Products Page */
body#products div#content-main {
	float: none;
	padding: 0;
	width: 910px;
}
body#products div.product {
	border-top: 1px solid #00529c;
	height: 255px;
	overflow: hidden;
	padding: 10px 0;
	width: 910px;
}
body#products div#receiver-locks {
	border: none;
	padding-top: 0;
}
body#products div#accessories {
	padding-bottom: 0;
}
body#products div.product-description {
	float: left;
	height: 255px;
}
body#products div.product-description h3 {
	background: transparent url(../images/sprite.png) no-repeat 0 0;
	height: 12px;
	line-height: 12px;
	margin: 0 0 20px 0;
	overflow: hidden;
	text-indent: -9999px;
}
body#products div#receiver-locks div.product-description {
	background: transparent url(../images/products-receiver-locks.jpg) no-repeat bottom right;
	width: 274px;
}
body#products div#receiver-locks h3 { background-position: 0 -159px; width: 258px; }

body#products div#latch-locks div.product-description {
	background: transparent url(../images/products-latch-locks.jpg) no-repeat bottom right;
	width: 437px;
}
body#products div#latch-locks h3 { background-position: 0 -171px; width: 363px; }

body#products div#keyedalike-locks div.product-description {
	background: transparent url(../images/products-keyedalike-locks.jpg) no-repeat bottom right;
	width: 437px;
}
body#products div#keyedalike-locks h3 { background-position: 0 -183px; width: 315px; }

body#products div#motorcycle-locks div.product-description {
	background: transparent url(../images/products-motorcycle.jpg) no-repeat top right;
	width: 755px;
}
body#products div#motorcycle-locks h3 { background-position: 0 -195px; width: 337px; }
body#products div#accessories h3 { background-position: 0 -207px; width: 145px; }

body#products div.product ul.product-list,
body#products div.product ul.product-list li {
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}
body#products div.product ul.product-list {
	float: right;
}
body#products div.product ul.product-list li {
	float: left;
	margin-left: 5px;
}

/* Contact Page */
body#contact div#content-main {
	width: 577px;
}
body#contact div#content-main h2 {
	background: transparent url(../images/sprite.png) no-repeat 0 -135px;
	height: 12px;
	line-height: 12px;
	overflow: hidden;
	text-indent: -9999px;
	width: 86px;
}
body#contact div#contact-success {
	background: #fff url(../images/check.png) no-repeat 61px 15px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 0 12px #000;
	-moz-box-shadow: 0 0 12px #000;
	-webkit-box-shadow: 0 0 12px #000;
	color: green;
	font-size: 24px;
	font-weight: bold;
	left: 196px;
	padding: 150px 25px 25px 25px;
	position: absolute;
	text-align: center;
	top: 130px;
	width: 200px;
	z-index: 300;
}
body#contact div#content-main form {
	margin: 0;
	padding: 5px 0 0 0;
}
body#contact div#content-main form label {
	display: block;
	font-size: 11px;
	line-height: 1.2;
	text-transform: uppercase;
}
form input.text,
form textarea {
	background: #e5ecf4;
	border: 1px solid #999;
	font-size: 12px;
	margin: 0;
	outline: none;
	padding: 3px;
	resize: none;
	width: 569px;
}
form textarea {
	height: 15em;
}
form input.focus,
form textarea.focus {
	background: #fff;
}
form div.formgroup {
	overflow: hidden;
	position: relative;
	width: 577px;
}
form p {
	margin: 0 0 7px 0;
}
form p.formgroup-50 {
	width: 286px;
}
form p.formgroup-50 input.text {
	width: 278px;
}
form p.formgroup-30 {
	width: 169px;
}
form p.formgroup-30 input.text {
	width: 161px;
}
form p.formgroup-20 {
	width: 112px;
}
form p.formgroup-20 input.text {
	width: 104px;
}
form p.formgroup-right {
	position: absolute;
	right: 0;
	top: 0;
}
form p.formgroup-center {
	position: absolute;
	left: 291px;
	top: 0;
}
form p.form-submit {
	line-height: 1;
	margin: 0;
	text-align: right;
}
form p.error label {
	background: transparent url(../images/error.gif) no-repeat center left;
	color: #f00;
	font-weight: bold;
	padding-left: 73px;
}
form p.error label span {
	display: none;
}
/* @end */


/* @group 5.2 CONTENT-SUB
--------------------------------------------------*/
div#content-sub {
	background: #ccd9e9;
	float: right;
	line-height: 1.4;
	overflow: hidden;
	width: 200px;
}

/* Home Page */
body#index div#content-sub {
	background: #fff;
	float: none;
	height: 236px;
	overflow: hidden;
	padding-top: 6px;
	width: 736px;
}
body#index div#content-sub ul,
body#index div#content-sub ul li {
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}
body#index div#content-sub ul {
	height: 236px;
	overflow: hidden;
	width: 740px;
}
body#index div#content-sub ul li {
	float: left;
	margin-right: 4px;
}

/* Activities Page */
body#activities div#content-sub {
	padding: 10px 17px 20px 17px;
	width: 166px;
}
body#activities div#content-sub h3 {
	background: transparent url(../images/sprite.png) no-repeat 0 0;
	height: 111px;
	line-height: 111px;
	overflow: hidden;
	text-indent: -9999px;
}
body#activities div#content-sub ul,
body#activities div#content-sub ul li {
	font-size: 11px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body#activities div#content-sub ul {
	margin-bottom: 15px;
}
body#activities div#content-sub ul li a {
	color: #000;
	text-decoration: none;
}
body#activities div#content-sub ul li a:hover {
	text-decoration: underline;
}
body#activities div#content-sub h4.activities-videos,
body#activities div#content-sub h4.activities-links {
	background: transparent url(../images/sprite.png) no-repeat 0 -123px;
	height: 12px;
	line-height: 12px;
	margin: 0 0 3px 0;
	text-indent: -9999px;
	width: 55px;
}
body#activities div#content-sub h4.activities-links {
	background-position: -55px -123px;
	width: 36px;
}

/* Advantage Page */
body#advantage div#content-sub {
	padding: 10px 12px 15px 12px;
	width: 176px;
}
body#advantage div#content-sub h3 {
	background: transparent url(../images/sprite.png) no-repeat 24px -111px;
	height: 12px;
	line-height: 12px;
	overflow: hidden;
	text-indent: -9999px;
}
body#advantage div#content-sub p.prodimage {
	margin: 30px 0 0 0;
	text-align: center;
}

/* Products Page */
body#products div#content-sub {
	display: none;
}

/* Contact Page */
body#contact div#content-sub {
	padding: 10px 20px 20px 20px;
	width: 240px;
}
body#contact div#content-sub h3 {
	background: transparent url(../images/sprite.png) no-repeat 63px -147px;
	height: 12px;
	line-height: 12px;
	overflow: hidden;
	text-indent: -9999px;
}
body#contact div#content-sub blockquote {
	margin: 0;
	padding: 0;
}
body#contact div#content-sub blockquote cite {
	display: block;
	text-align: right;
}
/* @end */


/* @group 6.0 SITE-INFO
--------------------------------------------------*/
div#site-info {
	color: #6f87a7;
	font-size: 10px;
	line-height: 1.2;
	margin: 0 auto;
	padding: 10px 0 20px 0;
	position: relative;
	text-align: left;
	width: 934px;
}
div#site-info a {
	color: #6f87a7;
	text-decoration: none;
}
div#site-info a:hover {
	color: #cfd7e2;
	text-decoration: underline;
}
div#site-info p {
	margin: 0 0 5px 0;
}
div#site-info p#site-info-links {
	text-transform: uppercase;
}
div#site-info p#site-info-social {
	height: 23px;
	margin: 0;
	position: absolute;
	right: 0;
	top: 10px;
	width: 115px;
}
div#site-info p#site-info-social a {
	background: transparent url(../images/site-info-social.png) no-repeat 0 0;
	display: block;
	height: 23px;
	left: 0;
	position: absolute;
	text-indent: -9999px;
	top: 0;
}
div#site-info p#site-info-social a#site-info-youtube {
	background-position: 0 0;
	width: 54px;
}
div#site-info p#site-info-social a#site-info-facebook {
	background-position: -54px 0;
	left: 63px;
	width: 21px;
}
div#site-info p#site-info-social a#site-info-twitter {
	background-position: -75px 0;
	left: 94px;
	width: 21px;
}
/* @end */


/* MODAL AJAX LOADER */
div#ajaxInfo {
	background: rgba(0, 0, 0, 0.75);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow: 0 0 3px #000;
	-moz-box-shadow: 0 0 3px #000;
	-webkit-box-shadow: 0 0 3px #000;
	color: #fff;
	font-size: 12px;
	height: 50px;
	line-height: 50px;
	left: 50%;
	padding: 0 58px 0 75px;
	position: fixed;
	text-align: center;
	top: 287px;
	z-index: 1000;
}
div#ajaxInfo img {
	left: 17px;
	position: absolute;
	top: 17px;
}


/* SITE CONTENT MODAL */
div#content-modal {
	background: #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background: #fff;
	box-shadow: 0 0 12px #000;
	-moz-box-shadow: 0 0 12px #000;
	-webkit-box-shadow: 0 0 12px #000;
	
	height: 380px;
	left: 50%;
	margin: -210px 0 0 -260px;
	padding: 20px;
	position: fixed;
	text-align: left;
	top: 50%;
	width: 480px;
	z-index: 1000;
}
div#content-modal div {
	background: none;
	color: #666;
	font-size: 12px;
	line-height: 1.5;
	padding: 0;
}
div#content-modal div#content-modal-content {
	height: 380px;
	left: 20px;
	position: absolute;
	top: 20px;
	width: 480px;
}
a#content-modal-close {
	bottom: 0;
	color: #999;
	display: block;
	font-size: 10px;
	line-height: 1;
	position: absolute;
	right: 0;
	text-transform: uppercase;
}
a#content-modal-close:hover { color: #666; }