Difference between revisions of "Template:BIOSINT Mexico"

 
(192 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
 
<style>
 
<style>
 +
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
  
 
+
/* Reset */
 +
 
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 {
 
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 {
 
margin: 0;
 
margin: 0;
Line 12: Line 13:
 
vertical-align: baseline;
 
vertical-align: baseline;
 
}
 
}
 
+
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 
display: block;
 
display: block;
 
}
 
}
 
+
 
body {
 
body {
 
line-height: 1;
 
line-height: 1;
 
}
 
}
 
+
 
ol, ul {
 
ol, ul {
 
list-style: none;
 
list-style: none;
 
}
 
}
 
+
 
blockquote, q {
 
blockquote, q {
 
quotes: none;
 
quotes: none;
 
}
 
}
 
+
 
blockquote:before, blockquote:after, q:before, q:after {
 
blockquote:before, blockquote:after, q:before, q:after {
 
content: '';
 
content: '';
 
content: none;
 
content: none;
 
}
 
}
 
+
 
table {
 
table {
 
border-collapse: collapse;
 
border-collapse: collapse;
 
border-spacing: 0;
 
border-spacing: 0;
 
}
 
}
 
+
 
body {
 
body {
 
-webkit-text-size-adjust: none;
 
-webkit-text-size-adjust: none;
 
}
 
}
 
+
/* Box Model */
+
 
+
*, *:before, *:after {
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
 
/* Basic */
 
/* Basic */
 
+
 
@-ms-viewport {
 
@-ms-viewport {
 
width: device-width;
 
width: device-width;
 
}
 
}
 
+
 
body {
 
body {
 
-ms-overflow-style: scrollbar;
 
-ms-overflow-style: scrollbar;
 
}
 
}
 
+
 
@media screen and (max-width: 480px) {
 
@media screen and (max-width: 480px) {
 
+
 
html, body {
 
html, body {
 
min-width: 320px;
 
min-width: 320px;
 
}
 
}
 
+
 
}
 
}
 
+
 
body {
 
body {
background: #f4f4f4;
+
background: #ffffff;
 
}
 
}
 
+
 
body.is-loading *, body.is-loading *:before, body.is-loading *:after {
 
body.is-loading *, body.is-loading *:before, body.is-loading *:after {
 
-moz-animation: none !important;
 
-moz-animation: none !important;
Line 83: Line 77:
 
transition: none !important;
 
transition: none !important;
 
}
 
}
 
+
 
/* Type */
 
/* Type */
 
+
 
body, input, select, textarea {
 
body, input, select, textarea {
 
color: #646464;
 
color: #646464;
Line 93: Line 87:
 
line-height: 1.75;
 
line-height: 1.75;
 
}
 
}
 
+
 
@media screen and (max-width: 1680px) {
 
@media screen and (max-width: 1680px) {
 
+
 
body, input, select, textarea {
 
body, input, select, textarea {
 
font-size: 12pt;
 
font-size: 12pt;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 1280px) {
 
@media screen and (max-width: 1280px) {
 
+
 
body, input, select, textarea {
 
body, input, select, textarea {
 
font-size: 12pt;
 
font-size: 12pt;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 980px) {
 
@media screen and (max-width: 980px) {
 
+
 
body, input, select, textarea {
 
body, input, select, textarea {
 
font-size: 12pt;
 
font-size: 12pt;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 736px) {
 
@media screen and (max-width: 736px) {
 
+
 
body, input, select, textarea {
 
body, input, select, textarea {
 
font-size: 12pt;
 
font-size: 12pt;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 480px) {
 
@media screen and (max-width: 480px) {
 
+
 
body, input, select, textarea {
 
body, input, select, textarea {
 
font-size: 12pt;
 
font-size: 12pt;
 
}
 
}
 
+
 
}
 
}
 
+
 
a {
 
a {
 
-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
 
-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
Line 143: Line 137:
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
 
+
 
a:before {
 
a:before {
 
-moz-transition: color 0.2s ease;
 
-moz-transition: color 0.2s ease;
Line 150: Line 144:
 
transition: color 0.2s ease;
 
transition: color 0.2s ease;
 
}
 
}
 
+
 
a:hover {
 
a:hover {
 
border-bottom-color: transparent;
 
border-bottom-color: transparent;
 
color: #2ebaae !important;
 
color: #2ebaae !important;
 
}
 
}
 
+
 
a:hover:before {
 
a:hover:before {
 
color: #2ebaae !important;
 
color: #2ebaae !important;
 
}
 
}
 
+
 
strong, b {
 
strong, b {
 
color: #3c3b3b;
 
color: #3c3b3b;
 
font-weight: 700;
 
font-weight: 700;
 
}
 
}
 
+
 
em, i {
 
em, i {
 
font-style: italic;
 
font-style: italic;
 
}
 
}
 
+
 
p {
 
p {
 
margin: 0 0 2em 0;
 
margin: 0 0 2em 0;
 
}
 
}
 
+
 
h1, h2, h3, h4, h5, h6 {
 
h1, h2, h3, h4, h5, h6 {
 
color: #3c3b3b;
 
color: #3c3b3b;
Line 182: Line 176:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
 
+
 
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 
color: inherit;
 
color: inherit;
 
border-bottom: 0;
 
border-bottom: 0;
 
}
 
}
 
+
 
h2 {
 
h2 {
 
font-size: 1.1em;
 
font-size: 1.1em;
 
}
 
}
 
+
 
h3 {
 
h3 {
 
font-size: 0.9em;
 
font-size: 0.9em;
 
}
 
}
 
+
 
h4 {
 
h4 {
 
font-size: 0.7em;
 
font-size: 0.7em;
 
}
 
}
 
+
 
h5 {
 
h5 {
 
font-size: 0.7em;
 
font-size: 0.7em;
 
}
 
}
 
+
 
h6 {
 
h6 {
 
font-size: 0.7em;
 
font-size: 0.7em;
 
}
 
}
 
+
 
sub {
 
sub {
 
font-size: 0.8em;
 
font-size: 0.8em;
Line 213: Line 207:
 
top: 0.5em;
 
top: 0.5em;
 
}
 
}
 
+
 
sup {
 
sup {
 
font-size: 0.8em;
 
font-size: 0.8em;
Line 219: Line 213:
 
top: -0.5em;
 
top: -0.5em;
 
}
 
}
 
+
 
blockquote {
 
blockquote {
 
border-left: solid 4px rgba(160, 160, 160, 0.3);
 
border-left: solid 4px rgba(160, 160, 160, 0.3);
Line 226: Line 220:
 
padding: 0.5em 0 0.5em 2em;
 
padding: 0.5em 0 0.5em 2em;
 
}
 
}
 
+
 
code {
 
code {
 
background: rgba(160, 160, 160, 0.075);
 
background: rgba(160, 160, 160, 0.075);
Line 235: Line 229:
 
padding: 0.25em 0.65em;
 
padding: 0.25em 0.65em;
 
}
 
}
 
+
 
pre {
 
pre {
 
-webkit-overflow-scrolling: touch;
 
-webkit-overflow-scrolling: touch;
Line 242: Line 236:
 
margin: 0 0 2em 0;
 
margin: 0 0 2em 0;
 
}
 
}
 
+
 
pre code {
 
pre code {
 
display: block;
 
display: block;
Line 249: Line 243:
 
overflow-x: auto;
 
overflow-x: auto;
 
}
 
}
 
+
 
hr {
 
hr {
 
border: 0;
 
border: 0;
Line 255: Line 249:
 
margin: 2em 0;
 
margin: 2em 0;
 
}
 
}
 
+
 
hr.major {
 
hr.major {
 
margin: 3em 0;
 
margin: 3em 0;
 
}
 
}
 
+
 
.align-left {
 
.align-left {
 
text-align: left;
 
text-align: left;
 
}
 
}
 
+
 
.align-center {
 
.align-center {
 
text-align: center;
 
text-align: center;
 
}
 
}
 
+
 
.align-right {
 
.align-right {
 
text-align: right;
 
text-align: right;
 
}
 
}
 
+
 
+
 
+
 
/* Blurb */
 
/* Blurb */
 
+
 
.blurb h2 {
 
.blurb h2 {
 
font-size: 0.8em;
 
font-size: 0.8em;
 
margin: 0 0 1.5em 0;
 
margin: 0 0 1.5em 0;
 
}
 
}
 
+
 
.blurb h3 {
 
.blurb h3 {
 
font-size: 0.7em;
 
font-size: 0.7em;
 
}
 
}
 
+
 
.blurb p {
 
.blurb p {
 
font-size: 0.9em;
 
font-size: 0.9em;
 
}
 
}
 
+
 
+
 
/* List */
 
/* List */
 
+
ol {
+
list-style: decimal;
+
margin: 0 0 2em 0;
+
padding-left: 1.25em;
+
}
+
 
+
ol li {
+
padding-left: 0.25em;
+
}
+
 
+
ul {
+
list-style: disc;
+
margin: 0 0 2em 0;
+
padding-left: 1em;
+
}
+
 
+
ul li {
+
padding-left: 0.5em;
+
}
+
 
+
ul.alt {
+
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;
+
}
+
 
+
dl dt {
+
display: block;
+
font-weight: 700;
+
margin: 0 0 1em 0;
+
}
+
 
+
dl dd {
+
margin-left: 2em;
+
}
+
 
+
 
+
 
+
 
/* Post */
 
/* Post */
 
+
 
.post {
 
.post {
 
padding: 2em 3em 1em 3em ;
 
padding: 2em 3em 1em 3em ;
Line 542: Line 297:
 
position: relative;
 
position: relative;
 
}
 
}
 
+
 
.post > header {
 
.post > header {
 
display: -moz-flex;
 
display: -moz-flex;
Line 554: Line 309:
 
width: calc(100% + 6em);
 
width: calc(100% + 6em);
 
}
 
}
 
+
 
.post > header .title {
 
.post > header .title {
 
-moz-flex-grow: 1;
 
-moz-flex-grow: 1;
Line 563: Line 318:
 
padding: 3.75em 3em 3.3em 3em;
 
padding: 3.75em 3em 3.3em 3em;
 
}
 
}
 
+
 
.post > header .title h2 {
 
.post > header .title h2 {
 
font-weight: 900;
 
font-weight: 900;
 
font-size: 1.5em;
 
font-size: 1.5em;
 
}
 
}
 
+
 
.post > header .title > :last-child {
 
.post > header .title > :last-child {
 
margin-bottom: 0;
 
margin-bottom: 0;
 
}
 
}
 
+
 
.post > header .meta {
 
.post > header .meta {
 
padding: 3.75em 3em 1.75em 3em ;
 
padding: 3.75em 3em 1.75em 3em ;
Line 580: Line 335:
 
width: 17em;
 
width: 17em;
 
}
 
}
 
+
 
.post > header .meta > * {
 
.post > header .meta > * {
 
margin: 0 0 1em 0;
 
margin: 0 0 1em 0;
 
}
 
}
 
+
 
.post > header .meta > :last-child {
 
.post > header .meta > :last-child {
 
margin-bottom: 0;
 
margin-bottom: 0;
 
}
 
}
 
+
 
.post > header .meta .published {
 
.post > header .meta .published {
 
color: #3c3b3b;
 
color: #3c3b3b;
Line 600: Line 355:
 
white-space: nowrap;
 
white-space: nowrap;
 
}
 
}
 
+
 
.post > a.image.featured {
 
.post > a.image.featured {
 
overflow: hidden;
 
overflow: hidden;
 
}
 
}
 
+
 
.post > a.image.featured img {
 
.post > a.image.featured img {
 
-moz-transition: -moz-transform 0.2s ease-out;
 
-moz-transition: -moz-transform 0.2s ease-out;
Line 611: Line 366:
 
transition: transform 0.2s ease-out;
 
transition: transform 0.2s ease-out;
 
}
 
}
 
+
 
.post > a.image.featured:hover img {
 
.post > a.image.featured:hover img {
 
-moz-transform: scale(1.05);
 
-moz-transform: scale(1.05);
Line 618: Line 373:
 
transform: scale(1.05);
 
transform: scale(1.05);
 
}
 
}
 
+
 
.post > footer {
 
.post > footer {
 
display: -moz-flex;
 
display: -moz-flex;
Line 629: Line 384:
 
align-items: center;
 
align-items: center;
 
}
 
}
 
+
 
.post > footer .actions {
 
.post > footer .actions {
 
-moz-flex-grow: 1;
 
-moz-flex-grow: 1;
Line 636: Line 391:
 
flex-grow: 1;
 
flex-grow: 1;
 
}
 
}
 
+
 
.post > footer .stats {
 
.post > footer .stats {
 
cursor: default;
 
cursor: default;
Line 642: Line 397:
 
padding: 0;
 
padding: 0;
 
}
 
}
 
+
 
.post > footer .stats li {
 
.post > footer .stats li {
 
border-left: solid 1px rgba(160, 160, 160, 0.3);
 
border-left: solid 1px rgba(160, 160, 160, 0.3);
Line 655: Line 410:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
 
+
 
.post > footer .stats li:first-child {
 
.post > footer .stats li:first-child {
 
border-left: 0;
 
border-left: 0;
Line 661: Line 416:
 
padding-left: 0;
 
padding-left: 0;
 
}
 
}
 
+
 
.post > footer .stats li .icon {
 
.post > footer .stats li .icon {
 
border-bottom: 0;
 
border-bottom: 0;
 
}
 
}
 
+
 
.post > footer .stats li .icon:before {
 
.post > footer .stats li .icon:before {
 
color: rgba(160, 160, 160, 0.3);
 
color: rgba(160, 160, 160, 0.3);
 
margin-right: 0.75em;
 
margin-right: 0.75em;
 
}
 
}
 
+
 
@media screen and (max-width: 980px) {
 
@media screen and (max-width: 980px) {
 
+
 
.post {
 
.post {
 
border-left: 0;
 
border-left: 0;
Line 679: Line 434:
 
width: calc(100% + (3em * 2));
 
width: calc(100% + (3em * 2));
 
}
 
}
 
+
 
.post > header {
 
.post > header {
 
-moz-flex-direction: column;
 
-moz-flex-direction: column;
Line 688: Line 443:
 
border-left: 0;
 
border-left: 0;
 
}
 
}
 
+
 
.post > header .title {
 
.post > header .title {
 
-ms-flex: 0 1 auto;
 
-ms-flex: 0 1 auto;
Line 695: Line 450:
 
text-align: center;
 
text-align: center;
 
}
 
}
 
+
 
.post > header .meta {
 
.post > header .meta {
 
-moz-align-items: center;
 
-moz-align-items: center;
Line 716: Line 471:
 
width: 100%;
 
width: 100%;
 
}
 
}
 
+
 
.post > header .meta > * {
 
.post > header .meta > * {
 
border-left: solid 1px rgba(160, 160, 160, 0.3);
 
border-left: solid 1px rgba(160, 160, 160, 0.3);
Line 722: Line 477:
 
padding-left: 2em;
 
padding-left: 2em;
 
}
 
}
 
+
 
.post > header .meta > :first-child {
 
.post > header .meta > :first-child {
 
border-left: 0;
 
border-left: 0;
Line 728: Line 483:
 
padding-left: 0;
 
padding-left: 0;
 
}
 
}
 
+
 
.post > header .meta .published {
 
.post > header .meta .published {
 
margin-bottom: 0;
 
margin-bottom: 0;
 
margin-top: 0;
 
margin-top: 0;
 
}
 
}
 
+
 
.post > header .meta .author {
 
.post > header .meta .author {
 
-moz-flex-direction: row-reverse;
 
-moz-flex-direction: row-reverse;
Line 741: Line 496:
 
margin-bottom: 0;
 
margin-bottom: 0;
 
}
 
}
 
+
 
.post > header .meta .author .name {
 
.post > header .meta .author .name {
 
margin: 0 0 0 1.5em;
 
margin: 0 0 0 1.5em;
 
}
 
}
 
+
 
.post > header .meta .author img {
 
.post > header .meta .author img {
 
width: 3.5em;
 
width: 3.5em;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 736px) {
 
@media screen and (max-width: 736px) {
 
+
 
.post {
 
.post {
 
padding: 1.5em 1.5em 0.1em 1.5em ;
 
padding: 1.5em 1.5em 0.1em 1.5em ;
Line 760: Line 515:
 
width: calc(100% + (1.5em * 2));
 
width: calc(100% + (1.5em * 2));
 
}
 
}
 
+
 
.post > header {
 
.post > header {
 
padding: 3em 1.5em 0.5em 1.5em ;
 
padding: 3em 1.5em 0.5em 1.5em ;
Line 767: Line 522:
 
width: calc(100% + 3em);
 
width: calc(100% + 3em);
 
}
 
}
 
+
 
.post > header .title h2 {
 
.post > header .title h2 {
 
font-size: 1.1em;
 
font-size: 1.1em;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 480px) {
 
@media screen and (max-width: 480px) {
 
+
 
.post > header .meta {
 
.post > header .meta {
 
-moz-align-items: center;
 
-moz-align-items: center;
Line 786: Line 541:
 
flex-direction: column;
 
flex-direction: column;
 
}
 
}
 
+
 
.post > header .meta > * {
 
.post > header .meta > * {
 
border-left: 0;
 
border-left: 0;
Line 792: Line 547:
 
padding-left: 0;
 
padding-left: 0;
 
}
 
}
 
+
 
.post > header .meta .author .name {
 
.post > header .meta .author .name {
 
display: none;
 
display: none;
 
}
 
}
 
+
 
.post > .image.featured {
 
.post > .image.featured {
 
margin-left: -1.5em;
 
margin-left: -1.5em;
Line 802: Line 557:
 
width: calc(100% + 3em);
 
width: calc(100% + 3em);
 
}
 
}
 
+
 
.post > footer {
 
.post > footer {
 
-moz-align-items: stretch;
 
-moz-align-items: stretch;
Line 813: Line 568:
 
flex-direction: column-reverse;
 
flex-direction: column-reverse;
 
}
 
}
 
+
 
.post > footer .stats {
 
.post > footer .stats {
 
text-align: center;
 
text-align: center;
 
}
 
}
 
+
 
.post > footer .stats li {
 
.post > footer .stats li {
 
margin: 0 0 0 1.25em;
 
margin: 0 0 0 1.25em;
 
padding: 0 0 0 1.25em;
 
padding: 0 0 0 1.25em;
 
}
 
}
 
+
 
}
 
}
 
+
 
/* Section/Article */
 
/* Section/Article */
 
+
 
section.special, article.special {
 
section.special, article.special {
 
text-align: center;
 
text-align: center;
 
}
 
}
 
+
 
header p {
 
header p {
 
font-family: "Raleway", Helvetica, sans-serif;
 
font-family: "Raleway", Helvetica, sans-serif;
Line 840: Line 595:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
 
+
 
/* --Header */
 
/* --Header */
 
+
 
body {
 
body {
 
padding-top: 3.5em;
 
padding-top: 3.5em;
 
}
 
}
 
+
 
#header {
 
#header {
 
display: -moz-flex;
 
display: -moz-flex;
Line 862: Line 617:
 
line-height: 3.5em;
 
line-height: 3.5em;
 
position: fixed;
 
position: fixed;
top: 0;
+
top: 1em;
 
width: 100%;
 
width: 100%;
 
z-index: 10000;
 
z-index: 10000;
 
}
 
}
 
+
 
#header a {
 
#header a {
 
color: #fff;
 
color: #fff;
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
 
+
 
#header ul {
 
#header ul {
 
list-style: none;
 
list-style: none;
Line 877: Line 632:
 
padding-left: 0;
 
padding-left: 0;
 
}
 
}
 
+
 
#header ul li {
 
#header ul li {
 
display: inline-block;
 
display: inline-block;
 
padding-left: 0;
 
padding-left: 0;
 
}
 
}
 
+
 
#header h1 {
 
#header h1 {
 
height: inherit;
 
height: inherit;
Line 889: Line 644:
 
white-space: nowrap;
 
white-space: nowrap;
 
}
 
}
 
+
 
#header h1 a {
 
#header h1 a {
 
font-size: 0.7em;
 
font-size: 0.7em;
 
}
 
}
 
+
 
#header .links {
 
#header .links {
 
-moz-flex: 1;
 
-moz-flex: 1;
Line 906: Line 661:
 
padding-left: 1.5em;
 
padding-left: 1.5em;
 
}
 
}
 
+
 
#header .links ul li {
 
#header .links ul li {
 
border-left: solid 1px rgba(160, 160, 160, 0.3);
 
border-left: solid 1px rgba(160, 160, 160, 0.3);
Line 913: Line 668:
 
padding-left: 1em;
 
padding-left: 1em;
 
}
 
}
 
+
 
#header .links ul li:first-child {
 
#header .links ul li:first-child {
 
border-left: 0;
 
border-left: 0;
Line 919: Line 674:
 
padding-left: 0;
 
padding-left: 0;
 
}
 
}
 
+
 
#header .links ul li a {
 
#header .links ul li a {
 
border-bottom: 0;
 
border-bottom: 0;
Line 928: Line 683:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
 
+
 
#header .main {
 
#header .main {
 
height: inherit;
 
height: inherit;
Line 934: Line 689:
 
text-align: right;
 
text-align: right;
 
}
 
}
 
+
 
#header .main ul {
 
#header .main ul {
 
height: inherit;
 
height: inherit;
 
line-height: inherit;
 
line-height: inherit;
 
}
 
}
 
+
 
#header .main ul li {
 
#header .main ul li {
 
border-left: solid 1px rgba(160, 160, 160, 0.3);
 
border-left: solid 1px rgba(160, 160, 160, 0.3);
Line 946: Line 701:
 
white-space: nowrap;
 
white-space: nowrap;
 
}
 
}
 
+
 
#header .main ul li > * {
 
#header .main ul li > * {
 
display: block;
 
display: block;
 
float: left;
 
float: left;
 
}
 
}
 
+
 
#header .main ul li > a {
 
#header .main ul li > a {
 
text-decoration: none;
 
text-decoration: none;
Line 961: Line 716:
 
width: 4em;
 
width: 4em;
 
}
 
}
 
+
 
#header .main ul li > a:before {
 
#header .main ul li > a:before {
 
-moz-osx-font-smoothing: grayscale;
 
-moz-osx-font-smoothing: grayscale;
Line 970: Line 725:
 
text-transform: none !important;
 
text-transform: none !important;
 
}
 
}
 
+
 
#header .main ul li > a:before {
 
#header .main ul li > a:before {
 
display: block;
 
display: block;
Line 982: Line 737:
 
width: inherit;
 
width: inherit;
 
}
 
}
 
+
 
#header form {
 
#header form {
 
margin: 0;
 
margin: 0;
 
}
 
}
 
+
 
#header form input {
 
#header form input {
 
display: inline-block;
 
display: inline-block;
Line 994: Line 749:
 
vertical-align: middle;
 
vertical-align: middle;
 
}
 
}
 
+
 
#header #search {
 
#header #search {
 
-moz-transition: all 0.5s ease;
 
-moz-transition: all 0.5s ease;
Line 1,006: Line 761:
 
white-space: nowrap;
 
white-space: nowrap;
 
}
 
}
 
+
 
#header #search input {
 
#header #search input {
 
width: 12em;
 
width: 12em;
 
}
 
}
 
+
 
#header #search.visible {
 
#header #search.visible {
 
max-width: 12.5em;
 
max-width: 12.5em;
Line 1,016: Line 771:
 
padding: 0 0.5em 0 0;
 
padding: 0 0.5em 0 0;
 
}
 
}
 
+
 
@media screen and (max-width: 980px) {
 
@media screen and (max-width: 980px) {
 
+
 
#header .links {
 
#header .links {
 
display: none;
 
display: none;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 736px) {
 
@media screen and (max-width: 736px) {
 
+
 
#header {
 
#header {
 
height: 2.75em;
 
height: 2.75em;
 
line-height: 2.75em;
 
line-height: 2.75em;
 
}
 
}
 
+
 
#header h1 {
 
#header h1 {
 
padding: 0 0 0 1em;
 
padding: 0 0 0 1em;
 
}
 
}
 
+
 
#header .main .search {
 
#header .main .search {
 
display: none;
 
display: none;
 
}
 
}
 
+
 
}
 
}
 
+
 
/* Wrapper */
 
/* Wrapper */
 
+
 
#wrapper {
 
#wrapper {
 
display: -moz-flex;
 
display: -moz-flex;
Line 1,058: Line 813:
 
transition: opacity 0.5s ease;
 
transition: opacity 0.5s ease;
 
margin: 0 auto;
 
margin: 0 auto;
max-width: 100%;
+
max-width: 130%;
 
opacity: 1;
 
opacity: 1;
 
padding: 4.5em;
 
padding: 4.5em;
width: 90em;
+
width: 130%;
 
}
 
}
 
+
 
body.is-menu-visible #wrapper {
 
body.is-menu-visible #wrapper {
 
opacity: 0.15;
 
opacity: 0.15;
 
}
 
}
 
+
 
@media screen and (max-width: 1680px) {
 
@media screen and (max-width: 1680px) {
 
+
 
#wrapper {
 
#wrapper {
 
padding: 4em;
 
padding: 4em;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 1280px) {
 
@media screen and (max-width: 1280px) {
 
+
 
#wrapper {
 
#wrapper {
 
display: block;
 
display: block;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 736px) {
 
@media screen and (max-width: 736px) {
 
+
 
#wrapper {
 
#wrapper {
 
padding: 1.5em;
 
padding: 1.5em;
 
}
 
}
 
+
 
}
 
}
 
+
 
body.single #wrapper {
 
body.single #wrapper {
 
display: block;
 
display: block;
 
}
 
}
 
+
 
/* Main */
 
/* Main */
 
+
 
#main {
 
#main {
 
-moz-flex-grow: 1;
 
-moz-flex-grow: 1;
Line 1,106: Line 861:
 
width: 100%;
 
width: 100%;
 
}
 
}
 
+
 
/* Sidebar */
 
/* Sidebar */
 
+
 
#sidebar {
 
#sidebar {
 
margin-left: 2em;
 
margin-left: 2em;
 
margin-right: 2em;
 
margin-right: 2em;
width: auto;
+
width: 30%;
 
}
 
}
 
+
 
#sidebar > * {
 
#sidebar > * {
 
border-top: solid 1px rgba(160, 160, 160, 0.3);
 
border-top: solid 1px rgba(160, 160, 160, 0.3);
Line 1,120: Line 875:
 
padding: 3em 0 0 0;
 
padding: 3em 0 0 0;
 
}
 
}
 
+
 
#sidebar > :first-child {
 
#sidebar > :first-child {
 
border-top: 0;
 
border-top: 0;
Line 1,126: Line 881:
 
padding-top: 0;
 
padding-top: 0;
 
}
 
}
 
+
 
@media screen and (max-width: 1280px) {
 
@media screen and (max-width: 1280px) {
 
+
 
#sidebar {
 
#sidebar {
 
border-top: solid 1px rgba(160, 160, 160, 0.3);
 
border-top: solid 1px rgba(160, 160, 160, 0.3);
Line 1,136: Line 891:
 
width: 100%;
 
width: 100%;
 
}
 
}
 
+
 
}
 
}
 
+
 
/* --Menu */
 
/* --Menu */
 
+
 
ul, ol {
 
ul, ol {
 
list-style:none;
 
list-style:none;
Line 1,148: Line 903:
 
display:block;
 
display:block;
 
}
 
}
+
 
.nav li a:hover {
 
.nav li a:hover {
 
}
 
}
+
 
.nav li ul {
 
.nav li ul {
 
display:none;
 
display:none;
 
position:absolute;
 
position:absolute;
 
}
 
}
+
 
.nav li:hover > ul {
 
.nav li:hover > ul {
 
background-color:#4E4444;
 
background-color:#4E4444;
 
display:block;
 
display:block;
 
}
 
}
+
 
.nav li ul li {
 
.nav li ul li {
 
position:relative;
 
position:relative;
 
+
 
}
 
}
 
+
 
+
 
+
 
+
 
/* Intro */
 
/* Intro */
 
+
 
#intro .logo {
 
#intro .logo {
 
border-bottom: 0;
 
border-bottom: 0;
Line 1,180: Line 935:
 
width: 11em;
 
width: 11em;
 
}
 
}
 
+
 
#intro .logo:before {
 
#intro .logo:before {
 
background-position: top left;
 
background-position: top left;
Line 1,193: Line 948:
 
width: 100%;
 
width: 100%;
 
}
 
}
 
+
 
#intro .logo img {
 
#intro .logo img {
 
display: block;
 
display: block;
Line 1,199: Line 954:
 
width: 9em;
 
width: 9em;
 
}
 
}
 
+
 
#intro header h2 {
 
#intro header h2 {
 
font-size: 2em;
 
font-size: 2em;
 
font-weight: 900;
 
font-weight: 900;
 
}
 
}
 
+
 
#intro header p {
 
#intro header p {
 
font-size: 0.8em;
 
font-size: 0.8em;
 
}
 
}
 
+
 
@media screen and (max-width: 1280px) {
 
@media screen and (max-width: 1280px) {
 
+
 
#intro {
 
#intro {
 
margin: 0 0 3em 0;
 
margin: 0 0 3em 0;
 
text-align: center;
 
text-align: center;
 
}
 
}
 
+
 
#intro header h2 {
 
#intro header h2 {
 
font-size: 2em;
 
font-size: 2em;
 
}
 
}
 
+
 
#intro header p {
 
#intro header p {
 
font-size: 0.7em;
 
font-size: 0.7em;
 
}
 
}
 
+
 
}
 
}
 
+
 
@media screen and (max-width: 736px) {
 
@media screen and (max-width: 736px) {
 
+
 
#intro {
 
#intro {
 
margin: 0 0 1.5em 0;
 
margin: 0 0 1.5em 0;
 
padding: 1.25em 0;
 
padding: 1.25em 0;
 
}
 
}
 
+
 
#intro > :last-child {
 
#intro > :last-child {
 
margin-bottom: 0;
 
margin-bottom: 0;
 
}
 
}
 
+
 
#intro .logo {
 
#intro .logo {
 
margin: 0 0 0.5em 0;
 
margin: 0 0 0.5em 0;
 
}
 
}
 
+
 
#intro header h2 {
 
#intro header h2 {
 
font-size: 1.25em;
 
font-size: 1.25em;
 
}
 
}
 
+
 
#intro header > :last-child {
 
#intro header > :last-child {
 
margin-bottom: 0;
 
margin-bottom: 0;
 
}
 
}
 
+
 
}
 
}
 
+
 
/* Footer */
 
/* Footer */
 
+
 
#footer .icons {
 
#footer .icons {
 
color: #aaaaaa;
 
color: #aaaaaa;
 
}
 
}
 
+
 
#footer .copyright {
 
#footer .copyright {
 
color: #aaaaaa;
 
color: #aaaaaa;
Line 1,265: Line 1,020:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
 
+
 
body.single #footer {
 
body.single #footer {
 
text-align: center;
 
text-align: center;
 
}
 
}
 
+
 
/* Menu */
 
/* Menu */
 
+
 
#menu {
 
#menu {
 
-moz-transform: translateX(25em);
 
-moz-transform: translateX(25em);
Line 1,295: Line 1,050:
 
z-index: 10002;
 
z-index: 10002;
 
}
 
}
 
+
 
#menu > * {
 
#menu > * {
 
border-top: solid 1px rgba(160, 160, 160, 0.3);
 
border-top: solid 1px rgba(160, 160, 160, 0.3);
 
padding: 3em;
 
padding: 3em;
 
}
 
}
 
+
 
#menu > * > :last-child {
 
#menu > * > :last-child {
 
margin-bottom: 0;
 
margin-bottom: 0;
 
}
 
}
 
+
 
#menu > :first-child {
 
#menu > :first-child {
 
border-top: 0;
 
border-top: 0;
 
}
 
}
 
+
 
#menu .links {
 
#menu .links {
 
list-style: none;
 
list-style: none;
 
padding: 0;
 
padding: 0;
 
}
 
}
 
+
 
#menu .links > li {
 
#menu .links > li {
 
border: 0;
 
border: 0;
Line 1,320: Line 1,075:
 
padding: 1.5em 0 0 0;
 
padding: 1.5em 0 0 0;
 
}
 
}
 
+
 
#menu .links > li a {
 
#menu .links > li a {
 
display: block;
 
display: block;
 
border-bottom: 0;
 
border-bottom: 0;
 
}
 
}
 
+
 
#menu .links > li a h3 {
 
#menu .links > li a h3 {
 
-moz-transition: color 0.2s ease;
 
-moz-transition: color 0.2s ease;
Line 1,333: Line 1,088:
 
font-size: 0.7em;
 
font-size: 0.7em;
 
}
 
}
 
+
 
#menu .links > li a p {
 
#menu .links > li a p {
 
font-family: "Raleway", Helvetica, sans-serif;
 
font-family: "Raleway", Helvetica, sans-serif;
Line 1,343: Line 1,098:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
 
+
 
#menu .links > li a:hover h3 {
 
#menu .links > li a:hover h3 {
 
color: #2ebaae;
 
color: #2ebaae;
 
}
 
}
 
+
 
#menu .links > li:first-child {
 
#menu .links > li:first-child {
 
border-top: 0;
 
border-top: 0;
Line 1,353: Line 1,108:
 
padding-top: 0;
 
padding-top: 0;
 
}
 
}
 
+
 
body.is-menu-visible #menu {
 
body.is-menu-visible #menu {
 
-moz-transform: translateX(0);
 
-moz-transform: translateX(0);
Line 1,361: Line 1,116:
 
visibility: visible;
 
visibility: visible;
 
}
 
}
 
+
 
@media screen and (max-width: 736px) {
 
@media screen and (max-width: 736px) {
 
+
 
#menu > * {
 
#menu > * {
 
padding: 1.5em;
 
padding: 1.5em;
 
}
 
}
 
+
 
}
 
}
 
 
</style>
 
</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>
 
 
 
<!-- Post -->
 
 
</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>
 
 
</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>

Latest revision as of 11:49, 19 October 2016