"

From 2014.igem.org

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

   margin: 0;
   padding: 0;

}

@font-face{

   font-family: ProximaSansBlack;
   src: url('../fonts/ProximaSansBlack.ttf');

}

body {

 font-family: ProximaSansBlack;
 font-weight: 400;
 line-height: 1.3;
 color: #111111; 

}

p, ul, pre {

   font-size: 18px;
   font-size: 1.125em; 

}

.logo {

   height: 405px;
   background-color: #e0c755;
   z-index: 3;

}

.content {

   height: 605px;
   background-color: #f1df6a;
   z-index: 3;

}

1. wrap {

   padding-top: 0;
   position: relative;
   z-index: 3;

}

.site-title {

   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   -webkit-transform: scale(0.5, 0.5);
   -moz-transform: scale(0.5, 0.5);
   -ms-transform: scale(0.5, 0.5);
   -o-transform: scale(0.5, 0.5);
   transform: scale(0.5, 0.5);
   position: absolute;
   z-index: 10;
   left: 50%;
   top: 8px;
   margin-left: -26px;
   background-image: url("../img/logo.png");
   background-position: center center;
   width: 52px;
   height: 52px;
   background-size: 52px 52px;
   opacity: 0; 

}

.site-title:before {

   -webkit-transition: all 0.6s ease-in-out;
   -moz-transition: all 0.6s ease-in-out;
   -o-transition: all 0.6s ease-in-out;
   -ms-transition: all 0.6s ease-in-out;
   transition: all 0.6s ease-in-out;
   content: ;
   position: absolute;
   display: block;
   background-image: url("../img/logo-outer.png");
   background-position: center center;
   width: 52px;
   height: 52px;
   background-size: 52px 52px;
   -webkit-transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
   -moz-transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
   -ms-transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
   -o-transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
   transform: rotate(0deg) rotateX(0deg) rotateY(0deg); 

}

.site-title:after {

   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   content: ;
   position: absolute;
   top: 42px;
   padding-top: 10px;
   padding-bottom: 20px;
   left: -12px;
   display: block;
   background-image: url("../img/wordmark.png");
   background-position: center center;
   background-repeat: no-repeat;
   width: 75px;
   height: 13px;
   background-size: 75px 13px;
   opacity: 0; 

}

a {

   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   color: #e8cd4d; 

}

a:hover, a:focus, a:active {

   color: #111111; 

}

[role="banner"] {

   -webkit-transform: translateZ(0);
   position: absolute;
   width: 100%;
   top: 0;
   z-index: 10; 
   background-color: #e8cd4d;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

}

[role="banner"]:after {

   content: "";
   display: table;
   clear: both; 

}

.flex {

   position: relative;
   clear: both;
   padding: 5px 10px;
   display: block;
   max-width: 1024px;
   max-width: 64rem;
   margin: 0 auto; 

}

.flex:after {

   content: "";
   display: table;
   clear: both; 

}

[role="banner"] > .flex {

   padding-top: 0;
   padding-bottom: 0; 

}

h1 {

   color: #111111;
   font-weight: 400;
   margin-top: 30px;
   text-transform: uppercase; 

}

[role="banner"] h1 {

   padding: 0;
   margin: 0; 

}

[role="navigation"] {

   padding: 18px 10px 20px; 

}

[role="navigation"] {

   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   -ms-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
   display: block;
   position: relative;
   z-index: 10;
   overflow: hidden;
   width: 100%;
   padding: 18px 10px; 

}

[role="navigation"]:after {

   content: "";
   display: table;
   clear: both; 

}

[role="navigation"] ul {

   list-style-type: none;
   display: inline-block;
   text-align: center;
   display: block; 

}

[role="navigation"] ul:after {

   content: "";
   display: table;
   clear: both; 

}

[role="navigation"] ul li {

   display: inline-block;
   text-align: center;
   margin: 0;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

}

.epsilon {

   font-size: 13px;
   font-size: 0.8125rem; 

}

[role="navigation"] ul li {

   width: 20%;

}

[role="navigation"] ul li a {

   font-size: 16px;
   font-size: 1rem;
   padding: 4px 25px;
   font-family: sans-serif;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   display: block;
   background: none;
   color: #ac9733;
   padding: 4px 10px; 

}

[role="navigation"] ul li a:hover, [role="navigation"] ul li a:focus, [role="navigation"] ul li a:active {

   color: #efe771; 

}

[role="navigation"] ul li a.current {

   color: white; 

}

[role="banner"].sticky {

   position: fixed;
   overflow: hidden;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 10;

}

[role="banner"].sticky [role="navigation"] ul li:nth-of-type(1) {

   padding: 0 10px 0 0; 

}

[role="banner"].sticky [role="navigation"] ul li:nth-of-type(2) {

   padding: 0 80px 0 0; 

}

[role="banner"].sticky [role="navigation"] ul li:nth-of-type(3) {

   padding: 0 0 0 80px; 

}

[role="banner"].sticky [role="navigation"] ul li:nth-of-type(4) {

   padding: 0 0 0 10px; 

}

[role="banner"].sticky .site-title {

   display: block;

}

[role="banner"].sticky .site-title {

   position: absolute;
   opacity: 1;
   -webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
   -ms-transform: scale(1, 1);
   -o-transform: scale(1, 1);
   transform: scale(1, 1); 
   height: 52px;

}

[role="banner"].sticky .site-title:before {

   -webkit-transform: rotate(360deg) rotateX(0deg) rotateY(0deg);
   -moz-transform: rotate(360deg) rotateX(0deg) rotateY(0deg);
   -ms-transform: rotate(360deg) rotateX(0deg) rotateY(0deg);
   -o-transform: rotate(360deg) rotateX(0deg) rotateY(0deg);
   transform: rotate(360deg) rotateX(0deg) rotateY(0deg); 
   opacity: 1;

}

[role="banner"].sticky .site-title:after {

   display: block; 

}

[role="banner"].sticky .site-title:hover {

   -webkit-transform: translate(0, -35px);
   -moz-transform: translate(0, -35px);
   -ms-transform: translate(0, -35px);
   -o-transform: translate(0, -35px);
   transform: translate(0, -35px); 

}

[role="banner"].sticky .site-title:hover:before {

   -webkit-transform: rotate(-180deg) rotateX(0deg) rotateY(0deg);
   -moz-transform: rotate(-180deg) rotateX(0deg) rotateY(0deg);
   -ms-transform: rotate(-180deg) rotateX(0deg) rotateY(0deg);
   -o-transform: rotate(-180deg) rotateX(0deg) rotateY(0deg);
   transform: rotate(-180deg) rotateX(0deg) rotateY(0deg); 

}

[role="banner"].sticky .site-title:hover:after {

   opacity: 1;

}

.ir {

   font-size: 0;
   color: transparent;
   display: block;
   background-repeat: no-repeat;
   background-position: left top;

}

/* sumbenu with transitions */ .cbp-tm-submenu {

   position: absolute;
   display: block;
   visibility: hidden;
   opacity: 0;
   padding: 0;
   text-align: left;
   pointer-events: none;
   -webkit-transition: visibility 0s, opacity 0s;
   -moz-transition: visibility 0s, opacity 0s;
   transition: visibility 0s, opacity 0s;

}

.cbp-tm-show .cbp-tm-submenu {

   width: 16em;
   left: 50%;
   margin: 0 0 0 -8em;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   -webkit-transition: visibility 0s, opacity 0.3s;
   -moz-transition: visibility 0s, opacity 0.3s;
   transition: visibility 0s, opacity 0.3s;

}

.cbp-tm-show-above .cbp-tm-submenu {

   bottom: 100%;
   padding-bottom: 10px;

}

.cbp-tm-show-below .cbp-tm-submenu {

   top: 100%;
   padding-top: 10px;

}

/* extreme cases: not enough space on the sides */ .cbp-tm-nospace-right .cbp-tm-submenu {

   right: 0;
   left: auto;

}

.cbp-tm-nospace-left .cbp-tm-submenu {

   left: 0;

}

/* last menu item has to fit on the screen */ .cbp-tm-menu > li:last-child .cbp-tm-submenu {

   right: 0;

}

/* arrow: depending on where the menu will be shown, we set the right position for the arrow

• /

.cbp-tm-submenu:after {

   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;

}

.cbp-tm-show-above .cbp-tm-submenu:after {

   top: 100%;
   margin-top: -10px;

}

.cbp-tm-show-below .cbp-tm-submenu:after {

   bottom: 100%;
   margin-bottom: -10px;

}

.cbp-tm-submenu:after {

   border-color: transparent;
   border-width: 16px;
   margin-left: -16px;
   left: 50%;

}

.cbp-tm-show-above .cbp-tm-submenu:after {

   border-top-color: #fff;

}

.cbp-tm-show-below .cbp-tm-submenu:after {

   border-bottom-color: #fff;

}

.cbp-tm-submenu > li {

   display: block;
   background: #fff;

}

.cbp-tm-submenu > li > a {

   padding: 5px 2.3em 5px 0.6em; /* top/bottom paddings in 'em' cause a tiny "jump" in Chrome on Win */
   display: block;
   font-size: 1.2em;
   position: relative;
   color: #47a3da;
   border: 4px solid #fff;
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   transition: all 0.2s;

}

.no-touch .cbp-tm-submenu > li > a:hover, .no-touch .cbp-tm-submenu > li > a:active {

   color: #fff;
   background: #47a3da;

}

/* the icons (main level menu icon and sublevel icons) */ .cbp-tm-submenu li a:before, .cbp-tm-menu > li > a:before {

   font-family: 'cbp-tmicons';
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   vertical-align: middle;
   margin-right: 0.6em;
   -webkit-font-smoothing: antialiased;

}

.cbp-tm-submenu li a:before {

   position: absolute;
   top: 50%;
   margin-top: -0.5em;
   right: 0.5em;

}

.cbp-tm-menu > li > a:not(:only-child):before {

   content: "\f0c9";
   font-size: 60%;
   opacity: 0.3;

}

.cbp-tm-icon-archive:before {

   content: "\e002";

}

.cbp-tm-icon-cog:before {

   content: "\e003";

}

.cbp-tm-icon-users:before {

   content: "\e004";

}

.cbp-tm-icon-earth:before {

   content: "\e005";

}

.cbp-tm-icon-location:before {

   content: "\e006";

}

.cbp-tm-icon-mobile:before {

   content: "\e007";

}

.cbp-tm-icon-screen:before {

   content: "\e008";

}

.cbp-tm-icon-mail:before {

   content: "\e009";

}

.cbp-tm-icon-contract:before {

   content: "\e00a";

}

.cbp-tm-icon-pencil:before {

   content: "\e00b";

}

.cbp-tm-icon-article:before {

   content: "\e00c";

}

.cbp-tm-icon-clock:before {

   content: "\e00d";

}

.cbp-tm-icon-videos:before {

   content: "\e00e";

}

.cbp-tm-icon-pictures:before {

   content: "\e00f";

}

.cbp-tm-icon-link:before {

   content: "\e010";

}

.cbp-tm-icon-refresh:before {

   content: "\e011";

}

.cbp-tm-icon-help:before {

   content: "\e012";

}

/* Media Queries */ @media screen and (max-width: 55.6875em) {

   .cbp-tm-menu {
       font-size: 80%;
   }

}

@media screen and (max-height: 25.25em), screen and (max-width: 44.3125em) {

   .cbp-tm-menu {
       font-size: 100%;
       position: relative;
       text-align: center;
       padding: 0;
       top: auto;
   }

   .cbp-tm-menu > li {
       display: block;
       margin: 0;
       border-bottom: 4px solid #3793ca;
   }

   .cbp-tm-menu > li:first-child {
       border-top: 4px solid #3793ca;
   }

   li.cbp-tm-show > a,
   .no-touch .cbp-tm-menu > li > a:hover,
   .no-touch .cbp-tm-menu > li > a:active {
       color: #fff;
       background: #02639d;
   }

   .cbp-tm-submenu {
       position: relative;
       display: none;
       width: 100%;
   }

   .cbp-tm-submenu > li {
       padding: 0;
   }

   .cbp-tm-submenu > li > a {
       padding: 0.6em 2.3em 0.6em 0.6em;
       border: none;
       border-bottom: 2px solid #6fbbe9;
   }

   .cbp-tm-submenu:after {
       display: none;
   }

   .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {
       display: block;
       width: 100%;
       left: 0;
       margin: 0;
       padding: 0;
       bottom: auto;
       top: auto;
   }
   

}