@charset "utf-8";
@import "common.css";
@import "movie.css";

/*----
base
----*/

a:link { text-decoration:none;color:#006699;}
a:visited { text-decoration:none;color:#006699;}
a:hover { text-decoration:underline;color:#CC6600;}
a:active { text-decoration:underline;color:#CC6600;}
.last{ margin:0px;}

ol {padding-left:1.7em;}
ol li{list-style: decimal outside; margin-bottom:15px;}

body{
	text-align:center;
	behavior:url("http://www.how-to.tv/themes/main/csshover.htc"); 
}

/*----
top
----*/

#top{
	width:950px;
	text-align:left;
	margin:10px auto 0px;
}

#top .logo{
	width:225px;
	float:left;
}

.top_left{
	width:710px;
	float:right;
}

.info{
}

.info .left{
	width:500px;
	float:left;
	line-height:20px;
	font-weight:normal;
	font-size:92%;
	height:20px;
}

.info .right{
	width:200px;
	float:right;
	text-align:right;
	height:20px;
}

.info .right li{
	float:right;
	padding:0 5px;
	line-height:20px;
	height:20px;
}
.info .right li.help{
	padding-right:0;
}
.info a:link{color:#669900;}
.info a:visited{color:#669900;}
.info a:hover{color:#669900;}
.info a:active{color:#669900;}

.navi{
	background:url(../images/bg_navi.jpg) no-repeat #63B1D8;
	padding:0 10px;
}

.navi .left{
	width:470px;
	float:left;
	height:30px;
}
.navi .left li{
	float:left;
	margin-right:20px;
}

.navi .left li.cat a.mark{ background:url(../images/mark03.gif) no-repeat right center; padding-right:10px;}

.navi a{
	font-weight:bold;
	line-height:30px;
}
.navi a:link{color:#fff;}
.navi a:visited{color:#fff;}
.navi a:hover{color:#F4F3B5; text-decoration:none;}
.navi a:active{color:#F4F3B5; text-decoration:none;}

.navi .right{
	margin-top:5px;
	width:200px;
	float:right;
}

.navi .right .hidden{
	display:none;
}
.navi .right .txt{
	display:block;
	float:left;
	width:150px;
	height:16px;
	_width:154px;
	_height:20px;
	border:none;
	padding:0px;
	background:#fff;
	padding:2px;
}

.navi .right .sub_btn{
	display:block;
	float:right;
	width:40px;
	height:20px;
	border:none;
	padding:0;
	text-indent:-9999px;
	background:url(../images/btn_search.gif) no-repeat;
}


/*ドロップメニュー*/

li.account{
	background:url(../images/mark02.gif) no-repeat 3px center;
	padding-left:13px !important;
}

li.account:hover{ /*マウスが乗ったら*/
	background:url(../images/mark02_on.gif) no-repeat 3px center #000;
	padding-left:13px !important;
	position: relative;
	top: 0px;
	left: 0px;
}

li.account:hover a{text-decoration:none;}
li.account:hover a.name:link{color:#fff;}
li.account:hover a.name:visited{color:#fff;}
li.account:hover a.name:hover{color:#669900;}
li.account:hover a.name:active{color:#669900;}

li.account:hover .accountarea{
	display: block; /*ブロック要素で表示*/
}


.accountarea { 
	position: absolute;
	top:20px;
	left:0;
	display: none;
	background-color:#000;
	width:8.5em;
		
	filter: alpha(opacity=80); /* IE */
	-moz-opacity:0.8; /* Firefox・Netscape */
	opacity:0.8; /* Opera・Safari */
}

.accountarea a{
	color:#fff;
	font-weight:normal !important;
	display:block;
	padding: 5px 7px;
	line-height:1em;
	color:#fff;
	text-decoration:none;
	text-align:left;
}

.accountarea a:link{color:#fff;}
.accountarea a:visited{color:#fff;}
.accountarea a:hover{color:#669900;}
.accountarea a:active{color:#669900;}


li.cat:hover{ /*マウスが乗ったら*/
	position: relative;
	top: 0px; left: 0px;
}

li.cat:hover .droparea{
	display: block; /*ブロック要素で表示*/
}

li.cat:hover a{
	color:#F4F3B5;
}

.droparea { 
	position: absolute;
	top:30px;
	left:0;
	display: none;
	background-color:#0080C0;
		
	filter: alpha(opacity=80); /* IE */
	-moz-opacity:0.8; /* Firefox・Netscape */
	opacity:0.8; /* Opera・Safari */
	z-index:1;
}

.droparea td{ white-space:nowrap; padding:0;}
.droparea td a,
li.cat:hover .droparea td a{
	color:#fff;
	font-weight:normal !important;
	display:block;
	padding: 5px;
	line-height:1em;
	color:#fff;
}

.droparea td a:hover{background:#003366;display:block; color:#fff;}

/*----
contents
----*/

#contents{
	width:950px;
	margin:15px auto;
	text-align:left;
}

/*col2*/
.col2 .main_col{
	width:635px;
	float:left;
}

.col2 .right_col{
	width:300px;
	float:right;
}

/*col_account*/

.col_account .main_col{
	width:735px;
	float:right;
}

.col_account .left_col{
	width:190px;
}


/*col3*/

.col3 .main_wrap{
	width:765px;
	float:right;
}

.col3 .left_col{
	width:170px;
}

.col3 .main_col{
	width:450px;
	float:left;
}

.col3 .right_col{
	width:300px;
	float:right;
}


/*----
left_col
----*/

/*アカウントブロック*/

h3.ttl_account{
	font-weight:bold;
	border:1px solid #aaa;
	border-bottom:none;
	background:#f3f3f3;
	padding:3px 5px;
}

.side_account{
	padding:5px;
	border:1px solid #aaa;
	margin-bottom:15px;
}

.side_account a{
	background:url(../images/mark07.gif) no-repeat left center;
	padding-left:10px;
	margin-bottom:10px;
	display:block;
}

.side_account a.last{ margin-bottom:0;}


.side_account a:link{ text-decoration:none;}
.side_account a:visited{ text-decoration:none;}
.side_account a:hover{ text-decoration:none; background:url(../images/mark04.gif) no-repeat left center;}
.side_account a:active{ text-decoration:none; background:url(../images/mark04.gif) no-repeat left center;}

.side_account ul.sub{ margin:3px 0 10px; padding-left:10px;}
.side_account ul.sub li{ margin-bottom:3px; }
.side_account ul.sub a:link{ background:none;padding:0; display:inline;}
.side_account ul.sub a:visited{ background:none;padding:0; display:inline;}
.side_account ul.sub a:hover{ background:none; padding:0; display:inline;}
.side_account ul.sub a:active{ background:none; padding:0; display:inline;}



/*----
right_col
----*/

.total{
	padding:3px;
	border:1px solid #aaa;
	margin-bottom:10px;
}

.total p{
	padding:3px 5px;
	background:#F5EDC5;
	border:1px solid #D9BD4D;
	font-weight:bold;
}

.total strong.num{
	font-size:122%;
	color:#CC0000;
}

.right_col h3.ttl_side{
	background:url(../images/bg_ttl_side.jpg) no-repeat #cecece;
	line-height:25px;
	padding:0 10px;
}

.right_col .side_block{
	border:1px solid #aaa;
	padding:5px 10px;
	margin-bottom:15px;
}


/*----
footer
----*/

#footer{
	width:950px;
	margin:0 auto;
	text-align:left;
	padding:1px 0 7px 0;
	border-top:1px solid #000;
}

#footer .left{
	width:800px;
	float:left;
}
#footer .right{
	width:140px;
	text-align:right;
	float:right;
}

/*フッターリンク*/

.footer_link1{
	background:#000;
	padding:5px;
	margin-bottom:5px;
}
.footer_link1 ul{
	width:800px;
	float:left;
}

.footer_link1 li{
	display:inline;
	color:#fff;
}

.footer_link1 a:link{color:#fff;}
.footer_link1 a:visited{color:#fff;}
.footer_link1 a:hover{text-decoration:none; color:#66CCFF;}
.footer_link1 a:active{text-decoration:none; color:#66CCFF;}


.footer_link1 .pagetop{
	width:72px;
	float:right;
}

.footer_link1 .pagetop a{
}



.copy span{
	font-size:85%;
	color:#666666;
}

.img_ad {
	width:468px;
	float:left;
}

.copy {
	width:470px;
	float:right;
	text-align:right;
}


/*----
各ブロック
----*/



/*トップページ新着ブロック*/


h2.ttl_sintyaku{
	font-weight:bold;
	background:url(../images/bg_ttl.gif) repeat-x bottom;
	padding-bottom:5px;
	margin-bottom:10px;
}

h2.ttl_sintyaku span{
	font-size:114%;
	background:url(../images/icon_star.gif) no-repeat left center;
	padding-left:18px;
}





/*トップページのサムネイル表示*/

.sintyaku_block .video_box{
	width:119px;
	margin-right:10px;
	float:left;
}

.sintyaku_block .last{
	margin-right:0px;
}

.sintyaku_block .thumb{
	margin-bottom:5px;
}

.sintyaku_block .thumb a{
	border:1px solid #3F6096;
	padding:1px;
	display:block;
	width:115px;
}
.sintyaku_block .thumb img{
	width:115px;
	height:86px;
}

.sintyaku_block .video_info .ttl{
	line-height:1.2em;
	margin-bottom:3px;
}

.ico_youtube{background:url(../../../images/icons/youtube.gif) no-repeat left center; padding-left:20px;}
.ico_nicovideo{background:url(../../../images/icons/nicovideo.gif) no-repeat left center; padding-left:20px;}
.ico_dailymotion{background:url(../../../images/icons/dailymotion.gif) no-repeat left center; padding-left:20px;}
.ico_myspace{background:url(../../../images/icons/myspace.gif) no-repeat left center; padding-left:20px;}
.ico_ameba{background:url(../../../images/icons/ameba.gif) no-repeat left center; padding-left:20px;}
.ico_ustream{background:url(../../../images/icons/ustream.gif) no-repeat left center; padding-left:20px;}


/*トップページジャンルブロック*/

h2.ttl_cat{
	font-weight:bold;
	background:url(../images/bg_ttl.gif) repeat-x bottom;
	padding-bottom:5px;
	margin-bottom:10px;
}

h2.ttl_cat span{
	font-size:114%;
	background:url(../images/icon_tv.gif) no-repeat left center;
	padding-left:18px;
}

.cat_block ul{
	margin-bottom:10px;
}

.cat_block li{
	width:205px;
	float:left;
}

.cat_block li a{
	background:url(../images/mark01.gif) no-repeat left center;
	padding-left:15px;
}

.cat_block li.list1{margin-right:7px;}
.cat_block li.list2{margin-right:7px;}


/*タグクラウド*/
.tag_block a{
	line-height:1em;
}


/*おすすめブロック*/
.no19{
	height:320px;
	overflow:auto;
}

.osusume_box{
	margin-bottom:5px;
}

.osusume_box .left{
	width:80px;
	float:left;
}
.osusume_box .right{
	width:175px;
	float:right;
}
.com_duration{
	background:url(../images/time.png) no-repeat left center;
	padding-left:15px;
}

/*----
共通設定　テーブル設定
----*/

.disp_no{display:none;}

/*タイトル*/

h2.ttl_com{
	font-weight:bold;
	background:url(../images/bg_ttl.gif) repeat-x bottom;
	padding-bottom:5px;
	margin-bottom:0;
	font-size:122%;
}

h3.ttl_com{
	font-weight:bold;
	border-left:3px solid #006699;
	color:#006699;
	padding-left:5px;
	margin-bottom:10px;
	line-height:1em;
	font-size:114%;
}

.outer{width:100%;}


.outer tr{
	background:url(../images/dot.gif) repeat-x bottom;
}

.outer tr.last{
	background:none;
}

.outer th{
	border:none;
	padding:10px 0;
	font-weight:bold;
	color:#666600;
}
.outer td{
	border:none;
	padding:10px 0;
}

.outer .head{
	white-space:nowrap;
	font-weight:bold;
	width:7em;
	vertical-align:middle;
	padding-right:10px;
}

.outer input.box{width:96%; margin-bottom:3px; background:#fff; border:1px solid #aaa;}
.outer textarea.box{width:96%; height:150px; background:#fff; border:1px solid #aaa;}
.outer input.com{width:150px; margin-bottom:3px; background:#fff; border:1px solid #aaa;}
.outer textarea.com{width:150px; height:100px; background:#fff; border:1px solid #aaa;}

.regist a{ font-weight:bold;}

/*リダイレクト*/
.redirect {
	text-align:center;
	width:70%;
	margin:30px auto;
}


.redirect h4 {
	font-weight:bold;
	color:#806D26;
	margin:20px 10px;
}

.redirect p {
	display:block;
	margin-bottom:10px;
}

.redirect p a:link{text-decoration:underline;}
.redirect p a:visited{text-decoration:underline;}

/*エラーメッセージ*/

.errorMsg{
	border:1px solid #CC3300;
	background:#FFEEEE;
	color:#CC0000;
	margin-bottom:10px;
	padding:7px;
}

.errorMsg li{
	margin-bottom:5px;
	color:#CC0000;
}


/*----
アカウント系ページ
----*/
a.link_del{
	background:url(../images/mark_close.gif) no-repeat left center;
	padding-left:13px;
}

.privacy h4{
	margin-bottom:3px;
}

.privacy p{
	padding-left:5px;
	margin-bottom:15px;
}

.privacy .caution2{
	padding:5px 7px;
	border:1px solid #006699;
	background:#EAF4FB;
	margin-bottom:0px;
}

/*ユーザー登録・ログイン*/

.register_page{
	margin-top:20px;}
.register_page h3{
	margin-bottom:5px;
}

/*ヘルプ*/

.help #about,.help #use,.help #register,
.help #add_movie,.help #site,.help #bookmark,
.help #comment{
	margin-bottom:30px;
}

.help p{margin-bottom:10px;}

.help h4{
	border:1px solid #aaa;
	border-bottom:2px solid #0080CB;
	margin-bottom:5px;
	padding:3px 5px;
}

/*メッセージ*/

.msg_block{
	border:1px solid #aaa;
	padding:1px;
}


.msg_info{background:#f3f3f3; padding:5px;}
.msg_avator{width:60px; float:left; margin-right:10px;}
.msg_avator img{width:60px; height:60px;}
.msg_body{background:url(../images/dot.gif) repeat-x bottom; padding:10px 5px;}
.msg_reply{text-align:center; padding:5px;}
.msg_navi{background:#f3f3f3; padding:5px;}

.msg_prev{width:40%; float:left;}
.msg_next{width:40%; float:right; text-align:right;}

/*ボタン関連*/
.sub_btn{
	cursor:pointer;
	background:url(../images/sub_btn.png) no-repeat;
	border:1px solid #aaa;
	padding:3px 4px !important;
	line-height:1em;
	color:#555;
	font-weight:bold;
}
.sub_btn:hover{
	cursor:pointer;
	background:url(../images/sub_btn_over.png) no-repeat;
	border:1px solid #D59F00;
	padding:3px 4px !important;
	line-height:1em;
	color:#886600;
	font-weight:bold;
}

.sub_btn_off{
	background:#ccc;
	border:1px solid #aaa;
	padding:3px 4px !important;
	line-height:1em;
	color:#555;
	font-weight:bold;
}

a.btn_com{ display:block; background:url(../images/btn_com.jpg) no-repeat; text-indent:-9999px; width:100px; height:25px;}
a.btn_com:hover{ display:block; background:url(../images/btn_com_on.jpg) no-repeat; text-indent:-9999px; width:100px; height:25px;}


/*----
sbmit(iframe)
----*/

#i_sbmit{
	display:none;
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	z-index: 100;
	border-bottom:2px solid #669900;
	background:#f0f0f0;
}