@charset "utf-8";
/* CSS Document */

/*
	Site Name: New National Theatre, tokyo
	Description: common setting
	Version: 
	Author: 
*/

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

	01. base layout
	02. tools

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

/* -------------------------------------------------------
 	01. base layout
------------------------------------------------------- */
#layoutWrapper {
	border    : 1px solid #333333;
	margin    : 10px auto 0 auto;
	text-align: left;
	width     : 979px;
}

/* header layout */
#layoutHeader img {
	float: left;
}

/* GlobalNavi layout */
#layoutGlobalNavi li {
	display: inline;
	margin : 0px;
	padding: 0px;
}
#layoutGlobalNavi li img {
	display: block;
	float  : left;
	margin : 0px;
	padding: 0px;
}

/* contentarea layout */

#layoutMain {
	background      : url(../img/bg_content_bottom.jpg) no-repeat center bottom;
	background-color: #000000;
	padding-bottom  : 20px;
}
#bottomText {
	text-align : center;
	padding-top: 20px;
}
#bottomText h3 {
	border-bottom : 1px solid #404040;
	line-height   : 1.5;
	margin        : 0 auto 10px;
	padding-bottom: 10px;
	width         : 90%;
}
.mac #bottomText h3 {
	border-bottom : 1px solid #404040;
	line-height   : 1.5;
	margin        : 0 auto 10px;
	padding-bottom: 10px;
	width         : 95%;
}
#bottomText p span {
	padding-right: 12px;
}

/* footer layout */
#layoutFooter {
	background: url(../img/bg_footer.jpg) repeat-x left top;
	border-top: 1px solid #333333;
	height    : 52px;
}
#layoutFooter div.floatLeft{
	width       : 650px;
}
#layoutFooter div.floatLeft address{
	color     : #6c6c6c;
	display   : block;
	float     : left;
	font-size : 85%;
	font-style: normal;
	padding   : 20px 0 0 15px;
}
/*.mac #layoutFooter div.floatLeft address{
	font-size : 75%;
}*/

#layoutFooter div.floatLeft img{
	display: block;
	float  : left;
}
#layoutFooter .floatRight{
	margin-right: 15px;
	margin-top  : 10px;
	width       : 285px;
}
#layoutFooter .floatRight ul.floatRight{
	margin-right: 0px;
	margin-top  : 0px;
	width       : 265px;
}
#layoutFooter .floatRight li.floatRight {
	margin-right: 5px;
	margin-top  : 0px;
	width       : 130px;
}
#layoutFooter .floatRight p {
	clear      : both;
	padding-top: 6px;
}

.schedueHeadLine {
	border-bottom : 1px dotted #44402C;
	clear         : both;
	margin-bottom : 10px;
	padding-bottom: 5px;
}
.schedueHeadLine h2{
	background  : url(../img/icon_square.jpg) no-repeat left 5px;
	font-size   : 123%;
	padding-left: 20px;
}

/* pagetop layout */
.pagetop {
	font-size    : 85%;
	padding-right: 20px;
	padding-top  : 15px;
	text-align   : right;
}
.pagetop a {
	background  : url(../img/icon_pagetop.gif) no-repeat left center;
	padding-left: 15px;
}










/* -------------------------------------------------------
 	02. tools
------------------------------------------------------- */


.txtOrange    { color: #D6B581;}
.txtOcher     { color: #8F8058;}
.txtGray      {	color: #808080;}
.txtLightGray {	color: #B7B7B7;}
.txtLightRed  {	color: #B48A80;}
.txtPink      {	color: #FFC2C2;}
.txtYellow    {	color: #FFFF91;}
.txtPurple    {	color: #9E80C5;}
.txtLightPurple    {	color: #9E80A5;}




/* light gray text color */
#cast .attentionText,
#cast #layoutWrapper #layoutMain #layoutContent .addTextLink a{
	color: #B3B3AB;
}

/* gray text color */
#top #layoutContent .floatLeft dt,
#top #layoutContent .floatLeft dd,
#top #layoutContent .btnArea .btn02 span,
#top .attentionText,
.message, 
#intro #layoutContent .content01 p,
#intro .content02 td,
#cast .dancerWrap .detail,
#cast .dancerWrap .photo02 span,

#schedule #content02 .contentPaddingLeft li,
#schedule #content03 .paddingSet,
#schedule #content04 .contentPaddingLeft li,
#schedule #content01 .contentPaddingLeft .takujiIcon,
#schedule #content02 .addText,
#schedule #content02 .addText a,
#top #layoutWrapper #layoutMain #layoutContent .newsArea.clearfix .floatLeft a
{
	color: #B7B7AF;
}

/* deep gray text color */
#intro #layoutContent .contentBox dd,
#cast .dancerWrap .name span,
#cast #staffList th .english,
#cast #staffList td .english
{
	color: #808080;
}

/* orange text color */
#intro #layoutContent .contentBox dt span
{
	color: #CDAC80;
}

/*  light orange text color */
#cast #staffList .position
{	
	color: #BA9980;
}


/* brown text color */
.schedueHeadLine h2
{
	color: #C58F62;
}

/* yellow text color */
#cast .schedueHeadLine.clearfix .supplementtext,
#cast #layoutWrapper #layoutMain #layoutContent .addTextLink a:hover
{
	color: #FFFF80;
}

/* deep yellow text color */
#cast .dancerWrap .belong {
	color: #878058;
}




/* font bold */
#intro #layoutContent .contentBox d,
#cast .schedueHeadLine h2,
#cast #staffList th,
#cast #staffList td,
.scheduleTables thead th span,
#cast .dancerWrap .name
{
	font-weight: bold;
}

/* font normal */
#cast .dancerWrap .name span,
#cast #staffList th .english,
#cast #staffList td .english
{
	font-weight: normal;
}


#layoutContent .textIcon {
	color       : #FFF;
	background  : url(../img/icon_square.jpg) no-repeat left top;
	padding-left: 20px;
}
#layoutContent .textIcon:hover{
	color : #EFEE03;
}

.txt-xxxxxxxxx-large {font-size : 350%; font-weight: bold;}/* size +10 */
.txt-xxxxxxxx-large  {font-size : 280%; font-weight: bold;}/* size +9 */
.txt-xxxxxxx-large   {font-size : 260%; font-weight: bold;}/* size +8 */
.txt-xxxxxx-large    {font-size : 240%; font-weight: bold;}/* size +7 */
.txt-xxxxx-large     {font-size : 220%; font-weight: bold;}/* size +6 */
.txt-xxxx-large      {font-size : 200%; font-weight: bold;}/* size +5 */
.txt-xxx-large       {font-size : 180%; font-weight: bold;}/* size +4 */
.txt-xx-large        {font-size : 160%; font-weight: bold;}/* size +3 */
.txt-x-large         {font-size : 140%; font-weight: bold;}/* size +2 */
.txt-large           {font-size : 120%; font-weight: bold;}/* size +1 */
.txt-small           {font-size :  85%; }/* size -1 */




.contentBox dd{
	font : 86%;
}
.mac .contentBox dd{
	font-size : 83%;
}




.indent-text {
	display     : block;
	text-indent : -1em;
	padding-left: -1em;
}

.mt5  { margin-top:  5px;}
.mt6  { margin-top:  6px;}
.mt7  { margin-top:  7px;}
.mt10 { margin-top: 10px;}
.mt11 { margin-top: 11px;}
.mt12 { margin-top: 12px;}
.mt15 { margin-top: 15px;}
.mt17 { margin-top: 17px;}
.mt20 { margin-top: 20px;}
.mt25 { margin-top: 25px;}
.mt30 { margin-top: 30px;}

.mb5  { margin-bottom:  5px;}
.mb6  { margin-bottom:  6px;}
.mb10 { margin-bottom: 10px;}
.mb15 { margin-bottom: 15px;}
.mb20 { margin-bottom: 20px;}
.mb25 { margin-bottom: 25px;}
.mb30 { margin-bottom: 30px;}

.pt5  { padding-top:  5px;}
.pt10 { padding-top: 10px;}
.pt14 { padding-top: 14px;}
.pt15 { padding-top: 15px;}
.pt20 { padding-top: 20px;}
.pt25 { padding-top: 25px;}
.pt30 { padding-top: 30px;}

.pb5  { padding-bottom:  5px;}
.pb10 { padding-bottom: 10px;}
.pb14 { padding-bottom: 14px;}
.pb15 { padding-bottom: 15px;}
.pb20 { padding-bottom: 20px;}
.pb25 { padding-bottom: 25px;}
.pb30 { padding-bottom: 30px;}

.pl5  { padding-left:  5px;}
.pl10 { padding-left: 10px;}
.pl15 { padding-left: 15px;}
.pl20 { padding-left: 20px;}
.pl25 { padding-left: 25px;}
.pl30 { padding-left: 30px;}

.align-center {text-align: center;}
.align-left   {text-align: left;}
.align-right  {text-align: right;}

.floatLeft  {float: left;}
.floatRight {float: right;}

.displayNone{display: none;}