/*
 * Author: Billy Csete
 * http://billy.codes
 */

/* =========================================================
   Double Delete
   ========================================================= */

/* Layout
------------------------------------------ */
body {
	padding-top: 40px;
	background: #313841;
	font-family: Helvetica;
}

.main {
	width:400px;
	margin:0 auto;
}


/* Header
------------------------------------------ */
.header {
	padding-bottom: 40px;
}
.header h1 {
	font-size: 22px;
	line-height: 18px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #efefef;
}
.header h2 {
	font-size: 14px;
	line-height: 10px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #bbb;
}

.header a {
	text-decoration: none;
	color: #fff;
}
.header a:hover {
	color: #f34541;
}


/* Button
------------------------------------------ */
button.double-delete {
	cursor: default;
	display: block;
	color: #fff;
	border: none;
	background: none;
	padding: 0;
	margin: 0 0 60px 0;
	width: 170px;
	overflow: hidden;
	outline: none;
}


/* Icon
------------------------------------------ */
button.double-delete .icon {
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 1;
	height: 30px;
	width: 35px;
	padding-top: 5px;
	float: left;
	background: #1c242b;
	text-align: center;
	font-size: 20px;
	text-rendering: optimizeLegibility;
	-webkit-transform: translateZ(0);
}

/* check */
button.double-delete.check .icon {color: #f34541; }
/* double check */
button.double-delete.double-check .icon { color: #3bb97e; }
/* finished */
button.double-delete.finished .icon { cursor: default; }


/* Arrow
------------------------------------------ */
button.double-delete .icon .arrow {
	position: absolute;
	right: 0px;
	top: 50%;
	margin-top: -5px;
	content: '';
	width: 0;
	 height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid #1c242b;
	-webkit-transform: translateX(0);
	-webkit-transition: -webkit-transform .2s;
}
button.double-delete.show .icon .arrow { -webkit-transform: translateX(5px); }


/* Message
------------------------------------------ */
button.double-delete .message {
	display: block;
	float: left;
	width: 135px;
	background: #f34541;
	font-size: 14px;
	line-height: 35px;
	text-align: center;
	color: #f34541;
	color: rgba(243,69,65,0);
	font-weight: normal;
	-webkit-transform: translate3d(-135px, 0, 0);
	-webkit-transition: -webkit-transform .2s, color .2s .2s;
}

/* show message */
button.double-delete.show .message {
	-webkit-transform: translate3d(0px, 0, 0);
	color: rgba(255,255,255,1);
}

/* check */
button.double-delete.check .message { background: #f34541; }
/* double check */
button.double-delete.double-check .message { background: #3bb97e; }
/* finished */
button.double-delete.finished .message { color: rgba(255,255,255,1); }