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

/*mobile*/@media screen and (max-width: 320px) { @viewport { width: 320px; } }   @media screen and (min-width: 768px) and (max-width: 959px) { @viewport { width: 768px; } }
/*@viewport {width: device-width;}*/
/*////////*/
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/loadingbar.svg) 50% 25% no-repeat #2f2311;
}
/*////////*/
/*i hate the focus rectangle*/
input:focus, textarea:focus {outline: none;}
::selection {background:#8E8E1E;}
::-moz-selection {background:#8E8E1E;}

/*body*/
body{
font-family:"Times New Roman", Times, serif;	
background-color:#2f2311;
margin-top:.5%;
padding: 0;
text-align: center; 	
}

/*////////*/
#wrap {
    position: relative;
    width: 1025px;
    height: 655px;
	background-color: #2f2311;
    margin-left:auto;
    margin-right:auto;
	
}
#outer {
    position: relative;
     width: 1024px;
    height: 655px;
    margin-left:auto;
    margin-right:auto;
    -webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
   	background-color: #2f2311;
}
#inner {
    position: relative;
	top:0;
	margin-left:auto;
    margin-right:auto; 
    width:1008px;
    height: 640px;
    background-color: #2f2311;
}	
/*////////*/
	
/*main div*/
.rof #container {
overflow:hidden;
width: 1024px;/*1025*/ /*1040*/
height: 768px;/*768*//*784*/
background: #2f2311;/*FFFFFF for the white border*/
margin: 0 auto; 
text-align: center;
border: thin solid #F00; 
/*drop shadow---*/
/*
-moz-box-shadow: -3px 3px 25px #000;
-webkit-box-shadow: -3px 3px 25px #000;
box-shadow: -3px 3px 25px #000;
*/
}
.rof #container2 {
overflow:hidden;
width: 1024px;
height: 710px;
background: #2f2311;
margin: 0 auto; 
text-align: center;
border: thin solid #F00;
}
/*content area*/
.rof #main {
text-align: center;
padding: 8px;
overflow:hidden;
}

/*content stage*/
.rof #stage {
display: block;
text-align: center; 	
width: 1008px;/*1025*/ /*1040*/
height: 670px;/*729*/
background-color:#2f2311;
overflow:hidden;
}
/*content script*/
.rof #scriptx {
display: block;	
width: 700px;/*1025*/ /*1040*/
height: 600px;/*729*/
background-color:#FFF;
overflow:hidden;
margin-left:auto;
margin-right:auto;
padding:15px;cursor:default;
font-family: "Courier New", Courier, monospace;
font-size:16px;
color:#2f2311;
}
.rof #stagescript {
display: block;	
width: 650px;/*1025*/ /*1040*/
height: 600px;/*729*/
background-color:#FFF;
overflow:hidden;
padding:15px;cursor:default;
}

.rof #scpta {
text-align: left; 	
width: 650px;
height: 600px;
background-color:#FFF;
overflow:hidden;
font-family: "Courier New", Courier, monospace;
font-size:16px;
color:#2f2311;
cursor:default;
}
.rof .namer {
text-align: center; display:block; 	
}
.rof #scriptfix{
	width: 840px;margin-top: 0px;margin-left: 0px;
	
	}
.rof #scriptfix h4{
	text-decoration: underline;
}	
.rof .righty{
	text-align:right;
}
.rof .centery{
	width:335px; margin-left:auto; margin-right:auto;
}	
.rof .heady{ text-align:center; color:red;
}	
.striker{text-decoration: line-through;}

.rof #ipstage {
display: block;
text-align: center; 	
width: 1008px;/*1025*/ /*1040*/
height: 655px;/*729*/
background-color:#2f2311;
overflow:hidden;
color:#e1b431;
margin-top:-10px;
margin-bottom:5px;
}

.rof #stageexhibit {
display:inline-block;
text-align: center; 	
width: 908px;
height: 670px;
background-color:#2f2311;
overflow:hidden;
margin-left:auto;
margin-right:auto;
}

.rof #stagebooks {
display: inline-block;
text-align: center; 	
width: 900px;
height: 610px;
background-color:#2f2311;
overflow:hidden;
font-size:16px;
color:#e1b431;
}

/*exhibitions*/
#exselect{text-align:left;
top:10px;
margin:0px;
margin-left:auto;
margin-right:auto;
width:430px;
height: 620px;
display:block;
overflow:hidden;
color:#FFF;}
#exselect a{color:#FFF;text-decoration:none;}
#exselect a:visited{color:#FFF;text-decoration:none;}
#exselect a:hover{color:#2f2311;text-decoration:none; background-color:#FFF;}

/*music*/

.rof .musicimages {
margin-left:auto;
margin-right:auto;
width: 800px;
height: 420px;
text-align:left;	
overflow:hidden;
list-style: none;
padding:0px; padding-bottom:2px;
}
.rof #musicselect{
display: block;
text-align:center;
width:755px;
height:625px;
overflow:hidden;
margin-left:190px;
margin-right:auto; 
}
.rof .musicsynopsis{
margin-left:auto;
margin-right:auto;
text-align: left;
margin-top:-10px;
width:753px;
height: 230px;
overflow:hidden;
color:#FFF;
font-size:16px;
}



/*performances*/
.rof #stageperf {
display: inline-block;
text-align: center; 	
width: 960px;
height: 630px;
background-color:#2f2311;
overflow:hidden;
font-size:16px;
color:#e1b431;

}

.rof #perfselect{
display: block;
text-align:center;
width:760px;
height:625px;
overflow:hidden;
margin-left:190px;
margin-right:auto;
}

.rof .perfimages {
margin-left:auto;
margin-right:auto;
width: 640px;
height: 384px;
display: block;
overflow:hidden;
list-style: none;
padding:0px;
}

.rof .perfsynopsis{
margin-left:auto;
margin-right:auto;
text-align: left;
margin-top:-10px;
width:760px;
height: 230px;
overflow:hidden;
color:#FFF;
font-size:16px;
}
.rof #pp1{}
.rof #pp2{display:none;}
.rof #pp3{display:none;}
.rof #pp4{display:none;}
.rof #pp5{display:none;}
.rof #pp6{display:none;}

.rof #perfleft {
display: block;
float: left;
margin-top:0px;
margin-left:30px;
width:100px;
height:605;
text-align:left;
overflow:hidden;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}

.rof .perfsynopsis a{
color:#8E8E1E;padding:1px;
text-decoration:none;	
}
.rof .perfsynopsis a:visited{
color:#8E8E1E;padding:1px;
text-decoration:none;	
}
.rof .perfsynopsis a:hover{
color:#FFF;background-color:#8E8E1E;
text-decoration:none; padding:1px;	
}

/*screenings*/
.rof #stagescreen {
display: inline-block;
text-align: center; 	
width: 908px;/*1025*/ /*1040*/
height: 580px;/*729*/
background-color:#2f2311;
overflow:hidden;
color:#FFF;
}

.rof #screenlist{
text-align:left;
top:10px;
margin:0px;
margin-left:auto;
margin-right:auto;
width:430px;
height: 580px;
display:block;
overflow:hidden;
}
.scrfont{
	font-family: "Times New Roman", Times, serif;
	 color:#FFF;
	 font-size:16px;

	}
.scrfont a{
color:#FFF;text-decoration:none;
}
.scrfont a:visited{
color:#FFF;text-decoration:none;
}	
.scrfont a:hover{
color:#2f2311;text-decoration:none; background-color:#FFF;
}	
	
#screeningfoot{
padding-top:15px;
display:inline-block;
width: 908px;
height:26px;
color:#FFF;	
font-size:14px;
}
.screendetail a span:hover{
color:#e1b431 !important;
cursor:pointer;}
	
#screeningfoot a {color:#FFF; text-decoration:none;}
#screeningfoot a:visited{cursor:pointer;color:#FFF;}
#screeningfoot a:hover{cursor:pointer;color:#2f2311; background:#FFF;}
.showdetail a{color:#FFFFFF;text-decoration:none;}
.showdetail a:hover{color:#e1b431}

/*content credits*/
.rof #stagecredits {
display: inline-block;
text-align: center; 	
width: 960px;
height: 630px;
background-color:#2f2311;
overflow:hidden;
}
#creditsnav a:hover{cursor:pointer;}

.creditlink a{
color:#8E8E1E;text-decoration:none;
}
.creditlink a:visited{
color:#8E8E1E;text-decoration:none;
}	
.creditlink a:hover{
color:#2f2311;text-decoration:none; background-color:#FFF;
}	




.rof #creditsnav {
display:block;
margin-top:0px;
margin-left:30px;
width:137px;
height: 605px;
text-align:left;
overflow:hidden;
float:left;
-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.rof #credits {
margin-right:auto;
margin-left:150px;
display:block;
float:left;
text-align: left; 	
width: 500px;
height: 620px;
background-color:#2f2311;
overflow:hidden;
font-size:16px;
color:#FFFFFF;

}
#credits span{color:#8E8E1E;font-size:14px;}
.rof #cr10{}
.rof #cr1{display:none;}
.rof #cr2{display:none;}
.rof #cr3{display:none;}
.rof #cr4{display:none;}
.rof #cr5{display:none;}
.rof #cr6{display:none;}
.rof #cr7{display:none;}
.rof #cr8{display:none;}
.rof #cr9{display:none;}


/*content synopsis*/

.rof #synopsis {
display: inline-block;
width: 800px;
height: 620px;/*729*/
background-color:#2f2311;
overflow:hidden;
font-size:17px;
color:#FFF;
padding-right:4px;
text-align: justify;
}

.capp{
font-size: 250%;
color:#ffffff;
line-height:1px;
margin-right:2px;
text-align:left;
}
	
.svgcenter{
	margin-top:5px;
text-align:center
}	

.afilm{
	font-size:17px;
	
	
}
.afilmsm{
	font-size:13px;
	
	
}


/*trailer*/
.rof #trailerscreen {
display:block;
text-align: center; 	
width: 960px;
height: 630px;
background-color:#2f2311;
overflow:hidden;
	margin-right:auto;
	margin-left:auto;
}

#trailervid{
	margin-top:50px;
	background-color:#000;
	height:480px;
	width:908px;
	margin-right:auto;
	margin-left:auto;
}



/*books */
.rof #booksleft {
display: inline-block;
float: left;
margin-top:0px;
width:100px;
height:500px;
text-align:left;
overflow:hidden;
-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.rof #bk1{}
.rof #bk2{display:none;}
.rof #bk3{display:none;}
.rof #bk4{display:none;}
.rof #bk5{display:none;}
.rof #bk6{display:none;}
.rof #bk7{display:none;}
.rof #bk8{display:none;}
.rof #bk9{display:none;}
.rof #bk10{display:none;}
.rof #bk11{display:none;}
.rof #bk12{display:none;}
.rof #bk13{display:none;}
.rof #bk14{display:none;}
.rof #bk15{display:none;}
.rof #bk16{display:none;}
.rof #bk17{display:none;}
.rof #bk18{display:none;}
.rof #bk19{display:none;}
.rof #bk20{display:none;}
.rof #bk21{display:none;}
.rof #bk22{display:none;}
.rof #bk23{display:none;}
.rof #bk24{display:none;}
.rof #bk25{display:none;}
.rof #bk26{display:none;}
.rof #bk27{display:none;}
.rof #bk28{display:none;}
.rof #bk29{display:none;}
.rof #bk30{display:none;}
.rof #bk31{display:none;}
.rof #bk32{display:none;}
.rof #bk33{display:none;}
.rof #bk34{display:none;}
.rof #bk35{display:none;}
.rof #bkr1{}
.rof #bkr2{display:none;}
.rof #bkr3{display:none;}
.rof #bkr4{display:none;}
.rof #bkr5{display:none;}
.rof #bkr6{display:none;}

#booksleft a{color:#FFF;text-decoration:none;}
#booksleft a:visited{color:#FFF;text-decoration:none;}
#booksleft a:hover{cursor:pointer;}

.rof #booksright {
float: right;
margin-top:0px;
width:392px;
height: 100%;
text-align:left;
color:#FFF;

font-size:14px;
}

.rof #bookscenter {
display: inline-block;
margin-top:20px;
width:360px;
height: 100%;
text-align:center;
-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;

}
	
.rof .bookcredit {
margin-top:10px;
margin-right:100px;
display: inline-block;
text-align: left; 	
width: 392px;/*1025*/ /*1040*/
height: 620px;/*729*/
overflow:hidden;
font-size:16px;
color:#FFFFFF;
}
.bookcredit span{color:#8E8E1E;font-size:14px;}
/*navigation footer*/
#footer{
display: block;
position: relative;
text-align: center; 	
width: 960px;
height: 24px;
background-color:#2f2311;
overflow:hidden;
margin-top:0;
margin-left:auto;
margin-right:auto;

animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/*subnav*/
.rof #subpc {
padding-bottom:10px;
display: inline-block;
text-align: center; 	
width: 100px;
height: 15px;
background-color:#2f2311;	
overflow:hidden;
}
.subpc {
display: block;
width: 100px;
height: 15px;
background: url('../nav/sub_pc.svg') top;
text-indent: -99999px;
}
.subpc:hover {
background-position: 0px -15px;
}

/*----new nav----- */


#ip {
fill:#FFF;
}
#ip:hover {
cursor:pointer;
fill:#2f2311;
}
#ip:hover> #ipa{
fill:#FFF;
opacity:1;
}
#syn {
fill:#FFF;
}
#syn:hover {
cursor:pointer;
fill:#2f2311;
}
#syn:hover> #syna{
fill:#FFF;
opacity:1;
}
#tr {
fill:#FFF;
}
#tr:hover {
cursor:pointer;
fill:#2f2311;
}
#tr:hover> #tra{
fill:#FFF;
opacity:1;
}
#scr {
fill:#FFF;
}
#scr:hover {
cursor:pointer;
fill:#2f2311;
}
#scr:hover> #scra{
fill:#FFF;
opacity:1;
}
#exh {
fill:#FFF;
}
#exh:hover {
cursor:pointer;
fill:#2f2311;
}
#exh:hover> #exha{
fill:#FFF;
opacity:1;
}
#perf {
fill:#FFF;
}
#perf:hover {
cursor:pointer;
fill:#2f2311;
}
#perf:hover> #perfa{
fill:#FFF;
opacity:1;
}
#bks {
fill:#FFF;
}
#bks:hover {
cursor:pointer;
fill:#2f2311;
}
#bks:hover> #bksa{
fill:#FFF;
opacity:1;
}
#cr {
fill:#FFF;
}
#cr:hover {
cursor:pointer;
fill:#2f2311;
}
#cr:hover> #cra{
fill:#FFF;
opacity:1;
}
#mus {
fill:#FFF;
}
#mus:hover {
cursor:pointer;
fill:#2f2311;
}
#mus:hover> #musa{
fill:#FFF;
opacity:1;
}
/*navigation ACTIVE*/
#active{
fill:#2f2311;
}
#activebg{
fill:#8E8E1E;
opacity:1;
}

/*charts*/
#imagechart{
width:980px;
height:640px;
overflow:hidden;
	}
	
#chartsub{
	width:325px;
	height:630px;
	display:block;
	float:left;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

#chartimage{
	width:630px;
	height:635px;
	display:block;
	float:left;
	margin-top:25px;
	margin-left:20px;
	margin-right:auto;	
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
	
}

#glyphlink{
fill:#8E8E1E;
}
#glyphlink:hover{
cursor:pointer;
fill:#FFF;
}


.titleblock{
	margin-right:auto; margin-left:auto;
	width:489px;
	color:#8E8E1E;
	font-family:"Times New Roman", Times, serif;
}
.titleblock p { text-align:justify; font-size:17px;}	
.titleblock span { text-align:center; font-size:13px;}

/*audio*/
#speaker{
	background-image:url(../images/speaker_icon_off.gif);
	background-repeat:no-repeat;
	width:24px;
	height:24px; 

	}
	#speaker2{
	background-image:url(../images/speaker_icon.gif);
	background-repeat:no-repeat;
	width:24px;
	height:24px; 
	display:none;
	}
#listenicon{
	margin-left:auto;
	margin-right:auto;
	width:500px;
	height:35px;
	margin-top:50px;
	text-align:center;
}
#listenicon2{
	margin-left:auto;
	margin-right:auto;
	width:500px;
	height:60px;
	margin-top:50px;
	text-align:center;
}

#listencenter{ 
width:auto; margin-left:auto; margin-right:auto;
display:inline-block;
height:26px;
}

.speakerbox{
	height:24px;
	width:auto;
	display:inline-block;
	text-align:center;
	float:left;
}
.songtitle{
	height:24px;
	width:auto;
	display:inline-block;
	color:#8E8E1E;
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	padding-top:2px;
	text-align:center;
	float:left;

}
.songtitle:hover{
cursor:pointer;
color:#FFF;
}

progress {
	margin-left:auto;
	margin-right:auto;
	width: 350px;
	height: 6px;
	display: block;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;background: #40391D;
}

progress::-webkit-progress-bar {
	background: #40391D;
	padding: 2px;
	border-radius: 2px;
}
progress::-webkit-progress-value {
	background:#8E8E1E;
	border-radius: 2px;
}
progress::-moz-progress-bar {
background:#8E8E1E;
	border-radius: 2px;
	padding: 2px;
}