@charset "utf-8";

/* override styles */
body {
color:#555;
}
a {
color:#0179C5;
}
#gnav {
position:relative;
margin-bottom:-5px;
}
#gnav ul {
background-image:url(../img/gnav_bg_01.png);
}
* html body #gnav ul {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/gnav_bg_01.png", sizingMethod="scale");
}
#content {
padding-bottom:35px;
}



/* main image */
#main_image {
height:443px;
margin-bottom:32px;
padding:13px 0;
background:url(../img/index_bg_01.png);
text-align:center;
}
#flash {
width:970px;
height:302;
margin:0 auto;
}
#flash p {
padding-top:100px;
font-size:1.2em;
text-align:center;
}

/* 20110311 for IE */
#main_image .message span {
position:absolute;
top:0;
left:0;
display:none;
width:980px;
height:119px;
margin:0 auto;
z-index:10;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/20110311.png", sizingMethod="crop");
}



/* aside */
#content .aside {
width:200px;
}
#content .aside h2 {
margin-bottom:15px;
padding-bottom:9px;
background:url(../img/index_bg_03.png) left bottom no-repeat;
}
#extra {
float:left;
margin-right:30px;
}
#news {
float:right;
}

/* cm (extra) */
#extra .cm {
margin-bottom:26px;
}
#extra .cm h2 {
overflow:hidden;
height:100%;
}
#extra .cm h2 img {
float:left;
}
#extra .cm h2 .link {
float:right;
padding-left:10px;
background:url(../img/index_bg_02.png) left center no-repeat;
line-height:1.2;
}
#extra .cm .image {
height:112px;
margin-bottom:9px;
}
#swf p {
text-align:center;
}
#extra .cm h3,
#extra .cm p {
margin:0 3px;
}
#extra .cm h3 {
margin-bottom:7px;
font-size:1.2em;
line-height:1.2;
}
#extra .cm p {
line-height:1.3;
}

/* recommend (extra) */
#extra .recommend ul li{
margin-bottom:7px;
}
#extra .recommend ul img {
vertical-align:bottom;
}



/* recipe */
#recipe {
float:left;
width:510px;
margin-top:-14px;
}
#recipe h2 {
position:relative;
overflow:hidden;
height:100%;
margin-bottom:15px;
padding-bottom:6px;
border-bottom:2px solid #DAA874;
}
#recipe h2 img {
float:left;
}
#recipe h2 .link {
float:right;
margin-top:10px;
padding-left:10px;
background:url(../img/index_bg_02.png) left center no-repeat;
}

/* recommend (recipe) */
#recipe .recommend {
margin-bottom:11px;
padding-bottom:10px;
border-bottom:1px solid #E9C597;
}
#recipe .recommend_inner {
overflow:hidden;
height:100%;
padding-bottom:4px;
background:url(../img/index_bg_04.png) 420px 0 repeat-y;
}

/* weekly recipe (recipe recommend) */
#recipe .recommend .weekly {
float:left;
width:415px;
}
#recipe .recommend .weekly .image {
float:left;
margin-right:15px;
}
#recipe .recommend .weekly .details {
overflow:hidden;
height:100%;
}
#recipe .recommend .weekly .details h3 {
margin-bottom:5px;
}
#recipe .recommend .weekly .details h4,
#recipe .recommend .weekly .details p {
margin-left:5px;
line-height:1.3;
}
#recipe .recommend .weekly .details h4 {
margin-bottom:7px;
font-size:1.2em;
}
#recipe .recommend .weekly .details h4 span {
padding-left:17px;
color:#777;
font-size:0.833em;
font-weight:normal;
line-height:2.02;
}
#recipe .recommend .weekly .details .using {
margin-top:16px;
line-height:1.51;
}

/* mobile site (recipe recommend) */
#recipe .recommend .mobile {
float:right;
width:74px;
}
#recipe .recommend .mobile h3 {
margin-bottom:5px;
}
#recipe .recommend .mobile p {
line-height:1.3;
}

/* nav (recipe) */
#recipe .nav {
overflow:hidden;
height:100%;
padding-top:2px;
background:url(../img/index_bg_04.png) 255px 0 repeat-y;
}

/* ranking (recipe nav) */
#recipe .nav .ranking {
float:left;
width:245px;
}
#recipe .nav .ranking h3 {
float:left;
margin-bottom:15px;
}
#recipe .nav .ranking .period {
float:right;
margin:3px 0 15px;
color:#777;
}
#recipe .nav .ranking ol {
clear:both;
font-size:1.2em;
line-height:1.3;
}
#recipe .nav .ranking li {
position:relative;
overflow:hidden;
height:100%;
margin-bottom:8px;
}
#recipe .nav .ranking ol .order {
position:absolute;
top:0;
left:0;
}
#recipe .nav .ranking ol .image {
float:left;
margin-right:12px;
}
#recipe .nav .ranking ol p {
overflow:hidden;
height:100%;
}

/* calendar (recipe nav) */
#recipe .nav .calendar {
float:right;
width:235px;
}
#recipe .nav .calendar h3 {
margin-bottom:10px;
}
#recipe .nav .calendar ul {
margin:0 2px;
}
#recipe .nav .calendar li {
overflow:hidden;
height:100%;
margin-bottom:8px;
}
#recipe .nav .calendar ul .image {
float:left;
}
#recipe .nav .calendar ul h4,
#recipe .nav .calendar ul p {
margin-left:90px;
}
#recipe .nav .calendar ul h4 {
margin-bottom:3px;
font-size:1.2em;
line-height:1.3;
}
#recipe .nav .calendar ul p {
line-height:1.2;
}



/* latest (news) */
#news .latest {
margin-bottom:25px;
}
#news .latest h2 {
overflow:hidden;
height:100%;
}
#news .latest h2 img {
float:left;
}
#news .latest h2 a {
float:right;
}
#news .latest h3 {
color:#777;
font-weight:normal;
line-height:1.3;
}
#news .latest h3 img {
margin-right:5px;
vertical-align:middle;
}
#news .latest h3 span {
padding-left:5px;
}
#news .latest .important {
margin-bottom:10px;
padding:6px 7px 5px;
border:1px solid #FFC200;
background-color:#ffc;
}
#news .latest .important h3 {
margin-bottom:4px;
}
#news .latest .important p {
line-height:1.2;
}
#news .latest ul {
overflow:scroll;
overflow-x:hidden;
height:161px;
}
#news .latest li {
margin-bottom:13px;
}
#news .latest ul h3 {
margin-bottom:2px;
}
#news .latest ul p {
margin:0 2px;
}

/* pickup (news) */
#news .pickup ul {
margin:0 2px;
font-size:1.3em;
line-height:1.3;
}
#news .pickup li {
height:100%;
margin-bottom:4px;
padding-left:10px;
background:url(../img/index_bg_02.png) 0 0.3em no-repeat;
}



/* banner */
#banner {
clear:both;
position:relative;
width:942px;
margin:0 auto 40px;
padding:4px 14px;
background:url(../img/index_bg_05.png) repeat-x;
}
#banner .prev,
#banner .next {
position:absolute;
top:0;
cursor:pointer;
}
#banner .prev {
left:0;
}
#banner .next {
right:0;
}
#banner .list {
width:942px !important;
}
#banner .list ul {
overflow:hidden;
height:100%;
}
#banner .list li {
float:left;
margin-right:7px;
}
#banner .list ul img {
vertical-align:bottom;
}



/* jScrollPane styles */
.jScrollPaneContainer {
position:relative;
overflow:hidden;
z-index:1;
}
.jScrollPaneTrack {
cursor:pointer;
position:absolute;
right:0;
top:0;
height:100%;
background:#E1E1E1;
}
.jScrollPaneDrag {
cursor:pointer;
position:absolute;
overflow:hidden;
background:#B3A4A5;
}