<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE j:stylesheet
  PUBLIC "-//DSTC//DTD JackSVG-stylesheet 1.0//EN"
         "../dtd/jacksvg-stylesheet.dtd">

<!--
Stripes blue stylesheet for JackSVG

$Source: /projects/titanium/cvs/JackSVG/src/examples/stylesheets/stripes-blue.xml,v $
$Date: 2003/02/28 05:28:43 $
$Revision: 1.4 $

Copyright (C) 2002, DSTC Pty Ltd.
-->

<j:stylesheet version='1.0'
 width='1024' height='768' preserveAspectRatio="xMinYMin"
 generate-heading-slides='first intro-rest last intro-highlight'
 desc="Natty blue stylesheet"
 play-delay='10'

 xmlns:j="http://www.dstc.edu.au/ns/2002/JackSVG/stylesheet"
 xmlns='http://www.w3.org/2000/svg'>

<!-- Metadata -->

<j:metadata name="title"
 desc="Presentation title" required="true" use-for="title"/>
<j:metadata name="subtitle" desc="Presentation subtitle"/>
<j:metadata name="version" desc="Release number of presentation"/>
<j:metadata name="author" desc="Name of author(s)"/>
<j:metadata name="org" desc="Company or organisation"/>
<j:metadata name="copyright" desc="Copyright notice"/>
<j:metadata name="event" desc="Name of event at which presentation is given"/>
<j:metadata name="date" desc="Date of event at which presentation is given"/>
<j:metadata name="abstract"
 desc="Description of presentation" use-for="desc"/>

<!--================================================================-->
<!-- Header
     This fragment is placed at the beginning of the SVG file.
 -->

<j:fragment name="HEADER">
  <!-- Arrow for buttons -->
  <defs>
    <symbol id="arrow" viewBox="0 0 40 40" preserveAspectRatio="none"
     style='stroke-width:4'>
      <desc>Arrow</desc>
      <rect x='2' y='2' width='36' height='36' rx='8' ry='8'>
	<set attributeName="fill" attributeType="CSS"
	     to="#fff" begin="accessKey(?)" dur="2"/>
      </rect>
      <line x1='10' y1='20' x2='30' y2='20' style='stroke-linecap:round'/>
      <polyline points='20,30  30,20  20,10'
       style='stroke-linecap:round;fill:none'/>
    </symbol>

    <pattern id="bg-pat" patternUnits="userSpaceOnUse"
     x="0" y="0" width="1024" height="12">
      <rect width="1024" height="8" style="fill:black;"/>
    </pattern>

    <linearGradient id="bg-grad"
     x1="0" y1="0" x2="1024" y2="768" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#000"/>
      <stop offset="0.3" stop-color="#006"/>
      <stop offset="1" stop-color="#369"/>
    </linearGradient>

  </defs>

  <!-- Background to all slides -->
  <rect x='0' y='0' width='2048' height='1536' style="fill:url(#bg-grad)"/>
  <rect x='0' y='0' width='2048' height='1536' style="fill:url(#bg-pat);opacity:0.1"/>
</j:fragment>

<!--================================================================-->
<!-- First START slide
     This slide will be the first thing you see when you load
     the presentation. We will put all the metadata on this
     page so people who download the presentation will immediately
     know what they have. -->

<j:master slide-class="START.1"
 number-buttons-prev="2"
 number-buttons-next="1"
 number-buttons-advance="2"
 number-buttons-index="2"
 font-family="Helvetica">

  <!-- Background: put some help text here -->

  <j:fragment name="BACKGROUND">
    <text transform="translate(512,760)"
     style="font-family:Helvetica;font-size:18;text-anchor:middle;fill:#fff">
   Type "?" at any time for help information.
    </text>
  </j:fragment>

  <!--================-->
  <!-- Blocks to display metadata text -->

  <j:block para-class="title"
   margin-top="30" margin-left="30" margin-right="30" height="100"
   font-weight="bold" font-size="72" fill="#fff"
   line-wrap="single-fit" text-align="center"
   debug="none"/>

  <j:block para-class="subtitle"
   x="50" y="110" width="924" height="30"
   font-weight="bold" font-size="36" fill="#fff"
   line-wrap="single-fit" text-align="center"
   debug="none"/>

  <j:block para-class="author"
   font-size="40" fill="#999"
   x="30" y="300" width="476" height="36"
   line-wrap="multi-fit" debug="none"/>

  <j:block para-class="org"
   font-size="28" fill="#fff"
   x="30" y="250" width="472" height="28"
   line-wrap="multi-fit" debug="none"/>

  <j:block para-class="event"
   font-size="24" fill="#fff"
   x="30" y="543" width="472" height="24"
   line-wrap="single" text-align="left" debug="none"/>

  <j:block para-class="date"
   font-size="24" fill="#fff"
   x="30" y="578" width="472" height="24"
   line-wrap="single" text-align="left" debug="none"/>


  <j:block para-class="version"
   font-size="18" fill="#fff"
   x="30" y="745" width="236" height="18"
   line-wrap="single" text-align="left" debug="none"/>


  <j:block para-class="copyright"
   font-size="24" fill="#fff"
   x="30" y="678" width="432" height="24"
   line-wrap="single-fit" text-align="left" debug="none"/>


  <j:block para-class="abstract"
   font-size="30" fill="#ff6"
   x="522" y="250" width="432" height="400"
   line-wrap="multi-fit" line-height="40" debug="none"/>

  <!--================-->
  <!-- Navigation buttons -->

    <j:fragment name="BUTTONS">

    <g style="font-family:Helvetica;font-weight:bold;font-size:18;
              text-anchor:middle;fill:#ff0;">
    <rect id="{$BUTTON_ADVANCE_ID_2}"
	  x="994" y="0" width="1054" height="1536"
	  style="fill:#900;opacity:0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(1015,384),rotate(-90)"
	   display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to advance to the NEXT slide</text>

    <rect id="{$BUTTON_PREV_ID_2}"
          style="fill:#900;opacity:0" height="1536" x="0" width="30"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(10,384),rotate(90)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the PREVIOUS slide</text>

    <rect id="{$BUTTON_INDEX_ID_2}"
          style="fill:#900;opacity:0" height="30" x="32" width="960"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,22)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the INDEX slide</text>

    <rect id="{$BUTTON_NEXT_ID_1}"
          style="fill:#900;opacity:0" height="798" x="32" width="960"
	  y="738">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,760)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here jump to the NEXT slide</text>

    <g display="none">
      <polygon transform="translate(970,690)"
        points="0,0 -20,12 -90,12 -90,-12 -20,-12"
        style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(940,695)">
      Index</text>
  
      <polygon transform="translate(910,740)"
       points="0,0 -20,12 -160,12 -160,-12 -20,-12"
       style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(880,745)">
      Prev/Advance</text>

      <set dur="2" begin="accessKey(?)"
      attributeType="CSS" attributeName="display" to="inline"/>
   </g>

   </g>

    <use xlink:href="#arrow" id="{$BUTTON_ADVANCE_ID_1}" width="40" height="40"
     transform="translate(974,718)" style="fill:none;stroke:#999">
      <set attributeName="stroke" attributeType="CSS" to="black"
       begin="mouseover" end="mouseout"/>
      <animateColor
       attributeName='fill' attributeType="CSS" 
       values="green; green ; #0f0; #0f0; green"
       keyTimes="0.00; 0.35; 0.50; 0.85; 1.00" dur="2"
       repeatCount='indefinite'
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
	   begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_PREV_ID_1}" width="40" height="40"
     transform="translate(964,758),rotate(180)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="#000"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_INDEX_ID_1}" width="40" height="40"
     transform="translate(974,708),rotate(270)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="#000"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

  </j:fragment>

</j:master>

<!--================================================================-->
<!-- Second START slide
     This will be used as the "title page" slide to show before you
     start the presentation. -->
     
<j:master slide-class="START.2"
 advance-delay="2"
 number-buttons-prev="2"
 number-buttons-next="1"
 number-buttons-advance="2"
 number-buttons-index="2"
 font-family="Helvetica">

  <j:fragment name="BACKGROUND">

    <rect id="bar{$SLIDE_INTERNAL_NUMBER}"
     x='220' y='220' width='580' height='300' rx="15" ry="15"
     style="fill:#369;stroke:#fff;stroke-width:3;opacity:0.2;"/>

  </j:fragment>


  <!--================-->
  <!-- Blocks to show various metadata text -->

  <j:block para-class="title"
   y="275" margin-left="275" margin-right="200" height="100"
   font-weight="bold" font-size="200" fill="#fff"
   text-align="center" line-wrap="single-fit"
   debug="none"/>

  <j:block para-class="subtitle"
   y="360" margin-left="290" margin-right="200" height="100"
   font-weight="normal" font-size="60" fill="#ff6"
   text-align="center" line-wrap="single-fit"
   debug="none"/>


  <j:block para-class="author"
   y="450" margin-left="300" margin-right="250" height="30"
   font-weight="bold" font-size="60" fill="#999"
   line-wrap="single-fit" text-align="center"
   debug="none"/>

  <j:block para-class="org"
   y="485" margin-left="250" margin-right="250" height="30"
   font-weight="bold" font-size="24" fill="#999"
   line-wrap="single-fit" text-align="center"
   debug="none"/>

  <!--================-->
  <!-- Navigation buttons -->

  <j:fragment name="BUTTONS">

    <g style="font-family:Helvetica;font-weight:bold;font-size:18;
              text-anchor:middle;fill:#ff0;">
    <rect id="{$BUTTON_ADVANCE_ID_2}"
	  x="994" y="0" width="1054" height="1536"
	  style="fill:#900;opacity:0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(1015,384),rotate(-90)"
	   display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to advance to the NEXT slide</text>

    <rect id="{$BUTTON_PREV_ID_2}"
          style="fill:#900;opacity:0" height="1536" x="0" width="30"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(10,384),rotate(90)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the PREVIOUS slide</text>

    <rect id="{$BUTTON_INDEX_ID_2}"
          style="fill:#900;opacity:0" height="30" x="32" width="960"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,22)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the INDEX slide</text>

    <rect id="{$BUTTON_NEXT_ID_1}"
          style="fill:#900;opacity:0" height="798" x="32" width="960"
	  y="738">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,760)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here jump to the NEXT slide</text>

    <g display="none">
      <polygon transform="translate(970,690)"
        points="0,0 -20,12 -90,12 -90,-12 -20,-12"
        style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(940,695)">
      Index</text>
  
      <polygon transform="translate(910,740)"
       points="0,0 -20,12 -160,12 -160,-12 -20,-12"
       style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(880,745)">
      Prev/Advance</text>

      <set dur="2" begin="accessKey(?)"
      attributeType="CSS" attributeName="display" to="inline"/>
   </g>

   </g>

    <use xlink:href="#arrow" id="{$BUTTON_ADVANCE_ID_1}" width="40" height="40"
     transform="translate(974,718)" style="fill:none;stroke:#999">
      <set attributeName="stroke" attributeType="CSS" to="#000"
       begin="mouseover" end="mouseout"/>
      <animateColor
       attributeName='fill' attributeType="CSS" 
       values="green; green ; #0f0; #0f0; green"
       keyTimes="0.00; 0.35; 0.50; 0.85; 1.00"
       dur="2" repeatCount='indefinite'
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_PREV_ID_1}" width="40" height="40"
     transform="translate(964,758),rotate(180)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="#000"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_INDEX_ID_1}" width="40" height="40"
     transform="translate(974,708),rotate(270)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="#000"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

  </j:fragment>

  <!--================-->
  <!-- Transition effects -->

  <!-- Common transitions to fade-out text on hide -->

  <j:fragment name="ANIMATE_NEXT">
    <animate xlink:href="#{$title_ID}"
     attributeName="opacity" attributeType="CSS" from="1" to="0"
     values="1;0;0" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_OUT_BEGIN}"/>
    <animate xlink:href="#{$subtitle_ID}"
     attributeName="opacity" attributeType="CSS" from="1" to="0"
     values="1;0;0" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_OUT_BEGIN}"/>
    <animate xlink:href="#{$author_ID}"
     attributeName="opacity" attributeType="CSS" from="1" to="0"
     values="1;0;0" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_OUT_BEGIN}"/>
    <animate xlink:href="#{$org_ID}"
     attributeName="opacity" attributeType="CSS" from="1" to="0"
     values="1;0;0" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_OUT_BEGIN}"/>

    <animateTransform xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="transform" attributeType="XML" type="translate"
     from="0,0" to="-200,-200"
     begin="{$FADE_OUT_BEGIN}+1" dur="1"/>
    <animate xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="width" attributeType="XML"
     from="584" to="984"
     begin="{$FADE_OUT_BEGIN}+1" dur="1"/>
    <animate xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="height" attributeType="XML"
     from="300" to="110"
     begin="{$FADE_OUT_BEGIN}+1" dur="1"/>
  </j:fragment>

</j:master>

<!--================================================================-->
<!-- Default slide master
     This master will be used for all slides (except the starting
     slides already described above, and the heading slides described
     after it). -->

<j:master slide-class="DEFAULT"
 advance-delay="1"
 number-buttons-prev="2"
 number-buttons-next="1"
 number-buttons-advance="2"
 number-buttons-index="2"
 font-family="Helvetica"
fill="#fff"
>

  <!-- Background draws the top-bar and side-bar rectangles
       These are given unique names based on the internal number
       of the slide they appear on.  Using these names, the animation
       code can refer to these elements. -->

  <j:fragment name="BACKGROUND">
    <rect id="bar{$SLIDE_INTERNAL_NUMBER}"
     x='20' y='20' width='984' height='110' rx="15" ry="15"
     style="fill:#369;stroke:#fff;stroke-width:3;opacity:0.2;"/>
  </j:fragment>

  <!--================-->
  <!-- Blocks to show the slide title and (if present) the subtitle -->

  <j:block para-class="SLIDE_TITLE"
   margin-top="35" margin-left="40" margin-right="40" height="90"
   font-weight="bold" font-size="90" fill="#ccc" text-align="center"
   debug="none"/>

  <j:block para-class="SLIDE_SUBTITLE"
   x="50" y="95" width="924" height="25"
   font-weight="bold" font-size="36" fill="#ccc" text-align="center"
   debug="none"/>

  <!--================-->
  <!-- The body defines where the contents of the slide goes -->

  <j:block para-class="BODY"
   margin-left="60" margin-right="10" y="200" height="508"
   debug="none"/>

  <!-- These blocks define where and how to display bullet points,
       and the fragments define how to draw the bullets.
       Only the first three levels are defined, subsequent
       levels will reuse level 3. -->

  <j:block para-class="normal"
   font-size="38" fill="#fff" line-height="60" 
   margin-left="35" margin-right="35" margin-bottom="12"/>
  <j:block para-class="POINT.1"
   font-size="38" fill="#fff" line-height="44" margin-top="12"
   margin-left="35" margin-right="35" margin-bottom="12"/>
  <j:fragment name="BULLET.POINT.1">
    <rect x="0" y="18" width="14" height="14" margin-top="24" style="fill:#ccc;"/>
  </j:fragment>
  <j:block para-class="POINT.2" 
   font-size="34" fill="#fff" line-height="44" margin-right="35"
   margin-left="50" margin-top="12"/>
  <j:fragment name="BULLET.POINT.2">
    <rect x="20" y="16" width="12" height="12" margin-top="20" style="fill:#ccc;"/>
  </j:fragment> 
  <j:block para-class="POINT.3"
   font-size="30" fill="#fff"
   margin-left="70" margin-top="12"/>
  <j:fragment name="BULLET.POINT.3">
    <polygon points="40,10 40,22 50,16" margin-top="18" style="fill:#ccc;"/>
  </j:fragment>

  <!-- Custom paragraph class for use in formatting things like code fragments.
       The line-wrapping mode of "single" is used so that no line breaking
       will occur. -->
 
  <j:block para-class="code"
   desc="Fixed-width font with no line breaking"
   font-family="Courier New" font-size="42" font-weight="bold" fill="#fff"
   margin-left="35" margin-bottom="12"
   line-wrap="single"/>

  <!--================-->
  <!-- Foreground contains the slide number
       Note that this is done in the FOREGROUND fragment rather
       than as a block because we want both the number and the
       total together. -->

  <j:fragment name="FOREGROUND">
    <text x="512" y="750"
     style="font-family:Helvetica;font-weight:bold;font-size:20;fill:#003;
            text-anchor:middle;">{$SLIDE_NUMBER}/{$SLIDE_TOTAL}</text>
  </j:fragment>

  <!--================-->
  <!-- Navigation buttons -->

  <j:fragment name="BUTTONS">
    <g style="font-family:Helvetica;font-weight:bold;font-size:18;
              text-anchor:middle;fill:#ff0;">
    <rect id="{$BUTTON_ADVANCE_ID_2}"
	  x="994" y="0" width="1054" height="1536"
	  style="fill:#900;opacity:0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(1015,384),rotate(-90)"
	   display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to advance to the NEXT slide</text>

    <rect id="{$BUTTON_PREV_ID_2}"
          style="fill:#900;opacity:0" height="1536" x="0" width="30"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(10,384),rotate(90)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the PREVIOUS slide</text>

    <rect id="{$BUTTON_INDEX_ID_2}"
          style="fill:#900;opacity:0" height="30" x="32" width="960"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,22)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the INDEX slide</text>

    <rect id="{$BUTTON_NEXT_ID_1}"
          style="fill:#900;opacity:0" height="798" x="32" width="960"
	  y="738">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,760)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here jump to the NEXT slide</text>

    <g display="none">
      <polygon transform="translate(970,690)"
        points="0,0 -20,12 -90,12 -90,-12 -20,-12"
        style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(940,695)">
      Index</text>
  
      <polygon transform="translate(910,740)"
       points="0,0 -20,12 -160,12 -160,-12 -20,-12"
       style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(880,745)">
      Prev/Advance</text>

      <set dur="2" begin="accessKey(?)"
      attributeType="CSS" attributeName="display" to="inline"/>
   </g>

   </g>

    <use xlink:href="#arrow" id="{$BUTTON_ADVANCE_ID_1}" width="40" height="40"
     transform="translate(974,718)" style="fill:none;stroke:#999">
      <set attributeName="stroke" attributeType="CSS" to="#000"
       begin="mouseover" end="mouseout"/>
      <animateColor
       attributeName='fill' attributeType="CSS" 
       values="green; green ; #0f0; #0f0; green"
       keyTimes="0.00; 0.35; 0.50; 0.85; 1.00"
       dur="2" repeatCount='indefinite'
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_PREV_ID_1}" width="40" height="40"
     transform="translate(964,758),rotate(180)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="#000"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_INDEX_ID_1}" width="40" height="40"
     transform="translate(974,708),rotate(270)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="#000"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

  </j:fragment>

  <!--================-->
  <!-- Transition effects -->

  <!-- This fragment contains common fade-out for the
       slide contents, title, and subtitle. -->

  <j:fragment name="ANIMATE_NEXT">
    <animate xlink:href="#{$SLIDE_TITLE_ID}"
     attributeName="opacity" attributeType="CSS" from="1" to="0"
     begin="{$FADE_OUT_BEGIN}" dur="1"/>
    <animate xlink:href="#{$SLIDE_SUBTITLE_ID}"
     attributeName="opacity" attributeType="CSS" from="1" to="0"
     begin="{$FADE_OUT_BEGIN}" dur="1"/>
    <animate xlink:href="#{$BODY_ID}"
     attributeName="opacity" attributeType="CSS" from="1" to="0"
     begin="{$FADE_OUT_BEGIN}" dur="1"/>
  </j:fragment>

  <!-- Show effect: fade-in contents -->

  <j:fragment name="ANIMATE_PREV">
    <animate xlink:href="#{$SLIDE_TITLE_ID}"
     attributeName="opacity" attributeType="CSS"
     from="0" to="1" duration="1"
     begin="{$FADE_IN_BEGIN}" dur="1.0"/>
    <animate xlink:href="#{$SLIDE_SUBTITLE_ID}"
     attributeName="opacity" attributeType="CSS"
     from="0" to="1" duration="1"
     begin="{$FADE_IN_BEGIN}" dur="1.0"/>
    <animate xlink:href="#{$BODY_ID}"
     attributeName="opacity" attributeType="CSS"
     from="0" to="1" duration="1"
     begin="{$FADE_IN_BEGIN}" dur="1.0"/>
  </j:fragment>

</j:master>

<!--================================================================-->
<!-- Heading slide master
     This master will be used for heading slides (those generated from
     groups and sections in the presentation). -->

<j:master slide-class="HEADING"
 advance-delay="2"

 number-buttons-prev="2"
 number-buttons-next="1"
 number-buttons-advance="2"
 number-buttons-index="2"

 font-family="Helvetica">

  <!-- Background draws the top-bar.  Headings will not have any
       side-bars. -->

  <j:fragment name="BACKGROUND">
    <rect id="bar{$SLIDE_INTERNAL_NUMBER}"
     x='100' y='100' width='824' height='568' rx="15" ry="15"
     style="fill:#369;stroke:#fff;stroke-width:3;opacity:0.2;"/>
  </j:fragment>

  <!--================-->
  <!-- Blocks for text items -->

  <j:block para-class="SLIDE_TITLE"
   y="120" margin-left="130" margin-right="130" height="90"
   font-weight="bold" font-size="72" fill="#ccc" text-align="center"
   debug="none"/>

  <j:block para-class="SLIDE_SUBTITLE"
   margin-left="175" margin-right="175" y="220" height="30"
   font-weight="bold" font-size="36" fill="#ccc" text-align="center"
   debug="none"/>

  <!--================-->
  <!-- Block for the slide contents -->

  <j:block para-class="BODY"
   margin-left="200" margin-right="200" y="280" height="350"
   debug="none"/>

  <!-- Special paragraph class used by generated heading slides that
       introduce the next section. -->

  <j:block para-class="INTRO"
   font-size="42" fill="#ff0"
   margin-left="35" margin-bottom="10"/>
  <j:fragment name="BULLET.INTRO">
    <polygon style="fill:#ccc;" points="0,10 0,24 14,17"/>
  </j:fragment>

  <!-- Introduction/summary slides only use level one bullet points,
       so we only need to define one level here. -->

  <j:block para-class="POINT.1"
   font-size="42" fill="#fff"
   margin-left="35" margin-bottom="12"/>
  <j:fragment name="BULLET.POINT.1">
    <rect x="0" y="9" width="14" height="14" style="fill:#ccc;"/>
  </j:fragment>

  <!--================-->
  <!-- Foreground displays the slide numbers -->

  <j:fragment name="FOREGROUND">
    <text x="512" y="750"
     style="font-family:Helvetica;font-weight:bold;font-size:20;fill:#003;
            text-anchor:middle;">{$SLIDE_NUMBER}/{$SLIDE_TOTAL}</text>
  </j:fragment>

  <!--================-->
  <!-- Navigation buttons -->

  <j:fragment name="BUTTONS">
    <g style="font-family:Helvetica;font-weight:bold;font-size:18;
              text-anchor:middle;fill:#ff0;">
    <rect id="{$BUTTON_ADVANCE_ID_2}"
	  x="994" y="0" width="1054" height="1536"
	  style="fill:#900;opacity:0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(1015,384),rotate(-90)"
	   display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to advance to the NEXT slide</text>

    <rect id="{$BUTTON_PREV_ID_2}"
          style="fill:#900;opacity:0" height="1536" x="0" width="30"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(10,384),rotate(90)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the PREVIOUS slide</text>

    <rect id="{$BUTTON_INDEX_ID_2}"
          style="fill:#900;opacity:0" height="30" x="32" width="960"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,22)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the INDEX slide</text>

    <rect id="{$BUTTON_NEXT_ID_1}"
          style="fill:#900;opacity:0" height="798" x="32" width="960"
	  y="738">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,760)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here jump to the NEXT slide</text>

    <g display="none">
      <polygon transform="translate(970,690)"
        points="0,0 -20,12 -90,12 -90,-12 -20,-12"
        style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(940,695)">
      Index</text>
  
      <polygon transform="translate(910,740)"
       points="0,0 -20,12 -160,12 -160,-12 -20,-12"
       style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(880,745)">
      Prev/Advance</text>

      <set dur="2" begin="accessKey(?)"
      attributeType="CSS" attributeName="display" to="inline"/>
   </g>

   </g>

    <use xlink:href="#arrow" id="{$BUTTON_ADVANCE_ID_1}" width="40" height="40"
     transform="translate(974,718)" style="fill:none;stroke:#999">
      <set attributeName="stroke" attributeType="CSS" to="black"
       begin="mouseover" end="mouseout"/>
      <animateColor
       attributeName='fill' attributeType="CSS" 
       values="green; green ; #0f0; #0f0; green"
       keyTimes="0.00; 0.35; 0.50; 0.85; 1.00"
       dur="2" repeatCount='indefinite'
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_PREV_ID_1}" width="40" height="40"
     transform="translate(964,758),rotate(180)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="black"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_INDEX_ID_1}" width="40" height="40"
     transform="translate(974,708),rotate(270)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="black"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

  </j:fragment>

  <!--================-->
  <!-- Transition effects -->

  <j:fragment name="ANIMATE_NEXT">
    <animate xlink:href="#{$SLIDE_TITLE_ID}"
     attributeName="opacity" attributeType="CSS"
     values="1;0;0" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_OUT_BEGIN}"/>
    <animate xlink:href="#{$SLIDE_SUBTITLE_ID}"
     attributeName="opacity" attributeType="CSS"
     values="1;0;0" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_OUT_BEGIN}"/>
    <animate xlink:href="#{$BODY_ID}"
     attributeName="opacity" attributeType="CSS"
     values="1;0;0" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_OUT_BEGIN}"/>

    <animateTransform xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="transform" attributeType="XML" type="translate"
     from="0,0" to="-80,-80"
     begin="{$FADE_OUT_BEGIN}+1" dur="1"/>
    <animate xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="width" attributeType="XML"
     from="824" to="984"
     begin="{$FADE_OUT_BEGIN}+1" dur="1"/>
    <animate xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="height" attributeType="XML"
     from="568" to="110"
     begin="{$FADE_OUT_BEGIN}+1" dur="1"/>
  </j:fragment>

  <j:fragment name="ANIMATE_PREV">
    <animate xlink:href="#{$SLIDE_TITLE_ID}"
     attributeName="opacity" attributeType="CSS"
     values="0;0;1" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_IN_BEGIN}"/>
    <animate xlink:href="#{$SLIDE_SUBTITLE_ID}"
     attributeName="opacity" attributeType="CSS"
     values="0;0;1" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_IN_BEGIN}"/>
    <animate xlink:href="#{$BODY_ID}"
     attributeName="opacity" attributeType="CSS"
     values="0;0;1" keyTimes="0;0.5;1" dur="2"
     begin="{$FADE_IN_BEGIN}"/>

    <animateTransform xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="transform" attributeType="XML" type="translate"
     from="-80,-80" to="0,0"
     begin="{$FADE_IN_BEGIN}" dur="1"/>
    <animate xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="width" attributeType="XML"
     from="984" to="824"
     begin="{$FADE_IN_BEGIN}" dur="1"/>
    <animate xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="height" attributeType="XML"
     from="110" to="568"
     begin="{$FADE_IN_BEGIN}" dur="1"/>
  </j:fragment>

</j:master>

<!--================================================================-->
<!-- FINISH slide -->
     
<j:master slide-class="FINISH.1"
 advance-delay="0"
 number-buttons-prev="2"
 number-buttons-next="1"
 number-buttons-advance="2"
 number-buttons-index="2"
 font-family="Helvetica">

  <!-- Background -->

  <j:fragment name="BACKGROUND">

    <rect id="blackout{$SLIDE_INTERNAL_NUMBER}"
     x='0' y='0' width='2048' height='1536' style="fill:black"/>

    <rect id="bar{$SLIDE_INTERNAL_NUMBER}"
     x='20' y='20' width='984' height='110' rx="15" ry="15"
     style="fill:#369;stroke:#fff;stroke-width:3;opacity:0;"/>

    <a xlink:href="http://titanium.dstc.edu.au/xml/jacksvg/" target="_blank">
      <text x="512" y="735" id="created-with"
       style="font-family:Helvetica;font-size:14;text-anchor:middle;fill:#fff;"
      >Created with JackSVG</text>
    </a>
  </j:fragment>

  <!--================-->
  <!-- Navigation buttons -->

  <j:fragment name="BUTTONS">

    <g style="font-family:Helvetica;font-weight:bold;font-size:18;
              text-anchor:middle;fill:#ff0;">
    <rect id="{$BUTTON_ADVANCE_ID_2}"
	  x="994" y="0" width="1054" height="1536"
	  style="fill:#900;opacity:0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(1015,384),rotate(-90)"
	   display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to advance to the NEXT slide</text>

    <rect id="{$BUTTON_PREV_ID_2}"
          style="fill:#900;opacity:0" height="1536" x="0" width="30"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(10,384),rotate(90)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the PREVIOUS slide</text>

    <rect id="{$BUTTON_INDEX_ID_2}"
          style="fill:#900;opacity:0" height="30" x="32" width="960"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,22)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the INDEX slide</text>

    <rect id="{$BUTTON_NEXT_ID_1}"
          style="fill:#900;opacity:0" height="798" x="32" width="960"
	  y="738">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,760)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here jump to the NEXT slide</text>

    <g display="none">
      <polygon transform="translate(970,690)"
        points="0,0 -20,12 -90,12 -90,-12 -20,-12"
        style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(940,695)">
      Index</text>
  
      <polygon transform="translate(910,740)"
       points="0,0 -20,12 -160,12 -160,-12 -20,-12"
       style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(880,745)">
      Prev/Advance</text>

      <set dur="2" begin="accessKey(?)"
      attributeType="CSS" attributeName="display" to="inline"/>
   </g>

   </g>

    <use xlink:href="#arrow" id="{$BUTTON_ADVANCE_ID_1}" width="40" height="40"
     transform="translate(974,718)" style="fill:none;stroke:#999">
      <set attributeName="stroke" attributeType="CSS" to="#fff"
       begin="mouseover" end="mouseout"/>
      <animateColor
       attributeName='fill' attributeType="CSS" 
       values="green; green ; #0f0; #0f0; green"
       keyTimes="0.00; 0.35; 0.50; 0.85; 1.00"
       dur="2" repeatCount='indefinite'
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_PREV_ID_1}" width="40" height="40"
     transform="translate(964,758),rotate(180)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="#fff"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_INDEX_ID_1}" width="40" height="40"
     transform="translate(974,708),rotate(270)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="#fff"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

  </j:fragment>

  <!--================-->
  <!-- Transition effects -->

  <!-- Show effect: fade-out bar, fade to black -->

  <j:fragment name="ANIMATE_PREV">

    <animate xlink:href="#bar{$SLIDE_INTERNAL_NUMBER}"
     attributeName="opacity" attributeType="CSS"
     values="0.2;0" keyTimes="0;1" dur="1"
     begin="{$FADE_IN_BEGIN}"/>

    <animate xlink:href="#blackout{$SLIDE_INTERNAL_NUMBER}"
     attributeName="opacity" attributeType="CSS"
     values="0;0;1" keyTimes="0;0.6667;1" dur="3"
     begin="{$FADE_IN_BEGIN}"/>

    <animate xlink:href="#created-with"
     attributeName="opacity" attributeType="CSS"
     values="0;0;1" keyTimes="0;0.8;1" dur="5"
     begin="{$FADE_IN_BEGIN}"/>
  </j:fragment>

</j:master>

<!--================================================================-->
<!-- Index slide master -->

<j:master slide-class="INDEX"
 number-buttons-prev="2"
 number-buttons-next="1"
 number-buttons-advance="2"
 number-buttons-index="2"

 font-family="Helvetica"
 button-layer="behind-foreground">

  <!-- Background draws the word "INDEX" in a very light colour -->

  <j:fragment name="BACKGROUND">
  <text style="font-family:Helvetica;font-weight:bold;font-size:150;fill:#ccc;"
   opacity="0.1"
   pointer-events="none"
   transform="translate(150,595),rotate(-90)">INDEX</text>
  </j:fragment>

  <!--================-->
  <!-- Blocks for title, subtitle and dynamically changing labels of
       the active thumbnail -->

  <j:block para-class="title"
   margin-top="30" margin-left="30" margin-right="30" height="100"
   font-weight="bold" font-size="72" fill="#fff"
   text-align="center"
   debug="none"/>

  <j:block para-class="subtitle"
   x="50" y="110" width="924" height="30"
   font-weight="bold" font-size="36" fill="#fff"
   text-align="center"
   debug="none"/>

  <j:block para-class="THUMBNAIL_LABEL"
   x="250" y="708" width="500" height="24" fill="#fff"
   font-weight="bold" font-size="24"
   debug="none"/>

  <!--================-->

  <!-- Body block defines where the thumbnails will be drawn -->

  <j:block para-class="BODY"
   x="250" y="200" width="714" height="448"
   debug="none"/>

  <!-- This fragment defines how to draw the thumbnails.
       Note that the coordinates are at full size, but will be scaled
       down when they are drawn. Note also that we need to have SVG
       animation code to turn on and turn off the thumbnail labels. -->

  <j:fragment name="THUMBNAIL">
    <rect x='0' y='0' width='1024' height='768' style="fill:white;"/>
    <rect x='20' y='20' width='984' height='110' style="fill:#99C"/>

    <rect x='0' y='0' width='1024' height='768'
     style="stroke:red;stroke-width:60;fill:yellow;opacity:0;">
      <set attributeName="opacity" attributeType="CSS" to="0.8"
       begin="mouseover" end="mouseout"/>

      <set xlink:href="#{$THUMBNAIL_LABEL_ID}"
       attributeName="display" attributeType="CSS" to="inline"
       begin="mouseover" end="mouseout"/>
    </rect>

    <text x="512" y="600" pointer-events="none"
	  style="font-family:Helvetica;font-size:500;font-weight:bold;
                 text-anchor:middle;">{$SLIDE_NUMBER}</text>
  </j:fragment>


  <!-- A slightly different fragment is used for drawing the
       thumbnails of heading slides. -->

  <j:fragment name="THUMBNAIL.HEADING">
    <rect x='0' y='0' width='1024' height='768' style="fill:white;"/>
    <rect x='100' y='100' width='824' height='568' style="fill:#99C"/>

    <rect x='0' y='0' width='1024' height='768'
     style="stroke:red;stroke-width:60;fill:yellow;opacity:0;">
      <set attributeName="opacity" attributeType="CSS" to="0.8"
       begin="mouseover" end="mouseout"/>
      <set xlink:href="#{$THUMBNAIL_LABEL_ID}"
       attributeName="display" attributeType="CSS" to="inline"
       begin="mouseover" end="mouseout"/>
    </rect>

    <text x="512" y="550" pointer-events="none"
     style="font-family:Helvetica;font-size:500;font-weight:bold;
            text-anchor:middle;">{$SLIDE_NUMBER}</text>
  </j:fragment>


  <j:fragment name="THUMBNAIL.START">
    <rect x='0' y='0' width='1024' height='768' style="fill:white;"/>

    <rect x='0' y='0' width='1024' height='768'
     style="stroke:red;stroke-width:60;fill:yellow;opacity:0;">
      <set attributeName="opacity" attributeType="CSS" to="0.8"
       begin="mouseover" end="mouseout"/>
      <set xlink:href="#{$THUMBNAIL_LABEL_ID}"
       attributeName="display" attributeType="CSS" to="inline"
       begin="mouseover" end="mouseout"/>
    </rect>

    <text x="512" y="600" pointer-events="none"
     style="font-family:Helvetica;font-size:500;font-weight:bold;
            text-anchor:middle;">{$SLIDE_NUMBER}</text>
  </j:fragment>


  <j:fragment name="THUMBNAIL.FINISH">
    <rect x='0' y='0' width='1024' height='768' style="fill:white;"/>
    <rect x='0' y='0' width='1024' height='768'
     style="fill:none;stroke:black;stroke-width:20;"/>

    <rect x='0' y='0' width='1024' height='768'
     style="stroke:red;stroke-width:60;fill:yellow;opacity:0;">
      <set attributeName="opacity" attributeType="CSS" to="0.8"
       begin="mouseover" end="mouseout"/>
      <set xlink:href="#{$THUMBNAIL_LABEL_ID}"
       attributeName="display" attributeType="CSS" to="inline"
       begin="mouseover" end="mouseout"/>
    </rect>

    <text x="512" y="600" pointer-events="none"
     style="font-family:Helvetica;font-size:500;font-weight:bold;
            text-anchor:middle;">{$SLIDE_NUMBER}</text>
  </j:fragment>

  <!--================-->
  <!-- Foreground has some informative links -->

  <j:fragment name="FOREGROUND">
    <a xlink:href="http://titanium.dstc.edu.au/xml/jacksvg/" target="_blank">
      <text x="30" y="735"
       style="font-family:Helvetica;font-size:12;fill:#999;"
      >Created with JackSVG</text>
    </a>
  </j:fragment>

  <!--================-->
  <!-- Navigation buttons -->

  <j:fragment name="BUTTONS">
    <g style="font-family:Helvetica;font-weight:bold;font-size:18;
              text-anchor:middle;fill:#ff0;">
    <rect id="{$BUTTON_ADVANCE_ID_2}"
	  x="994" y="0" width="1054" height="1536"
	  style="fill:#900;opacity:0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(1015,384),rotate(-90)"
	   display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to advance to the NEXT slide</text>

    <rect id="{$BUTTON_PREV_ID_2}"
          style="fill:#900;opacity:0" height="1536" x="0" width="30"
	  y="0">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(10,384),rotate(90)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here to jump to the PREVIOUS slide</text>

    <rect id="{$BUTTON_NEXT_ID_1}"
          style="fill:#900;opacity:0" height="798" x="32" width="960"
	  y="738">
	<animate attributeName="opacity" attributeType="CSS"
		 values="1;1;0"
		 begin="accessKey(?)" keyTimes="0;0.5;1" dur="2"/>
    </rect>
    <text transform="translate(512,760)" display="none">
	<set attributeName="display" attributeType="CSS"
	     to="inline"
	     begin="accessKey(?)" dur="2"/>
    Click here jump to the NEXT slide</text>

    <text style="fill:#900;text-anchor:end;" 
     transform="translate(960,640)" display="none">
	<set dur="2" begin="accessKey(?)" attributeType="CSS"
         to="inline" attributeName="display"/>Hide/show buttons</text>

    <text style="fill:#900;text-anchor:end;"
     transform="translate(960,690)" display="none">
	<set dur="2" begin="accessKey(?)" attributeType="CSS"
         to="inline" attributeName="display"/>Auto play</text>

    <g display="none">
      <polygon transform="translate(970,640)"
        points="0,0 -20,12 -200,12 -200,-12 -20,-12"
        style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(940,645)">
      Hide/show buttons</text>

      <polygon transform="translate(970,690)"
        points="0,0 -20,12 -120,12 -120,-12 -20,-12"
        style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(940,695)">
      Auto play</text>
  
      <polygon transform="translate(910,740)"
       points="0,0 -20,12 -160,12 -160,-12 -20,-12"
       style="fill:yellow;stroke:#900;stroke-width:2;"/>
      <text style="fill:#900;text-anchor:end;" transform="translate(880,745)">
      Prev/Advance</text>

      <set dur="2" begin="accessKey(?)"
      attributeType="CSS" attributeName="display" to="inline"/>
   </g>

   </g>

    <use xlink:href="#arrow" id="{$BUTTON_ADVANCE_ID_1}" width="40" height="40"
     transform="translate(974,718)" style="fill:none;stroke:#999">
      <set attributeName="stroke" attributeType="CSS" to="black"
       begin="mouseover" end="mouseout"/>
      <animateColor
       attributeName='fill' attributeType="CSS" 
       values="green; green ; #0f0; #0f0; green"
       keyTimes="0.00; 0.35; 0.50; 0.85; 1.00"
       dur="2" repeatCount='indefinite'
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <use xlink:href="#arrow" id="{$BUTTON_PREV_ID_1}" width="40" height="40"
     transform="translate(964,758),rotate(180)" style="fill:none;stroke:#999">
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>
      <set attributeName="stroke" attributeType="CSS" to="black"
       begin="mouseover" end="mouseout"/>

      <set attributeName="opacity" attributeType="CSS" to="0"
       begin="hide-button-button.click" end="show-button-button.click"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
       begin="mouseover" end="mouseout"/>
      <set attributeName="opacity" attributeType="CSS" to="1"
	   begin="accessKey(?)" dur="2"/>
    </use>

    <g id="hide-button-button" transform="translate(974,618)"
     style="fill:none;stroke:#999;stroke-width:4">
      <desc>Hide buttons</desc>
      <rect x='2' y='2' width='36' height='36' rx='8' ry='8'>
	<set attributeName="fill" attributeType="CSS"
	     to="#fff" begin="accessKey(?)" dur="2"/>
      </rect>
      <line x1='12' y1='20' x2='28' y2='20' style='stroke-linecap:round'/>
  
      <set attributeName="stroke" attributeType="CSS" to="black"
       begin="mouseover" end="mouseout"/>
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>

      <set
       attributeName="display" attributeType="CSS" to="none" begin="click"/>
      <set xlink:href="#show-button-button"
       attributeName="display" attributeType="CSS" to="inline" begin="click"/>
    </g>
  
    <g id="show-button-button" transform="translate(974,618)"
     style="fill:none;stroke:#999;stroke-width:4" display="none">
      <desc>Hide buttons</desc>
      <rect x='2' y='2' width='36' height='36' rx='8' ry='8'>
	<set attributeName="fill" attributeType="CSS"
	     to="#fff" begin="accessKey(?)" dur="2"/>
      </rect>
      <line x1='12' y1='20' x2='28' y2='20' style='stroke-linecap:round'/>
      <line x1='20' y1='12' x2='20' y2='28' style='stroke-linecap:round'/>
  
      <set attributeName="stroke" attributeType="CSS" to="black"
       begin="mouseover" end="mouseout"/>
      <set attributeName="fill" attributeType="CSS" to="green"
       begin="mouseover" end="mouseout"/>

      <set
       attributeName="display" attributeType="CSS" to="none" begin="click"/>
      <set xlink:href="#hide-button-button"
       attributeName="display" attributeType="CSS" to="inline" begin="click"/>
    </g>
  
  </j:fragment>

</j:master>

<!--================================================================-->
<!-- Special fragments for the start and stop buttons that are
     used by the auto-advance feature. The start button will be
     displayed on the index slide.  The stop button will only be
     shown when in playing mode. -->

<j:fragment name="PLAY_START">
  <g id="{$BUTTON_PLAY_START_ID}" transform="translate(974,668)"
   style="fill:none;stroke:#999;stroke-width:4">
    <desc>Play button</desc>
    <rect x='2' y='2' width='36' height='36' rx='8' ry='8'>
      <set attributeName="fill" attributeType="CSS"
       to="#fff" begin="accessKey(?)" dur="2"/>
    </rect>
    <polygon id="play-button-triangle"
     points='12,30 30,20 12,10' style='stroke:none;fill:#999;'/>

    <set attributeName="stroke" attributeType="CSS" to="black"
     begin="mouseover" end="mouseout"/>
    <set xlink:href="#play-button-triangle"
     attributeName="fill" attributeType="CSS" to="black"
     begin="mouseover" end="mouseout"/>
    <animateColor
     attributeName='fill' attributeType="CSS" 
     values="green; green ; #0f0; #0f0; green"
     keyTimes="0.00; 0.35; 0.50; 0.85; 1.00" dur="2"
     repeatCount='indefinite'
     begin="mouseover" end="mouseout"/>

    <set attributeName="opacity" attributeType="CSS" to="0"
     begin="hide-button-button.click" end="show-button-button.click"/>
    <set attributeName="opacity" attributeType="CSS" to="1"
     begin="mouseover" end="mouseout"/>
    <set attributeName="opacity" attributeType="CSS" to="1"
     begin="accessKey(?)" dur="2"/>
  </g>
</j:fragment>

<j:fragment name="PLAY_STOP">
  <g id='{$BUTTON_PLAY_STOP_ID}' transform="translate(974,668)"
   style="fill:none;stroke:#999;stroke-width:4">
    <desc>Stop button</desc>
    <rect x='2' y='2' width='36' height='36' rx='8' ry='8'>
      <set attributeName="fill" attributeType="CSS"
       to="#fff" begin="accessKey(?)" dur="2"/>
    </rect>
    <rect id="stop-button-square"
     x="12" y="12" width="16" height="16" style='stroke:none;fill:#999;'/>

    <set attributeName="stroke" attributeType="CSS" to="black"
     begin="mouseover" end="mouseout"/>
    <set xlink:href="#stop-button-square"
     attributeName="fill" attributeType="CSS" to="black"
     begin="mouseover" end="mouseout"/>
    <animateColor
     attributeName='fill' attributeType="CSS" 
     values="red; red; #900; #900; red"
     keyTimes="0.00; 0.35; 0.50; 0.85; 1.00" dur="2"
     repeatCount='indefinite'
     begin="mouseover" end="mouseout"/>

    <set attributeName="opacity" attributeType="CSS" to="0"
     begin="hide-button-button.click" end="show-button-button.click"/>
    <set attributeName="opacity" attributeType="CSS" to="1"
     begin="mouseover" end="mouseout"/>
    <set attributeName="opacity" attributeType="CSS" to="1"
     begin="accessKey(?)" dur="2"/>
  </g>
</j:fragment>

<!--================================================================-->
<!-- Text span -->

<j:textspan span-class="strong"
 font-weight="bold"/>

<j:textspan span-class="em"
 font-style="italic"/>

<j:textspan span-class="url"
 fill="#ff6;"/>

<j:textspan span-class="code"
 font-family="Courier New" font-weight="bold"/>
<j:textspan span-class="code-r"
 font-family="Courier New" font-weight="bold" fill="#f66"/>
<j:textspan span-class="code-g"
 font-family="Courier New" font-weight="bold" fill="#6f6"/>
<j:textspan span-class="code-b"
 font-family="Courier New" font-weight="bold" fill="#66f"/>

</j:stylesheet>
