@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);


html, body{	padding: 0;margin: 0;}
body {
  margin: 0;
  font-size: 13px;
  font-family: "나눔고딕", "Nanum Gothic", "verdana" , sans-serif;
  /* font-family:'NotoSansKR Regular', sans-serif; */
  font-weight: 400;
  color: #6e6e6e;
  background:#fff !important;
  height:100%;
}


body, div, p
{
	font-family: "나눔고딕", "Nanum Gothic", "verdana" , sans-serif;
	font-size: 13px; line-height: 18px;	color: #333; -webkit-text-size-adjust: none;
}
div, ul, ol, dl, dt, dd, li, table, thead, tbody, td, tr, th, caption, address {margin:0; padding:0; list-style:none; }
h1, h2, h3, h4, h5, h6{	line-height: 1;	color: #330; font-weight: bold;	margin: 20px 0 10px 0;}
h1, h2, h3{	font-size: 18px;}
h4, h5, h6{	font-size: 16px;}
a, a:link, a:active, a:visited, a:hover{color: #333;text-decoration:none;}
pre{ font-size: 12px;	width: 100%;	overflow: auto;	-webkit-overflow-scrolling: touch;}
#page nav{	display: none;}


/*************************** button ***************************/
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.area-btn {
    display: inline-block;
    margin: 5px 0;
    padding: .5em .75em;
    border-radius: 10px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    background: transparent;
    outline: 0;
    vertical-align: middle;
    font-family: : inherit;
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer
}

/* 버튼 고정 사이즈 */
.area-btn.bigsmall {
	padding: 4px 12px;
	font-size: 11px;
	line-height: 15px;
	margin:0px 5px;
}

.area-btn.small {
	height: 25px;
	padding: 0 .75em;
	font-size: 11px;
	line-height: 25px;
}

.area-btn.default {
	height: 35px;
	padding: 0 .75em;
	font-size: 12px;
	line-height: 35px;
}

.area-btn.large {
	height: 46px;
	padding: 0 1em;
	font-size: 18px;
	font-weight: 600;
	line-height: 46px;
}

.area-btn.big {
	width:94%;
	height: 86px;
	padding: 0 1em;
	font-size: 22px;
	font-weight: 600;
	line-height: 86px;
}

.area-btn.login {
	width:97px;
	height: 97px;
	padding: 0px 10px 0;
	font-size: 18px;
	font-weight: bold;

	line-height: 10px;
	font-family: "나눔고딕", "Nanum Gothic", "verdana" , sans-serif;
	position:relative !important;
	left:0; top:0;
}

/* 버튼 스타일 */
.area-btn.black,
.area-btn.black:link,
.area-btn.black:visited {
	color: #fff!important;
	border: 1px solid #353535;
	border-bottom-color: #353535;
	box-shadow: 0 2px 2px rgba(0,0,0,0.04);
	background: #1f1f1f;
	background: linear-gradient(to bottom, #000 40%, #1f1f1f 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
}

.area-btn.black:focus,
.area-btn.black:hover {
	background: #3f3f3f;
	background: linear-gradient(to bottom, #000 0%, #1f1f1f 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#ffffff', GradientType=0 );/*IE*/
}

.area-btn.black:active,
.area-btn.black.active {
	text-shadow: 0 1px 0px #fff;
	border-color: #2f2f2f;
	border-top-color: #000;
	background: #f4f4f4;
	box-shadow: none
}

.area-btn.gray,
.area-btn.gray:link,
.area-btn.gray:visited {
	color: #666!important;
	border: 1px solid #ebebeb;
	border-bottom-color: #c6c6c6;
	box-shadow: 0 2px 2px rgba(0,0,0,0.04);
	background: #dbdbdb;
	background: linear-gradient(to bottom, #ffffff 40%, #f6f6f6 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
}

.area-btn.gray:focus,
.area-btn.gray:hover {
	background: #d2d2d2;
	background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
}

.area-btn.gray:active,
.area-btn.gray.active {
	text-shadow: 0 1px 0px #fff;
	border-color: #dfdfdf;
	border-top-color: #ddd;
	background: #f4f4f4;
	box-shadow: none
}


.area-btn.white,
.area-btn.white:link,
.area-btn.white:visited {
	color: #666!important;
	border: 1px solid #ebebeb;
	border-bottom-color: #c6c6c6;
	box-shadow: 0 2px 2px rgba(0,0,0,0.04);
	background: #fff;
	background: linear-gradient(to bottom, #ffffff 40%, #f6f6f6 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
}

.area-btn.white:focus,
.area-btn.white:hover {
	background: #f4f4f4;
	background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
}

.area-btn.white:active,
.area-btn.white.active {
	text-shadow: 0 1px 0px #fff;
	border-color: #ebebeb;
	border-top-color: #ddd;
	background: #f4f4f4;
	box-shadow: none
}

.area-btn.blue,
.area-btn.blue:link,
.area-btn.blue:visited {
	color: #fff!important;
	text-shadow: 0 1px 0px #135fa4;
	border: 1px solid #135fa4;
	border-top-color: #2d9acf;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.22);
	background: #3aaee7;
	background: linear-gradient(to bottom, #3aaee7 0%, #1a80d9 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3aaee7', endColorstr='#1a80d9', GradientType=0 );/*IE*/
}

.area-btn.blue:hover {
	background: #50bae9;
	background: linear-gradient(to bottom, #50bae9 0%, #3392de 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50bae9', endColorstr='#3392de', GradientType=0 );/*IE*/
}

.area-btn.blue:active,
.area-btn.blue.active {
	border-color: #2585d9;
	border-top-color: #0f4678;
	background: #2d90e7;
	box-shadow: none
}

.area-btn.green,
.area-btn.green:link,
.area-btn.green:visited {
	color: #fff!important;
	text-shadow: 0 1px 0px #135fa4;
	border: 1px solid #368321;
	border-top-color: #439f2a;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.22);
	background: #76ac41;
	background: linear-gradient(to bottom, #76ac41 0%, #489215 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76ac41', endColorstr='#489215', GradientType=0 );/*IE*/
}

.area-btn.green:hover {
	background: #4c9b16;
	background: linear-gradient(to bottom, #7ab243 0%, #4c9b16 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ab243', endColorstr='#4c9b16', GradientType=0 );/*IE*/
}

.area-btn.green:active,
.area-btn.green.active {
	border-color: #6c9d3c;
	border-top-color: #368321;
	background: #4c9b16;
	box-shadow: none;
	text-shadow: none;
}

.area-btn.yellow,
.area-btn.yellow:link,
.area-btn.yellow:visited {
	color: #000!important;
	text-shadow: 0 1px 0 #fcda7c;
	border: 1px solid #dfac23;
	border-bottom: 1px solid #c06f01;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.10);
	background: #f5a802;
	background: linear-gradient(to bottom, #fcd054 0%, #f5a802 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd054', endColorstr='#f5a802', GradientType=0 );/*IE*/
}

.area-btn.yellow:hover {
	background: #ffb618;
	background: linear-gradient(to bottom, #ffdc78 0%, #ffb618 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc78', endColorstr='ffb618', GradientType=0 );/*IE*/
}

.area-btn.yellow:active,
.area-btn.yellow.active {
	border-color: #efa80d;
	border-top-color: #cf8e00;
	background: #ffb618;
	box-shadow: none;
	text-shadow: none;
}

.area-btn.red,
.area-btn.red:link,
.area-btn.red:visited {
	color: #fff!important;
	text-shadow: 0 1px 0 #991e1a;
	border: 1px solid #991e1a;
	border-top: 1px solid #c06f01;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
	background: #b22520;
	background: linear-gradient(to bottom, #e8605a 0%, #b22520 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8605a', endColorstr='#b22520', GradientType=0 );/*IE*/
}

.area-btn.red:hover {
	background: #ca3631;
	background: linear-gradient(to bottom, #f17771 0%, #ca3631 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc78', endColorstr='ffb618', GradientType=0 );/*IE*/
}

.area-btn.red:active,
.area-btn.red.active {
	border-color: #a0211d;
	border-top-color: #7f1b17;
	background: #b22520;
	box-shadow: none;
	text-shadow: none;
}

.area-btn.k-plate,
.area-btn.k-plate:link,
.area-btn.k-plate:visited {
	color: #666!important;
	border: 1px solid #c3c3c3;
	border-top-color: #d9d9d9;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .1), inset -1px -1px 0 #fff;
	background: #fff;
	background: linear-gradient(to bottom, #fdfdfd 0%, #f8f8f8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f8f8f8', GradientType=0 );
}

.area-btn.k-plate:focus,
.area-btn.k-plate:hover {
	background: #f4f4f4;
	background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
}

.area-btn.k-plate:active,
.area-btn.k-plate.active {
	text-shadow: 0 1px 0px #fff;
	border-color: #ebebeb;
	border-top-color: #ddd;
	background: #f4f4f4;
	box-shadow: none
}

.area-btn.soap,
.area-btn.soap:link,
.area-btn.soap:visited {
	padding: .45em .75em .75em .75em;
	color:#888!important;
	text-shadow:0 1px 0 #fafafa;
	border-style: solid;
	border-width: 1px;
	border-top-color: #f2f2f2;
	border-left-color: #dfdfdf;
	border-right-color: #dfdfdf;
	border-bottom-color: #ccc;
	box-shadow:
	0 .2em .3em rgba(0,0,0,.1),
	inset 0 -0.3em 0 #ddd,
	inset 0 -0.33em 0 #f1f1f1;
	background: #e9e9e9;
	background: linear-gradient(to bottom, #fafafa 0%, #e9e9e9 80%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fafafa, endColorstr=#e9e9e9);
}

.area-btn.soap.small {
	height: 25px;
	padding: 0 .75em;
	font-size: 11px;
	line-height: 22px;
}

.area-btn.soap.default {
	height: 35px;
	padding: 0 .75em;
	font-size: 12px;
	line-height: 32px;
}

.area-btn.soap.large {
	height: 46px;
	padding: 0 1em;
	font-size: 18px;
	font-weight: 600;
	line-height: 42px;
}

.area-btn.soap.big {
	height: 86px;
	padding: 0 1em;
	font-size: 18px;
	font-weight: 600;
	line-height: 82px;
}

.en-01 { font-family: verdana, Helvetica, Arial, sans-serif; }
.kr-01 { font-family: "나눔고딕", "NotoSansKR Regular", sans-serif !important; font-weight:700; }




/* 헤딩 그룹 */
.bc-hgroup-01 {
	margin: 0;
	padding-bottom: 40px;
}

.bc-hgroup-01 span.strong { font-weight: 800; }

.bc-hgroup-01 h1 {
	font-family: Nanum Myeongjo;
	font-size: 46px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -3px;
	color: #212121;
	line-height: 0;
	display: block;
	padding-bottom: 30px;
}

.bc-hgroup-01 h2 {
	font-size: 30px;
	font-family: Nanum Pen Script;
	font-weight: 400;
	font-style: normal;
	letter-spacing: -1px;
	color: #2b96f2;
	line-height: 0;
	display: block;
}

/* 강조된 문장 */
.area-em {
	text-decoration: none;
	font-weight: bold;
	font-style: normal;
}

/* 중요한 문장 */
.area-strong {
	margin-left: 5px;
	padding: 2px 0 2px 0px;
	border-bottom: 2px solid #f7c6b8;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: left center;
	font-weight: normal;
}

/* 마킹 */
.area-mark {
	margin-left: 0px;
	margin-right: 5px;
	padding: 2px 4px;
	background-color: #ff6666;
	background-repeat: no-repeat;
	background-position: left center;
	color: #ffffff;
	font-size: 100%;
}

.area-mark2 {
	margin-left: 5px;
	padding: 2px 4px;
	background-color: #f7f3c5;
	background-repeat: no-repeat;
	background-position: left center;
	color: #834202;
	font-size: 100%;
}

/* 주목 */
.area-u {
	padding-bottom: 2px;
	border-bottom: 2px solid #99deff;
	text-decoration: none;
}

/* 탑바 */
.area-topbar {
	margin: 0;
	padding: 1em;
	font-family: 돋움, dotum, 굴림, gulim;
	font-size: 11px;
	letter-spacing: -1px;
}

.area-topbar.orange {
	color: #834202;
	background: #f9c667;
	background: linear-gradient(to bottom, #f9c667 0%, #f79621 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621', GradientType=0 );
}

/* 분리선 */
.area-hr.shadow {
	display: block;
	height: 20px;
	border: 0;
	margin: 3em 0;
	padding: 0;
	background: url('img/hr-01.png') no-repeat center top;
	text-indent: -1000em;
}


/*탭메뉴*/
.tabmenu{ width:100%;padding:0 0 0px 0px;}
.tabmenu ul{  margin:0; padding-left:10px; list-style:none; border-bottom:1px solid #dbaf00; font-family:dotum, Sans-serif; font-size:13px;  *zoom:1;}
.tabmenu ul:after{ content:""; display:block; clear:both;}
.tabmenu li{ float:left; margin:0px 1px -1px 1px; }
.tabmenu li a{ position:relative; float:left; text-decoration:none; border-top:1px solid #c0c0c0; border-right:1px solid #c0c0c0;border-left:1px solid #c0c0c0;background:#efefef; color:#666;}
.tabmenu li a span{ display:inline-block; padding:6px 7px; letter-spacing:-1px; cursor:pointer;border-top:1px solid #fff;border-left:1px solid #fff; }
.tabmenu li a:hover{background:#fff; color:#404960; border:1px solid #404960; }
.tabmenu li ul{ display:none; width:100%; top:40px; left:0; list-style:none; border:0; margin:0; padding:0; white-space:nowrap; overflow:hidden; *zoom:1;}
.tabmenu li ul:after{ content:""; display:block; clear:both;}
.tabmenu li.selected a{ border:2px solid #dbaf00; padding:1px;border-bottom:0px solid #fff; margin-top:-3px; background-color:#fff; color:#000000;}
.tabmenu li.selected a span{ display:inline-block;padding-top:7px; font-weight:bold;background-color:#fff; }
.tabmenu li.selected a:hover{ border:2px solid #dbaf00; padding:1px;border-bottom:0px solid #fff; margin-top:-3px; background-color:#fff; color:#404960;}

.area-paging { margin:35px 0 0 0; font-size:0; text-align:center;}
.area-paging a {display:inline-block; border-radius: 10px;width:20px; height:20px; margin: 0 3px; border:1px solid #e8e8e8; padding:10px 10px; font-size:16px !important; text-align:center; /*border-radius:50%;*/ transition:all 0.3s ease; vertical-align:top }
.area-paging a.on {background-color:#006699; border-color:#006699; color:#fff; font-weight:500; }
.area-paging a.on:hover{background-color:#006699; border-color:#006699; color:#fff; font-weight:500;}
.area-paging a:hover {background-color:#fff; border-color:#fff; color:#000; font-weight:500}
.area-paging a.contr {background-color:#fff; border:1px solid #e8e8e8; color:#555; display:inline-block;  vertical-align:top}
.area-paging a.contr:hover {background-color:#002b58; border-color:#002b58; color:#fff}
.area-paging a.bt_f { background:url(/staff/images/icon/ic-frist.png) no-repeat center center #fff; text-indent:-5000px;}
.area-paging a.bt_p { background:url(/staff/images/icon/ic-prev.png) no-repeat center center #fff; text-indent:-5000px;}
.area-paging a.bt_n { background:url(/staff/images/icon/ic-next.png) no-repeat center center #fff; text-indent:-5000px;}
.area-paging a.bt_l { background:url(/staff/images/icon/ic-last.png) no-repeat center center #fff; text-indent:-5000px;}
.area-paging a.bt_f:hover { background:url(/staff/images/icon/ic-frist-on.png) no-repeat center center #444; }
.area-paging a.bt_p:hover { background:url(/staff/images/icon/ic-prev-on.png) no-repeat center center #444;}
.area-paging a.bt_n:hover { background:url(/staff/images/icon/ic-next-on.png) no-repeat center center #444; }
.area-paging a.bt_l:hover { background:url(/staff/images/icon/ic-last-on.png) no-repeat center center #444; }
.i-opt  {height:38px; padding:10px 8px 8px 8px; font-size:13px; color:#333; border:#CCC 1px solid; }



.color {
  width: 350px;
  margin: 0 auto;
}
.color li {
  margin: 0 15px 0 0;
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 100%;
}
.color .red    {background: #fa5a5a;}
.color .yellow {background: #f0d264;}
.color .green  {background: #82c8a0;}
.color .cyan   {background: #7fccde;}
.color .blue   {background: #6698cb;}
.color .purple {background: #cb99c5;}

.content, 
.content-gradient, 
.content-3d {
  margin: 40px auto;
}
.content {
  width: 80%;
  max-width: 700px;
}
.content-3d {
  width: 50%;
  max-width: 300px;
}
pre {
  width: 100%;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.72);
  color: #f8f8f2;
  border-radius: 0 0 4px 4px;
  margin-top: 20px;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}
pre .bt  {color: #f8f8f2;} /* <> */
pre .anc {color: #f92672;} /* anchor tag */
pre .att {color: #a6a926;} /* attribute */
pre .val {color: #e6db74;} /* value */

.btn-container, .container {
  background-color: white;
  border-radius: 4px;
  text-align: center;
  margin-bottom: 40px;
}
.container h2 {
  padding-top: 30px;
  font-weight: 300;
}
.btn, .btn-two {
  margin: 9px;
}
.btn-gradient {
  margin: 5px;
}
a[class*="btn"] {text-decoration: none;}
input[class*="btn"], 
button[class*="btn"] {border: 0;}

/* Here you can change the button sizes */
.btn.large, 
.btn-two.large, 
.btn-effect.large {
  padding: 20px 40px; 
  font-size: 22px;
}
.btn.small, 
.btn-two.small, 
.btn-gradient.small, 
.btn-effect.small {
  padding: 8px 18px;  
  font-size: 14px;
}
.btn.mini, 
.btn-two.mini, 
.btn-gradient.mini, 
.btn-effect.mini {
  padding: 4px 12px;  
  font-size: 12px;
}
.btn.block, 
.btn-two.block, 
.btn-gradient.block, 
.btn-effect.block {
  display: block;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.btn-gradient.large {
  padding: 15px 45px; 
  font-size: 22px;
}

/* Colors for .btn and .btn-two */
.btn.blue, .btn-two.blue     {background-color: #7fb1bf;}
.btn.green, .btn-two.green   {background-color: #9abf7f;}
.btn.red, .btn-two.red       {background-color: #fa5a5a;}
.btn.purple, .btn-two.purple {background-color: #cb99c5;}
.btn.cyan, .btn-two.cyan     {background-color: #7fccde;}
.btn.yellow, .btn-two.yellow {background-color: #f0d264;}

.rounded {
  border-radius: 10px;
}

/* default button style */
.btn {
  position: relative;
  border: 0;
  padding: 15px 25px;
  display: inline-block;
  text-align: center;
  color: white;
}
.btn:active {
  top: 4px; 
}

/* color classes for .btn */
.btn.blue {box-shadow: 0px 4px #74a3b0;}
.btn.blue:active {box-shadow: 0 0 #74a3b0; background-color: #709CA8;}

.btn.green {box-shadow: 0px 4px 0px #87a86f;}
.btn.green:active {box-shadow: 0 0 #87a86f; background-color: #87a86f;}

.btn.red {box-shadow:0px 4px 0px #E04342;}
.btn.red:active {box-shadow: 0 0 #ff4c4b; background-color: #ff4c4b;}

.btn.purple {box-shadow:0px 4px 0px #AD83A8;}
.btn.purple:active {box-shadow: 0 0 #BA8CB5; background-color: #BA8CB5;}

.btn.cyan {box-shadow:0px 4px 0px #73B9C9;}
.btn.cyan:active {box-shadow: 0 0 #73B9C9; background-color: #70B4C4;}

.btn.yellow {box-shadow:0px 4px 0px #D1B757;}
.btn.yellow:active {box-shadow: 0 0 #ff4c4b; background-color: #D6BB59;}

/* Button two - I have no creativity for names */
.btn-two {
  color: white; 
  padding: 15px 25px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.21);
  border-bottom-color: rgba(0,0,0,0.34);
  text-shadow:0 1px 0 rgba(0,0,0,0.15);
  box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 
              0 2px 0 -1px rgba(0,0,0,0.13), 
              0 3px 0 -1px rgba(0,0,0,0.08), 
              0 3px 13px -1px rgba(0,0,0,0.21);
}
.btn-two:active {
  top: 1px;
  border-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21);
  box-shadow: 0 1px 0 rgba(255,255,255,0.89),0 1px rgba(0,0,0,0.05) inset;
  position: relative;
}
/* 3D Button */
.btn-3d {
  position: relative;
  display: inline-block;
  font-size: 22px;
  padding: 20px 60px;
  color: white;
  margin: 20px 10px 10px;
  border-radius: 6px;
  text-align: center;
  transition: top .01s linear;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.btn-3d.red:hover    {background-color: #e74c3c;}
.btn-3d.blue:hover   {background-color: #699DD1;}
.btn-3d.green:hover  {background-color: #80C49D;}
.btn-3d.purple:hover {background-color: #D19ECB;}
.btn-3d.yellow:hover {background-color: #F0D264;}
.btn-3d.cyan:hover   {background-color: #82D1E3;}

.btn-3d:active {
  top: 9px;
}

/* 3D button colors */
.btn-3d.red {
  background-color: #e74c3c;
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 #C24032,
        0 8px 0 1px rgba(0,0,0,0.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.blue {
  background-color: #6DA2D9;
  box-shadow: 0 0 0 1px #6698cb inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(110, 164, 219, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.blue:active {
  box-shadow: 0 0 0 1px #6191C2 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.green {
  background-color: #82c8a0;
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(126, 194, 155, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.purple {
  background-color: #cb99c5;
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(189, 142, 183, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.purple:active {
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.cyan {
  background-color: #7fccde;
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(102, 164, 178, .6),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.cyan:active {
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.yellow {
  background-color: #F0D264;
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(196, 172, 83, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.yellow:active {
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

/* Gradient buttons */
.btn-gradient {
  text-decoration: none;
  color: white;
  padding: 10px 30px;
  display: inline-block;
  position: relative;
  border: 1px solid rgba(0,0,0,0.21);
  border-bottom: 4px solid rgba(0,0,0,0.21);
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
/* Gradient - ugly css is ugly */
.btn-gradient.cyan {
  background: rgba(27,188,194,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(27,188,194,1)), to(rgba(24,163,168,1)));
  background: -webkit-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: -moz-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: -o-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbcc2', endColorstr='#18a3a8', GradientType=0);
}

.btn-gradient.red{ 
  background: rgba(250,90,90,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(250,90,90,1)), to(rgba(232,81,81,1)));
  background: -webkit-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: -moz-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: -o-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5a5a', endColorstr='#e85151', GradientType=0 );
}
.btn-gradient.orange {
  background: rgba(255,105,30,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,105,30,1)), to(rgba(230,95,28,1)));
  background: -webkit-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: -moz-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: -o-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
}
.btn-gradient.blue {
  background: rgba(102,152,203,1);
  background: -moz-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,152,203,1)), color-stop(100%, rgba(92,138,184,1)));
  background: -webkit-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -o-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -ms-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: linear-gradient(to bottom, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698cb', endColorstr='#5c8ab8', GradientType=0 );
}
.btn-gradient.purple { 
  background: rgba(203,153,197,1);
  background: -moz-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(203,153,197,1)), color-stop(100%, rgba(181,134,176,1)));
  background: -webkit-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -o-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -ms-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: linear-gradient(to bottom, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb99c5', endColorstr='#b586b0', GradientType=0 );
}
.btn-gradient.yellow {
  background: rgba(240,210,100,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(240,210,100,1)), to(rgba(229,201,96,1)));
  background: -webkit-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: -moz-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: -o-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0d264', endColorstr='#e5c960', GradientType=0 );
}
.btn-gradient.green {
  background: rgba(130,200,160,1);
  background: -moz-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(130,200,160,1)), color-stop(100%, rgba(130,199,158,1)));
  background: -webkit-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -o-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -ms-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: linear-gradient(to bottom, rgba(130,200,160,1) 0%, rgba(124, 185, 149, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c8a0', endColorstr='#82c79e', GradientType=0 );
}

.btn-gradient.red:active    {background: #E35252;}
.btn-gradient.orange:active {background: #E8601B;}
.btn-gradient.cyan:active   {background: #169499;}
.btn-gradient.blue:active   {background: #608FBF;}
.btn-gradient.purple:active {background: #BD8EB7;}
.btn-gradient.yellow:active {background: #DBC05B;}
.btn-gradient.green:active  {background: #72B08E;}