a{color:inherit}

#header{position:relative;top:0;left:0;border-top:5px solid #00a0e9;z-index:5;width:100%}
#header .logo{float:left;padding:20px 0 0 20px;margin-bottom:-30px}
#header .logo a{display:inline-block;background-repeat:no-repeat;background-size:100% 100%;background-image:url('/images/logo.png');width:167px;height:70px}

#header .login_button{float:right;padding:37px 20px 37px 0;line-height:19px;font-size:15px;color:#999}
#header .login_button a{display:inline-block;padding:10px;background:#333;color:#fff;text-decoration:none;font-size:17px;margin-left:10px}
#header .login_button a.blue{background:#00a0e9}

#header .login_window{position:absolute;top:15px;right:10px;background:#00a0e9;padding:13px;width:170px;display:none;z-index:1000}
#header .login_window form{position:relative}
#header .login_window .error{padding:10px 0 5px 0;line-height:1.5;color:yellow;border-top:1px solid #ccc;margin-top:10px}
#header .login_window .input_wrap{padding:10px;margin-bottom:10px}
#header .login_window .input_wrap input{border-radius:0;padding:10px;margin:-10px;border:none;background:#fff;width:100%;font-size:14px}
#header .login_window .remember{text-align:right;color:#ccc;display:block;text-decoration:none}
#header .login_window label{cursor:pointer;display:block}
#header .login_window .remember i{display:none;margin-right:3px}
#header .login_window .remember.active{color:#fff}
#header .login_window .remember.active i{display:inline}
#header .login_window .submit button{-webkit-appearance:none;background:#222;padding:10px 0;color:#fff;font-size:14px;width:100%;border:none;cursor:pointer}
#header .login_window .menus{border-top:1px solid #ccc;padding-top:8px;margin-top:10px}
#header .login_window .menus a{color:#fff;display:block;padding:2px 0;text-decoration:none}
#header .login_window .whycant{font-size:12px;color:#fff;line-height:1.5}
#header .login_window .whycant ul{list-style:disc;margin:5px 0 5px 17px}

#body{position:relative}
#body h3.location{font-size:18px;padding:5px 0;color:#555;border-bottom:2px solid #00a0e9;display:inline-block;margin:20px 0}

#body .select_wrap{padding:5px 10px 5px 100px;position:relative}
#body .select_wrap label{position:absolute;top:17px;left:0;border-right:1px;width:65px;border-right:1px solid #ccc;color:#555;font-size:16px;padding:0 10px;line-height:20px}
#body .select_wrap a{text-decoration:none;color:inherit;line-height:22px;margin-right:15px;font-size:16px;white-space:nowrap}
#body .select_wrap a span{border-radius:100px;border:2px solid #00a0e9;display:inline-block;width:22px;height:22px;text-align:center;color:#fff;margin:10px 2px 0 0;background:#00a0e9}
#body .select_wrap#grade a span{border:none;width:26px;height:26px;background-size:100% 100%;position:relative;top:-2px;background-color:#fff;margin-top:11px}
#body .select_wrap a:not(.active) span{background-color:#fff !important;border-color:#ddd !important}
#body .select_wrap#grade a:not(.active) span{opacity:0.3}
#body .select_wrap#grade a span i{visibility:hidden}
#body .select_wrap a:not(.active) span i{visibility:hidden}
#body span.description{display:inline-table;margin:0 5px 10px 2px;color:#999}

#body .input_wrap{padding:10px 10px 10px 100px;background:#fff;border:1px solid #ddd;position:relative}
#body .input_wrap label{position:absolute;top:12px;left:0;border-right:1px;width:65px;border-right:1px solid #ccc;color:#555;font-size:16px;padding:0 10px;line-height:20px}
#body .input_wrap input{padding:10px 10px 10px 100px;margin:-10px -10px -10px -100px;background:transparent;border:none;width:100%;font:inherit;font-size:16px;line-height:24px}
#body .input_wrap textarea{padding:10px;margin:-10px;background:transparent;border:none;width:100%;font:inherit;font-size:16px;line-height:1.5;height:150px}
#body .input_wrap .color{position:absolute;top:0;right:0;width:100px;height:100%;transition:all 0.2s ease-out}
#body  .dropzone{background:#fff}

#body .btnArea{text-align:right}
#body .btnArea button{background:#999;border:none;padding:0;margin-left:3px;margin-bottom:7px;transition:all 0.2s ease-out;line-height:1}
#body .btnArea button.white{background:#fff !important}
#body .btnArea button.white span,
#body .btnArea button.white a{color:#bbb !important}
#body .btnArea button.gray{background:#ddd}
#body .btnArea button.black{background:#222}
#body .btnArea button.blue{background:#00a0e9}
#body .btnArea button:hover,
#body .btnArea button:focus{background:#00a0e9 !important}
#body .btnArea button span,
#body .btnArea button a{text-decoration:none;font-size:16px;display:block;color:#fff;padding:10px;cursor:pointer}
#body .btnArea .description{position:relative;margin-bottom:10px;color:#999;line-height:1.5}
#body .btnArea .description a{color:#bbb;text-decoration:none;margin-right:5px}
#body .btnArea .description .modal{position:absolute;top:22px;right:0;background:#eee;padding:10px;line-height:1.5;white-space:nowrap;display:none;z-index:1000}

#body .relative_wrap{position:relative}

#section_index{}
#section_index .hello{font-size:14px;padding:20px;line-height:1.5;color:#999}
#section_index .hello .grade4{display:inline-block;background-image:url('https://khlug.org/images/grade4.png');width:20px;height:20px;background-size:100% 100%;background-repeat:no-repeat;position:relative;bottom:-4px}

#section_index .bookshelf{background:#ddd;padding:7px}
#section_index .book{float:left;background:#fff;margin:7px;position:relative}
#section_index .book.bp{background:transparent}
#section_index .book.bp a{width:94px;height:94px;text-align:center;margin:30px 5px;background:#eee;border-radius:80px}
#section_index .book.bp .xi-plus{font-size:50px;color:#79c7ea;margin-top:23px}
#section_index .book.bp span{position:absolute;top:103px;left:0;width:100%;text-align:center;color:#999;font-size:11px}
#section_index .book.l2{background:#79c7ea}
#section_index .book.l3{background:#00a0e9}
#section_index .book.l4{background:#0073b9}
#section_index .book.l5{background:#013e8d}
#section_index .book.l6{background:#999}
#section_index .book a{display:block;text-decoration:none}
#section_index .book .grade{float:left;display:block;margin:18px 10px 0 18px;width:30px;height:30px;background-size:100% 100%;border:2px solid transparent;background-repeat:no-repeat}
#section_index .book .grade.grade1{background-image:url('https://khlug.org/images/grade1.png')}
#section_index .book .grade.grade2{background-image:url('https://khlug.org/images/grade2.png')}
#section_index .book .grade.grade3{background-image:url('https://khlug.org/images/grade3.png')}
#section_index .book .grade.grade4{background-image:url('https://khlug.org/images/grade4.png')}
#section_index .book .grade.grade5{background-image:url('https://khlug.org/images/grade5.png')}
#section_index .book .level{float:left;display:block;color:#000;margin:20px 40px 0 0;padding:8px 0;height:13px;color:#999}
#section_index .book .title{display:block;font-size:22px;padding:10px 20px 70px 20px}
#section_index .book.l1 .icon{background-image:url('https://khlug.org/images/favicon.gif')}
#section_index .book.l1 .grade{border-radius:30px;background-color:#ddd;border-color:#ddd}
#section_index .book.l2 .level{color:#777}
#section_index .book.l3 .title{color:#fff}
#section_index .book.l3 .level{color:#bbb}
#section_index .book.l3 .grade{border-radius:30px;background-color:#79c7ea;border-color:#79c7ea}
#section_index .book.l4 .title{color:#fff}
#section_index .book.l5 .level{color:#bbb}
#section_index .book.l5 .title{color:#fff}
#section_index .book.l5 .level{color:#999}
#section_index .book.l6 .icon{background-image:url('https://khlug.org/images/favicon.gif')}
#section_index .book.l6 .level{color:#555}
#section_index .book.l6 .state{color:#00a0e9}
#section_index .book .state{position:absolute;bottom:14px;left:0;display:block;width:calc(100% - 40px);background:rgba(100,100,100,0.5);color:#fff;padding:10px 20px;text-align:right}
#section_index .book .icon{position:absolute;bottom:15px;left:20px;width:30px;height:30px;background:url('https://khlug.org/images/favicon_white.gif') transparent;background-size:100% 100%}

#section_rewrite{margin:20px 20px 10px 20px}
#section_rewrite .content{margin:15px 0}
#section_rewrite .btnArea{margin:10px 0 -10px 0;border-top:1px solid #ccc;padding-top:15px}

#panel-container{overflow:hidden;border-top:1px solid #ddd;border-bottom:1px solid #ddd;transition:margin-right 0.5s ease-out}
#panel-container.editoron{margin-right:300px}

#panel-container .content_area{overflow-y:auto;padding-left:200px;-webkit-overflow-scrolling:touch;transition:padding-left 0.3s ease-in-out}
#panel-container .content_area.closed{padding-left:35px !important}

#panel-container .meta{position:relative;padding:15px;border-bottom:1px solid #ddd;line-height:1.5}
#panel-container .meta h3{font-size:20px}

#section_table{position:absolute;z-index:100;background:#eee;height:100%;width:200px;top:0;left:0;transition:width,left 0.3s ease-in-out}
#section_table.closed{left:-176px !important}
#section_table.editing{position:relative;border:none;top:auto;left:auto;width:auto;height:auto;padding:5px 5px 15px 5px}
#section_table .toggle{position:absolute;top:7px;right:5px;font-size:15px;color:#999;transform:rotate(0);transition:transform 0.4s ease-in-out}
#section_table.closed .toggle{transform:rotate(-180deg)}
#section_table h4{font-size:18px;padding:5px 0;color:#555;border-bottom:2px solid #00a0e9;display:inline-block;margin:15px}
#section_table h4 a{color:#555;text-decoration:none}
#section_table .index{padding:0 10px 10px 0;overflow-y:auto;-webkit-overflow-scrolling:touch}
#section_table .index a{text-decoration:none;color:#000;font-size:14px;display:block;position:relative;padding-left:15px}
#section_table.editing .index li{cursor:ns-resize;transition:all 0.2s ease-out}
#section_table.editing .index li:hover{background:#ddd}
#section_table .index a i{visibility:hidden;color:#00a0e9}
#section_table .index a i.xi-angle-right{position:absolute;top:6px;left:10px}
#section_table.editing .index a i{margin:0 -10px 0 0}
#section_table .index a span.name{border-left:1px solid #ccc;display:inline-block;padding:6px 0 6px 8px;color:#999}
#section_table .index .lv1 a span.name{border-left:none;color:#000}
#section_table .index .lv2 a span.name{color:#666}
#section_table .index a.level{float:right}
#section_table.editing .index a{display:inline-block;border:none}
#section_table .index a.level i{visibility:visible;margin:5px}
#section_table .index .active a i{visibility:visible}
#section_table .btnArea{margin:0 10px 10px 10px !important;text-align:left}
#section_table.editing .btnArea{margin:0 !important;text-align:right !important}
#section_table .btnArea button.white{background:transparent !important}
#section_table .btnArea button.white a{color:#bbb !important}
#section_table form{padding:10px 15px 0 15px}
#section_table form .input_wrap{background:#fff;margin-bottom:10px}
#section_table form .divider{border-top:1px solid #ccc;margin:10px 0 15px 0}

#section_page{position:relative;width:100%;min-width:200px;height:100%}
#section_page .ui-resizable-handle{position:absolute;top:0;right:0;width:7px;background:#bbb;cursor:col-resize;height:100%;padding-bottom:1px}

#section_page .real_content{padding:15px;overflow-x:auto}
#section_page .compiler_avaliable{color:#ddd;background:#00a0e9;padding:15px 15px 15px 45px;margin:-15px -15px 15px -15px;display:block;text-decoration:none;position:relative}
#section_page .compiler_avaliable i{position:absolute;top:50%;left:9px;font-size:30px;color:#79c7ea;margin-top:-16px}
#section_page .download{padding:10px 10px 10px 2px;line-height:1.7}
#section_page .download a{text-decoration:none;color:#999;word-break:break-all}
#section_page .download a i{color:#00a0e9}
#section_page .download a:hover{color:#00a0e9}
#section_page .btnArea{margin:0 20px}

#section_log{width:100%}

#section_log .content_area li{padding:15px;border-bottom:1px solid #ddd}
#section_log .content_area li .page{float:left;color:#999;padding-top:3px}
#section_log .content_area li .page span{padding:2px 5px;background:#999;color:#fff}
#section_log .content_area li .date{float:right;padding:5px 0;color:#999}
#section_log .content_area li .message{line-height:1.4}
#section_log .content_area li .message a{color:inherit}
#section_log .content_area .btnArea{margin:15px 15px 8px 0}

#section_compiler{width:300px;color:#fff;height:100%;background:url('https://khlug.org/images/favicon.gif') #333 no-repeat center center;background-size:40px 40px;position:absolute;top:0;right:-300px;overflow:hidden;transition:right 0.5s ease-out}
#section_compiler .notforyou{color:#999;font-size:14px;text-align:center;height:100%}
#section_compiler .notforyou.connecting{position:absolute;top:0;left:0;width:100%}
#section_compiler .notforyou p{padding:40px 20px;line-height:1.3}
#panel-container.editoron #section_compiler{right:0}

#section_code{height:60%;border-bottom:1px solid #555;display:none;position:relative}
#code_editor{height:100%}

#section_result{display:none}
#section_result .compile{background:#555;display:block;font-size:16px;text-align:center;padding:14px 0;text-decoration:none;transition:all 0.2s ease-out}
#section_result .compile:hover{background:#00a0e9}
#section_result .input_wrap{border:none;border-bottom:1px solid #555;background:#333}
#section_result .input_wrap label{border-color:#555;color:#999}
#section_result .input_wrap textarea{color:#fff;height:25px;resize:vertical;font-size:11px;line-height:1.3}
#code_output{padding:10px;line-height:1.4;color:#fff;font-family:monospace;overflow:auto;word-break:break-all}
#code_output .ready{color:#999;font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','나눔고딕','NanumGothic','돋움','Dotum'}
#code_result{background:#999;font-size:15px;padding:15px 10px;color:#fff;transition:all 0.2s ease-out}
#code_result.success{background:#00a0e9}
#code_result.fail{background:#e83a3a}
#code_result .execute_time{float:right;color:yellow}

#section_error{background:url('https://khlug.org/images/error.jpg') #222 center center;background-size:cover;color:#fff}
#section_error h4{padding:120px 70px 50px 70px;font-size:50px;color:#00a0e9}
#section_error p{line-height:1.7;font-size:16px;padding:0 75px 120px 75px}

#footer{position:relative;padding:10px;line-height:1.7;z-index:4;background:#fff;height:20px}
#footer address{font-style:normal;color:#999}
#footer a{color:inherit;text-decoration:none}
#footer .address{float:left}
#footer .address span{white-space:nowrap;word-break:normal}
#footer .sponsor{float:right}
#footer .sponsor img{vertical-align:top;height:14px;margin-top:5px}
#footer .sponsor a{margin-left:15px}
#footer .sponsor a.khlug{display:inline-block;background-image:url('https://khlug.org/images/logo_squere_light_ko.png');width:72px;height:20px;background-size:100% 100%}

#relogin{position:fixed;bottom:10px;right:10px;width:196px;z-index:10000;display:none}
#relogin iframe{width:196px;height:320px}

@media only screen and (max-width:800px){
	#header .logo{padding:15px 0 0 20px;margin-bottom:-30px}
	#header .logo a{width:119px;height:50px}
	
	#header .login_button{padding:20px 20px 20px 0}
	
	#section_compiler{width:200px;right:-200px}
	#panel-container.editoron{margin-right:200px}

	#section_table{width:150px}
	#section_table.closed{left:-126px !important}
	#panel-container .content_area{padding-left:150px}
}