body {
	background-color: #ffffff;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
body:-webkit-full-screen	{ background-color:#ffffff }
body:-moz-full-screen		{ background-color:#ffffff }
body:-ms-full-screen		{ background-color:#ffffff }
body:-o-full-screen		{ background-color:#ffffff }
body:full-screen			{ background-color:#ffffff }
table, td, tr, select {
	font-family : Arial, Helvetica, sans-serif;
	font-size : 15px;
	color : #333333;
	line-height : 22px;
}
.header_large, a.header_large, a.header_large:hover, h2 {
	font-family: Arial, Helvetica, sans-serif; font-size: 58px; color: #333333; font-weight: bold; letter-spacing: -4px; text-decoration:none; line-height: 58px;
}
.header_small, a.header_small, a.header_small:hover {
	font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #666666; font-weight: bold; letter-spacing: -1.5px; text-decoration:none; line-height: 24px;
}
.subheading, h3, a.subheading {
	font-family: Arial, Helvetica, sans-serif; font-size: 21px; color: #666666; font-weight: bold; letter-spacing: -1px; text-decoration:none; line-height: 24px;
}
.specifications {
	font-size: 9px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 10px;
}
.price {
	font-family: Arial, Helvetica, sans-serif; font-size: 48px; color: #000000; font-weight: bold; letter-spacing: -2px; line-height: 54px;
}
.footer {
	font-family : Arial, Helvetica, sans-serif; font-size : 13px; color : #333333; line-height : 16px;
}
.button_background {
	background:url(images/spacer.gif); 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 20px; 
	color:#666666; 
	font-weight: normal;
	margin: 2px;
	padding: 8px;
	text-decoration:none; 
	border: 2px solid;
}
.button_shop {
	background:url(images/spacer.gif); 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 20px; 	
	margin: 2px;
	text-decoration: none;
	font-weight: bold;
	padding: 8px;
	color: #c03f64;
	background-color: #d2dee1;
	border: 2px solid #c03f64;
	height: 45px;
}
.button_cart {
	background:url(images/spacer.gif); 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 20px; 	
	margin: 2px;
	text-decoration: none;
	font-weight: bold;
	padding: 8px;
	color: #c03f64;
	background-color: #fff;
	border: 2px solid #c03f64;
	height: 45px;
}
.tiny {
	font-size: 9px; font-family: Arial, Helvetica, sans-serif;	line-height: 10px;
}
.tiny_pink, a.tiny_pink, a.tink_pink:hover {
	font-size: 9px; font-family: Arial, Helvetica, sans-serif;	line-height: 10px; text-decoration: none; color: #E06985; 
}
.small {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 11px;
	text-align: center;
}
.error, a.error, a.error:hover {
	font-size : 15px;
	text-decoration : none;
	color : #990000;
	font-weight: bold;
	letter-spacing : 0 px;
}
input.shaded, select.shaded {
	font-family: Arial, Helvetica, sans-serif;
	font-size : 15px;
	color : black;
	background-color: #FFFFCC;
	}
input.shaded_inactive, select.shaded_inactive {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #666666;
	background-color: #CCCCCC;
}
input.shaded[class], input.shaded_inactive[class] {
	padding: 6px;
}
input.shadow, textarea.shadow, select.shadow{
  border: 1px solid #ccc;
  background-image: url(../images/bg_inputs.png);
  background-repeat: no-repeat;
  font-family: arial, helvetica, sans-serif;
  font-size: 15px;
  background-color: #FFF;
}
input.shadow[class] {
  padding: 6px;
}
input.shadow:hover, select.shadow:hover {
  border: 1px solid #515151;
}
input.shadow:focus, textarea.shadow:focus, select.shadow:focus {
  border: 1px solid #515151;
}
/* root element for tabs  */
ul.css-tabs {  
	margin: 0 !important; 
	padding: 0px;
	height: 25px;
	/* border-bottom: 4px solid #E06985; */
}

/* single tab */
ul.css-tabs li {  
	float: right;	 
	padding: 4px; 
	margin: 0;
	height: 25px;
	list-style-type:none;	
}

/* link inside the tab. uses a background image */
ul.css-tabs a { 
	text-decoration: none;
	font-weight: bold;
	padding: 8px;
	color: #c03f64;
	background-color: #d2dee1;
	border: 2px solid #c03f64;
	height: 25px;
}

ul.css-tabs a:hover {
	background-color: #fff;
	height: 25px;
	color: #E06985;
}
	
/* selected tab */
ul.css-tabs a.current {
	background-color: #fff;
	border: 2px solid #E06985;	
	color: #E06985;
	padding: 8px;
	height: 25px;
	cursor:default;

}
/* tab pane */
div.css-panes div {
	display:none;	
	min-height:100px;
}

/* ------------------bike shop css starts------------------------- */
/* custom bike */
#custombike,#shopwrapper{
width:1000px;
height:720px;
position:relative;
}
#custombike:-moz-full-screen		{ background-color:#ffffff;width:100% ;min-height:100%;}
#custombike:-webkit-full-screen	{ background-color:#ffffff;width:100%;min-height:100%; }
#custombike:-ms-full-screen		{ background-color:#ffffff;width:100%;min-height:100%; }
#custombike:-o-full-screen		{ background-color:#ffffff;width:100%;min-height:100%; }
#custombike:full-screen			{ background-color:#ffffff;width:100%;min-height:100%; }

#custombike:-moz-full-screen	#controls	{ 
	top:auto;
	bottom: 15px;
    height: 77px;
    left: 15px;
    position: fixed;}
#custombike:-webkit-full-screen	#controls		{ 
	top:auto;
	bottom: 15px;
    height: 77px;
    left: 15px;
    position: fixed; }
#custombike:-ms-full-screen	#controls		{
	top:auto;
	bottom: 15px;
    height: 77px;
    left: 15px;
    position: fixed;}
#custombike:-o-full-screen	#controls		{
	top:auto;
	bottom: 15px;
    height: 77px;
    left: 15px;
    position: fixed; }
#custombike:full-screen	#controls			{
	top:auto;
	bottom: 15px;
    height: 77px;
    left: 15px;
    position: fixed; }
	
#custombike:-moz-full-screen	#rightEle	{ 
	position: fixed;
    right: 15px;
    top: 15px;}
#custombike:-webkit-full-screen	#rightEle		{ 
	position: fixed;
    right: 15px;
    top: 15px; }
#custombike:-ms-full-screen	#rightEle		{
	position: fixed;
    right: 15px;
    top: 15px;}
#custombike:-o-full-screen	#rightEle	{
	position: fixed;
    right: 15px;
    top: 15px; }
#custombike:full-screen	#rightEle		{
	position: fixed;
    right: 15px;
    top: 15px; }
#shopwrapper{
border:0;
margin-top:10px;
}
.component{
position:absolute;left:0;top:0;
width:800px;
height:533px;
zoom:1;
}
.loading{
left:50%;
margin-left:-60px;
position:absolute;
text-align:center;
top:200px;
z-index:99;
}
a#fs{
font-family: 'bebas-neue';
color: #242424;
font-size: 20px;
font-weight: normal;
left: 10px;
padding: 0 30px;
position: absolute;
text-decoration: none;
top: 14px;
z-index: 100;
text-transform:uppercase;
display:none;
}
a#fs{
background: url(../images/fs.png) no-repeat 8px 0px;
}
a#fsave{
z-index: 100;
left: 10px;
top: 16px;
position: absolute;
color: #000;
border: 2px solid #000;
}
#socicons{
left: 8px;
top: 65px;
position: absolute;
z-index: 100;
cursor:pointer;
}
#socicons img{
margin:0 1px;
height:25px;
width:25px;
}
img{border:0;}
map{z-index:99}

/*
controls
the css of the controls part below bike application.
*/
#controls{
z-index: 100;
width:972px;
height:77px;
left:15px;
top:640px;
position:relative;
/* 
this is the whole box containing all other controls
1. 'size_wrap' : box having size select and bike name.
2. 'build' : box having random build button and popular build select.
3. 'selected_build' : box having different component names and currently selected colors
4. 'cart_links' : this is the box having share and cart butons.
*/
}

/* 
1. 'size_wrap' : box having size select and bike name.

This box has 'size_item' s inside it, each size_item has a size_name(Large) size_radio_wrap(radiobutton) and size_value[59cm (riders 5'8"-6'+)]
This box also has bike_name at top and help_wait at bottom.

*/
	#rightEle{
    position: absolute;
    right: 0;
    top: -635px;
    width: 200px;
	z-index:99;
	background-color: rgba(255, 255, 255, 0.5);
    padding: 5px;
	}
	#size{
		margin-top:20px;
		margin-bottom:20px;
		}
	h2#bike_name{
	margin:0;padding:0;
	font-size:23px;
	letter-spacing:-0.04em;
	line-height:23px;
	}
		.size_item{
		height:22px;
		}
			.size_item .pink{
			/* style for select size */
			font-size:20px;
			font-weight:bold;
			color:#bf1e2d;
			}
			.size_name{
			font-size: 16px;
			color:black;
			width:70px;height:20px;
			float:left;
			text-align:left;
			}
			.size_radio{
			}
			.size_radio_wrap{
			width:20px;height:20px;
			float:left;
			}
			
			.size_value .pink{color:#E06985}
			.size_value{
			font-size: 14px;
			width:110px;
			float:left;
			font-weight:bold;
			color:#726D67;
			}
		.option_item{
		height:22px;
		}
			.option_item .pink{
			/* style for select option */
			font-size: 20px;
			font-weight:bold;
			color: #bf1e2d;
			}
			.option_name{
				font-size: 16px;
			color:black;
			width:175px;height:20px;
			float:left;
			text-align:left;
			}
			.option_radio{
			}
			.option_radio_wrap{
			width:20px;height:20px;
			float:left;
			}
			
			.option_value .pink{color:#E06985}
			.option_value{
			width:110px;
			float:left;
			font-weight:bold;
			font-size:12px;
			color:#726D67;
			}
		p.help_wait{
		padding:5px 38px;
		margin:0;
		font-size:12px;line-height:12px;color:#444;
		}
		
	/*
 	2. 'build' : box having random build button and popular build select. 
	This box has random_build button and popular_select in it.Both are absolutely positioned.
	This div also introduces a class of buttons called border_button with a fixed width and height.
	Buttons which vary this format can be custom formatted using id, for example pink color of share button.
	
	*/
	#build{
	position: absolute;
	top: -530px;
	left: -5px;
	width:135px;
	height:80px;
	float:left;
	background:transparent url(../images/build_back.png) no-repeat 114px 7px;
	}
		#build a:hover{
		background-color:white;
		}
		#random_build_button{
			color:black;
			border:2px solid black;
			
			position:absolute;
			top:0px;left:0px;
			}	
		.border-button{
			font-family: 'bebas-neue';
			width:100px;
			height:40px;
			line-height:42px;
			display:block;
			text-align:center;
			font-size:22px;
			text-decoration:none;
			font-weight:normal;
		}
		#popular_select{
		position:absolute;top:50px;left:0px;
		font-size:10px;
		width:104px;
		}
	/*
 	3. '#selected_build' : box having different component names and currently selected colors .
	This box has '.selected_component' s inside it one below other.
		each selected_component has '.component_name' (frame,saddle..) and '.component_color'(white,None Selected..).
			the component_color link is tagged as '.selected_color_link' to swap its color between pink and black.
	*/
	#selected_build{
	width:1000px;
	font-size:10px;
	line-height:14px;
	color:#726d67;
	position:absolute;
	left:0px;
	bottom:10px;
	z-index:99;
	}
		.seleced_component:hover{
		border-bottom:1px solid #ffffff;
		/* border-radius:4px; */
		}
		.seleced_component{
		width:120px;
		float:left;
		position:relative;
		padding-bottom:5px;
		
		border:1px solid transparent;
		border-top:0;
		border-bottom:1px solid black;
		margin-bottom:3px;
		margin-right:15px;
		padding:5px 10px;
		}
			.component_name{
				margin-left: -10px;
			font-size:18px;
			color:#242424;
			text-indent:5px;
			text-shadow:0 0 1px #777;
			width:65px;
			}
			h3.component_color{
			text-transform:uppercase;
			border-radius: 4px 4px 0 0;
			padding: 8px 10px;
			height: auto;
			margin: -1px;
			display: block;
			width: 100%;
			background: #FFF;
			display: block;
			opacity: 0.8;
			border-bottom: #CCC solid 1px;
			width: auto;
			color: #FFF;
			background: #bf1e2d;
			font-size: 1em;
			}
			.component_color{
			width:200px;
			height:30px;
			display:none;
			margin:5px;
			position:relative
			}
			.seleced_component:hover .component_color{
			}
			.seleced_component:hover{
			background-color:rgb(255,255,255);
			background-color:rgba(255,255,255,.8);
							-webkit-box-shadow: inset 0px 1px 5px #808080;
				-moz-box-shadow: inset 0px 1px 5px #808080;
				box-shadow: inset 0px 1px 5px #808080; 
			}
			.component_colors{
				position:absolute;
				bottom:25px;
				left:-35px;
				background-color:rgb(255,255,255);
				background-color:rgba(255,255,255,.8);
				-webkit-box-shadow: 1px 1px 5px #474747;
				-moz-box-shadow: 1px 1px 5px #474747;
				box-shadow: 1px 1px 5px #474747; 
/* 				border-radius: 4px; 
				-moz-border-radius: 4px;
				border-radius: 4px; */
				}

			.component_color.active{
			margin:0;
			width:90px;
			height:15px;
			left:32px;
			display:block;
			position:absolute;
			bottom:-18px;
			background:none;
			}
			.color_name{
				text-transform:capitalize;
				}
			.component_color.active .color_name{
				display:none;
				}
			.component_color:hover{
background: #F4F4F4; /* old browsers */

background: -moz-linear-gradient(top, #F4F4F4 0%, #D3D3D3 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#D3D3D3)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F4F4F4', endColorstr='#D3D3D3',GradientType=0 ); /* ie */
/* 				border-radius: 4px; 
				-moz-border-radius: 4px; */
				-webkit-box-shadow:  0px 1px 3px #808080;
				-moz-box-shadow:  0px 1px 3px #808080;
				box-shadow: 0px 1px 3px #808080; 
}
			.component_color:active,.component_color:focus{
background: #E0E0E0; /* old browsers */

background: -moz-linear-gradient(top, #E0E0E0 0%, #EFEFEF 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E0E0E0), color-stop(100%,#EFEFEF)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E0E0E0', endColorstr='#EFEFEF',GradientType=0 ); /* ie */
				-webkit-box-shadow: inset 0px 1px 5px #808080;
				-moz-box-shadow: inset 0px 1px 5px #808080;
				box-shadow: inset 0px 1px 5px #808080; 
				}
			.component_color.active:hover{
				background:none transparent;

				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none; 
				
				
				}
				.selected_color_link:focus{
					outline:none;
					}
				.selected_color_link{
				padding-left:5px;
				color:#242424;
				font-size:18px;
				line-height:30px;
				text-shadow:0px 0px 1px #777777;
				text-decoration:none;
				}
					.active .color_swatch{
width: 50px;
height: 21px;
display: block;
top: -5px;
right: -45px;
border: 1px solid black;
						}
					.color_swatch{
						width:30px;
						height:20px;
						display:block;
						float:right;
						border:1px solid black;
						position:absolute;
						top:4px;
						right:4px;
						}
	/*
	4. 'cart_links' : this is the box having share and cart butons. 
	This box has '#shop_link' (+ cart) and '#share_link' (+share) inside it. both absolutely positioned.
	*/
	#cart_links{
	position:absolute;
	width:115px;
	right:-10px;
	height:41px;
	top:20px;
	}
		#shop_link{
			
			position:absolute;
			left:10px;
			top:-90px;
			color:black;
			border:2px solid black;
			}
		#share_link{
			
			position:absolute;
			left:130px;top:0px;
			color: #E06985;
			border:2px solid #E06985;
			}
/*
extra elements used in application
'#freezer' : used to create a div above all to avoid clicking when popup window is showing.application can continue only after clicking 'ok' in popup.

'#popup' : obviously, popup showing 'all colors are not yet selected.
*/
		#freezer{display:none;z-index:99;position:absolute;top:0;left:0;}
		#popup{
		-moz-box-shadow:0 0 10px black;
		-webkit-box-shadow:0 0 10px black;
		position:absolute;
		top:175px;
		left:235px;
		width:375px;
		height:225px;
		background:url(../images/bg_pattern_01.gif);
		
		}
			#popupinner{
			margin:30px;
			width:315px;
			height:165px;
			background-color:white;
			}
			.ralign{text-align:right}
			#popupclose{
			color:#444;
			text-decoration:none;
			font-size:12px;
			padding:5px 10px;
			border:1px solid #ddd;
			}
			#popup p{
			padding:30px 30px 0;
			margin:0;
			}
/*.component img is the main images used in application, this is made absolute so that all images overlap one over other
 even on errors instead of popping out of application,just a security measure!!*/			
.component img{
position:absolute;
}	
/*this is the pink used extensively in application*/
.pink{color:#E78DA2}