Difference between revisions of "Template:CCU Taiwan"

Line 90: Line 90:
  
 
<style>
 
<style>
 +
  
  
Line 107: Line 108:
 
/**************************************************************** MENU ***************************************************************/
 
/**************************************************************** MENU ***************************************************************/
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
 
+
.igem_2017_menu_wrapper {
 
+
width: 15%;
 
+
height:100vh;
/*
+
position:fixed;
Directive by HTML5 UP
+
right:0%;
html5up.net | @ajlkn
+
padding:0px;
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
float:right;  
*/
+
border-left: 1px solid #d3d3d3;  
 
+
background-color:#dddddd;  
/* Reset */
+
text-align:left;
 
+
font-family:Tahoma, Geneva, sans-serif;
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 {
+
overflow-y: auto;
margin: 0;
+
overflow-x: hidden;
padding: 0;
+
border: 0;
+
font-size: 100%;
+
font: inherit;
+
vertical-align: baseline;
+
}
+
 
+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+
display: block;
+
 
}
 
}
  
body {
+
/* this hides the scrollbar to keep view consistency */
line-height: 1;
+
.igem_2017_menu_wrappe::-webkit-scrollbar {  
 +
display: none;  
 
}
 
}
 
+
ol, ul {
+
list-style: none;
+
/* styling for links in the menu, removes the line under text */
 +
.igem_2017_menu_wrapper a {
 +
text-decoration: none;  
 
}
 
}
  
blockquote, q {
 
quotes: none;
 
}
 
  
blockquote:before, blockquote:after, q:before, q:after {
+
/* styling for the images in the menu */
content: '';
+
.igem_2017_menu_wrapper img {  
content: none;
+
}
+
 
+
table {
+
border-collapse: collapse;
+
border-spacing: 0;
+
}
+
 
+
body {
+
-webkit-text-size-adjust: none;
+
}
+
 
+
/* Box Model */
+
 
+
*, *:before, *:after {
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
/* Containers */
+
 
+
.container {
+
margin-left: auto;
+
margin-right: auto;
+
}
+
 
+
.container.\31 25\25 {
+
 
width: 100%;
 
width: 100%;
max-width: 63.75em;
 
min-width: 51em;
 
 
}
 
}
  
.container.\37 5\25 {
+
/* styling for the menu buttons */
width: 38.25em;
+
.igem_2017_menu_wrapper .menu_button {  
 +
width: 100%;
 +
padding: 10px 0px 10px 15px;
 +
float:left;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
font-weight: bold;
 +
color: #5e5f5f;
 +
cursor: pointer;
 
}
 
}
  
.container.\35 0\25 {
 
width: 25.5em;
 
}
 
  
.container.\32 5\25 {
+
.igem_2017_menu_wrapper .menu_bottom_padding {  
width: 12.75em;
+
width: 100%;
 +
height: 30px;
 +
float:left;
 
}
 
}
  
.container {
+
.menu_button.direct_to_page {  
width: 51em;
+
padding-left: 36px;
 
}
 
}
  
@media screen and (max-width: 1680px) {
 
 
.container.\31 25\25 {
 
width: 100%;
 
max-width: 63.75em;
 
min-width: 51em;
 
}
 
 
.container.\37 5\25 {
 
width: 38.25em;
 
}
 
 
.container.\35 0\25 {
 
width: 25.5em;
 
}
 
 
.container.\32 5\25 {
 
width: 12.75em;
 
}
 
 
.container {
 
width: 51em;
 
}
 
  
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
 +
width:10%;
 +
float:left;
 
}
 
}
  
@media screen and (max-width: 1280px) {
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
 
+
content: "+";
.container.\31 25\25 {
+
width: 100%;
+
max-width: 60em;
+
min-width: 48em;
+
}
+
 
+
.container.\37 5\25 {
+
width: 36em;
+
}
+
 
+
.container.\35 0\25 {
+
width: 24em;
+
}
+
 
+
.container.\32 5\25 {
+
width: 12em;
+
}
+
 
+
.container {
+
width: 48em;
+
}
+
 
+
 
}
 
}
 
+
@media screen and (max-width: 980px) {
+
.open::before {
 
+
content: "-" !important;
.container.\31 25\25 {
+
width: 100%;
+
max-width: 118.75%;
+
min-width: 95%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 71.25%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 47.5%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 23.75%;
+
}
+
 
+
.container {
+
width: 95%;
+
}
+
 
+
 
}
 
}
 
+
@media screen and (max-width: 840px) {
+
 
+
.container.\31 25\25 {
+
/* styling for the menu buttons on hover */
width: 100%;
+
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {  
max-width: 118.75%;
+
background-color: #3399ff;
min-width: 95%;
+
text-decoration: none;
}
+
color:#ffffff;  
 
+
.container.\37 5\25 {
+
width: 71.25%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 47.5%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 23.75%;
+
}
+
 
+
.container {
+
width: 95% !important;
+
}
+
 
+
 
}
 
}
  
@media screen and (max-width: 736px) {
+
/* styling for the menu button when it is the current page */
 
+
.current_page {  
.container.\31 25\25 {
+
background-color:#7fc1f7  !important;
width: 100%;
+
color:#5e5f5f !important;
max-width: 112.5%;
+
min-width: 90%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 67.5%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 45%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 22.5%;
+
}
+
 
+
.container {
+
width: 90% !important;
+
}
+
 
+
 
}
 
}
  
@media screen and (max-width: 480px) {
 
 
.container.\31 25\25 {
 
width: 100%;
 
max-width: 125%;
 
min-width: 100%;
 
}
 
 
.container.\37 5\25 {
 
width: 75%;
 
}
 
 
.container.\35 0\25 {
 
width: 50%;
 
}
 
 
.container.\32 5\25 {
 
width: 25%;
 
}
 
 
.container {
 
width: 100% !important;
 
}
 
  
 +
/* styling for the submenu buttons */
 +
.igem_2017_menu_wrapper .submenu_button {
 +
width: 100%;
 +
padding: 10px 0px 10px 34px;
 +
float:left;
 +
background-color:#f2f2f2;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
color: #5e5f5f;
 +
cursor: pointer;
 
}
 
}
  
/* Grid */
+
/* wrapper for the submenu items, they are hidden by default*/
 
+
.igem_2017_menu_wrapper .submenu_wrapper {  
.row {
+
display:none;
border-bottom: solid 1px transparent;
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
 
}
 
}
  
.row > * {
+
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
float: left;
+
.igem_2017_menu_wrapper #display_menu_control {
-moz-box-sizing: border-box;
+
display:none;
-webkit-box-sizing: border-box;
+
text-align:center;
box-sizing: border-box;
+
 
}
 
}
 +
  
.row:after, .row:before {
+
/***************************************************** CONTENT OF THE PAGE ****************************************************/
content: '';
+
display: block;
+
clear: both;
+
height: 0;
+
}
+
  
.row.uniform > * > :first-child {
+
/* Wrapper for the content */
margin-top: 0;
+
.igem_2017_content_wrapper {
}
+
 
+
.row.uniform > * > :last-child {
+
margin-bottom: 0;
+
}
+
 
+
.row.\30 \25 > * {
+
padding: 0px 0 0 0px;
+
}
+
 
+
.row.\30 \25 {
+
margin: 0px 0 -1px 0px;
+
}
+
 
+
.row.uniform.\30 \25 > * {
+
padding: 0px 0 0 0px;
+
}
+
 
+
.row.uniform.\30 \25 {
+
margin: 0px 0 -1px 0px;
+
}
+
 
+
.row > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.uniform > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.uniform {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 60px 0 0 60px;
+
}
+
 
+
.row.\32 00\25 {
+
margin: -60px 0 -1px -60px;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 60px 0 0 60px;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -60px 0 -1px -60px;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 45px 0 0 45px;
+
}
+
 
+
.row.\31 50\25 {
+
margin: -45px 0 -1px -45px;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 45px 0 0 45px;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -45px 0 -1px -45px;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 15px 0 0 15px;
+
}
+
 
+
.row.\35 0\25 {
+
margin: -15px 0 -1px -15px;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 15px 0 0 15px;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -15px 0 -1px -15px;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 7.5px 0 0 7.5px;
+
}
+
 
+
.row.\32 5\25 {
+
margin: -7.5px 0 -1px -7.5px;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 7.5px 0 0 7.5px;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -7.5px 0 -1px -7.5px;
+
}
+
 
+
.\31 2u, .\31 2u\24 {
+
 
width: 100%;
 
width: 100%;
clear: none;
+
margin: 0%;
margin-left: 0;
+
display:block;
 +
float:left;
 +
background-color:white;
 +
font-family:Tahoma, Geneva, sans-serif;  
 
}
 
}
  
.\31 1u, .\31 1u\24 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
  
.\31 0u, .\31 0u\24 {
+
/********************************* HTML STYLING  *********************************/
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
  
.\39 u, .\39 u\24 {
+
/* styling for the titles h1 h2 */
width: 75%;
+
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
clear: none;
+
padding:5px 15px;  
margin-left: 0;
+
border-bottom: 0px;  
 +
color: #3399ff;
 
}
 
}
  
.\38 u, .\38 u\24 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
  
.\37 u, .\37 u\24 {
+
/* styling for the titles  h3 h4 h5 h6*/
width: 58.3333333333%;
+
.igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {  
clear: none;
+
padding:5px 15px;  
margin-left: 0;
+
border-bottom:0px;  
 +
color: #000000;
 
}
 
}
  
.\36 u, .\36 u\24 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
  
.\35 u, .\35 u\24 {
+
/* font and text */
width: 41.6666666667%;
+
.igem_2017_content_wrapper p {  
clear: none;
+
padding: 0px 15px;  
margin-left: 0;
+
font-size: 13px;
 
}
 
}
  
.\34 u, .\34 u\24 {
+
/* Links */
width: 33.3333333333%;
+
.igem_2017_content_wrapper a {  
clear: none;
+
font-weight: bold;
margin-left: 0;
+
text-decoration: underline;
 +
text-decoration-color: #3399ff;
 +
color:  #3399ff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;  
 +
-ms-transition: all 0.4s ease;  
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 
}
 
}
  
.\33 u, .\33 u\24 {
+
/* hover for the links */
width: 25%;
+
.igem_2017_content_wrapper a:hover {  
clear: none;
+
text-decoration:none;
margin-left: 0;
+
color:#000000;
 
}
 
}
  
.\32 u, .\32 u\24 {
+
/* non numbered lists */
width: 16.6666666667%;
+
.igem_2017_content_wrapper ul {
clear: none;
+
padding:0px 20px;
margin-left: 0;
+
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;  
 
}
 
}
  
.\31 u, .\31 u\24 {
+
/* numbered lists */
width: 8.3333333333%;
+
.igem_2017_content_wrapper ol {
clear: none;
+
padding:0px;  
margin-left: 0;
+
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;  
 
}
 
}
  
.\31 2u\24 + *,
+
/* Table */
.\31 1u\24 + *,
+
.igem_2017_content_wrapper table {
.\31 0u\24 + *,
+
width: 97%;
.\39 u\24 + *,
+
margin:15px 10px;
.\38 u\24 + *,
+
border: 1px solid #d3d3d3;
.\37 u\24 + *,
+
border-collapse: collapse;  
.\36 u\24 + *,
+
.\35 u\24 + *,
+
.\34 u\24 + *,
+
.\33 u\24 + *,
+
.\32 u\24 + *,
+
.\31 u\24 + * {
+
clear: left;
+
 
}
 
}
  
.\-11u {
+
/* table cells */
margin-left: 91.66667%;
+
.igem_2017_content_wrapper  td {  
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;  
 
}
 
}
  
.\-10u {
+
/* table headers */
margin-left: 83.33333%;
+
.igem_2017_content_wrapper th {  
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;  
 
}
 
}
  
.\-9u {
 
margin-left: 75%;
 
}
 
  
.\-8u {
+
/**********************************LAYOUT CLASSES **********************************/
margin-left: 66.66667%;
+
}
+
  
.\-7u {
+
/* general class for column divs */
margin-left: 58.33333%;
+
.igem_2017_content_wrapper .column  {  
 +
padding: 10px 0px;
 +
float:left;  
 
}
 
}
  
.\-6u {
+
/* class for a full width column */
margin-left: 50%;
+
.column .full_size {
 +
width:100%;  
 
}
 
}
  
.\-5u {
+
/* styling for images in a full width column*/
margin-left: 41.66667%;
+
.column.full_size img {  
 +
width:97%;
 +
padding: 10px 15px;
 
}
 
}
  
.\-4u {
+
/* class for a half width column */
margin-left: 33.33333%;
+
.column.half_size {
 +
width: 50%;  
 
}
 
}
 
+
/* styling for images in a half width column*/
.\-3u {
+
.column.half_size img {  
margin-left: 25%;
+
width: 94.5%;
 +
padding: 10px 15px;
 
}
 
}
  
.\-2u {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u {
 
margin-left: 8.33333%;
 
}
 
 
@media screen and (max-width: 1680px) {
 
 
.row > * {
 
padding: 30px 0 0 30px;
 
}
 
 
.row {
 
margin: -30px 0 -1px -30px;
 
}
 
 
.row.uniform > * {
 
padding: 30px 0 0 30px;
 
}
 
 
.row.uniform {
 
margin: -30px 0 -1px -30px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 60px 0 0 60px;
 
}
 
 
.row.\32 00\25 {
 
margin: -60px 0 -1px -60px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 60px 0 0 60px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -60px 0 -1px -60px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 45px 0 0 45px;
 
}
 
 
.row.\31 50\25 {
 
margin: -45px 0 -1px -45px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 45px 0 0 45px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -45px 0 -1px -45px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 15px 0 0 15px;
 
}
 
 
.row.\35 0\25 {
 
margin: -15px 0 -1px -15px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 15px 0 0 15px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -15px 0 -1px -15px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 7.5px 0 0 7.5px;
 
}
 
 
.row.\32 5\25 {
 
margin: -7.5px 0 -1px -7.5px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 7.5px 0 0 7.5px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -7.5px 0 -1px -7.5px;
 
}
 
 
.\31 2u\28wide\29, .\31 2u\24\28wide\29 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u\28wide\29, .\31 1u\24\28wide\29 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u\28wide\29, .\31 0u\24\28wide\29 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u\28wide\29, .\39 u\24\28wide\29 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u\28wide\29, .\38 u\24\28wide\29 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u\28wide\29, .\37 u\24\28wide\29 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u\28wide\29, .\36 u\24\28wide\29 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u\28wide\29, .\35 u\24\28wide\29 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u\28wide\29, .\34 u\24\28wide\29 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u\28wide\29, .\33 u\24\28wide\29 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u\28wide\29, .\32 u\24\28wide\29 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u\28wide\29, .\31 u\24\28wide\29 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24\28wide\29 + *,
 
.\31 1u\24\28wide\29 + *,
 
.\31 0u\24\28wide\29 + *,
 
.\39 u\24\28wide\29 + *,
 
.\38 u\24\28wide\29 + *,
 
.\37 u\24\28wide\29 + *,
 
.\36 u\24\28wide\29 + *,
 
.\35 u\24\28wide\29 + *,
 
.\34 u\24\28wide\29 + *,
 
.\33 u\24\28wide\29 + *,
 
.\32 u\24\28wide\29 + *,
 
.\31 u\24\28wide\29 + * {
 
clear: left;
 
}
 
 
.\-11u\28wide\29 {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u\28wide\29 {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u\28wide\29 {
 
margin-left: 75%;
 
}
 
 
.\-8u\28wide\29 {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u\28wide\29 {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u\28wide\29 {
 
margin-left: 50%;
 
}
 
 
.\-5u\28wide\29 {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u\28wide\29 {
 
margin-left: 33.33333%;
 
}
 
  
.\-3u\28wide\29 {
 
margin-left: 25%;
 
}
 
  
.\-2u\28wide\29 {
 
margin-left: 16.66667%;
 
}
 
  
.\-1u\28wide\29 {
+
/********************************* SUPPORT CLASSES ********************************/
margin-left: 8.33333%;
+
}
+
  
 +
/* class that clears content below*/
 +
.igem_2017_content_wrapper .clear {
 +
clear:both;
 
}
 
}
 
+
@media screen and (max-width: 1280px) {
+
 
+
/* adds extra spacing when clearing content */
.row > * {
+
.igem_2017_content_wrapper  .clear.extra_space {
padding: 30px 0 0 30px;
+
height: 30px;
}
+
 
+
.row {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.uniform > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.uniform {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 60px 0 0 60px;
+
}
+
 
+
.row.\32 00\25 {
+
margin: -60px 0 -1px -60px;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 60px 0 0 60px;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -60px 0 -1px -60px;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 45px 0 0 45px;
+
}
+
 
+
.row.\31 50\25 {
+
margin: -45px 0 -1px -45px;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 45px 0 0 45px;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -45px 0 -1px -45px;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 15px 0 0 15px;
+
}
+
 
+
.row.\35 0\25 {
+
margin: -15px 0 -1px -15px;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 15px 0 0 15px;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -15px 0 -1px -15px;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 7.5px 0 0 7.5px;
+
}
+
 
+
.row.\32 5\25 {
+
margin: -7.5px 0 -1px -7.5px;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 7.5px 0 0 7.5px;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -7.5px 0 -1px -7.5px;
+
}
+
 
+
.\31 2u\28normal\29, .\31 2u\24\28normal\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28normal\29, .\31 1u\24\28normal\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28normal\29, .\31 0u\24\28normal\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28normal\29, .\39 u\24\28normal\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28normal\29, .\38 u\24\28normal\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28normal\29, .\37 u\24\28normal\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28normal\29, .\36 u\24\28normal\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28normal\29, .\35 u\24\28normal\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28normal\29, .\34 u\24\28normal\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28normal\29, .\33 u\24\28normal\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28normal\29, .\32 u\24\28normal\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28normal\29, .\31 u\24\28normal\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28normal\29 + *,
+
.\31 1u\24\28normal\29 + *,
+
.\31 0u\24\28normal\29 + *,
+
.\39 u\24\28normal\29 + *,
+
.\38 u\24\28normal\29 + *,
+
.\37 u\24\28normal\29 + *,
+
.\36 u\24\28normal\29 + *,
+
.\35 u\24\28normal\29 + *,
+
.\34 u\24\28normal\29 + *,
+
.\33 u\24\28normal\29 + *,
+
.\32 u\24\28normal\29 + *,
+
.\31 u\24\28normal\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28normal\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28normal\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28normal\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28normal\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28normal\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28normal\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28normal\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28normal\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28normal\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28normal\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28normal\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
 
}
 
}
  
@media screen and (max-width: 980px) {
 
 
.row > * {
 
padding: 30px 0 0 30px;
 
}
 
 
.row {
 
margin: -30px 0 -1px -30px;
 
}
 
 
.row.uniform > * {
 
padding: 30px 0 0 30px;
 
}
 
 
.row.uniform {
 
margin: -30px 0 -1px -30px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 60px 0 0 60px;
 
}
 
 
.row.\32 00\25 {
 
margin: -60px 0 -1px -60px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 60px 0 0 60px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -60px 0 -1px -60px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 45px 0 0 45px;
 
}
 
 
.row.\31 50\25 {
 
margin: -45px 0 -1px -45px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 45px 0 0 45px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -45px 0 -1px -45px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 15px 0 0 15px;
 
}
 
 
.row.\35 0\25 {
 
margin: -15px 0 -1px -15px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 15px 0 0 15px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -15px 0 -1px -15px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 7.5px 0 0 7.5px;
 
}
 
 
.row.\32 5\25 {
 
margin: -7.5px 0 -1px -7.5px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 7.5px 0 0 7.5px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -7.5px 0 -1px -7.5px;
 
}
 
 
.\31 2u\28narrow\29, .\31 2u\24\28narrow\29 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u\28narrow\29, .\31 1u\24\28narrow\29 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u\28narrow\29, .\31 0u\24\28narrow\29 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u\28narrow\29, .\39 u\24\28narrow\29 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u\28narrow\29, .\38 u\24\28narrow\29 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u\28narrow\29, .\37 u\24\28narrow\29 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u\28narrow\29, .\36 u\24\28narrow\29 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u\28narrow\29, .\35 u\24\28narrow\29 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u\28narrow\29, .\34 u\24\28narrow\29 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u\28narrow\29, .\33 u\24\28narrow\29 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u\28narrow\29, .\32 u\24\28narrow\29 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u\28narrow\29, .\31 u\24\28narrow\29 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24\28narrow\29 + *,
 
.\31 1u\24\28narrow\29 + *,
 
.\31 0u\24\28narrow\29 + *,
 
.\39 u\24\28narrow\29 + *,
 
.\38 u\24\28narrow\29 + *,
 
.\37 u\24\28narrow\29 + *,
 
.\36 u\24\28narrow\29 + *,
 
.\35 u\24\28narrow\29 + *,
 
.\34 u\24\28narrow\29 + *,
 
.\33 u\24\28narrow\29 + *,
 
.\32 u\24\28narrow\29 + *,
 
.\31 u\24\28narrow\29 + * {
 
clear: left;
 
}
 
 
.\-11u\28narrow\29 {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u\28narrow\29 {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u\28narrow\29 {
 
margin-left: 75%;
 
}
 
 
.\-8u\28narrow\29 {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u\28narrow\29 {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u\28narrow\29 {
 
margin-left: 50%;
 
}
 
 
.\-5u\28narrow\29 {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u\28narrow\29 {
 
margin-left: 33.33333%;
 
}
 
 
.\-3u\28narrow\29 {
 
margin-left: 25%;
 
}
 
 
.\-2u\28narrow\29 {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u\28narrow\29 {
 
margin-left: 8.33333%;
 
}
 
  
 +
/* highlight class, makes content slightly smaller */
 +
.igem_2017_content_wrapper .highlight {
 +
margin: 0px 15px;
 +
padding: 15px 0px;
 
}
 
}
  
@media screen and (max-width: 840px) {
 
 
.row > * {
 
padding: 20px 0 0 20px;
 
}
 
 
.row {
 
margin: -20px 0 -1px -20px;
 
}
 
 
.row.uniform > * {
 
padding: 20px 0 0 20px;
 
}
 
 
.row.uniform {
 
margin: -20px 0 -1px -20px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 40px 0 0 40px;
 
}
 
 
.row.\32 00\25 {
 
margin: -40px 0 -1px -40px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 40px 0 0 40px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -40px 0 -1px -40px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 30px 0 0 30px;
 
}
 
 
.row.\31 50\25 {
 
margin: -30px 0 -1px -30px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 30px 0 0 30px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -30px 0 -1px -30px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 10px 0 0 10px;
 
}
 
 
.row.\35 0\25 {
 
margin: -10px 0 -1px -10px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 10px 0 0 10px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -10px 0 -1px -10px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 5px 0 0 5px;
 
}
 
 
.row.\32 5\25 {
 
margin: -5px 0 -1px -5px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 5px 0 0 5px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -5px 0 -1px -5px;
 
}
 
 
.\31 2u\28narrower\29, .\31 2u\24\28narrower\29 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u\28narrower\29, .\31 1u\24\28narrower\29 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u\28narrower\29, .\31 0u\24\28narrower\29 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u\28narrower\29, .\39 u\24\28narrower\29 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u\28narrower\29, .\38 u\24\28narrower\29 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u\28narrower\29, .\37 u\24\28narrower\29 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u\28narrower\29, .\36 u\24\28narrower\29 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u\28narrower\29, .\35 u\24\28narrower\29 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u\28narrower\29, .\34 u\24\28narrower\29 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u\28narrower\29, .\33 u\24\28narrower\29 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u\28narrower\29, .\32 u\24\28narrower\29 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u\28narrower\29, .\31 u\24\28narrower\29 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24\28narrower\29 + *,
 
.\31 1u\24\28narrower\29 + *,
 
.\31 0u\24\28narrower\29 + *,
 
.\39 u\24\28narrower\29 + *,
 
.\38 u\24\28narrower\29 + *,
 
.\37 u\24\28narrower\29 + *,
 
.\36 u\24\28narrower\29 + *,
 
.\35 u\24\28narrower\29 + *,
 
.\34 u\24\28narrower\29 + *,
 
.\33 u\24\28narrower\29 + *,
 
.\32 u\24\28narrower\29 + *,
 
.\31 u\24\28narrower\29 + * {
 
clear: left;
 
}
 
 
.\-11u\28narrower\29 {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u\28narrower\29 {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u\28narrower\29 {
 
margin-left: 75%;
 
}
 
 
.\-8u\28narrower\29 {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u\28narrower\29 {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u\28narrower\29 {
 
margin-left: 50%;
 
}
 
 
.\-5u\28narrower\29 {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u\28narrower\29 {
 
margin-left: 33.33333%;
 
}
 
 
.\-3u\28narrower\29 {
 
margin-left: 25%;
 
}
 
 
.\-2u\28narrower\29 {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u\28narrower\29 {
 
margin-left: 8.33333%;
 
}
 
  
 +
/* highlight class, adds a gray background */
 +
.igem_2017_content_wrapper .highlight.gray {
 +
background-color: #f2f2f2;
 
}
 
}
  
@media screen and (max-width: 736px) {
+
/* highlight with decoration blue line on top */
 
+
.igem_2017_content_wrapper .highlight.blue_top {
.row > * {
+
    border-top: 4px solid #3399ff;
padding: 20px 0 0 20px;
+
}
+
 
+
.row {
+
margin: -20px 0 -1px -20px;
+
}
+
 
+
.row.uniform > * {
+
padding: 20px 0 0 20px;
+
}
+
 
+
.row.uniform {
+
margin: -20px 0 -1px -20px;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 40px 0 0 40px;
+
}
+
 
+
.row.\32 00\25 {
+
margin: -40px 0 -1px -40px;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 40px 0 0 40px;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -40px 0 -1px -40px;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.\31 50\25 {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 10px 0 0 10px;
+
}
+
 
+
.row.\35 0\25 {
+
margin: -10px 0 -1px -10px;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 10px 0 0 10px;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -10px 0 -1px -10px;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 5px 0 0 5px;
+
}
+
 
+
.row.\32 5\25 {
+
margin: -5px 0 -1px -5px;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 5px 0 0 5px;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -5px 0 -1px -5px;
+
}
+
 
+
.\31 2u\28mobile\29, .\31 2u\24\28mobile\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28mobile\29, .\31 1u\24\28mobile\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28mobile\29, .\31 0u\24\28mobile\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28mobile\29, .\39 u\24\28mobile\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28mobile\29, .\38 u\24\28mobile\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28mobile\29, .\37 u\24\28mobile\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28mobile\29, .\36 u\24\28mobile\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28mobile\29, .\35 u\24\28mobile\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28mobile\29, .\34 u\24\28mobile\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28mobile\29, .\33 u\24\28mobile\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28mobile\29, .\32 u\24\28mobile\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28mobile\29, .\31 u\24\28mobile\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28mobile\29 + *,
+
.\31 1u\24\28mobile\29 + *,
+
.\31 0u\24\28mobile\29 + *,
+
.\39 u\24\28mobile\29 + *,
+
.\38 u\24\28mobile\29 + *,
+
.\37 u\24\28mobile\29 + *,
+
.\36 u\24\28mobile\29 + *,
+
.\35 u\24\28mobile\29 + *,
+
.\34 u\24\28mobile\29 + *,
+
.\33 u\24\28mobile\29 + *,
+
.\32 u\24\28mobile\29 + *,
+
.\31 u\24\28mobile\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28mobile\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28mobile\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28mobile\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28mobile\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28mobile\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28mobile\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28mobile\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28mobile\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28mobile\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28mobile\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28mobile\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
 
}
 
}
  
@media screen and (max-width: 480px) {
+
/* highlight with a full blue border decoration */
 
+
.igem_2017_content_wrapper .highlight.blue_border {
.row > * {
+
    border: 4px solid  #3399ff;
padding: 20px 0 0 20px;
+
}
+
 
+
.row {
+
margin: -20px 0 -1px -20px;
+
}
+
 
+
.row.uniform > * {
+
padding: 20px 0 0 20px;
+
}
+
 
+
.row.uniform {
+
margin: -20px 0 -1px -20px;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 40px 0 0 40px;
+
}
+
 
+
.row.\32 00\25 {
+
margin: -40px 0 -1px -40px;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 40px 0 0 40px;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -40px 0 -1px -40px;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.\31 50\25 {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 10px 0 0 10px;
+
}
+
 
+
.row.\35 0\25 {
+
margin: -10px 0 -1px -10px;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 10px 0 0 10px;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -10px 0 -1px -10px;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 5px 0 0 5px;
+
}
+
 
+
.row.\32 5\25 {
+
margin: -5px 0 -1px -5px;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 5px 0 0 5px;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -5px 0 -1px -5px;
+
}
+
 
+
.\31 2u\28mobilep\29, .\31 2u\24\28mobilep\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28mobilep\29, .\31 1u\24\28mobilep\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28mobilep\29, .\31 0u\24\28mobilep\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28mobilep\29, .\39 u\24\28mobilep\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28mobilep\29, .\38 u\24\28mobilep\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28mobilep\29, .\37 u\24\28mobilep\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28mobilep\29, .\36 u\24\28mobilep\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28mobilep\29, .\35 u\24\28mobilep\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28mobilep\29, .\34 u\24\28mobilep\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28mobilep\29, .\33 u\24\28mobilep\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28mobilep\29, .\32 u\24\28mobilep\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28mobilep\29, .\31 u\24\28mobilep\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28mobilep\29 + *,
+
.\31 1u\24\28mobilep\29 + *,
+
.\31 0u\24\28mobilep\29 + *,
+
.\39 u\24\28mobilep\29 + *,
+
.\38 u\24\28mobilep\29 + *,
+
.\37 u\24\28mobilep\29 + *,
+
.\36 u\24\28mobilep\29 + *,
+
.\35 u\24\28mobilep\29 + *,
+
.\34 u\24\28mobilep\29 + *,
+
.\33 u\24\28mobilep\29 + *,
+
.\32 u\24\28mobilep\29 + *,
+
.\31 u\24\28mobilep\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28mobilep\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28mobilep\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28mobilep\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28mobilep\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28mobilep\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28mobilep\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28mobilep\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28mobilep\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28mobilep\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28mobilep\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28mobilep\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
 
}
 
}
  
/* Basic */
 
  
html, body {
+
/* button class */
height: 100%;
+
.igem_2017_content_wrapper .button{
 +
max-width: 35%;
 +
margin: 30px auto;
 +
padding: 12px 10px;
 +
    background-color: #3399ff;
 +
    text-align: center;
 +
  color: #ffffff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 
}
 
}
  
body {
+
/* styling for button on hover */
background: #ffffff;
+
.igem_2017_content_wrapper .button:hover{
 +
background-color: #3399ff;
 +
    color: #000000;
 
}
 
}
  
body.is-loading * {
 
-moz-transition: none !important;
 
-webkit-transition: none !important;
 
-ms-transition: none !important;
 
transition: none !important;
 
-moz-animation: none !important;
 
-webkit-animation: none !important;
 
-ms-animation: none !important;
 
animation: none !important;
 
}
 
  
body, input, select, textarea {
 
color: #6e6e6e;
 
font-family: 'Source Sans Pro', sans-serif;
 
font-size: 16pt;
 
font-weight: 400;
 
line-height: 1.75em;
 
}
 
  
a {
 
-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 
-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 
-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 
border-bottom: dotted 1px;
 
color: #4eb980;
 
text-decoration: none;
 
}
 
  
a:hover {
+
/***************************************************** RESPONSIVE STYLING ****************************************************/
border-bottom-color: transparent;
+
}
+
  
strong, b {
+
/* IF THE SCREEN IS LESS THAN 1200PX */
font-weight: 600;
+
@media only screen and (max-width: 1200px) {
color: #5b5b5b;
+
}
+
  
em, i {
+
#content {width:100%; }
font-style: italic;
+
.igem_2017_menu_wrapper {width:15%; right:0;}
 +
.highlight {padding:10px 0px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:none; }
 +
#menu_content { display:block;}
 +
.menu_button.direct_to_page {padding-left: 17px;}
 +
 
}
 
}
  
p, ul, ol, dl, table, blockquote, form {
+
/* IF THE SCREEN IS LESS THAN 800PX */
margin: 0 0 2em 0;
+
@media only screen and (max-width: 800px) {
}
+
  
h1, h2, h3, h4, h5, h6 {
+
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
color: #5b5b5b;
+
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
font-weight: 700;
+
.column.half_size  {width:100%; }
letter-spacing: 0.125em;
+
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
line-height: 1.75em;
+
.highlight {padding:15px 5px;}
margin-bottom: 1em;
+
.igem_2017_menu_wrapper #display_menu_control { display:block; }
text-transform: uppercase;
+
#menu_content { display:none;}
text-align: center;
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 +
.menu_bottom_padding {display:none;}
 +
.menu_button.direct_to_page { padding-left: 36px; }
 
}
 
}
  
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 
color: inherit;
 
text-decoration: none;
 
}
 
 
h2 {
 
font-size: 1.75em;
 
}
 
 
h3 {
 
font-size: 1.5em;
 
}
 
 
sub {
 
font-size: 0.8em;
 
position: relative;
 
top: 0.5em;
 
}
 
 
sup {
 
font-size: 0.8em;
 
position: relative;
 
top: -0.5em;
 
}
 
 
hr {
 
border: 0;
 
border-top: solid 1px rgba(224, 224, 224, 0.75);
 
margin-bottom: 1.5em;
 
}
 
 
blockquote {
 
border-left: solid 0.5em rgba(224, 224, 224, 0.75);
 
font-style: italic;
 
padding: 1em 0 1em 2em;
 
}
 
 
/* Section/Article */
 
 
section.special, article.special {
 
text-align: center;
 
}
 
 
header {
 
text-align: center;
 
}
 
 
header p {
 
position: relative;
 
top: -1em;
 
color: #888888;
 
text-transform: uppercase;
 
letter-spacing: 0.075em;
 
}
 
 
header.major {
 
border-bottom-width: 1px;
 
border-color: rgba(224, 224, 224, 0.75);
 
border-style: solid;
 
border-top-width: 1px;
 
margin-bottom: 6em;
 
padding: 4em 0;
 
position: relative;
 
}
 
 
header.major:before, header.major:after {
 
background: rgba(224, 224, 224, 0.75);
 
content: '';
 
display: block;
 
height: 1px;
 
left: 0;
 
position: absolute;
 
width: 100%;
 
}
 
 
header.major:before {
 
top: 10px;
 
}
 
 
header.major:after {
 
bottom: 10px;
 
}
 
 
header.major h2 {
 
margin: 0;
 
}
 
 
header.major p {
 
top: 0;
 
margin: 1.5em 0 0 0;
 
padding: 1.5em 1.5em 0 1.5em;
 
font-size: 1.5em;
 
line-height: 1.75em;
 
border-top: solid 1px rgba(224, 224, 224, 0.75);
 
display: inline-block;
 
}
 
 
header.major.last {
 
border-bottom: 0;
 
margin-bottom: 0;
 
padding-bottom: 0;
 
}
 
 
header.major.last:after {
 
display: none;
 
}
 
 
header.major.last h2 {
 
margin-bottom: 1em;
 
}
 
 
footer {
 
text-align: center;
 
}
 
 
footer.major {
 
border-bottom-width: 1px;
 
border-color: rgba(224, 224, 224, 0.75);
 
border-style: solid;
 
border-top-width: 1px;
 
margin-top: 6em;
 
padding: 4em 0;
 
position: relative;
 
}
 
 
footer.major:before, footer.major:after {
 
background: rgba(224, 224, 224, 0.75);
 
content: '';
 
display: block;
 
height: 1px;
 
left: 0;
 
position: absolute;
 
width: 100%;
 
}
 
 
footer.major:before {
 
top: 10px;
 
}
 
 
footer.major:after {
 
bottom: 10px;
 
}
 
 
/* Form */
 
 
label {
 
display: block;
 
color: #5b5b5b;
 
font-size: 0.8em;
 
font-weight: 700;
 
letter-spacing: 0.125em;
 
line-height: 1.75em;
 
text-transform: uppercase;
 
margin: 0 0 0.5em 0;
 
}
 
 
input[type="text"],
 
input[type="password"],
 
input[type="email"],
 
select,
 
textarea {
 
-moz-appearance: none;
 
-webkit-appearance: none;
 
-ms-appearance: none;
 
appearance: none;
 
-moz-transition: background-color 0.2s ease-in-out;
 
-webkit-transition: background-color 0.2s ease-in-out;
 
-ms-transition: background-color 0.2s ease-in-out;
 
transition: background-color 0.2s ease-in-out;
 
background: none;
 
border-radius: 4px;
 
border: 0;
 
border: solid 1px rgba(224, 224, 224, 0.75);
 
color: inherit;
 
display: block;
 
outline: 0;
 
padding: 0.75em;
 
text-decoration: none;
 
width: 100%;
 
opacity: 1;
 
}
 
 
input[type="text"]:focus,
 
input[type="password"]:focus,
 
input[type="email"]:focus,
 
select:focus,
 
textarea:focus {
 
background: rgba(224, 224, 224, 0.15);
 
border-color: #4eb980;
 
}
 
 
input[type="text"],
 
input[type="password"],
 
input[type="email"],
 
select {
 
line-height: 1em;
 
}
 
 
textarea {
 
padding: 0.5em 0.75em;
 
}
 
 
::-webkit-input-placeholder {
 
color: inherit;
 
opacity: 0.5;
 
position: relative;
 
top: 3px;
 
}
 
 
:-moz-placeholder {
 
color: inherit;
 
opacity: 0.5;
 
}
 
 
::-moz-placeholder {
 
color: inherit;
 
opacity: 0.5;
 
}
 
 
:-ms-input-placeholder {
 
color: inherit;
 
opacity: 0.5;
 
}
 
 
.formerize-placeholder {
 
color: rgba(110, 110, 110, 0.5) !important;
 
}
 
 
/* Image */
 
 
.image {
 
border: 0;
 
display: inline-block;
 
position: relative;
 
}
 
 
.image:after {
 
-moz-transition: opacity 0.25s ease-in-out;
 
-webkit-transition: opacity 0.25s ease-in-out;
 
-ms-transition: opacity 0.25s ease-in-out;
 
transition: opacity 0.25s ease-in-out;
 
background-image: url("images/overlay.png");
 
content: '';
 
display: block;
 
height: 100%;
 
left: 0;
 
opacity: 0.2;
 
position: absolute;
 
top: 0;
 
width: 100%;
 
}
 
 
.image img {
 
display: block;
 
}
 
 
.image.fit {
 
display: block;
 
}
 
 
.image.fit img {
 
display: block;
 
width: 100%;
 
}
 
 
.image.feature {
 
display: block;
 
margin: 0 0 2em 0;
 
}
 
 
.image.feature img {
 
display: block;
 
width: 100%;
 
}
 
 
.image.icon {
 
-moz-perspective: 500px;
 
-webkit-perspective: 500px;
 
-ms-perspective: 500px;
 
perspective: 500px;
 
}
 
 
.image.icon:before {
 
-moz-transition: -moz-transform 0.1s ease-in-out, font-size 0.1s ease-in-out;
 
-webkit-transition: -webkit-transform 0.1s ease-in-out, font-size 0.1s ease-in-out;
 
-ms-transition: -ms-transform 0.1s ease-in-out, font-size 0.1s ease-in-out;
 
transition: transform 0.1s ease-in-out, font-size 0.1s ease-in-out;
 
color: #fff;
 
font-size: 6em;
 
height: 1em;
 
left: 50%;
 
line-height: 1em;
 
margin: -0.5em 0 0 -0.5em;
 
position: absolute;
 
text-align: center;
 
top: 50%;
 
width: 1em;
 
z-index: 1;
 
}
 
 
.image.icon:hover:before {
 
-moz-transform: translateZ(1em);
 
-webkit-transform: translateZ(1em);
 
-ms-transform: translateZ(1em);
 
transform: translateZ(1em);
 
}
 
 
.image.icon:hover:after {
 
opacity: 1;
 
}
 
 
span.image.icon {
 
cursor: default;
 
}
 
 
/* Icon */
 
 
.icon {
 
text-decoration: none;
 
border-bottom: none;
 
position: relative;
 
}
 
 
.icon:before {
 
-moz-osx-font-smoothing: grayscale;
 
-webkit-font-smoothing: antialiased;
 
font-family: FontAwesome;
 
font-style: normal;
 
font-weight: normal;
 
text-transform: none !important;
 
}
 
 
.icon > .label {
 
display: none;
 
}
 
 
/* List */
 
 
ol.default {
 
list-style: decimal;
 
padding-left: 1.25em;
 
}
 
 
ol.default li {
 
padding-left: 0.25em;
 
}
 
 
ul.default {
 
list-style: disc;
 
padding-left: 1em;
 
}
 
 
ul.default li {
 
padding-left: 0.5em;
 
}
 
 
ul.icons {
 
cursor: default;
 
}
 
 
ul.icons li {
 
display: inline-block;
 
font-size: 1.25em;
 
line-height: 1em;
 
padding-left: 0.5em;
 
}
 
 
ul.icons li:first-child {
 
padding-left: 0;
 
}
 
 
ul.icons li a, ul.icons li span {
 
-moz-transition: background-color 0.2s ease-in-out;
 
-webkit-transition: background-color 0.2s ease-in-out;
 
-ms-transition: background-color 0.2s ease-in-out;
 
transition: background-color 0.2s ease-in-out;
 
border-radius: 100%;
 
border: solid 1px rgba(224, 224, 224, 0.75);
 
display: inline-block;
 
height: 2em;
 
line-height: 2em;
 
text-align: center;
 
width: 2em;
 
}
 
 
ul.icons li a:hover, ul.icons li span:hover {
 
background: rgba(224, 224, 224, 0.15);
 
}
 
 
ul.actions {
 
cursor: default;
 
text-align: center;
 
}
 
 
ul.actions:last-child {
 
margin-bottom: 0;
 
}
 
 
ul.actions li {
 
display: inline-block;
 
padding: 0 0 0 1.5em;
 
}
 
 
ul.actions li:first-child {
 
padding: 0;
 
}
 
 
ul.actions.vertical li {
 
display: block;
 
padding: 1.5em 0 0 0;
 
}
 
 
ul.actions.vertical li:first-child {
 
padding: 0;
 
}
 
 
/* Table */
 
 
.table-wrapper {
 
overflow-x: auto;
 
-webkit-overflow-scrolling: touch;
 
}
 
 
table {
 
width: 100%;
 
}
 
 
table.default {
 
width: 100%;
 
}
 
 
table.default tbody tr {
 
border-bottom: solid 1px rgba(224, 224, 224, 0.75);
 
}
 
 
table.default tbody tr:nth-child(2n - 1) {
 
background: rgba(224, 224, 224, 0.15);
 
}
 
 
table.default td {
 
padding: 0.5em 1em 0.5em 1em;
 
}
 
 
table.default th {
 
color: #5b5b5b;
 
font-size: 0.8em;
 
font-weight: 700;
 
letter-spacing: 0.125em;
 
line-height: 1.75em;
 
padding: 0.5em 1em 0.5em 1em;
 
text-align: left;
 
text-transform: uppercase;
 
}
 
 
table.default thead {
 
border-bottom: solid 1px rgba(224, 224, 224, 0.75);
 
}
 
 
/* Button */
 
 
input[type="submit"],
 
input[type="reset"],
 
input[type="button"],
 
.button {
 
-moz-appearance: none;
 
-webkit-appearance: none;
 
-ms-appearance: none;
 
appearance: none;
 
-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 
-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 
-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 
background: #544d55;
 
border-radius: 4px;
 
border: 0;
 
color: #ffffff;
 
cursor: pointer;
 
display: inline-block;
 
font-size: 0.9em;
 
font-weight: 700;
 
letter-spacing: 0.125em;
 
line-height: 3.25em;
 
min-width: 15em;
 
padding: 0 1.5em;
 
text-align: center;
 
text-decoration: none;
 
text-transform: uppercase;
 
}
 
 
input[type="submit"]:hover,
 
input[type="reset"]:hover,
 
input[type="button"]:hover,
 
.button:hover {
 
background: #6e6570;
 
}
 
 
input[type="submit"]:active,
 
input[type="reset"]:active,
 
input[type="button"]:active,
 
.button:active {
 
background: #474148;
 
}
 
 
input[type="submit"].alt,
 
input[type="reset"].alt,
 
input[type="button"].alt,
 
.button.alt {
 
background: none;
 
box-shadow: inset 0 0 0 1px rgba(224, 224, 224, 0.75);
 
color: #544d55;
 
}
 
 
input[type="submit"].alt:hover,
 
input[type="reset"].alt:hover,
 
input[type="button"].alt:hover,
 
.button.alt:hover {
 
background: rgba(224, 224, 224, 0.15);
 
}
 
 
input[type="submit"].alt:active,
 
input[type="reset"].alt:active,
 
input[type="button"].alt:active,
 
.button.alt:active {
 
background: rgba(224, 224, 224, 0.35);
 
}
 
 
input[type="submit"].fit,
 
input[type="reset"].fit,
 
input[type="button"].fit,
 
.button.fit {
 
width: 100%;
 
}
 
 
input[type="submit"].small,
 
input[type="reset"].small,
 
input[type="button"].small,
 
.button.small {
 
font-size: 0.8em;
 
}
 
 
/* Box */
 
 
.box {
 
background: #ffffff;
 
border: solid 1px rgba(224, 224, 224, 0.75);
 
margin-bottom: 6em;
 
padding: 3.5em;
 
}
 
 
.box.alt {
 
background: none;
 
border: none;
 
padding: 0;
 
}
 
 
/* Feature */
 
 
.feature {
 
position: relative;
 
height: 20em;
 
}
 
 
.feature:after {
 
clear: both;
 
content: '';
 
display: block;
 
}
 
 
.feature h3, .feature h4, .feature h5, .feature h6 {
 
text-align: inherit;
 
}
 
 
.feature .image {
 
display: inline-block;
 
height: 100%;
 
overflow: hidden;
 
position: relative;
 
width: 50%;
 
}
 
 
.feature .image img {
 
display: block;
 
min-height: 100%;
 
min-width: 100%;
 
position: absolute;
 
}
 
 
.feature:before {
 
background: blue;
 
content: '';
 
display: inline-block;
 
height: 100%;
 
vertical-align: middle;
 
}
 
 
.feature .content {
 
display: inline-block;
 
padding: 3.5em;
 
vertical-align: middle;
 
width: 48%;
 
}
 
 
.feature .content h3 {
 
margin-bottom: 0.5em;
 
}
 
 
.feature .content :last-child {
 
margin: 0;
 
}
 
 
.feature.left {
 
text-align: left;
 
}
 
 
.feature.left .image {
 
float: left;
 
}
 
 
.feature.left .image img {
 
right: 0;
 
top: 0;
 
}
 
 
.feature.left .content {
 
padding-right: 0;
 
}
 
 
.feature.right {
 
text-align: right;
 
}
 
 
.feature.right .image {
 
float: right;
 
}
 
 
.feature.right .image img {
 
left: 0;
 
top: 0;
 
}
 
 
.feature.right .content {
 
padding-left: 0;
 
}
 
 
.feature.long .content {
 
padding-top: 0;
 
}
 
 
/* Header */
 
 
#header {
 
background-attachment: scroll, scroll, fixed;
 
background-image: url("https://static.igem.org/mediawiki/2017/6/65/Top-3200.svg"), url("images/overlay.png"), url("../../images/header.jpg");
 
background-position: bottom center, top left, center center;
 
background-repeat: repeat-x, repeat, no-repeat;
 
background-size: 3200px 460px, auto, cover;
 
color: rgba(255, 255, 255, 0.8);
 
padding: 10em 0 20em 0;
 
position: relative;
 
text-align: center;
 
}
 
 
#header:before, #header:after {
 
background: rgba(224, 224, 224, 0.75);
 
content: '';
 
left: 50%;
 
position: absolute;
 
width: 1px;
 
z-index: 0;
 
}
 
 
#header:before {
 
height: calc(100% - 50px);
 
opacity: 0.15;
 
top: 0;
 
}
 
 
#header:after {
 
bottom: 0;
 
height: 50px;
 
}
 
 
#header a {
 
border-bottom-color: rgba(255, 255, 255, 0.35);
 
color: rgba(255, 255, 255, 0.8);
 
}
 
 
#header a:hover {
 
border-bottom-color: transparent;
 
color: #4eb980;
 
}
 
 
#header strong, #header b {
 
color: #ffffff;
 
}
 
 
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
 
color: #ffffff;
 
}
 
 
#header input[type="submit"],
 
#header input[type="reset"],
 
#header input[type="button"],
 
#header .button {
 
background: #ffffff;
 
color: #544d55;
 
}
 
 
#header .logo {
 
background: #4eb980;
 
border-radius: 100%;
 
color: #ffffff;
 
cursor: default;
 
display: inline-block;
 
font-size: 2.25em;
 
height: 2.35em;
 
line-height: 2.35em;
 
margin: 0 0 0.75em 0;
 
text-align: center;
 
width: 2.35em;
 
}
 
 
#header .logo.fa-paper-plane-o:before {
 
left: -0.075em;
 
position: relative;
 
}
 
 
#header h1 {
 
font-size: 2.5em;
 
margin: 0;
 
}
 
 
#header p {
 
font-size: 1.5em;
 
line-height: 1.5em;
 
margin: 0.25em 0 0 0;
 
}
 
 
/* Footer */
 
 
#footer {
 
background-attachment: scroll;
 
background-color: #4eb980;
 
background-image: url("https://static.igem.org/mediawiki/2017/e/e3/Bottom-3200.svg");
 
background-position: top center;
 
background-repeat: repeat-x;
 
background-size: 3200px 460px;
 
color: rgba(255, 255, 255, 0.8);
 
/*
 
Since the SVG background occupies a lot of vertical space, we'll
 
add additional top padding (to move our content out of its way)
 
and a negative margin (to move everything up a bit).
 
*/
 
 
margin-top: -260px;
 
padding: calc(460px + 6em) 0 10em 0;
 
position: relative;
 
text-align: center;
 
}
 
 
#footer:before {
 
background: rgba(224, 224, 224, 0.75);
 
content: '';
 
height: calc(460px + 6em);
 
left: 50%;
 
position: absolute;
 
top: 0;
 
width: 1px;
 
z-index: 0;
 
}
 
 
#footer a {
 
color: #ffffff;
 
}
 
 
#footer strong, #footer b {
 
color: #ffffff;
 
}
 
 
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
 
color: #ffffff;
 
}
 
 
#footer header p {
 
color: rgba(255, 255, 255, 0.5);
 
}
 
 
#footer input[type="submit"],
 
#footer input[type="reset"],
 
#footer input[type="button"],
 
#footer .button {
 
background: #ffffff;
 
box-shadow: inset 0 0 0 1px #ffffff;
 
color: #4eb980;
 
}
 
 
#footer input[type="submit"]:hover,
 
#footer input[type="reset"]:hover,
 
#footer input[type="button"]:hover,
 
#footer .button:hover {
 
background: rgba(224, 224, 224, 0.15);
 
color: #ffffff;
 
}
 
 
#footer input[type="text"]:focus,
 
#footer input[type="password"]:focus,
 
#footer input[type="email"]:focus,
 
#footer select:focus,
 
#footer textarea:focus {
 
border-color: #ffffff;
 
}
 
 
#footer .formerize-placeholder {
 
color: rgba(255, 255, 255, 0.3) !important;
 
}
 
 
#footer form {
 
margin: 3em 0;
 
}
 
 
#footer .copyright {
 
color: rgba(255, 255, 255, 0.5);
 
font-size: 0.8em;
 
line-height: 1em;
 
margin: 3em 0 0 0;
 
}
 
 
#footer .copyright li {
 
border-left: dotted 1px;
 
display: inline-block;
 
margin-left: 1em;
 
padding-left: 1em;
 
}
 
 
#footer .copyright li:first-child {
 
padding: 0;
 
margin: 0;
 
border: 0;
 
}
 
 
#footer .copyright li a, #footer .copyright li span {
 
color: inherit;
 
}
 
 
#footer .copyright li a:hover, #footer .copyright li span:hover {
 
color: #ffffff;
 
}
 
 
/* Main */
 
 
#main {
 
padding: 6em 0 5em 0;
 
position: relative;
 
z-index: 1;
 
}
 
 
#main:before {
 
background: rgba(224, 224, 224, 0.75);
 
content: '';
 
height: 100%;
 
left: 50%;
 
position: absolute;
 
top: 0;
 
width: 1px;
 
z-index: -1;
 
}
 
 
#main header.major,
 
#main footer.major {
 
background: #ffffff;
 
}
 
 
/* Wide */
 
 
@media screen and (max-width: 1680px) {
 
 
/* Basic */
 
 
body, input, select, textarea {
 
font-size: 14pt;
 
}
 
 
h2 {
 
font-size: 1.5em;
 
}
 
 
h3 {
 
font-size: 1.25em;
 
}
 
 
/* Section/Article */
 
 
header.major p {
 
font-size: 1.25em;
 
}
 
 
/* Header */
 
 
#header {
 
padding: 8em 0 16em 0;
 
}
 
 
#header h1 {
 
font-size: 2.25em;
 
}
 
 
#header p {
 
font-size: 1.25em;
 
line-height: 1.65em;
 
}
 
 
}
 
 
/* Normal */
 
 
@media screen and (max-width: 1280px) {
 
 
/* Basic */
 
 
body, input, select, textarea {
 
font-size: 13pt;
 
}
 
 
h2 {
 
font-size: 1.35em;
 
}
 
 
h3 {
 
font-size: 1.15em;
 
}
 
 
/* Section/Article */
 
 
header.major {
 
margin-bottom: 4em;
 
padding: 3em 0;
 
}
 
 
header.major p {
 
font-size: 1.15em;
 
}
 
 
footer.major {
 
margin-top: 4em;
 
padding: 3em 0;
 
}
 
 
/* Box */
 
 
.box {
 
padding: 2.5em;
 
margin-bottom: 4em;
 
}
 
 
/* Feature */
 
 
.feature {
 
height: 18em;
 
}
 
 
.feature .content {
 
padding: 2.5em;
 
}
 
 
/* Header */
 
 
#header {
 
background-attachment: scroll, scroll, scroll;
 
background-image: url("https://static.igem.org/mediawiki/2017/9/9c/Top-1600.svg"), url("images/overlay.png"), url("../../images/header.jpg");
 
background-size: 1600px 230px, auto, cover;
 
padding: 6em 0 12em 0;
 
}
 
 
#header:before {
 
height: calc(100% - 25px);
 
}
 
 
#header:after {
 
height: 25px;
 
}
 
 
#header h1 {
 
font-size: 2em;
 
}
 
 
#header p {
 
font-size: 1.15em;
 
}
 
 
/* Footer */
 
 
#footer {
 
background-image: url("https://static.igem.org/mediawiki/2017/e/e4/Bottom-1600.svg");
 
background-size: 1600px 230px;
 
margin-top: -100px;
 
padding: calc(230px + 4em) 0 6em 0;
 
}
 
 
#footer:before {
 
height: calc(230px + 4em);
 
}
 
 
/* Main */
 
 
#main {
 
padding: 4em 0 3em 0;
 
}
 
 
}
 
 
/* Narrow */
 
 
@media screen and (max-width: 980px) {
 
 
/* Basic */
 
 
body, input, select, textarea {
 
font-size: 12pt;
 
}
 
 
}
 
 
/* Narrower */
 
 
@media screen and (max-width: 840px) {
 
 
/* Section/Article */
 
 
header.major {
 
padding-left: 2em;
 
padding-right: 2em;
 
}
 
 
footer.major {
 
padding-left: 2em;
 
padding-right: 2em;
 
}
 
 
}
 
 
/* Mobile */
 
 
@media screen and (max-width: 736px) {
 
 
/* Basic */
 
 
h2 {
 
font-size: 1em;
 
}
 
 
h3 {
 
font-size: 1em;
 
}
 
 
/* Section/Article */
 
 
header p {
 
font-size: 0.8em;
 
}
 
 
header.major {
 
margin-bottom: 2em;
 
}
 
 
header.major br {
 
display: none;
 
}
 
 
header.major p {
 
font-size: 0.8em;
 
}
 
 
footer.major {
 
margin-top: 2em;
 
}
 
 
footer.major br {
 
display: none;
 
}
 
 
/* List */
 
 
ul.actions li {
 
padding: 0 0 0 15px;
 
}
 
 
ul.actions.vertical li {
 
padding: 15px 0 0 0;
 
}
 
 
/* Box */
 
 
.box {
 
padding: 2em;
 
margin-bottom: 2em;
 
}
 
 
/* Feature */
 
 
.feature {
 
background: #ffffff;
 
display: block;
 
height: auto;
 
margin-bottom: 2em;
 
}
 
 
.feature:last-child {
 
margin-bottom: 0;
 
}
 
 
.feature:before, .feature:after {
 
display: none;
 
}
 
 
.feature .image {
 
float: none;
 
height: 15em;
 
width: 100%;
 
}
 
 
.feature .content {
 
border: solid 1px rgba(224, 224, 224, 0.75);
 
padding: 2em !important;
 
text-align: center;
 
width: 100%;
 
}
 
 
/* Header */
 
 
#header {
 
background-image: url("https://static.igem.org/mediawiki/2017/1/19/Top-1280.svg"), url("images/overlay.png"), url("../../images/header.jpg");
 
background-size: 1280px 184px, auto, cover;
 
padding: 3em 0 7em 0;
 
}
 
 
#header:before {
 
height: calc(100% - 20px);
 
}
 
 
#header:after {
 
height: 20px;
 
}
 
 
#header .logo {
 
font-size: 1.5em;
 
}
 
 
#header h1 {
 
font-size: 1.25em;
 
}
 
 
#header p {
 
font-size: 1em;
 
}
 
 
/* Footer */
 
 
#footer {
 
background-image: url("https://static.igem.org/mediawiki/2017/8/84/Bottom-1280.svg");
 
background-size: 1280px 184px;
 
margin-top: -75px;
 
padding: calc(184px + 2em) 0 2em 0;
 
}
 
 
#footer:before {
 
height: calc(184px + 2em);
 
}
 
 
#footer form {
 
padding-bottom: 0;
 
}
 
 
/* Main */
 
 
#main {
 
padding: 2em 0 2em 0;
 
}
 
 
}
 
 
/* Mobile (Portrait) */
 
 
@media screen and (max-width: 480px) {
 
 
/* Section/Article */
 
 
header.major {
 
padding-left: 1em;
 
padding-right: 1em;
 
}
 
 
footer.major {
 
padding-left: 1em;
 
padding-right: 1em;
 
}
 
 
/* List */
 
 
ul.icons li {
 
padding: 0.2em;
 
}
 
 
ul.actions li {
 
display: block;
 
padding: 15px 0 0 0;
 
}
 
 
ul.actions li:first-child {
 
padding: 0;
 
}
 
 
/* Button */
 
 
input[type="submit"],
 
input[type="reset"],
 
input[type="button"],
 
.button {
 
display: block;
 
width: 100%;
 
}
 
 
/* Box */
 
 
.box {
 
padding: 2em 1em;
 
}
 
 
/* Feature */
 
 
.feature {
 
margin-bottom: 1em;
 
}
 
 
.feature .content {
 
padding: 2em 1em !important;
 
}
 
 
/* Main */
 
 
#main {
 
padding-left: 1em;
 
padding-right: 1em;
 
}
 
 
/* Footer */
 
 
#footer {
 
margin-top: -100px;
 
padding-left: 1em;
 
padding-right: 1em;
 
}
 
 
#footer .copyright li {
 
border: 0;
 
display: block;
 
margin: 0;
 
padding: 0.75em 0 0 0;
 
}
 
 
/* Header */
 
 
#header {
 
padding-left: 2em;
 
padding-right: 2em;
 
}
 
 
#header br {
 
display: none;
 
}
 
  
 +
 +
 +
/* special class that the system uses to make sure the team wants a page to be evaluated */
 +
.judges-will-not-evaluate {
 +
    width: 96.6%;
 +
  margin: 5px 15px;
 +
  display: block;
 +
border: 4px solid #3399ff;
 +
    font-weight: bold;
 
}
 
}
 
 
Line 3,538: Line 748:
 
<!-- start of content -->
 
<!-- start of content -->
 
<div class="igem_2017_content_wrapper">
 
<div class="igem_2017_content_wrapper">
 +
<h1>CCU_Taiwan</h1>

Revision as of 15:13, 23 July 2017

CCU_Taiwan