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

CSS Document

Coded by: Barn Door Media, LLC
Last Updated: October 20, 2008
by Shawn Twing, stwing@barndoormedia.com

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

body {
	margin: 0;
	padding: 0;
	background: url(../images/bg/bg_body.gif) repeat-x; 
}

a img {
	border: none;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#wrapper {
	width: 950px; 
	margin: auto; 
}

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

Misc mods
1. Make "tiers" box invisible on all pages...

**********************/
#tiers	{	display:none;}

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

Header

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

#header {
	width: 950px; 
	height: 142px; 
	background: url(../images/bg/bg_header.gif) no-repeat right 0; 
}

#header img { 
	float: left; 
} 

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

Navigation

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

#navi {
	float: left; 
	margin-top: 60px; 
} 

#nav { 
	margin: 0; 
	padding: 0;
	list-style: none; 
} 

#nav li { 
	position: relative; 
	float: left; 
} 

#nav li a { 
	float: left; 
	padding: 0 10px 4px; 
	font: normal 0.8em arial, verdana; 
	color: white; 
	border-right: 1px solid white; 
} 

#nav li a:hover { 
	padding-bottom: 10px; 
} 

#nav li ul{
 display: none;
 position: absolute;
 top: 26px;
 left: -1px;
 margin: 0; 
 padding: 0; 
 list-style: none; 
 z-index: 100; 
 border: 2px solid white; 
}

#nav li:hover ul, #nav li.over ul{
 display: block;
 xz-index: 100; 
}

#nav li ul li{
 float: none;
 width: 120px; 
 font-size: 1em;
}

#nav li ul li a{
 float: none !important; 
 display: block;
 color: white;
 height: 24px;
 padding: 2px 5px !important; 
 line-height: 24px;
 margin: 0 !important;
 border: none !important;
 background: #E10915;
}

#nav li ul li a:hover{
 color: black;
 background: white;
}

.last_nav_item { 
	border: 0 !important; 
} 

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

Content

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

#content {
	width: 950px; 
} 

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

Content - Home

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

.content_home { 
	padding-bottom: 30px; 
	background: url(../images/bg/bg_home.jpg) no-repeat right -10px; 
} 

.content_home #content_main { 
	width: 480px; 
} 

.content_home #content_main h2 { 
	margin: 0; 
	font: bold 1.5em "arial narrow", arial; 
} 

.content_home #content_main p { 
	font: normal 15px "arial narrow", arial, Verdana, sans serif ; 
} 

#content_main a{ 
	color: #000000;
	text-decoration: none; 
} 

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

Content - Contact

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

.content_contact { 
	padding-bottom: 80px; 
	background: url(../images/bg/bg_contact.jpg) no-repeat right -10px; 
} 

.content_eBike { 
	padding-bottom: 80px; 
	background: url(../images/bg/bg_eBike.jpg) no-repeat right -10px; 
} 

.content_contact #content_main { 
	width: 560px; 
} 

.content_contact #content_main h2 { 
	margin: 0; 
	font: bold 1.5em "arial narrow", arial; 
} 

.content_contact #content_main p { 
	margin: 0 0 15px; 
	font: normal 1em "arial narrow", arial; 
} 

.content_contact #content_main p strong { 
	font: bold 1.6em "arial narrow", arial; 
} 

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


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

Content - eBike

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


.content_eBike { 
	padding-bottom: 30px; 
	background: url(../images/bg/bg_eBike.jpg) no-repeat right -10px; 
} 

.content_eBike #content_ebike { 
	width: 500px; 
} 


#content_ebike p { 
	margin: 0px 0 0 0; 
	font: normal 15px "arial narrow", arial; 
	color: #7a7878; 
} 

#content_ebike h3 { 
	margin: 0 0 10px 0; 
	font: bold 23px "arial narrow", arial; 
	color: #7a7878; 
}
#content_ebike h4 { 
	margin: 10px 0 0 0; 
	font: bold 21px "arial narrow", arial; 
	color: #7a7878; 
} 

#content_ebike a { 
	color: #7a7878; 
	text-decoration: underline;
}



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





Content - History

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

.content_history { 
	padding-bottom: 40px; 
	background: url(../images/bg/bg_history.gif) no-repeat right -10px; 
} 

.content_history #content_main { 
	width: 640px; 
} 

.content_history #content_main p { 
	font: normal 1em "arial narrow", arial; 
} 

.content_history #content_main p strong { 
	font: normal 1.8em "arial narrow", arial;  
} 

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

Content - Frames

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

.content_frames { 
	padding-bottom: 160px; 
	background: url(../images/bg/bg_frames.jpg) no-repeat right -10px; 
} 

.content_frames #content_main p { 
	margin: 0; 
	padding-top: 40px; 
	font: normal 1.4em "arial narrow", arial; 
	color: #7a7878; 
} 


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

Content - Main Bikes

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

#content_bikes { 
	padding-bottom: 60px; 
	 
} 

#content_bikes p { 
	margin: 0px 0 0 0; 
	font: normal 14px "arial narrow", arial; 
	color: #7a7878; 
} 

#content_bikes h3 { 
	margin: 0 0 10px 0; 
	font: bold 23px "arial narrow", arial; 
	color: #7a7878; 
}
#content_bikes h4 { 
	margin: 10px 0 0 0; 
	font: bold 21px "arial narrow", arial; 
	color: #7a7878; 
} 

#content_bikes a { 
	color: #7a7878; 
	text-decoration: underline;
}

.bikepic {
	padding-left: 15px;
	}

.mbtable {
	font: 10px "ariel narrow", arial, sans serif;
	}

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

Content - Featured

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

.content_featured { 
	padding-bottom: 50px; 
} 

.featured_div { 
	float: left; 
	width: 305px; 
	margin: 0 17px 0 0; 
	padding-top: 20px; 
	font: normal 0.8em arial; 
	color: #7a7878; 
} 

.rightMostDiv { 
	margin: 0 !important;
} 

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

Content - Order

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

.content_order { 
	padding-bottom: 40px; 
} 

.content_order h3 { 
	margin: 0; 
	font: bold 1.2em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.content_order #content_main img { 
	float: right; 
	margin-left: 20px; 
} 

.content_order #content_main span { 
	clear: left; 
	float: left; 
	width: 80px; 
	margin-top: 20px; 
	font: bold 1em "arial narrow", arial; 
} 

.content_order #content_main p { 
	float: left; 
	width: 550px; 
	margin: 20px 0 0; 
	font: normal 1em "arial narrow", arial; 
} 

.content_order #content_main a { 
	clear: both; 
	font: bold 1em "arial narrow", arial; 
	color: black; 
} 

.content_order .frame_large { 
	float: right; 
} 

.content_order .frame_large image { 
	float: none !important; 
	margin: 0 !important; 
} 

* html .content_order .frame_large a { 
	bottom: -6px !important; 
} 

.content_order .news_p { 
	width: 600px !important; 
	margin: 10px 0 0 !important; 
	padding: 0 !important; 
	font: normal 0.8em verdana !important; 
} 

.content_order .news_p strong { 
	font: bold 1.1em "arial narrow", arial, !important; 
} 

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

Content - Shop

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

.content_shop { 
} 

.content_shop  a img { 
	float: right; 
} 

.content_shop #content_main h2 { 
	margin: 0; 
	font: bold 1.5em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.content_shop h4 { 
	margin: 0; 
	font: bold 1em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.content_shop .item_block { 
	width: 280px; 
	margin-top: 10px; 
} 

.content_shop .item_block img { 
	float: left; 
	margin-right: 5px; 
} 

.content_shop .item_block h5 { 
	margin: 0; 
	font: bold 0.85em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.content_shop .item_block p { 
	margin: 0; 
	font: normal 0.7em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.content_shop .item_block p a { 
	font: bold 1em arial "narrow", arial; 
	color: #5f5c5c; 
} 

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

Content - ShopItem

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

.content_shopitem img { 
	float: right; 
} 

.content_shopitem h3 { 
	margin: 0; 
	font: bold 1.2em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.content_shopitem p { 
	margin-bottom: 20px; 
	font: normal 0.8em "arial narrow", arial; 
} 

.content_shopitem p a img { 
	float: none !important; 
} 

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

Content - Frame

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

.content_frame { 
} 

.content_frame .left_text { 
	float: left; 
	width: 310px; 
} 

.left_text h3 { 
	margin: 0; 
	font: bold 1.2em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.left_text p { 
	margin: 0 0 10px 0; 
	font: normal 1em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.left_text p strong { 
	font: bold 0.9em arial; 
} 

.left_text p a { 
	font: bold 0.9em arial; 
	color: #5f5c5c; 
} 

.frame_large { 
	float: left; 
	width: 304px; 
	height: 342px; 
	margin-left: 10px; 
	border: 2px solid #b4b3b3; 
} 

.frame_small { 
	position: relative; 
	float: left; 
	width: 167px; 
	height: 167px; 
	margin: 0 0 4px 10px; 
	border: 2px solid #b4b3b3; 
} 

.frame_large a, .frame_small a { 
	position: absolute; 
	right: 0; 
	bottom: 0; 
	display: block; 
	width: 58px; 
	height: 14px; 
	text-indent: -9999px; 
	background: url(../images/icon_fullsize.gif) no-repeat; 
} 

.frame_large a { 
	position: relative; 
	top: -14px; 
	left: 246px; 
} 

/* Hides from IE5-mac \*/
* html .frame_large { 
	overflow: hidden; 
} 

* html .frame_large a, * html .frame_small a {
	right: -1px; 
	bottom: -6px; 
} 
/* End hide from IE5-mac */

.frame_misc { 
	position: relative; 
	float: left; 
	width: 123px; 
	height: 167px; 
	margin: 0 0 4px 10px; 
	border: 2px solid #b4b3b3; 
} 

.color_block { 
	margin: 5px 5px 7px 5px; 
} 

.color_block span { 
	float: left; 
	width: 28px; 
	height: 28px; 
} 

.color_block .red { 
	background: red; 
} 

.color_block .green{ 
	background: green; 
} 

.color_block .yellow { 
	background: yellow; 
} 

.color_block .blue { 
	background: blue; 
} 

.frame_misc h4 { 
	margin: 0; 
	width: 123px; 
	height: 15px; 
	font: bold 0.8em "arial narrow"; 
	color: white; 
	line-height: 15px; 
	text-align: center; 
	background: #b4b3b3; 
} 

.order_button { 
	display: block; 
	margin: 5px 0; 
} 

.mediumtext {
	font: 11px Arial, Verdiana, Helvetica, sans-serif;
	color: #666666;
	}

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

Content - Gallery

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

.content_gallery { 
	padding-bottom: 30px; 
} 

.content_gallery #content_main p { 
	margin: 0; 
	font: bold 1.5em "arial narrow", arial; 
	color: #5f5c5c; 
} 

.content_gallery #content_main p a { 
	padding-right: 10px; 
	color: #5f5c5c; 
} 

#gal_thumbs { 
	width: 690px; 
	margin: 2px auto 0; 
} 

#gal_thumbs a { 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px; 
	border: 1px solid #cccccc;
} 

#gal_thumbs a:hover { 
	border: 1px solid #000000;
} 

#gal_thumbs img { 
} 

#tiers { 
	width: 950px; 
} 

#tiers img { 
	float: left; 
	margin-right: 18px; 
} 

#contactted { 
	float: left; 
	width: 305px; 
	w\idth: 285px; 
	height: 130px; 
	he\ight: 100px; 
	padding: 30px 10px 0; 
	font: bold 0.7em "arial narrow", arial; 
	color: #4c4c4c; 
	background: url(../images/bg/bg_contact_ted.gif) no-repeat; 
} 

#contactted p, #newstier p { 
	margin: 0 0 10px; 
} 

#contactted a { 
	color: #4c4c4c;
	text-decoration: none; 
} 

#newstier { 
	float: right; 
	width: 305px; 
	w\idth: 285px; 
	height: 130px; 
	he\ight: 100px; 
	padding: 30px 10px 0; 
	font: bold 0.8em "arial narrow", arial; 
	color: #4c4c4c; 
	background: url(../images/bg/bg_news.gif) no-repeat; 
} 

#newstier p span { 
	float: left; 
}

#newstier p a { 
	float: right; 
	color: #4c4c4c; 
} 

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

Footer

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

#footer {
	width: 100%; 
	margin-top: 20px; 
	font-family:"arial narrow",arial,Verdana,sans serif;
	font-size:0.85em;
}
*+html #footer {font-size:0.8em;} /* I hate you IE7... */

#footer_main { 
	padding-top: 25px; 
} 

#footer_main .squisher	{
	width: 950px; 
	margin: auto; 
}

#footer_main a { 
	color: black; 
} 

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

Miscellaneous

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

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

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

Lightbox

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

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}