.bb_button{

	/* A semi-transparent text shadow */
	text-shadow:1px 1px 0 rgba(255,255,255,0.4);
	font-family:B Homa;
	font-size:14px;
	/* Overriding the default underline styling of the links */
	text-decoration:none !important;
	white-space:nowrap;
	
	display:inline-block;
	vertical-align:baseline;
	position:relative;
	cursor:pointer;
	padding:7px 20px !important;
	
	background-repeat:no-repeat;

	/* The following two rules are fallbacks, in case
	   the browser does not support multiple backgrounds. */

	background-position:bottom left;
	background-image:url('../images/bb_button_bg.png');
	
	/* Multiple backgrounds version. The background images
	   are defined individually in color classes */
	
	background-position:bottom left, top right, 0 0, 0 0;
	background-clip:border-box;
	
	/* Applying a default border raidus of 8px */
	
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	
	/* A 1px highlight inside of the button */
	
	-moz-box-shadow:0 0 1px #fff inset;
	-webkit-box-shadow:0 0 1px #fff inset;
	box-shadow:0 0 1px #fff inset;
	
	/* Animating the background positions with CSS3 */
	/* Currently works only in Safari/Chrome */
	
	-webkit-transition:background-position 2s;
	-moz-transition:background-position 2s;
	transition:background-position 2s;
}

.bb_button:hover{
		font-family:B Homa;
	font-size:14px;
	/* The first rule is a fallback, in case the browser
	   does not support multiple backgrounds
	*/
	
	background-position:top left;
	background-position:top left, bottom right, 0 0, 0 0;
}

.bb_button:active{
	/* Moving the button 1px to the bottom when clicked */
	bottom:-1px;	font-family:B Homa;
	font-size:14px;
}

/* The three buttons sizes */

.bb_button.bb_big		{ font-size:30px;	font-family:B Homa;
	font-size:14px;}
.bb_button.bb_medium	{ font-size:18px;	font-family:B Homa;
	font-size:14px;}
.bb_button.bb_small	{ font-size:13px;	font-family:B Homa;
	font-size:14px;}

/* A more rounded button */

.bb_button.bb_rounded{
	-moz-border-radius:4em;
	-webkit-border-radius:4em;
	border-radius:4em;	font-family:B Homa;
	font-size:14px;
}


/* Defining four button colors */


/* BlueButton */

.bb_blue.bb_button{	font-family:B Homa;
	font-size:14px;
	color:#0f4b6d !important;
	
	border:1px solid #84acc3 !important;
	
	/* A fallback background color */
	background-color: #48b5f2;
	
	/* Specifying a version with gradients according to */
	
	background-image:	url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'),
						-moz-radial-gradient(	center bottom, circle,
												rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
						-moz-linear-gradient(#4fbbf7, #3faeeb);

	background-image:	url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'),
						-webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,
											from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
						-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.bb_blue.bb_button:hover{	font-family:B Homa;
	font-size:14px;
	background-color:#63c7fe;
	
	background-image:	url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'),
						-moz-radial-gradient(	center bottom, circle,
												rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
						-moz-linear-gradient(#63c7fe, #58bef7);
						
	background-image:	url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'),
						-webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,
											from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
						-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

/* Green Button */

.bb_green.bb_button{	font-family:B Homa;
	font-size:14px;
	color:#345903 !important;
	border:1px solid #96a37b !important;	
	background-color: #79be1e;
	
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.bb_green.bb_button:hover{	font-family:B Homa;
	font-size:14px;
	background-color:#89d228;
	
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}

/* Orange Button */

.bb_orange.bb_button{	font-family:B Homa;
	font-size:14px;
	color:#693e0a !important;
	border:1px solid #bea280 !important;	
	background-color: #e38d27;
	
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.bb_orange.bb_button:hover{	font-family:B Homa;
	font-size:14px;
	background-color:#ec9732;
	
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.bb_gray.bb_button{	font-family:B Homa;
	font-size:14px;
	color:#525252 !important;
	border:1px solid #a5a5a5 !important;	
	background-color: #a9adb1;
	
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.bb_gray.bb_button:hover{	font-family:B Homa;
	font-size:14px;
	background-color:#b6bbc0;
	
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
	background-image:url('../images/bb_button_bg.png'), url('../images/bb_button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
/* ----- ---- --- -- -  Red - -- --- ---- ----- */

.bb_button.bb_red{
	background: #e6433d;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8674b), to(#d54746));
	background: -moz-linear-gradient(top, #f8674b, #d54746);
	border-color: #d1371c #d1371c #9f220d;
	color: #fff;
	text-shadow: 0 1px 1px #961a07;
	-webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573;
	-moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573;
	box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573;    
}
.bb_button.bb_red:hover, .bb_button.bb_red:focus{
	background: #dd3a37;
	background: -webkit-gradient(linear, left top, left bottom, from(#ff7858), to(#cc3a3b));
	background: -moz-linear-gradient(top, #ff7858, #cc3a3b);
	border-color: #961a07;
	-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573;
	-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573;
	box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573;    
}
.bb_button.bb_red:active{
	background: #e6433d;
	border-color: #961a07;
	-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07;
	-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07;
	box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07;
}
/* ----- ---- --- -- -  Black - -- --- ---- ----- */

.bb_button.bb_black{
	background: #525252;
	background: -webkit-gradient(linear, left top, left bottom, from(#5e5e5e), to(#434343));
	background: -moz-linear-gradient(top, #5e5e5e, #434343);
	border-color: #4c4c4c #313131 #1f1f1f;
	color: #fff;
	text-shadow: 0 1px 1px #2e2e2e;
	-webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686;
	-moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686;
	box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686;    
}
.bb_button.bb_black:hover, .bb_button.bb_black:focus{
	background: #4b4b4b;
	background: -webkit-gradient(linear, left top, left bottom, from(#686868), to(#363636));
	background: -moz-linear-gradient(top, #686868, #363636);
	border-color: #313131;
	-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686;
	-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686;
	box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686;    
}
.bb_button.bb_black:active{
	background: #525252;
	border-color: #313131;
	-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131;
	-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131;
	box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131;
}

/* ----- ---- --- -- -  Grey - -- --- ---- ----- */

.bb_button.bb_grey{
	background: #969696;
	background: -webkit-gradient(linear, left top, left bottom, from(#ababab), to(#818181));
	background: -moz-linear-gradient(top, #ababab, #818181);
	border-color: #a0a0a0 #7c7c7c #717171;
	color: #fff;
	text-shadow: 0 1px 1px #444;
	-webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe;
	-moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe;
	box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe;    
}
.bb_button.bb_grey:hover, .bb_button.bb_grey:focus{
	background: #868686;
	background: -webkit-gradient(linear, left top, left bottom, from(#b0b0b0), to(#6f6f6f));
	background: -moz-linear-gradient(top, #b0b0b0, #6f6f6f);
	border-color: #666 #666 #606060;
	-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe;
	-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe;
	box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe;    
}
.bb_button.bb_grey:active{
	background: #909090;
	border-color: #606060;
	-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060;
	-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060;
	box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060;
}