@charset "utf-8";
/*
	Site Name: NEW NATIONAL THEATRE, TOKYO
	Description: program list page setting
	Version: 1.0
*/

/*
===== CONTENTS ===========================================

	1: CONTENTS LAYOUT
	  1-1: PROGRAM TITLE H3
	2: PGLIST LAYOUT
	3: CASTLIST LAYOUT
	4: PHOTOLIST LAYOUT
	5: SCHEDULE LAYOUT
	6: CAPTION BLOCK LAYOUT
	7: DL BLOCK LAYOUT
	8: SERVICE_2 LAYOUT
	9: BOTTOM AREA LAYOUT
	10: BALLET PROGRAM LAYOUT 
	

==========================================================
*/



/*
===== 1: CONTENTS LAYOUT =================================
*/
#layoutMain h1 {
	width: 906px;
	padding-top: 13px;
	margin: 0 auto;
	clear: both;
}

div#contents .boxProgram {
	border-bottom: dotted 1px #6D6D6D;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

div#contents h2{
}

div#contents h4{
	font-weight:bold;
	font-size:90%;
	margin-bottom:6px;
}
div#contents .toTop{
	text-align:right;
	font-size:85%;
	margin:5px 0px 15px 0px;
}
div#contents .toTop span{
	color:#BC2526;
}
div#contents .dotLine{
	background-image:url(../img/pct_dot.gif);
	background-repeat:repeat-x;
	background-position:top;
}
/*
===== 1-1: PROGRAM TITLE H3 =================================
*/
.boxProgram h3 {
	margin-bottom: 15px;
	clear: both;
}
/*
===== 2: PGLIST LAYOUT =================================
*/
div#contents div#pgList{
	padding:7px 9px 7px 9px;
	margin-bottom: 20px;
	background-color:#EAEAE5;
}

div#contents #pgList ul#upperList{
	margin-bottom:4px;
	line-height:0px;
	font-size:0px;
}

div#contents #pgList li{
	float: left;
	margin-left: 0px;
	margin-right: 3px;
	display:inline;
}

div#contents #pgList li img {
	display: block;
}

/*
===== 3: CASTLIST LAYOUT =================================
*/
div#contents .castList{
	width:220px;
	float:left;
	padding-left:12px;
}
div#contents .castList .desc{
	color:#0A2864;
	font-weight:bold;
	margin-bottom:10px;
	padding-bottom: 10px;
	border-bottom: dotted 1px #6D6D6D;
}

div#contents .castList dl{
	width:100%;
	font-size:85%;
	margin-bottom:0px;
}

div#contents .castList dl.endOfList{
	margin:8px 0px 10px 0px;
	padding:0px 0px 10px 0px;
	padding-bottom: 10px;
	border-bottom: dotted 1px #6D6D6D;
}
div#contents .castList dl.endOfList2{
	margin:8px 0px 0px 0px;
	padding:0px 0px 5px 0px;
	padding-bottom:1px;
}
div#contents .castList dl.endOfList_ex{
	margin:0px 0px 10px 0px;
	padding:0px 0px 10px 0px;
	background-image:url(../img/pct_dot.gif);
	background-repeat:repeat-x;
	background-position:bottom;
}
div#contents .castList dt{
	float:left;
	font-size:90%;
}
div#contents .castList dt.w30px{
	width:17%;
}
div#contents .castList dt.wide {
	width       : auto;
	margin-right: 1em;
}
div#contents .castList dd{
	/*float:left;*/
	font-size     : 90%;
	margin-left   : 35px;
	padding-bottom: 2px;
}

.castList li{
	font-size    : 85%;
	line-height  : 1em;
	background   : url(../../opera/program/img/arw_castlist.gif) left center no-repeat;
	height       : 1em;
	margin-bottom: 10px;
	padding-left : 15px;
}
.nurseryLink a {
	font-size   : 85%;
	line-height : 22px;
	background  : transparent url(../img/icn_circle2.gif) no-repeat scroll left center;
	height      : 22px;
	padding-left: 15px;
}
/*
===== 4: PHOTOLIST LAYOUT =================================
*/
div#contents .photoList td{
	font-size:70%;
	text-align:center;
	padding:0px 0px 5px 10px;
}

div#contents .photoList{
	width:210px;
	float:left;
	margin-left:0px;
}

*html div#contents .photoList{
	width:205px;
	float:left;
	margin-left:0px;
}
div#contents .photoList table{
	width:100%;
}
/*
===== 5: SCHEDULE LAYOUT =================================
*/
div#contents .schedule{
	width:420px;
	float:right;
}
div#contents .schedule ul{
	margin:10px 0px 10px 0px;
	font-size:0px;
	line-height:0px;
	width:420px;
	text-align:right;
}
div#contents .schedule li{
	display:inline;
}
div#contents .schedule table{
	margin-left:10px;
}
div#contents .schedule td{
	vertical-align:top;
}
div#contents .schedule p{
	display:inline;
	float:left;
	margin-left:10px;
}

/*
===== 6: CAPTION BLOCK LAYOUT =====================================
*/
div#contents #captionBlock {
	margin-top: 15px;
	margin-bottom: 15px;

}
div#contents #captionBlock td{
	color:#535353;
	font-size:80%;
	vertical-align:top;
}


/*
===== 8: SERVICE_2 LAYOUT =====================================
*/
div#contents #service_2{
	background : url(../img/pct_dot.gif) repeat-x top;
	margin-top : 15px;
	padding-top: 10px;
}
div#contents #service_2 table{
}
div#contents #service_2 table td.service_2_tbl_txtArea{
	background-color: #E9E9E4;
	padding         : 0px 5px 0px 5px;
}
div#contents #service_2 table td.service_2_tbl_txtArea img{
	margin-left: 3px;
}
div#contents #service_2 table td.service_2_tbl_txtArea p{
	font-size: x-small;
	margin   : 5px;
}


div#contents #service_2 #service_howto,
div#contents #service_2 #service_special{
	width:420px;
}

div#contents #service_2 #service_howto p.ttl,
div#contents #service_2 #service_special p.ttl{
	background-color:#96978E;
	color:#FFFFFF;
	text-align:center;

}
div#contents #service_2 #service_howto{
	float:left;
}
div#contents #service_2 .how_to_txt{
	font-size:x-small;
	margin:5px 0px 5px 0px;
}
div#contents #service_2 #service_howto #inquiryArea p{
	color:#0054A6;
	text-align:center;
	font-size:85%;
	font-weight:bold;
}
div#contents #service_2 #service_howto #inquiryArea p.mb5{
	margin-bottom:5px;
}
div#contents #service_2 #service_special{
	float:right;
}
div#contents #service_2 #service_special ul{
	margin:5px 0px 5px 0px;
}
div#contents #service_2 #service_special li{
	font-weight:bold;
	font-size:105%;
	margin-bottom:5px;
}
/*
===== 9: BOTTOM AREA LAYOUT =====================================
*/
div#contents #bottomArea{
	background-color:#161212;
	padding:8px;
	margin-bottom:15px;
}
div#contents #bottomArea .leftArea{
	background-color:#161212;
	float:left;
	width:345px;
}
div#contents #bottomArea .leftArea .white{
	color:#FFFFFF;
	font-size:90%;
	padding-left:10px;
}
div#contents #bottomArea .leftArea .gold{
	color:#A68113;
	font-size:90%;
	margin-bottom:15px;
	padding-left:10px;
}
div#contents #bottomArea .rightArea{
	width:479px;
	background-color:#FFFFFF;
	float:right;
}
div#contents #bottomArea .rightArea table{
	margin:5px;
}
div#contents #bottomArea .rightArea table td{
	vertical-align:top;
	padding-bottom:5px;
	font-size:x-small;
}
.attetion {
	clear: both;
	font-size: 85%;
	text-align:left;
}
.borderBottom{
	border-bottom : dotted 1px #6D6D6D;
	padding-bottom: 6px;
	margin-bottom : 10px;
}
.pl10{
	padding-left: 10px;
}
.txtIndent{
	text-indent : -1em;
	padding-left: 1em;

}


/*
===== 10: BALLET PROGRAM LAYOUT =====================================
*/
#balleProg #anchorNavi {
	background-color: #EAEAE5;
	width           : 844px;
	margin-bottom   : 20px;
	padding         : 10px 8px 8px;
}


*html #balleProg #anchorNavi #second {
	margin-top: 4px;
}
*:first-child+html #balleProg #anchorNavi #second {
	margin-top: 4px;
}
#balleProg #anchorNavi li {
	float        : left;
	display      : inline;
	margin-right : 6px;
	margin-bottom: 3px;
}

#balleProg #anchorNavi li img {
	display: block;
}
#balleProg #anchorNavi .lastChild {
	margin: 0px;
}
#balleProg #guest {
	float: left;
	width: 176px;
}
#balleProg #guest li {
	display: inline;
}

#balleProg #guest img {
	display: block;
}
#balleProg #nntDancer {
	float: left;
	width: 684px;
	margin-bottom: 20px;
}
#balleProg #nntDancer li li {
	display: inline;
	float: left;
}
#balleProg #nntDancer img {
	display: block;
}
#balleProg .borderDot {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #6D6D6D;
	clear: both;
	margin-top: 10px;
	display: block;
}
#ie7 #balleProg .borderDot {
	margin-top: 2px;
	display: block;
}
#balleProg .leftBox {
	float: left;
	width: 250px;
	margin-left: 12px;
}
*html #balleProg .leftBox {
	float: left;
	width: 240px;
	margin-left: 6px;
}
#balleProg h2 {
	margin-bottom: 15px;
}
#balleProg #nomargin {
	margin-bottom: 0px;
}
#balleProg .rightBox {
	float: right;
	width: 588px;
}
#balleProg .rightBox img {
	display: block;
	float: left;
}
#balleProg .rightBox li {
	display      : inline;
	float        : left;
	padding-top  : 15px;
	padding-right: 10px;
}
#balleProg .rightBox .clearBlock {
	clear        : both;
	padding-top  : 10px;
}
*html #balleProg .rightBox .clearBlock {
	padding-top  : 5px;
}
#balleProg .rightBox .nurseryLink {
	padding-left: 10px;
	display:block;
	float:left;
}

address {
	text-align   : center;
	font-size: 84%;
	margin: 0px;
	padding: 0px;
}
#balleProg .leftBox h3 {
	font-weight: bold;
	color: #0A2864;
	padding-bottom: 12px;
}
#balleProg .leftBox img {
	margin-bottom: 12px;
}
#balleProg .leftBox li{
	font-size:85%;
	line-height: 1em;
	background: url(../../opera/program/img/arw_castlist.gif) left center no-repeat;
	height: 1em;
	margin-bottom: 10px;
	padding-left: 15px;
}
#balleProg .leftBox ul{
	padding-top: 10px;
	border-top : dotted 1px #6D6D6D;
}

/* -------------------------------------------------------
  11: programInfo setting
------------------------------------------------------- */
#programInfo {
	margin:0px;
	padding:0px;
}

#programInfo #layoutWrapper {
text-align: left;
	background-color: #FFFFFF;
	width: 480px;
	margin:0 auto;
	padding:0px;
}

#programInfo h1 {
	margin: 0 4px 15px 5px;
}

#programInfo .contents {
	width: 410px;
	padding: 0 30px 40px;
	margin: 0 5px 29px;
	border-bottom: solid 1px #B0B0B0;
}

/* Ballet story popup pages */
#programInfo #ballet01                   {padding: 0 30px 94px;}
*html #programInfo #ballet01             {padding-bottom: 92px;}/*ie6*/
*:first-child+html #programInfo #ballet01{padding-bottom: 92px;}/*ie7*/
#programInfo #ballet01                   {padding-bottom /*\**/: 88px\9;}/*ie8*/

#programInfo #ballet02                   {padding: 0 30px 127px;}
*html #programInfo #ballet02             {padding-bottom: 126px;}/*ie6*/
*:first-child+html #programInfo #ballet02{padding-bottom: 126px;}/*ie7*/
#programInfo #ballet02                   {padding-bottom /*\**/: 123px\9;}/*ie8*/

#programInfo #ballet03                   {padding: 0 30px 127px;}
*html #programInfo #ballet03             {padding-bottom: 126px;}/*ie6*/
*:first-child+html #programInfo #ballet03{padding-bottom: 126px;}/*ie7*/
#programInfo #ballet03                   {padding-bottom /*\**/: 123px\9;}/*ie8*/

#programInfo #ballet04                   {padding: 0 30px 144px;}
*html #programInfo #ballet04             {padding-bottom: 143px;}/*ie6*/
*:first-child+html #programInfo #ballet04{padding-bottom: 143px;}/*ie7*/
#programInfo #ballet04                   {padding-bottom /*\**/: 141px\9;}/*ie8*/

#programInfo #ballet05                   {padding: 0 30px 144px;}
*html #programInfo #ballet05             {padding-bottom: 143px;}/*ie6*/
*:first-child+html #programInfo #ballet05{padding-bottom: 143px;}/*ie7*/
#programInfo #ballet05                   {padding-bottom /*\**/: 141px\9;}/*ie8*/

#programInfo #ballet06                   {padding: 0 30px 195px;}
*html #programInfo #ballet06             {padding-bottom: 194px;}/*ie6*/
*:first-child+html #programInfo #ballet06{padding-bottom: 194px;}/*ie7*/
#programInfo #ballet06                   {padding-bottom /*\**/: 191px\9;}/*ie8*/

#programInfo h2 {
	width: 420px;
	margin: 0 30px 25px;
}

#programInfo .contents .article {
	padding-bottom: 30px;
	margin-bottom: 15px;
	border-bottom: dotted 1px #535353;
}

#programInfo .contents .article strong {
	margin-bottom: 10px;
}

#programInfo #layoutWrapper img {
	margin: 0px;
	padding: 0px;
	border: none;
	display: block;
}
#programInfo #layoutWrapper .btn {
	text-align: center;
	padding-bottom: 16px;
}
#programInfo #layoutWrapper .btn img {
	display: inline;
}
#ie6 #programInfo #layoutWrapper .btn {
	padding-bottom: 15px;
}