Difference between revisions of "Team:NRP-UEA-Norwich/CSS"

Line 1: Line 1:
 +
#uk_meetup_container:before{
 +
  display:none !important;
 +
}
 
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
 
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
 
margin:0px;
 
margin:0px;

Revision as of 19:25, 18 October 2016

  1. uk_meetup_container:before{
  display:none !important;

} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ margin:0px; }

  1. content{

width:100%; }

  1. menuDisplay, #sideMenu, #top_title{

display:none; }

  1. content{

margin:0px; padding:0px; }

  1. 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 */

  1. container{

margin-top:-2px; }

  1. 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: 100px; 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 > a{ line-height:70px; text-decoration: none; color: rgb(140,154,161); display: block; font-size: 16px; display: table; height: 100%; width: 100%; } #logo{ width: 62px; height: 62px; background-image: url("T--NRP-UEA-Norwich--logo.png"); background-size: 62px 62px; background-repeat: no-repeat; display: block !important; margin: 5px auto; } .sub_menu{ position: absolute; background: #fff; width: 100%; text-align: left; top: 70px; display: none; z-index: 3; } .sub_menu li a{ padding: 3px 6px; 

   border-bottom: 1px solid;
   font-size: 13px !important;
   line-height: 20px !important;

} .sub_menu li a:hover{ background-color: #f0f0f0; } #menu li div{ display: table-cell; vertical-align: middle; line-height: 16px; }

/* Home Page */

  1. video{

margin-top: -3px; position:relative; z-index:0; } #video video{ width: 100%; }

#videoOverlay{ width: 600px; 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:60px; } #videoOverlay > span{ font-size:30px; } #videoOverlay > img{ width:200px; height:200px; background-color:grey; } #videoPlayImg{ width:200px; height:200px; background-image:url("T--NRP-UEA-Norwich--playButton.png"); background-size:contain; cursor:pointer; margin:0 auto; } #stopVideoButton{ width:64px; height:64px; background-image:url("T--NRP-UEA-Norwich--stopVideo.png"); 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; }

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

  1. 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 { 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; } .learnSection:hover{ transform: scale(1.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 */

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

  1. teamIntro{

width:800px; margin:0 auto; font-size:21px; background: #fff; border-bottom: 1px solid #d0d0d6; font-size: 13px; color: #777; line-height: 25px; }

  1. 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: 12px;
   font-weight: bold;
   margin-top: 8px;
   margin-bottom: 20px;
   color: #222223;

}

.timeTitle{ 

   margin-top: 4px;
   margin-left: 5px;

}

/* Sponsors */

  1. sponContainer{

margin-top: -1px; border-top: 1px solid #d0d0d6; z-index: 0; }

/* Footer */

  1. 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 */

  1. block1{

background-color:#767FEA; position:fixed; z-index:4; }

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

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

}

  1. cd-timeline {
 position: relative;
 padding: 2em 0;
 margin-top: 2em;
 margin-bottom: 2em;

}

  1. 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);
 }

}

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

  1. changeSeriesImage{

position:absolute; bottom:0; left:0; }

  1. tempHeader > #leftCol{

float: left; 

   text-align: left;
   color: #c15a4f;
   font-weight: bold;
   font-size: 20px;

display:inline-block; }

  1. tempHeader > #leftCol > span{

font-size: 10px; 

   display: inline-block;
   color: #000;
   line-height: 14px;

}

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

}

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

  1. 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%;

}


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

}

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

}

  1. showImageBG{
   position: fixed;
   width: 100%;
   height: 100%;
   background: url(../images/transparent_bg.png);
   top: 0px;
   left: 0px;
   z-index: 999;
   display: none;

}

  1. closeImage{

position: absolute; top: 5px; right: 5px; background: url(../images/close.png); width: 16px; height: 16px; cursor: pointer; }

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

  1. protocolsSection{

width: 680px; vertical-align: top; }

  1. protocols_content{

padding: 30px 0; }

.protocols_sub_list{ padding: 0 20px; }

.protocols_sub_list li{ padding: 10px 0px; }

  1. protocols_sub_list_main > li{

display: none; }

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

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

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

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

  1. virtual_list{

list-style-type: disc; }

  1. virtual_list a{

display: inline-block; 

   width: 70px;
   color: #0b28bd;

}

  1. virtual_list a:hover{

text-decoration: underline; }

  1. 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{ 

   position: absolute;
   color: #fff;
   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{ 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);

}