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

.button {
	display: inline-block;
	
	padding: 3px 10px 6px;
	*padding: 3px 10px 4px;
	text-align: center;
	
	border: 1px solid #dfe3e8;
	border-radius: 5px;
	
	font-size: 13px;
	line-height: 15px;
	
	color: #434343;
	
	background: #fbfcfc;
	background: -moz-linear-gradient(top,  #fbfcfc 0%, #f0f2f5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfcfc), color-stop(100%,#f0f2f5));
	background: -webkit-linear-gradient(top,  #fbfcfc 0%,#f0f2f5 100%);
	background: -o-linear-gradient(top,  #fbfcfc 0%,#f0f2f5 100%);
	background: -ms-linear-gradient(top,  #fbfcfc 0%,#f0f2f5 100%);
	background: linear-gradient(top,  #fbfcfc 0%,#f0f2f5 100%);

	font-family: Verdana, sans-serif;
	cursor: pointer;
	text-decoration: none;
	
	*margin-right: 5px;
}
.button:hover { text-decoration: none; background: #f0f2f5; }
.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; }


/* Button Primary */
.button.button-primary { 
	background: #66cfff;
	background: -moz-linear-gradient(top,  #66cfff 0%, #2abcfe 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66cfff), color-stop(100%,#2abcfe));
	background: -webkit-linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
	background: -o-linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
	background: -ms-linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
	background: linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
	
	border: 1px solid #27ace8;
	
	color: #fff;
}
.button.button-primary:hover { background: #2abcfe; }


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


/* Button Write */
.button.button-write { 
	background: #66cfff;
	background: -moz-linear-gradient(top,  #66cfff 0%, #2abcfe 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66cfff), color-stop(100%,#2abcfe));
	background: -webkit-linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
	background: -o-linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
	background: -ms-linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
	background: linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
	
	border: 1px solid #27ace8;
	
	padding: 2px 15px 4px;
	border-radius: 15px;
	line-height: 17px;
	
	color: #fff;
	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%);

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


/* Button Small */
.button.button-small { font-size: 11px; padding: 1px 7px 3px; }


/* Button Action */
.button.button-action {
	border: none;
	padding: 4px 4px 3px;
	
	background: #c8f5ff;
	background: -moz-linear-gradient(top,  #c8f5ff 0%, #88c4ea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8f5ff), color-stop(100%,#88c4ea));
	background: -webkit-linear-gradient(top,  #c8f5ff 0%,#88c4ea 100%);
	background: -o-linear-gradient(top,  #c8f5ff 0%,#88c4ea 100%);
	background: -ms-linear-gradient(top,  #c8f5ff 0%,#88c4ea 100%);
	background: linear-gradient(top,  #c8f5ff 0%,#88c4ea 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.active, 
.button.button-action:hover { 
	border: 1px solid #2770e8;
	box-shadow: 0 -1px 0 #128af3 inset, 0 2px 2px #ddd;
	color: #fff;
	padding: 3px 3px 2px;

	background: #228dfa;
	background: -moz-linear-gradient(top,  #228dfa 0%, #0362eb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#228dfa), color-stop(100%,#0362eb));
	background: -webkit-linear-gradient(top,  #228dfa 0%,#0362eb 100%);
	background: -o-linear-gradient(top,  #228dfa 0%,#0362eb 100%);
	background: -ms-linear-gradient(top,  #228dfa 0%,#0362eb 100%);
	background: linear-gradient(top,  #228dfa 0%,#0362eb 100%);
}
.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; }