Source

<html>
<body>

<link rel="stylesheet" href="css/schedule.css" type="text/css">

<div id='schedule'> 

   
   <?php
      /* use a .php extension in webpages with php code */

      /* header lines */
      for($i=0; $i<25; $i++){
         echo "<div class='header_lines' style='top: ".($i*20)."px;'></div>";
      }
   ?>

   <div id='gradient_shading'></div>
   <div id='bg_SCHEDULE'>SCHEDULE</div>
   <div id='header_leaf'></div>
   <div id='bg_conference'>conference</div>
   <div id='header_conference'>conference</div>
   <div id='header_schedule'>SCHEDULE</div>

</div>
<div id="shadow"></div>

<script>
   var schedule = new Timeline("schedule", "xml/schedule.xml" );

   //======================================
   /* append a text div to the bar's div to make them scroll together */
   var bar_div=document.getElementById( "bar_past" );
   if( bar_div ){
      var header_schedule_div = document.createElement( "div" );
      header_schedule_div.id = "room";
      header_schedule_div.innerHTML = "Room 125<br>Room 200<br>Room 950";
      bar_div.appendChild( header_schedule_div );
   }

   //======================================
   function editEvent( event_title ){
      var event_id = "schedule" + event_title;
      event_id=event_id.replace(/([^a-z0-9]+)/gi, '');

      var event_div = document.getElementById( event_id );
      if ( event_div ){
         var my_div = document.createElement( "div" );
         my_div.style.position = "absolute";
         my_div.style.right = "1cm"; /* because off-screen parts are clipped, using the left property creates positioning problems */
         my_div.style.top = "-.4cm";
         my_div.style.width = "2.7cm";
         my_div.style.height = "2.7cm";
         my_div.style.backgroundImage = "url('images/postIt.png')";
         my_div.style.backgroundSize = "90%";
         my_div.style.backgroundRepeat = "no-repeat";
         my_div.style.backgroundPosition = "center";
         my_div.style.pointerEvents = "none";
         event_div.appendChild( my_div );
      }
   }

   //======================================
   function replaceAll(str, find, replace) {
      return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
   }

   //======================================
   function escapeRegExp(string) {
      return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
   }

   //======================================

</script>

</body>
</html>

/* == main timeline div (background) =================================== */

#schedule {
   position: relative;
   left: 0;
   top: 0;
   width: 100%;
   height: 13cm;

   font-family: "Trebuchet MS", "Helvetica","Sans-Serif";

   background: rgba(240, 105, 80, 1);
   border: .1cm solid rgba(150, 150, 150, .9);
   border-radius: 1.05cm;

   -moz-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
   -webkit-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
   box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
}

#shadow {
   width: 100%;
   height: 20px;
   opacity: .5;
   background-image: url('../images/shadow.png');
   background-size: 95% 100%;
   background-repeat: no-repeat;
   background-position: center;

   /* fix faint box-shadow in firefox */
   -moz-box-shadow: 0 0 0 #fff;
-webkit-box-shadow: 0 0 0 #fff;
box-shadow: 0 0 0 #fff;
}

/* preload image */
#preload-01 { background: url('../images/postIt.png') no-repeat -9999px -9999px; }

/* == custom header =================================== */

#gradient_shading { /* background shading */
   position: absolute;
   display: block;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;

   background: rgba(0, 0, 0, 0);
   background: -webkit-linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
   background: -moz-linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
   background: -ms-linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
   background: -o-linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
   background: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
}

#header_leaf {
   position: absolute;
   display: blobk;
   left: 9.6cm;
   top: .13cm;
   width: 2.63cm;
   height: 2.1cm;
   pointer-events: none; /* avoid conflicts with the timeline's UI */

   background-image: url("../images/leaf.png");
   background-size: contain;
   background-repeat: no-repeat;
}

.header_lines {
   position: absolute;
   left: 0;
   width: 3.95cm;
   height: .34cm;
   background: rgba(60, 60, 50, .3);
   pointer-events: none; /* avoid conflicts with the timeline's UI */
}

#bg_conference {
   position: absolute;
   z-index: 0;
   color: #fff;
   left: 2.63cm;
   top: -.52cm;

   font-size: 3.95cm;
   color: rgba(248, 226, 192, .1);
   font-weight: bold;
   font-family: "Arial Black", Gadget, sans-serif;

   pointer-events: none; /* avoid conflicts with the timeline's UI */

   -ms-transform: rotate(-3deg);
   -ms-transform-origin: 50% 50%;
   -webkit-transform: rotate(-3deg);
   -webkit-transform-origin: 50% 50%;
   transform: rotate(-3deg);
   transform-origin: 50% 50%;
}

#bg_SCHEDULE {
   position: absolute;
   z-index: 0;
   color: #fff;
   left: 3.15cm;
   top: 8.47cm;

   font-size: 4.21cm;
   color: rgba(60, 60, 50, .1);
   font-weight: bold;
   font-family: "Arial Black", Gadget, sans-serif;

   pointer-events: none; /* avoid conflicts with the timeline's UI */
}

#header_conference {
   position: absolute;
   z-index: 0;
   color: #fff;
   left: 2.94cm;
   top: -.29cm;

   font-size: 1.05cm;
   color: rgba(248, 226, 192, 1);
   font-weight: bold;
   font-family: "Arial Black", Gadget, sans-serif;
   text-shadow: 0 .05cm .1cm rgba(0, 0, 0, .5);

   pointer-events: none; /* avoid conflicts with the timeline's UI */
}

#header_schedule {
   position: absolute;
   z-index: 0;
   color: #fff;
   left: 1.58cm;
   top: .42cm;

   font-size: 1.3cm;
   color: rgba(60, 60, 50, 1);
   font-weight: bold;
   font-family: "Arial Black", Gadget, sans-serif;
   text-shadow: 0 .05cm .1cm rgba(0, 0, 0, .5);

   pointer-events: none; /* avoid conflicts with the timeline's UI */
}

#room {
   position: absolute;
   left: -6.05cm;
   top: .58cm;
   width: 5.26cm;

   font-size: .65cm;
   font-weight: bold;
   line-height: 1.78cm;
   text-align: right;
   color: rgba(248, 226, 192, 1);
   text-shadow: 0 .05cm .1cm rgba(0, 0, 0, .4);

   pointer-events: none; /* avoid conflicts with the timeline's UI */
}

#gap {
   position: absolute;
   width: 2.63cm;
   height: 2.63cm;
   background: rgba(255, 255, 255, 1);

   pointer-events: none; /* avoid conflicts with the timeline's UI */
}

#tile {
   position: absolute;
   width: 2.1cm;
   height: 2.1cm;
   background: rgba(230, 230, 220, 1);
   border-top-left-radius: 1.05cm;

   pointer-events: none; /* avoid conflicts with the timeline's UI */
}

/* == timeline indicator =================================== */

#indicator_container {
   display: none;
   top: 0cm;
   height: 2.5cm; /* used to anchor #indicator_text to the bottom, allowing the text to grow upward */
   z-index: 1;
}

/* == timeline bar =================================== */

#bar_container { /* timeline bar use as a background for the period events */
   display: block;
   top: 3.68cm;
   height: 6.44cm;
   z-index: 2;
}

#bar_past {
   visibility: visible;
   height: 100%; /* the same height as #bar_container */
   background: rgba(255, 255, 255, .2);
   border-radius: 2.1cm;
   border: .26cm double rgba(255, 255, 255, .1);

   -moz-box-shadow: 0 .13cm .2cm .02cm rgba(0, 0, 0, .1);
   -webkit-box-shadow: 0 .13cm .2cm .02cm rgba(0, 0, 0, .1);
   box-shadow: 0 .13cm .2cm .02cm rgba(0, 0, 0, .1);
}

#bar_future {
   visibility: hidden;
}

#bar_cap_left {
   visibility: hidden;
}

#bar_cap_right {
   visibility: hidden;
}

#bar_present {
   visibility: hidden;
}

/* == ruler =================================== */

#ruler_container {
   display: block;
   top: 0;
   z-index: 2;
}

.ruler_long_tick {
   top: 3.68cm;
   width: 1.3cm;
   height: 6.97cm;
   background: rgba(248, 226, 192, .3);
}

.ruler_long_label {
   top: 2.76cm;
   font-size: .65cm;
   color: rgba(248, 226, 192, 1);
   font-weight: bold;
   white-space: nowrap;
   text-shadow: 0 .05cm .1cm rgba(0, 0, 0, .4);
   font-family: "Arial Black", Gadget, sans-serif;
}

.ruler_medium_tick {
   width: .02cm;
   height: .4cm;
   background: rgba(0, 0, 0, 1);
}

.ruler_medium_label {
   top: .45cm;
   font-size: .35cm;
   color: rgba(255, 255, 255, 1);
   font-weight: normal;
   white-space: nowrap;
}

.ruler_short_tick {
   width: .02cm;
   height: .2cm;
   background: rgba(0, 0, 0, .4);
}

.ruler_short_label {
   top: .25cm;
   font-size: .3cm;
   color: rgba(255, 255, 255, 1);
   font-weight: normal;
   white-space: nowrap;
}

/* == date events =================================== */

#date_events_container {
   visibility: hidden;
   top: 4cm; /* used by setting's date_fill_direction and date's fill_direction */
   height: 8cm; /* used by setting's date_fill_direction and date's fill_direction */
   z-index: 4;
}

/* == period events =================================== */

#period_events_container {
   display: block;
   top: 4.65cm;
   height: 0;
   z-index: 5;
}

.period_background {
   /* left: specified programmatically */
   /* top: specified programmatically */
   /* width: specified programmatically */
   height: 1.36cm; /* period event height */
   border: .05cm solid rgba(255, 255, 255, .9);
   border-radius: .79cm;

   /* The background color of period events is specified by their categories, or */
   /* by the color XML attribute of each individual period event. */
   /* background: NA */

   -moz-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .25);
   box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .25);

   -webkit-transition: -webkit-transform .1s ease-out;
-o-transition: -o-transform .1s ease-out;
-moz-transition: -moz-transform .1s ease-out;
-ms-transition: -ms-transform .1s ease-out;
-kthtml-transition: -kthtml-transform .1s ease-out;
transition: transform .1s ease-out;
}

.period_title {
   position: absolute;
   display: block;
   left: 0;
   top: 0;
   width: 100%;
   height: 1.36cm;
   line-height: 1.36cm;
   font-size: .65cm;
   font-weight: bold;
   text-align: center;
   text-overflow: ellipsis;
   overflow: hidden; /* must be hidden to enable text-overflow:ellipsis */
   white-space: nowrap;
   color: rgba(255, 255, 255, 1);
   text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .5);
}

.period_background:hover {
   -ms-transform: scale(1.02, 1.02);
   -webkit-transform: scale(1.02, 1.02);
   transform: scale(1.02, 1.02);

   -webkit-transition: -webkit-transform .1s ease-out;
-o-transition: -o-transform .1s ease-out;
-moz-transition: -moz-transform .1s ease-out;
-ms-transition: -ms-transform .1s ease-out;
-kthtml-transition: -kthtml-transform .1s ease-out;
transition: transform .1s ease-out;
}

/* == connectors =================================== */

#connectors_container {
   display: none;
   top: 2.89cm;
   z-index: 6; /* used to place connectors either behind or in front of period events */
}

.event_connector {
   height: 8.42cm;
   opacity: .5;
   border-width: .04cm;
   border-style: solid;
}

/* == user interface buttons =================================== */

#button_prev {
   display: block;
   position: absolute;
   left: .26cm;
   bottom: .26cm;
   width: 1.58cm;
   height: 1.58cm;
   border-radius: 50%;
   opacity: .9;
   border: .05cm solid rgba(255, 255, 255, .5);

   background: rgba(200, 220, 0, 1);
   background-image: url('../images/button_prev.png');
   background-size: 70%;
   background-repeat: no-repeat;
   background-position: 30% 55%;

   -moz-box-shadow: .07cm .08cm .39cm rgba(0, 0, 0, .75);
   -webkit-box-shadow: .07cm .08cm .39cm rgba(0, 0, 0, .75);
   box-shadow: .07cm .08cm .39cm rgba(0, 0, 0, .75);

   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

#button_next {
   display: block;
   position: absolute;
   right: .26cm;
   bottom: .26cm;
   width: 1.58cm;
   height: 1.58cm;
   border-radius: 50%;
   opacity: .9;
   border: .05cm solid rgba(255, 255, 255, .5);

   background: rgba(200, 220, 0, 1);
   background-image: url('../images/button_next.png');
   background-size: 70%;
   background-repeat: no-repeat;
   background-position: 70% 55%;

   -moz-box-shadow: .07cm .08cm .39cm rgba(0, 0, 0, .75);
   -webkit-box-shadow: .07cm .08cm .39cm rgba(0, 0, 0, .75);
   box-shadow: .07cm .08cm .39cm rgba(0, 0, 0, .75);

   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

#button_zoom_out {
   display: none;
}

#button_zoom_in {
   display: none;
}

#button_goto_year {
   display: none;
}

.button {
   cursor: pointer;
   z-index: 100;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   outline: 0;
}

#button_prev:hover, #button_next:hover {
   border: .05cm solid rgba(255, 255, 255, .8);

   -moz-box-shadow: .07cm .08cm .79cm rgba(0, 0, 0, 1);
   -webkit-box-shadow: .07cm .08cm .79cm rgba(0, 0, 0, 1);
   box-shadow: .07cm .08cm .79cm rgba(0, 0, 0, 1);

   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

#button_prev:active, #button_next:active {
   opacity: 1;

   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

/* == startup screen =================================== */

#startup_screen {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background: rgba(50, 50, 50, 1);
   border-radius: 1.05cm;
}

/* == lightbox screen =================================== */

#lightbox_background {
   position: absolute;
   height: 100%;
   width: 100%;
   border-radius: 1.05cm;
   background: rgba(0, 0, 0, 1);
   z-index: 1000;
}

#lightbox_title {
   position: absolute;
   top: 0;
   width: 100%;
   font-size: .6cm;
   font-weight: bold;
   text-align: center;
   color: rgba(255, 255, 255, 1);
}

#lightbox_image {
   position: absolute;
   left: 10%;
   top: 10%;
   height: 80%;
   width: 80%;

   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

#lightbox_video {
   position: absolute;
   left: 20%;
   top: 20%;
   width: 60%;
   height: 60%;
   text-align: center;
}

#lightbox_credit {
   position: absolute;
   bottom: 0;
   width: 100%;
   font-size: .3cm;
   color: rgba(255, 255, 255, .5);
   margin: .2cm;
}

#lightbox_exit {
   display: block;
   position: absolute;
   right: .5cm;
   top: .4cm;
   width: 1cm;
   height: 1cm;
   border-radius: 50%;
   border: .07cm solid black;
   opacity: .25;

   background: rgba(255, 255, 255, 1);
   background-image: url('../images/button_x.png');
   background-size: 60%;
   background-repeat: no-repeat;
   background-position: center;
}

#lightbox_exit:hover {
   opacity: .5;

   -moz-box-shadow: 0 0 .3cm rgba(255, 255, 255, 1);
   -webkit-box-shadow: 0 0 .3cm rgba(255, 255, 255, 1);
   box-shadow: 0 0 .3cm rgba(255, 255, 255, 1);

   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

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

<timeline>

<category title="Room 1125" color="rgba(88, 197, 222, .9)" />
<category title="Room 1200" color="rgba(173, 219, 215, .9)" />
<category title="Room 950" color="rgba(230, 234, 215, .9)" />

<period title="<span style='color:#000; font-size:.4cm;'>room 125</span> Land Management" javascript_on_append="editEvent('<span style=\'color:#000; font-size:.4cm;\'>room 125</span> Land Management')" show_webpage="html/Travel_Land_Management.html" start_year="2016" start_month="1" start_day="1" start_hour="9" end_year="2016" end_month="1" end_day="1" end_hour="11" category="Room 1125"/>
<period title="<span style='color:#000; font-size:.4cm;'>room 125</span> Forest Protection" show_webpage="html/Travel_Forest_Protection.html" level="1" start_year="2016" start_month="1" start_day="1" start_hour="13" start_minute="30" end_year="2016" end_month="1" end_day="1" end_hour="15" category="Room 1125"/>
<period title="<span style='color:#000; font-size:.4cm;'>room 125</span> Ecotourism" show_webpage="html/Travel_Ecotourism.html" level="1" start_year="2016" start_month="1" start_day="1" start_hour="16" end_year="2016" end_month="1" end_day="1" end_hour="18" category="Room 1125"/>

<period title="<span style='color:#000; font-size:.4cm;'>room 200</span> National Parks" show_webpage="html/Travel_National_Parks.html" level="2" start_year="2016" start_month="1" start_day="1" start_hour="9" end_year="2016" end_month="1" end_day="1" end_hour="10" end_minute="30" category="Room 1200"/>
<period title="<span style='color:#000; font-size:.4cm;'>room 200</span> Land Management" javascript_on_append="editEvent('<span style=\'color:#000; font-size:.4cm;\'>room 200</span> Land Management')" show_webpage="html/Travel_Land_Management2.html" level="2" start_year="2016" start_month="1" start_day="1" start_hour="14" end_year="2016" end_month="1" end_day="1" end_hour="17" category="Room 1200"/>
<period title="<span style='color:#000; font-size:.4cm;'>room 200</span> Working Forests" show_webpage="html/Travel_Working_Forests.html" level="2" start_year="2016" start_month="1" start_day="1" start_hour="11" end_year="2016" end_month="1" end_day="1" end_hour="12" end_minute="30" category="Room 1200"/>

<period title="<span style='color:#000; font-size:.4cm;'>room 950</span> Water Management" show_webpage="html/Travel_Water_Management.html" level="3" start_year="2016" start_month="1" start_day="1" start_hour="10" end_year="2016" end_month="1" end_day="1" end_hour="12" category="Room 950"/>
<period title="<span style='color:#000; font-size:.4cm;'>room 950</span> Clean Air" show_webpage="html/Travel_Clean_Air.html" level="3" start_year="2016" start_month="1" start_day="1" start_hour="13" end_year="2016" end_month="1" end_day="1" end_hour="14" category="Room 950"/>
<period title="<span style='color:#000; font-size:.4cm;'>room 950</span> Wildlife Protection" show_webpage="html/Travel_Wildlife_Protection.html" level="3" start_year="2016" start_month="1" start_day="1" start_hour="15" end_year="2016" end_month="1" end_day="1" end_hour="16" end_minute="30" category="Room 950"/>


<date title="9 AM" year="2016" month="1" day="1" hour="9" />
<date title="10 AM" year="2016" month="1" day="1" hour="10" />
<date title="11 AM" year="2016" month="1" day="1" hour="11" />
<date title="12 PM" year="2016" month="1" day="1" hour="12" />
<date title="1 PM" year="2016" month="1" day="1" hour="13" />
<date title="2 PM" year="2016" month="1" day="1" hour="14" />
<date title="3 PM" year="2016" month="1" day="1" hour="15" />
<date title="4 PM" year="2016" month="1" day="1" hour="16" />
<date title="5 PM" year="2016" month="1" day="1" hour="17" />
<date title="6 PM" year="2016" month="1" day="1" hour="18" />

<settings vertical_scroll="false" interactive_bar="false" auto_prev_next="false" auto_zoom="false" launch_event="9 AM" period_gradient="false" periods_push_dates="false" period_spacing=".26cm" start_year="2016" start_month="1" start_day="1" start_hour="8" start_minute="1" end_year="2016" end_month="1" end_day="1" end_hour="18" end_minute="59" />

</timeline>