@charset "utf-8";

/* ============================================================
UserStoryBook ++MainPage_SCREEN++ styleSheet
---------------------------------------------------------------
Version : 0.95 Holiday Edition
Author :  hi8ar
---------------------------------------------------------------
Last Date Modified : 2009. 12.
============================================================== */

@import url("reset.css");
@import url("basic.css");
@import url("GNB.css");
@import url("usbSlider.css");


/* layout */
html { background: #fff url(../images/main/bg_html.gif) repeat 0 0; }
body { background: #fff url(../images/bg_body.gif) repeat-x center 0; }
#GNB {
	margin: 0 auto;
	width: 960px;
	height: 40px;
	padding: 0 20px;
	position: relative;
	font-size: 1.2em;
	background: #fff url(../images/bg_body.gif) repeat-x center 0;
}
#header { background: url(../images/bg_mainHeader.gif) repeat-x scroll center 40px; }
#headerInner {
	position: relative;
	width: 940px;
	margin: 0 auto;
	background: url(../images/bg_mainHeader.gif) repeat-x scroll center 0;
	font-size: 1.2em;
}


#wrap {
	background:#fff url(../images/main/bg_main_wrap.gif) repeat-x scroll center 0;
	font-size: 1.2em;
}
#container {
	margin: 0 auto;
	width: 960px;
	padding: 20px 20px 50px;
	position: relative;
	background: url(../images/main/bg_container.gif) no-repeat center 0;
}
#container:after {
	content: ".";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}
#mastHead {
	width: 960px;
	height: 345px;
	margin: -5px 0 20px;
	position: relative;
	border-bottom:5px solid #999;
	overflow:hidden;
}
#content {
	float: left;
	width: 640px;
}
#sidebar {
	float: right;
	width: 240px;
	overflow: hidden;
}
#footerWrap {
	background: #443A38 url(../images/main/bg_footer.gif) repeat 0 0;
	height: 100px;
	clear: both;
}
#footer {
	margin: 0 auto;
	width: 960px;
	height: 60px;
	background: #443A38 url(../images/main/bg_footer.gif) repeat 0 0;
}


/* GNB */
#GNB #toHome { left: 15px; }
#GNB .navi { right: 20px; }


/* logo */
h1 a { display: none; }


/* mastHead */
.mhDeco { position: absolute; top: -13px; left: -40px; z-index: 100; }
.mhDeco2 { position: absolute; top: 180px; right: -30px; z-index: 100;
display: none; }

.panel { height: 303px; }

.panel h2,
.panel h3,
.panel p { text-indent: -9999px; }


/* Basic Edition */
#mt1 { background: url(../images/main/100.jpg) no-repeat 0 0; }
#mt2 { background: url(../images/main/101.jpg) no-repeat 0 0; }
#mt3 { background: url(../images/main/102.jpg) no-repeat 0 0; }
#mt4 { background: url(../images/main/103.jpg) no-repeat 0 0; }
#mt5 { background: url(../images/main/104.jpg) no-repeat 0 0; }


/* holiday Edition 
#mt1 { background: url(../images/main/holiday/h1.jpg) no-repeat 0 0; }
#mt2 { background: url(../images/main/holiday/h2.jpg) no-repeat 0 0; }
#mt3 { background: url(../images/main/holiday/h3.jpg) no-repeat 0 0; }
#mt4 { background: url(../images/main/holiday/h4.jpg) no-repeat 0 0; }
#mt5 { background: url(../images/main/holiday/h5.jpg) no-repeat 0 0; }
*/

/* before complete loading */
div.csw .mt_btns { display: none; }
div.csw #mt1,
div.csw #mt2,
div.csw #mt3,
div.csw #mt4,
div.csw #mt5 { background: none; }


/* mastHead Btns */
.mt_btns {
	position: absolute;
	top: 220px;
	width: 104px;
	height: 51px;
	overflow: hidden;
	background: url(../images/main/mt_btns.png) no-repeat 0 0;
}
.btn_tour { left: 460px; background-position: 0 -102px; }
.btn_next { left: 460px; background-position: 0 -204px; }
.btn_prev { left: 350px; background-position: 0 -306px; }

.btn_tour:hover { background-position: 0 -153px; }
.btn_next:hover { background-position: 0 -255px; }
.btn_prev:hover { background-position: 0 -357px; }

#mt5 .btn_join {
	height:63px;
	width:218px;
	top: 200px;
	left: 450px;
	background: url(../images/main/btn_signUp_alt.png) no-repeat 0 0;
}
#mt5 .btn_join:hover {
	background-position: 0 -63px;
}
#mt5 .btn_learn {
	height:63px;
	width:190px;
	top: 200px;
	left: 680px;
	background: url(../images/main/btn_learn.png) no-repeat 0 0;
}
#mt5 .btn_learn:hover {
	background-position: 0 -63px
}

#signUp {
	width: 960px;
	height: 70px;
	background: url(../images/main/bg_signUp.png) no-repeat 5px 0;
	text-indent: -9999px;
	position: relative;
}
.btn_signUp {
	position: absolute;
	top: 0;
	right: 16px;
	width: 218px;
	height: 63px;
	background: url(../images/main/btn_signUp_alt.png) no-repeat 0 0;
}
.btn_signUp:hover { background-position: 0 -63px; }


/* content */

#content h3 a {
	display: block;
	height: 40px;
	background: url(../images/main/bg_main_h3.gif) no-repeat 0 0;
	text-indent: -9999px;
	overflow: hidden;
	margin-left: 2px;
}

#psShelfList h3 a {
	background-position: 0 0;
}
#grShelfList h3 a {
	background-position: 0 -40px;
}
#themeList h3 a {
	background-position: 0 -80px;
}
#content h3 a:hover { border-bottom: 0 none; }



.h_tail { color: #666; letter-spacing: -1px; margin-left:5px;}
#content a,
#content a:visited { color: #777; }
#content a:hover { color: #ff9601; border-bottom:1px solid #ff9601;}

.mainList {
	margin: 0 0 30px;
	padding-bottom: 10px;
	border-bottom:1px dotted #D5D5D5;
}
.mainList ul { padding: 10px 0 15px 10px; overflow: hidden; }
.mainList li {
	float: left;
	position: relative;
	padding: 1px;
	border: 1px solid #CFCAC2;
	background-color: #DFDAD1;
	margin-right: 2px;
	margin-bottom: 2px;
}

.mainList .imgPlace {
	padding: 2px;
	border: 1px solid #e2e2e2;
	background-color: #fff;
}
.mainList li:hover { }
.mainList li a img { width: 50px; }
.caption {
	color: #ffffff;
	font-size: 12px;
	cursor: default;
	padding: 3px;
	text-align: center;
	border-top: 1px solid #39332d;
	background: #484139;
	letter-spacing: -1px;
	cursor: pointer;
	opacity: 0.7;
}

#ul_groups .caption {
	line-height: 1.1;
}


.mainList li span {
	display: none;
}

.listMore {
	clear: both;
	overflow: hidden;
	text-align: right;
}
#content .listMore a {
	border-bottom: 1px solid #999;
	color: #888;
	margin: 0 15px 0 0;
	text-align: center;
	letter-spacing:-1px;
}
#content .listMore a:hover {
	color: #ff9601;
	border-bottom: 1px solid #ff9601;
}
#themeList ul { margin-top: 10px; padding-left: 10px; overflow: hidden; }
#themeList li img {
	float: left;
	background:transparent url(../images/bg_book.png) no-repeat scroll 0 bottom;
	padding-bottom:10px;
	margin-right: 20px;
}
#themeList li {
	float: left;
	height: 155px;
	overflow: hidden;
	padding: 10px 10px 10px 0;
	width: 300px;
}
#themeList li:after {
	content: ".";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}
#themeList h4 {
	font-size: 1.1em;
	font-weight: 800;
	letter-spacing:-1px;
}
#themeList h4 a,
#themeList h4 a:visited { color: #222222; }
#themeList h4 a:hover { color: #933; }
#themeList h4 strong {
	background-color:#7d0022;
	color: #fff;
	padding: 2px 6px 2px 3px;
}
.themeFounder { margin: 10px 0; }
.themeFounder a { border-bottom: 1px solid #ccc; }
.themeKeyword,
.themeJob { color: #767676; margin-left:105px; }
.themeKeyword em,
.themeJob em { color: #9c5d3b; margin-right: 5px; font: 0.9em Dotum, sans-serif; letter-spacing: -1px; }




/* sidebar */
.listbox { margin: 0 0 30px; padding: 0 5px 0 0; }
.listbox h3 {
	margin: 0 0 10px 5px;
	color:#5A6657;
	font-size:1.08em;
	letter-spacing:-1px;
}
.listbox li a,
.listbox li a:visited {
	display:block;
	width: 205px;
	margin-left: 7px;
	padding:3px 0 3px 15px;
	background: transparent url(../images/bul_category.gif) no-repeat scroll 0 center;
	color: #555;
	letter-spacing: -1px;
}
.listbox li a:hover {
	background-color: #fff;
	color: #933;
}
.listbox .add { overflow: hidden; width: 235px; }
.listbox .add li { margin-bottom: 10px; }
.listbox .add a,
.listbox .add a:visited,
.listbox .add a:hover { background: none; padding: 3px 0; width: 100%; margin: 0;}

.notice li.major a,
.notice li.major a:visited { color: #933;font-weight: 700;}
.notice li.major a:hover { background-color: #fff; color: #933; }

/* 로그인 버튼만 있을 경우 */
.login_btn .submit {
	display: block;
	width:231px;
	height: 74px;
	background: url(../images/main/btn_login.png) no-repeat 0 0;
	border: 0 none;
	letter-spacing: -1px;
	color: #000;
	font-weight: 400;
	text-indent: -9999px;
	overflow: hidden;
}

/* 내 서재 가기 버튼 */
.gomyShelf_btn .submit {
	display: block;
	width:231px;
	height: 74px;
	background: url(../images/main/btn_goshelf.png) no-repeat 0 0;
	border: 0 none;
	letter-spacing: -1px;
	color: #000;
	font-weight: 400;
	text-indent: -9999px;
	overflow: hidden;
}
.login_btn .submit:hover { background-position: 0 -74px; }
.gomyShelf_btn .submit:hover { background-position: 0 -74px; }



/* ------------------------------------------------------------------------------------------------
=footer
------------------------------------------------------------------------------------------------ */
#footer { padding-top: 20px; text-align: left; color: #222; font-weight: 700; }
#footer p { padding: 20px 15px 15px; color: #fff; text-align: center; border-bottom: 1px solid #443c39; text-shadow: 1px 1px 0 #000000; }
#footer a,
#footer a:visited { color: #8da487;  }
#footer a:hover { color: #ff9601; }

#footer .utilLink {
	display: block;
	text-align: right;
	padding-right: 20px;
	font: 400 11px Dotum, sans-serif;
	text-shadow: 1px 1px 0 #000000;
	position: relative;
	width: 940px;
	height: 13px;
}

#footer .utilLink a,
#footer .utilLink a:visited {
	color: #aaa;
	letter-spacing: -1px;
	padding: 0 5px;
}
#footer .utilLink a:hover { text-decoration: underline; }
#footer .utilLink a .bookstory {
	position: absolute;
	display: block;
	top: -19px;
	right: 295px;
	height: 17px;
	width: 15px;
	background: url(../images/bg_new_ico.gif) no-repeat 0 0;
	text-indent: -9999px;
	text-align: left;
	overflow: hidden;
}
#footer .utilLink a:hover .bookstory {
	top: -20px;
}


/* feedback */
#moveLinkWrap {
	position:fixed !important;
	position:absolute;
	left:0;
	top:37%;
}
.btn_bookstory {
	display: block;
	background: url(../images/btn_bookstory.gif) no-repeat 0 0;
	width: 29px;
	height: 80px;
	text-indent:-9999px;
	margin-bottom: 15px;
}
.btn_bookstory:hover {
	background-position: 0 -80px;
}
.feedback {
	display: block;
	background:url(../images/main/btn_feedback.gif) no-repeat scroll 0 0 transparent;
	height:80px;
	width:29px;
	text-indent:-9999px;
}
.feedback:hover {
	background-position: 0 -80px;
}

/* loginForm */
#loginForm {
	padding: 10px 10px 10px 630px;
	height: 190px;
	color: #fff;
	position: relative;
}
#loginForm .plzJoinUs {
	position: absolute;
	top: 20px;
	left: 10px;
	color: #eee;
}
#loginForm .plzJoinUs strong {
	display: block;
	margin-bottom: 10px;
}
#loginForm p.forgot a,
#loginForm .plzJoinUs a,
#loginForm .plzJoinUs a:visited {
	color: #ff9601;
	font-size: 1.1em;
}
#loginForm .plzJoinUs a:hover {
	text-decoration: underline;
}

a.closeLogin {
	color: #fff;
	position: absolute;
	left: 420px;
	bottom: -1px;
	background: url(../images/btn_upClose.png) no-repeat 0 0;
	text-indent: -9999px;
	width: 91px;
	height: 31px;
	overflow: hidden;
}


/* accessbility */
.offscreen {
	position: absolute;
	left: -9999px;
	overflow: hidden;
}
noscript {
	display: block;
	color: #fff;
	font-size: 1.2em;
	text-align: center;
}

/* status */
#div_status,
#div_yesno {
	position: absolute;
	width: 100%;
	z-Index: 1000;
}
.overray {
	background: url(../images/bg_overray.png) repeat 0 0;
	width:100%;
}
#div_status_inner,
#div_yesno_inner {
	color:#8DA487;
	display:block;
	font-family:NanumGothic,나눔고딕,"Malgun Gothic","맑은 고딕",Arial,sans-serif;
	font-size:1.8em;
	font-weight:700;
	letter-spacing:-1px;
	line-height:1.2;
	margin:0 auto;
	padding:30px;
	text-align:center;
	vertical-align:middle;
	width:520px;
	text-shadow:1px 1px 1px #222;
}
.yesno { display: block; text-align: center; margin: 15px 0 0; font-size:0.8em; }
.yesno a,
.yesno a:visited { margin: 5px; padding:5px 15px; color: #fff;}
.yesno a:hover { color: #ff9601; }


/* follow usbTweet */
#followUsbTwitter {
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 190px;
	height: 70px;
	display: block;
	text-indent:-9999px;
	overflow: hidden;
	background: url(../images/main/tw_banner.png) no-repeat 0 0;
}
#twFolowMsg {
	position: absolute;
	right: 5px;
	bottom: 80px;
	padding: 8px 15px;
	width: 125px;
	display: block;
	letter-spacing: -1px;
	background-color: #72B0CF;
	color: #fff;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-box-shadow: 0 0 5px #C0DEED;
	-webkit-box-shadow: 0 0 5px #C0DEED;
	display: none;
}



/* holiday Edition 
#wrap { background:#fff url(../images/main/holiday/bg_main_wrap_holiday_alt2.jpg) repeat-x scroll center 0; }
#container { background: url(../images/main/holiday/bg_container_holiday_alt3.jpg) no-repeat center 0;}
#mastHead { border-bottom:5px solid #0f2b00;}
.mhDeco2 { position: absolute; top: 0px; right: -20px; z-index: 100; display: block; }
.mhDeco3 { position: absolute; top: 0px; left: 15px; z-index: 50; display: block; }
.mhDeco4 { position: absolute; top: 360px; left: 15px; z-index: 50; display: block; }
.stripNav li a.current, .stripNav li a.current:visited { background: #0a1d00; }
.listbox li a,
.listbox li a:visited { background: transparent url(../images/main/holiday/box-yellow.png) no-repeat scroll 0 3px; padding-left: 20px; }
.listbox li a:hover { background-color: #fff; color: #933; }
.mainList li { border: 1px solid #465F0E;}
#content .listMore a { color: #465F0E; }
.stripNav li a:hover { background: #A10200; }
*/