@charset "utf-8";

/*
####################################################################################################
# Home Cascading Style Sheets - vin.method Ver.1.0
# CSS coding: curious epicurean; vincent.
# Copyright (c) 2010 Art Studio Vincent All rights reserved.
####################################################################################################
*/



/* featured categories */
#featured{
	position:relative;
	width:1000px;
	height:270px;
	font-size:12px;
	margin:10px 0 0;
	padding:0;
}
#featured h3{
	display:block;
	height:24px;
	background:#123;
	color:#fff;
	font-size:1em;
	border:1px solid #123;
	margin:0;
	padding-top:4px;
	text-align:center;
	letter-spacing:1em;
	text-transform:uppercase;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
	text-shadow:-1px -1px 6px rgba(0,0,0,.6),-1px -1px 1px #000;
	behavior:url(../css/ie-css3.htc);
	background-image:-webkit-gradient(
		linear,left top,left bottom,
		from(rgba(255,255,255,.8)),to(rgba(255,255,255,0)),
		color-stop(30%,rgba(255,255,255,.4)),
		color-stop(50%,rgba(255,255,255,.2))
	);
	background-image:-moz-linear-gradient(
		-90deg,rgba(255,255,255,.8),
		rgba(255,255,255,.4)30%,rgba(255,255,255,.2)50%,
		rgba(255,255,255,0)
	);
}
#featured .ui-tabs-panel{
	position:absolute;
	display:block;
	background:#c0c0c0;
	width:600px;
	height:240px;
	left:200px;
	top:30px;
}
#featured .ui-tabs-nav{
	width:200px;
	list-style:none;
	margin:0;
	padding:0;
}
#featured .ui-tabs-nav-item{
	position:absolute;
	width:200px;
	height:60px;
	color:#333;
	font-weight:bold;
	margin:0;
	padding:0;
	overflow:hidden;
	background:#ccc;
	background-image:-webkit-gradient(
		linear,left top,left bottom,
		from(rgba(255,255,255,.8)),to(rgba(255,255,255,0)),
		color-stop(30%,rgba(255,255,255,.4)),
		color-stop(50%,rgba(255,255,255,.2))
	);
	background-image:-moz-linear-gradient(
		-90deg,rgba(255,255,255,.8),
		rgba(255,255,255,.4)30%,rgba(255,255,255,.2)50%,
		rgba(255,255,255,0)
	);

}
#featured #nav-flag-1{left:  0;  top: 30px;}
#featured #nav-flag-2{left:  0;  top: 90px;border-top:1px solid #789;}
#featured #nav-flag-3{left:  0;  top:150px;border-top:1px solid #789;}
#featured #nav-flag-4{left:  0;  top:210px;border-top:1px solid #789;}
#featured #nav-flag-5{left:800px;top: 30px;}
#featured #nav-flag-6{left:800px;top: 90px;border-top:1px solid #789;}
#featured #nav-flag-7{left:800px;top:150px;border-top:1px solid #789;}
#featured #nav-flag-8{left:800px;top:210px;border-top:1px solid #789;}

#featured .ui-tabs-nav-item a{
	display:block;
	width:100%;
	height:60px;
	color:#000;
	text-decoration:none;
}
#featured .ui-tabs-nav-item a:hover{
	background:#abc;
	background-image:-webkit-gradient(
		linear,left top,left bottom,
		from(rgba(255,255,255,.8)),to(rgba(255,255,255,0)),
		color-stop(30%,rgba(255,255,255,.4)),
		color-stop(50%,rgba(255,255,255,.2))
	);
	background-image:-moz-linear-gradient(
		-90deg,rgba(255,255,255,.8),
		rgba(255,255,255,.4)30%,rgba(255,255,255,.2)50%,
		rgba(255,255,255,0)
	);

}
#featured .ui-tabs-nav-item img{
	width:50px;
	height:50px;
	float:left;
	margin:2px 5px;
	padding:2px;
}
#featured .ui-tabs-nav-item a span{
	display:inline;
	/* ie6,ie7 */
	/white-space:nowrap;
	/cursor:pointer;
}
#featured .ui-tabs-nav-item a span.float-left{
	float:left;
	margin:20px 0 0;
}
#featured .ui-tabs-nav-item a span.float-right{
	font-family:georgia;
	font-size:80%;
	font-weight:normal;
	float:right;
	margin:20px 5px 0 0;
}

#featured .ui-tabs-nav .ui-tabs-selected a{
	background:#789;
	background-image:-webkit-gradient(
		linear,left top,left bottom,
		from(rgba(255,255,255,.8)),to(rgba(255,255,255,0)),
		color-stop(30%,rgba(255,255,255,.4)),
		color-stop(50%,rgba(255,255,255,.2))
	);
	background-image:-moz-linear-gradient(
		-90deg,rgba(255,255,255,.8),
		rgba(255,255,255,.4)30%,rgba(255,255,255,.2)50%,
		rgba(255,255,255,0)
	);

}

#featured .ui-tabs-panel{
	width:600px;
	height:240px;
}
#featured #flag-1{background:#000 url(../images/ctg-spell.jpg) 50% 50% no-repeat;}
#featured #flag-2{background:#000 url(../images/ctg-essay.jpg) 50% 50% no-repeat;}
#featured #flag-3{background:#000 url(../images/ctg-word.jpg) 50% 50% no-repeat;}
#featured #flag-4{background:#000 url(../images/ctg-poetry.jpg) 50% 50% no-repeat;}
#featured #flag-5{background:#000 url(../images/ctg-drama.jpg) 50% 50% no-repeat;}
#featured #flag-6{background:#000 url(../images/ctg-allegory.jpg) 50% 50% no-repeat;}
#featured #flag-7{background:#000 url(../images/ctg-wolf.jpg) 50% 50% no-repeat;}
#featured #flag-8{background:#000 url(../images/ctg-empelor.jpg) 50% 50% no-repeat;}

#featured .ui-tabs-panel .list{
	position:absolute;
	width:100%;
	left:0;
	top:0;
}
#featured .ui-tabs-panel .list h4{
	font-size:140%;
	margin:20px 10px 10px 10px;
}
#featured .ui-tabs-panel .list h4 a{
	display:block;
	padding:3px 0 0;
}
#featured .ui-tabs-panel .list h4 a:hover{
	background:#789;
	color:#fff;
	text-decoration:none;
	/*filter:alpha(opacity=60);*/
	-moz-opacity:.6;
	opacity:.6;
}
#featured .ui-tabs-panel .list h5{
	font-size:100%;
	margin:0 10px 10px;
}
#featured .ui-tabs-panel .list a{
	text-decoration:none;
	color:#000;
}

#featured .ui-tabs-panel .list ul{
	width:440px;
	margin:0 10px;
	padding:0;
}
#featured .ui-tabs-panel .list li{
	border-top:1px dotted #333;
	white-space:nowrap;
	overflow:hidden;
	overflow-x:hidden; /* for WinIE6 */
}
#featured .ui-tabs-panel .list li a{
	display:block;
	width:100%;
	color:#000;
	line-height:1.75em;
	text-decoration:none;
}
#featured .ui-tabs-panel .list li a:hover{
	background:#789;
	color:#fff;
	text-decoration:none;
	/*filter:alpha(opacity=60);*/
	-moz-opacity:.6;
	opacity:.6;
}
#featured .ui-tabs-panel .list li:last-child{
	text-align:right;
}
#featured .ui-tabs-panel .list li:last-child a{
	display:inline;
	padding:3px;
}
#featured .ui-tabs-hide{
	display:none;
}



/* recommended categories */
#recommended{
	position:relative;
	display:block;
	font-size:12px;
	margin:0 0 10px;
	background:#abc;
	/* ie6,ie7 */
	/background:#f8f8ff;
	background-image:-webkit-gradient(
		linear,left top,left bottom,
		from(rgba(255,255,255,.8)),to(rgba(255,255,255,0)),
		color-stop(30%,rgba(255,255,255,.4)),
		color-stop(50%,rgba(255,255,255,.2))
	);
	background-image:-moz-linear-gradient(
		-90deg,rgba(255,255,255,.8),
		rgba(255,255,255,.4)30%,rgba(255,255,255,.2)50%,
		rgba(255,255,255,0)
	);

}
#recommended h3{
	display:block;
	height:24px;
	background:#123;
	color:#fff;
	font-size:100%;
	border:1px solid #123;
	margin:0;
	padding-top:4px;
	text-align:center;
	letter-spacing:1em;
	text-transform:uppercase;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
	text-shadow:-1px -1px 6px rgba(0,0,0,.6),-1px -1px 1px #000;
	background-image:-webkit-gradient(
		linear,left top,left bottom,
		from(rgba(255,255,255,.8)),to(rgba(255,255,255,0)),
		color-stop(30%,rgba(255,255,255,.4)),
		color-stop(50%,rgba(255,255,255,.2))
	);
	background-image:-moz-linear-gradient(
		-90deg,rgba(255,255,255,.8),
		rgba(255,255,255,.4)30%,rgba(255,255,255,.2)50%,
		rgba(255,255,255,0)
	);

}
#recommended div.float-left,
#recommended div.float-right{
	margin:0;
	padding:0;
}
#recommended div.float-left{
	width:650px;
	border-right:1px dotted #789;
}
#recommended div.float-right{
	width:347px;
}
#recommended #ctg-review{}
#recommended #ctg-tips  {border-bottom:1px dotted #789;}
#recommended #ctg-common{}

#recommended h4{
	font-size:100%;
	margin:0;
	padding:10px;
}
#recommended h5{
	clear:both;
	font-size:100%;
	margin:0 0 1.25em;
	padding:0 10px;
}
#recommended h4 a{
	display:block;
	width:100%;
	height:60px;
	color:#000;
	text-decoration:none;
}
#recommended h4 a:hover{
	background:#abc;
	background-image:-webkit-gradient(
		linear,left top,left bottom,
		from(rgba(255,255,255,.8)),to(rgba(255,255,255,0)),
		color-stop(30%,rgba(255,255,255,.4)),
		color-stop(50%,rgba(255,255,255,.2))
	);
	background-image:-moz-linear-gradient(
		-90deg,rgba(255,255,255,.8),
		rgba(255,255,255,.4)30%,rgba(255,255,255,.2)50%,
		rgba(255,255,255,0)
	);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:0 1px 5px #333;
	-moz-box-shadow:0 1px 5px #333;
	box-shadow:0 1px 5px #333;

}
#recommended h4 a img{
	width:50px;
	height:50px;
	margin:5px;
	float:left;
}
#recommended h4 a span{
	display:inline;
	/* ie6,ie7 */
	/white-space:nowrap;
	/cursor:pointer;
}
#recommended h4 a span.float-left{
	float:left;
	margin:20px 0 0;
}
#recommended h4 a span.float-right{
	font-family:"Hiragino Kaku Gothic Pro",Osaka,Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size:12px;
	font-weight:normal;
	float:right;
	margin:20px 5px 0 0;
}
#recommended h4 a span span{
	font-family:georgia;
	font-size:80%;
	font-weight:normal;
	padding:0 0 0 5px;
}

#recommended ul{
	display:block;
	margin:0 10px;
	padding:0 0 20px;
}
#recommended li{
	font-size:10px;
	border-top:1px dotted #333;
	white-space:nowrap;
	overflow:hidden;
	overflow-x:hidden; /* for WinIE6 */
}
#recommended li:last-child{
	border-bottom:1px dotted #333;
}
#recommended li a{
	display:block;
	width:100%;
	color:#000;
	line-height:1.75em;
	text-decoration:none;
}
#recommended li a:hover{
	background:#789;
	color:#fff;
	text-decoration:none;
	/*filter:alpha(opacity=60);*/
	-moz-opacity:.6;
	opacity:.6;
}

#recommended #ctg-review ul,
#recommended #ctg-review li,
#recommended #ctg-review li:last-child{
	border:none;
}
#recommended #ctg-review ul{
	display:block;
	margin:0 10px 10px;
}
#recommended #ctg-review li{
	display:inline;
	width:20%;
	float:left;
	margin:0 0 10px;
	text-align:center;
}
#recommended #ctg-review li a{
	display:block;
	padding:5px 0;
}
#recommended #ctg-review li a:hover{
	background:none;
	color:#000;
	/*filter:alpha(opacity=60);*/
	-moz-opacity:.6;
	opacity:.6;
	/text-decoration:underline;
}
#recommended #ctg-review li a img,
#recommended #ctg-review li a span,
#recommended #ctg-review li a span span{
	display:block;
	margin:0 auto;
}
#recommended #ctg-review .newmark{
	display:inline;
}
#recommended #ctg-review li a img{
	margin:0 auto 10px;
	border:1px solid #c0c0c0;
	-webkit-box-shadow:0 1px 5px #000;
	-moz-box-shadow:0 1px 5px #000;
	box-shadow:0 1px 5px #000;

}