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