@import url(/common/css/common.css);

/* ---------------------------------------------------------------------------------------------------------------------------------------------
Wrapper
--------------------------------------------------------------------------------------------------------------------------------------------- */
#wrapper{
	position:relative;
	width:1002px;
	min-height: 100%;
	height:auto;
	border-right: 1px solid #D6D6D6;
	background: #DAE8F1;
	/* hack for IE5 */
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 100%;
}
html>body #wrapper { height: auto; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------
Header
--------------------------------------------------------------------------------------------------------------------------------------------- */
#header { 
	position: relative; 
	width: 100%; 
	height: 30px;
	background: #000;
	color: #fff;
	z-index: 10;
	}
#header .logo {
	float: left;
	padding: 4px 0 0 4px;
	}
#header .menu {
	float: right;
	padding: 4px 4px 0 0;
	font: bold 11px Arial , verdana , Tahoma;
	color: #999;
	
	}
#header .menu a:visited, #header .menu a:link {
	color: #999;
	text-decoration: none;
	}
#header .menu a:hover {
	color: #ffcc00;
	text-decoration: underline;
	}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
Main
--------------------------------------------------------------------------------------------------------------------------------------------- */
#main_wrapper {
	position: relative;
	width: 100%;
	}

#main_wrapper .blog_info {
	position: relative;
	width: 1002px;
	height: 100px;
	background: url(/images/work/myblog.gif) no-repeat;
	z-index: 1;
	}
#main_wrapper .blog_info p {
	padding: 0;
	margin: 0;
	}
#main_wrapper .blog_info .title {
	padding: 30px 0 0 20px;
	font-size: 16px;
	font-weight: bold;
	}
#main_wrapper .blog_info .url {
	padding: 0 0 0 20px;
	}
#main_wrapper .blog_info .url a:visited, #main_wrapper .blog_info a:link {
	color: #333;
	text-decoration: none;
	}
#main_wrapper .blog_info .url a:hover {
	text-decoration: underline;
	}
#main_wrapper .blog_info .name {
	float: left;
	padding: 10px 0 0 20px;
	}
#main_wrapper .blog_info .open_date {
	float: left;
	padding: 10px 0 0 20px;
	}
#main_wrapper .blog_info .visit_cnt {
	float: left;
	padding: 10px 0 0 20px;
	}

/* ---[ Sidebar ]--------------------- */
#sidebar {
	float: left;
	width: 225px;	
	}

/* introduce */
#sidebar .intro {
	position: relative;
	width: 205px;
	margin: 10px auto;
	background: #428CB5;
	}
#sidebar .intro p {
	padding: 0;
	margin: 0;
	}
#sidebar .intro .photo {
	padding: 10px;
	background: url(/images/blog/blog_intro_top.gif) no-repeat;
	}

#sidebar .intro .name {
	margin: 0 10px;
	background: #fff;
	}
#sidebar .intro .introduce {
	margin: 0 10px;
	background: #fff;
	}
#sidebar .intro .navi {
	text-align: right;
	margin: 4px 10px 0;
	}
#sidebar #search {
	padding: 4px 10px 10px;
	margin: 0;
	background: url(/images/blog/blog_intro_bottom.gif) no-repeat 0 100%;
	}
#sidebar #charLayer2 {
	width: 173px;
	height: 100px;
	margin: 10px;
	padding: 4px 5px 5px;
	border: 1px solid #D6D6D6;
	background: #fff;
	overflow:hidden;
	}

#sidebar #search #search_value {
	width: 118px;
	height: 18px;
	border: 1px solid #418CB3;
	}

/* menu */
#sidebar .menu_btn {
	text-align: center;
	padding-bottom: 10px;
	}

/* calendar */
#sidebar #calendar {
	margin-left: 10px;
	border: 1px solid #ccc;
	}

/* menu */
#sidebar .menu {
	width: 205px;
	margin: 10px auto;
	border: 0px solid green;
	}
#sidebar .menu p {
	padding: 0;
	margin: 0;
	}
#sidebar .menu .top {
	height: 6px;
	background: url(/images/blog/menu.gif) no-repeat 0 100%;
	}
#sidebar .menu ul {
	padding: 10px;
	margin: 0;
	list-style: none;
	background: url(/images/blog/menu.gif) repeat-y -220px 0;
	}
#sidebar .menu li {
	padding-left: 20px;
	background: url(/images/blog/icon_menu.gif) no-repeat 0 0;
	}
#sidebar .menu li a:visited, #sidebar .menu li a:link {
	color: #666;
	text-decoration: none;
	}
#sidebar .menu li a:hover {
	text-decoration: underline;
	}
#sidebar .menu .bottom {
	height: 6px;
	background: url(/images/blog/menu.gif) no-repeat -440px 0;
	}

/* RSS */
#sidebar .rss {
	width: 205px;
	text-align: right;
	margin: 0 auto;
	padding: 5px 0;
}
/* visit */
#sidebar .visit {
	width: 205px;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	margin-bottom: 5px;
	}


/* ---[ Main ]--------------------- */
#main {
	float: left;
	width: 767px;	
	}

/* ---[ Main Left ]--------------------- */
#main_left {	
	float: left;
	width: 595px;
	margin-top: 10px;
	border: 0px;
	
/*	border: 1px solid #D6D6D6; 
	background: #fff; */
	}

/* ---[ Main Right ]--------------------- */
#main_right {	
	position: relative;
	float: right;
	width: 158px;
	margin-top: 20px;
	bottom: 10px;
	border: 1px solid #D6D6D6;
	background: #fff;
	}
#main_right h4 {
	padding: 0;
	margin: 0;
	}
#main_right h4 span {
	display: none;
	}
#main_right ul {
	padding: 0;
	margin: 0;
	list-style: none;
	}
#main_right ul li {
	line-height: 17px;
	}
#main_right ul li a:visited, #main_right ul li a:link {
	color: #666;
	text-decoration: none;
	}
#main_right ul li a:hover {
	text-decoration: underline;
	}

/* new post */
#main_right .new_post {
	color: #999;
	padding: 10px 8px 0 8px;
	}
#main_right .new_post h4 {
	width: 130px;
	height: 15px;
	background: url(/images/blog/title_new_post.gif) no-repeat 0 0;
	}
#main_right .new_post p {
	padding: 0;
	margin: 0;
	}
#main_right .new_post li {
	padding-left: 10px;
	background: url(/images/blog/arrow_1.gif) no-repeat 0 6px;
	}

/* new commnet */
#main_right .new_commnet {
	color: #999;
	padding: 10px 8px 0 8px;
	}
#main_right .new_commnet h4 {
	width: 130px;
	height: 15px;
	background: url(/images/blog/title_new_commnet.gif) no-repeat 0 0;
	}
#main_right .new_commnet p {
	padding: 0;
	margin: 0;
	}
#main_right .new_commnet li {
	padding-left: 10px;
	background: url(/images/blog/arrow_1.gif) no-repeat 0 6px;
	}

/* visitor */
#main_right .visitor {
	color: #999;
	padding: 10px 8px 0 8px;
	}
#main_right .visitor h4 {
	width: 130px;
	height: 15px;
	background: url(/images/blog/title_visitor.gif) no-repeat 0 0;
	}
#main_right .visitor p {
	padding: 0;
	margin: 0;
	}
#main_right .visitor li {
	padding-left: 10px;
	background: url(/images/blog/arrow_1.gif) no-repeat 0 6px;
	}

/* friend */
#main_right .friend {
	color: #999;
	padding: 10px 8px 0 8px;
	}
#main_right .friend h4 {
	width: 130px;
	height: 15px;
	background: url(/images/blog/title_friend.gif) no-repeat 0 0;
	}
#main_right .friend p {
	padding: 0;
	margin: 0;
	}
#main_right .friend li {
	padding-left: 14px;
	line-height: 20px;
	background: url(/images/blog/icon_friend.gif) no-repeat 0 50%;
	}
#main_right .friend .all {
	background-image: none;
	}
#main_right .friend .etc {
	display:none;
	}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
Clear foot
--------------------------------------------------------------------------------------------------------------------------------------------- */
#clearfooter{ 
	clear: left;
/*	height: 65px;*/
	width:100%;
	margin-top: 5px;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
Footer
--------------------------------------------------------------------------------------------------------------------------------------------- */
#footer {
	/*position: absolute; */
	bottom: 0px; 
	width: 100%; 
	height: 64px; 
	background: #fff;
	border-top: 1px solid #D6D6D6;
	text-align: center;
	}

#foot {height:64px; padding: 0; margin:0; }
#foot_copy { float: left; margin: 0 40px 0 310px; }
#foot_navi01 { float: left; padding: 20px 0 0 0; margin:0; }
#foot_navi02 { float: left; padding: 20px 0 0 0; margin:0; }
#foot_navi03 { float: left; padding: 20px 0 0 0; margin:0; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------
Doban List
--------------------------------------------------------------------------------------------------------------------------------------------- */
#dobandiv {
		position: absolute;
		width: 270px;
		height: 175px;
		top: 23px;
		left: 588px;
		background: #FBF8EF;
		border: 1px solid #9C9A9C;
		z-index: 100;
		visibility: hidden;
		}
	#dobanlist {
		background: #FBF8EF;
		padding: 0px;
		}