/*
	Button Set created by Sawyer Hollenshead for Mozilla Persona
	http://dev.sawyerhollenshead.com/mozilla/buttons/buttons.html
	http://sawyerhollenshead.com/
	
*/

/* Link body */
.persona-button{
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1.1;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);

	background: #297dc3;
	background: -moz-linear-gradient(top, #43a6e2, #287cc2);
	background: -ms-linear-gradient(top, #43a6e2, #287cc2);
	background: -o-linear-gradient(top, #43a6e2, #287cc2);
	background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
	background: linear-gradient(top, #43a6e2, #287cc2);

	-moz-border-radius: 	3px;
	-ms-border-radius: 		3px;
	-o-border-radius: 		3px;
	-webkit-border-radius: 	3px;
	border-radius: 			3px;

	-moz-box-shadow: 	0 1px 0 rgba(0,0,0,0.2);
	-ms-box-shadow: 	0 1px 0 rgba(0,0,0,0.2);
	-o-box-shadow: 		0 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 		0 1px 0 rgba(0,0,0,0.2);
}

.persona-button:hover{
	background: #21669f;
	background: -moz-linear-gradient(top, #3788b9, #21669f);
	background: -ms-linear-gradient(top, #3788b9, #21669f);
	background: -o-linear-gradient(top, #3788b9, #21669f);
	background: -webkit-linear-gradient(top, #3788b9, #21669f);
	background: linear-gradient(top, #3788b9, #21669f);
}

.persona-button:active, .persona-button:focus{
	top: 1px;
	-moz-box-shadow: 	none;
	-ms-box-shadow: 	none;
	-o-box-shadow: 		none;
	-webkit-box-shadow: none;
	box-shadow: 		none;
}

.persona-button span{
	display: inline-block;
	padding: 5px 10px 5px 40px;
}

/* Icon */
.persona-button span:after{
	background: url(logo.png) 10px center no-repeat;
	content: '';
	display: block;
	width: 31px;
	
	position: absolute;
	bottom: 0;
	left: -3px;
	top: 0;
	z-index: 10;
}

/*  Icon background */
.persona-button span:before{
	content: '';
	display: block;
	height: 100%;
	width: 20px;

	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	z-index: 1;

	background: #42a9dd;
	background: -moz-linear-gradient(top, #50b8e8, #3095ce);
	background: -ms-linear-gradient(top, #50b8e8, #3095ce);
	background: -o-linear-gradient(top, #50b8e8, #3095ce);
	background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
	background: linear-gradient(top, #50b8e8, #3095ce);

	-moz-border-radius: 	3px 0 0 3px;
	-ms-border-radius: 		3px 0 0 3px;
	-o-border-radius: 		3px 0 0 3px;
	-webkit-border-radius: 	3px 0 0 3px;
	border-radius: 			3px 0 0 3px;
}

/* Triangle */
.persona-button:before{
	background: #42a9dd;
	content: '';
	display: block;
	height: 26px;
	width: 26px;

	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -13px;
	z-index: 0;

	background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
	background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
	background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
	background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
	background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */

	-moz-box-shadow: 	1px -1px 1px rgba(0,0,0,0.1);
	-ms-box-shadow: 	1px -1px 1px rgba(0,0,0,0.1);
	-o-box-shadow: 		1px -1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
	box-shadow: 		1px -1px 1px rgba(0,0,0,0.1);

	-moz-transform: 	rotate(45deg);
	-ms-transform: 		rotate(45deg);
	-o-transform: 		rotate(45deg);
	-webkit-transform: 	rotate(45deg);
	transform: 			rotate(45deg);
}

/* Inset shadow (required here because the icon background clips it when on the `a` element) */
.persona-button:after{
	content: '';
	display: block;
	height: 100%;
	width: 100%;

	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 10;

	-moz-border-radius: 	3px;
	-ms-border-radius: 		3px;
	-o-border-radius: 		3px;
	-webkit-border-radius: 	3px;
	border-radius: 			3px;

	-moz-box-shadow: 	inset 0 -1px 0 rgba(0,0,0,0.3);
	-ms-box-shadow: 	inset 0 -1px 0 rgba(0,0,0,0.3);
	-o-box-shadow: 		inset 0 -1px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
	box-shadow: 		inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* ========================================================
 *		Dark button 
 * ===================================================== */
.persona-button.dark{
	background: #3c3c3c;
	background: -moz-linear-gradient(top, #606060, #3c3c3c);
	background: -ms-linear-gradient(top, #606060, #3c3c3c);
	background: -o-linear-gradient(top, #606060, #3c3c3c);
	background: -webkit-linear-gradient(top, #606060, #3c3c3c);
	background: linear-gradient(top, #606060, #3c3c3c);
}
.persona-button.dark:hover{
	background: #2d2d2d;
	background: -moz-linear-gradient(top, #484848, #2d2d2d);
	background: -ms-linear-gradient(top, #484848, #2d2d2d);
	background: -o-linear-gradient(top, #484848, #2d2d2d);
	background: -webkit-linear-gradient(top, #484848, #2d2d2d);
	background: linear-gradient(top, #484848, #2d2d2d);
}
.persona-button.dark span:before{ /* Icon BG */
	background: #d34f2d;
	background: -moz-linear-gradient(top, #ebac45, #d34f2d);
	background: -ms-linear-gradient(top, #ebac45, #d34f2d);
	background: -o-linear-gradient(top, #ebac45, #d34f2d);
	background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
	background: linear-gradient(top, #ebac45, #d34f2d);
}
.persona-button.dark:before{ /* Triangle */
	background: #d34f2d;
	background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
	background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
	background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
	background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
	background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
}

/* ========================================================
 *		Orange button 
 * ===================================================== */
.persona-button.orange{
	background: #ee731a;
	background: -moz-linear-gradient(top, #ee731a, #d03116);
	background: -ms-linear-gradient(top, #ee731a, #d03116);
	background: -o-linear-gradient(top, #ee731a, #d03116);
	background: -webkit-linear-gradient(top, #ee731a, #d03116);
	background: linear-gradient(top, #ee731a, #d03116);
}
.persona-button.orange:hover{
	background: #cb6216;
	background: -moz-linear-gradient(top, #cb6216, #b12a13);
	background: -ms-linear-gradient(top, #cb6216, #b12a13);
	background: -o-linear-gradient(top, #cb6216, #b12a13);
	background: -webkit-linear-gradient(top, #cb6216, #b12a13);
	background: linear-gradient(top, #cb6216, #b12a13);
}
.persona-button.orange span:before{ /* Icon BG */
	background: #e84a21;
	background: -moz-linear-gradient(top, #f7ad27, #e84a21);
	background: -ms-linear-gradient(top, #f7ad27, #e84a21);
	background: -o-linear-gradient(top, #f7ad27, #e84a21);
	background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
	background: linear-gradient(top, #f7ad27, #e84a21);
}
.persona-button.orange:before{ /* Triangle */
	background: #e84a21;
	background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
	background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
	background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
	background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
	background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */
}

/* ========================================================
 *		Demo styles
 * ===================================================== */
.wrap{
	margin: 100px auto;
	text-align: center;
	width: 300px;
}
.wrap a{
	margin-bottom: 40px;
}
/* Link body */
.persona-button{
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1.1;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);

	background: #297dc3;
	background: -moz-linear-gradient(top, #43a6e2, #287cc2);
	background: -ms-linear-gradient(top, #43a6e2, #287cc2);
	background: -o-linear-gradient(top, #43a6e2, #287cc2);
	background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
	background: linear-gradient(top, #43a6e2, #287cc2);

	-moz-border-radius: 	3px;
	-ms-border-radius: 		3px;
	-o-border-radius: 		3px;
	-webkit-border-radius: 	3px;
	border-radius: 			3px;

	-moz-box-shadow: 	0 1px 0 rgba(0,0,0,0.2);
	-ms-box-shadow: 	0 1px 0 rgba(0,0,0,0.2);
	-o-box-shadow: 		0 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 		0 1px 0 rgba(0,0,0,0.2);
}

.persona-button:hover{
	background: #21669f;
	background: -moz-linear-gradient(top, #3788b9, #21669f);
	background: -ms-linear-gradient(top, #3788b9, #21669f);
	background: -o-linear-gradient(top, #3788b9, #21669f);
	background: -webkit-linear-gradient(top, #3788b9, #21669f);
	background: linear-gradient(top, #3788b9, #21669f);
}

.persona-button:active, .persona-button:focus{
	top: 1px;
	-moz-box-shadow: 	none;
	-ms-box-shadow: 	none;
	-o-box-shadow: 		none;
	-webkit-box-shadow: none;
	box-shadow: 		none;
}

.persona-button span{
	display: inline-block;
	padding: 5px 10px 5px 40px;
}

/* Icon */
.persona-button span:after{
	background: url(logo.png) 10px center no-repeat;
	content: '';
	display: block;
	width: 31px;
	
	position: absolute;
	bottom: 0;
	left: -3px;
	top: 0;
	z-index: 10;
}

/*  Icon background */
.persona-button span:before{
	content: '';
	display: block;
	height: 100%;
	width: 20px;

	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	z-index: 1;

	background: #42a9dd;
	background: -moz-linear-gradient(top, #50b8e8, #3095ce);
	background: -ms-linear-gradient(top, #50b8e8, #3095ce);
	background: -o-linear-gradient(top, #50b8e8, #3095ce);
	background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
	background: linear-gradient(top, #50b8e8, #3095ce);

	-moz-border-radius: 	3px 0 0 3px;
	-ms-border-radius: 		3px 0 0 3px;
	-o-border-radius: 		3px 0 0 3px;
	-webkit-border-radius: 	3px 0 0 3px;
	border-radius: 			3px 0 0 3px;
}

/* Triangle */
.persona-button:before{
	background: #42a9dd;
	content: '';
	display: block;
	height: 26px;
	width: 26px;

	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -13px;
	z-index: 0;

	background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
	background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
	background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
	background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
	background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */

	-moz-box-shadow: 	1px -1px 1px rgba(0,0,0,0.1);
	-ms-box-shadow: 	1px -1px 1px rgba(0,0,0,0.1);
	-o-box-shadow: 		1px -1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
	box-shadow: 		1px -1px 1px rgba(0,0,0,0.1);

	-moz-transform: 	rotate(45deg);
	-ms-transform: 		rotate(45deg);
	-o-transform: 		rotate(45deg);
	-webkit-transform: 	rotate(45deg);
	transform: 			rotate(45deg);
}

/* Inset shadow (required here because the icon background clips it when on the `a` element) */
.persona-button:after{
	content: '';
	display: block;
	height: 100%;
	width: 100%;

	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 10;

	-moz-border-radius: 	3px;
	-ms-border-radius: 		3px;
	-o-border-radius: 		3px;
	-webkit-border-radius: 	3px;
	border-radius: 			3px;

	-moz-box-shadow: 	inset 0 -1px 0 rgba(0,0,0,0.3);
	-ms-box-shadow: 	inset 0 -1px 0 rgba(0,0,0,0.3);
	-o-box-shadow: 		inset 0 -1px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
	box-shadow: 		inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* ========================================================
 *		Dark button 
 * ===================================================== */
.persona-button.dark{
	background: #3c3c3c;
	background: -moz-linear-gradient(top, #606060, #3c3c3c);
	background: -ms-linear-gradient(top, #606060, #3c3c3c);
	background: -o-linear-gradient(top, #606060, #3c3c3c);
	background: -webkit-linear-gradient(top, #606060, #3c3c3c);
	background: linear-gradient(top, #606060, #3c3c3c);
}
.persona-button.dark:hover{
	background: #2d2d2d;
	background: -moz-linear-gradient(top, #484848, #2d2d2d);
	background: -ms-linear-gradient(top, #484848, #2d2d2d);
	background: -o-linear-gradient(top, #484848, #2d2d2d);
	background: -webkit-linear-gradient(top, #484848, #2d2d2d);
	background: linear-gradient(top, #484848, #2d2d2d);
}
.persona-button.dark span:before{ /* Icon BG */
	background: #d34f2d;
	background: -moz-linear-gradient(top, #ebac45, #d34f2d);
	background: -ms-linear-gradient(top, #ebac45, #d34f2d);
	background: -o-linear-gradient(top, #ebac45, #d34f2d);
	background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
	background: linear-gradient(top, #ebac45, #d34f2d);
}
.persona-button.dark:before{ /* Triangle */
	background: #d34f2d;
	background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
	background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
	background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
	background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
	background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
}

/* ========================================================
 *		Orange button 
 * ===================================================== */
.persona-button.orange{
	background: #ee731a;
	background: -moz-linear-gradient(top, #ee731a, #d03116);
	background: -ms-linear-gradient(top, #ee731a, #d03116);
	background: -o-linear-gradient(top, #ee731a, #d03116);
	background: -webkit-linear-gradient(top, #ee731a, #d03116);
	background: linear-gradient(top, #ee731a, #d03116);
}
.persona-button.orange:hover{
	background: #cb6216;
	background: -moz-linear-gradient(top, #cb6216, #b12a13);
	background: -ms-linear-gradient(top, #cb6216, #b12a13);
	background: -o-linear-gradient(top, #cb6216, #b12a13);
	background: -webkit-linear-gradient(top, #cb6216, #b12a13);
	background: linear-gradient(top, #cb6216, #b12a13);
}
.persona-button.orange span:before{ /* Icon BG */
	background: #e84a21;
	background: -moz-linear-gradient(top, #f7ad27, #e84a21);
	background: -ms-linear-gradient(top, #f7ad27, #e84a21);
	background: -o-linear-gradient(top, #f7ad27, #e84a21);
	background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
	background: linear-gradient(top, #f7ad27, #e84a21);
}
.persona-button.orange:before{ /* Triangle */
	background: #e84a21;
	background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
	background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
	background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
	background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
	background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */
}

/* ========================================================
 *		Demo styles
 * ===================================================== */
.wrap{
	margin: 100px auto;
	text-align: center;
	width: 300px;
}
.wrap a{
	margin-bottom: 40px;
}