/* -------------------------------------------------------------------
	
	КНОПКИ
	
	
	Примеры использования:
	
	<button class="button">Preview</button>
	<a href="#" class="button">Preview</a>
	
	<button class="button button-primary">Save</button>
	
------------------------------------------------------------------- */

.button {
	display: inline-block;
	padding: 7px 14px 10px;
	*padding: 3px 10px 4px;
	text-align: center;
	border: 1px solid #babdb2;
	font-size: 18px;
	line-height: 15px;
	color: #434343;
	background: #babdb2;
	font-family: Verdana, sans-serif;
	cursor: pointer;
	text-decoration: none;
	*margin-right: 5px;
}
.button:hover { text-decoration: none; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.5); }
.button:active { 
	-moz-box-shadow: 	0 0 3px rgba(0, 0, 0, .3) inset; 
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3) inset; 
	box-shadow: 		0 0 3px rgba(0, 0, 0, .3) inset; 
}
.button.fl-r { *margin-right: 0; }

.opera .button { padding-top: 4px; padding-bottom: 5px; }

/* Button Primary */
.button.button-primary { background: #3b4045; border: 1px solid #3b4045; color: #babdb2; }

/* Button Icon (Without text) */
.button.button-icon { padding: 7px 10px; }

/* Button Write */
.button.button-write { 
	background: #66cc66;
	background: -moz-linear-gradient(top,  #66cc66 0%, #57b857 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66cc66), color-stop(100%,#57b857));
	background: -webkit-linear-gradient(top,  #66cc66 0%,#57b857 100%);
	background: -o-linear-gradient(top,  #66cc66 0%,#57b857 100%);
	background: -ms-linear-gradient(top,  #66cc66 0%,#57b857 100%);
	background: linear-gradient(top,  #66cc66 0%,#57b857 100%);
	border: 1px solid #f8f8f8;
	padding: 2px 15px 4px;
	border-radius: 15px;
	line-height: 17px;
	color: #f8f8f8;
	font-size: 11px;
}
.button.button-write:hover { 
	background: #4ec4ff;
	background: -moz-linear-gradient(top,  #4ec4ff 0%, #22b3fe 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ec4ff), color-stop(100%,#22b3fe));
	background: -webkit-linear-gradient(top,  #4ec4ff 0%,#22b3fe 100%);
	background: -o-linear-gradient(top,  #4ec4ff 0%,#22b3fe 100%);
	background: -ms-linear-gradient(top,  #4ec4ff 0%,#22b3fe 100%);
	background: linear-gradient(top,  #4ec4ff 0%,#22b3fe 100%);

	-webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset; box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset;
}


/* Button Small */
.button.button-small {background: #61ba74; border: 0px solid #63c963; color: #fff; font-size: 11px; padding: 1px 7px 3px; }


/* Button Action */
.button.button-action {
	border: none;
	padding: 4px 4px 3px;
	/*border: 1px solid #38ac38;*/

	background: #96d0a1;
/*	background: -moz-linear-gradient(top,  #66cc66 0%, #83dc5f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66cc66), color-stop(100%,#83dc5f));
	background: -webkit-linear-gradient(top,  #66cc66 0%,#83dc5f 100%);
	background: -o-linear-gradient(top,  #66cc66 0%,#83dc5f 100%);
	background: -ms-linear-gradient(top,  #66cc66 0%,#83dc5f 100%);
	background: linear-gradient(top,  #66cc66 0%,#83dc5f 100%);*/
}
.button.button-action span { display:none; }
.button.button-action:hover span { display: inline; padding: 0 5px 0 5px; position: relative; top: -2px; color: #fff; }

.button.button-action.button-action-add-friend:hover i { background-position: -147px -39px; }
.button.button-action.button-action-send-message:hover i { background-position: -163px -39px; }
.button.button-action.button-action-join.active i,
.button.button-action.button-action-join:hover i { background-position: -179px -39px; }

.button.button-action.button-action-note {
	background: #ccf4d0;
	background: -webkit-linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
	background: -moz-linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
	background: -o-linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
	background: -ms-linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
	background: linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
	padding: 6px 6px 6px 7px;
}
.button.button-action.button-action-note:hover {
	background: #4ace56;
	background: -webkit-linear-gradient(top,  #6ce777 0%,#4ace56 100%);
	background: -moz-linear-gradient(top,  #6ce777 0%,#4ace56 100%);
	background: -o-linear-gradient(top,  #6ce777 0%,#4ace56 100%);
	background: -ms-linear-gradient(top,  #6ce777 0%,#4ace56 100%);
	background: linear-gradient(top,  #6ce777 0%,#4ace56 100%);
	border: none;
	box-shadow: none; -webkit-box-shadow: none;
	padding: 6px 6px 6px 7px;
	cursor: default;
}
.button.button-action.button-action-note i { display: block; }
.button.button-action.button-action-note:hover i { top: 0; background-position: -46px -65px; }