<html>
<body>

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

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

<script>
   new Timeline("universe", "xml/universe.xml" );
   
   /* edit startup screen to add image with shadow */
   var startup_screen=document.getElementById("startup_screen");
   if(startup_screen){
      startup_screen.innerHTML="<div id='startup_tiled_bg'><img id='startup_image' src='images/universe_startup.jpg' /></div>";
   }
</script>


</body>
</html>

 

 

 

HTML




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

#universe {
   position: relative;
   left: 0;
   top: 0;
   width: 100%;
   height: 17cm;

   font-family: "Whitney SSm A", "Whitney SSm B", "Lucida Grande", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;

   background-image: url("../images/background.jpg");
   background-repeat: repeat;

   background: -moz-linear-gradient(-65deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3))), url('../images/background.jpg') repeat;
   background: -webkit-linear-gradient(-65deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   background: -o-linear-gradient(-65deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   background: -ms-linear-gradient(-65deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   background: linear-gradient(155deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#44000000',GradientType=1 ), url('../images/background.jpg') repeat;

   border-radius: 1.3cm;
   border: .05cm solid white;

   -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;

}



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

#ruler_container {
   display: none;
}



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

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

#indicator_graphic {
   display: block;
   bottom: 0cm;
   border-left: .25cm solid transparent;         /* CSS trick to draw triangles */
   border-right: .25cm solid transparent;         /* CSS trick to draw triangles */
   border-top: .25cm solid rgba(255, 240, 100, 1);   /* CSS trick to draw triangles */
}

#indicator_text { /* the properties of the entire indicator text */
   display: block;
   bottom: .47cm;
   font-size: .4cm;
   font-weight: bold;
   color: #fff;
   text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .4);
}

#relative_to_present { /* the text between parentheses after actual dates. e.g. (10 years ago) */
   display: block;
   font-size: .37cm;
   opacity: .7;
}

#relative_to_big_bang { /* the distance of the current date from the the big bang */
   display: block;
   font-size: .37cm;
   opacity: .7;
}

#relative_to_cosmic_calendar { /* the current date relative to the Cosmic Calendar */
   display: block;
   font-size: .37cm;
   opacity: .7;
}

#astronomical_numbering { /* the text that appears after 0 CE */
   display: block;
   font-size: .4cm;
   color: #ff9;
   opacity: .9;
}



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

#bar_container {
   display: block;
   top: 2.5cm;
   height: 1.5cm;
   z-index: 13;
}

#bar_past {
   visibility: visible;
   height: 100%; /* the same height as #bar_container */
   background-image: url('../images/timeline_bar.png');
   background-size: auto 100%;
   background-repeat: repeat-x;

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

#bar_future {
   visibility: visible;
   height: 100%; /* the same height as #bar_container */
   background-image: url('../images/timeline_bar.png');
   background-size: auto 100%;
   background-repeat: repeat-x;
   opacity: .75;

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

#bar_cap_left {
   visibility: visible;
   width: 1.15cm;
   height: 100%; /* the same height as #bar_container */
   background: rgba(104, 114, 197, 1);
   border: solid rgba(0, 0, 0, .25) .07cm;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   border-top-left-radius: .5cm;
   border-bottom-left-radius: .5cm;

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

#bar_cap_right {
   visibility: visible;
   width: 1.15cm;
   height: 100%; /* the same height as #bar_container */
   background: rgba(104, 114, 197, 1);
   border: solid rgba(0, 0, 0, .25) .07cm;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   border-top-right-radius: .5cm;
   border-bottom-right-radius: .5cm;

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

#bar_present {
   visibility: visible;
   width: 2cm;
   height: 2.26cm;

   background-image: url('../images/push_pin.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   -ms-transform: translate(24%, -13%);
   -webkit-transform: translate(24%, -13%);
   transform: translate(24%, -13%);
}



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

#connectors_container {
   display: block;
   top: 2.5cm; /* used by setting's date_fill_direction and date's fill_direction */
   height: 1.5cm; /* used by setting's date_fill_direction and date's fill_direction */
   z-index: 14; /* used to place connectors either behind or in front of period events */
}

.event_connector {
   height: .65cm;
   opacity: 1;
   border-width: .04cm;
   border-style: solid;
}



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

#date_events_container {
   visibility: visible;
   top: 2.5cm; /* used by setting's date_fill_direction and date's fill_direction */
   height: 1.5cm; /* used by setting's date_fill_direction and date's fill_direction */
   z-index: 15;
}

.event_background {
   background: rgba(255, 255, 255, 0.9);
   border-radius: .26cm;

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

   padding: .26cm;
   -moz-box-sizing: border-box; /* padding without affecting width and height */
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

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

/*.event_background:hover {
   -moz-box-shadow: 0 .13cm .39cm rgba(0, 0, 0, .9);
   -webkit-box-shadow: 0 .13cm .39cm rgba(0, 0, 0, .9);
   box-shadow: 0 .13cm .39cm rgba(0, 0, 0, .9);

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


.event_title {
   display: block;
   font-size: .4cm;
   color: #555;
   font-weight: bold;
   text-shadow: 0 .02cm .07cm #aaa;
   margin: 0;
}

.event_date {
   display: block;
   font-size: .3cm;
   color: #888888;
   font-weight: bold;
   margin: 0;
}
   
.event_notes {
   display: block;
   font-size: .4cm;
   color: #666;
   margin: .3cm 0 .3cm 0cm;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.event_image {
   display: block;
}



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

#period_events_container {
   display: block;
   top: 2.4cm; /* used by setting's period_fill_direction */
   height: 1.7cm; /* used by setting's period_fill_direction */
   z-index: 16;
}

.period_background {
   /* left: specified programmatically */
   /* top: specified programmatically */
   /* width: specified programmatically */
   height: .75cm; /* period event height */
   
   /* 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 .02cm .05cm rgba(0, 0, 0, .3);
   -webkit-box-shadow: 0 .02cm .05cm rgba(0, 0, 0, .3);
   box-shadow: 0 .02cm .05cm rgba(0, 0, 0, .3);
}

.period_title {
   display: block;
   left: 0;
   top: 0;
   width: 100%;
   height: .75cm;
   line-height: .7cm;
   font-size: .4cm;
   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);
}


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

#button_prev {
   display: block;
   position: absolute;
   left: -.5cm;
   top: 60%;
   width: 2.5cm;
   height: 2.5cm;
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
   opacity: .7;

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

#button_next {
   display: block;
   position: absolute;
   right: -.5cm;
   top: 60%;
   width: 2.5cm;
   height: 2.5cm;
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
   opacity: .7;

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

#button_zoom_out {
   display: block;
   position: absolute;
   right: .75cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .7;

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

#button_zoom_in {
   display: block;
   position: absolute;
   right: 2.6cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .7;

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

#button_goto_year {
   display: block;
   position: absolute;
   left: .75cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .7;

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



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

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

.button:hover {
   -moz-box-shadow: 0 0 .39cm rgba(0, 0, 0, .9);
   -webkit-box-shadow: 0 0 .39cm rgba(0, 0, 0, .9);
   box-shadow: 0 0 .39cm rgba(0, 0, 0, .9);

   -ms-transform: scale(1, 1);
   -webkit-transform: scale(1, 1);
   transform: scale(1, 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:active {
   -ms-transform: scale(1.3, 1.3);
   -webkit-transform: scale(1.3, 1.3);
   transform: scale(1.3, 1.3);

   -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;
}



/* == year screen =================================== */

#goto_year_background {
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, .5);
   z-index: 1000;
   border-radius: 1.3cm;
}

#goto_year_panel {
   position: absolute;
   top: 30%;
   height: auto;
   width: 10.5cm;
   left: 50%;   
   margin-left: -5.25cm;
   font-weight: bold;
   padding: .26cm;
   border-radius: .79cm;
   font-size: .42cm;
   color: rgba(50, 50, 50, 1);
   background: rgba(255, 255, 255, 1);

   -moz-box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);
   box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);

}

#label_year {
   display: inline-block;
   font-size: .4cm;
   color: #666;
   font-weight: bold;
   text-shadow: 0 .02cm .04cm #aaa;
   margin: 0;
   white-space: nowrap;
}

#field_year {
   width: 2cm;
   height: .8cm;
   font-size: .42cm;   
padding: .1cm .2cm;
background: #eee;
   border: .02cm solid rgba(0, 0, 0, .5);
   border-radius: .3cm;
   opacity: .75;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   outline: 0;   
   -moz-box-shadow: inset .05cm .05cm .1cm rgba(0, 0, 0, .35);
   -webkit-box-shadow: inset .05cm .05cm .1cm rgba(0, 0, 0, .35);
   box-shadow: inset .05cm .05cm .1cm rgba(0, 0, 0, .35);   
}

#button_era {
   width: 2.2cm;
   height: 1.05cm;
   font-size: .42cm;
   margin:0 0 0 .26cm;
   background-color:#eee;
   border-radius: .52cm;
   border: 0;
   outline: 0;   
   cursor: pointer;
}

#button_go {
   width: 1.3cm;
   height: 1.3cm;
   font-size: .42cm;
   background-color:#eee;
   margin:0 0 0 1.05cm;
   border-radius: .65cm;
   border: 0;
   outline: 0;   
   cursor: pointer;
}


#button_era:hover, #button_go:hover {
   -moz-box-shadow: 0 0 .3cm rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 0 .3cm rgba(0, 0, 0, .5);
   box-shadow: 0 0 .3cm rgba(0, 0, 0, .5);

   -ms-transform: scale(1, 1);
   -webkit-transform: scale(1, 1);
   transform: scale(1, 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_era:active, #button_go:active {
   -ms-transform: scale(1.2, 1.2);
   -webkit-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);

   -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;
}


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

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

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

#lightbox_image {
   position: absolute;
   left: 10%;
   top: 5%;
   height: 90%;
   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;
   right: 1.3cm;
   bottom: 0;
   width: 100%;
   font-size: .3cm;
   text-align: right;
   color: rgba(255, 255, 255, .5);
   margin: .2cm;
}

#lightbox_exit {
   display: block;
   position: absolute;
   right: .5cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .5;

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


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

#startup_screen {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   border-radius: 1.3cm;
   background: rgba(0, 0, 0, 1);/*ensure that the startup screen doesn't look transparent while loading bg images */
}

/* if these CSS properties were in #startup_screen, the screen appears transparent until the tiled bg image gets loaded */
#startup_tiled_bg {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   box-sizing: border-box;
   padding: 2cm;
   border-radius: 1.3cm;
   
   /* tiled bg image with CSS gradient shading */
   background-image: url("../images/background.jpg");
   background-repeat: repeat;
   background: -moz-linear-gradient(-65deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3))), url('../images/background.jpg') repeat;
   background: -webkit-linear-gradient(-65deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   background: -o-linear-gradient(-65deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   background: -ms-linear-gradient(-65deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   background: linear-gradient(155deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%), url('../images/background.jpg') repeat;
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#44000000',GradientType=1 ), url('../images/background.jpg') repeat;
}

#startup_image {
   display: table;
   margin: auto;
   -moz-box-shadow: 0 0 .3cm rgba(0, 0, 0, .75);
   -webkit-box-shadow: 0 0 .3cm rgba(0, 0, 0, .75);
   box-shadow: 0 .3cm .6cm rgba(0, 0, 0, .75);
}

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

 

 

 

CSS

 

 

 

XML