/* Set all paragraphs to whatever font type is required. This changes all paragraph text. */
p           {font-family : arial, sans-serif ;}

/* Fillers */
.filler20   {width : 20px ;}
.filler30   {width : 30px ;}
.filler40   {width : 40px ;}
.filler50   {width : 50px ;}
.filler60   {width : 60px ;}
.filler80   {width : 80px ;}
.filler90   {width : 90px ;}
.filler100  {width : 100px ;}
.filler140  {width : 140px ;}
.filler150  {width : 150px ;}
.filler190  {width : 190px ;}
.filler200  {width : 200px ;}
.filler240  {width : 240px ;}
.filler300  {width : 300px ;}
/* End of filler section */

/* 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 line 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 ;}

.Text16Y8J  {
font-size : 16pt ; color : #ffff00 ; width : 800px ; text-align : justify ;}
.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 ;}

/* Red */
.Text25R8C  {
font-size : 25pt ; color : #ff2400 ; width : 800px ; text-align : center ;}

/* 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 : 300px ; text-align : left ;}
.Text14W4L {
font-size : 14pt ; color : #ffffff ; width : 400px ; 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 : 400px ; 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 : 390px ; text-align : right ;}
.Text16W8C {
font-size : 16pt ; color : #ffffff ; width : 800px ; text-align : center ;}

.Text18W8C {
font-size : 18pt ; color : #ffffff ; width : 800px ; text-align : center ;}

.Text14R4L {
font-size : 14pt ; color : #ff0000 ; width : 400px ; text-align : left ;}
.Text18R8C {
font-size : 18pt ; color : #ff0000 ; width : 800px ; text-align : center ;}

/* End of text section */

/* Extra text settings where a single word or phrase needs to be enlarged or re-coloured. W=White; Y=Yellow People's names should be in yellow, actors, writers directors, etc. Titles and stuff should be white. 
Colours can be added if required, eg. B=Blue; R=Red. */
.boldW16pt  { font-size : 16pt ; color : #ffffff ; font-weight : bold ; }
.boldY16pt  { font-size : 16pt ; color : #ffff00 ; font-weight : bold ; }
.boldW18pt  { font-size : 18pt ; color : #ffffff ; font-weight : bold ; }
.boldY18pt  { font-size : 18pt ; color : #ffff00 ; font-weight : bold ; }

/* 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 : 740px ; 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:visited, a:active { 
text-decoration: underline ; color : white ;}
a:link          { 
text-decoration: underline ; color : red ;}
.whiteLink:link  {
text-decoration: underline; color: white; }
.redLink:link    {
text-decoration: underline; color: red; }

/* Picture frame puts a simulated white picture frame around the artwork. */
.pictureframe   {
border : thick ridge #ffffff ; text-align:middle;}
/* 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 ;}

/* Layouts for table picture setup. All pictures are set to the left and the table data block width
is one of the the three widths. */
.picCell100 {
width : 100px ; float : left ; vertical-align : middle ;}
.picCell150 {
width : 150px ; float : left ; vertical-align : middle ;}
.picCell200 {
width : 200px ; float : left ; vertical-align : middle ;}
/* End of table picture settings */

/* centralised picture settings. Pictures can be up to 800px wide. Subtract from 800px to get the left position. 90px wide picture gives 353px from left, 100px gives 350px, etc. More can be added as needed. */
.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 pictures that shouldn't have a border. More can be added as required. */
.nob100     {position : relative ; left : 350px ; }
.nob175     {position : relative ; left : 312px ; }
.nob200     {position : relative ; left : 300px ; }
.nob260     {position : relative ; left : 270px ; }
.nob300     {position : relative ; left : 250px ; }
.nob350     {position : relative ; left : 225px ; }
.nob400     {position : relative ; left : 200px ; }
.nob500     {position : relative ; left : 150px ; }
.nob600     {position : relative ; left : 100px ;}
.nob700     {position : relative ; left : 50px ;}

/* End of centralising picture settings */

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

/* Table gallery setups. Pictures can be placed one-up or two-up. One-up Pictures should be sized to 300px (Portrait) 500/600px (Landscape). Two-up pictures should be sized to 300px. Titles, if required, can be set up in a lower row. 3 and 4-up pictures can be used for film actors but must be limited in picture size to 100px.
Sample one-up table:
<table summary="1-up_pictures_300">
    <tr>
        <td class="filler240"></td>
        <td class="pane300"><img src="Images/xxx.jpg" alt="title" title="title" 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="1-up_pictures_400">
    <tr>
        <td class="filler200"></td>
        <td class="pane400"><img src="Images/xxx.jpg" alt="title" title="title" class="pictureframe"/></td>
        <td class="filler200"></td>
    </tr>
    <tr>
        <td class="filler200"></td>
        <td class="title400"><p>Title One</p></td>
        <td class="filler200"></td>
    </tr>
</table>
<table summary="1-up_pictures_500">
    <tr>
        <td class="filler140"></td>
        <td class="pane500"><img src="Images/xxx.jpg" alt="title" title="title" 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="1-up_pictures_600">
    <tr>
        <td class="filler90"></td>
        <td class="pane600"><img src="Images/xxx.jpg" alt="title" title="title" 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>
Sample two-up table:
<table summary="2-up_pictures 300px">
    <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>
<table summary="2-up_pictures 350px">
    <tr>
        <td class="filler30"></td>
        <td class="pane350"><img src="Images/xxx.jpg" alt="picture name" class="pictureframe"/></td>
        <td class="filler30"></td>
        <td class="pane350"><img src="Images/yyy.jpg" alt="picture name" class="pictureframe"/></td>
        <td class="filler30"></td>
    </tr>
    <tr>
        <td class="filler30"></td>
        <td class="title350"><p>Title One</p></td>
        <td class="filler30"></td>
        <td class="title350"><p>Title Two</p></td>
        <td class="filler30"></td>
    </tr>
</table>
<table summary="3/4-up_pictures">
    <tr>
        <td class="filler40"></td>
        <td class="pane210"><img src="Images/xxx.jpg" alt="picture name" class="pictureframe"/></td>
        <td class="filler40"></td>
        <td class="pane210"><img src="Images/yyy.jpg" alt="picture name" class="pictureframe"/></td>
        <td class="filler40"></td>
        <td class="pane210"><img src="Images/zzz.jpg" alt="picture name" class="pictureframe"/></td>
        <td class="filler40"></td>
    </tr>
    <tr>
        <td class="filler40"></td>
        <td class="title210"><p>Title One</p></td>
        <td class="filler40"></td>
        <td class="title210"><p>Title Two</p></td>
        <td class="filler40"></td>
        <td class="title210"><p>Title Three</p></td>
        <td class="filler40"></td>
    </tr>
</table>
Settings for the picture tables */
.pane140    {width : 140px ;  text-align : center ; }
.pane180    {width : 180px ;  text-align : center ; }
.pane210    {width : 210px ;  text-align : center ; }
.pane300    {width : 300px ; float : left ; vertical-align: middle ;}
.pane350    {width : 350px ; float : left ; vertical-align: middle ;}
.pane400    {width : 400px ; float : left ; vertical-align: middle ;}
.pane480    {width : 480px ; float : left ; vertical-align: middle ;}
.pane500    {width : 500px ; float : left ;}
.pane600    {width : 600px ; float : left ;}
.pane600C   {width : 600px ; text-align : center ;}
.title140   {width : 140px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title180   {width : 180px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title210   {width : 210px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title300   {width : 300px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title350   {width : 350px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title400   {width : 400px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title480   {width : 480px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title500   {width : 500px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title600   {width : 600px ; text-align : center ; color : #ffff00 ; font-size : 14pt ;}
.title600W  {width : 600px ; text-align : center ; color : #ffffff ; 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 over the width of the page. The second is asymetrical, allowing more space for the character. They can be used for musicians.
The cast is shown as "Character - Actor". The text size should be 12 point in white text.
Simple cast table setup. 
<table summary="The Cast">
    <tr>
        <td class="filler80"></td>
        <td class="text280L"></td>
        <td class="text80C"><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="text80C"><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="text60C"></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="text60C"><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="text20C"></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="text20C"><p>-</p></td>
        <td class="text540R"><p>Actor One</p></td>
        <td class="filler20"></td>
    </tr>
</table>  */
.text20C    {width : 20px ; text-align : center ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text60C    {width : 60px ; text-align : center ; color : #ffffff ; font-weight : bold ; font-size : 12pt ;}
.text80C    {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 ;}
.text540J  {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. There are two forms, A single actor name producing a vertical list. This should be used where the number of actiors is small, eg. 4 or 5. The second form is where there are a large number, eg. above 5, and the names are spread across the page. The tilde (~) is at present either dark or light blue but can be changed. This is achieved by using the <b></b> setting, as in <b class="bT">~</b>.
Sample player tables:
<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>Actor Name</p></td>
        <td class="filler300"></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>Actor One ~ Actor Two ~ Actor Three ~ Actor Four</p></td>
        <td class="filler50"></td>
    </tr>
</table> */
.text200C   {
width : 200px ; text-align : center ; color : #ffff00 ; font-weight : bold ; font-size : 14pt ;}
.text700C   {
width : 700px ; text-align : center ; color : #ffff00 ; font-weight : bold ; font-size : 14pt ;}
.bT     
{color : blue ; font-style: normal;}
.lbT     
{color : #99CCFF ; font-style: normal;}
.redT
{color : #FF5967 ; font-style: normal;}
/* 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. A single line can be centred whereas multiple lines can be justified.
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 : 640px ; text-align : justify ; color : #ffffff ; font-size : 14pt ;}
.text640C   {width : 640px ; text-align : center ; color : #ffffff ; font-size : 14pt ;}
/* End of player table settings. */

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