@charset "utf-8";



/*=========================================================

	[ blog.css ]

	blog - content style

	date - creation:2013-05-31 // update:2013-06-28

=========================================================*/



/*=========================================================

	index

		1. layout

		2. nav

		3. article

=========================================================*/



/* 1. layout

=========================================================*/

/* Common setting */

#blogContainer{

	width:900px;

}



#blogContainer a{

	text-decoration:underline;

}

#blogArea{

/*
	float:left;
	width:620px;
*/
	margin-top:15px;

}

#blogNav{

	float:right;

	width:250px;

}

#blogNavInner{

	padding-top:15px;

}



/* info box

---------------------------------------------------------*/

.boxList{

	padding:9px;

	background:url(../images/blog/link_area_bg.gif) 0 0;

}

.boxInfo{

	margin-bottom:15px;

	padding:9px 9px 8px;

	background:url(../images/blog/info_area_bg.gif) 0 0;

}

#content .blogTop .boxList ul{

	padding:20px 10px 50px 50px;

}



#content .boxInfo h4,

#content .boxList h4{

	margin:0;

	padding:7px 5px 7px 20px;

	background:#ffffff;

	color:#333333;

	font-size:12px;

	border-radius:3px 3px 0 0;

}

#content .boxInfo h4{

	border-bottom:1px solid #FF0000;

}

#content .boxList h4.hNone{

	padding:7px;

	text-align:center;

	border-bottom:1px solid #C2C2C2;

}



#content .boxList ul,

#content .boxInfo dl{

	overflow:hidden;

	position:relative;

	margin:0;

	padding:12px 10px 12px 15px;

	background-color:#ffffff;

}

#content .boxInfo dt{

	width:10em;

	padding:3px 20px 5px 0;

}#content #blogNav .boxInfo dt{width:auto;}

#content .boxInfo p{

	margin:0;

	padding:0 10px 15px 0;

	line-height:1;

	text-align:right;

	background:#ffffff url(../images/blog/info_area_bg.gif) repeat-x 0 100%;

}

#content .boxInfo p a{

	padding-left:13px;

	background:url("/common/images/for_mk_arrow1.png") no-repeat scroll 0 4px transparent;

}



#content .boxList ul li{

	padding-left:13px;

	background:url("/common/images/for_mk_arrow1.png") no-repeat scroll 0 4px transparent;

}







/* 2. nav

=========================================================*/

.navArticle{

	padding:15px 0;

	background:#E1E7FF;

}

#content .navArticle ul{

	margin:0;

	padding:0;

	list-style:none;

	display:block;

	font-size:130%;

	text-align:center;

}

#content .navArticle ul li{

	display:inline-block;

	margin:0 10px 0 0;

	padding:0;

	text-align:center;

	border-radius:3px;

	border-bottom:1px solid #ffffff;

}

.navArticle li span,

.navArticle li a{

	display:block;

	margin:0 auto;

	padding:5px 10px;

}

#content .navArticle li span,

#content .navArticle li a:hover,

#content .navArticle li a:active{

	background:#B3C1FF;

}

* html .navArticle li a:hover{

}

#content .navArticle li a{

	color:#666666;

	font-weight:bold;

	background:#F4F7FF;

	text-decoration:none;

	border:1px solid #CCCCCC;

	border-radius:3px;

}



/* 3. article

=========================================================*/

/* heading

---------------------------------------------------------*/

#content #blogTit{

	position:relative;

	margin:15px 0;

	height:0;

	padding-top:65px;

	background:url("/blog_tmpl/images/tit_blog.png") no-repeat 50% 0;

	overflow:hidden;

}



/* blog box

---------------------------------------------------------*/

.boxArticle{

	position:relative;

	margin-bottom:15px;

	padding:0 15px 15px;

	border:1px solid #CED7FF;

	border-radius:17px;

	box-shadow: 3px 3px 3px rgba(220,220,220,5);

}

.boxArticle a{

	color:#333333;

}

.boxArticle .blogArtInfo{

	position:relative;

	margin:0 -15px;

	padding:0 15px 10px;

}

#content .boxArticle .blogDate{

	margin:0 -15px;

	padding:6px 5px 6px 33px;

	height:1.5em;

	border-radius:17px 17px 0 0;

	line-height:1.8;

	background:#D6F0E7 url("/common/images/blog/art_ico.png") no-repeat 13px 50%;

}

#content .boxArticle .blogName{

	display:block;

	float:right;

	width:400px;

	margin:-2em;

	padding-right:35px;

	text-align:right;

}

.blogName span{

	font-weight:bold;

}



#content .boxArticle .blogTitle{

	margin:0;

	padding:30px 20px;

	color:#00A26B;

	font-size:20px;

	font-weight:bold;

	border-bottom:1px solid #00A26B;

	line-height:1.6;

	background:none;

}

#content .blogList .boxArticle h3.blogTitle{

	padding:15px 0;

}

#content .boxArticle h3.blogTitle a{

	display:block;

	padding:0 10px 0 35px;

	color:#333333;

	font-size:14px;

	background:url("/common/images/for_mk_arrow2.png") no-repeat scroll 10px 4px transparent;

}

.boxArticle p{

	margin:10px 5px 10px 10px;

	line-height:2;

}



.boxArticle a.more-link{

	position:absolute;

	right:25px;

	bottom:25px;

	display:block;

	float:right;

	padding:7px 0 9px;

	width:13em;

	text-align:center;

	background:#FFCCFF;

}



#toBlogTop{

	margin-top:-2em;

	text-align:right;

}	



/* images

---------------------------------------------------------*/

.blogThumb{

	float:left;

	width:230px;

	height:181px;

	margin:0 20px 20px 0;

	padding:19px 0 0 25px;

	background:url("/common/images/blog/list_photo_bg.png") no-repeat 10px 0 transparent;

}

.blogImg{

	margin:15px auto;

/*	padding:0 0 18px;*/

/*	width:428px;*/

	width:400px;

	height:auto;

/*	background:url("/common/images/blog/art_photo_bg.png") no-repeat 0 100% transparent;*/

}



.blogImg span{

	display:block;

/*	padding:10px 10px 0 10px;

	background:url("/common/images/blog/art_photo_bg.png") no-repeat 0 0 transparent;

*/

}