/*
[Contents]

	0- Global
	1- Header
	2- Main Container
	3- Main
	4- Sidebar
	5- Footer
	6- Other(plugin rewriter)
*/

/* =0 Global
---------------------------------------------------------------------------------------------------------------------*/
body {
	font: 12px/1.5 "SegoeUI", "Helvetica Neue", "OpenSans", Arial, Helvetica, sans-serif;
	overflow-y: scroll;
	min-width: 1024px;

	&.blank {
		overflow: auto;
	}

	&.in-dialog {
		min-width: 0;
		overflow: auto;

		h1.title {
			font-size: 24px;
			font-weight: 300;
			line-height: 1;
			margin-bottom: 20px;
		}
	}

	&.fullscreen {
		#header,
		.topbar {
			z-index: auto !important;
		}
	}

	&.loading {
		overflow: hidden;

		.block.loading {
			display: block;
		}
	}
}

.gray {
	color: #666;
}

/* =1 Header
---------------------------------------------------------------------------------------------------------------------*/
#header {
	background: #0078B1;
	font-size: 14px;
	min-height: 40px;
	left: 0;
	padding: 0 10px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1001;
	.box-shadow(inset 0 -2px 0 rgba(0,0,0,0.2));

	a {
		color: #FFF;

		&:hover {
			background-color: rgba(0,0,0,0.2);
		}
	}

	.j_DropDown {
		> a {
			padding-right: 23px !important;
			position: relative;
		}

		.icon.arrow {
			margin: 0;
			position: absolute;
			right: 10px;
			top: 19px;
		}
	}

	.panel { /* Panel */
		float: left;
		margin-left: 21px;

		> li {
			float: left;
			position: relative;
		}

		a {
			display: block;
			line-height: 40px;
			padding: 0 10px;
			white-space: nowrap;
		}

		.active > a {
			background-color: rgba(0,0,0,0.4);
		}

		.icon {
			float: left;
			margin: 7px 5px 0 0;
		}

		ul {
			background: #FFF;
			border: 2px solid #006CAD;
			border-top: none;
			display: none;
			min-width: 100%;
			position: absolute;
			z-index: 1009;
			max-height: 500px;
			overflow-y: auto;
			.box-sizing(border-box);

			li {
				color: #666;
				line-height: 34px;
				padding: 0 10px;
			}

			a {
				color: #000;
				line-height: 34px;
				margin: 0 -10px;
				white-space: nowrap;
				padding-right: 30px;

				&:hover {
					background: #F3F3F3;
				}

				&:active {
					background: #006CAD;
					color: #FFF;
				}
			}
		}

		.upload-button {
			span {
				height: 100%;
				left: 0;
				overflow: hidden;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: 9999;
				.opacity(0);
			}

			input {
				cursor: pointer;
				font-size: 32px;
				height: 100px;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.separator {
			background: #000;
			height: 1px;
			margin: 10px;
		}
	}
}

/* Logo
----------------------------------------------------------*/
.logo {
	float: left;
	padding: 8px 45px 8px 10px;
	position: relative;

	img {
		display: block;
	}

	.icon {
		position: absolute;
		right: 10px;
		top: 5px;
	}

	&:hover .icon {
		background-position: -150px -170px;
	}
}

/* Quicklinks
----------------------------------------------------------*/
.quicklinks {
	float: right;

	li {
		float: left;
		position: relative;

		&.last ul {
			right: 0;
		}
	}

	a {
		display: block;
		line-height: 40px;
		padding: 0 10px;
		white-space: nowrap;
	}

	.icon {
		float: left;
		margin: 15px 4px 0 0;
	}

	.arrow {
		float: right;
		margin: 19px 0 0 5px;
	}

	ul {
		background: #FFF;
		border: 2px solid #006CAD;
		border-top: none;
		display: none;
		min-width: 100%;
		position: absolute;
		z-index: 10;
		.box-sizing(border-box);

		li {
			float: none;
		}

		a {
			color: #000;
			white-space: nowrap;
		}
	}

	#header & {
		ul a {
			color: #000;
			white-space: nowrap;

			&:hover {
				background: #F3F3F3;
			}

			&:active {
				background: #006CAD;
				color: #FFF;
			}
		}

		.active > a {
			background-color: rgba(0,0,0,0.4);
		}
	}
}



/* =2 Main Container
---------------------------------------------------------------------------------------------------------------------*/
/* Title */
#main-container h1.title {
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	margin-bottom: 26px;
}
/* Wrap */
#main-container > .wrap {
	bottom: 30px;
	left: 0;
	overflow: auto;
	padding: 20px;
	position: fixed;
	right: 0;
	top: 40px;

	.in-dialog & {
		top: 51px;
	}
}

/* Topbar
----------------------------------------------------------*/
#main-container .topbar {
	.title {
		float: left;
	}

	.name-title {
		font-size: 16px;
		font-weight: 300;
		line-height: 30px;
		display: block;
		background: #fff;
		padding: 0 10px;
	}

	.field {
		line-height: 36px;

		&.left {
			margin: -5px 0 0 10px;
		}

		input[type="text"] {
			border: 1px solid #BABABA;
			float: left;
			font-size: 24px;
			margin-right: 10px;
		}
	}


	.field-validation-error {
		line-height: 36px;
	}

	.view-switch {
		float: right;
		margin: 2px 20px 0 0;
	}

	.searchbox {
		float: right;
	}
}

#main-container > .wrap .topbar {
	background: #FFF;
	border-bottom: 1px solid #CCC;
	height: 30px;
	left: 0;
	padding: 20px;
	position: fixed;
	right: 0;
	top: 40px;
	z-index: 999;
}

.in-dialog #main-container > .wrap .topbar {
	top: 0;
}

/* Common-form
----------------------------------------------------------*/
#main-container > .wrap .common-form.fixed {
	bottom: 31px;
	left: 0;
	overflow: auto;
	position: fixed;
	right: 0;
	top: 111px;

	.panel {
		bottom: 31px;
		overflow-y: scroll;
		position: fixed;
		right: 0;
		top: 111px;
		width: 300px;
	}
}

.common-form .common-code-mirror .CodeMirror-wrap {
	border: 1px solid #CCC;
	height: 480px;
}

#main-container > .wrap .common-form.fixed .CodeMirror-wrap {
	bottom: 31px;
	height: auto !important;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 300px;
	top: 111px;
}

#main-container > .wrap .common-form.fixed.fullscreen .CodeMirror-wrap {
	right: 0;
}

.CodeMirror-wrap.CodeMirror-fullscreen {
	background: #FFF !important;
	bottom: 0 !important;
	left: 0 !important;
	position: fixed !important;
	right: 0 !important;
	top: 0 !important;
	z-index: 1001 !important;
}

#main-container > .wrap .common-form.fixed .CodeMirror-scroll {
	margin: 0;
	padding: 0;
}

/* Common table
----------------------------------------------------------*/
.blank .common-table.fixed .thead {
	background: #FFF;
	left: 0;
	position: fixed;
	right: 0;
	top: 111px;
	z-index: 999;
}

.blank .common-table.fixed .tbody {
	margin: 51px -20px 0;
}

.blank.in-dialog .common-table.fixed .thead {
	top: 71px;
}

.blank.in-dialog .common-table.fixed .tbody {
	margin-top: 0;
}

/* =3 Main
---------------------------------------------------------------------------------------------------------------------*/
#main {
	margin: 40px 0 30px 200px;

	.block {
		margin-bottom: 20px;
		padding: 20px;

		&.fixed {
			margin-top: 111px;
		}

		.common-table,
		.command {
			margin: 0 -20px;
		}
	}
	/* Topbar
----------------------------------------------------------*/
	.topbar {
		background: #FFF;
		border-bottom: 1px solid #CCC;
		height: 30px;
		left: 200px;
		padding: 20px;
		position: fixed;
		right: 0;
		top: 40px;
		z-index: 1000;
	}
	/* Common table
----------------------------------------------------------*/
	.common-table.fixed {
		.thead {
			background: #FFF;
			left: 200px;
			position: fixed;
			right: 0;
			top: 111px;
			z-index: 999;
		}

		.tbody {
			margin-top: 112px;
		}
	}
	/* Common grid
----------------------------------------------------------*/
	.common-grid.fixed {
		margin-top: 111px;
	}
}


/* =4 Sidebar
---------------------------------------------------------------------------------------------------------------------*/
#sidebar {
	background: #F0F0F0;
	bottom: 0;
	position: fixed;
	top: 40px;
	width: 200px;
	/* Topbar */
	.topbar {
		background: #A8A8A8;
		height: 54px;
		padding: 8px 16px 9px;
	}
	/* Container */
	.container {
		bottom: 0;
		left: 0;
		overflow: auto;
		position: fixed;
		top: 111px;
		width: 200px;
	}
}

/* Site manager
----------------------------------------------------------*/
.block.sitemanager {
	.title {
		color: #FFF;
		font-size: 14px;
		line-height: 1;
		margin-bottom: 10px;
		text-transform: uppercase;
	}

	.switcher {
		background: #FFF;
		float: left;
		font-size: 16px;
		position: relative;
		width: 135px;

		.current {
			display: block;
			line-height: 30px;
			padding: 0 10px;
			position: relative;

			span {
				display: block;
				overflow: hidden;
				white-space: nowrap;
			}

			.arrow {
				position: absolute;
				right: 10px;
				top: 10px;
			}
		}

		.arrow {
			display: none;
		}

		&.active {
			.current {
				cursor: pointer;
				display: block;
				padding: 0 20px 0 10px;
			}

			.arrow {
				display: block;
			}
		}

		> .list {
			background: #FFF;
			border: 1px solid #A8A8A8;
			display: none;
			left: -1px;
			min-width: 100%;
			position: absolute;
			z-index: 9999;
		}

		.list {
			a {
				color: #000;
				display: block;
				font-size: 14px;
				line-height: 2;
				padding: 0 10px;
				white-space: nowrap;

				&:hover {
					background: #E7E7E7;
				}
			}

			li {
				//Level 1
				li {
					//Level 2
					a {
						padding-left: 20px;
					}

					li {
						//Level 3
						a {
							padding-left: 30px;
						}

						li {
							//Level 4
							a {
								padding-left: 40px;
							}
						}
					}
				}
			}

			.active > a {
				font-weight: 600;
			}
		}
	}

	.right.add {
		margin: 2px -4px 0 0;
	}
}

/* Searchbox
----------------------------------------------------------*/
#sidebar .topbar .searchbox {
	margin-top: 12px;

	input {
		width: 126px;
	}
}

/* Menu
----------------------------------------------------------*/
.block.menu {
	> ul {
		padding-bottom: 30px;
	}

	li {
		font-weight: 300;
		line-height: 30px;
		position: relative;

		&.current > a {
			background-color: #D4D4D4;
		}

		&.with-icon {
			> img.icon {
				position: absolute;
				top: 5px;
				left: 20px;
			}

			> a {
				padding-left: 50px;
			}
		}

		&.active {
			> .arrow {
				display: block;

				.icon {
					background-position: -16px 0;
					height: 6px;
					margin: 14px 0 0 3px;
					width: 8px;
				}

				&:hover .icon {
					background-position: -32px 0;
				}
			}

			> ul {
				display: block;
			}
		}
		/* Level 2 */
		ul {
			display: none;
			margin-top: 3px;
		}

		li {
			a {
				font-size: 12px;
				padding-left: 28px;
			}

			.arrow {
				display: block;
				left: 16px;
				width: 9px;

				.icon {
					background-position: -7px -6px;
					height: 9px;
					margin-top: 12px;
					width: 6px;
				}

				&:hover .icon {
					background-position: -13px -6px;
				}
			}

			&.active {
				> .arrow {
					.icon {
						background-position: -19px -6px;
						height: 6px;
						width: 6px;
					}

					&:hover .icon {
						background-position: -25px -6px;
						margin-top: 13px;
					}
				}
			}
			/* Level 3 */
			ul {
				margin: 0;
			}

			li {
				a {
					padding-left: 40px;
				}

				.arrow {
					left: 28px;
				}
				/* Level 4 */
				li {
					a {
						padding-left: 52px;
					}

					.arrow {
						left: 40px;
					}
				}
			}
		}
	}

	a {
		color: #000;
		display: block;
		font-size: 20px;
		overflow: hidden;
		padding-left: 16px;
		padding-right: 5px;
		text-overflow: ellipsis;
		white-space: nowrap;

		&:hover {
			background-color: #E7E7E7;
		}
	}

	.arrow:hover ~ a {
		background-color: #E7E7E7;
	}
	/* Arrow */
	span.arrow {
		display: none;
		height: 30px;
		position: absolute;
		text-indent: -9999px;
		width: 15px;

		.icon {
			background-position: -18px -16px;
			height: 8px;
			margin: 13px 0 0 4px;
			width: 6px;
		}

		&:hover .icon {
			background-position: -30px -16px;
		}
	}

	&:hover .arrow {
		display: block;
	}
}

/* =5 Footer
---------------------------------------------------------------------------------------------------------------------*/
#footer {
	background: #FFF;
	border-top: 1px solid #CCC;
	bottom: 0;
	color: #666;
	height: 20px;
	left: 200px;
	padding: 5px 10px;
	position: fixed;
	right: 0;

	.no-sidebar & {
		left: 0;
	}
}