/*
	Note: Use of box-sizing: border-box!

*/

button::-moz-focus-inner { 
	/*Makes <button> play the same as <a> in FF*/
    border: 0;
    padding: 0;
}
div#buttongrp{
	padding: 0.5em 1em;
	position: relative;
	text-align: center;
	}
/*Note: Addition of div.fb_button to allow compat with fileuploader.js*/
div.fb_button,
button.fb_button,
button.fb_icon,
a.fb_button,
a.fb_icon {
	cursor: pointer;
	padding: 1px 2px;
	border-top: 1px #fff solid;
	border-left: 1px #eee solid;
	border-right: 1px #ddd solid;
	border-bottom: 1px #ddd solid;
	font-weight: normal;
	position: relative;
	text-align: center;
	min-width: 1em;
	color: #000;
	text-decoration: none;
	outline: none;
	background: #C8C8C8 repeat-x left center;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 40%, rgba(0,0,0,0.2) 100%);
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	font-size: 12px;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
	zoom: 1;
	box-sizing: border-box;
	}
div.fb_button *,
button.fb_button *,
button.fb_icon *,
a.fb_button *,
a.fb_icon * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}	
button.fb_button {
	overflow: visible;
}	
a.fb_button {
	display: inline-block;
	/*padding: 1px 3px;*/
	}
a.fb_icon {
	display: inline-block;
	padding: 1px 1px;
	}

button.fb_button.larger,
a.fb_button.larger {
	font-size: 15px;
	padding: 2px 4px;
	/*
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;	
	*/
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
	}
button.fb_button.larger>span,
a.fb_button.larger>span {
	/*A bit of trickyness to try and keep the vertical balance of the icon and text when using vertically arranged sprites*/
	line-height: 13px;
	padding-top: 1px;
	/*background-position: left center;*/
	margin-top: 3px;
	padding-bottom: 5px;
}
div#buttongrp button {
	margin-right: 12px;
	}


button.development,
a.development {
	background-color: #f63;
}

div.fb_button:hover,
button.fb_button:hover,
button.fb_icon:hover,
a.fb_button:hover,
a.fb_icon:hover  {
	background-color: #b4ddf3;
	color: black;
	-webkit-transition: background-color 0.2s linear;  
	-moz-transition: background-color 0.2s linear;  
	-o-transition: background-color 0.2s linear;  
}

button.fb_button.selected,
a.fb_button.selected  {
	background-color: #6f94bf;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,.4) 100%);	
	color: black;
}

a.button.btn_disabled,
button.fb_button.btn_disabled,
a.fb_button.btn_disabled:hover,
button.fb_button.btn_disabled:hover {
	background-color: #d9d9d9;
  cursor: default;
	}

a.fb_icon.btn_disabled,
button.fb_icon.btn_disabled,
a.fb_icon.btn_disabled>span,
button.fb_icon.btn_disabled>span,
a.fb_button.btn_disabled,
button.fb_button.btn_disabled,
a.fb_button.btn_disabled>span,
button.fb_button.btn_disabled>span {
	color: #666;
	font-style: italic;
	cursor: default;
}
a.fb_icon.btn_disabled>span,
button.fb_icon.btn_disabled>span,
a.fb_button.btn_disabled>span,
button.fb_button.btn_disabled>span {
	opacity: 0.5;
}


/*
 * Interface buttons and icons
 * Share the imagery but have different layouts. icons don't display text, buttons do
 */
a.fb_icon,
a.icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 4px;
	white-space: nowrap;
	outline: none;
}
a.icon:hover>span {
	background-color: orange;
}
button.fb_icon>span,
a.fb_icon>span,
a.icon>span {
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	line-height: 16px;
	vertical-align: top;
	text-indent: -3000em;
	padding-left: 16px !important;
}
div.fb_button>span,
button.fb_button>span,
a.fb_button>span {
	display: block;
	padding-left: 4px;
	padding-right: 4px;
	background-position: left top;
	background-repeat: no-repeat;
	line-height: 16px;
	vertical-align: top;
	color: #000;
	margin: 0;
	outline: none;
}

button.add>span, a.add>span									{ padding-left: 18px;	background-image: url(../icons/twotone/plus.png);}
button.addmore>span, a.addmore>span					{ padding-left: 18px;	background-image: url(../icons/twotone/plusplus.png);}
button.alert>span, a.alert>span							{	padding-left: 18px;	background-image: url(../icons/twotone/exclaim.gif);}
button.back>span, a.back>span,
button.rewind>span, a.rewind>span						{ padding-left: 18px;	background-image: url(../icons/twotone/rewind.png);}
button.calendar>span, a.calendar>span				{ padding-left: 18px;	background-image: url(../icons/twotone/calendar.gif);}
button.close>span, a.close>span,
button.cancel>span, a.cancel>span 					{	padding-left: 18px;	background-image: url(../icons/twotone/x.png);}
button.confirm>span , a.confirm>span				{	padding-left: 18px;	background-image: url(../icons/twotone/checkmark.png);}
button.copy>span, a.copy>span								{	padding-left: 18px;	background-image: url(../icons/twotone/two-docs.png);}
button.delete>span, a.delete>span 					{ padding-left: 18px;	background-image: url(../icons/twotone/skull.png);}
button.details>span, a.details>span					{ padding-left: 18px;	background-image: url(../icons/twotone/arrow-down.png);}
button.details.open span, a.details.open>span 	{ padding-left: 18px;	background-image: url(../icons/twotone/arrow-up.png);}
button.download>span, a.download>span				{ padding-left: 18px;	background-image: url(../icons/twotone/download.png);}
button.edit>span, a.edit>span								{ padding-left: 18px;	background-image: url(../icons/twotone/edit.png); }
button.eject>span, a.eject>span							{ padding-left: 18px;	background-image: url(../icons/twotone/eject.png);}
button.email>span, a.email>span							{ padding-left: 18px;	background-image: url(../icons/twotone/mail.png);}
button.excel>span, a.excel>span							{ padding-left: 18px;	background-image: url(../icons/twotone/excel.png);}
button.external>span, a.external>span				{ padding-left: 18px;	background-image: url(../icons/twotone/external.png);}
button.eye>span, a.eye>span									{ padding-left: 18px;	background-image: url(../icons/twotone/eye.png);}
button.generate>span, a.generate>span,
button.forward>span, a.forward>span					{ padding-left: 18px;	background-image: url(../icons/twotone/fastforward.png);}
button.hide>span, a.hide>span								{ padding-left: 18px;	background-image: url(../icons/twotone/bulb.png);}
button.info>span, a.info>span								{ padding-left: 18px;	background-image: url(../icons/twotone/info.gif);}
button.left>span, a.left>span								{ padding-left: 18px;	background-image: url(../icons/twotone/arrow-left.png);}
button.load>span, a.load>span								{ padding-left: 18px;	background-image: url(../icons/twotone/load.png);}
button.lock>span, a.lock>span 							{ padding-left: 18px;	background-image: url(../icons/twotone/lock.png);}
button.login>span, a.login>span							{ padding-left: 18px;	background-image: url(../icons/twotone/user.png);}
button.move>span, a.move>span								{	padding-left: 18px;	background-image: url(../icons/twotone/move.png);}
button.new>span, a.new>span,
button.view>span, a.view>span								{ padding-left: 18px;	background-image: url(../icons/twotone/document.png);}
button.news>span, a.news>span								{ padding-left: 18px;	background-image: url(../icons/twotone/news.png);}
button.pdf>span, a.pdf>span									{ padding-left: 18px;	background-image: url(../icons/twotone/pdf.png);}
button.people>span, a.people>span						{ padding-left: 18px;	background-image: url(../icons/twotone/user.png);}
button.pin>span, a.pin>span									{ padding-left: 18px;	background-image: url(../icons/twotone/paper-clip2.gif);}
button.print>span, a.print>span							{ padding-left: 18px;	background-image: url(../icons/twotone/print.gif);}
button.question>span, a.question>span				{ padding-left: 18px;	background-image: url(../icons/twotone/question-mark.gif);}
button.refresh>span, a.refresh>span					{ padding-left: 18px;	background-image: url(../icons/twotone/refresh.png);}
button.remove>span, a.remove>span						{ padding-left: 18px;	background-image: url(../icons/twotone/minus.png);}
button.removemore>span, a.removemore>span		{ padding-left: 18px;	background-image: url(../icons/twotone/minusminus.png);}
button.report>span, a.report>span						{	padding-left: 18px;	background-image: url(../icons/twotone/template.png);}
button.right>span, a.right>span							{ padding-left: 18px;	background-image: url(../icons/twotone/arrow-right.png);}
button.safe>span, a.safe>span								{	padding-left: 18px;	background-image: url(../icons/twotone/shield.png);}
button.save>span, a.save>span,
button.update>span, a.update>span						{ padding-left: 18px;	background-image: url(../icons/twotone/save.png);}
button.search>span, a.search>span						{ padding-left: 18px;	background-image: url(../icons/twotone/search.gif);}
button.show>span, a.show>span								{ padding-left: 18px;	background-image: url(../icons/twotone/bulbon.png);}
button.switch>span, a.switch>span						{ padding-left: 18px;	background-image: url(../icons/twotone/back-forth.png);}
button.unlock>span, a.unlock>span 					{ padding-left: 18px;	background-image: url(../icons/twotone/unlock.png);}
button.unpin>span, a.unpin>span							{ padding-left: 18px;	background-image: url(../icons/twotone/paper-clip2.gif);}
button.upload>span, a.upload>span,
div.fb_button.upload>span										{ padding-left: 18px;	background-image: url(../icons/twotone/closed-folder.gif);}
button.tv>span, a.tv>span										{ padding-left: 18px;	background-image: url(../icons/twotone/tv.png);}
button.flag>span, a.flag>span								{ padding-left: 18px;	background-image: url(../icons/twotone/flag.png);}
button.quote>span, a.quote>span							{ padding-left: 18px;	background-image: url(../icons/twotone/quote.png);}
button.clock>span, a.clock>span							{ padding-left: 18px;	background-image: url(../icons/twotone/clock.png);}
button.chart>span, a.chart>span							{ padding-left: 18px;	background-image: url(../icons/twotone/chart.png);}
button.clipboard>span, a.clipboard>span			{ padding-left: 18px;	background-image: url(../icons/twotone/clipboard.png);}
button.favourite>span, a.favourite>span			{ padding-left: 18px;	background-image: url(../icons/twotone/favourite.png);}

button.fb_button.righthanded>span,
a.fb_button.righthanded>span {
	padding-right: 18px;
	padding-left: 4px;
	background-position: right top;
	text-align: left;
}


/*A couple of standard highlights for common buttons*/
button.delete, a.delete {
    background-color: #EE5555;
}
button.delete:hover, a.delete:hover {
  	background-color: red;
}
button.delete, a.cancel {
    background-color: #f6a5a5;
}
button.new, a.add, a.confirm, button.confirm {
    background-color: #c5d69f;
}

/*On Off Uses a sprite*/
button.on>span, a.on>span,
button.off>span, a.off>span							{ 	background-image: url(../icons/on-off_sprite.png); padding-left: 18px;}
button.on>span, a.on>span								{ 	background-position: left -32px;}


button div{
	color: gold;
	float: right;
	clear: none;
}

button.switchOn {
	border-top: 1px white solid;
	border-left: 1px white solid;
	border-right: 1px dimgray solid;
	border-bottom: 1px dimgray solid;
	color: black;
	padding-left:8px;
	float:left;}

button.switchOff {
	border-top: 1px white solid;
	border-left: 1px white solid;
	border-right: 1px dimgray solid;
	border-bottom: 1px dimgray solid;
	color: #5777B0;
	padding-left:8px;
	float:left;}

button .led {
	border-top: 1px dimgray solid;
	border-left: 1px dimgray solid;
	border-right: 1px white solid;
	border-bottom: 1px white solid;
	width: 5px;
	height: 5px;
	font-size:1px;
	position:absolute;
	display:inline;
	left:1px;
	top:1px;
	}

button.switchOn .led {background-color: #80ff80;}
button.switchOff .led {background-color: gray;}