Difference between revisions of "Template:BIOSINT Mexico"

 
(166 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
 
<style>
 
<style>
 
@import url(font-awesome.min.css);
 
 
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
 
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
 
  
 
/* Reset */
 
/* 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 17: 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 88: Line 77:
 
transition: none !important;
 
transition: none !important;
 
}
 
}
 
+
 
/* Type */
 
/* Type */
 
+
 
body, input, select, textarea {
 
body, input, select, textarea {
 
color: #646464;
 
color: #646464;
Line 98: 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 148: 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 155: 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 187: 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 218: Line 207:
 
top: 0.5em;
 
top: 0.5em;
 
}
 
}
 
+
 
sup {
 
sup {
 
font-size: 0.8em;
 
font-size: 0.8em;
Line 224: 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 231: 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 240: Line 229:
 
padding: 0.25em 0.65em;
 
padding: 0.25em 0.65em;
 
}
 
}
 
+
 
pre {
 
pre {
 
-webkit-overflow-scrolling: touch;
 
-webkit-overflow-scrolling: touch;
Line 247: Line 236:
 
margin: 0 0 2em 0;
 
margin: 0 0 2em 0;
 
}
 
}
 
+
 
pre code {
 
pre code {
 
display: block;
 
display: block;
Line 254: Line 243:
 
overflow-x: auto;
 
overflow-x: auto;
 
}
 
}
 
+
 
hr {
 
hr {
 
border: 0;
 
border: 0;
Line 260: 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 547: Line 297:
 
position: relative;
 
position: relative;
 
}
 
}
 
+
 
.post > header {
 
.post > header {
 
display: -moz-flex;
 
display: -moz-flex;
Line 559: 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 568: 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 585: 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 605: 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 616: 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 623: Line 373:
 
transform: scale(1.05);
 
transform: scale(1.05);
 
}
 
}
 
+
 
.post > footer {
 
.post > footer {
 
display: -moz-flex;
 
display: -moz-flex;
Line 634: Line 384:
 
align-items: center;
 
align-items: center;
 
}
 
}
 
+
 
.post > footer .actions {
 
.post > footer .actions {
 
-moz-flex-grow: 1;
 
-moz-flex-grow: 1;
Line 641: Line 391:
 
flex-grow: 1;
 
flex-grow: 1;
 
}
 
}
 
+
 
.post > footer .stats {
 
.post > footer .stats {
 
cursor: default;
 
cursor: default;
Line 647: 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 660: 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 666: 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 684: 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 693: 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 700: Line 450:
 
text-align: center;
 
text-align: center;
 
}
 
}
 
+
 
.post > header .meta {
 
.post > header .meta {
 
-moz-align-items: center;
 
-moz-align-items: center;
Line 721: 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 727: 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 733: 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 746: 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 765: 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 772: 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 791: Line 541:
 
flex-direction: column;
 
flex-direction: column;
 
}
 
}
 
+
 
.post > header .meta > * {
 
.post > header .meta > * {
 
border-left: 0;
 
border-left: 0;
Line 797: 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 807: Line 557:
 
width: calc(100% + 3em);
 
width: calc(100% + 3em);
 
}
 
}
 
+
 
.post > footer {
 
.post > footer {
 
-moz-align-items: stretch;
 
-moz-align-items: stretch;
Line 818: 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 845: 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 867: 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 882: 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 894: 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 911: 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 918: 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 924: 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 933: Line 683:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
 
+
 
#header .main {
 
#header .main {
 
height: inherit;
 
height: inherit;
Line 939: 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 951: 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 966: 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 975: 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 987: 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 999: 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,011: 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,021: 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,063: 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,111: 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,125: 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,131: 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,141: Line 891:
 
width: 100%;
 
width: 100%;
 
}
 
}
 
+
 
}
 
}
 
+
 
/* --Menu */
 
/* --Menu */
 
+
 
ul, ol {
 
ul, ol {
 
list-style:none;
 
list-style:none;
Line 1,153: 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,185: Line 935:
 
width: 11em;
 
width: 11em;
 
}
 
}
 
+
 
#intro .logo:before {
 
#intro .logo:before {
 
background-position: top left;
 
background-position: top left;
Line 1,198: Line 948:
 
width: 100%;
 
width: 100%;
 
}
 
}
 
+
 
#intro .logo img {
 
#intro .logo img {
 
display: block;
 
display: block;
Line 1,204: 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,270: Line 1,020:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
 
+
 
body.single #footer {
 
body.single #footer {
 
text-align: center;
 
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>
 
</style>
<!-- **************************************************** Inicia Pagina **************************** -->
 
<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>
 
</header>
 
 
<!-- Main -->
 
<div id="main">
 
 
<!-- Post -->
 
<article class="post">
 
<header>
 
<div class="title">
 
<h2><a href="#">Abstract</a></h2>
 
</div>
 
</header>
 
<img src="https://static.igem.org/mediawiki/2016/a/a0/T--BIOSINT_Mexico--IGEM.gif" 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="https://static.igem.org/mediawiki/2016/8/8f/T--BIOSINT_Mexico--BIOSINTLOGO.png" alt="" /></a>
 
<header>
 
<h2>WIKI IGEM 2016</h2>
 
 
</header>
 
</section>
 
<!-- About -->
 
<section class="blurb">
 
<h2>BIOSINT MEXICO 2016 </h2>
 
<p>Instituto Tecnologico y de Estudios Superiores de Monterrey Campus Queretaro
 
Epigmenio Gonzales 500, Fracc. San Pablo
 
Email: biosintqro@gmail.com
 
Queretaro, QRO </p>
 
 
<img src="https://static.igem.org/mediawiki/2016/a/a0/T--BIOSINT_Mexico--IGEM.gif" 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>
 
 
</body>
 
 
 
 
 
</html>
 
</html>

Latest revision as of 11:49, 19 October 2016