<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--header afbeelding blauw: <img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a387986e6c0d1e3fe039a/1484404861648/Roche_website_header_blauw.png" /> -->
<!--header afbeelding geel: <img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a3881e4fcb54334faf195/1484404868599/Roche_website_header_geel.png" /> -->
<!--header afbeelding groen: <img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a38862994ca2394884831/1484404873908/Roche_website_header_groen.png" /> -->
<!--header afbeelding rood: <img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a3897d2b85792688e8b41/1484404890358/Roche_website_header_rood.png" /> -->
<!--header afbeelding roos: <img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a389b15d5db2c4b9d69dd/1484404896600/Roche_website_header_roos.png" /> -->
<!--header afbeelding paars: <img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a388829687f8f4b9d4f86/1484404877221/Roche_website_header_paars.png" /> -->
<div class="container">
<div class="page-header text-center">
<h2 id="timeline" align="center">News Timeline</h2>
</div>
<ul class="timeline">
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a387986e6c0d1e3fe039a/1484404861648/Roche_website_header_blauw.png" />
</div>
<div class="timeline-body">
<h3 align="center"><b>Welcome to the news timeline</b></h3>
<p>Part of the Re-Design website is to have small timeline with news on what's happening at Roche.<br/><br/>
Every time there's something interesting to share, we will mention it here. This could be a bit of news, some cool images or a social media message that might be interesting to share.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a387986e6c0d1e3fe039a/1484404861648/Roche_website_header_blauw.png" />
</div>
<div class="timeline-body">
<h3 align="center"><b>What can you find on here?</b></h3>
<tab1><ul>
<li>The 'Why' behind it all</li>
<li>The stories of your colleagues:</li>
<ul>
<li>why they believe in the change</li>
<li>why they might still hesitate</li>
<li>what motivates them</li>
</ul>
<li>A link to everyone in their new roles</li>
<li>An overview of the disease areas</li>
<br/>
</ul></tab1>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div align=center class="timeline-heading">
<img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a387986e6c0d1e3fe039a/1484404861648/Roche_website_header_blauw.png" />
</div>
<div class="timeline-body">
<h3 align="center"><b>What are these video stories for?</b></h3>
<p>Some of you might recall on the Townhall of 13th December, Priya asked if some of you wanted to help out. <br/><br/><em>So what did we do?</em><br/><br/>
Those who signed up were dropped in front of a camera and asked them to share their story.<br/><br/>
<em>Their stories?</em><br/><br/>
This Re-Design impacts everyone at Roche. That means everyone has a story to share. A story on:</p>
<tab1><ul>
<li>how they felt when it was announced</li>
<li>what will change on a daily basis for everyone</li>
<li>what drives them to make it work</li>
</ul></tab1>
<p>We have four stories right now from Els, Nancy, Gerlinde and Pieter.<br/>
In the coming week, we'll add four more stories from other colleagues.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a387986e6c0d1e3fe039a/1484404861648/Roche_website_header_blauw.png" />
</div>
<div class="timeline-body">
<h3 align=center><b>The point of our week in Tenerife</b></h3>
<p>There was Sun, beach and a nice hotel...Even a gala dinner. But that's not the only reason we went to Tenerife.<br/><br/>
<em>No,</em> the Re-Design means a lot will change. And change can be a really good thing.<br/><br/>
But we need to talk about how we'll make that change happen. That's why we went to Tenerife. We had several workshops with partners that are experienced with change and communication. These are the two pillars that we'll need to work on the most.<br/><br/>
Moreover, we hope this week gave you the much-needed enthusiam and energy to rethink our old work habits and to adjust to our new way of working and collaborating.<br/><br/>
Want to have another look at all the presentations from the past week? <br/><a href="https://drive.google.com/drive/u/1/folders/0B4kxlcuH3gUUUGptRTVheTdNWDA" target="_blank">Click here.</a><br/>
Rather want to look back at all your colleagues and the different events? <br/><a href="https://drive.google.com/drive/u/1/folders/0B4kxlcuH3gUUckFRTUJoOFF2d0E" target="_blank">Check out the photographs.</a>
</p>
</div>
</div>
</li>
<li >
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a387986e6c0d1e3fe039a/1484404861648/Roche_website_header_blauw.png" />
</div>
<div class="timeline-body">
<h3 align="center"><b>What to expect in the future?</b></h3>
<p>We are proud of your courage for change.<br/><br/>To help you explain it, whether to our customers or relatives, here are some supporting tools put at your disposal:</p>
<tab1><ul>
<li><b>Q&A Cards</b> to make discussing difficult questions easier</li>
<li><b>Flyer</b> (in paper & digital) that explains the new way of working concisely</li>
<li><b>Animation video</b> that summarises the Re-Design in 90 seconds <em>(coming soon)</em></li>
</ul></tab1>
<p>More to come in the next weeks and months to support you through these changing times.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="https://static1.squarespace.com/static/58415597725e25c7bd599a82/t/587a387986e6c0d1e3fe039a/1484404861648/Roche_website_header_blauw.png" />
</div>
<div class="timeline-body">
<h3 align=center><b>February 2017 update</b></h3>
<p>In the past weeks, we've worked on some new items to help you understand the Re-Design story.<br/><br/>We've added two new stories from your colleagues. Check them out by scrolling up!<br/><br/>On top of that, we have created an after movie of Tenerife and results of the workshop as well as some documents to support you further:</p>
<tab1><ul>
<li><a href="https://vimeo.com/203790338/92b34f4d75" target="_blank"><b>After movie</b> of our time in Tenerife</a></li>
<li><a href="https://drive.google.com/a/roche.com/file/d/0B4kxlcuH3gUUbzRXSHYzR0FuWEE" target="_blank">Results of <b>Teaming Up To One Roche</b> workshops in Tenerife</a></li>
<li><a href="https://drive.google.com/a/roche.com/file/d/0B4kxlcuH3gUUWVdGdkQyZ01lY00" target="_blank">Roche's Re-Design <b>story</b> in PowerPoint deck</a></li>
<li><a href="https://drive.google.com/a/roche.com/file/d/0B_mlCv4CmilZbzc3cFlFRUVXa1U" target="_blank"><b>Naming</b> of the Disease Areas</a></li>
</ul></tab1>
</p>
</div>
</div>
</li>
<li class="clearfix" style="float: none;"></li>
.timeline {
list-style: none;
padding: 20px 20px 20px;
position: relative;
}
.dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
.tab1 {
padding-left: 4em;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 1px;
background-color: #b1b3b3;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
width: 50%;
float: left;
clear: left;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 95%;
float: left;
border: 1px solid #0c78bd;
/*border-radius: 2px;*/
/*padding: 20px;*/
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #005eb8;
border-right: 0 solid #005eb8;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #005eb8;
border-right: 0 solid #005eb8;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-title {
margin-top: 00;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
padding:20px;
margin-bottom: 0;
text-align:justify;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-footer-blauw{
padding:20px;
background-color:#0066b1;
}
.timeline-footer-groen{
padding:20px;
background-color:#a6bd06;
}
.timeline-footer-geel{
padding:20px;
background-color:#ffcc00;
}
.timeline-footer-rood{
padding:20px;
background-color:#e30513;
}
.timeline-footer-roos{
padding:20px;
background-color:#d7569a;
}
.timeline-footer-paars{
padding:20px;
background-color:#9a2161;
}
.tooltip{
position:absolute;
z-index:1020;
display:block;
visibility:visible;
padding:5px;
font-size:11px;
opacity:0;
filter:alpha(opacity=0);
}
.tooltip.in{
/*opacity:0;
filter:alpha(opacity=80);*/
}
.tooltip.top{
margin-top:-2px;
}
.tooltip.right{
margin-left:2px;
}
.tooltip.bottom{
margin-top:2px;
}
.tooltip.left{
margin-left:-2px;
}
.tooltip.top .tooltip-arrow{
bottom:0;
left:0;
margin-left:0;
border-left:0 solid transparent;
border-right:5px solid transparent;
border-top:0 solid #000;
}
.tooltip.left .tooltip-arrow{
bottom:0;
left:0;
margin-left:0;
border-left:0 solid transparent;
border-right:5px solid transparent;
border-top:0 solid #000;
}
.tooltip.bottom .tooltip-arrow{
bottom:0;
left:0;
margin-left:0;
border-left:0 solid transparent;
border-right:5px solid transparent;
border-top:0 solid #000;
}
.tooltip.right .tooltip-arrow{
bottom:0;
left:0;
margin-left:0;
border-left:0 solid transparent;
border-right:5px solid transparent;
border-top:0 solid #000;
}
.tooltip-inner{
width:200px;
padding:3px 8px;
color:#fff;
text-align:center;
text-decoration:none;
background-color:#313131;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tooltip-arrow{
position:absolute;
width:0;
height:0;
}
.timeline > li.timeline-inverted{
float: right;
clear: right;
margin-top: 30px;
margin-bottom: 30px;
}
.timeline > li:nth-child(2){
margin-top: 60px;
}
.timeline > li.timeline-inverted > .timeline-badge{
left: -12px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li {
margin-bottom: 20px;
position: relative;
width:100%;
float: left;
clear: left;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 28px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li.timeline-inverted{
float: left;
clear: left;
margin-top: 30px;
margin-bottom: 30px;
}
.timeline > li.timeline-inverted > .timeline-badge{
left: 28px;
}
}
$(document).ready(function(){
var my_posts = $("[rel=tooltip]");
var size = $(window).width();
for(i=0;i<my_posts.length;i++){
the_post = $(my_posts[i]);
if(the_post.hasClass('invert') && size >=767 ){
the_post.tooltip({ placement: 'left'});
the_post.css("cursor","pointer");
}else{
the_post.tooltip({ placement: 'rigth'});
the_post.css("cursor","pointer");
}
}
});
// Find all iframes
var $iframes = $( "iframe" );
// Find & save the aspect ratio for all iframes
$iframes.each(function () {
$( this ).data( "ratio", this.height / this.width )
// Remove the hardcoded width & height attributes
.removeAttr( "width" )
.removeAttr( "height" );
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
$iframes.each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
// Resize to fix all iframes on page load.
}).resize();
