@charset "utf-8";

/* ===== import basic style ===== */
@import "base.css";
@import "common.css";
@import "navi.css";
@import "font.css";

/* enhance setting */
@import "local.css";



/* ===== category style ===== */
.area_main {float: none; padding: 0px 0px 20px; width: auto; zoom: 1;}
.area_main:after {
	content: ".";
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
}/* for modern browser */
.area_sub {padding: 0px 0px 16px; zoom: 1;}
.area_sub:after {
	content: ".";
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
}/* for modern browser */



/* ----- lead area ----- */
.lead {margin-bottom: 21px;}
.lead p {margin: 0;}



/* ----- week's main race ----- */
.area_main #week {float: left; width: 345px; min-height: 200px; background: url(../img/index/week_bg.gif) left bottom no-repeat;}
	* html .area_main #week {height: 200px;}
.area_main #week h2 {
	height: 32px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(../img/index/week_head.png) left top no-repeat;
}

.area_main #week ul {margin: -1px 5px 0px;}
.area_main #week ul li {/margin-bottom: -2px; padding: 12px 0px 5px; border-top: 1px solid #2C5F01; line-height: 1.1; zoom: 1;}
.area_main #week ul li:after {
	content: ".";
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
}/* for modern browser */

.area_main #week ul li span a {
	display: block;
	float: left;
	width: 117px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	zoom: 1;
}

.area_main #week ul li dl {float: left; width: 218px;}
.area_main #week ul li dl dt {margin: 0px 0px 0px 8px; height: 1.2em;}
.area_main #week ul li dl dd {margin: -1.2em 0px 8px 38px;}

.area_main #week dl dd ul {margin: 0;}
.area_main #week dl dd ul li {margin: 0px 0px 3px; padding: 0px 0px 0px 37px; border-top: 0;}
.area_main #week dl dd ul li span {
	display: inline-block;
	margin: 0px 5px 0px -37px;
	width: 32px;
	text-align: right;
	zoom: 1;
}



/* ----- useful sites ----- */
.area_main #useful {
	float: right;
	width: 595px;
	height: 200px;
	background: url(../img/index/useful_bg.gif) left top no-repeat;
	zoom: 1;
}
.area_main #useful h2 {
	height: 34px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(../img/index/useful_head.gif) 11px 10px no-repeat;
}

.area_main #useful ul {
	float: left;
	width: 185px;
}
.area_main #useful ul li {margin: 0px 2px 3px 10px;}

.area_main #useful ul li a {
	display: block;
	padding-left: 11px;
	height: 29px;
	color: #333333;
	font-size: 12px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
	line-height: 29px;
	text-decoration: none;
	background: url(../img/index/useful_tab.gif) left top no-repeat;
}
.area_main #useful ul li a:active,
.area_main #useful ul li a:hover,
.area_main #useful ul li.ui-tabs-selected a {color: #FFFFFF; background-position: left bottom;}

/* panel */
.area_main #useful div {float: left; border: 3px solid #95AF80; width: 394px; height: 151px; background-color: #FFFFFF;}
	* html .area_main #useful div {width: 400px; height: 157px;}

.area_main #useful div p {display: none; margin: -3px; position: relative; zoom: 1;}
	.area_main #useful div p.ui-tabs-panel {display: block;}
	.area_main #useful div p.ui-tabs-hide {display: none;}

.area_main #useful div p a {}
.area_main #useful div p a img {width: 394px; height: 151px; border: 3px solid #2C6001; filter: none;}

.area_main #useful p.banner {margin: 0; padding: 10px 0px 0px; text-align: center;}/* 2009113～ヤフカテ用 */



/* ----- hot entry and result ----- */
.area_main #hot {clear: both; padding: 20px 0px 0px; background: url(../img/index/hot_bg.gif) left bottom no-repeat; zoom: 1;}
.area_main #hot:after {
	content: ".";
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
}/* for modern browser */

.area_main #hot h2 {text-indent: -10000px; overflow: hidden;}
.area_main #hot p {margin: 0;}

/* rase date */
.area_main #hot p.date {
	margin: -36px 0px 0px;
	position: absolute;
	width: 54px;
	font-size: 11px;
	line-height: 11px;
	text-align: center;
}
.area_main #hot p.date a {display: block; height: 30px; color: #333333; text-decoration: none;}
.area_main #hot p.date a span {
	display: block;
	font-size: 13px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 18px;
	text-indent: -3px;
}

/* list table */
.area_main #hot table {width: 470px; border-collapse: collapse; font-size: 13px;}
.area_main #hot table th {display: none;}
.area_main #hot table td {padding: 5px 0px 0px; line-height: 25px; white-space: nowrap;}
	.area_main #hot table td.name {font-size: 15px;}
	.area_main #hot table td.name a {
		display: -moz-inline-box;
		display: inline-block;
		padding: 0px 5px 0px 31px;
		background: left center no-repeat;
		zoom: 1;
	}
		.area_main #hot table .grade td.name a {background-image: url(../img/icon/class_hot.gif);}
		.area_main #hot table .grade1 td.name a {background-image: url(../img/icon/class_g1.gif);}
		.area_main #hot table .grade2 td.name a {background-image: url(../img/icon/class_g2.gif);}
		.area_main #hot table .grade3 td.name a {background-image: url(../img/icon/class_g3.gif);}
	.area_main #hot table td.place {width: 30px;}
	.area_main #hot table td.round {width: 34px; text-align: center;}
	.area_main #hot table td.course {text-align: center;}
	.area_main #hot table td.grade {width: 62px;}
	.area_main #hot table td.count {width: 41px;}
		.area_main #hot table td.count a {
			display: -moz-inline-box;
			display: inline-block;
			padding-left: 17px;
			background: url(../img/icon/count.gif) 0px 5px no-repeat;
			zoom: 1;
		}


/* --- entry set --- */
.area_main #hot .entry {float: left; width: 630px;}
.area_main #hot .entry h2 {
	clear: both;
	margin: 0;
	height: 45px;
	background: url(../img/index/hot_head_next.gif) left bottom no-repeat;
}
.area_main #hot .entry p.thum {float: left; width: 160px;}

/* now list */
.area_main #hot .entry div {float: left; width: 470px;}
.area_main #hot .entry div h2 {height: 61px; background: url(../img/index/hot_head_now.gif) left top no-repeat;}
.area_main #hot .entry div p.date {
	margin-top: -61px;
	width: 57px;
	font-size: 20px;
	font-weight: bold;
	line-height: 27px;
}
.area_main #hot .entry div p.date a {height: 55px; color: #333333;}
	.area_main #hot .entry div p.sat a {color: #0066CC;}
	.area_main #hot .entry div p.sun a {color: #CC0003;}
.area_main #hot .entry div p.date a span {
	font-size: 18px;
	color: #FFFFFF;
	font-weight: normal;
	line-height: 27px;
}

.area_main #hot .entry div table td.name {font-weight: bold;}


/* --- result set --- */
.area_main #hot .result {
	float: right;
	padding: 5px 0px;
	border: 1px solid #CCCCCC;
	border-width: 1px 0px;
	width: 310px;
	background: url(../img/index/hot_result_bg.gif) repeat-y;
}
.area_main #hot .result h2 {margin: 0px 6px; height: 36px; background: url(../img/index/past_head.gif) left top no-repeat;}
.area_main #hot .result p.date {margin: -36px 0px 0px 6px;}
	* html .area_main #hot .result p.date {margin-left: 0;}
	*:first-child+html .area_main #hot .result p.date {margin-left: 0;}
.area_main #hot .result p.date a {color: #FFFFFF;}

/* list table */
.area_main #hot .result table {margin: 0px 6px; width: 298px;}
.area_main #hot .result table td {padding: 3px 0px 2px;}
	.area_main #hot .result table td.name {width: 190px; font-size: 13px; font-weight: normal;}
	.area_main #hot .result table td.place {width: 32px;}
	.area_main #hot .result table td.round {width: 27px;}
	.area_main #hot .result table td.count {width: 49px; text-align: left;}
		.area_main #hot .result table td.count a {margin: 0px 0px 0px 9px;}

/* hit site */
.area_main #hot .result div {
	margin: 3px 6px 0px;
	padding: 5px 5px 0px;
	font-size: 12px;
	background: url(../img/index/past_bg.gif) left top no-repeat;
}
.area_main #hot .result div h3 {margin: 0px 0px 5px;}
.area_main #hot .result div h3 a {
	display: block;
	height: 55px;
	text-decoration: none;
	text-indent: -10000px;
	overflow: hidden;
	background: url(../img/index/hot_site.jpg) left top no-repeat;
}

.area_main #hot .result div dl {
	margin: 0px 0px 5px;
	height: 31px;
	font-size: 13px;
	font-weight: bold;
	line-height: 31px;
	background: url(../img/index/past_hitsite.gif) left top no-repeat;
}
.area_main #hot .result div dl dt {display: none;}
.area_main #hot .result div dl dd {}
	.area_main #hot .result div dl dd a {display: block; padding: 0px 0px 0px 82px; zoom: 1;}

.area_main #hot .result div table {margin: 0; width: 288px; font-size: 12px;}
.area_main #hot .result div table td {padding: 3px 0px; line-height: 14px;}
	.area_main #hot .result div table td.date {
		width: 48px;
		text-indent: 12px;
		background: url(../img/icon/arrow_r.gif) left center no-repeat;
	}
	.area_main #hot .result div table td.place {width: 28px;}
	.area_main #hot .result div table td.round {width: 38px;}
	.area_main #hot .result div table td.name {width: auto; font-size: 12px;}
	.area_main #hot .result div table td.price {text-align: right;}

.area_main #hot .result div p.more {
	margin: 0px -5px;
	padding: 0px 3px 5px;
	color: #999999;
	line-height: 1.2;
	text-align: right;
	background: url(../img/index/past_bg_foot.gif) left bottom no-repeat;
}
.area_main #hot .result div p.more span {
	margin: 0px 2px;
	font-size: 15px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.area_main #hot .result div p.more a {margin-left: 10px;}

.area_main #hot .result div p.banner {/* 20091130～ヤフカテ用 */
	padding: 0px 0px 5px;
	color: #999999;
	line-height: 1.2;
	text-align: center;
	background: url(../img/index/past_bg_foot.gif) left bottom no-repeat;
}



/* ----- bookmark list(new) ----- */
.area_sub #booklist {float: left; margin: 0px 10px 0px 0px; width: 630px; font-size: 13px;}
.area_sub #booklist h2 {
	margin: 0px 0px 5px;
	height: 30px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(../img/index/booklist_head.gif) left top no-repeat;
}
.area_sub #booklist p.image {margin: 0px 0px 5px;}
.area_sub #booklist p.more {margin: 0px 2px 10px 0px; text-align: right;}
.area_sub #booklist p.all {margin: 18px 2px 0px 0px; text-align: right;}

/* each category bar */
.area_sub #booklist h3 {
	margin: 0px 0px 7px;
	height: 25px;
	text-indent: -10000px;
	overflow: hidden;
	background: left top no-repeat;
}
	.area_sub #booklist h3.cat1 {background-image: url(../img/index/book_bar_column.gif);}
	.area_sub #booklist h3.cat2 {background-image: url(../img/index/book_bar_news.gif);}
	.area_sub #booklist h3.cat3 {background-image: url(../img/index/book_bar_recall.gif);}
	.area_sub #booklist h3.cat4 {background-image: url(../img/index/book_bar_view.gif);}
	.area_sub #booklist h3.cat7 {background-image: url(../img/index/book_bar_etc.gif);}


.area_sub #booklist ul {margin: 0px 4px; line-height: 1.3;}
.area_sub #booklist ul li {margin: 0px 0px 3px; padding: 2px 0px 0px 19px; position: relative;}
	.area_sub #booklist ul li.new {margin-right: 20px;}
.area_sub #booklist ul li a {}
.area_sub #booklist ul li img {margin: 3px 0px 0px 5px; /margin-top: 2px; position: absolute;}
.area_sub #booklist ul li img.favicon {margin: 0; left: 0px; top: 2px;}
	* html .area_sub #booklist ul li img.favicon {left: -19px; top: 0px;}



/* ----- JRA RSS feed ----- */
.area_sub #jra {
	float: left;
	margin: 0px 10px 0px 0px;
	padding: 0px 0px 1px;
	width: 310px;
	/* min-height: 450px; */
	min-height: 300px;
	background: url(../img/index/list_jra_bg.gif) left bottom no-repeat;
}
	* html .area_sub #jra {/* height: 450px; */ height: 300px;}
.area_sub #jra h2 {
	height: 40px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(../img/index/list_jra_head.gif) left top no-repeat;
}
.area_sub #jra p.image {margin: 0px 5px 14px;}

.area_sub #jra ul {margin: 0px 5px 0px 8px; font-size: 13px; line-height: 1.2;}
.area_sub #jra ul li {margin: 0px 0px 10px; color: #2C6001; font-weight: bold; letter-spacing: -1px;}

.area_sub #jra ul li a {margin-left: 7px; font-weight: normal; letter-spacing: 0px;}



/* ----- bookmark list ----- */
.area_sub #book {
	float: left;
	margin: 0px 10px 0px 0px;
	padding: 0px 0px 1px;
	width: 310px;
	/* min-height: 450px; */
	min-height: 300px;
	background: url(../img/index/list_book_bg.gif) left bottom no-repeat;
}
	* html .area_sub #book {/* height: 450px; */ height: 300px;}
.area_sub #book h2 {
	height: 40px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(../img/index/list_book_head.gif) left top no-repeat;
}
.area_sub #book p.image {margin: 0px 5px 13px;}

.area_sub #book ul {margin: 0px 5px; font-size: 13px; line-height: 1.2;}
.area_sub #book ul li {margin: 0px 0px 9px; padding-top: 1px;}

.area_sub #book ul li a {}

/* category ribbon */
.area_sub #book ul li em a {
	display: block;
	float: left;
	margin: -1px 9px 0px 0px;
	width: 38px;
	height: 18px;
	text-indent: -10000px;
	overflow: hidden;
	background: left top no-repeat;
	zoom: 1;
}
* html .area_sub #book ul li em a {margin-right: 6px;}
	.area_sub #book ul li.cat1 em a {background-image: url(../img/icon/r_column.gif);}
	.area_sub #book ul li.cat2 em a {background-image: url(../img/icon/r_news.gif);}
	.area_sub #book ul li.cat3 em a {background-image: url(../img/icon/r_recall.gif);}
	.area_sub #book ul li.cat4 em a {background-image: url(../img/icon/r_view.gif);}
	.area_sub #book ul li.cat5 em a {background-image: url(../img/icon/r_expect.gif);}



/* ----- reverse access ----- */
.area_sub #reverse {float: left; width: 310px;}
.area_sub #reverse h3 {
	margin: 0px 0px 12px;
	height: 32px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(../img/index/recomsite_head.gif) left top no-repeat;
}

.area_sub #reverse p {margin: 0; font-size: 13px;}

.area_sub #reverse p.pr {margin: 0px 6px 6px; /margin-bottom: 10px; font-size: 13px;}
.area_sub #reverse p.pr a {
	display: inline-block;
	padding-left: 43px;
	background: url(../img/icon/ribbon_pr_s.gif) left center no-repeat;
}

.area_sub #reverse p.join {margin: 0px 0px 8px; text-align: center;}
.area_sub #reverse p.join a img {margin: 0px auto; vertical-align: middle;}

.area_sub #reverse p.more {text-align: right;}

.area_sub #reverse p.tweet {margin: 15px 0px 5px; text-align: center;}
.area_sub #reverse p a img {margin: 0px auto; vertical-align: middle;}

.area_sub #reverse p.followme {text-align: right;}

/* ranking list */
.area_sub #reverse ol {margin: 0px 6px 12px;}
.area_sub #reverse ol li {margin: 0px 0px 5px; list-style: none;}
	* html .area_sub #reverse ol li {margin-bottom: 10px;}
.area_sub #reverse ol li span {
	display: -moz-inline-box;
	display: inline-block;
	margin-right: 8px;
	width: 35px;
	height: 15px;
	line-height: 1;
	text-align: center;
	vertical-align: -1px;
	/vertical-align: baseline;
	zoom: 1;
}
.area_sub #reverse ol li a {font-size: 13px;}