/* ------------------bike shop css starts------------------------- */
/* custom bike */
#custombike,#shopwrapper{
width:800px;
height:533px;
position:relative;
}
.component{
position:absolute;left:0;top:0;
width:800px;
height:533px;
zoom:1;
}
.loading,#loading{
left:263px;
position:absolute;
text-align:center;
top:200px;
z-index:9999;
}

img{border:0;}
map{z-index:999}

/*
controls
the css of the controls part below bike application.
*/
#controls{
/* 
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.

*/
	#size_wrap{
    height: 150px;
    position: absolute;
    top: -543px;
    width: 200px;
	}
	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:12px;font-weight:bold;
			}
			.size_name{
			font-size:18px;
			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:#be1e2d}
			.size_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:relative;
	top:0px;
	width:135px;
	height:80px;
	float:left;
	background:transparent url(../images/build_back.jpg) no-repeat 30px top;
	}
		#build a:hover{
		background-color:white;
		}
		#random_build_button{
			color:black;
			border:2px solid black;
			
			position:absolute;
			top:0px;left:0px;
			}	
		.border-button{
			width:100px;
			height:40px;
			display:block;
			line-height:40px;
			text-align:center;
			letter-spacing:.01em;
			font-size:16px;
			text-decoration:none;
			font-weight:bold;
			
		}
		#popular_select{
		position:absolute;top:60px;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:535px;
	font-size:10px;
	line-height:14px;
	color:#726d67;
	float:left;
	}
		.seleced_component:hover{
		border-bottom:1px solid #ffffff;
		border-radius:4px;
		}
		.seleced_component{
		width:90px;
		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;
		}
			.component_name{
			color:#242424;
			text-indent:5px;
			text-shadow:0 0 1px #777;
			width:65px;
			}
			.component_color{
			width:150px;
			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:18px;
				left:-35px;
				background-color:rgb(255,255,255);
				background-color:rgba(255,255,255,.8);
				border-radius: 4px; 
				-webkit-box-shadow: 1px 1px 5px #474747;
				-moz-box-shadow: 1px 1px 5px #474747;
				box-shadow: 1px 1px 5px #474747; 
				-moz-border-radius: 4px;
				border-radius: 4px;
				z-index: 99;
				}

			.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:13px;
				line-height:25px;
				text-shadow:0px 0px 1px #777777;
				text-decoration:none;
				}
					.active .color_swatch{
						width:20px;
						height:10px;
						display:block;
						top:0;
						right:0;
						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:relative;
	width:115px;
	float:left;
	height:95px;
	}
		#shop_link{
			
			position:absolute;
			left:5px;
			color:black;
			border:2px solid black;
			}
		#share_link{
			
			position:absolute;
			left:5px;top:55px;
			color: #be1e2d;
			border:2px solid #be1e2d;
			}
/*
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:9999;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:#be1e2d}