@charset "UTF-8";

/*
	Document	: buttons.css
	Created on	: 10. 12. 18 오후 3:35
	Author		: Nexist
	Description	: 버튼 스타일을 잡습니다.
*/
#buttons {
    padding: 50px;
    text-align: center
}

/* 버튼 설정 */
.btn {
    display: inline-block;
    overflow: visible;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Noto Sans KR", "Nanum Gothic", '돋움', Dotum, sans-serif;
    text-decoration: none !important;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
}

/* //버튼 설정 */

/* 사이즈 설정 */
.btn,
.btn.small {
    color: #666;
    padding: 0 3px;
    font-size: 11px;
    height: 16px;
    line-height: 16px;
    border: solid 1px #aaa;
    border-top: solid 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#f4f4f4));
    background: -webkit-linear-gradient(#ffffff, #f4f4f4);
    background: -moz-linear-gradient(#ffffff, #f4f4f4);
    background: -ms-linear-gradient(#ffffff, #f4f4f4);
    background: -o-linear-gradient(#ffffff, #f4f4f4);
    background: linear-gradient(#ffffff, #f4f4f4);
    -pie-background: linear-gradient(#ffffff, #f4f4f4);
    behavior: url("/javascript/Common/PIE.php");
}

input.btn,
input.btn.small {
    height: 18px;
    padding: 0 1px;
}

.btn:hover,
.btn.small:hover {
    color: #333;
    border: solid 1px #999;
    border-top: solid 1px #aaa;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#fafafa));
    background: -webkit-linear-gradient(#ffffff, #fafafa);
    background: -moz-linear-gradient(#ffffff, #fafafa);
    background: -ms-linear-gradient(#ffffff, #fafafa);
    background: -o-linear-gradient(#ffffff, #fafafa);
    background: linear-gradient(#ffffff, #fafafa);
    -pie-background: linear-gradient(#ffffff, #fafafa);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.medium {
    color: #666;
    padding: 0 8px;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
    border: solid 1px #aaa;
    border-top: solid 1px #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#f4f4f4));
    background: -webkit-linear-gradient(#ffffff, #f4f4f4);
    background: -moz-linear-gradient(#ffffff, #f4f4f4);
    background: -ms-linear-gradient(#ffffff, #f4f4f4);
    background: -o-linear-gradient(#ffffff, #f4f4f4);
    background: linear-gradient(#ffffff, #f4f4f4);
    -pie-background: linear-gradient(#ffffff, #f4f4f4);
    behavior: url("/javascript/Common/PIE.php");
}

input.btn.medium {
    height: 25px;
    line-height: 25px;
    padding: 0 8px;
}

.btn.medium:hover {
    color: #333;
    border: solid 1px #999;
    border-top: solid 1px #aaa;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#fafafa));
    background: -webkit-linear-gradient(#ffffff, #fafafa);
    background: -moz-linear-gradient(#ffffff, #fafafa);
    background: -ms-linear-gradient(#ffffff, #fafafa);
    background: -o-linear-gradient(#ffffff, #fafafa);
    background: linear-gradient(#ffffff, #fafafa);
    -pie-background: linear-gradient(#ffffff, #fafafa);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.large {
    color: #666;
    font-weight: bold;
    padding: 0 12px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    border: solid 1px #aaa;
    border-top: solid 1px #ccc;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#f4f4f4));
    background: -webkit-linear-gradient(#ffffff, #f4f4f4);
    background: -moz-linear-gradient(#ffffff, #f4f4f4);
    background: -ms-linear-gradient(#ffffff, #f4f4f4);
    background: -o-linear-gradient(#ffffff, #f4f4f4);
    background: linear-gradient(#ffffff, #f4f4f4);
    -pie-background: linear-gradient(#ffffff, #f4f4f4);
    behavior: url("/javascript/Common/PIE.php");
}

input.btn.large {
    height: 32px;
    line-height: 30px;
}

.btn.large:hover {
    color: #333;
    border: solid 1px #999;
    border-top: solid 1px #aaa;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#fafafa));
    background: -webkit-linear-gradient(#ffffff, #fafafa);
    background: -moz-linear-gradient(#ffffff, #fafafa);
    background: -ms-linear-gradient(#ffffff, #fafafa);
    background: -o-linear-gradient(#ffffff, #fafafa);
    background: linear-gradient(#ffffff, #fafafa);
    -pie-background: linear-gradient(#ffffff, #fafafa);
    behavior: url("/javascript/Common/PIE.php");
}

/* //사이즈 설정 */

/*색상*/
.btn.blue {
    color: #fff !important;
    border: solid 1px #3c8aba;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#89d0f2), to(#4ba7de));
    background: -webkit-linear-gradient(#89d0f2, #4ba7de);
    background: -moz-linear-gradient(#89d0f2, #4ba7de);
    background: -ms-linear-gradient(#89d0f2, #4ba7de);
    background: -o-linear-gradient(#89d0f2, #4ba7de);
    background: linear-gradient(#89d0f2, #4ba7de);
    -pie-background: linear-gradient(#89d0f2, #4ba7de);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.blue:hover {
    color: #fff !important;
    border: solid 1px #1874ad;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3c9dd9), to(#207bb3));
    background: -webkit-linear-gradient(#3c9dd9, #207bb3);
    background: -moz-linear-gradient(#3c9dd9, #207bb3);
    background: -ms-linear-gradient(#3c9dd9, #207bb3);
    background: -o-linear-gradient(#3c9dd9, #207bb3);
    background: linear-gradient(#3c9dd9, #207bb3);
    -pie-background: linear-gradient(#3c9dd9, #207bb3);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.red {
    color: #fff !important;
    border: solid 1px #ff0000;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffe5dd), to(#ff2e00));
    background: -webkit-linear-gradient(#ffe5dd, #ff2e00);
    background: -moz-linear-gradient(#ffe5dd, #ff2e00);
    background: -ms-linear-gradient(#ffe5dd, #ff2e00);
    background: -o-linear-gradient(#ffe5dd, #ff2e00);
    background: linear-gradient(#ffe5dd, #ff2e00);
    -pie-background: linear-gradient(#ffe5dd, #ff2e00);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.red:hover {
    color: #fff !important;
    border: solid 1px #ff0000;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff8266), to(#ff2e00));
    background: -webkit-linear-gradient(#ff8266, #ff2e00);
    background: -moz-linear-gradient(#ff8266, #ff2e00);
    background: -ms-linear-gradient(#ff8266, #ff2e00);
    background: -o-linear-gradient(#ff8266, #ff2e00);
    background: linear-gradient(#ff8266, #ff2e00);
    -pie-background: linear-gradient(#ff8266, #ff2e00);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.black {
    color: #ddd !important;
    border: solid 1px #2d2d2d;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#636464), to(#323232));
    background: -webkit-linear-gradient(#636464, #323232);
    background: -moz-linear-gradient(#636464, #323232);
    background: -ms-linear-gradient(#636464, #323232);
    background: -o-linear-gradient(#636464, #323232);
    background: linear-gradient(#636464, #323232);
    -pie-background: linear-gradient(#636464, #323232);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.black:hover {
    color: #fff !important;
    border: solid 1px #191919;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2f2f2f), to(#161616));
    background: -webkit-linear-gradient(#2f2f2f, #161616);
    background: -moz-linear-gradient(#2f2f2f, #161616);
    background: -ms-linear-gradient(#2f2f2f, #161616);
    background: -o-linear-gradient(#2f2f2f, #161616);
    background: linear-gradient(#2f2f2f, #161616);
    -pie-background: linear-gradient(#2f2f2f, #161616);
    behavior: url("/javascript/Common/PIE.php");
}


.btn.black2 {
    color: #fff !important;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#636464), to(#323232));
    background: -webkit-linear-gradient(#636464, #323232);
    background: -moz-linear-gradient(#636464, #323232);
    background: -ms-linear-gradient(#636464, #323232);
    background: -o-linear-gradient(#636464, #323232);
    background: linear-gradient(#636464, #323232);
    -pie-background: linear-gradient(#636464, #323232);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.black2 a {
    color: #fff !important;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#636464), to(#323232));
    background: -webkit-linear-gradient(#636464, #323232);
    background: -moz-linear-gradient(#636464, #323232);
    background: -ms-linear-gradient(#636464, #323232);
    background: -o-linear-gradient(#636464, #323232);
    background: linear-gradient(#636464, #323232);
    -pie-background: linear-gradient(#636464, #323232);
    behavior: url("/javascript/Common/PIE.php");
}

.btn.black2:hover {
    color: #fff !important;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2f2f2f), to(#161616));
    background: -webkit-linear-gradient(#2f2f2f, #161616);
    background: -moz-linear-gradient(#2f2f2f, #161616);
    background: -ms-linear-gradient(#2f2f2f, #161616);
    background: -o-linear-gradient(#2f2f2f, #161616);
    background: linear-gradient(#2f2f2f, #161616);
    -pie-background: linear-gradient(#2f2f2f, #161616);
    behavior: url("/javascript/Common/PIE.php");
}




/* 아이콘설정 */
.icon input {
    padding-left: 0
}

.icon a {
    padding-left: 0
}

.medium .plus {
    width: 23px;
    height: 25px;
    background-position: 6px -295px
}

.large .plus {
    width: 25px;
    height: 31px;
    background-position: 8px -292px
}

.medium .pencle {
    width: 23px;
    height: 25px;
    background-position: -24px -295px
}

.large .pencle {
    width: 25px;
    height: 31px;
    background-position: -22px -292px
}

.medium .minus {
    width: 23px;
    height: 25px;
    background-position: -54px -295px
}

.large .minus {
    width: 25px;
    height: 31px;
    background-position: -52px -292px
}

.medium .check {
    width: 23px;
    height: 25px;
    background-position: -84px -295px
}

.large .check {
    width: 25px;
    height: 31px;
    background-position: -82px -292px
}

.medium .people {
    width: 23px;
    height: 25px;
    background-position: -114px -295px
}

.large .people {
    width: 25px;
    height: 31px;
    background-position: -112px -292px
}

.medium .config {
    width: 23px;
    height: 25px;
    background-position: -144px -295px
}

.large .config {
    width: 25px;
    height: 31px;
    background-position: -142px -292px
}

.medium .search {
    width: 23px;
    height: 25px;
    background-position: -174px -295px
}

.large .search {
    width: 25px;
    height: 31px;
    background-position: -172px -292px
}

/* //아이콘설정 */