@charset "utf-8";

/* Common
----------------------------------------------------------------------- */
#content-wrap { margin: 15px 0 30px; position: relative; color: #282828; font-size: 12px; line-height: 1.4; }
#content-wrap h3 { color: #0099ff; font-weight: bold; font-size: 16px; }

#content-wrap #room { position: relative; width: 960px; height: 500px; }
#content-wrap #room .banner { position: absolute; }
#content-wrap #room-stage { position: relative; overflow: hidden; background-repeat: no-repeat; width: 960px; height: 500px; list-style: none; }
#content-wrap #room-stage li { position: absolute; overflow: visible; _zoom: 1; }

#content-wrap #tweet { position: absolute; top: -59px; right: 0; z-index: 999; background: url(../img/tweet_bar.png) left bottom no-repeat; white-space: nowrap; width: 194px; line-height: 1.25; vertical-align: middle; }
#content-wrap #tweet a { padding: 3px 0 6px 6px; display: block; text-decoration: none; outline: none; }
#content-wrap #tweet img { vertical-align: middle; }
#content-wrap #tweetCount { margin: 0 0 0 6px; padding: 3px 4px; color: #ffffff; display: none; position: relative; background-color: #0099ff; vertical-align: middle; font-weight: bold; font-size: 11px; font-family: verdana, sans-serif; -moz-border-radius: 3px; -webkit-border-radius: 3px; _zoom: 1; }
#content-wrap #tweetCount img { margin-top: -4px; position: absolute; left: -4px; top: 50%; }

#content-wrap .book-pane { border: 1px solid #ffffff; background: #f3f3dd url(../img/book_grad.png) left top no-repeat; }
#content-wrap .book-pane .book-box { margin: 15px 20px; padding: 10px; border: 3px solid #0099ff; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; }

#content-wrap .btn { padding: 1em 0; }
#content-wrap .btn a { padding: 3px 1em; border: 1px solid #0066cc; color: #ffffff; background: #0066cc url(../img/btn_grad_blue.png) left -10px repeat-x; border-radius: 11px; -moz-border-radius: 11px; -webkit-border-radius: 11px; line-height: 1.25; text-decoration: none; }
#content-wrap .btn a:hover { background-position: left top; }

#content-wrap .back { margin: 20px 0; text-align: center; }
#content-wrap .back a { padding: 3px 1.5em; border: 1px solid #cccc99; color: #666633; text-decoration: none; border-radius: 11px; -moz-border-radius: 11px; -webkit-border-radius: 11px; line-height: 1.25; text-decoration: none; }
#content-wrap .back a:hover { color: #cc3399; background-color: #f7f7e8;  }

#content-wrap #content-on-room { margin-top: -455px; padding: 0 179px; position: relative; z-index: 999; }
#content-wrap #content-on-room #heading { position: relative; }
#content-wrap #content-on-room #heading p { margin-top: 10px; }
#content-wrap #content-on-room #heading .pic  { position: absolute; top: -16px; right: -6px; }

/* Top page
----------------------------------------------------------------------- */
#content-wrap #balloon { padding-bottom: 45px; position: absolute; background: url(../img/room_balloon_bottom.png) left bottom no-repeat; width: 280px; }
#content-wrap #balloon .inner { background: url(../img/room_balloon.png) top left no-repeat; }
#content-wrap #balloon .inner p { padding: 25px 25px 0 25px; }
#content-wrap #balloon .inner p .date { margin-top: .25em; display: block; color: #888888; font-size: 11px; }

#content-wrap #info { border-top: 1px solid #ffffff; background-color: #f3f3dd; }
#content-wrap #info .book-pane { border-style: none; }
#content-wrap #info #toc { float: left; border-right: 1px solid #dadabb; width: 479px; }
#content-wrap #info #toc ul { position: relative; height: 240px; list-style: none; background: url(../img/toc_line.png); }
#content-wrap #info #toc ul li { position: absolute; background-repeat: no-repeat; cursor: pointer; }
#content-wrap #info #toc ul #sticky1 {
	top: 10px; left: -25px;
	        transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
	   -moz-transform: rotate(6deg);
}
#content-wrap #info #toc ul #sticky2 {
	top: 25px; left: 210px;
	        transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	   -moz-transform: rotate(-2deg);
}
#content-wrap #info #toc ul #sticky3 {
	top: 100px; left: 10px;
	        transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
	   -moz-transform: rotate(-1deg);
}
#content-wrap #info #toc ul #sticky4 {
	top: 115px; left: 245px;
	        transform: rotate(0.5deg);
	-webkit-transform: rotate(0.5deg);
	   -moz-transform: rotate(0.5deg);
}
#content-wrap #info #toc ul img {
	        transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	   -moz-transition: all 0.1s ease-in-out;
}
#content-wrap #info #toc ul img:hover {
	        transform: rotate(-1deg) scale(1.05);
	-webkit-transform: rotate(-1deg) scale(1.05);
	   -moz-transform: rotate(-1deg) scale(1.05);
}

#content-wrap #info #external-links { text-align: right; }
#content-wrap #info #external-links .banners { margin-top: 5px; display: block; }
#content-wrap #info #external-links img { margin-left: 5px; }

#content-wrap #info #about { float: left; width: 480px; }
#content-wrap #info #about h3 { margin-bottom: 10px }
#content-wrap #info #about .profile-wrap { position: relative; }
#content-wrap #info #about .icon { display: block; position: absolute; top: 0; left: 0; }
#content-wrap #info #about .icon img { margin-bottom: 5px; }
#content-wrap #info #about .profile { padding-left: 89px; width: 325px; }
#content-wrap #info #about p { margin-bottom: 1em; }

#content-wrap #item-list { margin: 1px 0 0 0; padding: 8px 3px 3px 0; border-bottom: 1px solid #dcdcdc; position: relative; background: #f8f8f4; line-height: 1; }
#content-wrap #item-list h3 { padding: 4px 0 0 0; position: absolute; width: 13em; text-align: center; white-space: nowrap; color: #274b56; font-weight: normal; font-size: 12px; }
#content-wrap #item-list ul { padding-left: 13em; margin: 0; list-style: none; }
#content-wrap #item-list ul li { float: left; }
#content-wrap #item-list ul li a { margin: 0 5px 5px 0; padding: 4px 10px; display: block; white-space: nowrap; color: #ffffff; background-color: #274b56; text-decoration: none; cursor: default; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } /* #d0e8f4 #e0e0e0 */

/* History
----------------------------------------------------------------------- */
#content-wrap #content-on-room .hist { width: 100%; border: none; border-collapse: collapse; border-spacing: 0; empty-cells: show;}
#content-wrap #content-on-room .hist th,
#content-wrap #content-on-room .hist td { padding: .5em 1em; border-bottom: 1px solid #0099ff; line-height: 1.25; vertical-align: top; text-align: right; }
#content-wrap #content-on-room .hist thead th,
#content-wrap #content-on-room .hist thead td { color: #0099ff; }
#content-wrap #content-on-room .hist tbody th { border-right: 1px dashed #0099ff; border-left: 1px dashed #0099ff; }
#content-wrap #content-on-room .hist .buy th,
#content-wrap #content-on-room .hist .buy td { color: #cc3399; }

/* Wallpaper
----------------------------------------------------------------------- */
/* 2-columns */
#content-wrap #content-on-room #wall-col2 { margin-top: -10px; }
#content-wrap #content-on-room #wall-col2 li.pane { margin: 15px 0 0 20px; padding-top: 17px; border: 1px solid #d0d0b0; border-bottom-width: 1px; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; display: inline; float: left; position: relative; width: 268px; height: 210px; background-color: #ffffff; }
#content-wrap #content-on-room #wall-col2 li.pane em { position: absolute; left: -6px; top: -6px; width: 135px; height: 56px; background: url(../img/wallpaper_new_2.png) no-repeat; text-indent: -999em; }
#content-wrap #content-on-room #wall-col2 li.pane p { text-align: center; }
#content-wrap #content-on-room #wall-col2 li.pane p img { padding: 1px; border: 1px solid #e0e0d0; }
#content-wrap #content-on-room #wall-col2 li.pane ul { margin-top: 12px; padding: 0; text-align: center; font-size: 11px; }
#content-wrap #content-on-room #wall-col2 li.pane ul li { margin: 0; display: inline; }
#content-wrap #content-on-room #wall-col2 li.pane ul li a { margin: 0 1px; padding: 3px 6px; _float: left; width: 66px; _font-weight: bold; }

/* At First (Single column) */
#content-wrap #content-on-room .wall { position: relative; }
#content-wrap #content-on-room .wall em { position: absolute; top: 10px; left: -35px; }
#content-wrap #content-on-room .wall p { padding: 6px 7px 7px 6px; background: url(../img/wallpaper_frame.png) center center no-repeat;; text-align: center; }
#content-wrap #content-on-room .wall ul { margin-top: .5em; padding: .5em; text-align: center; }
#content-wrap #content-on-room .wall ul li { margin: 0 .25em; display: inline; }
#content-wrap #content-on-room .wall ul li a { width: 150px; _font-weight: bold;  _font-size: 13px; }

/* Friend
----------------------------------------------------------------------- */
#content-wrap #content-on-room .friend { margin: 20px 40px 10px 40px; padding: 20px 0 30px 0; background: #ffffff url(../img/friend_bottom.png) center bottom no-repeat; list-style: none; line-height: 1.25; }
#content-wrap #content-on-room .friend li { margin-left: 20px; padding: 7px 0 0 40px; display: inline; float: left; width: 200px; height: 33px; background: url(../img/friend_li_c1.png) left bottom no-repeat; }
#content-wrap #content-on-room .friend li.c2 { background-image: url(../img/friend_li_c2.png); }
#content-wrap #content-on-room .friend li.c3 { background-image: url(../img/friend_li_c3.png); }
#content-wrap #content-on-room .friend li a { margin-right: .2em; font-size: 14px; }
#content-wrap #content-on-room .friend li.err { margin: 20px; padding: 0; display: block; float: none; width: auto; height: auto; color: #274b56; background: none; text-align: center; }

/* Oden
----------------------------------------------------------------------- */
/* #oden-ranking */
#oden-ranking { padding: 0 15px 0 10px; background: url(../img/oden_rank_wall.png); }
#oden-ranking ol { width: 576px; }
#oden-ranking ol li { position: relative; float: left; width: 192px; height: 160px; background: url(../img/oden_rank_plate.png) 0 0 no-repeat; }
#oden-ranking ol li.no1 { background-position: -192px 0; }
#oden-ranking ol li.no2 { background-position: -384px 0; }
#oden-ranking ol li.no3 { background-position: -576px 0; }
#oden-ranking ol li strong { display: block; position: absolute; top: 5px; left: 0; width: 40px; height: 40px; background: url(../img/oden_rank_number.png) 0 0 no-repeat; text-indent: -999em; }
#oden-ranking ol li.no1  strong { background-position: 0   -40px; }
#oden-ranking ol li.no2  strong { background-position: 0   -80px; }
#oden-ranking ol li.no3  strong { background-position: 0  -120px; }
#oden-ranking ol li.no4  strong { background-position: 0  -160px; }
#oden-ranking ol li.no5  strong { background-position: 0  -200px; }
#oden-ranking ol li.no6  strong { background-position: 0  -240px; }
#oden-ranking ol li.no7  strong { background-position: 0  -280px; }
#oden-ranking ol li.no8  strong { background-position: 0  -320px; }
#oden-ranking ol li.no9  strong { background-position: 0  -360px; }
#oden-ranking ol li.no10 strong { background-position: 0  -400px; }
#oden-ranking ol li.no11 strong { background-position: 0  -440px; }
#oden-ranking ol li.no12 strong { background-position: 0  -480px; }
#oden-ranking ol li.no13 strong { background-position: 0  -520px; }
#oden-ranking ol li.no14 strong { background-position: 0  -560px; }
#oden-ranking ol li.no15 strong { background-position: 0  -600px; }
#oden-ranking ol li.no16 strong { background-position: 0  -640px; }
#oden-ranking ol li.no17 strong { background-position: 0  -680px; }
#oden-ranking ol li.no18 strong { background-position: 0  -720px; }
#oden-ranking ol li.no19 strong { background-position: 0  -760px; }
#oden-ranking ol li.no20 strong { background-position: 0  -800px; }
#oden-ranking ol li.no21 strong { background-position: 0  -840px; }
#oden-ranking ol li.no22 strong { background-position: 0  -880px; }
#oden-ranking ol li.no23 strong { background-position: 0  -920px; }
#oden-ranking ol li.no24 strong { background-position: 0  -960px; }
#oden-ranking ol li.no25 strong { background-position: 0 -1000px; }
#oden-ranking ol li.no26 strong { background-position: 0 -1040px; }
#oden-ranking ol li.no27 strong { background-position: 0 -1080px; }
#oden-ranking ol li.no28 strong { background-position: 0 -1120px; }
#oden-ranking ol li.no29 strong { background-position: 0 -1160px; }
#oden-ranking ol li.no30 strong { background-position: 0 -1200px; }
#oden-ranking ol li img { display: block; position: absolute; top: 0; left: 0; }
#oden-ranking ol li p { position: absolute; top: 121px; right: 5px; left: 10px; width: 175px; line-height: 24px; text-align: center; color: #ffffff; font-size: 10px; font-family: sans-serif }
#oden-ranking ol li p em { margin-right: 1px; font-size: 12px; font-weight: bold; }