@charset "UTF-8";

/* ===================================
	File Name   : diary.css
	Description : Diary Page Layout CSS
	Editors     : Taz Sakurai
	Create Date : 2010/11/16

	Update Description :
		2011/04/13 Modify - jQuery Navigation
		2010/11/16 File Create
====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2. Diary Introduction
	3. Diary Side Bar
	4. Diary Detail Page
	5. Archive Page
	6. 
	*. Clear Release
	
====================================== */





/*===== ■1. Individual Redefinition =====*/
#Header ul li a#BtnDiary {background-position: -278px -40px;}
#Footer ul li a#BtnFootDiary {background-position: -574px -34px;}

h2 {
	position: relative;
	background: url(img/mark_diary.jpg) no-repeat left 0px;
	padding: 7px 0px 35px 48px;
	width: 522px;
	height: 38px;
	font-size: 108%;
}

h2 em {
	display: block;
	border: 1px solid #FFFFFF;
	padding: 3px 5px 2px;
	position: absolute;
	top: 15px;
	right: 15px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 77%;
}

h2 a:link {
	color: #FFFFFF;
	text-decoration: none;
}

h2 strong {
	position: absolute;
	top: 18px;
	right: 110px;
	font-size: 77%;
}

h2 em strong {
	position: relative;
	top: auto;
	right: auto;
	font-size: 120%;
}

.DiaryEntry {
	display: inline;
	float: left;
	width: 570px;
	margin: 0px 0px 50px;
}

.DiaryEntry p {
	line-height: 1.8;
}

.DiaryEntry p span {
	float: left;
	padding: 0px 15px 15px 0px;
}

.DiaryEntry.LayoutRight p span {
	float: right;
	padding: 0px 0px 15px 15px;
}

ul.PaginateNavi {
	float: left;
	width: 570px;
	height: 100px;
	overflow: hidden;
	text-align: center;
}

ul.PaginateNavi li {
	display: inline-block;
	text-align: center;
	padding: 3px 0px;
	width: 35px;
	height: 25px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 93%;
}

ul.PaginateNavi li a:link,
ul.PaginateNavi li a:visited {
	display: block;
	background: #FFFFFF;
	margin: 0px 3px;
	padding: 2px 0px 0px;
	width: 19px;
	height: 17px;
	text-align: center;
	text-decoration: none;
	color: #000000;
}

ul.PaginateNavi li a:hover {
	background: #FFF100;
	color: #000000;
}

ul.PaginateNavi li.BtnPreviousPage,
ul.PaginateNavi li.BtnNextPage {
	padding: 14px 0px 0px;
	height: 13px;
}

ul.PaginateNavi li.BtnPreviousPage a {
	display: block;
	background: url(../common/img/mark_arrow-left-yellow.png) no-repeat;
	width: 13px;
	height: 13px;
}

ul.PaginateNavi li.BtnPreviousPage a:hover {background: url(../common/img/mark_arrow-left-white.png) no-repeat;}

ul.PaginateNavi li.BtnNextPage a {
	display: block;
	background: url(../common/img/mark_arrow-right-yellow.png) no-repeat;
	width: 13px;
	height: 13px;
}

ul.PaginateNavi li.BtnNextPage a:hover {background: url(../common/img/mark_arrow-right-white.png) no-repeat;}






/*===== ■2. Diary Introduction =====*/
#DiaryIntro {
	width: 900px;
	margin: 20px auto 30px;
}

#DiaryIntro .DiaryEntry p span {
	display: inline;
	border: 1px solid #FFFFFF;
	margin: 0px 10px 0px 0px;
	padding: 1px;
	width: 98px;
	height: 98px;
	overflow: hidden;
}

#DiaryIntro .DiaryEntry p span a {
	display: block;
	width: 98px;
	height: 98px;
	overflow: hidden;
}

#DiaryIntro .DiaryEntry p span img {
	width: 98px;
	height: auto;
}

#DiaryIntro .DiaryEntry.memo p span img {
	width: auto;
	height: 98px;
}

#DiaryIntro .DiaryEntry p span a:hover img {
	opacity: 0.4;
	filter: alpha(opacity=40);
}





/*===== ■3. Diary Side Bar =====*/
#DiarySideBar {
	display: inline;
	float: right;
	background: url(../common/img/bg_side-end.png) no-repeat bottom;
	padding-bottom: 10px;
	width: 300px;
}

#DiarySideBar dl dt em {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

#DiarySideBar dl dt {
	width: 300px;
	height: 80px;
}

#DiarySideBar dl#Calendar dt {background: url(img/ttl_calendar.png) no-repeat;}
#DiarySideBar dl#RecentryDiary dt {background: url(img/ttl_recentry.png) no-repeat;}
body#DiaryArchives #DiarySideBar dl#RecentryDiary dt {background: url(img/ttl_this-month.png) no-repeat;}
body#CategoryArchives #DiarySideBar dl#RecentryDiary dt {background: url(img/ttl_this-category.png) no-repeat;}
#DiarySideBar dl#Category dt {background: url(img/ttl_category.png) no-repeat;}
#DiarySideBar dl#MonthlyArchive dt {background: url(img/ttl_archive.png) no-repeat;}
#DiarySideBar dl#PhotoLog dt {background: url(img/ttl_recentry-photo.png) no-repeat;}
body#CategoryArchives #DiarySideBar dl#PhotoLog dt {background: url(img/ttl_this-category-photo.png) no-repeat;}
body#DiaryArchives #DiarySideBar dl#PhotoLog dt {background: url(img/ttl_this-month-photo.png) no-repeat;}


#DiarySideBar ul li ul,
#DiarySideBar dl dd {
	background: url(../common/img/bg_side.png) repeat-y;
	padding: 0px 5px 15px 30px;
	width: 265px;
	font-size: 93%;
}

#DiarySideBar dl#Calendar dd ul {
	position: relative;
	height: 15px;
	width: 120px;
	padding-bottom: 10px;
	margin: 0px auto;
}

#DiarySideBar dl#Calendar dd ul em {
	padding: 0px 2px;
	font-size: 77%;
}

#DiarySideBar dl#Calendar dd ul strong {
	padding: 0px 2px;
	font-size: 93%;
}

#DiarySideBar dl#Calendar dd ul li {
	position: absolute;
	display: block;
	left: 0px;
	top: 2px;
	width: 15px;
}

#DiarySideBar dl#Calendar dd ul li.NowMonthly {
	width: 90px;
	left: 15px;
	top: 0px;
	text-align: center;
}

#DiarySideBar dl#Calendar dd ul li.BtnNext {
	left: auto;
	right: 0px;
}

#DiarySideBar dl#Calendar dd ul li a {
	display: block;
	background: url(../common/img/mark_arrow-left-white.png) no-repeat;
	width: 13px;
	height: 13px;
}

#DiarySideBar dl#Calendar dd ul li.BtnPrevious a:hover {background: url(../common/img/mark_arrow-left-yellow.png) no-repeat;}

#DiarySideBar dl#Calendar dd ul li.BtnNext a {
	display: block;
	background: url(../common/img/mark_arrow-right-white.png) no-repeat;
	width: 13px;
	height: 13px;
}

#DiarySideBar dl#Calendar dd ul li.BtnNext a:hover {background: url(../common/img/mark_arrow-right-yellow.png) no-repeat;}

#DiarySideBar dl#Calendar dd table {
	width: 250px;
}

#DiarySideBar dl#Calendar dd table th,
#DiarySideBar dl#Calendar dd table td {
	text-align: center;
	padding: 3px 0px;
	width: 35px;
	height: 25px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 93%;
}

#DiarySideBar dl#Calendar dd table td a:link,
#DiarySideBar dl#Calendar dd table td a:visited {
	display: block;
	background: #FFFFFF;
	margin: 0px 8px;
	padding: 2px 0px 0px;
	width: 19px;
	height: 17px;
	text-align: center;
	text-decoration: none;
	color: #000000;
}

#DiarySideBar dl#Calendar dd table td a:hover {
	background: #FFF100;
	color: #000000;
}

#DiarySideBar dl#RecentryDiary dd ul li,
#DiarySideBar dl#Category dd ul li {
	padding: 0px 0px 10px;
}

#DiarySideBar dl#RecentryDiary dd ul li a:link,
#DiarySideBar dl#RecentryDiary dd ul li a:visited,
#DiarySideBar dl#Category dd ul li a:link,
#DiarySideBar dl#Category dd ul li a:visited {
	background: url(../common/img/mark_arrow-right-white.png) no-repeat;
	padding: 0px 0px 0px 18px;
	color: #FFFFFF;
	text-decoration: none;
}

#DiarySideBar dl#RecentryDiary dd ul li a:hover,
#DiarySideBar dl#Category dd ul li a:hover {
	background: url(../common/img/mark_arrow-right-yellow.png) no-repeat;
	color: #FFF100;
}

#DiarySideBar dl#MonthlyArchive dd ol li {
	list-style: none;
	padding: 0px 0px 10px;
}

#DiarySideBar dl#MonthlyArchive dd ol li span {
	background: url(../common/img/mark_arrow-right-white.png) no-repeat;
	padding: 0px 0px 0px 18px;
	cursor: pointer;
	font-weight: bold;
	color: #FFFFFF;
}

#DiarySideBar dl#MonthlyArchive dd ol li span.selected {
	background: url(../common/img/mark_arrow-down-yellow.png) no-repeat;
	color: #FFF100;
}

#DiarySideBar dl#MonthlyArchive dd ol li ol {
	padding: 10px 0px 0px;
}

#DiarySideBar dl#MonthlyArchive dd ol li ol li {
	background: none;
	padding: 0px 0px 10px 18px;
}

#DiarySideBar dl#MonthlyArchive dd ol li ol li a:link,
#DiarySideBar dl#MonthlyArchive dd ol li ol li a:visited {
	background: url(../common/img/mark_arrow-right-white.png) no-repeat;
	padding: 0px 0px 0px 18px;
	color: #FFFFFF;
	text-decoration: none;
}

#DiarySideBar dl#MonthlyArchive dd ol li ol li a:hover {
	background: url(../common/img/mark_arrow-right-yellow.png) no-repeat;
	color: #FFF100;
}

#DiarySideBar dl#PhotoLog dd ul li {
	float: left;
	display: inline;
	border: 1px solid #FFFFFF;
	margin: 1px;
	padding: 1px;
	width: 44px;
	height: 44px;
	overflow: hidden;
}

#DiarySideBar dl#PhotoLog dd ul li a {
	display: block;
	width: 44px;
	height: 44px;
	overflow: hidden;
}

#DiarySideBar dl#PhotoLog dd ul li img {
	width: 44px;
	height: auto;
}

#DiarySideBar dl#PhotoLog dd ul li.memo img {
	width: auto;
	height: 44px;
}

#DiarySideBar dl#PhotoLog dd ul li a:hover img {
	opacity: 0.4;
	filter: alpha(opacity=40);
}







/*===== ■4. Diary Detail Page =====*/
#DiaryDetailCont {
	width: 900px;
	margin: 20px auto 30px;
}

#DiaryDetailCont .DiaryEntry p span img {
	border: 1px solid #FFFFFF;
	padding: 2px;
}

#DiaryDetailCont .DiaryEntry.memo p span {
	float: none;
	padding: 0px 0px 15px;
}

#DiaryDetailCont .DiaryEntry.memo p span img {
	width: 564px;
	height: auto;
	margin-bottom: 10px;
}





/*===== ■5. Archive Page =====*/
#ArchiveIntro {
	width: 900px;
	margin: 20px auto 30px;
}

.ArchiveContents {
	display: inline;
	float: left;
	width: 570px;
	margin: 0px 0px 50px;
}

.ArchiveContents p {
	line-height: 1.8;
}

.ArchiveContents p span {
	float: left;
	display: inline;
	border: 1px solid #FFFFFF;
	margin: 0px 10px 0px 0px;
	padding: 1px;
	width: 98px;
	height: 98px;
	overflow: hidden;
}

.ArchiveContents span a {
	display: block;
	width: 98px;
	height: 98px;
	overflow: hidden;
}

.ArchiveContents p span img {
	width: 98px;
	height: auto;
}

.ArchiveContents.memo p span img,
.ArchiveContents.memo.LayoutRight p span img {
	width: auto;
	height: 98px;
}

.ArchiveContents.memo p span a:hover img {
	opacity: 0.4;
	filter: alpha(opacity=40);
}

.ArchiveContents.LayoutRight p span {
	float: right;
}








/*===== ■*.Clear Release  =====*/
#DiarySideBar dl#Calendar dd table caption,
#DiarySideBar dl#PhotoLog dd ul {
	/zoom: 1;
}

#DiarySideBar dl#Calendar dd table caption:after,
#DiarySideBar dl#PhotoLog dd ul:after {
	content: '';
	display: block;
	clear: both;
}