/* This segment controls the top of the page including the stage picture, the text and colour. */
#headPic       {
position : absolute ; left : 10px ; top : 10px ;}
.title1     {
position : absolute ; left : 440px ; top : 10px ; font-size : 18pt ; color : #ffff00 ; }
.title2     {
position : absolute ; left : 470px ; top : 50px ; font-size : 18pt ; color : #ffff00 ; }
.title3     {
position : absolute ; left : 600px ; top : 100px ; font-size : 18pt ; color : #ffff00 ; }
.title4     {
position : absolute ; left : 720px ; top : 150px ; font-size : 18pt ; color : #ffff00 ; }
.title5     {
position : absolute ; left : 450px ; top : 220px ; font-size : 18pt ; color : #ffffff ; }
/* End of heading section. */

/* Used when setting photographs into text, either on the left or right side. */
.leftPic        {
float : left ; padding-right : 20px ;}
.rightPic       {
float : right ; padding-left : 20px ;}
/* End of picture-in-text section. */

/* Remove the underline from some of the anchors and set their colour to white. */
p a:link, a:visited, a:active { 
text-decoration: underline ; color : white ;}
div.menu a:link          { 
text-decoration: underline ; color : red ;}

/* Picture frame puts a simulated white picture frame around the artwork. */
.pictureframe   {
border : thick ridge white ;}
/* Plain frame puts a simple white line around the photo. */
.plainframe   {
border : 2px solid white ;}

/* This centres the music box provided by Coffee Cup JukeBox. */
.playBox        {
width : 800px ;}
/* Set all paragraphs to whatever font type is required. This changes all text. */
p           {
font-family : arial, sans-serif ;}

/* Layouts for 2, 3 and 4 picture tables. All at 800px width. All pictures are set to the left 
/* and text is centralised in the block. The 3 picture row isn't quite 800px. Pictures in the 2 
/* picture row should not exceed 150px in width. Pictures in the 3 and 4 picture rows should not
/* exceed 100px. Filmpics puts a border around each photo. */
.picCell100 {
width : 100px ; float : left ; vertical-align : middle ;}
.picCell150 {
width : 150px ; float : left ; vertical-align : middle ;}
.picCell200 {
width : 200px ; float : left ; vertical-align : middle ;}
.txtCell100 {
width : 100px ; text-align : center ; color : #ffffff ;}
.txtCell165 {
width : 165px ; text-align : center ; color : #ffffff ;}
.txtCell250 {
width : 250px ; text-align : center ; color : #ffffff ;}
.txtCell300 {
width : 300px ; text-align : center ; color : #ffffff ;}
/* End of film headings. */

/* Heading picture setups. Pictures should be between 90px and 200px. Subtract from 800px 
/* to get the left position. 90px picture gives 353px from left, 100px gives 350px, etc. Some
/* manipulation is sometime needed, I don't know why, to adjust the photos into the center. */
.pic90      {
position : relative ; left : 353px ; border : 2px solid white ;}
.pic100     {
position : relative ; left : 350px ; border : 2px solid white ;}
.pic110      {
position : relative ; left : 345px ; border : 2px solid white ;}
.pic120     {
position : relative ; left : 340px ; border : 2px solid white ;}
.pic130      {
position : relative ; left : 335px ; border : 2px solid white ;}
.pic140     {
position : relative ; left : 330px ; border : 2px solid white ;}
.pic150      {
position : relative ; left : 325px ; border : 2px solid white ;}
.pic160     {
position : relative ; left : 320px ; border : 2px solid white ;}
.pic170      {
position : relative ; left : 315px ; border : 2px solid white ;}
.pic180     {
position : relative ; left : 310px ; border : 2px solid white ;}
.pic190      {
position : relative ; left : 305px ; border : 2px solid white ;}
.pic200     {
position : relative ; left : 300px ; border : 2px solid white ;}
.pic250     {
position : relative ; left : 275px ; border : 2px solid white ;}
.pic280     {
position : relative ; left : 260px ; border : 2px solid white ;}
.pic300     {
position : relative ; left : 250px ; border : 2px solid white ;}
.pic325     {
position : relative ; left : 212px ; border : 2px solid white ;}
.pic350     {
position : relative ; left : 225px ; border : 2px solid white ;}
.pic400     {
position : relative ; left : 200px ; border : 2px solid white ;}
.pic500     {
position : relative ; left : 150px ; border : 2px solid white ;}
.pic600     {
position : relative ; left : 100px ; border : 2px solid white ;}
.pic800     {
position : relative ; left : 10px ; border : 2px solid white ;}

/* special setting for the Mirror headline wording with no border. */
.nob100     {
position : relative ; left : 350px ; }
.nob200     {
position : relative ; left : 300px ; }
.nob260     {
position : relative ; left : 270px ; }
.nob300     {
position : relative ; left : 250px ; }
.nob400     {
position : relative ; left : 200px ; }
.nob500     {
position : relative ; left : 150px ; }
.nob600     {
position : relative ; left : 100px ;}

/* End of picture settings. */

/* One music setting */
.music300   {
position : relative ; left : 250px ;}
/* End of Music settings */

/* Table picture setups. Pictures can be place one-up or two-up. One-up Pictures should be
sized to 330 (Portrait) 500 or 600px (Landscape). Two-up pictures should be sized to 300px. Three-up should be
avoided in favour of setting up a separate page listing all the artwork/photographs.
Titles, if required, can be set up in a lower row. 
Sample two-up table:
<table summary="pictures">
    <tr>
        <td class="filler40"></td>
        <td class="pane300">
            <img src="Images/xxx.jpg" alt="picture name" class="pictureframe"/>
        </td>
        <td class="filler90"></td>
        <td class="pane300">
            <img src="Images/yyy.jpg" alt="picture name" class="pictureframe"/>
        </td>
        <td class="filler40"></td>
    </tr>
    <tr>
        <td class="filler40"></td>
        <td class="title300">
            <p>Title One</p>
        </td>
        <td class="filler90"></td>
        <td class="title300">
            <p>Title Two</p>
        </td>
        <td class="filler40"></td>
    </tr>
</table>
Sample one-up table:
<table summary="pictures">
    <tr>
        <td class="filler240"></td>
        <td class="pane300">
            <img src="Images/xxx.jpg" class="pictureframe"/>
        </td>
        <td class="filler240"></td>
    </tr>
    <tr>
        <td class="filler240"></td>
        <td class="title300">
            <p>Title One</p>
        </td>
        <td class="filler240"></td>
    </tr>
</table>
<table summary="pictures">
    <tr>
        <td class="filler140"></td>
        <td class="pane500">
            <img src="Images/xxx.jpg" class="pictureframe"/>
        </td>
        <td class="filler140"></td>
    </tr>
    <tr>
        <td class="filler140"></td>
        <td class="title500">
            <p>Title One</p>
        </td>
        <td class="filler140"></td>
    </tr>
</table>
<table summary="pictures">
    <tr>
        <td class="filler90"></td>
        <td class="pane600">
            <img src="Images/xxx.jpg" class="pictureframe"/>
        </td>
        <td class="filler90"></td>
    </tr>
    <tr>
        <td class="filler90"></td>
        <td class="title600">
            <p>Title One</p>
        </td>
        <td class="filler90"></td>
    </tr>
</table> */
.filler40   {
width : 40px ;}
.filler90   {
width : 90px ;}
.filler140  {
width : 140px ;}
.filler240  {
width : 240px ;}
.pane300    {
width : 300px ; float : left ; vertical-align: middle ;}
.pane500    {
width : 500px ; float : left ;}
.pane600    {
width : 600px ; float : left ;}
.title300   {
width : 300px ; text-align : center ; color : #ffffff ; font-family : arial, sans-serif ;
font-size : 14pt ;}
.title500   {
width : 500px ; text-align : center ; color : #ffffff ; font-family : arial, sans-serif ;
font-size : 14pt ;}
.title600   {
width : 600px ; text-align : center ; color : #ffffff ; font-family : arial, sans-serif ;
font-size : 14pt ;}
/* End of picture settings. */

/* Plays table setup. The plays are shown as "Play Name   Writer and Director". Text size should be 12pt in white text.
<table summary="The Plays">
    <tr>
        <td class="filler80"></td>
        <td class="text280L"></td>
        <td class="text80H"><p>The Plays</p></td>
        <td class="text280R"></td>
        <td class="filler80"></td>
    </tr>
    <tr>
        <td class="filler80"></td>
        <td class="text280L"><p>Play Name</p></td>
        <td class="text80"></td>
        <td class="text280R"><p>Writer and Director</p></td>
        <td class="filler80"></td>
    </tr>
</table> */
.text80H   {
width : 80px ; text-align : center ; color : #ffff00 ; font-weight : bold ;}

/* There are two ways of showing the characters and cast. The first is simple. Evenly spread ove the width of the page. The second is asymetrical, allowing more space for the character.
Simple cast table setup. 
The cast is shown as "Character - Actor". The text size should be 12
point in white text.
<table summary="The Cast">
    <tr>
        <td class="filler80"></td>
        <td class="text280L"></td>
        <td class="text80"><p>The Cast</p></td>
        <td class="text280R"></td>
        <td class="filler80"></td>
    </tr>
    <tr>
        <td class="filler80"></td>
        <td class="text280L"><p>Character One</p></td>
        <td class="text80"><p>-</p></td>
        <td class="text280R"><p>Actor One</p></td>
        <td class="filler80"></td>
    </tr>
</table>
Asymetric cast table setup. Larger space to the left.
<table summary="The Cast">
    <tr>
        <td class="filler40"></td>
        <td class="text440L"><p>The Cast</p></td>
        <td class="text60"></td>
        <td class="text200R"></td>
        <td class="filler40"></td>
    </tr>
    <tr>
        <td class="filler40"></td>
        <td class="text440L"><p>Character One</p></td>
        <td class="text60"><p>-</p></td>
        <td class="text200R"><p>Actor One</p></td>
        <td class="filler40"></td>
    </tr>
</table>
Asymetric cast table setup. Larger space to the right.
<table summary="The Cast">
    <tr>
        <td class="filler20"></td>
        <td class="text200L"><p>The Cast</p></td>
        <td class="filler20"></td>
        <td class="text540R"></td>
        <td class="filler20"></td>
    </tr>
    <tr>
        <td class="filler20"></td>
        <td class="text200L"><p>Character One</p></td>
        <td class="filler20"><p>-</p></td>
        <td class="text540R"><p>Actor One</p></td>
        <td class="filler20"></td>
    </tr>
</table>  */
.filler20   {
width : 20px ;}
.filler40   {
width : 40px ;}
.filler80   {
width : 80px ;}
.text60    {
width : 60px ; text-align : center ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text80    {
width : 80px ; text-align : center ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text280L   {
width : 280px ; text-align : left ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text280R   {
width : 280px ; text-align : right ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text200R   {
width : 200px ; text-align : right ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text200L   {
width : 200px ; text-align : left ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text440L   {
width : 440px ; text-align : left ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text540R   {
width : 540px ; text-align : justify ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
/* End of cast table settings. */

/* Player table setup. The players are shown as "Actor Name". The text size should be 12
point in white text. Only the middle section is used but there are two sizes.
Sample player table:
<table summary="The Players">
    <tr>
        <td class="filler300"></td>
        <td class="text200C"><p>The Players</p></td>
        <td class="filler300"></td>
    </tr>
    <tr>
        <td class="filler300"></td>
        <td class="text200C"><p>Player One</p></td>
        <td class="filler300"></td>
    </tr>
</table>
<table summary="The Players">
    <tr>
        <td class="filler100"></td>
        <td class="text600C"><p>The Players</p></td>
        <td class="filler100"></td>
    </tr>
    <tr>
        <td class="filler100"></td>
        <td class="text600C"><p>set of Players</p></td>
        <td class="filler100"></td>
    </tr>
</table>
<table summary="The Players">
    <tr>
        <td class="filler50"></td>
        <td class="text700C"><p>The Players</p></td>
        <td class="filler50"></td>
    </tr>
    <tr>
        <td class="filler50"></td>
        <td class="text700C"><p>set of Players</p></td>
        <td class="filler50"></td>
    </tr>
</table> */
.filler50   {
width : 50px ;}
.filler100   {
width : 100px ;}
.filler300   {
width : 300px ;}
.text200C   {
width : 200px ; text-align : center ; color : #ffff00 ; font-weight : bold ; font-size : 14pt ;}
.text600C   {
width : 600px ; text-align : center ; color : #ffff00 ; font-weight : bold ; font-size : 12pt ;}
.text700C   {
width : 700px ; text-align : center ; color : #ffff00 ; font-weight : normal ; font-size : 14pt ;}
.text700CW16 {
width : 700px ; text-align : center ; color : #ffffff ; font-weight : bold ; font-size : 16pt ;}
/* End of player table settings. */

/* Synopsis table setup. The synopsis of the play fits underneath the play list and uses the
center part of the table
Sample synopsis table:
<table summary="The synopsis">
    <tr>
        <td class="filler80"></td>
        <td class="text640J"><p>Text</p></td>
        <td class="filler80"></td>
    </tr>
</table> */
.text640J   {
width : 645px ; text-align : justify ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
/* End of player table settings. */

/* Text setups. Text can any colour. White, Black and Yellow are used here. Text is in various
sizes, defined by a numeric point value, eg 14pt. 
The format of the class is TextWWXYZ where WW is the numeric point size; 
X is the colour (Y - Yellow; W - White; B - Black; Y is the width, 1 for 100px; 2 for 200px; etc.; and Z is positioning of the text (L - Left; R - Right; C - Center; J - Justify)
Yellow. */
.Text12Y8J {
font-size : 12pt ; color : #ffff00 ; width : 800px ; text-align : justify ;}
.Text12Y8C {
font-size : 12pt ; color : #ffff00 ; width : 800px ; text-align : center ;}
.Text14Y6J  {
font-size : 14pt ; color : #ffff00 ; width : 600px ; text-align : justify ;}
.Text14Y8J  {
font-size : 14pt ; color : #ffff00 ; width : 800px ; text-align : justify ;}
.Text14Y8C  {
font-size : 14pt ; color : #ffff00 ; width : 800px ; text-align : center ;}
.Text16Y8L  {
font-size : 16pt ; color : #ffff00 ; width : 800px ; text-align : left ;}
.Text16Y8L  {
font-size : 16pt ; color : #ffff00 ; width : 800px ; text-align : left ;}
.Text16Y8C  {
font-size : 16pt ; color : #ffff00 ; width : 800px ; text-align : center ;}
.Text18Y6C  {
font-size : 18pt ; color : #ffff00 ; width : 600px ; text-align : center ;}
.Text18Y8C  {
font-size : 18pt ; color : #ffff00 ; width : 800px ; text-align : center ;}
.Text25Y6C  {
font-size : 25pt ; color : #ffff00 ; width : 600px ; text-align : center ;}
.Text25Y8C  {
font-size : 25pt ; color : #ffff00 ; width : 800px ; text-align : center ;}
.Text25R8C  {
font-size : 25pt ; color : #ff2400 ; width : 800px ;}
/* White. */
.Text10W8C {
font-size : 10pt ; color : #ffffff ; width : 800px ; text-align : center ;}
.Text12W6C {
font-size : 12pt ; color : #ffffff ; width : 600px ; text-align : center ;}
.Text12W8C {
font-size : 12pt ; color : #ffffff ; width : 800px ; text-align : center ;}
.Text12W8J {
font-size : 12pt ; color : #ffffff ; width : 800px ; text-align : justify ;}
.Text14W3L {
font-size : 14pt ; color : #ffffff ; width : 360px ; text-align : left ;}
.Text14W3R {
font-size : 14pt ; color : #ffffff ; width : 300px ; text-align : right ;}
.Text14W3C {
font-size : 14pt ; color : #ffffff ; width : 300px ; text-align : center ;}
.Text14W4R {
font-size : 14pt ; color : #ffffff ; width : 430px ; text-align : right ;}
.Text14W6C {
font-size : 14pt ; color : #ffffff ; width : 600px ; text-align : center ;}
.Text14W8C {
font-size : 14pt ; color : #ffffff ; width : 800px ; text-align : center ;}
.Text14W8J {
font-size : 14pt ; color : #ffffff ; width : 800px ; text-align : justify ;}
.Text16W4R {
font-size : 16pt ; color : #ffffff ; width : 430px ; text-align : right ;}
.Text16W8C {
font-size : 16pt ; color : #ffffff ; width : 800px ; text-align : center ;}
/* Black. */
.Text12B8J {
font-size : 12pt ; color : #000000 ; width : 800px ; text-align : justify ;}
.Text14B6L  {
font-size : 14pt ; color : #000000 ; width : 600px ; text-align : left ;}
/* End of text settings. */

/* Settings for the dividing line, two widths 600px and 800px. 
The colour is light gray and can be changed with the bgcolor parameter in the sample.
The sample code for the 600px line is:
<table border="1" cellpadding="0" cellspacing="0" summary="Line" class="line600"> 
<tr><td bgcolor="#d3d3d3" align=center> 
<table border="0" cellpadding="0" cellspacing="1" summary="Line"> 
<tr><td></td></tr></table> 
</td></tr></table>
The sample code for the 800px line is:
<table border="1" cellpadding="0" cellspacing="0" summary="Line" class="line800"> 
<tr><td bgcolor="#d3d3d3" align=center> 
<table border="0" cellpadding="0" cellspacing="1" summary="Line"> 
<tr><td></td></tr></table> 
</td></tr></table>
*/
.line600    {
width : 600px ;}
.line800    {
width : 800px ;}
/* End of dividing line. */