﻿/*--------------------------------------------------------

Information

siteUrl: http://www.bs-asahi.co.jp/
fileName: import/top.css
summary: top
lastUpdate: 2008-06-18

----------------------------------------------------------
----------------------------------------------------------

Discription

1-1 base structure
1-2 list
1-3 img
1-4 link

2-1 wrapper and base container

3-1 header
3-2 contentsTop
3-3 pragramArea
3-4 pushArea
3-5 recommendArea

4-1 contentsBottom
4-2 columnRight
4-3 columnCenter
4-4 columnLeft

5-1 categoryMenu
5-2 helpMenu

6-1 footer

----------------------------------------------------------
----------------------------------------------------------

Properties

1 visual:display,list-style,position,float,clear
2 box:width,height,margin,padding,border
3 background
4 font
5 content
6 other

--------------------------------------------------------*/



/*--------------------------------------------------------

__1-1 base structure

--------------------------------------------------------*/

body {
background-color:#FFFFFF;
	background: url(../../../images/top/bg.jpg) repeat-x;
	font-family: "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, Geneva, Arial, sans-serif;
	font-size: 62.5%;
	line-height: 1.6;
	text-align: center;/*for IE6*/
	color: #333;
}

body,h1,h2,h3,h4,h5,h6,p {
	margin: 0;
	padding: 0;
}

/*--------------------------------------------------------

__1-2 list

--------------------------------------------------------*/

ul,ol,li,dl,dt,dd {
	margin: 0;
	padding: 0;
}

ul,ol {
	list-style: none;
}

/*--------------------------------------------------------

__1-3 img

--------------------------------------------------------*/

img {
	border: none;
}

/*--------------------------------------------------------

__1-4 link

--------------------------------------------------------*/

a {
	text-decoration: none;
	color: #333;
}

#footer a {
	color: #666;
}

a:hover,
#footer a:hover {
	color: #f0801a;
}




/*--------------------------------------------------------

__2-1 wrapper and base container

--------------------------------------------------------*/

#wrapper {
	position: relative;
	/*width: 1014px; 0818umino*/
	width:1022px;
	margin: 0 auto;
	/*background: url(../../../images/top/sidemenu_bg.gif) repeat-y right;*/
	text-align: left;
}

#mainContainer {
	/*width: 780px; 0818 */
	width:830px;
}

#sideContainer {
	position: absolute;
	top: 0;
	right: 0;
	width: 187px;
	
}

#sideContainer .date {
	width: 187px;
	height: 27px;
	padding-top: 18px;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
	background-color:#FFFFFF;
}

#sideContainer .banner {
	margin-bottom: 10px;
}




/*--------------------------------------------------------

__3-1 header

--------------------------------------------------------*/

#header {
	position: relative;
	width: 775px;
	height: 80px;
}

#header h1 {
	position: absolute;
	top: 10px;
}

#header .banner {
	position: absolute;
	top: 10px;
	right: 0;
}

/*--------------------------------------------------------

__3-2 contentsTop

--------------------------------------------------------*/

#contentsTop {
	position: relative;
	/*width: 810px;*/
	/*width:818px; 0818umino*/
	width:826px;
	height: 360px;
}

#contentsTop h2 {
	padding-bottom: 6px;
}

/*--------------------------------------------------------

__3-3 programArea

--------------------------------------------------------*/

#programArea {
	position: absolute;
	top: 26px;
	left: 0;
	width: 190px;
	height: 309px;
	background: url(../../../images/top/program_bg.jpg) no-repeat 0 40px;
}

body#program {
	background:#000;
}
#programArea iframe {
	margin:10px 10px 3px;
}

div#programTxt {
	margin: 0px;
	overflow: auto;
}
div#programTxt table {
	margin:0 4px 0 0;
	padding:0;
	border-collapse:collapse;
}
div#programTxt table th {
	width: 34px;
	margin:0;
	padding: 4px 0 4px 3px;
	color: #fff;
	font-weight:normal;
	vertical-align:top;
	font-size: 1em;
	background: url(../../../images/top/monitor_bg_dot.gif) repeat-x top;
}
div#programTxt table td {
	color: #fff;
	margin:0;
	text-align:left;
	font-size: 1em;
	vertical-align:top;
	padding: 4px 0 4px 5px;
	background: url(../../../images/top/monitor_bg_dot.gif) repeat-x top;
}
div#programTxt table td img {
	margin:0;
	padding:0;
}
div#programTxt table td a {
	text-decoration: none;
	color: #f5b41d;
}

div#programTxt table th.nowOnair,
div#programTxt table td.nowOnair {
	background: #f5b41d;
	color: #000;
}

div#programTxt table td.nowOnair a {
	color: #000;
}

div#programTxt table th.nonBorder,
div#programTxt table td.nonBorder {
	background: none;
}

#programArea p {
	position: absolute;
	top: 245px;
	left: 35px;
}




#searchArea {
	margin-top: 44px;
}

#searchArea form,
#searchArea fieldset {
	margin: 0;
	padding: 0;
}

#searchArea legend {
	display: none;
}

#searchArea fieldset {
	border: none;
}

#searchArea #search {
	width: 130px;
	color: #999;
}

#searchArea #btn {
	padding-left: 5px;
	vertical-align: bottom;
}

/*--------------------------------------------------------

__3-4 pushArea

--------------------------------------------------------*/

#pushArea {
	position: absolute;
	top: 26px;
	/*left: 200px;*/
	/*left: 205px;*/
	left: 200px;
	width: 315px;
	height: 309px;
}



/*--------------------------------------------------------

__3-5 recommendArea

--------------------------------------------------------*/

#recommendArea {
	position: absolute;
	top: 26px;
	right: 0;
	/*width: 240px;*/
	/*width: 277px; 0818umino*/
	width:300px;
	height: 309px;
	/*background: url(../../../images/top/recommend_bg.jpg) no-repeat 0 40px;*/
	background: url(../../../images/top/recommend_bg2.jpg) no-repeat 0 40px;
}

#recommendArea ul {
    /*width: 213px;*/
	width: 247px;
	height: 242px;
	margin: 14px 0 0 13px;
	overflow: hidden;
}

#recommendArea li {
	float: left;
	clear: both;
	/*width: 213px;*/
	width: 247px;
	height: 77px;
	margin-bottom: 9px;
	background: url(../../../images/top/monitor_bg_dot.gif) repeat-x bottom;
 }

#recommendArea li img.photo {
	display: block;
	float: left;
	margin: 0 7px 0 0;
}

#recommendArea li .title {
	display: block;
	margin: 0 0 3px 0;
	font-size: 1.1em;
	line-height: 1.2em;
	color: #f5b41d;
}
#recommendArea li span.title a {
	color: #f5b41d;
}
#recommendArea li span.title a:hover {
	color: #f0801a;
}

#recommendArea li .onair {
	display: block;
	margin: 0 0 2px 0;
	font-size: 0.9em;
	line-height: 1.4em;
	color: #fff;
}

#recommendArea li .detail {
	display: block;
	font-size: 0.9em;
	line-height: 1.2em;
	color:#fff;
}

#recommendArea .osusume {
	margin:6px 12px;
}




/*--------------------------------------------------------

__4-1 contentsBottom

--------------------------------------------------------*/

#contentsBottom {
	/*width: 820px; 0818umino*/
	width:826px;
	margin-top: 25px;
}

/*--------------------------------------------------------

__4-2 columnRight

--------------------------------------------------------*/

#columnLeft {
	float: left;
	width: 190px;
	margin-right: 10px;
}


#informationArea {
	position: relative;
	height: 420px;
	margin-bottom: 10px;
	background: #f0f0f0;
}

#informationArea .weather {
	position: absolute;
	top: 10px;
	left: 15px;
}

#informationArea .news {
	position: absolute;
	top: 105px;
	left: 15px;
}


#rankingArea {
	font-size: 1.1em;
	line-height: 1.7em;
}

#rankingArea h3 {
	margin-bottom: 6px;
}

body#ranking {
	background: #f0f0f0;
}
body#ranking p.update {
	text-align:left;
	padding: 0 9px 0;
	color: #f0801a;
}
body#ranking ol {
	padding: 0 9px 4px;
	background: #f0f0f0;
}

body#ranking li {
	text-align:left;
	font-size: 1.1em;
	line-height: 1.65em;
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: 0 0.2em;
}

body#ranking li.ranking1st {
	background-image: url(../../../images/top/ranking_icon_01.gif);
}

body#ranking li.ranking2nd {
	background-image: url(../../../images/top/ranking_icon_02.gif);
}

body#ranking li.ranking3rd {
	background-image: url(../../../images/top/ranking_icon_03.gif);
}

body#ranking li.ranking4th {
	background-image: url(../../../images/top/ranking_icon_04.gif);
}

body#ranking li.ranking5th {
	background-image: url(../../../images/top/ranking_icon_05.gif);
}


/*--------------------------------------------------------

__4-3 columnCenter

--------------------------------------------------------*/

#columnCenter {
	float: left;
	width: 315px;
	/*margin-right: 9px;*/
	margin-right:11px;
}


#topicsArea {
	margin-bottom: 5px;
	/*margin-bottom: 20px;*/
	font-size: 1.2em;
}

#topicsArea h3 {
	margin-bottom: 5px;
	/*margin-bottom: 6px;*/
}

body#topics {
	background:#fff;
}

body#topics ul {
	height: 195px;
	color: #f0801a;
	overflow: auto;
}

body#topics li {
	font-size: 1.2em;
	text-align:left;
	padding: 0 0 0 22px;
	background-repeat: no-repeat;
	background-position: 1px 0.3em;
	border-bottom:dotted 1px #999999;
}

body#topics li.arrow {
	background-image: url(../../../images/top/topics_arrow.gif);
}

body#topics li.bslogo {
	background-image: url(../../../images/top/topics_icon.gif);
}

body#topics li .date {
	color: #f0801a;
}

#lineupArea {
	margin-bottom: 5px;
}
#lineupArea h3{
	margin-bottom: 5px
	/*margin-bottom: 10px;*/
}

#lineupArea .banner img{
	margin-bottom: 5px;
}


/*--------------------------------------------------------

__4-4 columnLeft

--------------------------------------------------------*/

#columnRight {
	float: left;
	width: 300px;
}


#originalArea {
	margin-bottom: 15px;/**/
}

#originalArea h3 {
	margin-bottom: 0px;
}


#questionnaireArea {
	display: inline-block; /* for IE*/
	width: 240px;
	margin-bottom: 15px;
	font-size: 1.1em;
	line-height: 1.3em;
	overflow: auto; /* for Firefox */
}

#questionnaireArea h4 {
	margin-bottom: 6px;
	border-bottom: 3px solid #d4d4d4;
}

#questionnaireArea .image {
	display: inline;
	float: right;
	margin: 0 5px 0 10px;
}


#serviceArea {
	clear: both;
}

#serviceArea_2 img {
	margin: 0 1px 15px 1px; 
}


#serviceArea .lastContents {
	margin-bottom: 0; 
}




/*--------------------------------------------------------

__5-1 categoryMenu

--------------------------------------------------------*/

#categoryMenu {
	width: 187px;
	margin: 0 0 15px 0;
	background: url(../../../images/top/category_bg.jpg) repeat-y;
	font-size: 1em;
}

#categoryMenu img {
	vertical-align: bottom;
}

#categoryMenu #list {
	background: url(../../../images/top/category_inner_bg.jpg) repeat-y;
	font-size: 1.1em;
}

#categoryMenu #list ul {
	min-height: 90px;
	
	/*for IE6*/
	height: auto !important;
	height: 90px;
	
	padding: 0 20px 14px 20px;
	background: url(../../../images/top/category_inner_end.jpg) no-repeat bottom;
}

#categoryMenu #list ul li {
	padding-left: 7px;
	background: url(../../../images/top/category_arrow_05.jpg) no-repeat 0 6px;
}


#categoryMenu #category {
	padding: 0 0 7px 10px;
	background: url(../../../images/top/category_bottom.jpg) no-repeat bottom;
}

#categoryMenu #category li {
	margin-bottom: 3px;
}

/*--------------------------------------------------------

__5-2 helpMenu

--------------------------------------------------------*/

#helpMenu {
	padding: 12px;
	background: #f0f0f0;
	font-size: 1.1em;
	line-height: 1.2em;
}

#helpMenu h4 {
	margin-bottom: 3px;
}

#helpMenu p {
	padding-top: 5px;
	margin-bottom: 15px;
	background: url(../../../images/top/help_bg_dot.gif) repeat-x top;
}

#helpMenu p .qrCode {
	display: block;
	margin-top: 10px;
	text-align: center;
}




/*--------------------------------------------------------

__6-1 footer

--------------------------------------------------------*/

#footer {
	position: relative;
	clear: both;
	padding: 5px 0 12px;
	background: #FFFFFF url(../../../images/top/footer_line.gif) repeat-x 0 5px;
	font-size: 1.1em;
	
	/*テキストリンク追加前
	padding: 20px 0 12px;
	background: #FFFFFF url(../../../images/top/footer_line.gif) repeat-x 0 20px;
	*/
	
}

#footer .banner {
	position: absolute;
	top: 21px;
	left: 15px;
	bottom: 3014704px;
	width: 600px;
	/*テキストリンク追加前
	top: 36px;
	*/
	
}

/*add*/
#footer p.fpp{
	position: absolute;
	top: 39px;
	right:0;
	/*テキストリンク追加前
	top: 54px;
	*/
	
}
/**/

#footer .banner img {
	float: left;
	margin-right: 14px;
}

#footer ul {
	padding-top: 63px;
}

#footer ul li {
	display: inline;
	padding: 0 5px;
	border-left: 1px solid #ccc;
}

#footer ul li.nonBorder {
	padding-left: 0px;
	border-left: none;
}

#footer .copyright {
	position: absolute;
	top: 91px;
	right: 0px;
}

html {
scrollbar-base-color:#454545;
scrollbar-face-color:#454545;
scrollbar-high-light-color:#454545;
}
	/*
	３月１３日テキストリンクの為に追加
	09年３月１３日修正　佐々木
	*/
	
#textlink{
	position: relative;
	clear: both;
	margin:0 auto;
	padding:12px 0 5px;
	text-align:center;
	height:36px;
	font-size:12px;
	
}

#textlink2{
	position: relative;
	clear: both;
	margin:0 auto;
	padding:15px 0 7px;
	text-align:center;
	height:15px;
	font-size:12px;
	
}
