@charset "utf-8";

/* --------------------------------------------------------------- */
/* Style for Userstory Account                                    */
/* Copyright (c) UserstoryLab                                      */
/* --------------------------------------------------------------- */


/* CSS Document */

@import url(common.css);
@import url(service.css);

body,
body#index,
body#doc { background:url("../images/main_bg.gif") center top repeat #4d505f;}
	
body#index .bodywrap { background:none;}
body#index .container { width:800px; position:relative; background:url("../images/boxshadow_b.png") center 445px no-repeat;}
body#index .footer { background:url("../images/main_boxshadow.png") center 0 no-repeat; padding:15px 0 0!important; text-align:right;}

body#doc .container { width:800px; }
body#doc .footer { text-align:center; background:url("../images/main_boxshadow.png") center 0 no-repeat;}

body#index .footer a,
body#doc .footer a { color:#bbb;}

/* ---------- favlist ----------*/

#fav_list { padding:40px 0;}
#fav_list ul { width:210px; margin:0 auto; }
#fav_list li { float:left; width:50px; padding:5px 10px; position:relative;}
#fav_list li span { position:absolute; text-align:center; color:#7f8188; top:-20px; left:50%; width:100px; margin:0 0 0 -50px;}


/* --------- index style --------- */

body#index #usl_cover { float:left; width:320px; height:440px; background:url("../images/bg_cover.gif") repeat #272830;  position:relative;}
body#index #usl_main { float:right; width:480px; height:440px; background:url("../images/folded_b.jpg") right top no-repeat #fff; overflow:hidden; }

#usl_cover {}
#usl_cover .inner { padding:40px;}
#usl_cover h1 { background:none; padding:0;}
#usl_cover h1 a { background:url("../images/logo.png") center center no-repeat; width:240px; height:70px; overflow:hidden; text-indent:-999px;}
#usl_cover #fav_list { position:absolute; width:240px; top:130px;}

#usl_cover .state { position:absolute; bottom:120px; *left: 0;  width:240px; }
#usl_cover .state a { display:block;  overflow:hidden; text-indent:-999px;}
#usl_cover .state a.signin {background:url("../images/btn_signin.png") 0 0 no-repeat; width:140px; height:39px; float:left;}
#usl_cover .state a.signup {background:url("../images/btn_signup.png") 0 0 no-repeat; width:94px; height:39px; float:right;}
#usl_cover .state a.signed {background:url("../images/btn_myaccount.png") 0 0 no-repeat; width:240px; height:39px; margin:0 auto; }



#usl_cover .info { position:absolute; bottom:35px; background:url("../images/main_info.png") center top no-repeat; width:240px; height:61px; margin:0 auto;overflow:hidden; text-indent:-999px;}

/* service info : main & sign */
#usl_main h2 { display:none;}

#serviceinfo {display:; clear:both; padding:30px 70px; *height:1%;}
#serviceinfo .listwrap { padding:30px 0; height:410px;}

#serviceinfo .pagelist li { display:inline;}
#serviceinfo .pagelist a { display:block; background:url("../images/page_ball.png") 3px 3px no-repeat; padding:3px; width:10px; height:10px; overflow:hidden; text-indent:-999px;}
#serviceinfo .pagelist a.selected { background-position: 3px -12px;}
	#usl_main .pagelist { position:absolute; right:15px; top:60px;}	
	.usl_service .pagelist { width:50px; margin:0 auto;}
	.usl_service .pagelist a { float:left;}

#serviceinfo h2 { display:none;}

#serviceinfo h3 { clear:both; margin-bottom:5px;}
#serviceinfo h3 a { display:block; background:0 0 no-repeat; height:26px; text-indent:-999px; overflow:hidden;}
#serviceinfo #userstorybook h3 a { background-image:url("../images/main_tl_userstorybook.png"); width:126px;}
#serviceinfo #tweetmix h3 a { background-image:url("../images/main_tl_tweetmix.png"); width:84px;}
#serviceinfo #kooo h3 a { background-image:url("../images/main_tl_kooo.png"); width:22px;}
	
	.usl_service #userstorybook h3 a,
	.usl_service #tweetmix h3 a,
	.usl_service #kooo h3 a { background-position:0 -26px;}

#serviceinfo h4 { background:center 0 no-repeat; height:70px; overflow:hidden; text-indent:-999px;}
#serviceinfo #userstorybook h4 { background-image:url("../images/slogan_userstorybook.png");}
#serviceinfo #tweetmix h4 { background-image:url("../images/slogan_tweetmix.png");}
#serviceinfo #kooo h4 { background-image:url("../images/slogan_kooo.png");}

	.usl_service #userstorybook h4,
	.usl_service #tweetmix h4,
	.usl_service #kooo h4 { background-position:center -70px;}

#serviceinfo .url {float:left; display:block; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
#serviceinfo .url a { color:#959aae;}
#serviceinfo .url a:hover { color:#f60; text-decoration:none;}
#serviceinfo .go { float:right;}
#serviceinfo .go a { display:block; height:21px; overflow:hidden; text-indent:-999px;}
#serviceinfo .go a { background:url("../images/btn_main_site.gif") 0 0 no-repeat; width:88px;}

#serviceinfo .explain { clear:both; margin-top:10px; padding-top:20px;border-top:1px dashed #ced0d9;}
#serviceinfo .explain p { padding-top:10px;}
	.usl_service .explain { border-color:#444!important; }
	.usl_service .explain p { color:#959aae!important;}
	



/* --------- document style --------- */

body#doc .header { overflow:hidden; padding:20px 30px 20px 40px;}
body#doc .header h1 { float:left; background:none; padding:0; width:172px;}
body#doc .header h1 a { background:url("../images/logo_doc.png") 0 0 no-repeat; width:172px; height:22px; overflow:hidden; text-indent:-999px;}
body#doc .header .nav { float:right;}
body#doc .header li {  float:left; }
body#doc .header li a { display:block; height:11px; overflow:hidden; text-indent:-999px; margin:3px 7px; padding:5px;}
body#doc .header .tab_agreement a { background:url(../images/tab_agreement.png) center no-repeat; width:74px; padding-left:0;}
body#doc .header .tab_protection a { background:url(../images/tab_pretection.png) center no-repeat; width:84px; padding-right:0;}

body#doc .main { clear:both; padding:30px 40px 40px; background-color:#fff; font-family:dotum;}
body#doc .guidewrap { margin-top:30px;}

body#doc .docwrap h3 { margin-top:30px; font-size:1em; color:#000;}
body#doc .docwrap h4,
body#doc .docwrap p,
body#doc .docwrap ol { margin:5px 0;}
body#doc .docwrap li { padding:5px 0 0 20px; position:relative;}
body#doc .docwrap li ol { margin-top:0; padding-left:15px;}
body#doc .docwrap li .num { position:absolute; left:0;}

body#doc #agreement h2,
body#doc #protection h2 { background: 0 0 no-repeat; height:22px; overflow:hidden; text-indent:-999px; float:left;}
body#doc #agreement h2 { background-image:url("../images/doc_tl_agreement.gif"); width:151px;}
body#doc #protection h2 { background-image:url("../images/doc_tl_protection.gif"); width:171px;}

body#doc .enforce_date { float:right;}
	
body#doc .table_content { margin-top:30px; padding:10px; background-color:#eee;}
body#doc .table_content h3 { padding-bottom:5px; margin-bottom:10px; border-bottom:1px solid #ddd;}
body#doc .table_content ul { float:left; width:33%;}
body#doc .table_content ul li { padding:0 10px;}
body#doc .table_content ul li a { color:#777;}
body#doc .table_content strong { font-weight:normal;}
	

/* ---------- sso content style --------- */

/* conents wrap */

.enter_wrap,
.info_wrap,
.result_wrap,
.forget_wrap { clear:both; padding:20px 20px 20px;	background:url("../images/folded.jpg") right top no-repeat #fff; *height:1%;}

.result_wrap h2 { background-position:center center; background-repeat:no-repeat; height:130px; overflow:hidden; text-indent:-999px;}
.forget_wrap h2 { background-position:0 0; background-repeat:no-repeat; height:20px; overflow:hidden; text-indent:-999px; margin-bottom:10px;}


.infoinput { position:relative;}
.infoinput a.close { position:absolute; top:10px; right:10px; display:block; background:url("../images/layer_close.gif") no-repeat; width:18px; height:17px; overflow:hidden; text-indent:-999px; }
.infoinput h3 { font-size:1em; padding-bottom:5px; margin-bottom:10px; border-bottom:2px solid #d7edeb;}
.infoinput dl { padding:5px 0; border-bottom:0; }
.infoinput dt { float:left; width:90px!important; text-align:right; margin-right:10px; padding-top:5px;}
.infoinput dt label { font-weight:bold; color:#000;}
.infoinput dd { margin-left:100px;}
.infoinput .textbox { width:240px; padding:6px; font-size:1.1em; }
.infoinput .btnwrap { margin-left:100px;}
.infoinput .btn_change { background:url("../images/btn_s_change.gif") no-repeat; width:66px; height:25px;}

	.forget_wrap .infoinput { margin-top:15px;}


/* blue box */
#usl_find_id_res .result,
.infoinput { background-color:#f4fbfa; border:1px solid #e0f2f0; padding:15px; }

/* blue text */
.account_info .infonow .txt,
.line_info_account a.go_mypage { color:#2191e0; font-family:Arial, Helvetica, sans-serif; }

/* red text */
.red,
#usl_confirm_fail .explain,
#usl_change_pw_error .explain { color:#c50000!important; } 


/* error */
#usl_confirm_fail .explain,
#usl_change_pw_error .explain { text-align:center; border-top:1px dotted #e5e5e5; padding:30px 0;}


/* done */
#usl_change_pw_done .explain,
#usl_register_done .explain,
#usl_find_pw_sent .explain {  color:#000; padding:30px 0; text-align:center; border-top:1px dotted #bfdcef;}

#usl_register_done .explain strong,
#usl_find_pw_sent .explain strong { color:#2191e0; text-decoration:underline;}

.gourl { margin-top:15px; color:#666;}


/* ----- wrong key guide -----  */

.relguide { margin-top:15px; color:#777; background-color:#f6f6f6; border:1px solid #e5e5e5; padding:10px;}
.relguide .btnwrap { margin-top:5px; }
.relguide .btn_s_reissue { display:block;  background:url("../images/btn_s_reissue.gif") 0 0 no-repeat; width:80px; height:21px; overflow:hidden; text-indent:-999px; }


/* --------- message --------- */

.alert { text-align:center; background-color:#ff9; border:1px solid #ecec19; padding:10px; margin-bottom:10px; display:none;}
.unknown span { color:#de5e5e; font-weight:bold; letter-spacing:-0.1em;  background:url("../images/cross.png") left center no-repeat; padding-left:25px; }
.guide_msg { font-size:1em; margin-top:5px;}
.guide_msg { color:#999;}
.error_msg { color:#de5e5e; background:url("../images/cross_s.gif") 0 2px no-repeat; padding-left:16px;}
.ok_msg { background:url("../images/tick_s.gif") 0 2px no-repeat; padding-left:16px;}





/* ---------- log in & sign up style ---------*/

/* tab */
.tabwrap { }
.tabwrap li { float:left;}
.tabwrap a { display:block; height:34px; overflow:hidden; text-indent:-999px; background: 0 0 no-repeat; }
	a.tab_login { background:url("../images/tab_login.png") 0 0 no-repeat;  width:80px;}
	a.tab_signup { background:url("../images/tab_signup.png") 0 0 no-repeat; width:80px;}
.tabwrap a:hover,
.tabwrap .selected  { background-position:0 -34px;}

h2 .tab_myaccount { display:block; height:34px; overflow:hidden; text-indent:-999px; background:url("../images/tab_myaccount.png") 0 -34px no-repeat; width:120px; }

#usl_login  h2,
#usl_signup h2 { display:none;}

/* usl_login */
#usl_login { padding:50px 80px; *height:1%;}
#usl_login div { margin-bottom:10px;}
#usl_login label { display:block; margin-bottom:3px; font-weight:bold;}
#usl_login .textbox { width:320px;}
#usl_login .line_auto { margin:10px 0 20px;}
#usl_login .line_auto label { display:inline; vertical-align:middle; font-size:1em; font-weight:normal; margin-bottom:0; padding-left:2px;}
#usl_login .line_login { display:inline; margin-right:20px; margin-bottom:0; }
#usl_login .line_forget { display:inline;  margin-bottom:0;}

/* usl_sigup */
#usl_signup { padding:30px 20px 20px; *height:1%;}
#usl_signup .explain { margin-bottom:10px;}
#usl_signup form {  background-color:#f4fbfa; border:1px solid #e0f2f0; padding:15px;}
#usl_signup dl { padding-bottom:15px; margin-bottom:15px; border-bottom:1px dotted #bfdcef; }
#usl_signup dl dt { font-weight:bold; float:left; width:90px; letter-spacing:-0.05em; margin-right:10px; margin-top:10px; text-align:right;}
#usl_signup dl dd,
#usl_signup .line_agree,
#usl_signup .line_signup { margin-left:100px;}
#usl_signup .line_pw { border-bottom:0; padding-bottom:0; margin-bottom:5px;}
#usl_signup .line_signup { margin-top:20px;}
#usl_signup .textbox { width:260px;}
#usl_signup .url_id { margin-top:5px; color:#6ac456; font-size:0.9em; font-family:Arial, Helvetica, sans-serif;}
#usl_signup .url_id span { font-weight:bold;}
#usl_signup .line_signup { letter-spacing:-0.05em;}

#usl_login .line_auto label:hover,
#usl_signup .line_agree label:hover { cursor:pointer;}





/* ----- registration ---------- */

/* register done */
#usl_register_done h2 { background-image:url("../images/sso_tl_msg_sendMail.jpg"); margin-bottom:15px; }

/* confirm done */
#usl_confirm_done { padding-bottom:50px;}
#usl_confirm_done h2 { background-image:url("../images/sso_tl_msg_regSuccess.jpg"); margin-bottom:15px;}
#usl_confirm_done .explain { border-top:1px dotted #bfdcef; text-align:center; padding:30px 0 10px;}
#usl_confirm_done .explain span { font:1.6em Georgia, "Times New Roman", Times, serif; font-weight:bold; font-style:italic; color:#6AC456;}
#usl_confirm_done .autopage { margin-top:20px;}
#usl_confirm_done a.btn_service {display:block; margin:0 auto; background:0 0 no-repeat; height:35px; overflow:hidden; text-indent:-999px;}
#usl_confirm_done a.btn_service.userstorybook { background-image:url("../images/go_userstorybook.gif"); width:125px;}
#usl_confirm_done a.btn_service.tweetmix { background-image:url("../images/go_tweetmix.gif"); width:170px;}
#usl_confirm_done a.btn_service.kooo { background-image:url("../images/go_tweetmix.gif"); width:110px;}

/* confirm fail */
#usl_confirm_fail h2 { background-image:url("../images/sso_tl_msg_regFailed.jpg");  margin-bottom:15px;}

/* register new key */
#usl_renew_key h2 { background-image:url("../images/sso_tl_reissue_id.gif"); }



/* ---------- user id ---------- */

/* id find */
#usl_find_id h2 { background-image:url("../images/sso_tl_find_id.gif");}
#usl_find_id .relguide { margin-top:30px;}

/* id found */
#usl_find_id_res h2 { background-image:url("../images/sso_tl_msg_idFound.jpg");}
#usl_find_id_res .result { text-align:center!important;}
#usl_find_id_res .result strong { display:block; color:#f60!important; font-size:1.2em; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#usl_find_id_res .relguide { margin-top:30px;}





/* ---------- user password ---------- */

/* pw changed */
#usl_change_pw_done h2 { background-image:url("../images/sso_tl_msg_pwChanged.jpg");  margin-bottom:15px;}

/* pw wrong key */
#usl_change_pw_error h2 { background-image:url("../images/sso_tl_msg_worngKey.jpg"); margin-top:15px;}

/* pw sent mail */
#usl_find_pw_sent h2 { background-image:url("../images/sso_tl_msg_sendMail.jpg"); margin-bottom:15px;}
#usl_find_pw_sent .explain { color:#000;}
#usl_find_pw_sent .explain strong { color:#2191e0; text-decoration:underline;}

/* pw find */
#usl_find_pw h2 { background-image:url("../images/sso_tl_find_pw.gif"); }
#usl_find_pw .relguide { margin-top:30px;}

/* pw change */
#usl_change_pw h2 { background-image:url("../images/sso_tl_change_pw.gif");}
#usl_change_pw .line_pw label span { margin-left:10px; font-size:0.9em; font-weight:normal; letter-spacing:-0.03em; color:#999;}
#usl_change_pw .relguide { margin-top:30px;}






/* ---------- #usl_signed - user account info --------- */

#usl_signed {}

.account_logout { padding:0 0 5px 0;  height:30px;}
.account_logout strong { float:left; font-size:1.4em; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#6ac456;}
.account_logout span {float:right;}
.account_logout .logout a { display:block; background:url("../images/logout.gif") center no-repeat; width:60px; height:21px; overflow:hidden; margin-top:5px; text-indent:-999px;}

.account_info { margin-bottom:30px;  border:solid #bfdcef; border-width:2px 0;}
.account_info .user_info,
.account_info .service_info { margin:20px 0;}
.account_info .service_info { padding-top:15px; border-top:1px dashed #bfdcef; }

.account_info dl { clear:both; padding:10px 0; border-bottom:1px dotted #ccc;}
.account_info dl dt { float:left; width:70px; font-size:1.1em; font-weight:bold;  color:#000; }
.account_info .line_info_id { padding-top:0;}
.account_info .line_info_pw { border-bottom:0;}
.account_info .line_info_account { border-bottom:0;}

/* infonow */
.account_info .infonow { margin-left:70px;}
.account_info .infonow .txt { font-size:1.1em; font-weight:bold; }
.account_info a.open { display:block; overflow:hidden; text-indent:-999px;}
.account_info .line_info_email a.open { background:url("../images/btn_s_email.gif") no-repeat; width:64px; height:19px;}
.account_info .line_info_pw a.open { background:url("../images/btn_s_pw.gif") no-repeat; width:76px; height:19px; margin-top:2px;}

.account_info .infoinput { margin-top:10px; }
.account_info .infoinput label { font-size:0.9em!important; font-weight:normal!important;}
.account_info .infoinput .line_new_pw { margin-top:10px;}

.account_info .line_info_email dd span { float:left; margin-right:10px;}
.account_info .line_info_email dd a { float:left; margin-top:2px;}

.account_info .line_info_pw .infoinput { clear:both;}


.em_changed,
.pw_changed { padding:5px; text-align:center; color:#00a0dd; margin-top:10px;}


.account_info .line_info_account dt { float:none!important; width:auto!important; margin-bottom:10px; }
.account_info .line_info_account dd { padding:10px; border:1px solid #eee; margin:2px 0 0; background:url("../images/bg_inert.gif") repeat-x #f8f8f8; height:25px;}
.account_info .line_info_account a.usl_bi { display:block; float:left; overflow:hidden; text-indent:-999px;  height:25px;}
.account_info .line_info_account #usl_userstorybook .usl_bi 	{ background:url("../images/bi_userstorybook.png") 0 center no-repeat; width:127px; }
.account_info .line_info_account #usl_tweetmix .usl_bi		{ background:url("../images/bi_tweetmix.png") 0 center no-repeat; width:101px;}
.account_info .line_info_account #usl_kooo .usl_bi 			{ background:url("../images/bi_kooo.png") 0 center no-repeat; width:46px;}
.account_info .line_info_account a.go_url { display:block;  float:right; background:url("../images/btn_s_go.gif") no-repeat; width:74px; height:23px; overflow:hidden; text-indent:-999px; margin-top:2px;}	



/* ---------- quit ---------- */

#usl_quit h2 { background-image:url("../images/sso_tl_out_account.gif");}
#usl_quit .explain { background:url("../images/exclamation.png") 0 3px no-repeat; padding-left:25px;}
#usl_quit .quitAccount { margin-top:15px;  background-color:#fbf4f4; border:1px solid #f2e0e0; padding:10px;}
#usl_quit .quitAccount p { margin-bottom:10px; color:#c50000; background:url("../images/cross.png") 0 5px no-repeat; padding-left:25px;}
#usl_quit .quitAccount ul { padding:0 15px;}
#usl_quit .quitAccount li { clear:both; padding:8px; padding-left:13px; background:url("../images/list_bullet.gif") 0 15px no-repeat; border-bottom:1px dotted #efbfbf; }
#usl_quit .quitAccount li .service { display:block; float:left; color:#555; font-weight:bold; margin-right:5px;}
#usl_quit .quitAccount li a.goquit { display:block; background:url("../images/btn_s_out.gif") 0 0 no-repeat; width:54px; height:19px; overflow:hidden; text-indent:-999px; }