/********************
CSS for common seting

1. Common Setting
2. Basic layout
3. Header Setting
4. FLASH Setting
	gation setting
5. Banner, event and twitter Setting
6. Twitter Setting
7. link boxes setting
8. link_box2 setting
9. footer setting
********************/

body{
	width: 100%;
	background: #fff url('images/commons/bg_body.png') repeat-x top center;	
	color: #474747;
}

.float_l{ display: inline; float: left; }
.float_r{ display: inline; float: right; }
.clr{ clear: both; }

.align_l{ text-align: left; }
.align_r{ text-align: right; }
.align_c{ text-align: center; }

.tal{ text-align: left; }
.tar{ text-align: right; }
.tac{ text-align: center; }

.hdn{ visibility: hidden; }
.none{ display: none; }

.accent1{ color: #900; }
.accent2{ color: #004; }
.accent3{ color: #21663b; font-family: Arial; font-size: 153.9%; }

.clr1{ color:#482f17; }
.clr2{ color:#6b6a46; }
.clr3{ color:#745122; }

.alt{ display: none; }


.gotop{
	clear: both;
	width: 100px;
	height: 20px;
	margin: 10px 0px 10px 660px;
	padding: 10px 0 0 0;
}

.gotop a{
	display: block;
	width: 100px;
	height: 20px;
	background: url('images/commons/gotop.png');
	text-indent: -9999px;
}


/********************
2. Basic layout
********************/
#outer{
	width: 100%;
	background: url('images/commons/bg_outer.png') repeat-x bottom center;
}

#index #outer{
	width: 100%;
	background: url('images/commons/bg_outer2.png') repeat-x bottom center;
}

#container{
	width: 960px;
	margin: 0 auto;
}

#header{
	width: 960px;
	height: 60px;
	background: url('images/commons/bg_header.png') no-repeat;
}

#main{
	width: 950px;
	border-bottom: 1px solid #c1c1c1;
}


#contents{
	width: 760px;
}

/********************
Common Ellement Setting
********************/
#main th,
#main td{
	border: 1px solid #ccc;
	padding: 3px 5px;
}

#contents h3{
	font-size:123.1%;
	color:#EA4B7D;
	border-bottom: 1px solid #999;
	margin: 10px 0;
}

#contents h4{
	color:#932726;
	margin: 20px 0 10px;
}

#contents p{
	font-size: 93%;
	line-height:1.6;
	margin: 0 0 1.5em 0;
}

#contents ul{
	margin: 10px 0 0 20px;
}
#contents li{
	line-height: 1.5;
	
}

/********************
3. Header Setting
********************/
#header h1{
	width: 220px;
	height: 60px;
	overflow: hidden;
}

#header h1 a{
	display: block;
	width: 220px;
	height: 60px;
	text-indent: -9999px;
}

#header .float_r{
	width: 260px;
	height: 60px;
}

#header .float_r p{
	width: 240px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999px;
}

#header #hnavi{
	width: 240px;
	height: 20px;
	padding: 10px 0 0 0;
}

#hnavi li{
	display: inline;
	float: left;
	width: 120px;
	height: 30px;
}

#hnavi li a{
	display: block;
	width: 120px;
	height: 20px;
	background: url('images/commons/hnavi.png') no-repeat;
	text-indent: -9999px;
}

#hnavi01 a:link,
#hnavi01 a:visited { background-position: 0 0; }
#hnavi01 a:hover   { background-position: 0 -20px; }
#hnavi01 a:active  { background-position: 0 -40px; }

#hnavi02 a:link,
#hnavi02 a:visited { background-position: -120px 0; }
#hnavi02 a:hover   { background-position: -120px -20px; }
#hnavi02 a:active  { background-position: -120px -40px; }


/********************
4. FLASH Setting
********************/
#flash{
	width: 540px;
	height: 180px;
	margin: 10px 0 10px 0;
}


/********************
Navigation setting
********************/
#navi{
	width: 940px;
	height: 30px;
	position: relative;
	margin: 0 0 20px 0px;
	z-index: 1000;
}

#navi .navi_lv1{
	display: inline;
	float: left;
	height: 30px;
	width: 120px;
	padding: 0 0px 0 0;
	margin: 0 10px 0 0;
}


.navi_lv1 a{
	display: block;
	height: 30px;
	width: 120px;
	background: url('http://www.sakurahall.jp/media/1/20100613-navi3.png') no-repeat;
	text-indent: -9999px;
}

#navi #navi08{
	width: 100px;
}

#navi08 a{
	width: 100px;
}

#navi01 a:link,
#navi01 a:visited{ background-position: 0   0; }
#navi01 a:hover  { background-position: 0 -30px; }
#navi01 a:active { background-position: 0 -60px; }

#navi02 a:link,
#navi02 a:visited{ background-position: -120px   0; }
#navi02 a:hover  { background-position: -120px -30px; }
#navi02 a:active { background-position: -120px -60px; }

#navi03 a:link,
#navi03 a:visited{ background-position: -240px   0; }
#navi03 a:hover  { background-position: -240px -30px; }
#navi03 a:active { background-position: -240px -60px; }

#navi04 a:link,
#navi04 a:visited{ background-position: -360px   0; }
#navi04 a:hover  { background-position: -360px -30px; }
#navi04 a:active { background-position: -360px -60px; }

#navi05 a:link,
#navi05 a:visited{ background-position: -480px   0; }
#navi05 a:hover  { background-position: -480px -30px; }
#navi05 a:active { background-position: -480px -60px; }

#navi06 a:link,
#navi06 a:visited{ background-position: -600px   0; }
#navi06 a:hover  { background-position: -600px -30px; }
#navi06 a:active { background-position: -600px -60px; }

#navi07 a:link,
#navi07 a:visited{ background-position: -720px   0; }
#navi07 a:hover  { background-position: -720px -30px; }
#navi07 a:active { background-position: -720px -60px; }

#navi08 a:link,
#navi08 a:visited{ background-position: -830px   0; }
#navi08 a:hover  { background-position: -830px -30px; }
#navi08 a:active { background-position: -830px -60px; }

#navi .navi_lv1 ul{
	margin: -10px 0 0 10px !important;	
}

.navi_lv1 ul li{
	position: relative;
	width: 200px !important;
	white-space: nowrap;
}

.navi_lv1 ul li a{
	display: block;
	height: 30px;
	width: 180px !important;
	padding: 0 0 0 20px;
	text-indent: 0;
	font-size: 85%;
	background: url('images/commons/bg_sub_navi.png') no-repeat;
	line-height: 29px;
	color: #444;
	text-decoration: none;
	text-shadow: 0 1px 1px #fff; 
}

.navi_lv1 ul li a:link,
.navi_lv1 ul li a:visited{ background-position:    0   -40px !important; }
.navi_lv1 ul li a:hover  { background-position: -200px -40px !important;color: #fff; }
.navi_lv1 ul li a:active { background-position: -400px -40px !important;color: #7a6b7b; }

.navi_lv1 ul li.subnavi_top a:link,
.navi_lv1 ul li.subnavi_top a:visited{ background-position:    0   0 !important;padding-top: 10px; }
.navi_lv1 ul li.subnavi_top a:hover  { background-position: -200px 0 !important; }
.navi_lv1 ul li.subnavi_top a:active { background-position: -400px 0 !important; }

.navi_lv1 ul li.subnavi_btm a:link,
.navi_lv1 ul li.subnavi_btm a:visited{ background-position:    0   -70px !important; }
.navi_lv1 ul li.subnavi_btm a:hover  { background-position: -200px -70px !important; }
.navi_lv1 ul li.subnavi_btm a:active { background-position: -400px -70px !important; }


/********************
5. Banner, event and twitter Setting
********************/
#banners_event_news{
	width: 940px;
	height: 390px;
	border-bottom: 1px solid #c1c1c1;
	margin: 0 0 9px 0;
}

#banners_event_news .wrapper{
	width: 770px;
} 

#banners{
	width: 162px;
	list-style: none outside;
}

#banners li{
	width: 162px;
	height: 52px;
	margin: 0 0 8px 0;
}

#banners a{
	display: block;
	width: 162px;
	height: 52px;
	overflow: hidden;
	text-indent: -9999px;
}

#banners a:link,
#banners a:visited{
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

#banners a:hover{
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter:alpha(opacity=70);
}

#banners a:active{
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);
}

#banners #banner01{
	height: 80px;
}

#banner01 a{
	height: 80px;
	background: url('images/commons/banner_aki_kensaku.jpg') no-repeat;
}

#banner02 a{
	background: url('images/commons/banner_ticket_service.png') no-repeat;
}

#banner03 a{
	background: url('images/commons/banner_sakurahall_nikki.jpg') no-repeat;
}

#banner04 a{
	background: url('images/commons/banner_lounge_turedure.jpg') no-repeat;
}

#banner05 a{
	background: url('images/commons/banner_geijutsu_kobo.jpg') no-repeat;
}

#banner06 a{
	background: url('images/commons/banner_twitter.jpg') no-repeat;
}

#events{
	width: 600px;
	height: 340px;
	padding: 40px 0 0 0;
	background: url('images/top/bg_event.jpg') no-repeat;
}

#event_flow_images img{
	width: 100%;
}


/********************
6. Twitter Setting
********************/
#news_twit.float_r{
	width: 160px;
	height: 380px;
	overflow: hidden;
}
.twtr-tweet-text{
	font-size: 11px;
}

.twtr-ft div span{
	font-size: 10px;
}

.twtr-hd,
.twtr-ft div{
	padding: 5px !important;
	height: 25px;
}

.twtr-widget-profile .twtr-hd h3{
	margin: 0 0 0 0 !important;
}

.twtr-hd a{
	display: none;
}

.twtr-bd{
	width: 160px;
}

.twtr-scroll .twtr-timeline {
	width: 158px;
}


/********************
7. link_box1 setting
********************/
.box12{
	width: 940px;
}

#link_boxes1{
	border-bottom: 1px solid #c1c1c1;
	width: 940px;
	margin: 0 0 9px 0;
}

#link_boxes1 .box_3{
	display: inline;
	float: left;
	width: 220px;
	height: 140px;
	margin: 0 20px 10px 0;
	background: url('images/commons/bg_top_links.jpg') no-repeat;
	overflow: hidden;
}

.box_3 h3{
	width: 220px;
	height: 24px;
	text-indent: -9999px;
}

.box_3 h3#shiritai{
	height: 14px;
}

#link_boxes1 #kouen_annai{ background-position: 0 0; }
#link_boxes1 #facility   { background-position: 0 -140px; }
#link_boxes1 #service    { background-position: 0 -280px; }
#link_boxes1 #join_us    { background-position: 0 -420px; margin: 0 0 0 0;}

#link_boxes1 .box_3 a,
#link6 a{
	display: block;
	height: 13px;
	padding: 0 0 0 16px;
	margin: 2px 0 6px 10px;
	background: url('images/commons/top_link_head_mark.gif') no-repeat;
	color: #333;
	font-size: 11px !important;
	line-height: 13px;
	text-decoration: none;
}

#link_boxes1 .box_3 a:link,
#link_boxes1 .box_3 a:visited,
#gaiyou #link6 a:link,
#gaiyou #link6 a:visited{ background-position: 0 0; }
#link_boxes1 .box_3 a:hover,
#gaiyou #link6 a:hover  { background-position: 0 -11px; color: #999; }
#link_boxes1 .box_3 a:active,
#gaiyou #link6 a:active { background-position: 0 -22px; color: #ae8a9e;}


/********************
8. link_box2 setting (wide_banner and gaiyo)
********************/
#link_boxes2.box_12.clearfix{
	width: 940px;
	height: 155px;
}

.box_6{
	width: 460px;
}


#wbanner li{
	width: 460px;
	height: 65px;
	overflow: hidden;
	margin: 0 0 10px 0;
	list-style: none outside;
}

#wbanner li a{
	display: block;
	width: 460px;
	height: 65px;
	background: url('images/top/banner_wide.png') no-repeat;
	text-indent: -9999px;
}

#wbanner #wbanner01 a{ background-position: 0 0;}
#wbanner #wbanner02 a{ background-position: 0 -65px;}

#wbanner a:link,
#wbanner a:hover{
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

#wbanner a:hover{
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:alpha(opacity=80);
}

#wbanner a:active{
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter:alpha(opacity=60);
}

#link6{
	width: 220px;
	height: 140px;
}

#gaiyou{
	height: 140px;
	background: url('images/commons/bg_top_links.jpg') no-repeat 0 -560px;
}

#gaiyou.box_6 h3{
	width: 220px;
	height: 24px;
	text-indent: -9999px;
}


#facility_info{
	width: 220px	;
}

#facility_info p,
#facility_info address{
	font-size: 85%;
}

#facility_info p strong{
	font-size: 109%;
	line-height: 1.5;
}

#facility_info .uline{
	display: block;
	width: 220px;
	border-bottom: 1px solid #c1c1c1;
}


#contact_link a{
	display: block;
	height: 39px;
	padding: 10px 0 0 20px;
	border-top: 1px solid #c1c1c1;
	margin: 4px 0 0 0;
	background: url('images/commons/bg_contact_info.png') no-repeat center center;
	text-indent: -9999px;
}

/********************
9. footer setting
********************/

#footer{
	width: 940px;
	height: 54px;
}

#copyright {
	padding: 20px 0 0 0;
	font-size: 77%;
	text-align: center;
	color: #999;
	font-family: Arial, "MS Trebuchet", sans-serif;
}


/********************
10. event_flow setting
********************/
.imageflow .caption{
	height: 2em;
	line-height: 1;
	color: #eee;
	font-weight: normal !important;
	font-size: 93%;
	margin-top: 60px;
}


#page_title{
	width: 950px;
	height: 50px;
	margin: 0 0 10px 0;
}

/********************
add
********************/

.bg01{ background-color:#A2A2A2; color:#FFF;}
.bg02{ background-color:#E1E1E1;}