div.timeline { position: relative; overflow: hidden; margin: 0px auto; } /* Date Separator */ div.timeline div.date_separator { position: relative; padding: 20px 0px; clear: both; font-weight:bold; font-size:18px; font-family: "FuturaCnd","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; } div.timeline div.date_separator span { display: block; width: 150px; height: 30px; line-height: 30px; font-size: 24px; text-align: center; border: 1px solid #BBBBBB; background-color: #ffc600; color: #666666; border-radius: 5px; opacity: 0; filter:alpha(opacity=0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); } div.timeline div.date_separator.animated span { color: #07294d; opacity: 1; filter:alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } div.timeline_dual div.date_separator span, div.timeline_center div.date_separator span { margin-left: auto; margin-right: auto; } div.timeline_left div.date_separator span { margin-left: auto; margin-right: 0px; } div.timeline_right div.date_separator span { margin-left: 0px; margin-right: auto; } /* Spine */ div.timeline div.spine { position: absolute; top: 0px; bottom: 100%; width: 4px; border-radius: 2px; background-color: #CCCCCC; -webkit-transition: bottom 0.5s linear; -moz-transition: bottom 0.5s linear; -ms-transition: bottom 0.5s linear; transition: bottom 0.5s linear; } div.timeline_dual div.spine, div.timeline_center div.spine { left: 50%; margin-left: -2px; } div.timeline_left div.spine { right: 4px; } div.timeline_right div.spine { left: 4px; } div.timeline div.spine.animated { bottom: 0%; } /* Element */ div.timeline_element { position: relative; margin: 20px 0px; opacity: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } div.timeline_dual div.timeline_element_left { width: 50%; margin: 10px 0px; float: left; clear: left; } div.timeline_dual div.timeline_element_right { width: 50%; margin: 10px 0px; float: right; clear: right; } div.timeline_left div.timeline_element, div.timeline_dual div.timeline_element_left { -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -mstransform: translateX(20px); transform: translateX(20px); } div.timeline_right div.timeline_element, div.timeline_dual div.timeline_element_right { -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } div.timeline div.timeline_element.animated { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .opacityFilter div.timeline_element { visibility: hidden; } .opacityFilter div.timeline_element.animated { visibility: visible; } div.timeline_element_box { overflow: hidden; background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px; color: #37404e; text-shadow: none; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); } div.timeline_element_box:hover { border: 1px solid #07294d; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); } div.timeline_left div.timeline_element_box, div.timeline_dual div.timeline_element_left div.timeline_element_box { margin-right: 30px; } div.timeline_right div.timeline_element_box, div.timeline_dual div.timeline_element_right div.timeline_element_box { margin-left: 30px; } div.timeline_left div.timeline_element:before, div.timeline_right div.timeline_element:before, div.timeline_dual div.timeline_element_left:before, div.timeline_dual div.timeline_element_right:before { content: ''; position: absolute; display: block; width: 30px; height: 0px; border-top: 1px dashed #CCCCCC; } div.timeline_left div.timeline_element:before { right: 4px; top: 15px; } div.timeline_dual div.timeline_element_left:before { right: 0px; top: 15px; } div.timeline_right div.timeline_element:before { left: 4px; top: 35px; } div.timeline_dual div.timeline_element_right:before { left: 0px; top: 35px; } div.timeline_left div.timeline_element:after, div.timeline_right div.timeline_element:after, div.timeline_dual div.timeline_element_left:after, div.timeline_dual div.timeline_element_right:after { content: ''; position: absolute; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #BBBBBB; border: 3px solid #FFFFFF; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.timeline_left div.timeline_element:hover:after, div.timeline_right div.timeline_element:hover:after, div.timeline_dual div.timeline_element_left:hover:after, div.timeline_dual div.timeline_element_right:hover:after { background-color: #07294d; border-width: 2px; z-index: 100; } div.timeline_left div.timeline_element:after { right: 6px; top: 10px; margin-right: -5px; } div.timeline_dual div.timeline_element_left:after { right: 0px; top: 10px; margin-right: -5px; } div.timeline_right div.timeline_element:after { left: 6px; top: 30px; margin-left: -5px; } div.timeline_dual div.timeline_element_right:after { left: 0px; top: 30px; margin-left: -5px; } div.timeline_left div.timeline_element:after, div.timeline_right div.timeline_element:after, div.timeline_dual div.timeline_element_left:hover:after, div.timeline_dual div.timeline_element_right:hover:after { z-index: 100; } div.timeline_title { position: relative; overflow: hidden; margin: 10px; color: #07294d; font-family: "FuturaCnd","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: bold; font-size: 18px; } div.timeline_title span.timeline_title_label { left: 0px; right: 100px; overflow: hidden; display: block; } div.timeline_title span.timeline_title_date { display: none; } div.timeline_element_box:hover div.timeline_title span.timeline_title_date { color: #000000; } div.timeline_element div.img_container { position: relative; } div.timeline_element div.img_overlay { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -ms-transition: background 0.2s linear; transition: background 0.2s linear; } div.timeline_element.notitle div.img_overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } div.timeline_element.nocontent div.img_overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } div.timeline_element.gallery div.img_overlay { border-radius: 2px; } div.timeline_element div.img_container:hover div.img_overlay, div.timeline_element div.img_overlay.loading { background: url('/~/media/Files/engineering/includes/scripts/timeline/files/images/opacity.png') repeat; /*Fallback for IE*/ background: rgba(0,0,0,0.5); } div.timeline_element div.img_overlay span { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 30px; height: 30px; margin: auto; cursor: pointer; background: url('/~/media/Files/engineering/includes/scripts/timeline/files/images/search.png') no-repeat 50% 50%; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } div.timeline_element div.img_container:hover div.img_overlay span, div.timeline_element div.img_overlay.loading span { opacity: 1; filter:alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } div.timeline_element div.img_overlay.loading span { background: none; } div.timeline_element div.img_overlay.loading span:before, div.timeline_element div.img_overlay.loading span:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 20px; height: 20px; margin: auto; border: 2px solid #DDDDDD; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.timeline_element div.img_overlay.loading span:after { border-left-color: rgba(0, 0, 0, 0.8); -webkit-animation: rotate 0.8s linear infinite; -moz-animation: rotate 0.8s linear infinite; -ms-animation: rotate 0.8s linear infinite; animation: rotate 0.8s linear infinite; } /* Blog Post Element */ div.timeline_element.blog_post div.slider_container { position: relative; } div.timeline_element.blog_post div.slider_container img { display: block; width: 100%; } div.timeline_element.blog_post.notitle div.slider_container img { border-top-left-radius: 5px; border-top-right-radius: 5px; } div.timeline_element.blog_post.nocontent div.slider_container img { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } div.timeline_element.blog_post div.content { font-size: 16px; padding: 10px !important; line-height: 18px; min-width: 200px !important; width:inherit !important; } div.timeline_element.blog_post div.slider_container span.slider_prev, div.timeline_element.blog_post div.slider_container span.slider_next { position: absolute; z-index: 20; display: block; bottom: 5px; width: 14px; height: 14px; cursor: pointer; background-repeat: no-repeat; opacity: 0; filter:alpha(opacity=0); -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } div.timeline_element.blog_post div.slider_container:hover span.slider_prev, div.timeline_element.blog_post div.slider_container:hover span.slider_next { opacity: 1; filter:alpha(opacity=100); } div.timeline_element.blog_post div.slider_container span.slider_prev { background-image: url('/~/media/Files/engineering/includes/scripts/timeline/files/images/prev.png'); right: 24px; } div.timeline_element.blog_post div.slider_container span.slider_next { background-image: url('/~/media/Files/engineering/includes/scripts/timeline/files/images/next.png'); right: 5px; } div.timeline_element.blog_post div.readmore { padding: 10px; font-size: 12px; text-align: right } div.timeline_element.blog_post a { color: #7A0004; } div.timeline_element.blog_post div.readmore a { color: #222222; text-decoration: underline; } div.timeline_element.blog_post div.readmore a:hover { text-decoration: none; } /* iframe Element */ div.timeline_element.iframe div.content.loading:before, div.timeline_element.iframe div.content.loading:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 20px; height: 20px; margin: auto; border: 2px solid #DDDDDD; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.timeline_element.iframe div.content.loading:after { border-left-color: rgba(0, 0, 0, 0.5); -webkit-animation: rotate 0.8s linear infinite; -moz-animation: rotate 0.8s linear infinite; -ms-animation: rotate 0.8s linear infinite; animation: rotate 0.8s linear infinite; } div.iframe div.content { min-width: 200px; width: inherit; } div.timeline_element.iframe div.content iframe { display: block; width: 100%; height: 100%; border: none; border-radius: 0px 0px 5px 5px; } div.timeline_element.iframe.notitle div.content iframe { border-radius: 5px; } /* Gallery Element */ div.timeline_element.gallery div.content { font-size: 13px; margin: 10px; line-height: 18px; min-width: 200px; width: inherit; } div.timeline_element.gallery div.scroll_container { position: relative; overflow: auto; overflow-y: hidden; white-space: nowrap; margin: 10px; } div.timeline_element.gallery div.img_container { display: inline-block; margin-right: 4px; vertical-align: top; } div.timeline_element.gallery div.img_container img { display: block; border-radius: 2px; } div.timeline_element.gallery div.img_container:last-child { margin-right: 0px; } /* Lightbox */ div.timeline_overlay { position: fixed; z-index: 200; top: 0px; bottom: 0px; right: 0px; left: 0px; display: none; background: url('/~/media/Files/engineering/includes/scripts/timeline/files/images/opacity.png') repeat; /*Fallback for IE*/ background-color: rgba(0, 0, 0, 0.5); } div.timeline_overlay.open { display: block; } div.timeline_overlay div.lightbox { position: absolute; width: 64px; height: 64px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-repeat: no-repeat; background-position: 50% 50%; border: 5px solid #FFFFFF; background-color: #FFFFFF; opacity: 0; filter:alpha(opacity=0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } div.timeline_overlay div.lightbox.loaded { opacity: 1; filter:alpha(opacity=100); -webkit-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.4); -moz-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.4); -ms-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.4); box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.4); } div.timeline_overlay div.lightbox.updating { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } div.timeline_overlay div.lightbox.updating:before, div.timeline_overlay div.lightbox.updating:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 20px; height: 20px; margin: auto; border: 2px solid #DDDDDD; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.timeline_overlay div.lightbox.updating:after { border-left-color: rgba(0, 0, 0, 0.5); -webkit-animation: rotate 0.8s linear infinite; -moz-animation: rotate 0.8s linear infinite; -ms-animation: rotate 0.8s linear infinite; animation: rotate 0.8s linear infinite; } div.timeline_overlay div.lightbox div.navigation { position: absolute; top: -30px; left: -5px; right: -5px; } div.timeline_overlay div.lightbox img { display: block; width: 100%; height: 100%; filter:alpha(opacity=100); opacity: 1; -webkit-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; -ms-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } div.timeline_overlay div.lightbox.updating img { filter:alpha(opacity=0); opacity: 0; -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; } div.timeline_overlay div.lightbox span { display: block; float: left; width: 14px; height: 14px; margin-right: 10px; background-repeat: no-repeat; background-position: 50% 50%; cursor: pointer; } div.timeline_overlay div.lightbox span.prev { background-image: url('/~/media/Files/engineering/includes/scripts/timeline/files/images/prev.png'); left: 10px; } div.timeline_overlay div.lightbox span.next { background-image: url('/~/media/Files/engineering/includes/scripts/timeline/files/images/next.png'); right: 10px; } div.timeline_overlay div.lightbox a.close { display: block; float: right; width: 14px; height: 14px; background-image: url('/~/media/Files/engineering/includes/scripts/timeline/files/images/cancel.png'); } /* Social */ div.timeline img.twitter_profile { float: left; margin: 0px 10px 10px 0px; border-radius: 3px; width: auto; height: auto; } div.timeline div.facebook_left_column { float: left; width: 50px; } div.timeline div.facebook_right_column { margin-left: 50px; } div.timeline div.facebook_content { overflow: hidden; text-overflow: ellipsis; } div.timeline img.facebook_profile { border-radius: 3px; width: 40px; height: 40px; } div.timeline div.facebook_post { overflow: hidden; clear: both; font-size: 11px; margin-top: 10px; line-height: normal; border-radius: 3px; text-shadow: none; color: #777777; background-color: #F4F4F4; border: 1px solid #DDDDDD; } div.timeline div.facebook_post img.facebook_picture { max-width: 80px; margin: 5px; float: left; border-radius: 3px; } div.timeline div.facebook_type_photo div.facebook_post { border: none; } div.timeline div.facebook_type_photo div.facebook_post img.facebook_picture { max-width: 100%; width: 100%; margin: 0px; } div.timeline div.description_container { overflow: hidden; margin: 5px 5px 5px 90px; } div.timeline div.facebook_post a { display: block; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Load More */ div.timeline_loadmore { font-size: 12px; font-family: 'Helvetica Neue', Helvetica, verdana, arial, sans-serif; cursor: pointer; margin: 10px auto; width: 100px; text-align: center; padding: 10px 0px; border-radius: 4px; text-decoration: none; color: #FFFFFF; background: #07294d; } div.timeline_loadmore:hover { color: #07294d; background: #ffc600; } div.timeline_loadmore:active {; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2) inset; } div.timeline_loadmore.loading { cursor: default; color: #AAAAAA; text-shadow: 0px 1px 1px #FFFFFF; box-shadow: none; background-size: 40px 40px; background-color: #DEDEDE; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-animation: loading 1s linear infinite; -moz-animation: loading 1s linear infinite; -ms-animation: loading 1s linear infinite; animation: loading 1s linear infinite; } @-webkit-keyframes loading { from {background-position: 0px 0px;} to {background-position: 40px 0px;} } @-moz-keyframes loading { from {background-position: 0px 0px;} to {background-position: 40px 0px;} } @-ms-keyframes loading { from {background-position: 0px 0px;} to {background-position: 40px 0px;} } @keyframes loading { from {background-position: 0px 0px;} to {background-position: 40px 0px;} } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { from { -moz-transform: rotate(0); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes rotate { from { -ms-transform: rotate(0); } to { -ms-transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }