/**
 * Styles for library
 * 
 * @author hjlee
 * @since 1.0
 */

/*
	Common
*/
body {
	margin:0px;
	font-family:'Nanum Gothic',Arial, Helvetica, sans-serif;
}

/*
	Notification
*/
div#div-notification-area {
	position:fixed;
	top:0px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	z-index:2000;
}

div.div-notification {
	opacity:0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	top:60px;
	width:auto;
	margin-left:5%;
	margin-right:15px;
	position:relative;
	right:0;
	color:white;
	filter: alpha(opacity=0);
	z-index:2001;
	padding:10px;
	border-radius:3px;
	border:1px solid rgba(255,255,255,.1);
	overflow:hidden;
	-webkit-box-shadow:5px 5px 7px rgba(0, 0, 0, .3);
  	-moz-box-shadow:5px 5px 7px rgba(0, 0, 0, .3);
  	box-shadow:5px 5px 7px rgba(0, 0, 0, .3);	
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-notification-debug {
	background-color:rgba(255,255,255,.8);
	color:rgb(50,50,50);
	border:1px solid rgba(0,0,0,.1);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-notification-info {
	background-color:rgba(0,0,0,.8);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-notification-warning {
	background-color:rgba(255,203,37,.8);
	color:rgb(50,50,50);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-notification-error {
	background-color:rgba(195,28,34,.8);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-notification-fatal {
	background-color:rgba(195,28,34,1);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-notification-icon {
	float:left;
	width:16px;
	height:16px;
	margin-top:3px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	background-size: 144px 16px;
	background-image: url('../../img/nlib/notification_icons.png');
}

div.div-notification-debug-icon {
	background-position: 0px 0px;
}

div.div-notification-info-icon {
	background-position: -96px 0px;
}

div.div-notification-warning-icon {
	background-position: -128px 0px;
}

div.div-notification-error-icon {
	background-position: -32px 0px;
}

div.div-notification-fatal-icon {
	background-position: -64px 0px;
}

div.div-notification-msg {
	overflow:hidden;
	margin-left:23px;
	margin-right:20px;
	margin-top:2px;
	font-size:10pt;
	word-break:break-all;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-notification-msg-close {
	float:right;
	cursor:pointer;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

a.btn-close-notification {
	font-size:20px;
	font-weight:bold;
	line-height:1;
	color:#000;
	text-shadow:0 1px 0 #fff;
	opacity:.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	-moz-opacity:0.2;
	-khtml-opacity:0.2;
}

a.btn-close-notification:hover {
	opacity:.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
}

a.btn-close-notification:active {
	opacity:.7;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	color:#fff;
	text-shadow:0 1px 0 #000;
}


/*
	Loading screen
*/

/* 부분 로딩 화면 */
div.div-loading-box {
	position:absolute;
	background:rgba(0,0,0,.7);
	border:1px solid #dddddd;
	margin:10px;
	padding:10px;
}

div.div-loading {
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0);
}

/* 전체 로딩 화면 */
div#div-loading {
	width:100%;
	height:150%;
	position:fixed;
	background:rgba(0,0,0,.7);
}

div.div-loading,
div#div-loading {
	top:0;
	left:0;
	z-index:3000;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.content-wrapper div.div-loading,
div.content-wrapper div#div-loading {
	z-index:500;
}

div.div-loading-cell {
	position:relative;
}

div#div-loading-cell {
	position:fixed;
	width:100%;
	top:5%;
	left:7%;
}

div.div-loading-cell,
div#div-loading-cell {
	text-align:left;
	color:#FFFFFF;
	font-weight:bold;
	font-size:12px;
	display:inherit;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-loading-cell-img,
div#div-loading-cell-img {
	float:left;
	background-image:url("../../img/nlib/ajax-loader.gif");
	background-size:12px 12px;
	width:12px;
	height:12px;
	margin-right:10px;
	margin-top:3px;
}

div.div-loading-cell-text,
div#div-loading-cell-text {
	float:left;
}


/*
	Guide screen
*/
div#div-guide {
	width:100%;
	height:150%;
	position:fixed;
	z-index:1000;
	top:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-guide-bg {
	position:fixed;
	background-color:rgba(0,0,0,.7);
}

div.div-guide-item-circle {
	position:fixed;
	background-image:url('../../img/nlib/guideline_circle.png');
	opacity:.7;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

div.div-guide-item {
	display:none;
}

div#div-guide-item-0 {
	display:block;
}

div.div-guide-item-rectangle {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
  	position:fixed;
	border:3px solid white;
}

div.div-guide-move-page {
	position:fixed;
	box-sizing:border-box;
	padding-bottom:10px;
}

div.div-guide-prev {
	padding-left:10px;
	left:10px;
}

div.div-guide-next {
	padding-right:10px;
	right:10px;
}

div.div-guide-close {
	position:fixed;
	padding-top:10px;
	padding-right:10px;
	top:0px;
	right:10px;
	box-sizing:border-box;
}

a.btn-close-guide, a.btn-prev-guide, a.btn-next-guide {
	font-size:20px;
	font-weight:bold;
	line-height:1;
	color:#fff;
	text-shadow:0 1px 0 #888888;
	cursor:pointer;
	text-decoration:none;
}

a.btn-close-guide:hover, a.btn-next-guide:hover, a.btn-prev-guide:hover {
	opacity:.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
	text-decoration:none;
}

a.btn-close-guide:active, a.btn-next-guide:active, a.btn-prev-guide:active {
	opacity:.7;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	color:#fff;
	text-shadow:0 1px 0 #000;
	text-decoration:none;
}

div.div-guide-text {
	position:fixed;
	color:white;
	z-index:1001;
}

div.div-guide-pointer {
	position:fixed;
	z-index:1001;
	background-image:url('../../img/nlib/hand.png');
	width:15px;
	height:20px;
}



/*
	Image selector
*/
input.nlib-input-image-file-control {
	position:absolute;
	opacity:.0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
}

input.jcrop-keymgr {
	opacity:.0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
}

input.nlib-input-non-preview-image-selector {
	position:absolute;
	background:url('../../img/nlib/none_image.png') #dddddd center center no-repeat;
}

div.nlib-input-image-file-control-bg {
	position:absolute;
	overflow:hidden;
}

div.nlib-input-image-file-control-text {
	position:absolute;
	word-break:break-all;
}

img.img-image-selector-preview {
	position:absolute;
}

div.div-preview-crop-btn {
	position:absolute;
	width:25px;
	height:25px;
	border-radius:15px;
	background-color:rgba(255,255,255,0.7);
	background-image:url(../../img/nlib/crop.png);
	background-position:2px 2px;
	background-size:21px 21px;
	font-size:20px;
	padding-left:5px;
	padding-right:5px;
	padding-top:3px;
	cursor:pointer;
}

div.div-preview-rotate-btn {
	position:absolute;
	width:25px;
	height:25px;
	border-radius:15px;
	background:rgba(255,255,255,0.7);
	font-size:15px;
	padding-left:5px;
	padding-right:5px;
	padding-top:3px;
	cursor:pointer;
}

div.div-preview-remove-btn {
	position:absolute;
	width:25px;
	height:25px;
	border-radius:15px;
	color:white;
	background:rgba(128,0,0,0.7);
	font-size:15px;
	padding-left:5px;
	padding-right:5px;
	padding-top:3px;
	cursor:pointer;
}

div.div-preview-crop-btn:hover,
div.div-preview-rotate-btn:hover,
div.div-preview-remove-btn:hover {
	opacity:0.3;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	-khtml-opacity: 0.3;
}

div.div-preview-crop-btn:active,
div.div-preview-rotate-btn:active,
div.div-preview-remove-btn:active {
	opacity:1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
}

img#img-cropping-target {
}

div.div-cropping-target-loading {
	width:100%;
	height:100px;
	background-size:12px 12px;
	background-position:center;
	background: url("../../img/nlib/ajax-loader-white-bg.gif") no-repeat;
}

div.nlib-input-image-file-control-text {
	text-align:center;
	padding-top:70%;
	color:white;
}

div.div-lazy-loading {
	position:absolute;
	min-width:12px;
	min-height:12px;
	padding-left:20px;
	background:url("../../img/nlib/ajax-loader-white-bg.gif") no-repeat;
	background-size:12px 12px;
	background-position:left center;
}