/* ----------------------------------------------------------------------------------------------------------
1) HTML tags, reset
---------------------------------------------------------------------------------------------------------- */

   html, body {
   background: #000;
   margin: 0;
   padding: 0;	
   }

   body {
   background: #000;
   font-family: Simhei, Arial;
   font-size: 16px;
   line-height: 1.2;
   color: #000 ;
   }

   hr {
   border: none;
   height: 1px; line-height: 1px;
   background: #626262;
   margin-bottom: 20px;
   padding: 0;
   }

   table, img {
   border: 0 ;
   }

   a {
   outline: none;
   color: #efefef;
   text-decoration: none;
   }

   a:hover {
   outline: none;
   color: #9fda58;
   }

   a img {
   border: 0px;
   }

   input, textarea, option, select {
   padding: 2px;
   background-color: #fff;
   color: #444;
   border: 1px solid #626262;
   }

/* ----------------------------------------------------------------------------------------------------------
2) Styles
---------------------------------------------------------------------------------------------------------- */

   hr.light {
   border-top: 1px solid #aaa;
   border-bottom: 0px;
   border-left: 0px;
   border-right: 0px;
   height: 0px;
   }

   hr.deep {
	border: none;
	height: 1px; line-height: 1px;
	background: #555;
	margin-bottom: 20px;
	padding: 0;
   }

   a div.icon { width: 11px; height: 17px; background-color: #fff; background: url('images/forum_list_new.gif') no-repeat 0 0; }
   a:link div.icon { background-color: #189a28; }
   a:visited div.icon { background-color: #fff; }

   a div.iconh { width: 11px; height: 17px; background-color: #fff; background: url('images/forum_list_new.gif') no-repeat 0 0; }
   a:link div.iconh { background-color: #fff; }
   a:visited div.iconh { background-color: #fff; }

   a.text { text-decoration: none; color: #000; }
   a.text:hover {
   outline: none;
   color: #189a28;
   }

   a img.thumb_s {
   border: 3px solid #fff;
   margin: 8px 8px 0 0;
   vertical-align: top;
   }

   a img.thumb_l {
   border: 7px solid #fff;
   vertical-align: top;
   }

   /* overlay */

   .bottom_overlay{
   position:absolute;
   bottom: 0 ; left: 0 ; width: 100%;
   background: #111;
   padding: 8px;
   filter: alpha(opacity=50);
   -moz-opacity: 0.50;
   -khtml-opacity: 0.50;
   opacity: 0.50;
   color: #ddd;
   }

   /* paddingg layout */

   .half_padd{ padding: 6px 0px; }
   .half_pad{ padding: 0 0 6px 0; }
   .line_padd{ padding: 12px 0; }
   .line_pad{ padding: 0 0 12px 0; }
   .lines_padd{ padding: 24px 0px; }
   .lines_pad{ padding: 0 0 24px 0; }
   .block_padd{ padding: 24px; }
   .side_padd{ padding: 0 24px; }
   .downb_padd{ padding: 0 24px 24px 24px; }
   .split_padd{ padding: 0 0 0 24px; }

   /* block layout */

   .b_left { float: left; }
   .b_right { float: right; text-align: right; }
   .b_end { clear: both; }

   .wrap {
   position: relative;
   margin: auto;
   overflow: hidden;
   }

   /* font styles and color styles */

   .font_deep { font-weight: Bold; color: #189a28; }
   .font_light { font-weight: Bold; color: #9fda58; }
   .font_caution { font-weight: Bold; color: #f00; }
   .font_patt { line-height: 100%;font-size: 10px;letter-spacing: 1px;color:#000;font-Family: DotumChe; }
   .font_listpg { line-height: 100%;font-size: 10px;letter-spacing: 0px;color:#000;font-Family: DotumChe;border-bottom: 1px solid #000; }
   .font_note { font-size: 13px;color: #696969; }

   .color_caution { color: #f00; }
   .color_note { color: #5f5f6f; }
   .color_deep { color: #189a28; }
   .color_light { color: #9fda58; }
   .color_dotted { color: #9d9d9d; }

   .font_main_title {color: #000;font-weight: bold;font-size: 38px;}

   .font_none { text-decoration: none; }
   .font_none a { text-decoration: none; }
   .font_underline { text-decoration: underline; }

   /* font size */

   .font_size_large { font-size: 36px; }
   .font_size_big { font-size: 24px; }
   .font_size_normal { font-size: 16px; }
   .font_size_middle { font-size: 14px; }
   .font_size_small { font-size: 12px; }
   .font_size_tiny { font-size: 10px; }

   /* block bg */

   .containbg { background: #b2b2b2; }
   .listbg { background: #c8c8c8; }

   /* font type */

   .font_nortype { font-family: Arial; }

/* ----------------------------------------------------------------------------------------------------------
3) Layout
---------------------------------------------------------------------------------------------------------- */

   /* main */

   body.mainbody {
   overflow: hidden ;
   }


   #headerbar {
   width: 100%;
   height: 130px;
   background-color: #000;
   z-index: 900;
   }
   .mainheader_logo {
   position: absolute ;
   top: 50% ;
   left: 50% ;
   width: 430 ;
   height: 132 ;
   margin-left: -215px ;
   margin-top: -66px ;
   }


   .headerbutt {
   position: absolute;
   width: 60px;
   cursor: pointer;
   z-index: 999;
   }
   #headerbuttl {
   top: 130px; left: 0px; margin-top: -22px;
   }
   #headerbuttr {
   top: 130px; left: 57px; margin-top: -22px;
   }
   #headerbuttm {
   top: 130px; left: 114px; margin-top: -22px;
   }


   #mainmenu {
   overflow: auto;
   width: 190px;
   margin-top: -1px ;
   background: url('images/main_menu.gif') no-repeat 0 0;
   background-color: #202020;
   padding-bottom: 30px;
   }


   #container {
   overflow: auto;
   background-color: #b2b2b2;
   }
   #bodycontain {
   padding: 44px;
   }
   .jScrollPaneContainer {
	position: relative;
   margin-top: -1px ;
	overflow: hidden;
   }


   #bodybrandbar {
   position: absolute;
   top: 130px; left: 190px;
   z-index: 900;
   }

   #bodyfuncbar {
   position: absolute;
   top: 130px; left: 190px;
   width: 100%;
   height: 40px;
   background-color: #464646;
   z-index: 900;
   }
   #bodyfuncbar img {
   vertical-align: middle;
   }

/* buttons */


   a.pgbutt {
   background:url('images/album_page_butt_34x148.gif') no-repeat;
   display:block;
   width:34px; height:148px;
   cursor:pointer; font-size:1px;
   }
   div.pgbuttl {
   position: absolute;
   width: 34px; height:148px;
   top: 200px; left: 190px;
   cursor: pointer;
   z-index: 900;
   }
   a.pgbuttl 				{ background-position: 0 0;}
   a.pgbuttl:hover 		{ background-position: -34px -0; }
   a.pgbuttl:active 	{ background-position: -68px -0; } 
   div.pgbuttr {
   position: absolute;
   width: 34px; height:148px;
   top: 200px; left: 100%;
   margin-left: -58px ;
   cursor: pointer;
   z-index: 900;
   }
   a.pgbuttr 				{ background-position: 0 -148px;}
   a.pgbuttr:hover 		{ background-position: -34px -148px; }
   a.pgbuttr:active 	{ background-position: -68px -148px; } 



   .butt { background-image: url('images/corner500x24.gif'); cursor: pointer; }
   .subbutt { background-image: url('images/corner500x24_subbutt.gif'); cursor: pointer; }
   .butt.tl {
   margin-right: 12px;
   background-position: 0 -8px;
   height: 4px; font-size: 2px;
   }
   .butt.tr {
   margin-top: -4px; margin-left: 12px;
   background-position: 100% -8px;
   height: 4px; font-size: 2px;
   }
   .butt.bl {
   margin-right: 12px;
   background-position: 0 -12px;
   height: 4px;font-size: 2px;
   }
   .butt.br {
   margin-top: -4px; margin-left: 12px;
   background-position: 100% -12px;
   height: 4px; font-size: 2px;
   }
   .butt-inside {
   border-left: 1px solid #474747; border-right: 1px solid #474747;
   background: #474747;
   padding: 1px 6px;
   margin: 0 4px;
   cursor: pointer;
   text-align: center; font-weight: bold; text-decoration: none;
   }
   .butt-inside.nt{ padding-top: 6px; }
   .butt-inside.nb{ padding-bottom: 6px; }

   .subbutt.tl {
   margin-right: 12px;
   background-position: 0 -8px;
   height: 4px; font-size: 2px;
   }
   .subbutt.tl.nr { margin-right: 1px; }

   .subbutt.tr {
   margin-top: -4px; margin-left: 12px;
   background-position: 100% -8px;
   height: 4px; font-size: 2px;
   }
   .subbutt.tr.nl { margin-left: 1px; }

   .subbutt.bl {
   margin-right: 12px;
   background-position: 0 -12px;
   height: 4px;font-size: 2px;
   }
   .subbutt.bl.nr { margin-right: 1px; }

   .subbutt.br {
   margin-top: -4px; margin-left: 12px;
   background-position: 100% -12px;
   height: 4px; font-size: 2px;
   }
   .subbutt.br.nl { margin-left: 1px; }

   .subbutt-inside {
   border-left: 1px solid #787878; border-right: 1px solid #787878;
   background: #787878;
   padding: 1px 6px;
   margin: 0 4px;
   cursor: pointer;
   text-align: center; font-weight: bold; text-decoration: none;
   }
   .subbutt-inside.n{ padding: 5px 6px; margin: 0 1px; }
   .subbutt-inside.nr{ padding-right: 4px; margin-right: 1px; }
   .subbutt-inside.nl{ padding-left: 4px; margin-left: 1px; }

   /* main menu */

   .menubutt {
   margin-top: 16px;
   margin-left: 30px;
   padding: 10px 0px;
   width: 105px;
   height: 15px;
	background: url('images/main_menu_butt.gif') no-repeat 0 0;

   color: #fff;
   text-align: center;
   font-size: 14px;
   font-weight: Bold;
   }
   .menubutt a { letter-spacing: 2px; text-decoration: none; }
   .menubutt a:hover { color: #4bac27; }
   .menubutt-opened { background-position: 0 -70px; }


   .menulist {
   margin-top: -7px;
   margin-left: 21px;
   display : none ;

   color: #fff;
   font-size: 12px;
   }
   .menulist-opened { display : block ; }

   .menulist a { line-height: 180%; color: #fff; text-decoration: none; }
   .menulist a:hover { color: #4bac27; }
   .menulist a.selected { font-weight: Bold; color: #4bac27; }


   /* page button */


   a.pgbutt {
   background:url('images/album_page_butt_34x148.gif') no-repeat;
   display:block;
   width:34px; height:148px;
   cursor:pointer; font-size:1px;
   }
   div.pgbuttl {
   position: absolute;
   width: 34px; height:148px;
   top: 200px; left: 190px;
   cursor: pointer;
   z-index: 900;
   }
   a.pgbuttl 				{ background-position: 0 0;}
   a.pgbuttl:hover 		{ background-position: -34px -0; }
   a.pgbuttl:active 	{ background-position: -68px -0; } 
   div.pgbuttr {
   position: absolute;
   width: 34px; height:148px;
   top: 200px; right: 24px;
   cursor: pointer;
   z-index: 900;
   }
   a.pgbuttr 				{ background-position: 0 -148px;}
   a.pgbuttr:hover 		{ background-position: -34px -148px; }
   a.pgbuttr:active 	{ background-position: -68px -148px; } 




/* ----------------------------------------------------------------------------------------------------------
4) Others
---------------------------------------------------------------------------------------------------------- */