@charset "utf-8";

/*/////////////////////////////////////////////////////////////
dododay

Copyright (C) KAYAC Inc. All Rights Reserved.
------------------------------------------------------------
[mypage.css] Only mypage category style
	0. Import Common CSS
	1. マイページ共通
	2. 作品詳細
	3. 作品を登録する
	99. Clearfix

//////////////////////////////////////////////////////////////*/

/* ------------------------------------------------------------
	0. Import Common CSS
------------------------------------------------------------ */

@import url("/css/common/base.css");
@import url("/css/common/layout.css");
@import url("/css/common/module.css");

/* ------------------------------------------------------------
	1. マイページ共通
------------------------------------------------------------ */

/* 作った人のプロフィール
------------------------------------------------- */
div#blockCreatorProfile {
	margin-bottom: 20px;
}

div#blockCreatorProfile h2.ttl04 {
	margin-bottom: 20px;
}

/* アバター */
div#blockCreatorProfile div.unitAvatar {
	display: inline;
	float: left;
	width: 230px;
	margin: 0 10px;
	text-align: center;
	letter-spacing: 1px;
}

div#blockCreatorProfile div.unitAvatar div#creatorAvatar {
	margin-bottom: 5px;
}

div#blockCreatorProfile div.unitAvatar ul {
	font-size: 77%;
}

div#blockCreatorProfile div.unitAvatar ul li {
	display: inline;
	padding: 0 3px 0 7px;
	border-left: 1px solid #CCC;
}

div#blockCreatorProfile div.unitAvatar ul li.firstChild {
	border: none;
}

div#blockCreatorProfile div.unitAvatar p.rank {
	font-size: 77%;
}

div#blockCreatorProfile div.unitAvatar p.rank span {
	padding-left: 13px;
	background: url(/img/common/spr_ico_common.png) no-repeat 0 -3000px;
}

div#blockCreatorProfile div.unitAvatar p.unitBtn {
	margin-top: 10px;
}

/* 最近投稿された作品 */
div#blockCreatorProfile div#blockRecentPost {
	float: right;
	width: 497px;
}

div#blockCreatorProfile div#blockRecentPost h3 {
	margin-bottom: 4px;
	padding: 10px;
	text-align: center;
	background: #ecdca4;
	color: #583a16;
	font-size: 93%;
}

div#blockCreatorProfile p.viewMore {
	clear: both;
}

/* プロフィール詳細 */
div#blockCreatorProfile div.unitProfile {
	float: right;
	width: 500px;
}

dl.newComment {
	margin-bottom: 10px;
	padding: 7px 10px;
	background: #ffc;
}

dl.newComment dt {
	color: #f60;
	font-weight: bold;
}

div#blockCreatorProfile div.contBox04 {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
	2. 作品詳細
------------------------------------------------------------ */

/* お気に入りボタン
------------------------------------------------- */
div.blockBookmark {
	margin: 15px 0;
}

div.blockBookmark ul.listNum {
	display: inline;
	float: left;
	width: 260px;
	margin-left: 10px;
	padding-top: 5px;
}

div.blockBookmark ul.listBookmark {
	float: right;
	width: 480px;
	text-align: right;
}

div.blockBookmark ul.listBookmark li {
	display: inline;
	margin-left: 5px;
}

/* 作品の詳細
------------------------------------------------- */
div#blockWorkDetail {
	margin-bottom: 30px;
}

/* 画像 */
div#blockWorkDetail div.unitImg {
	float: left;
	width: 370px;
}

ul.unitImgThumb li {
	position: relative;
	float: left;
	margin: 0 1px 10px 0;
	border: 1px solid #ccc;
	background: #eee;
}

ul.unitImgThumb li.main {
	width: 366px;
	height: 366px;
}

ul.unitImgThumb li.sub {
	width: 120px;
	height: 120px;
}

ul.unitImgThumb li a {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: url(/img/common/ico_zoom.png) no-repeat 100% 100%;
	text-indent: -9999px;
}

ul.unitImgThumb li a:hover {
	background: url(/img/common/ico_zoom_o.png) no-repeat 100% 100%;
}

ul.unitImgThumb li.main a {
	width: 366px;
	height: 366px;
}

ul.unitImgThumb li.sub a {
	width: 120px;
	height: 120px;
}

/* テキスト */
div#blockWorkDetail div.unitTxt {
	float: right;
	width: 365px;
}

/* この作品のブログパーツを貼る */
div#blockWorkDetail div.unitBlogpartsTag {
	margin-bottom: 10px;
	padding: 10px 10px 15px;
	border: 1px solid #ccc;
	background: #eee;
}

div#blockWorkDetail div.unitBlogpartsTag h2 {
	margin-bottom: 7px;
	padding: 3px 0 3px 25px;
	background: url(/img/common/spr_ico_common.png) no-repeat 0 -1400px;
}

div#blockWorkDetail div.unitBlogpartsTag dl {
	position: relative;
	margin: 0 3px;
}

div#blockWorkDetail div.unitBlogpartsTag dl dt {
	margin-bottom: 5px;
}

div#blockWorkDetail div.unitBlogpartsTag dl dd.viewMore {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	font-weight: normal;
}

/* 作った人のコメント
------------------------------------------------- */
div#blockCreatorComment {
	margin-bottom: 40px;
}

div#blockCreatorComment p {
	margin: 0 10px;
}

/* 作り方
------------------------------------------------- */
div#blockWorkRecipe {
	margin-bottom: 20px;
}

/* ステップ */
ol.unitStep li {
	margin-bottom: 10px;
	overflow: hidden;
	zoom: 1;
}

ol.unitStep li dl {
	position: relative;
}

ol.unitStep li dl dt {
	float: right;
	width: 530px;
	padding-top: 25px;
}

ol.unitStep li dl dd {
	position: relative;
	width: 164px;
	height: 164px;
	padding-top: 20px;
	background: url(/img/common/spr_ico_step.png) no-repeat;
}

ol.unitStep li.step1 dl dd { background-position: 0 0; }
ol.unitStep li.step2 dl dd { background-position: 0 -20px; }
ol.unitStep li.step3 dl dd { background-position: 0 -40px; }
ol.unitStep li.step4 dl dd { background-position: 0 -60px; }
ol.unitStep li.step5 dl dd { background-position: 0 -80px; }
ol.unitStep li.step6 dl dd { background-position: 0 -100px; }
ol.unitStep li.step7 dl dd { background-position: 0 -120px; }
ol.unitStep li.step8 dl dd { background-position: 0 -140px; }
ol.unitStep li.step9 dl dd { background-position: 0 -160px; }
ol.unitStep li.step10 dl dd { background-position: 0 -180px; }
ol.unitStep li.step11 dl dd { background-position: 0 -200px; }
ol.unitStep li.step12 dl dd { background-position: 0 -220px; }
ol.unitStep li.step13 dl dd { background-position: 0 -240px; }
ol.unitStep li.step14 dl dd { background-position: 0 -260px; }
ol.unitStep li.step15 dl dd { background-position: 0 -280px; }
ol.unitStep li.step16 dl dd { background-position: 0 -300px; }
ol.unitStep li.step17 dl dd { background-position: 0 -320px; }
ol.unitStep li.step18 dl dd { background-position: 0 -340px; }
ol.unitStep li.step19 dl dd { background-position: 0 -360px; }
ol.unitStep li.step20 dl dd { background-position: 0 -380px; }
ol.unitStep li.step21 dl dd { background-position: 0 -400px; }
ol.unitStep li.step22 dl dd { background-position: 0 -420px; }
ol.unitStep li.step23 dl dd { background-position: 0 -440px; }
ol.unitStep li.step24 dl dd { background-position: 0 -460px; }
ol.unitStep li.step25 dl dd { background-position: 0 -480px; }
ol.unitStep li.step26 dl dd { background-position: 0 -500px; }
ol.unitStep li.step27 dl dd { background-position: 0 -520px; }
ol.unitStep li.step28 dl dd { background-position: 0 -540px; }
ol.unitStep li.step29 dl dd { background-position: 0 -560px; }
ol.unitStep li.step30 dl dd { background-position: 0 -580px; }

ol.unitStep li dl dd img {
	border: 2px solid #cee81b;
}

ol.unitStep li dl dd a {
	overflow: hidden;
	display: block;
	position: absolute;
	top: 22px;
	left: 2px;
	z-index: 1;
	width: 160px;
	height: 160px;
	background: url(/img/common/ico_zoom.png) no-repeat 100% 100%;
	text-indent: -9999px;
}

ol.unitStep li dl dd a:hover {
	background: url(/img/common/ico_zoom_o.png) no-repeat 100% 100%;
}

/* ワンポイントアドバイス
------------------------------------------------- */
div#blockOnePoint {
	margin-bottom: 20px;
}

/* 材料・道具
------------------------------------------------- */
div#blockMaterial {
	margin-bottom: 40px;
}

div#blockMaterial h3 {
	margin-bottom: 10px;
	padding-left: 10px;
	color: #844a29;
	font-size: 124%;
}

div#blockMaterial div.unitMaterial {
	float: left;
	width: 365px;
}

div#blockMaterial div.unitTool {
	float: right;
	width: 365px;
}

/* この作品へのコメント
------------------------------------------------- */
div#blockWorkComment {
	margin-bottom: 30px;
}

/* この作品に関連した作品
------------------------------------------------- */
div#blockRelatedWork {
	margin-bottom: 30px;
}

/* ------------------------------------------------------------
	3. 作品を登録する
------------------------------------------------------------ */

/* 作品登録ステップ
------------------------------------------------- */
div#blockStepWork {
	margin: 20px 0;
}

div#blockStepWork ol {
	background: url(/img/mypage/spr_step_work.png) no-repeat 0 0;
}

div#blockStepWork ol li {
	float: left;
	width: 150px;
	height: 40px;
	text-indent: -9999px;
}

div#blockStepWork ol li a,
div#blockStepWork ol li strong {
	display: block;
	overflow: hidden;
	width: 150px;
	height: 40px;
	background: url(/img/mypage/spr_step_work.png) no-repeat;
}

div#blockStepWork ol li.step1 a { background-position: 0 -80px; }
div#blockStepWork ol li.step2 a { background-position: -150px -80px; }
div#blockStepWork ol li.step3 a { background-position: -300px -80px; }
div#blockStepWork ol li.step4 a { background-position: -450px -80px; }
div#blockStepWork ol li.step5 a { background-position: -600px -80px; }

div#blockStepWork ol li.step1 a:hover { background-position: 0 -120px; }
div#blockStepWork ol li.step2 a:hover { background-position: -150px -120px; }
div#blockStepWork ol li.step3 a:hover { background-position: -300px -120px; }
div#blockStepWork ol li.step4 a:hover { background-position: -450px -120px; }
div#blockStepWork ol li.step5 a:hover { background-position: -600px -120px; }

div#blockStepWork ol li.step1 strong { background-position: 0 -40px; }
div#blockStepWork ol li.step2 strong { background-position: -150px -40px; }
div#blockStepWork ol li.step3 strong { background-position: -300px -40px; }
div#blockStepWork ol li.step4 strong { background-position: -450px -40px; }
div#blockStepWork ol li.step5 strong { background-position: -600px -40px; }

/* 登録したい作品のカテゴリを選択する
------------------------------------------------- */

/* 選択したカテゴリリスト */
div.selectedCategory {
	margin: 10px 0;
	padding: 3px 10px;
	border-bottom: 1px solid #eee;
}

/* カテゴリ選択 */
div.selectCategory dl {
	float: left;
	width: 246px;
	margin-left: 3px;
	border: 1px solid #eee;
}

div.selectCategory dl.firstChild {
	margin-left: 0;
}

div.selectCategory dl dt {
	padding: 3px;
	background: #ccc;
	color: #fff;
	font-size: 108%;
	font-weight: bold;
	text-align: center;
}

div.selectCategory select {
	width: 100%;
	border: none;
}

div.selectCategory select option {
	background: #eee;
}

/* active */
div.selectCategory dl.active {
	border-color: #ccc; 
}

div.selectCategory dl.active dt {
	background-color: #864417;
}

/* 作品のタグを登録する
------------------------------------------------- */
dl.blockInputTag {
	position: relative;
}

dl.blockInputTag dt.unitLabel {
	float: left;
	width: 3em;
	padding-top: 5px;
	font-weight: bold;
}

dl.blockInputTag dd.unitCont {
	margin: 0 200px 0 3em;
}

dl.blockInputTag dd.unitBtn {
	position: absolute;
	top: 0;
	right: 0;
}

/* タグ入力 */
.inputTag {
	margin-bottom: 5px;
}

.textboxlist {
	cursor: text;
}

.textboxlist-bits {
	overflow: hidden;
	padding: 5px 5px 0;
	border: 1px solid #ccc;
}

.textboxlist-bit {
	display: block;
	float: left;
	margin: 0 5px 5px 0;
	cursor: default;
}

.textboxlist-bit-editable-input {
	border: 0;
}

.textboxlist-bit-editable-input:focus {
	outline: 0;
}

.textboxlist-bit-box {
	position: relative;
	padding: 0 5px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background: #eee;
	cursor: default;
}

.textboxlist-bit-box-deletable {
	padding-right: 20px;
}

.textboxlist-bit-box-deletebutton {
	display: block;
	position: absolute;
	right: 3px;
	top: 2px;
	width: 15px;
	height: 15px;
	background: url(/img/common/ico_del.png) no-repeat;
	font-size: 1px;
}

.textboxlist-bit-box-hover {
	background: #ddd;
}

.textboxlist-bit-box-focus {
	background: #ddd;
	color: #999;
}

/* 関連タグ */
dl.blockInputTag p.note {
	margin-bottom: 10px;
	color: #999;
}

/* 関連タグ */
dl.blockInputTag dl.relatedTag {
	margin-bottom: 10px;
	padding: 10px 15px;
	background: #eee;
	display: none;
}

dl.blockInputTag dl.relatedTag dd ul li {
	display: inline;
	margin-right: 1em;
	line-height: 1.8;
}

dl.blockInputTag dl.relatedTag dd ul li a {
	white-space: nowrap;
}

/* タグ一覧（lightbox）
------------------------------------------------- */
div#lbContent div#blockTagCloud {
	margin: 0;
	padding: 10px 0;
	background: #eee;
}

/* ------------------------------------------------------------
	4. マイページトップ
------------------------------------------------------------ */

/* マイページヘッダ
------------------------------------------------- */
div#blockHeaderMypage {
	margin-bottom: 10px;
	background: url(/img/mypage/spr_tab_b.png) no-repeat 0 0;
}

/* 見出しエリア */
div#blockHeaderMypage div.unitTtl {
	position: relative;
	min-height: 80px;
}

div#blockHeaderMypage div.unitTtl h1 {
	padding: 15px 200px 0 60px;
	color: #844a29;
	font-size: 124%;
}

div#blockHeaderMypage div.unitTtl p.bookmark {
	position: absolute;
	top: 15px;
	right: 0;
}

div#blockHeaderMypage div.unitTtl p.bookmark a {
	padding: 3px 0 3px 20px;
	background: url(/img/common/spr_ico_common.png) no-repeat 0 -3200px;
}

/* ローカルナビ */
div#blockHeaderMypage ul.navLocal {
	background-image: url(/img/mypage/spr_tab_b.png);
}

div#blockHeaderMypage ul.navLocal li a,
div#blockHeaderMypage ul.navLocal li a span,
div#blockHeaderMypage ul.navLocal li a:hover {
	background-image: url(/img/mypage/spr_tab.png);
}

div#blockHeaderMypage ul.navLocal li.current a,
div#blockHeaderMypage ul.navLocal li.current a:hover,
div#blockHeaderMypage ul.navLocal li.current a span,
div#blockHeaderMypage ul.navLocal li.current a:hover span {
	color: #653618;
}

div#blockHeaderMypage ul.navLocal li a span span.num {
	display: inline;
	font-weight: normal;
	background: none;
}

/* マイページヘッダ（他人のページ）
------------------------------------------------- */
div#blockHeaderMypage.other { background-position: -750px 0; }
div#blockHeaderMypage.other ul.navLocal { background-position: -750px 100%; }

div#blockHeaderMypage.other ul.navLocal li a { background-position: 0 -93px; }
div#blockHeaderMypage.other ul.navLocal li a span { background-position: 100% -93px; } 

div#blockHeaderMypage.other ul.navLocal li a:hover { background-position: 0 -124px; }
div#blockHeaderMypage.other ul.navLocal li a:hover span { background-position: 100% -124px; }

div#blockHeaderMypage.other ul.navLocal li.current a,
div#blockHeaderMypage.other ul.navLocal li.current a:hover {
	background-position: 0 -155px;
}

div#blockHeaderMypage.other ul.navLocal li.current a span, 
div#blockHeaderMypage.other ul.navLocal li.current a:hover span{
	background-position: 100% -155px;
}

div#blockHeaderMypage.other ul.navLocal li.current a,
div#blockHeaderMypage.other ul.navLocal li.current a:hover,
div#blockHeaderMypage.other ul.navLocal li.current a span,
div#blockHeaderMypage.other ul.navLocal li.current a:hover span {
	color: #36610f;
}

/* 作品を投稿する
------------------------------------------------- */
div.unitPost {
	margin-bottom: 20px;
	padding: 10px;
	background: #f9f0cd;
	text-align: center;
}

/* お気に入り作家
------------------------------------------------- */
div#blockFavoriteCreator {
	margin-bottom: 30px;
}

/* お気に入り作品
------------------------------------------------- */
div#blockFavoriteWork {
	margin-bottom: 30px;
}

/* 最近のコメント
------------------------------------------------- */
div#blockRecentComment {
	margin-bottom: 30px;
}

dl.listRecentComment {
	margin-bottom: 10px;
}

dl.listRecentComment dt {
	float: left;
	width: 8.5em;
	padding-top: 10px;
	color: #666;
}

dl.listRecentComment dd {
	margin-left: 8.5em;
	padding-top: 10px;
}

dl.listRecentComment dd span {
	margin-left: 10px;
}

/* ------------------------------------------------------------
	4. アバターの入力・変更
------------------------------------------------------------ */

/* Flash Player ダウンロード
------------------------------------------------- */
dl.blockDownloadFlash {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	font-size: 93%;
}

dl.blockDownloadFlash dt {
	float: left;
	width: 160px;
}

dl.blockDownloadFlash dd {
	margin-left: 170px;
	padding-top: 3px;
}

/* アバター選択
------------------------------------------------- */
div#blockAvatarSelect {
	margin: 10px 0 50px;
}

dl.unitAvatarSelect {
	float:left;
	width: 250px;
	font-size: 93%;
	text-align: center;
}

dl.unitAvatarSelect dt {
	margin-bottom: 10px;
	padding: 10px 0;
}

dl.unitAvatarSelect dt.selected {
	background: #fffbde;
}

dl.unitAvatarSelect dd ul li {
	display: inline;
	padding: 0 3px 0 7px;
	border-left: 1px solid #000;
	
}

dl.unitAvatarSelect dd ul li.firstChild {
	border: none;
}

/* 設定を変更する
------------------------------------------------- */
ul.listSelectAvatar.room {
	background: url(/img/mypage/avatar/bg_avatar.png) no-repeat;
}

ul.listSelectAvatar.person {
	background: url(/img/mypage/avatar/bg_avatar.png) no-repeat 0 -200px;
}

ul.listSelectAvatar li {
	float: left;
	width: 55px;
	margin-right: 5px;
	text-align: center;
}

ul.listSelectAvatar li.label {
	display: block;
}

/* 設定を変更する
------------------------------------------------- */
div#blockAvatarPrev {
	margin-top: -20px;
	text-align: center;
}

/* ------------------------------------------------------------
	5. 退会
------------------------------------------------------------ */
div.blockRemove {
	margin-bottom: 20px;
}

/* ------------------------------------------------------------
	99. Clearfix
------------------------------------------------------------ */
ul.listSelectAvatar:after,
div#blockAvatarSelect:after,
dl.blockDownloadFlash:after,
div#blockCreatorProfile:after,
div.blockBookmark:after,
div#blockWorkDetail:after,
div#blockMaterial:after,
ul.unitImgThumb:after,
div#blockStepWork ol:after,
div.selectCategory:after,
.textboxlist-bit:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	font-size: 0.1em;
	line-height: 0;
}

ul.listSelectAvatar,
div#blockAvatarSelect,
dl.blockDownloadFlash,
div#blockCreatorProfile,
div.blockBookmark,
div#blockWorkDetail,
div#blockMaterial,
ul.unitImgThumb,
div#blockStepWork ol,
div.selectCategory,
.textboxlist-bit {
	display: inline-block;
}

/* exclude MacIE5 \*/
* html ul.listSelectAvatar,
* html div#blockAvatarSelect,
* html dl.blockDownloadFlash,
* html div#blockCreatorProfile,
* html div.blockBookmark,
* html div#blockWorkDetail,
* html div#blockMaterial,
* html ul.unitImgThumb,
* html div#blockStepWork ol,
* html div.selectCategory,
* html .textboxlist-bit {
	height: 1%;
}

ul.listSelectAvatar,
div#blockAvatarSelect,
dl.blockDownloadFlash,
div#blockCreatorProfile,
div.blockBookmark,
div#blockWorkDetail,
div#blockMaterial,
ul.unitImgThumb,
div#blockStepWork ol,
div.selectCategory,
.textboxlist-bit {
	display: block;
}
/* end: exclude MacIE5 */