html {
	height : 100%;
	overflow : auto;
}

body {
	height : 100%;
	margin : 0px;
	padding : 0px;
	outline : 0;
	font:12px "돋움",Dotum,Helvetica,AppleGothic,Sans-serif;
	background : #d2d2d2;
	overflow : auto;
}
	
*html #container {
	height :100%; /* IE6 */
}

#header {
	position: absolute;
	top: 0px;
	left : 0px;
	width : 100%;
	min-width : 1030px;
	height : 58px;
	background : url(../img/bg_top.png) repeat-x;
	z-index: 200;
	overflow : hidden;
}

#header1 {
	position: absolute;
	top: 0px;
	left : 0px;
	width : 100%;
	min-width : 1030px;
	height : 39px;
	background : url(../img/top_bg.gif) repeat-x;
	z-index: 200;
	overflow : hidden;
}

#container {
	position : relative;
	height : 70%;
	margin : 5px 10px 0px 10px;
}

#header_blank {
	height : 58px;
	margin : 0px;
	padding : 0px;
}

#header_blank1 {
	height : 42px;
	margin : 0px;
	padding : 0px;
}

#content {
	position: absolute;
	width : 100%;
	height :100%;
}

#content .left {
	position : absolute;
	left : -5px;
	width : 50%;
	height : 100%;
}

#left_upper, #left_lower {
	border: 1px solid #adadad !important;
	background: url(../img/shadow.gif) repeat-x 0 0;
	background-color : #fff;
}

#left_lower {
	margin-top : 5px;
}

#xml_frame {
	width: 100%;
}

#xml_frame1 {
	width: 100%;
	height : 50%;
}

#css_frame {
	width: 100%;
}

.activeline {
	background: #e0ecff !important;
}

#content .right {
	position : absolute;
	right : -5px;
	width : 50%;
	height : 100%;
	overflow : hidden;
	border: 1px solid #adadad !important;
	background-color : #fff;
}

#result_frame {
	width : 100%;
	height : 100%;
}

.window_label {
	background: transparent url(../img/sprites.png) no-repeat -254px -51px;
	width: 79px;
	height: 28px;
	line-height: 28px;
	z-index: 100;
	position: absolute;
	top: 1px;
	right: 0px;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
}

.window_label1 {
	background: transparent url(../img/sprites.png) no-repeat -254px -51px;
	width: 79px;
	height: 28px;
	line-height: 28px;
	z-index: 100;
	position: absolute;
	top: 50%;
	margin-top : 5px;
	right: 0px;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
}

#logo {
	background : url(../img/logo.png) no-repeat;
	width : 195px;
	height : 58px;
	float : left;
}

#logo1 {
	background : url(../img/logo02.png) no-repeat;
	width : 300px;
	height : 39px;
	margin-left : 15px;
	margin-right : 20px;
	float : left;
}

#gnb {
	position : relative;
	float : left;
	margin-left: 50px;
	margin-top : 10px;
}

*html #gnb {
	position : absolute;
	top: 0px;
	left : 223px;
	width : 840px;
}

#gnb ul {
	margin: 0;
	padding : 0;
	list-style:none;
	float: left;
}

#gnb .link_group {
	margin : 7px 0 0 10px;
}

#gnb .linkItem {
	float : left;
}



#status1 {
	position : relative;
	float : right;
}

*html #status1 {
	position : absolute;
	top: 0px;
	left : 223px;
	width : 840px;
}

#status1 ul {
	margin: 0;
	padding : 0;
	list-style:none;
	float: left;
}

#status1 .link_group {
	margin : 13px 0 0 0px;
}

#status1 .linkItem {
	float : left;
}

#run {
	background : url('../img/menu1.png') no-repeat;
	display: block;
	width : 72px;
	height : 27px;
}

#run:hover {
	background : url(../img/menu1_over.png) no-repeat;
}

#run_newwin {
	background : url(../img/menu2.png) no-repeat;
	display: block;
	width : 79px;
	height : 27px;
}

#run_newwin:hover {
	background : url(../img/menu2_over.png) no-repeat;
}

#read {
	background : url(../img/menu3.png) no-repeat;
	display: block;
	width : 80px;
	height : 27px;
}

#read:hover {
	background : url(../img/menu3_over.png) no-repeat;
}

#tidy {
	background : url(../img/menu4.png) no-repeat;
	display: block;
	width : 87px;
	height : 27px;
}

#tidy:hover {
	background : url(../img/menu4_over.png) no-repeat;
}


#jslint {
	background : url(../img/menu5.png) no-repeat;
	display: block;
	width : 88px;
	height : 27px;
}

#jslint:hover {
	background : url(../img/menu5_over.png) no-repeat;
}

#history {
	background : url(../img/menu6.png) no-repeat;
	display: block;
	width : 87px;
	height : 27px;
}

#history:hover {
	background : url(../img/menu6_over.png) no-repeat;
}
#xml_win {
	background : url(../img/icon1.png) no-repeat;
	display: block;
	width : 17px;
	height : 16px;
}

#result_win {
	background : url(../img/icon3.png) no-repeat;
	display: block;
	width : 17px;
	height : 16px;
}

#reset_win {
	background : url(../img/icon2.png) no-repeat;
	display: block;
	width : 17px;
	height : 16px;
}

#gnb ul.source_group {
	position: relative;
	width :743px;
	display : block;
	margin-top : 5px;
	list-style:none;
	clear :both;
}

*html #gnb ul.source_group {
	width : 800px;
}

#gnb .source_group .list2 {
	position: relative;
	width : 360px;
	background : url(../img/select_bg.png) repeat-x;
	display: block;
	height : 26px;
	margin : 2px 0 0 12px;
	padding : 5px 8px;
	font : 11px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
	color : #fff;
	float : left;
}

#gnb .source_group .list2 span {
	background : url(../img/arrow_21.png) no-repeat 0px 2px;
	font-weight : bold;
	padding-left : 15px;
}

#gnb .source_group .list3 {
	position: relative;
	width : 320px;
	background : url(../img/select_bg.png) repeat-x;
	display: block;
	height : 26px;
	margin : 2px 0 0 5px;
	padding : 5px 15px;
	font : 11px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
	color : #fff;
	float : left;
}

#gnb .source_group .list3 span {
	font-weight : bold;
	color : yellow;
	cursor : pointer;
}

#gnb .source_group .list3 span:hover {
	text-decoration : underline;
}

#icon_group ul {
	list-style:none;
}

#icon_group .linkItem {
	float : left;
	margin-left: 7px;
}

#icon_group .icon_group {
	position: fixed;
	margin : 7px 0 0 10px;
	right : 5px;
}

#area_group ul {
	list-style:none;
}

#area_group .areaItem {
	float : left;
}

#area_group .area_group {
	position: fixed;
	margin : 7px 0 0 10px;
	right : 5px;
}
*html #icon_group {
	position : absolute;
	right : 5px;
}

#xml_file {
	top : 1px;
	width : 295px;
	height : 15px;
	margin : 0 5px;
	font : 11px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
}

#query, #replace {
	top : 1px;
	width : 70px;
	height : 15px;
	margin : 0 5px;
	font : 11px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
}

.searched {
	background: yellow;
}

.lint_font {
  font: 10pt "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

.history_layer {
	display : block;
	position: absolute;
	top : 50%;
	left : 50%;
	width : 1px;
	height : 1px;
	overflow : hidden;
	background : #fff;
	border : 1px solid #d2d2d2;
	z-index : -1;
	-webkit-transition : all 1s ease;
	-moz-transition : all 1s ease;
	-o-transition : all 1s ease;
	transition : all 1s ease;
}

.history_layer_on {
	display : block;
	position: absolute;
	top : 50%;
	left : 50%;
	width : 730px;
	height : 400px;
	margin-top : -200px;
	margin-left : -365px;
	overflow : auto;
	background : #fefefe;
	border : 1px solid #d2d2d2;
	z-index : 300;
	opacity : 0.8;
}

#history_layer > span {
	position : relative;
	display : block;
	top : 10px;
	left : 25px;
	width : 500px;
	height : 30px;
	font : bold 16px "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

#history_layer ul {
	list-style:none;
}

#history_layer ol {
	clear : both;
	margin : 0;
	padding : 0;
}

#history_layer li {
	font: 10px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
	line-height : 2;
}

#history_layer li a {
	color : blue;
}

#history_layer li a:hover {
	color : red;
}

#history_layer li span {
	position: absolute;
	right : 25px;
	font-size: 9px;
}

.access {
	position: absolute;
	top : 50%;
	left : 50%;
	width : 1px;
	height : 1px;
	background : url(../img/top_bg.gif) repeat-x;
	border : 1px solid #555;
	overflow : hidden;
	-webkit-transition : all 1s ease;
	-moz-transition : all 1s ease;
	-o-transition : all 1s ease;
	transition : all 1s ease;
	-webkit-box-shadow : 4px 4px 10px #888;
	-moz-box-shadow : 4px 4px 10px #888;
	box-shadow : 4px 4px 10px #888;
	-webkit-border-radius : 35px;
	-moz-border-radius : 35px;
	-o-border-radius : 35px;
	border-radius : 35px;
}

.access_on {
	position: absolute;
	top : 50%;
	left : 50%;
	width : 500px;
	height : 70px;
	margin-top : -35px;
	margin-left : -250px;
}

#access .access_label {
	position : relative;
	width : 100%;
	text-align: center;
	top : 15px;	
	font : bold 14px Georgia,"Trebuchet MS",Arial,sans-serif;
	color : #fff;
}

#access .access_label span {
	color : #ff0;
}



.client_layer {
	display : block;
	position: absolute;
	top : 50%;
	left : 50%;
	width : 1px;
	height : 1px;
	overflow : hidden;
	background : #fff;
	border : 1px solid #d2d2d2;
	z-index : -1;
	-webkit-transition : all 1s ease;
	-moz-transition : all 1s ease;
	-o-transition : all 1s ease;
	transition : all 1s ease;

	-webkit-box-shadow: 5px 5px 11px rgba(0,0,0, 0.7);   
	-moz-box-shadow: 5px 5px 11px rgba(0, 0, 0, 0.7);
	box-shadow: 5px 5px 11px rgba(0, 0, 0, 0.7);
}

.client_layer_on {
	display : block;
	position: absolute;
	top : 50%;
	left : 50%;
	width : 730px;
	height : 400px;
	margin-top : -200px;
	margin-left : -365px;
	overflow : auto;
	background : #fefefe;
	border : 1px solid #d2d2d2;
	z-index : 300;
	opacity : 0.8;
}

#client_layer > span {
	position : relative;
	display : block;
	top : 10px;
	left : 25px;
	width : 500px;
	height : 30px;
	font : bold 16px "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

#client_layer ul {
	list-style:none;
}

#client_layer ol {
	clear : both;
	margin : 0;
	padding : 0;
}

#client_layer li {
	font: 10px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
	line-height : 2;
}

#client_layer li a {
	color : blue;
}

#client_layer li a:hover {
	color : red;
}

#client_layer li span {
	position: absolute;
	right : 25px;
	font-size: 9px;
}

#clientList {
	background : url(../img/menu01_01_off.png) no-repeat;
	display: block;
	width : 108px;
	height : 29px;
}

#clientList:hover {
	background : url(../img/menu01_01_on.png) no-repeat;
}

#pause_resume {
	background : url(../img/menu01_02_off.png) no-repeat;
	display: block;
	width : 138px;
	height : 29px;
}

#pause_resume:hover {
	background : url(../img/menu01_02_on.png) no-repeat;
}

#clear {
	background : url(../img/menu01_03_off.png) no-repeat;
	display: block;
	width : 80px;
	height : 29px;
}

#clear:hover {
	background : url(../img/menu01_03_on.png) no-repeat;
}

#scroll {
	background : url(../img/menu01_04_off.png) no-repeat;
	display: block;
	width : 85px;
	height : 29px;
}

#scroll:hover {
	background : url(../img/menu01_04_on.png) no-repeat;
}

#pause_status {
	background : url(../img/auto_refresh.png) no-repeat;
	display: block;
	margin-left:5Px;
	width : 113px;
	height : 29px;
}

#scroll_status {
	background : url(../img/scroll_release.png) no-repeat;
	display: block;
	margin-right:5Px;
	width : 95px;
	height : 29px;
}

#clientInfo {
	width : 100%;
	font: 11px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
	text-shadow: 1px 1px 0 #fff;
}

.clientInfo_on {
	height : 70px;
	padding : 10px;
}


#logLayer {
	position: absolute;
	top:5px;
	width : 100%;
	height :100%;
	padding:10px;
	overflow : auto;
	border: 1px solid #adadad !important;
	background: url(../img/shadow.gif) repeat-x 0 0;
	background-color : #fff;

	font : normal 11px/1.5 "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

.box1 {
	position : relative;
	width : 100%;
	height :100%;
}

.box1:before, .box1:after {
	z-index: -1; 
	position: absolute; 
	content: "";
	bottom: -10px;
	left: 10px;
	width: 50%; 
	top: 80%;
	max-width:300px;
	background: rgba(0, 0, 0, 0.7); 
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform: rotate(-3deg);    
	-moz-transform: rotate(-3deg);   
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

.box1:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: -10px;
	left: auto;
}