body{
	background:#eee;
	font:13px Arial;
}

h1{
	text-align:center;
}

#wrapper{
	padding:5px 15px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width:80%;
	height: 100px;
	border-radius: 3px;
	text-align:center;
}

input{
	color:#666;
	background:#fff;
	display:block;
	margin-bottom:5px;
	width:100%;
	padding:8px;
	border:1px solid #ccc;
	border-radius: 3px;
}

.cta-button, .button--large, .button--medium, .button--small, .button--primary, .button--secondary, .button--tertiary, .disabled {
	display: inline-block;
	border-radius: 3px;
	text-decoration: none;
	font-weight: 500;
	font-weight: semibold;
	color: #fff;
	border-bottom: 2px solid #ccc;
	transition: background 0.12s ease;
}
.cta-button:active, .button--large:active, .button--medium:active, .button--small:active, .button--primary:active, .button--secondary:active, .button--tertiary:active, .disabled:active {
	position: relative;
	top: 2px;
	margin-bottom: 2px;
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.42);
}

.button--large {
	padding: 9px 14px 6px;
	font-size: 14px;
}

.button--tertiary {
	color: #44444c;
}
.button--tertiary:link, .button--tertiary:visited {
	background: #e8e8ed;
	border-bottom-color: #cdcbd0;
	box-shadow: inset 0 0 0 1px #dad9de;
}
.button--tertiary:hover {
	background: linear-gradient(to top, #f6f6f8 100%, #e9e9ee 0%);
	background: -o-linear-gradient(bottom, #f6f6f8 100%, #e9e9ee 0%);
	background: -moz-linear-gradient(bottom, #f6f6f8 100%, #e9e9ee 0%);
	background: -webkit-linear-gradient(bottom, #f6f6f8 100%, #e9e9ee 0%);
	background: -ms-linear-gradient(bottom, #f6f6f8 100%, #e9e9ee 0%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #f6f6f8), color-stop(0, #e9e9ee));
}
.button--tertiary:active {
	border-bottom: 0;
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.42);
}

#cekdetay{
	width:90%;
	margin:20px auto;
	padding:10px;
	background:#fff;
	border:1px solid #ccc;
}

#cdtl{
	font-size:12px;
}

#cdtl td{
	padding:5px 0px;
	text-align:center;
}

#cdtl .underline td{
	border-bottom:1px dashed #ddd;
}

#cdtl .heading td{
	font-weight:bold;
	border-bottom:1px solid #ddd;
}

#cdtl .endofline td{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

.onay {
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811));
	background:-moz-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-webkit-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-o-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-ms-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811',GradientType=0);
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #000;
}
.onay:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a));
	background:-moz-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-webkit-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-o-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-ms-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a',GradientType=0);
	background-color:#5cb811;
}
.onay:active {
	position:relative;
	top:1px;
}
.decline {
	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24537;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.decline:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
	background-color:#c62d1f;
}
.decline:active {
	position:relative;
	top:1px;
}

@media only screen and (max-width: 1024px) {
    body {
        background-color: #eee;
    }
	
	#wrapper{
		width:90%;
		height:20%;
	}
	
	#cekdetay{
		width:90%;
		margin:20px auto;
		padding:10px;
		background:#fff;
		border:1px solid #ccc;
	}
	
	#cdtl{
		font-size:12px;
	}
	
	#cdtl td{
		padding:5px 0px;
		text-align:center;
	}
	
	#cdtl .underline td{
		border-bottom:1px dashed #ddd;
	}
	
	#cdtl .heading td{
		font-weight:bold;
		border-bottom:1px solid #ddd;
	}
	
	#cdtl .endofline td{
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
	}
	
	.cta-button, .button--large, .button--medium, .button--small, .button--primary, .button--secondary, .button--tertiary, .disabled {
		display: inline-block;
		border-radius: 3px;
		text-decoration: none;
		font-weight: 500;
		font-weight: semibold;
		color: #fff;
		border-bottom: 2px solid #ccc;
		transition: background 0.12s ease;
	}
	.cta-button:active, .button--large:active, .button--medium:active, .button--small:active, .button--primary:active, .button--secondary:active, .button--tertiary:active, .disabled:active {
		position: relative;
		top: 2px;
		margin-bottom: 2px;
		box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.42);
	}

	.button--large {
		padding: 9px 14px 6px;
		font-size: 14px;
	}
	
	.button--tertiary {
		color: #44444c;
	}
	.button--tertiary:link, .button--tertiary:visited {
		background: #e8e8ed;
		border-bottom-color: #cdcbd0;
		box-shadow: inset 0 0 0 1px #dad9de;
	}
	.button--tertiary:hover {
		background: linear-gradient(to top, #f6f6f8 100%, #e9e9ee 0%);
		background: -o-linear-gradient(bottom, #f6f6f8 100%, #e9e9ee 0%);
		background: -moz-linear-gradient(bottom, #f6f6f8 100%, #e9e9ee 0%);
		background: -webkit-linear-gradient(bottom, #f6f6f8 100%, #e9e9ee 0%);
		background: -ms-linear-gradient(bottom, #f6f6f8 100%, #e9e9ee 0%);
		background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #f6f6f8), color-stop(0, #e9e9ee));
	}
	.button--tertiary:active {
		border-bottom: 0;
		box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.42);
	}
	.onay {
		-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
		-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
		box-shadow:inset 0px 1px 0px 0px #caefab;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811));
		background:-moz-linear-gradient(top, #77d42a 5%, #5cb811 100%);
		background:-webkit-linear-gradient(top, #77d42a 5%, #5cb811 100%);
		background:-o-linear-gradient(top, #77d42a 5%, #5cb811 100%);
		background:-ms-linear-gradient(top, #77d42a 5%, #5cb811 100%);
		background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811',GradientType=0);
		background-color:#77d42a;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #268a16;
		display:inline-block;
		cursor:pointer;
		color:#fff;
		font-family:Arial;
		font-size:15px;
		font-weight:bold;
		padding:6px 24px;
		text-decoration:none;
		text-shadow:0px 1px 0px #000;
	}
	.onay:hover {
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a));
		background:-moz-linear-gradient(top, #5cb811 5%, #77d42a 100%);
		background:-webkit-linear-gradient(top, #5cb811 5%, #77d42a 100%);
		background:-o-linear-gradient(top, #5cb811 5%, #77d42a 100%);
		background:-ms-linear-gradient(top, #5cb811 5%, #77d42a 100%);
		background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a',GradientType=0);
		background-color:#5cb811;
	}
	.onay:active {
		position:relative;
		top:1px;
	}
	.decline {
		-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
		-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
		box-shadow:inset 0px 1px 0px 0px #f5978e;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
		background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
		background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
		background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
		background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
		background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
		background-color:#f24537;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #d02718;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family:Arial;
		font-size:15px;
		font-weight:bold;
		padding:6px 24px;
		text-decoration:none;
		text-shadow:0px 1px 0px #810e05;
	}
	.decline:hover {
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
		background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
		background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
		background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
		background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
		background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
		background-color:#c62d1f;
	}
	.decline:active {
		position:relative;
		top:1px;
	}
}