/* -------------------------------------------------------------------------------------- GLOBAL */
html,
body,
iframe {
	width: 100%;
	height: 100%;
}
html {
	overflow: hidden;
}
a,
a:hover {
	text-decoration: none;
	color: inherit;
}
q {
	font-weight: normal;
	display: block;
/*	
	opacity: 0.75;
	filter: alpha(opacity=75);
*/
}
.noborder td {
	border: none !important;
}
.noborder tr {
	background: none !important;
}

label {
	font-weight: bold;
}


/* -------------------------------------------------------------------------------------- HEADER */
#header {
	position: relative;
	/*height: 48px;*/
	height: 10%;
	padding: 0 16px;
	/*border: 1px dashed red;*/
}
#header h1 {
	line-height: 2;
}








/* ----------------------------------------------------------------------------------------- NAV */
#nav {
	position: absolute;
	top: 16px;
	right: 16px;
	/*border: 1px dashed red;*/
}
#nav li {
	float: left;
	text-align: right;
	border-left-width: 1px;
	border-style: solid;
}
#nav a {
	display: block;
	padding: 8px 16px;
}








/* ------------------------------------------------------------------------------------- CONTENT */
#content {
	position: relative;
	width: 100%;
	height: 90%;
	/*border: 1px dashed blue;*/
}
#content div.content-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 16%;
	height: 100%;
	/*border: 1px dashed blue;*/
}
#content div.content-right {
	position: relative;
	margin-left: 16%;
	height: 100%;
	/*border: 1px dashed red;*/
}


/* ---------------------------------------------------------------------------------------- MENU */
ul.grid {
	padding: 32px 16px;
	/*border: 1px dashed red;*/
}
ul.grid li {
	margin-bottom: 8px;
	/*border: 1px dashed green;*/
}
ul.grid li a {
	display: block;
	position: relative;
	padding: 4px 8px;
	border-width: 1px;
	border-style: solid;
	text-align: left;
}








/* --------------------------------------------------------------------------------------- TOOLS */
#tools {
	padding: 16px 8px;
	/*border: 1px dashed green;*/
}
#tools table tr td {
	position: relative;
	padding: 0 8px;
	border-right-width: 1px;
	border-style: dotted;
	white-space: nowrap;
	vertical-align: top;
}
#tools table tr td.bottom {
	padding-top: 16px;
	border: none;
}
#tools span,
#tools label {
	display: block;
	position: relative;
}
#tools span {
	top: 4px;
}
#tools ul.checkbox {
	width: 260px;
	/*border: 1px dashed red;*/
}
#tools ul.checkbox li {
	float: left;
	width: 130px;
	/*border: 1px dashed green;*/
}








/* ---------------------------------------------------------------------------------------- DATA */
#data {
	/*width: 960px;*/
	margin: 8px;
	padding: 8px;
	cursor: default;
	overflow:auto;
	/*outline: 1px dashed red;*/
}
#data .page {
	margin: 0 auto 40px;
	padding: 16px;
	border-width: 1px;
	border-style: dashed;
	overflow:auto;
}
#data .box {
	margin: 40px auto 0;
	padding: 16px;
	outline: 1px solid #eee;
	overflow:auto;
}
#data .box:hover {
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}
#data .obj {
	margin: 16px auto 0;
}





#data .title {
	/*min-height: 10%;*/
	text-align: center;
}
#data .title div {
	padding-top: 16px;
	text-align: left;
}
#data .title span {
	margin-left: 40px;
}




#data table {
	width: 100%;
	min-width: 1024px;
	text-align: center;
}
#data caption {
	padding: 8px 0 4px;
	text-align: left;
}
#data th,
#data td {
	padding: 2px 4px;
	border-width: 1px;
	border-style: solid;
	white-space: nowrap;
	vertical-align: middle;
}
#data th.top {
	vertical-align: top;
}
#data td.left {
	text-align: left;
}
#data .right {
	float: right;
}
#data .wfix {
	width: 10%;
	/*background-color: red;*/
}


#data .foot,
#data .note {
	padding-top: 40px;
}
#data .note b {
	float: left;
}
#data .note ul {
	margin-left: 80px;
}
#data .note ul li {
	padding-top: 8px;
	border-bottom: 1px dashed gray;
}
#data .foot td {
	border: none;
}



/*
#data .inp_sign,
#data .inp_num,
#data .inp_txt {
	border: none;
}
*/
#data select,
#data input {
	border: none;
}
#data .inp_sign {
	width: 96%;
	text-align: center;
}
#data .inp_num {
	width: 100%;
	background-color: transparent;
	text-align: center;
}
#data .inp_txt {
	width: 96%;
	text-align: left;
}
#data input[type="text"]:focus {
	border: 1px solid red;
}







/* --------------------------------------------------------------------------------------- TITLE */
#title {
	padding: 32px 16px 16px;
	/*border: 1px dashed red;*/
}
#title .menu {
	height: 24px;
	margin-top: 8px;
}
#title .menu li {
	float: left;
	/*border: 1px dashed blue;*/
}
#title .menu li a {
	display: block;
	padding: 4px 16px;
}







/* -------------------------------------------------------------------------------------- DETAIL */
#detail {
	position: relative;
	padding: 0 16px 80px;
	/*border: 1px dashed red;*/
}
#detail table {
	margin: 8px 0;
	text-align: center;
}
#detail .filter {
	position: relative;
	margin-bottom: 24px;
	padding-bottom: 8px;
	border-width: 1px;
	border-style: dashed;
	/*border: 1px dashed red;*/
}
#detail caption {
	padding: 8px 0 4px;
}
#detail caption,
#detail .filter td {
	text-align: left;
}
#detail .filter label {
	display: block;
}
/*#detail tbody tr:hover .big {
	font-weight: bold;
}*/
#detail th,
#detail td {
	padding: 6px 8px 4px;
	border-width: 1px;
	border-style: solid;
	white-space: nowrap;
	vertical-align: middle;
	/*text-align: center;*/
}
#detail th {
	padding-right: 16px;
	padding-left: 16px;
}
#detail td.top {
	vertical-align: top;
}
#detail label {
	display: block;
}
#detail .msg {
	display: block;
	margin-top: 16px;
	padding: 16px;
	border-width: 1px;
	border-style: dotted;
}
#detail .box {
	position: absolute;
	top: 32px;
	right: 16px;
	margin-left: 420px;
	padding: 16px;
	border-width: 1px;
	border-style: dotted;
}
#detail .box p {
	margin-bottom: 16px;
}








/* -------------------------------------------------------------------------------------- CONFIG */
#config {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#config form {
	position: relative;
	top: 64px;
	left: 16px;
	width: 720px;
	padding: 16px;
	box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.1);
}
#config form:before {
	content: "";
	position: absolute;
	top: -16px;
	left: 16px;
	border-width: 8px;
	border-style: solid;
	border-color: transparent transparent #999 transparent;
}
#config h5 {
	padding-top: 8px;
}
#config label {
	margin-right: 8px;
}






/* -------------------------------------------------------------------------------------- DETAIL */
#footer {
	display: none;
}








/* ------------------------------------------------------------------- INPUT */
select,
input[type="password"],
input[type="text"] {
	padding: 0;
	border-width: 1px;
	border-style: solid;
}
select {
	height: 18px;
}
input {
	padding: 0 8px;
}
select option {
	border-width: 0 0 1px 0;
	border-style: dotted;
}
input[type="button"],
input[type="submit"],
button {
	position: relative;
	padding: 2px 6px 4px;
	border: none;
	border-radius: 2px;
	-moz-box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.25) inset, 1px 1px 3px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.25) inset, 1px 1px 3px rgba(0, 0, 0, 0.25);
	box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.25) inset, 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
input[type="button"]:active,
input[type="submit"]:active,
button:active {
	top: 1px;
	-moz-box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25) inset, 0px 0px 3px rgba(0, 0, 0, 0.25) inset;
	-webkit-box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25) inset, 0px 0px 3px rgba(0, 0, 0, 0.25) inset;
	box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25) inset, 0px 0px 3px rgba(0, 0, 0, 0.25) inset;
}
input[type="checkbox"] {
	margin: 0 4px;
}








/* -------------------------------------------------------------------- FONT */
h1 {
	font-size: 2.5em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.75em;
}
h4 {
	font-size: 1.5em;
}
#data .title,

#detail caption,
h5 {
	font-size: 1.25em;
}
/*#data .inp_num,*/
label,
q,
h6 {
	font-size: 11px;
}








/* -------------------------------------------------------------- COLOR > BG */

/* BLACK */
.b_black {
	background-color: #000;
}
#tools,
#title .menu,
#content div.content-left,
#detail tbody tr:hover,
.b_black_fade {
	background-color: rgba(175, 175, 200, 0.25);
}


/* GRAY */
#title .menu li a:hover,
#config form,
.b_gray {
	background-color: #999;
}
#data th {
	background-color: rgba(150, 150, 200, 0.5);
}




/* WHITE */
ul.grid li a,
.b_white {
	background-color: #fff;
}
#config,
.b_white_fade {
	background-color: rgba(250, 250, 250, 0.5);
}


/* GREEN */
ul.grid li a.active,
#title .menu li.active a,
.b_green {
	background-color: #00b6b5;
}


/* BLUE */
#header,
#detail th,
.b_blue {
	background-color: #165c99;
}


/* RED */
.b_red {
	background-color: red;
}




/* ------------------------------------------------------------ COLOR > FONT */

/* BLACK */
.f_black {
	color: #333;
}
.f_black_fade {
	color: rgba(0, 0, 0, 0.4);
}


/* WHITE */
#title .menu li a:hover,
#config form,
#header,
#nav,
ul.grid li a.active,
#title .menu li.active a,
input[type="submit"],
input[type="button"],
button,
.f_white {
	color: white !important;
}
#detail th,
.f_white_fade {
	color: rgba(255, 255, 255, 0.75);
}


/* GREEN */
h6,
.f_green {
	color: green;
}


/* BLUE */
body,
input,
select,
.f_blue {
	color: #165c99;
}


/* RED */
.f_red {
	color: red;
}



.f_yellow {
	color: #f5a739;
}





/* -------------------------------------------------------------------------------------- BORDER */

/* BLACK */
#detail th,
#detail td,
#content ul.grid li:hover a,
input,
select,
select option {
	border-color: #397ebb;
}
#data .page,
#tools table tr td,
#content ul.grid li a,
#detail .filter,
hr {
	border-color: rgba(0, 0, 0, 0.25);
}



/* WHITE */
#nav li {
	border-color: rgba(250, 250, 250, 0.25);
}