Line 1,634: | Line 1,634: | ||
z-index: 1; | z-index: 1; | ||
position: absolute; | position: absolute; | ||
− | color: #fff; | + | color: #fff !important; |
border: 2px solid #fff; | border: 2px solid #fff; | ||
display: block; | display: block; |
Revision as of 01:32, 19 October 2016
.learnText{
color: #fff; position: absolute; bottom: 0px; width: 100%; text-align: center; background: rgba(0, 0, 0, 0.63); padding: 5px;
} .awards_list{
list-style-type: decimal; margin-bottom: 80px;
}
.awards_list li{ margin-bottom: 10px; }
- HQ_page p{
line-height: inherit; }
- uk_meetup_container:before{
display:none !important;
} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ margin:0px; }
- content{
width:100%; }
- menuDisplay, #sideMenu, #top_title{
display:none; }
- content{
margin:0px; padding:0px; }
- globalWrapper{
padding: 0px; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;
}
nav, ul {
list-style:none;
}
html, body{ height: 100%; }
- -webkit-input-placeholder{color:#7AB8C5; font-size: 12px; letter-spacing: 2px; line-height: 14px; text-transform: uppercase; font-family: 'terminus';}
- -moz-placeholder{color:#7AB8C5; font-size: 12px; letter-spacing: 2px; line-height: 14px; text-transform: uppercase; font-family: 'terminus';}
- -ms-input-placeholder{color:#7AB8C5; font-size: 12px; letter-spacing: 2px; line-height: 14px; text-transform: uppercase; font-family: 'terminus';}
input:focus{ outline: none; } input{
padding: 5px 1%; background: #0C373E; border: 1px solid #214F58;
color:#7AB8C5; font-size: 12px; letter-spacing: 2px; line-height: 14px; text-transform: uppercase; font-family: 'terminus'; }
body{}
a, body{
font-smooth: never; -webkit-font-smoothing: none; font-size: 11px; letter-spacing: 1px; line-height: 18px; text-decoration: none;
} a:hover{ text-decoration: none; }
- .unselectable {
-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
body{ font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; overflow-x:hidden; color: #444; }
a{ color: #4444ff; }
a:hover{ text-decoration: underline; }
- , *:after, *:before {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.showFullSizeImage{ cursor: pointer; }
.imageTextWrap{ float: right; margin: 5px; }
.centerMiddle{ margin: auto; display: block; }
.italics{ font-style: italic; }
.underline{ text-decoration: underline; }
.centerTextMiddle{ text-align: center; }
/* Content Wrapper */
- container{
margin-top:-2px; }
- contentWrapper{
margin: auto; }
/* Header menu */ #menu{ width:100%; border-bottom: solid 1px rgb(169,169,169); }
#menu > ul { width:964px; margin:0 auto 0; height: 73px; } #menu > ul > li{ color: rgb(140,154,161); list-style-type: none; display: inline-block; width: 123px; text-align: center; cursor: pointer; height: 100%; vertical-align: middle; position: relative; } #menu > ul > li:hover{ color:rgb(64,64,64); background-color:rgb(240,240,240); } #logoWrapper:hover{ background-color: transparent !important; cursor: default; } #menu li:hover .sub_menu{ display: block; } #menu li div > a{
line-height: 19px; text-decoration: none; color: rgb(140,154,161); display: block; font-size: 16px; display: table-cell; vertical-align: middle;
} #logo{ width: 62px !important; height: 62px !important; background-image: url(""); background-size: 62px 62px; background-repeat: no-repeat; display: block !important; margin: 5px auto; } .sub_menu{
position: absolute; background: #fff; text-align: left; top: 74px; display: none; z-index: 3; left: -8px; width: 96px;
} .sub_menu li a{ padding: 3px 6px;
border-bottom: solid 1px rgb(169,169,169); font-size: 13px !important; line-height: 20px !important; display: block; color: rgb(140,154,161);
} .sub_menu li a:hover{ background-color: #f0f0f0; } #menu li div{
display: table; height: 100%; width: 100%;
}
/* Home Page */
- video{
margin-top: 0px; position:relative; z-index:0; } #video video{ width: 100%; }
#videoOverlay{ width: 310px; height: 400px; position: absolute; z-index: 1; color: white; left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align:center; text-transform:uppercase; line-height:60px; -webkit-transition: transform 0.3s ease-in-out; visibility:visible; } #videoOverlay:hover{ transform: scale(1.1); } #videoOverlay > p{ font-size:90px; } #videoOverlay > span{ font-size:30px; } #videoOverlay > img{ width:200px; height:200px; background-color:grey; } #videoPlayImg{ width:200px; height:200px; background-image:url(""); background-size:contain; cursor:pointer; margin:0 auto; } #stopVideoButton{ width:64px; height:64px; background-image:url(""); background-size:contain; position:absolute; bottom:80px; left:0; right:0; margin:0 auto; cursor:pointer; -webkit-transition: transform 0.3s ease-in-out; visibility:hidden; } #stopVideoButton:hover{ transform: scale(1.2); }
.pageSection{ position: relative; min-height: 360px; }
- introductionContainer{
width:100%; margin:0 auto; text-align:center; font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:21px; margin-top: -5px; margin-bottom:-65px; background: #fff; }
#introductionContainer > span{ color: #777; display: inline-block; margin-top: 60px; line-height: 25px; width:780px; }
#introductionContainer > span > strong{ line-height: 52px; font-size: 24px; } #introPlayVideoButton{ width: 460px; padding: 15px; border-radius: 5px; color: white; background-color: #2b78ea; margin: 80px auto; cursor:pointer; } #introPlayVideoButton:hover{ background-color:#056fbc; }
- learnAboutContainer{
border-top: 1px solid #d0d0d6; border-bottom: 1px solid #d0d0d6; background-color: #f3f3f3; margin-top: -3px; } .learnAboutInnerWrapper{ width: 1000px; margin:3px auto; } #learnWrapper{ text-align: center; padding-bottom: 20px; } .pageSection:before{ position: absolute; content: ; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #739ede; width: 300px; left: 50%; margin-left: -150px; top: 0px; z-index: 1; } .pageSection h2{ text-align: center; font-size: 18px; text-transform: uppercase; padding: 40px 0px 4px; letter-spacing: 2px; border-bottom: 1px solid #b7afaf; width: 500px; margin: 0 auto 30px; position: relative; z-index: 2; } .learnSection { position:relative; width: 314px; height: 200px; background: url(../images/learn.png); background-size:contain; display: inline-block; margin: 0px 7px 16px 7px; cursor:pointer; -webkit-transition: transform 0.3s ease-in-out; border:solid; } .learnSection:hover{ transform: scale(1.1); }
- interactContainer{
width: 100%; margin: auto; display:inline-block; } .interactSocial{ width: 1000px;
margin: 0px auto 20px; overflow: hidden;
} .interactIcon{ display: inline-block; float: left; } .interactIcon:nth-child(1){ position: absolute !important; left: 50%; margin-left: -42px; } .interactIcon:last-child{ float: right !important; } .interactIcon .icon{ display: inline-block; width: 40px; height: 40px; vertical-align: top; background-size: 100% !important; } .interactIcon .name{ display: inline-block; font-weight: bold; margin-top: 10px; font-size: 13px; } .interactIcon .icon.facebook{ background: url("https://static.igem.org/mediawiki/2016/9/94/T--NRP-UEA-Norwich--facebook.svg"); } .interactIcon .icon.twitter{ background: url("https://static.igem.org/mediawiki/2016/0/0e/T--NRP-UEA-Norwich--twitter.svg"); } .interactIcon .icon.instagram{ background: url("https://static.igem.org/mediawiki/2016/e/e3/T--NRP-UEA-Norwich--instagram.svg"); } #interactImages{ background-image: url('https://static.igem.org/mediawiki/2016/d/d2/T--NRP-UEA-Norwich--socBanner.png'); height: 400px; width: 100%; background-size: cover; } .interactFiler{ width: 100%; background: #3b6f8b; position: absolute; top: 136px; opacity: 0.6; z-index: 1; bottom: 0; } #socMsg{ background-image: url('https://static.igem.org/mediawiki/2016/5/52/T--NRP-UEA-Norwich--checkUsOut.png'); background-size: contain; width: 1000px; height: 100px; margin: 150px auto; left:0; right:0; position:absolute; z-index:3; } .instagramBlock{ float: left; width: 180px; } .instagramBlock img{ width: 100%; }
/* Team */
- teamSection{
width: 1000px; margin: auto; } .team{ text-align: center; position: relative; } .teamShowMore{ width: 107px; height: 100px; background-size: 100%; background-image: url(../images/arrow_left.svg); position: fixed; top: 50%; margin-top: -50px; cursor: pointer; z-index: 3; } .teamShowMore.active{ background-image: url(../images/arrow_right.svg); } #teamSupervisors{ position: fixed; right: -1000px; /* IMPORTANT must be negative of its own width */ background: #fff; width: 1000px; z-index: 3; border: 1px solid #ccc; display: none; top: 50%; height: 577px; border-radius: 30px; } #teamSupervisors li{ position: absolute; width: 56%; padding: 10px; text-align: center; } #teamSupervisors li:nth-child(1){ top: 350px; } #teamSupervisors li:last-child .leftCol{ float: right !important; } #teamSupervisors li:last-child .description{ float: left !important; } #teamSupervisors li:last-child{ top: 200px; right: 0px; } #teamSupervisors li .leftCol{ float: left; width: 50%; } #teamSupervisors li .description{ float: right; width: 50%; } .team li{ width: 28%; display: inline-block; margin-bottom: 160px; vertical-align: top; margin: 0 2% 70px 2%; } .teamImage, #teamSupervisors .teamImage{ border-radius: 100%; overflow: hidden; width: 180px; height: 180px; margin: auto; } .teamImage img, #teamSupervisors img{ width: 100%; margin-top:-15px; } .team .name, #teamSupervisors .name{ font-size: 18px; color: #000; margin: 10px 0 10px; } .team .position, #teamSupervisors .position{ font-size: 13px; color: #777676; } .team .description, #teamSupervisors .description{ font-size: 12px; letter-spacing: 0px; margin-top: 20px; }
- teamIntro{
width:800px; margin:0 auto; font-size:21px; background: #fff; border-bottom: 1px solid #d0d0d6; font-size: 13px; color: #777; line-height: 25px; }
- teamHello{
font-size: 50px;
margin-top: 60px; color: #2f6fce;
}
.HL{ font-weight:bold; color:#2f6fce; }
.legend{ color:#966b6b !important; margin-top: -35px !important;
padding-bottom: 55px; font-style: italic; font-size: 14px; width: 650px !important;
line-height:0px; } .rubic{ background: url(../images/rubic.png); width: 36px; height: 36px; vertical-align: top; }
.lightBulb{
background: url(../images/light_bulb.png); width: 27px; height: 32px; vertical-align: top;
}
.electricity_graph{ display: block; margin: auto; }
.project_fig_three{ width: 180px;
float: right; margin-top: 10px; margin-left: 60px;
}
.timeIcon{ background: url(../images/clock.png); width: 32px; height: 32px; vertical-align: top; }
.subTitle{
font-size: 20px; font-weight: bold; margin-top: 8px; margin-bottom: 20px; color: #222223;
}
.timeTitle{
margin-top: 4px; margin-left: 5px;
}
/* Sponsors */
- sponContainer{
margin-top: -1px; border-top: 1px solid #d0d0d6; z-index: 0; }
/* Footer */
- footer{
width: 100%; height: 40px; background-color: #2F4F4F; text-align: center; font-size: 10px; color: #fff; letter-spacing: 2px; text-transform: uppercase; padding-top: 10px; } .footerInnerWrapper{ width: 1000px; margin: auto; } .footerLeft{ float: left; margin-top: 10px; text-align: left; } .footerRight{ float: right; margin-top: 10px; text-align: right; } .footerRow{ margin-bottom: 5px; cursor: pointer; } .footerRow:hover, .footerRow a:hover{ color: #22ffad; text-decoration: underline; } .footerRow span{ display: inline-block; line-height: 30px; margin-left: #22ffad; } .footerRow a{ color: #fff; } .footerIcon{ width: 30px; height: 30px; display: inline-block; vertical-align: top; } .footerIcon.twitter{ background: url(../images/twitter.svg); } .footerIcon.facebook{ background: url(../images/facebook.svg); }
/*Page transition */
- block1{
background-color:#767FEA; position:fixed; z-index:4; }
- block2{
background-color:#DBE0DF; position:fixed; z-index:4; } .pageTransition{ width: 100%; } .pageTransitionAnimate{ bottom: 0px !important; left: 0px !important; top: auto !important; }
.pageBanner{ width:100%; height:550px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
background: url() no-repeat center center fixed; background-size:100%; }
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 90%; max-width: 1170px; margin: 0 auto;
} .cd-container::after {
/* clearfix */ content: ; display: table; clear: both;
}
.clear{ clear: left; }
.bold{ font-weight: bold; color: #000; }
/* --------------------------------
Main components
*/
header {
height: 200px; line-height: 200px; text-align: center; background: #303e49;
} header h1 {
color: white; font-size: 18px; font-size: 1.125rem;
} @media only screen and (min-width: 1170px) {
header { height: 300px; line-height: 300px; } header h1 { font-size: 24px; font-size: 1.5rem; }
}
- cd-timeline {
position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em;
}
- cd-timeline::before {
/* this is the vertical line */ content: ; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed;
} @media only screen and (min-width: 1170px) {
#cd-timeline { margin-top: 3em; margin-bottom: 3em; } #cd-timeline::before { left: 50%; margin-left: -2px; }
}
.cd-timeline-block {
position: relative; margin: 2em 0;
} .cd-timeline-block:after {
content: ""; display: table; clear: both;
} .cd-timeline-block:first-child {
margin-top: 0;
} .cd-timeline-block:last-child {
margin-bottom: 0;
} @media only screen and (min-width: 1170px) {
.cd-timeline-block { margin: 4em 0; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; }
}
.cd-timeline-img {
position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
} .cd-timeline-img img {
display: block; width: 24px; height: 24px; position: relative; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px;
} .cd-timeline-img.cd-picture {
background: #f9f9f9;
} .cd-timeline-img.cd-movie {
background: #c03b44;
} .cd-timeline-img.cd-location {
background: #f0ca45;
} @media only screen and (min-width: 1170px) {
.cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; }
}
@-webkit-keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); }
60% { opacity: 1; -webkit-transform: scale(1.2); }
100% { -webkit-transform: scale(1); }
} @-moz-keyframes cd-bounce-1 {
0% { opacity: 0; -moz-transform: scale(0.5); }
60% { opacity: 1; -moz-transform: scale(1.2); }
100% { -moz-transform: scale(1); }
} @keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} .cd-timeline-content {
position: relative; margin-left: 60px; background: white; border-radius: 0.25em; padding: 1em; box-shadow: 0 3px 0 #d7e4ed;
} .cd-timeline-content:after {
content: ""; display: table; clear: both;
} .cd-timeline-content h2 {
color: #303e49;
} .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px; font-size: 0.8125rem;
} .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
} .cd-timeline-content p {
margin: 1em 0; line-height: 1.6;
} .cd-timeline-content .cd-read-more {
float: right; padding: .8em 1em; background: #acb7c0; color: white; border-radius: 0.25em;
} .no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
} .cd-timeline-content .cd-date {
float: left; padding: .8em 0; opacity: .7;
} .cd-timeline-content::before {
content: ; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white;
} @media only screen and (min-width: 768px) {
.cd-timeline-content h2 { font-size: 20px; font-size: 1.25rem; } .cd-timeline-content p { font-size: 16px; font-size: 1rem; } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-size: 14px; font-size: 0.875rem; }
} @media only screen and (min-width: 1170px) {
.cd-timeline-content { margin-left: 0; padding: 1.6em; width: 45%; } .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .cd-timeline-content .cd-read-more { float: left; } .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 80%; top: 6px; font-size: 16px; font-size: 1rem; } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .cssanimations .cd-timeline-content.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; }
}
@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */ .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; }
} @-webkit-keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); }
60% { opacity: 1; -webkit-transform: translateX(20px); }
100% { -webkit-transform: translateX(0); }
} @-moz-keyframes cd-bounce-2 {
0% { opacity: 0; -moz-transform: translateX(-100px); }
60% { opacity: 1; -moz-transform: translateX(20px); }
100% { -moz-transform: translateX(0); }
} @keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); }
60% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
} @-webkit-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); }
60% { opacity: 1; -webkit-transform: translateX(-20px); }
100% { -webkit-transform: translateX(0); }
} @-moz-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -moz-transform: translateX(100px); }
60% { opacity: 1; -moz-transform: translateX(-20px); }
100% { -moz-transform: translateX(0); }
} @keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); }
60% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
- globalTemp{
position:relative; width:720px; height:610px; margin: 0 auto; margin-bottom: 30px; }
.timeSeriesImage{ position:absolute; top:100px; left:0; width:100%; height:405px; visibility:hidden; }
.currentSeriesImage{ visibility:visible; }
- changeSeriesImage{
position:absolute; bottom:0; left:0; }
- tempHeader > #leftCol{
float: left;
text-align: left; color: #c15a4f; font-weight: bold; font-size: 20px;
display:inline-block; }
- tempHeader > #leftCol > span{
font-size: 10px;
display: inline-block; color: #000; line-height: 14px;
}
- tempHeader > #rightCol{
float: right; font-size: 20px; color: #0bbd9e; margin-top: 7px;
}
.time_series{
text-align: center; margin-bottom: 36px; color: #000; font-weight: bold; font-size: 12px; margin-top: 30px;
}
- tempSlider{
width: 530px;
position: absolute; bottom: 3px; left: 115px; background-color: #c15a4f;
height:10px; }
.ui-slider-handle{
border-radius: 100%; height: 25px; width: 25px; margin-top: -3px;
border-color:#c15a4f !important; border-width:3px !important; cursor:move !important; }
.ui-slider-handle:hover, .ui-slider-handle:active, .ui-state-active{ background-color:white; }
- playTemp{
width: 30px;
height: 30px; position: absolute; bottom: -6px; left: 6px; background-image: url(../images/playTemp.png); background-repeat: no-repeat; cursor: pointer; background-position: 50%;
}
- timeline{
width: 1000px; margin: auto; position: relative; }
.timeline_vline{ position: relative; height: 100%; width: 3px; background-color: #52B36E; left: 50%; margin-left: -2px; padding-bottom: 130px; }
.timeline_vline.active{
}
.timeline_bubble{ width: 40px; height: 40px; background-color: #52B36E; margin: 0px 0px 60px -18px; border-radius: 33px; position: relative; background-image: url(http://alethia.me/media/images/star.png); background-repeat: no-repeat; background-size: 18px; background-position: 11px 11px; }
.timeline_event_header{
background: #52B36E; position: absolute; left: 62px; top: 6px; color: #fff; border-radius: 4px; width: 150px; cursor: pointer;
}
.timeline_event_header_container{ padding: 5px 10px;
text-align: center; font-weight: bold; color: #fff;
}
.timeline_event_header:hover, .timeline_event_header.active{ background-color: #00a4ff; }
.timeline_event_header:hover:before, .timeline_event_header.active:before{ border-right: 13px solid #00a4ff; }
.timeline_bubble:nth-child(2n):hover .timeline_event_header:before, .timeline_bubble:nth-child(2n) .timeline_event_header.active:before{ border-left: 13px solid ##00a4ff; }
.timeline_event_header.active .timeline_event_container{ }
.timeline_event_container{
background-color: #fff; border: 1px solid #00a4ff; color: #777; cursor: auto; overflow: hidden; height: 0px; visibility: hidden;
}
.timeline_event_inner{ padding: 8px 8px 20px; }
.timeline_event_inner p{ margin-bottom: 10px; }
.close_timeline_event{
width: 16px; height: 16px; background: url(../images/close_up.png); position: absolute; bottom: 4px; left: 50%; margin-left: -7px; cursor: pointer;
}
.timeline_event_inner img{
max-width: 130px; float: right; margin-left: 10px; margin-bottom: 10px;
}
.timeline_event_header:before{
width: 0; height: 0; border-top: 7px solid transparent; border-right: 13px solid #52B36E; border-bottom: 7px solid transparent; content: ; position: absolute; left: -13px; top: 6px;
}
.timeline_bubble:nth-child(2n) .timeline_event_header{ left: auto; right: 62px; }
.timeline_bubble:nth-child(2n) .timeline_event_header:before{
border-right: 0px; border-left: 13px solid #52B36E; left: auto; right: -13px;
}
.displayInline{
display: inline-block;
}
- showImage{
width: 500px; padding: 20px; position: fixed; left: 50%; margin-left: -250px; background: #fff; z-index: 9999; top: 10%; border: 1px solid #ccc; border-radius: 5px; display: none;
}
- showImageBG{
position: fixed; width: 100%; height: 100%; background: url(../images/transparent_bg.png); top: 0px; left: 0px; z-index: 999; display: none;
}
- closeImage{
position: absolute; top: 5px; right: 5px; background: url(../images/close.png); width: 16px; height: 16px; cursor: pointer; }
- showImage img{
width: 100%; }
.protocols{
width: 900px;
margin: auto;
}
.protocols_list{
width: 200px; background: #716d6d; color: #fff; border-right: 6px solid #57c7f1; vertical-align: top;
}
.protocols_list li.active{ background: #57c7f1; }
.protocols_list li{
padding: 11px 11px; font-size: 11px; font-weight: bold; border-bottom: 1px solid #565656; cursor: pointer;
}
.protocols_list li:hover{ background: #57c7f1; }
- protocolsSection{
width: 680px; vertical-align: top; }
- protocols_content{
padding: 30px 0; }
.protocols_sub_list{ padding: 0 20px; }
.protocols_sub_list li{ padding: 10px 0px; }
- protocols_sub_list_main > li{
display: none; }
- partsSection{
width: 900px; margin: auto; }
.tables{
border: 1px solid #b7afaf; border-bottom: 0px; border-right: 0px; border-spacing: 0; margin-top: 20px; width: 100%;
}
.tables td, .tables th{
border-bottom: 1px solid #b7afaf; border-right: 1px solid #b7afaf; text-align: center; padding: 5px;
}
.tables th{ background: #e9f8ff; }
- safetySection{
width: 900px; margin: auto; }
.safety_image{ float: right; margin-left: 40px; }
.safety_protocols_title{ margin-top: 85px; }
.safety_protocols{ margin-left: 23px; margin-bottom: 30px; }
.safety_lists{ list-style: initial; margin-left: 12px; margin-bottom: 30px; }
- attributions{
width: 900px; margin: auto; }
.attr_name{ display: inline-block; width: 120px; font-weight: bold; color: #000; }
.attr_name_title{
}
.attr_team li{ padding-top: 6px; }
.attr_team{ float: left; width: 530px; margin-bottom: 30px; padding-bottom: 20px; }
.attr_team.rightCol { float: right; width: 500px; }
.attr_team.rightCol .attr_name{ float: right; text-align: right; }
.attr_team.rightCol .attr_name_title{ text-align: right;
display: inline-block; width: 380px;
}
.attr_teamwork{
background: url(../images/teamwork.png); width: 128px; height: 125px; margin-left: 20px; margin-bottom: 20px;
}
.attr_tech p{ margin-bottom: 10px; }
.attr_additionally{ margin: 30px 0; }
- virtual_list{
list-style-type: disc; }
- virtual_list a{
display: inline-block;
width: 70px; color: #0b28bd;
}
- virtual_list a:hover{
text-decoration: underline; }
- practice_section{
width: 900px; margin: auto; }
.practices_section img{
max-width: 300px; vertical-align: top;
}
.practices_section{ overflow: hidden; margin-bottom: 30px; }
.practices_wrapper p{ margin-bottom: 15px; }
.practices_wrapper{ margin-bottom: 30px; }
.practices_button{
z-index: 1; position: absolute; color: #fff !important; border: 2px solid #fff; display: block; top: 50%; left: 50%; width: 130px; font-size: 17px; font-weight: bold; text-align: center; padding: 6px 0px; margin-left: -65px; margin-top: -17px; webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
}
.practices_image_cont:hover .practices_button{
-webkit-transform: rotatey(0deg); -moz-transform: rotatey(0deg); -ms-transform: rotatey(0deg); -o-transform: rotatey(0deg); transform: rotatey(0deg);
}
.practices_image_cont{ position: relative;
margin-left: 160px; float: right; margin-top: 12px;
}
.practices_image_cont:before{
z-index: 1;
background: rgba(70, 109, 156, 0.69); content: ; width: 100%; height: 100%; position: absolute; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
.practices_image_cont:hover:before{
-webkit-transform: rotatex(0deg); -moz-transform: rotatex(0deg); -ms-transform: rotatex(0deg); -o-transform: rotatex(0deg); transform: rotatex(0deg);
}