Difference between revisions of "Template:BIOSINT Mexico"

(Prototype team template page)
 
Line 3: Line 3:
 
<style>
 
<style>
  
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
  
−
#sideMenu, #top_title {display:none;}
+
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, hgroup, menu, output, ruby, section, summary, time, mark, audio, video {
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
margin: 0;
−
body {background-color:white; }
+
padding: 0;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 +
}
  
−
/********************************* MENU ********************************/
+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
−
/* Wrapper for the menu */
+
display: block;
−
.menu_wrapper {  
+
−
width:150px;
+
−
height:100vh;
+
−
position:fixed;
+
−
padding:0px;
+
−
float:left;
+
−
background-color:#f2f2f2;
+
−
text-align:left;
+
 
}
 
}
  
−
/* styling for the menu items */
+
body {
−
.menu_item {
+
line-height: 1;
−
width:100%;
+
−
margin:-2px 0px 0px -20px;
+
−
padding: 10px 10px; 
+
−
border-bottom: 1px solid #d3d3d3;
+
−
font-weight:bold;
+
−
color:#000000;
+
−
cursor: pointer;  
+
 
}
 
}
  
−
/* when hovering on a menu item */
+
ol, ul {
−
.menu_item:hover {  
+
list-style: none;
−
color:#000000;
+
−
background-color: #72c9b6;
+
 
}
 
}
  
−
/* decoration icon for the menu buttons*/
+
blockquote, q {
−
.icon {
+
quotes: none;
−
float:right; 
+
−
font-size:16px;
+
−
font-weight:bold;  
+
 
}
 
}
−
+
 
−
/* this is the icon for when the content is collapsed */
+
blockquote:before, blockquote:after, q:before, q:after {
−
.plus::before {
+
content: '';
−
content: "+";  
+
content: none;
 
}
 
}
−
/* this is the icon for when the content is expanded */
 
−
.less::before {
 
−
content: "–";
 
−
}
 
  
−
/* styling for the ul that creates the buttons */
+
table {
−
ul.menu_items {
+
border-collapse: collapse;
−
width:100%;
+
border-spacing: 0;
−
margin-left:0px;
+
−
padding:0px;
+
−
list-style: none;  
+
 
}
 
}
  
−
/* styling for the li that are the menu items */
+
body {
−
.menu_items li {  
+
-webkit-text-size-adjust: none;
−
width:90%;
+
−
margin-top:-2px;
+
−
padding: 15px 0px 15px 15px ;
+
−
display:block;
+
−
border-bottom: 1px solid #d3d3d3; 
+
−
text-align:left;
+
−
font-weight:bold;
+
−
text-decoration:none;  
+
−
color:#000000;
+
−
list-style-type:none;
+
−
cursor:pointer;
+
−
-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; 
+
 
}
 
}
  
−
.menu_item a {
+
/* Box Model */
−
width: 100%;
+
 
−
margin-left: -20px;
+
*, *:before, *:after {
−
padding: 11px 90px 12px 20px;
+
-moz-box-sizing: border-box;
−
text-decoration: none;
+
-webkit-box-sizing: border-box;
−
color:black;
+
box-sizing: border-box;
 
}
 
}
  
−
/* When hovering on a menu item */
+
/* Basic */
−
.menu_items li:hover {  
+
 
−
background-color:#72c9b6;
+
@-ms-viewport {
−
color: #000000;
+
width: device-width;
 
}
 
}
  
−
/* styling for the submenus */
+
body {
−
.submenu {
+
-ms-overflow-style: scrollbar;
−
width:100%;  
+
}
−
display: none; 
+
 
−
font-weight:bold;
+
@media screen and (max-width: 480px) {
−
cursor:pointer;
+
 
 +
html, body {
 +
min-width: 320px;
 +
}
  
 
}
 
}
  
−
/* moving the margin for the submenu ul list */
+
body {
−
ul.submenu {  
+
background: #f4f4f4;
−
width: 100%;
+
−
margin: 10px 0px -11px 0px;
+
−
list-style: none;
+
 
}
 
}
  
−
/*styling for the submenu buttons */
+
body.is-loading *, body.is-loading *:before, body.is-loading *:after {
−
.submenu li {  
+
-moz-animation: none !important;
−
width: 100%;  
+
-webkit-animation: none !important;
−
margin-left: 10px;
+
-ms-animation: none !important;
−
margin-bottom: 0px;
+
animation: none !important;
 +
-moz-transition: none !important;
 +
-webkit-transition: none !important;
 +
-ms-transition: none !important;
 +
transition: none !important;
 +
}
 +
 
 +
/* Type */
 +
 
 +
body, input, select, textarea {
 +
color: #646464;
 +
font-family: "Source Sans Pro", Helvetica, sans-serif;
 +
font-size: 14pt;
 +
font-weight: 400;
 +
line-height: 1.75;
 
}
 
}
  
 +
@media screen and (max-width: 1680px) {
  
−
/* hover state for the submenu buttons */
+
body, input, select, textarea {
−
.submenu li a {
+
font-size: 12pt;
−
width: 100%;  
+
}
−
padding: 5px 10px;  
+
 
−
display: inline-block;
+
}
−
border-bottom: 1px solid #d3d3d3;
+
 
−
background-color:white;  
+
@media screen and (max-width: 1280px) {
−
text-decoration:none;
+
 
−
color:#000000;  
+
body, input, select, textarea {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
body, input, select, textarea {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
body, input, select, textarea {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
body, input, select, textarea {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
a {
 +
-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
 +
-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
 +
-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
 +
transition: color 0.2s ease, border-bottom-color 0.2s ease;
 +
border-bottom: dotted 1px rgba(160, 160, 160, 0.65);
 +
color: inherit;
 +
text-decoration: none;
 
}
 
}
  
 +
a:before {
 +
-moz-transition: color 0.2s ease;
 +
-webkit-transition: color 0.2s ease;
 +
-ms-transition: color 0.2s ease;
 +
transition: color 0.2s ease;
 +
}
  
 +
a:hover {
 +
border-bottom-color: transparent;
 +
color: #2ebaae !important;
 +
}
  
−
.submenu li a:hover {
+
a:hover:before {
−
background-color:#000000;  
+
color: #2ebaae !important;
−
color: #72c9b6;
+
}
 +
 
 +
strong, b {
 +
color: #3c3b3b;
 +
font-weight: 700;
 
}
 
}
  
 +
em, i {
 +
font-style: italic;
 +
}
  
−
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
+
p {
−
.collapsable_menu_control {  
+
margin: 0 0 2em 0;
−
width:100%;
+
−
padding: 15px 0px;
+
−
display:none;
+
−
background-color:#000000;
+
−
text-align:center; 
+
−
font-weight:bold;
+
−
color:#72c9b6;
+
−
cursor:pointer;
+
−
-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;  
+
 
}
 
}
  
−
/* when hovering on that button */
+
h1, h2, h3, h4, h5, h6 {
−
.collapsable_menu_control:hover {  
+
color: #3c3b3b;
−
background-color: #72c9b6;
+
font-family: "Raleway", Helvetica, sans-serif;
−
color:#000000;
+
font-weight: 800;
 +
letter-spacing: 0.25em;
 +
line-height: 1.65;
 +
margin: 0 0 1em 0;
 +
text-transform: uppercase;
 
}
 
}
  
−
/********************************* CONTENT OF THE PAGE ********************************/
+
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 +
color: inherit;
 +
border-bottom: 0;
 +
}
  
−
/* Wrapper for the content */
+
h2 {
−
.content_wrapper {
+
font-size: 1.1em;
−
width: 85%;
+
−
margin-left:150px;
+
−
padding:10px 0px;
+
−
float:left;
+
−
background-color:white;  
+
 
}
 
}
  
−
/*LAYOUT */
+
h3 {
−
.column  {  
+
font-size: 0.9em;
−
padding: 10px 0px;
+
−
float:left;
+
−
background-color:white;  
+
 
}
 
}
  
−
.full_size {
+
h4 {
−
width:100%;  
+
font-size: 0.7em;
 
}
 
}
  
−
.full_size img {  
+
h5 {
−
padding: 10px 15px;
+
font-size: 0.7em;
−
width:96.5%;  
+
 
}
 
}
  
−
.half_size {
+
h6 {
−
width: 50%;  
+
font-size: 0.7em;
 
}
 
}
−
.half_size img {  
+
 
−
padding: 10px 15px;
+
sub {
−
width: 93%;  
+
font-size: 0.8em;
 +
position: relative;
 +
top: 0.5em;
 
}
 
}
  
 +
sup {
 +
font-size: 0.8em;
 +
position: relative;
 +
top: -0.5em;
 +
}
  
−
.clear {
+
blockquote {
−
clear:both;
+
border-left: solid 4px rgba(160, 160, 160, 0.3);
 +
font-style: italic;
 +
margin: 0 0 2em 0;
 +
padding: 0.5em 0 0.5em 2em;
 
}
 
}
  
−
.highlight {  
+
code {
−
width: 90%;  
+
background: rgba(160, 160, 160, 0.075);
−
margin: auto;  
+
border: solid 1px rgba(160, 160, 160, 0.3);
−
padding: 15px 5px;
+
font-family: "Courier New", monospace;
−
background-color: #f2f2f2;  
+
font-size: 0.9em;
 +
margin: 0 0.25em;
 +
padding: 0.25em 0.65em;
 
}
 
}
  
−
.judges-will-not-evaluate {
+
pre {
−
border: 4px solid #72c9b6;
+
-webkit-overflow-scrolling: touch;
−
display: block;
+
font-family: "Courier New", monospace;
−
margin: 5px 15px;
+
font-size: 0.9em;
−
width: 95%;
+
margin: 0 0 2em 0;
−
font-weight:bold;
+
 
}
 
}
  
 +
pre code {
 +
display: block;
 +
line-height: 1.75em;
 +
padding: 1em 1.5em;
 +
overflow-x: auto;
 +
}
  
−
/*STYLING */
+
hr {
 +
border: 0;
 +
border-bottom: solid 1px rgba(160, 160, 160, 0.3);
 +
margin: 2em 0;
 +
}
  
−
/* styling for the titles */
+
hr.major {
−
.content_wrapper h1, .content_wrapper h2 {
+
margin: 3em 0;
−
padding:5px 15px;  
+
}
−
border-bottom:0px;
+
−
color:#72c9b6;
+
  
 +
.align-left {
 +
text-align: left;
 
}
 
}
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
+
 
−
padding:5px 15px;
+
.align-center {
−
border-bottom:0px;
+
text-align: center;
−
color: #000000;
+
 
}
 
}
  
 +
.align-right {
 +
text-align: right;
 +
}
  
−
/* font and text */
+
 
−
.content_wrapper p {  
+
 
−
padding:0px 15px;
+
/* Blurb */
−
font-size: 13px;
+
 
−
font-family:Tahoma, Geneva, sans-serif;  
+
.blurb h2 {
 +
font-size: 0.8em;
 +
margin: 0 0 1.5em 0;
 
}
 
}
  
−
/* Links */
+
.blurb h3 {
−
.content_wrapper a {  
+
font-size: 0.7em;
−
font-weight: bold;
+
−
text-decoration: underline;
+
−
text-decoration-color:#72c9b6;
+
−
color: #72c9b6;
+
−
-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;
+
 
}
 
}
  
−
/* hover for the links */
+
.blurb p {
−
.content_wrapper a:hover {  
+
font-size: 0.9em;
−
text-decoration:none;
+
−
color:#000000;
+
 
}
 
}
  
−
/* non numbered lists */
+
 
−
.content_wrapper ul {
+
/* List */
−
padding:0px 20px;
+
 
−
font-size: 13px;
+
ol {
−
font-family:Tahoma, Geneva, sans-serif;  
+
list-style: decimal;
 +
margin: 0 0 2em 0;
 +
padding-left: 1.25em;
 
}
 
}
  
−
/* numbered lists */
+
ol li {
−
.content_wrapper ol {
+
padding-left: 0.25em;
−
padding:0px;  
+
}
−
font-size: 13px;
+
 
−
font-family:Tahoma, Geneva, sans-serif;  
+
ul {
 +
list-style: disc;
 +
margin: 0 0 2em 0;
 +
padding-left: 1em;
 
}
 
}
  
−
/* Table */
+
ul li {
−
.content_wrapper table {  
+
padding-left: 0.5em;
−
width: 97%;  
+
}
−
margin:15px 10px;  
+
 
−
border: 1px solid #d3d3d3;  
+
ul.alt {
−
border-collapse: collapse;  
+
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.alt li {
 +
border-top: solid 1px rgba(160, 160, 160, 0.3);
 +
padding: 0.5em 0;
 +
}
 +
 
 +
ul.alt li:first-child {
 +
border-top: 0;
 +
padding-top: 0;
 +
}
 +
 
 +
ul.icons {
 +
cursor: default;
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.icons li {
 +
display: inline-block;
 +
padding: 0 1em 0 0;
 +
}
 +
 
 +
ul.icons li:last-child {
 +
padding-right: 0;
 +
}
 +
 
 +
ul.icons li > * {
 +
text-decoration: none;
 +
border: 0;
 +
}
 +
 
 +
ul.icons li > *:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
ul.icons li > * .label {
 +
display: none;
 +
}
 +
 
 +
ul.actions {
 +
cursor: default;
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.actions li {
 +
display: inline-block;
 +
padding: 0 1.5em 0 0;
 +
vertical-align: middle;
 +
}
 +
 
 +
ul.actions li:last-child {
 +
padding-right: 0;
 +
}
 +
 
 +
ul.actions.pagination .next {
 +
text-decoration: none;
 +
}
 +
 
 +
ul.actions.pagination .next:after {
 +
content: "";
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
ul.actions.pagination .next:after {
 +
content: '\f054';
 +
}
 +
 
 +
ul.actions.pagination .previous {
 +
text-decoration: none;
 +
}
 +
 
 +
ul.actions.pagination .previous:before {
 +
content: "";
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
ul.actions.pagination .previous:before {
 +
content: '\f053';
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
ul.actions.pagination {
 +
text-align: center;
 +
}
 +
 
 +
ul.actions.pagination .next, ul.actions.pagination .previous {
 +
min-width: 20em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
ul.actions.pagination .next, ul.actions.pagination .previous {
 +
min-width: 18em;
 +
}
 +
 
 +
}
 +
 
 +
ul.actions.small li {
 +
padding: 0 1em 0 0;
 +
}
 +
 
 +
ul.actions.vertical li {
 +
display: block;
 +
padding: 1.5em 0 0 0;
 +
}
 +
 
 +
ul.actions.vertical li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
ul.actions.vertical li > * {
 +
margin-bottom: 0;
 +
}
 +
 
 +
ul.actions.vertical.small li {
 +
padding: 1em 0 0 0;
 +
}
 +
 
 +
ul.actions.vertical.small li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
ul.actions.fit {
 +
display: table;
 +
margin-left: -1em;
 +
padding: 0;
 +
table-layout: fixed;
 +
width: calc(100% + 1em);
 +
}
 +
 
 +
ul.actions.fit li {
 +
display: table-cell;
 +
padding: 0 0 0 1em;
 +
}
 +
 
 +
ul.actions.fit li > * {
 +
margin-bottom: 0;
 +
}
 +
 
 +
ul.actions.fit.small {
 +
margin-left: -0.5em;
 +
width: calc(100% + 0.5em);
 +
}
 +
 
 +
ul.actions.fit.small li {
 +
padding: 0 0 0 0.5em;
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
ul.actions {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
ul.actions li {
 +
padding: 1em 0 0 0;
 +
display: block;
 +
text-align: center;
 +
width: 100%;
 +
}
 +
 
 +
ul.actions li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
ul.actions li > * {
 +
width: 100%;
 +
margin: 0 !important;
 +
}
 +
 
 +
ul.actions.small li {
 +
padding: 0.5em 0 0 0;
 +
}
 +
 
 +
ul.actions.small li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
}
 +
 
 +
 
 +
 
 +
dl {
 +
margin: 0 0 2em 0;
 
}
 
}
  
−
/* table cells */
+
dl dt {
−
.content_wrapper  td {  
+
display: block;
−
padding: 10px;
+
font-weight: 700;
−
vertical-align: text-top;  
+
margin: 0 0 1em 0;
−
border: 1px solid #d3d3d3;  
+
}
−
border-collapse: collapse;  
+
 
 +
dl dd {
 +
margin-left: 2em;
 +
}
 +
 
 +
 
 +
 
 +
/* Post */
 +
 
 +
.post {
 +
padding: 2em 3em 1em 3em ;
 +
background: #ffffff;
 +
border: solid 1px rgba(160, 160, 160, 0.3);
 +
margin: 0 0 3em 0;
 +
position: relative;
 
}
 
}
  
−
/* table headers */
+
.post > header {
−
.content_wrapper th {  
+
display: -moz-flex;
−
padding: 10px;  
+
display: -webkit-flex;
−
vertical-align: text-top;  
+
display: -ms-flex;
−
border: 1px solid #d3d3d3;  
+
display: flex;
−
border-collapse: collapse;  
+
border-bottom: solid 1px rgba(160, 160, 160, 0.3);
−
background-color:#f2f2f2;  
+
left: -3em;
 +
margin: -3em 0 3em 0;
 +
position: relative;
 +
width: calc(100% + 6em);
 +
}
 +
 
 +
.post > header .title {
 +
-moz-flex-grow: 1;
 +
-webkit-flex-grow: 1;
 +
-ms-flex-grow: 1;
 +
flex-grow: 1;
 +
-ms-flex: 1;
 +
padding: 3.75em 3em 3.3em 3em;
 +
}
 +
 
 +
.post > header .title h2 {
 +
font-weight: 900;
 +
font-size: 1.5em;
 +
}
 +
 
 +
.post > header .title > :last-child {
 +
margin-bottom: 0;
 +
}
 +
 
 +
.post > header .meta {
 +
padding: 3.75em 3em 1.75em 3em ;
 +
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
min-width: 17em;
 +
text-align: right;
 +
width: 17em;
 +
}
 +
 
 +
.post > header .meta > * {
 +
margin: 0 0 1em 0;
 +
}
 +
 
 +
.post > header .meta > :last-child {
 +
margin-bottom: 0;
 +
}
 +
 
 +
.post > header .meta .published {
 +
color: #3c3b3b;
 +
display: block;
 +
font-family: "Raleway", Helvetica, sans-serif;
 +
font-size: 0.7em;
 +
font-weight: 800;
 +
letter-spacing: 0.25em;
 +
margin-top: 0.5em;
 +
text-transform: uppercase;
 +
white-space: nowrap;
 +
}
 +
 
 +
.post > a.image.featured {
 +
overflow: hidden;
 +
}
 +
 
 +
.post > a.image.featured img {
 +
-moz-transition: -moz-transform 0.2s ease-out;
 +
-webkit-transition: -webkit-transform 0.2s ease-out;
 +
-ms-transition: -ms-transform 0.2s ease-out;
 +
transition: transform 0.2s ease-out;
 +
}
 +
 
 +
.post > a.image.featured:hover img {
 +
-moz-transform: scale(1.05);
 +
-webkit-transform: scale(1.05);
 +
-ms-transform: scale(1.05);
 +
transform: scale(1.05);
 +
}
 +
 
 +
.post > footer {
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-align-items: center;
 +
-webkit-align-items: center;
 +
-ms-align-items: center;
 +
align-items: center;
 +
}
 +
 
 +
.post > footer .actions {
 +
-moz-flex-grow: 1;
 +
-webkit-flex-grow: 1;
 +
-ms-flex-grow: 1;
 +
flex-grow: 1;
 +
}
 +
 
 +
.post > footer .stats {
 +
cursor: default;
 +
list-style: none;
 +
padding: 0;
 +
}
 +
 
 +
.post > footer .stats li {
 +
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
display: inline-block;
 +
font-family: "Raleway", Helvetica, sans-serif;
 +
font-size: 0.6em;
 +
font-weight: 400;
 +
letter-spacing: 0.25em;
 +
line-height: 1;
 +
margin: 0 0 0 2em;
 +
padding: 0 0 0 2em;
 +
text-transform: uppercase;
 +
}
 +
 
 +
.post > footer .stats li:first-child {
 +
border-left: 0;
 +
margin-left: 0;
 +
padding-left: 0;
 +
}
 +
 
 +
.post > footer .stats li .icon {
 +
border-bottom: 0;
 +
}
 +
 
 +
.post > footer .stats li .icon:before {
 +
color: rgba(160, 160, 160, 0.3);
 +
margin-right: 0.75em;
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.post {
 +
border-left: 0;
 +
border-right: 0;
 +
left: -3em;
 +
width: calc(100% + (3em * 2));
 +
}
 +
 
 +
.post > header {
 +
-moz-flex-direction: column;
 +
-webkit-flex-direction: column;
 +
-ms-flex-direction: column;
 +
flex-direction: column;
 +
padding: 3.75em 3em 1.25em 3em ;
 +
border-left: 0;
 +
}
 +
 
 +
.post > header .title {
 +
-ms-flex: 0 1 auto;
 +
margin: 0 0 2em 0;
 +
padding: 0;
 +
text-align: center;
 +
}
 +
 
 +
.post > header .meta {
 +
-moz-align-items: center;
 +
-webkit-align-items: center;
 +
-ms-align-items: center;
 +
align-items: center;
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-justify-content: center;
 +
-webkit-justify-content: center;
 +
-ms-justify-content: center;
 +
justify-content: center;
 +
border-left: 0;
 +
margin: 0 0 2em 0;
 +
padding-top: 0;
 +
padding: 0;
 +
text-align: left;
 +
width: 100%;
 +
}
 +
 
 +
.post > header .meta > * {
 +
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
margin-left: 2em;
 +
padding-left: 2em;
 +
}
 +
 
 +
.post > header .meta > :first-child {
 +
border-left: 0;
 +
margin-left: 0;
 +
padding-left: 0;
 +
}
 +
 
 +
.post > header .meta .published {
 +
margin-bottom: 0;
 +
margin-top: 0;
 +
}
 +
 
 +
.post > header .meta .author {
 +
-moz-flex-direction: row-reverse;
 +
-webkit-flex-direction: row-reverse;
 +
-ms-flex-direction: row-reverse;
 +
flex-direction: row-reverse;
 +
margin-bottom: 0;
 +
}
 +
 
 +
.post > header .meta .author .name {
 +
margin: 0 0 0 1.5em;
 +
}
 +
 
 +
.post > header .meta .author img {
 +
width: 3.5em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
.post {
 +
padding: 1.5em 1.5em 0.1em 1.5em ;
 +
left: -1.5em;
 +
margin: 0 0 2em 0;
 +
width: calc(100% + (1.5em * 2));
 +
}
 +
 
 +
.post > header {
 +
padding: 3em 1.5em 0.5em 1.5em ;
 +
left: -1.5em;
 +
margin: -1.5em 0 1.5em 0;
 +
width: calc(100% + 3em);
 +
}
 +
 
 +
.post > header .title h2 {
 +
font-size: 1.1em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
.post > header .meta {
 +
-moz-align-items: center;
 +
-webkit-align-items: center;
 +
-ms-align-items: center;
 +
align-items: center;
 +
-moz-flex-direction: column;
 +
-webkit-flex-direction: column;
 +
-ms-flex-direction: column;
 +
flex-direction: column;
 +
}
 +
 
 +
.post > header .meta > * {
 +
border-left: 0;
 +
margin: 1em 0 0 0;
 +
padding-left: 0;
 +
}
 +
 
 +
.post > header .meta .author .name {
 +
display: none;
 +
}
 +
 
 +
.post > .image.featured {
 +
margin-left: -1.5em;
 +
margin-top: calc(-1.5em - 1px);
 +
width: calc(100% + 3em);
 +
}
 +
 
 +
.post > footer {
 +
-moz-align-items: stretch;
 +
-webkit-align-items: stretch;
 +
-ms-align-items: stretch;
 +
align-items: stretch;
 +
-moz-flex-direction: column-reverse;
 +
-webkit-flex-direction: column-reverse;
 +
-ms-flex-direction: column-reverse;
 +
flex-direction: column-reverse;
 +
}
 +
 
 +
.post > footer .stats {
 +
text-align: center;
 +
}
 +
 
 +
.post > footer .stats li {
 +
margin: 0 0 0 1.25em;
 +
padding: 0 0 0 1.25em;
 +
}
 +
 
 +
}
 +
 
 +
/* Section/Article */
 +
 
 +
section.special, article.special {
 +
text-align: center;
 
}
 
}
  
−
/* Button class */
+
header p {
−
.button_click {  
+
font-family: "Raleway", Helvetica, sans-serif;
−
margin: 10px auto;
+
font-size: 0.7em;
−
padding: 15px; width:12%; 
+
font-weight: 400;
−
text-align:center;  
+
letter-spacing: 0.25em;
−
font-weight:bold;  
+
line-height: 2.5;
−
background-color: #72c9b6;
+
margin-top: -1em;
−
cursor:pointer; 
+
text-transform: uppercase;
−
-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;  
+
 
}
 
}
  
−
/* button class on hover */
+
/* --Header */
−
.button_click:hover {
+
 
−
background-color:#000000;
+
body {
−
color:#72c9b6;
+
padding-top: 3.5em;
 
}
 
}
  
−
/********************************* RESPONSIVE STYLING ********************************/
+
#header {
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-justify-content: space-between;
 +
-webkit-justify-content: space-between;
 +
-ms-justify-content: space-between;
 +
justify-content: space-between;
 +
background-color: #444;
 +
border-bottom: solid 1px rgba(160, 160, 160, 0.3);
 +
height: 3.5em;
 +
left: 0;
 +
line-height: 3.5em;
 +
position: fixed;
 +
top: 0;
 +
width: 100%;
 +
z-index: 10000;
 +
}
  
−
/* IF THE SCREEN IS LESS THAN 1000PX */
+
#header a {
 +
color: #fff;
 +
text-decoration: none;
 +
}
  
−
@media only screen and (max-width: 1000px) {
+
#header ul {
 +
list-style: none;
 +
margin: 0;
 +
padding-left: 0;
 +
}
  
−
#content {width:100%; }
+
#header ul li {
−
.menu_wrapper {width:15%;}
+
display: inline-block;
−
.content_wrapper {margin-left: 15%;}
+
padding-left: 0;
−
.menu_item {display:block;}
+
}
−
.icon {display:none;}
+
−
.highlight {padding:10px 0px;}
+
−
}
+
  
 +
#header h1 {
 +
height: inherit;
 +
line-height: inherit;
 +
padding: 0 0 0 1.5em;
 +
white-space: nowrap;
 +
}
  
−
/* IF THE SCREEN IS LESS THAN 680PX */
+
#header h1 a {
 +
font-size: 0.7em;
 +
}
  
−
@media only screen and (max-width: 680px) {
+
#header .links {
−
.collapsable_menu_control { display:block;}
+
-moz-flex: 1;
−
.menu_item {display:none;}
+
-webkit-flex: 1;
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
+
-ms-flex: 1;
−
.content_wrapper {width:100%; margin-left:0px;}
+
flex: 1;
−
.column.half_size {width:100%; }
+
border-left: solid 1px rgba(160, 160, 160, 0.3);
−
.column img { width: 100%; padding: 5px 0px;}
+
height: inherit;
−
.icon {display:block;}
+
line-height: inherit;
−
.highlight {padding:15px 5px;}
+
margin-left: 1.5em;
−
}
+
overflow: hidden;
 +
padding-left: 1.5em;
 +
}
  
−
</style>
+
#header .links ul li {
 +
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
line-height: 1;
 +
margin-left: 1em;
 +
padding-left: 1em;
 +
}
  
 +
#header .links ul li:first-child {
 +
border-left: 0;
 +
margin-left: 0;
 +
padding-left: 0;
 +
}
  
 +
#header .links ul li a {
 +
border-bottom: 0;
 +
font-family: "Raleway", Helvetica, sans-serif;
 +
font-size: 0.7em;
 +
font-weight: 400;
 +
letter-spacing: 0.25em;
 +
text-transform: uppercase;
 +
}
  
 +
#header .main {
 +
height: inherit;
 +
line-height: inherit;
 +
text-align: right;
 +
}
  
−
<!--- THIS IS WHERE THE HTML BEGINS --->
+
#header .main ul {
 +
height: inherit;
 +
line-height: inherit;
 +
}
  
 +
#header .main ul li {
 +
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
height: inherit;
 +
line-height: inherit;
 +
white-space: nowrap;
 +
}
  
−
<!-- This tells the browser that your page is responsive -->
+
#header .main ul li > * {
 +
display: block;
 +
float: left;
 +
}
  
−
<head>  
+
#header .main ul li > a {
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
text-decoration: none;
−
</head>
+
border-bottom: 0;
 +
color: #aaaaaa;
 +
overflow: hidden;
 +
position: relative;
 +
text-indent: 4em;
 +
width: 4em;
 +
}
  
 +
#header .main ul li > a:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
  
 +
#header .main ul li > a:before {
 +
display: block;
 +
height: inherit;
 +
left: 0;
 +
line-height: inherit;
 +
position: absolute;
 +
text-align: center;
 +
text-indent: 0;
 +
top: 0;
 +
width: inherit;
 +
}
  
 +
#header form {
 +
margin: 0;
 +
}
  
−
<div class="menu_wrapper" >
+
#header form input {
 +
display: inline-block;
 +
height: 2.5em;
 +
position: relative;
 +
top: -2px;
 +
vertical-align: middle;
 +
}
  
 +
#header #search {
 +
-moz-transition: all 0.5s ease;
 +
-webkit-transition: all 0.5s ease;
 +
-ms-transition: all 0.5s ease;
 +
transition: all 0.5s ease;
 +
max-width: 0;
 +
opacity: 0;
 +
overflow: hidden;
 +
padding: 0;
 +
white-space: nowrap;
 +
}
  
 +
#header #search input {
 +
width: 12em;
 +
}
  
 +
#header #search.visible {
 +
max-width: 12.5em;
 +
opacity: 1;
 +
padding: 0 0.5em 0 0;
 +
}
  
−
<div class="collapsable_menu_control"> MENU ▤ </div>
+
@media screen and (max-width: 980px) {
  
−
<ul id="accordion" class="accordion">
+
#header .links {
 +
display: none;
 +
}
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:BIOSINT_Mexico">HOME </a> </li>
+
}
  
 +
@media screen and (max-width: 736px) {
  
−
<li class="menu_item"> <div class="icon plus"></div> TEAM
+
#header {
−
<ul class="submenu">
+
height: 2.75em;
−
<li> <a href=" https://2016.igem.org/Team:BIOSINT_Mexico/Team"> Team  </a> </li>
+
line-height: 2.75em;
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Collaborations">★  Collaborations </a> </li>
+
}
−
                    </ul>
+
−
                </li>
+
  
−
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
+
#header h1 {
−
<ul class="submenu">
+
padding: 0 0 0 1em;
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Description"> ★  Description </a></li>
+
}
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Design"> ★ Design </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Experiments"> Experiments </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Proof"> ★ Proof of Concept </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Demonstrate"> ★ Demonstrate </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Results"> Results </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Notebook"> Notebook </a></li>
+
−
                    </ul>
+
−
                </li>
+
  
−
<li class="menu_item"> <div class="icon plus"></div> PARTS 
+
#header .main .search {
−
<ul class="submenu">
+
display: none;
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Parts">Parts </a></li>
+
}
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Basic_Part"> ★ Basic Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Composite_Part"> ★ Composite Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Part_Collection"> ★ Part Collection </a></li>
+
−
                    </ul>
+
−
                </li>
+
  
 +
}
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Safety"> SAFETY </a> </li>
+
/* Wrapper */
  
 +
#wrapper {
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-flex-direction: row-reverse;
 +
-webkit-flex-direction: row-reverse;
 +
-ms-flex-direction: row-reverse;
 +
flex-direction: row-reverse;
 +
-moz-transition: opacity 0.5s ease;
 +
-webkit-transition: opacity 0.5s ease;
 +
-ms-transition: opacity 0.5s ease;
 +
transition: opacity 0.5s ease;
 +
margin: 0 auto;
 +
max-width: 100%;
 +
opacity: 1;
 +
padding: 4.5em;
 +
width: 90em;
 +
}
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Attributions">★  ATTRIBUTIONS </a></li>
+
body.is-menu-visible #wrapper {
 +
opacity: 0.15;
 +
}
  
 +
@media screen and (max-width: 1680px) {
  
−
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
+
#wrapper {
−
<ul class="submenu">
+
padding: 4em;
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Human_Practices"> Human Practices </a></li>
+
}
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/HP/Silver">★ Silver </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/HP/Gold">★ Gold </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Integrated_Practices"> ★ Integrated Practices </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Engagement">★ Engagement </a></li>
+
−
                    </ul>
+
−
                </li>
+
  
 +
}
  
−
<li class="menu_item"> <div class="icon plus"></div> AWARDS
+
@media screen and (max-width: 1280px) {
−
<ul class="submenu">
+
−
<li><a href="https://2016.igem.org/Team:BIOSINT_Mexico/Entrepreneurship"> ★ Entrepreneurship </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Hardware"> ★ Hardware </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Software">★ Software </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Measurement">★  Measurement </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:BIOSINT_Mexico/Model">★ Model </a></li>
+
  
−
                    </ul>
+
#wrapper {
−
                </li>
+
display: block;
−
</ul>
+
}
  
−
</div>
+
}
  
 +
@media screen and (max-width: 736px) {
  
 +
#wrapper {
 +
padding: 1.5em;
 +
}
  
 +
}
  
 +
body.single #wrapper {
 +
display: block;
 +
}
  
−
<div class="content_wrapper">
+
/* Main */
  
 +
#main {
 +
-moz-flex-grow: 1;
 +
-webkit-flex-grow: 1;
 +
-ms-flex-grow: 1;
 +
flex-grow: 1;
 +
-ms-flex: 1;
 +
width: 100%;
 +
}
  
 +
/* Sidebar */
  
−
<h1 id="team_name">  </h1>
+
#sidebar {
−
<h4 id="page_name">  </h4>
+
margin-left: 2em;
 +
margin-right: 2em;
 +
width: auto;
 +
}
  
 +
#sidebar > * {
 +
border-top: solid 1px rgba(160, 160, 160, 0.3);
 +
margin: 3em 0 0 0;
 +
padding: 3em 0 0 0;
 +
}
  
 +
#sidebar > :first-child {
 +
border-top: 0;
 +
margin-top: 0;
 +
padding-top: 0;
 +
}
  
 +
@media screen and (max-width: 1280px) {
  
 +
#sidebar {
 +
border-top: solid 1px rgba(160, 160, 160, 0.3);
 +
margin: 3em 0 0 0;
 +
min-width: 0;
 +
padding: 3em 0 0 0;
 +
width: 100%;
 +
}
  
 +
}
  
 +
/* --Menu */
  
 +
ul, ol {
 +
list-style:none;
 +
}
 +
.nav li a {
 +
padding:0px 12px;
 +
display:block;
 +
}
 +
 +
.nav li a:hover {
 +
}
 +
 +
.nav li ul {
 +
display:none;
 +
position:absolute;
 +
}
 +
 +
.nav li:hover > ul {
 +
background-color:#4E4444;
 +
display:block;
 +
}
 +
 +
.nav li ul li {
 +
position:relative;
  
 +
}
  
−
<script>
 
  
−
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
  
−
$(document).ready(function() {
 
  
−
$("#HQ_page").attr('id','');
+
/* Intro */
−
+
  
−
if ( wgPageName.substring( 0,  8) == "Template")  {   // if the page is a template it displays the full name in a single line
+
#intro .logo {
−
$("#team_name").html( wgPageName );  
+
border-bottom: 0;
 +
display: inline-block;
 +
margin: 0 0 1em 0;
 +
overflow: hidden;
 +
position: relative;
 +
width: 11em;
 +
}
 +
 
 +
#intro .logo:before {
 +
background-position: top left;
 +
background-repeat: no-repeat;
 +
background-size: 100% 100%;
 +
content: '';
 +
display: block;
 +
height: 100%;
 +
left: 0;
 +
position: absolute;
 +
top: 0;
 +
width: 100%;
 
}
 
}
  
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) { // if it is the home page , just print the team's name
+
#intro .logo img {
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );  
+
display: block;
 +
margin-left: -0.15em;
 +
width: 9em;
 
}
 
}
  
−
else {
+
#intro header h2 {
−
// this adds the team's name as an h1
+
font-size: 2em;
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );  
+
font-weight: 900;
 +
}
  
−
// this adds the page's title as an h4
+
#intro header p {
−
$("#page_name").html (     ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+
font-size: 0.8em;
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
#intro {
 +
margin: 0 0 3em 0;
 +
text-align: center;
 
}
 
}
  
 +
#intro header h2 {
 +
font-size: 2em;
 +
}
  
 +
#intro header p {
 +
font-size: 0.7em;
 +
}
  
 +
}
  
−
$('#accordion').find('.menu_item').click(function(){
+
@media screen and (max-width: 736px) {
  
−
//Expand or collapse this panel
+
#intro {
−
submenu = $(this).find('.submenu');
+
margin: 0 0 1.5em 0;
−
submenu.toggle();
+
padding: 1.25em 0;
 +
}
  
−
icon = $(this).find('.icon');
+
#intro > :last-child {
 +
margin-bottom: 0;
 +
}
  
−
if ( !$( submenu ).is(':visible') ) {
+
#intro .logo {
−
icon.removeClass("less").addClass("plus");
+
margin: 0 0 0.5em 0;
 
}
 
}
−
else {
+
 
−
icon.removeClass("plus").addClass("less");
+
#intro header h2 {
 +
font-size: 1.25em;
 
}
 
}
  
−
//Hide the other panels
+
#intro header > :last-child {
−
$(".submenu").not(submenu).hide();
+
margin-bottom: 0;
−
$(".icon").not(icon).removeClass("less").addClass("plus");
+
}
−
});
+
 
 +
}
 +
 
 +
/* Footer */
 +
 
 +
#footer .icons {
 +
color: #aaaaaa;
 +
}
 +
 
 +
#footer .copyright {
 +
color: #aaaaaa;
 +
font-family: "Raleway", Helvetica, sans-serif;
 +
font-size: 1em;
 +
font-weight: 400;
 +
letter-spacing: 1em;
 +
text-transform: uppercase;
 +
}
 +
 
 +
body.single #footer {
 +
text-align: center;
 +
}
 +
 
 +
/* Menu */
 +
 
 +
#menu {
 +
-moz-transform: translateX(25em);
 +
-webkit-transform: translateX(25em);
 +
-ms-transform: translateX(25em);
 +
transform: translateX(25em);
 +
-moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
 +
-webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
 +
-ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
 +
transition: transform 0.5s ease, visibility 0.5s;
 +
-webkit-overflow-scrolling: touch;
 +
background: #ffffff;
 +
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
box-shadow: none;
 +
height: 100%;
 +
max-width: 80%;
 +
overflow-y: auto;
 +
position: fixed;
 +
right: 0;
 +
top: 0;
 +
visibility: hidden;
 +
width: 25em;
 +
z-index: 10002;
 +
}
 +
 
 +
#menu > * {
 +
border-top: solid 1px rgba(160, 160, 160, 0.3);
 +
padding: 3em;
 +
}
 +
 
 +
#menu > * > :last-child {
 +
margin-bottom: 0;
 +
}
 +
 
 +
#menu > :first-child {
 +
border-top: 0;
 +
}
 +
 
 +
#menu .links {
 +
list-style: none;
 +
padding: 0;
 +
}
 +
 
 +
#menu .links > li {
 +
border: 0;
 +
border-top: dotted 1px rgba(160, 160, 160, 0.3);
 +
margin: 1.5em 0 0 0;
 +
padding: 1.5em 0 0 0;
 +
}
 +
 
 +
#menu .links > li a {
 +
display: block;
 +
border-bottom: 0;
 +
}
 +
 
 +
#menu .links > li a h3 {
 +
-moz-transition: color 0.2s ease;
 +
-webkit-transition: color 0.2s ease;
 +
-ms-transition: color 0.2s ease;
 +
transition: color 0.2s ease;
 +
font-size: 0.7em;
 +
}
 +
 
 +
#menu .links > li a p {
 +
font-family: "Raleway", Helvetica, sans-serif;
 +
font-size: 0.6em;
 +
font-weight: 400;
 +
letter-spacing: 0.25em;
 +
margin-bottom: 0;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
}
 +
 
 +
#menu .links > li a:hover h3 {
 +
color: #2ebaae;
 +
}
 +
 
 +
#menu .links > li:first-child {
 +
border-top: 0;
 +
margin-top: 0;
 +
padding-top: 0;
 +
}
 +
 
 +
body.is-menu-visible #menu {
 +
-moz-transform: translateX(0);
 +
-webkit-transform: translateX(0);
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);
 +
visibility: visible;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#menu > * {
 +
padding: 1.5em;
 +
}
 +
 
 +
}
 +
 
 +
</style>
 +
 
 +
/************************************HTML************************
 +
<head>
 +
<title>WIKI IGEM 2016</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
</head>
 +
<body>
 +
 
 +
 
 +
<!-- Wrapper -->
 +
<div id="wrapper">
 +
<!-- Header -->
 +
<header id="header">
 +
<h1><a href="#">WIKI IGEM 2016</a></h1>
 +
<nav class="nav">
 +
<ul>
 +
<li><a href="#">Project</a>
 +
<ul>
 +
<li><a href="">Hypotaurine and Taurine</a></li>
 +
<li><a href="">Background </a></li>
 +
<li><a href="">Overview </a></li>
 +
<li><a href="">Assembly </a></li>
 +
<li><a href="">Devices  </a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">Assembly </a></li>
 +
<li><a href="#">CSAD </a></li>
 +
</ul>
 +
</nav>
 +
<nav class="main">
 +
<ul>
 +
<li class="menu">
 +
<a class="fa-bars" href="#menu">Menu</a>
 +
</li>
 +
</ul>
 +
</nav>
 +
</header>
 +
 
 +
<!-- Menu -->
 +
<section id="menu">
 +
 
 +
<!-- Links -->
 +
<section>
 +
<ul class="links">
 +
<li>
 +
<a href="#">
 +
<h3>Project</h3>
 +
<p>Taurine is a free aminoacid...</p>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<h3>Assembly</h3>
 +
<p>composed for two enzymes into several constructs...</p>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<h3>CSAD</h3>
 +
<p>The cysteine sulfinic acid decarboxylase enzyme...</p>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<h3>Policy & Practices</h3>
 +
<p>Cooperation..</p>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<h3>Achievements</h3>
 +
<p>Results: ALL PROTEINS AGAIN...</p>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<h3>Team</h3>
 +
<p>Description of all the members...</p>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<h3>Sponsors</h3>
 +
<p></p>
 +
</a>
 +
</li>
 +
</ul>
 +
</section>
 +
</section>
 +
 
 +
<!-- Main -->
 +
<div id="main">
  
 +
<!-- Post -->
 +
<article class="post">
 +
<header>
 +
<div class="title">
 +
<h2><a href="#">Abstract</a></h2>
 +
</div>
 +
</header>
 +
<img src="images/pic01.png" alt="" />
 +
<p>Hypotaurine is the predecessor substrate of Taurine, in the pathway of cysteine metabolism, which can be obtained naturally by some foods, biosynthesized by some organisms or produced through a series of chemical reactions. Taurine and hypotaurine synthesis is an important process as it plays many roles in the functions on the human body, specially like an endogenous neurotransmitter, among other organisms. The main aim of our project is to successfully introduce a couple of enzymes into Escherichia coli’s genome so it can biosynthesize this important molecule. To achieve this, these two taurine-pathway enzymes were selected: cysteine sulfinic acid decarboxylase (CSAD) and cysteine dioxygenase (CDO). It is important to highlight the fact that it’s the first time we synthesize both of them using synthetic biology techniques.</p>
 +
 +
</article>
  
−
$(".collapsable_menu_control").click(function() {
 
−
$(".menu_item").toggle();
 
−
});
 
  
−
$( window ).resize(function() {
+
<!-- Post -->
−
$(".menu_item").show();
+
−
});
+
</div>
  
 +
<!-- Sidebar -->
 +
<section id="sidebar">
  
−
});
+
<!-- Intro -->
 +
<section id="intro">
 +
<a href="#" class="logo"><img src="images/Biosint.png" alt="" /></a>
 +
<header>
 +
<h2>WIKI IGEM 2016</h2>
 +
<p>Bioproduction of  hypotaurine: Metabolic pathway insertion in Escherichia coli</p>
 +
</header>
 +
</section>
 +
<!-- About -->
 +
<section class="blurb">
 +
<h2>BIOSINT MEXICO 2015 </h2>
 +
<p>Instituto Tecnologico y de Estudios Superiores de Monterrey Campus Queretaro
 +
Epigmenio Gonzales 500, Fracc. San Pablo
 +
Email: biosint2014@gmail.com
 +
Queretaro, QRO </p>
  
 +
<img src="images/IGEM.png" alt="" />
 +
 +
</section>
  
 +
<!-- Footer -->
 +
<section id="footer">
 +
<ul class="icons">
 +
<li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
 +
<li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
 +
</ul>
 +
</section>
 +
  
 +
</section>
  
−
</script>
+
</div>
  
 +
<!-- Scripts -->
 +
<script src="assets/js/jquery.min.js"></script>
 +
<script src="assets/js/skel.min.js"></script>
 +
<script src="assets/js/util.js"></script>
 +
<script src="assets/js/main.js"></script>
  
 +
</body>
 
</html>
 
</html>

Revision as of 04:55, 15 October 2016

/************************************HTML************************ WIKI IGEM 2016

Abstract

Hypotaurine is the predecessor substrate of Taurine, in the pathway of cysteine metabolism, which can be obtained naturally by some foods, biosynthesized by some organisms or produced through a series of chemical reactions. Taurine and hypotaurine synthesis is an important process as it plays many roles in the functions on the human body, specially like an endogenous neurotransmitter, among other organisms. The main aim of our project is to successfully introduce a couple of enzymes into Escherichia coli’s genome so it can biosynthesize this important molecule. To achieve this, these two taurine-pathway enzymes were selected: cysteine sulfinic acid decarboxylase (CSAD) and cysteine dioxygenase (CDO). It is important to highlight the fact that it’s the first time we synthesize both of them using synthetic biology techniques.