Difference between revisions of "Template:SCSU-New Haven/css/dev"

Line 1: Line 1:
−
/* General Demo Style */
+
@font-face {
−
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+
  font-family: Harmattan;
−
 
+
  font-weight: 400;
−
*,
+
  font-style: normal;
−
*:after,
+
  src: url("https://2016.igem.org/File:T--SCSU-New_Haven--Harmattan-Regular.ttf");
−
*:before {
+
−
-webkit-box-sizing: border-box;
+
−
-moz-box-sizing: border-box;
+
−
box-sizing: border-box;
+
−
padding: 0;
+
−
margin: 0;
+
 
}
 
}
−
 
+
@font-face {
−
html {  
+
  font-family: Reem Kufi;
−
height: 100%;  
+
  font-weight: 400;
−
font-size: 62.5%;
+
  font-style: normal;
 +
  src: url("https://2016.igem.org/File:T--SCSU-New_Haven--ReemKufi-Regular.ttf");
 
}
 
}
−
 
+
html,
−
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
body,
−
.clearfix:before,
+
div,
−
.clearfix:after {
+
p,
−
content: " ";
+
a {
−
display: table;
+
  font-family: Harmattan;
 +
  font-size: 18px;
 +
  -webkit-font-smoothing: antialiased;
 +
  -moz-osx-font-smoothing: grayscale;
 +
}
 +
a,
 +
.anchor {
 +
  outline: none;
 +
  color: #28272b;
 +
  text-decoration: none;
 +
}
 +
a:hover,
 +
.anchor:hover {
 +
  color: #f9f9f9;
 +
  text-decoration: none;
 +
}
 +
a:focus,
 +
.anchor:focus {
 +
  outline: none;
 +
  text-decoration: none;
 +
}
 +
h1 {
 +
  font-family: Reem Kufi;
 +
}
 +
article,
 +
aside,
 +
details,
 +
figcaption,
 +
figure,
 +
footer,
 +
header,
 +
hgroup,
 +
nav,
 +
section,
 +
summary {
 +
  display: block;
 +
}
 +
audio,
 +
canvas,
 +
video {
 +
  display: inline-block;
 +
}
 +
audio:not([controls]) {
 +
  display: none;
 +
  height: 0;
 +
}
 +
[hidden] {
 +
  display: none;
 +
}
 +
html {
 +
  font-family: sans-serif;
 +
  -webkit-text-size-adjust: 100%;
 +
  -ms-text-size-adjust: 100%;
 +
}
 +
a:focus {
 +
  outline: thin dotted;
 +
}
 +
a:active,
 +
a:hover {
 +
  outline: 0;
 +
}
 +
h1 {
 +
  font-size: 2em;
 +
}
 +
abbr[title] {
 +
  border-bottom: 1px dotted;
 +
}
 +
b,
 +
strong {
 +
  font-weight: 700;
 +
}
 +
dfn {
 +
  font-style: italic;
 +
}
 +
mark {
 +
  background: #ff0;
 +
  color: #000;
 +
}
 +
code,
 +
kbd,
 +
pre,
 +
samp {
 +
  font-family: monospace, serif;
 +
  font-size: 1em;
 +
}
 +
pre {
 +
  white-space: pre-wrap;
 +
  word-wrap: break-word;
 +
}
 +
q {
 +
  quotes: 2 1C 2 1D 2 18 2 19;
 +
}
 +
small {
 +
  font-size: 80%;
 +
}
 +
sub,
 +
sup {
 +
  font-size: 75%;
 +
  line-height: 0;
 +
  position: relative;
 +
  vertical-align: baseline;
 +
}
 +
sup {
 +
  top: -0.5em;
 +
}
 +
sub {
 +
  bottom: -0.25em;
 +
}
 +
img {
 +
  border: 0;
 +
}
 +
svg:not(:root) {
 +
  overflow: hidden;
 +
}
 +
fieldset {
 +
  border: 1px solid #c0c0c0;
 +
  margin: 0 2px;
 +
  padding: 0.35em 0.625em 0.75em;
 +
}
 +
button,
 +
input,
 +
select,
 +
textarea {
 +
  font-family: inherit;
 +
  font-size: 100%;
 +
  margin: 0;
 +
}
 +
button,
 +
input {
 +
  line-height: normal;
 +
}
 +
button,
 +
html input[type=button],
 +
input[type=reset],
 +
input[type=submit] {
 +
  -webkit-appearance: button;
 +
  cursor: pointer;
 +
}
 +
button[disabled],
 +
input[disabled] {
 +
  cursor: default;
 +
}
 +
input[type=checkbox],
 +
input[type=radio] {
 +
  box-sizing: border-box;
 +
  padding: 0;
 +
}
 +
input[type=search] {
 +
  -webkit-appearance: textfield;
 +
  -moz-box-sizing: content-box;
 +
  -webkit-box-sizing: content-box;
 +
  box-sizing: content-box;
 +
}
 +
input[type=search]::-webkit-search-cancel-button,
 +
input[type=search]::-webkit-search-decoration {
 +
  -webkit-appearance: none;
 +
}
 +
textarea {
 +
  overflow: auto;
 +
  vertical-align: top;
 +
}
 +
table {
 +
  border-collapse: collapse;
 +
  border-spacing: 0;
 +
}
 +
body,
 +
figure {
 +
  margin: 0;
 +
}
 +
legend,
 +
button::-moz-focus-inner,
 +
input::-moz-focus-inner {
 +
  border: 0;
 +
  padding: 0;
 
}
 
}
−
 
 
.clearfix:after {
 
.clearfix:after {
−
clear: both;
+
  visibility: hidden;
 +
  display: block;
 +
  font-size: 0;
 +
  content: " ";
 +
  clear: both;
 +
  height: 0;
 
}
 
}
−
 
+
* {
−
.clearfix {
+
  -moz-box-sizing: border-box;
−
*zoom: 1;
+
  -webkit-box-sizing: border-box;
 +
  box-sizing: border-box;
 
}
 
}
−
 
+
* {
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  -o-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
  -webkit-transition: 0.25s ease-in-out;
 +
  -moz-transition: 0.25s ease-in-out;
 +
  -o-transition: 0.25s ease-in-out;
 +
  transition: 0.25s ease-in-out;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
#drawer-toggle:checked ~ #drawer-toggle-label {
 +
  height: 100 $;
 +
  width: calc(100% - 300px);
 +
  background: rgba(255,255,255,0.8);
 +
  left: 300px;
 +
}
 +
#drawer-toggle:checked ~ header {
 +
  left: 300px;
 +
}
 +
#drawer-toggle:checked ~ #drawer {
 +
  left: 0px;
 +
}
 +
#drawer-toggle:checked ~ #page-content {
 +
  margin-left: 300px;
 +
}
 +
#drawer ul {
 +
  list-style-type: none;
 +
}
 +
#drawer ul a {
 +
  display: block;
 +
  padding: 10px;
 +
  color: #c7c7c7;
 +
  text-decoration: none;
 +
}
 +
#drawer ul a:hover {
 +
  color: #fff;
 +
}
 +
@media all and (max-width: 350px) {
 +
  #drawer-toggle:checked ~ #drawer-toggle-label {
 +
    height: 100%;
 +
    width: 50px;
 +
  }
 +
  #drawer-toggle:checked ~ #drawer-toggle-label,
 +
  #drawer-toggle:checked ~header {
 +
    left: calc(100% - 50px);
 +
  }
 +
  #drawer-toggle:checked ~ drawer {
 +
    width: calc(100% - 50px);
 +
    padding: 20px;
 +
  }
 +
  #drawer-toggle:checked ~ #page-content {
 +
    margin-left: calc(100% - 50px);
 +
  }
 +
}
 +
.kukuri {
 +
  text-transform: uppercase;
 +
  overflow: hidden;
 +
  display: inline-block;
 +
}
 +
.kukuri::before {
 +
  content: attr(data-letters);
 +
  position: absolute;
 +
  z-index: 2;
 +
  overflow: hidden;
 +
  color: #424242;
 +
  white-space: nowrap;
 +
  width: 0%;
 +
  -webkit-transition: width 0.4s 0.3s;
 +
  transition: width 0.4s 0.3s;
 +
}
 +
.kukuri::after {
 +
  content: '';
 +
  position: absolute;
 +
  height: 16px;
 +
  width: 100%;
 +
  top: 50%;
 +
  margin-top: -8px;
 +
  right: 0;
 +
  background: #f9f9f9;
 +
  -webkit-transform: translate3d(-100%, 0, 0);
 +
  transform: translate3d(-100%, 0, 0);
 +
  -webkit-transition: -webkit-transform 0.4s;
 +
  transition: transform 0.4s;
 +
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 +
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 +
}
 +
.kukuri:hover::before {
 +
  width: 100%;
 +
}
 +
.kukuri:hover::after {
 +
  -webkit-transform: translate3d(100%, 0, 0);
 +
  transform: translate3d(100%, 0, 0);
 +
}
 +
.mw-content-ltr ul,
 +
.mw-content-rtl .mw-content-ltr ul {
 +
  margin: 0px;
 +
}
 +
#HQ_page p {
 +
  font-size: 20px;
 +
}
 +
#HQ_page .clear {
 +
  height: 0px;
 +
}
 +
.clear clear both height 0px,
 +
#sideMenu {
 +
  display: none;
 +
}
 +
#top_title {
 +
  display: none;
 +
}
 +
#content {
 +
  width: 100%;
 +
  margin: 0px auto;
 +
  padding: 0px;
 +
  border: none;
 +
  background: none;
 +
}
 +
#globalWrapper {
 +
  width: 100%;
 +
  padding: 0px;
 +
  margin-top: -25px;
 +
}
 +
.firstHeading {
 +
  display: none;
 +
}
 +
#bodyContent h1,
 +
#bodyContent h2 {
 +
  margin: 0;
 +
}
 +
html,
 
body {
 
body {
−
font-family: 'Lato', Calibri, Arial, sans-serif;
+
  height: 100%;
−
background: #fff url(../images/bg.jpg);
+
  background-color: #efefef;
−
font-weight: 300;
+
  overflow-x: hidden;
−
font-size: 14px;
+
−
font-size: 1.4rem;
+
−
color: #333;
+
−
-webkit-font-smoothing: antialiased;
+
−
overflow-y: scroll;
+
−
overflow-x: hidden;
+
 
}
 
}
−
 
+
ul {
−
a {
+
  list-style-type: none;
−
color: #555;
+
}
−
text-decoration: none;
+
.navbar-brand img {
 +
  width: 110px;
 +
  margin-top: -5%;
 +
}
 +
footer {
 +
  padding-top: 1%;
 +
  height: 25vh;
 +
  color: #fff;
 +
  background-color: #a09a9a;
 +
}
 +
footer .container #footer_team_logo {
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
footer img {
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
hr {
 +
  border-width: 5px;
 +
  clear: both;
 +
  display: block;
 +
  width: 96%;
 +
  background-color: #1e1a1b;
 +
  height: 1px;
 +
}
 +
#home,
 +
#team,
 +
#parts,
 +
#safety,
 +
#attributions,
 +
#human_practices {
 +
  min-height: 80vh;
 +
}
 +
#page {
 +
  width: 100%;
 +
}
 +
.link {
 +
  outline: none;
 +
  display: inline-block;
 +
  position: relative;
 +
  text-decoration: none;
 +
  font-size: 3em;
 +
  color: #424242;
 +
}
 +
.flex {
 +
  display: flex;
 +
  flex-direction: column;
 +
  align-items: center;
 +
  justify-content: center;
 +
}
 +
.footer_flex {
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
}
 +
#home #home-hero-bg {
 +
  background-image: url("../img/home_hero.jpg");
 +
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  height: 70vh;
 +
}
 +
#home #home-hero-bg .hero {
 +
  width: 100%;
 +
  height: 100%;
 +
  background-color: rgba(50,50,50,0.7);
 +
}
 +
#home #home-hero-bg .hero div {
 +
  display: flex;
 +
  flex-direction: column;
 +
  justify-content: center;
 +
  color: #fff;
 +
  height: 100%;
 +
  margin-left: 5%;
 +
  font-weight: 500;
 +
  line-height: 1.2;
 +
  letter-spacing: 3px;
 +
  text-transform: uppercase;
 +
}
 +
#home #desc {
 +
  margin-top: 5%;
 +
  text-align: center;
 +
  width: 70%;
 +
}
 +
#home #stag_cont {
 +
  margin-top: 5%;
 +
  margin-bottom: 5%;
 +
  width: 70%;
 +
}
 +
#home #stag_cont .row {
 +
  height: 40vh;
 +
}
 +
#home #stag_cont .row div {
 +
  margin-top: 5%;
 +
  height: 100%;
 +
  text-align: center;
 +
}
 +
#home #stag_cont .row div img {
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
#home #showcase {
 +
  width: 100%;
 +
  margin-bottom: 5%;
 +
}
 +
#home #showcase .row {
 +
  display: flex;
 +
  justify-content: center;
 +
}
 +
#home #showcase .row .showcase_item {
 +
  height: calc(30% + 20px);
 +
  width: calc(26vw);
 +
  margin: 20px;
 +
  padding: 60px 0;
 +
  z-index: 1;
 +
  position: relative;
 +
  text-align: center;
 +
  display: inline-block;
 +
  align-items: center;
 +
  justify-content: center;
 +
  -webkit-transform: translate3d(0, 0, 0);
 +
}
 +
#home #showcase .row .showcase_item_long {
 +
  height: calc(40% + 20px);
 +
  width: calc(45vw);
 +
  margin: 20px;
 +
  padding: 80px 0;
 +
  z-index: 1;
 +
  position: relative;
 +
  text-align: center;
 +
  display: inline-block;
 +
  align-items: center;
 +
  justify-content: center;
 +
  -webkit-transform: translate3d(0, 0, 0);
 +
}
 +
#home #showcase #sc_team {
 +
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
 +
}
 +
#home #showcase #sc_parts {
 +
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
 +
}
 +
#home #showcase #sc_results {
 +
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
 +
}
 +
#home #showcase #sc_notebook {
 +
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
 +
}
 +
#home #showcase #sc_attribution {
 +
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
 +
}
 +
#team #team_hero_bg {
 +
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 +
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  height: 40vh;
 +
  color: #fff;
 +
  text-align: center;
 +
  margin-top: 4%;
 +
  margin-bottom: 7%;
 +
}
 +
#team #team_hero_bg div {
 +
  width: 50%;
 +
}
 +
#team .baraja-demo {
 +
  width: 200px;
 +
  margin: 30px auto;
 +
  color: #aaa;
 +
  height: 50vh;
 +
}
 +
#team .baraja-demo h4 {
 +
  color: #666;
 +
  font-size: 14px;
 +
  padding: 8px 10px 5px;
 +
  margin: 20px 3px 5px;
 +
  border-bottom: 1px solid #f0f0f0;
 +
}
 +
#team .baraja-demo p {
 +
  font-size: 12px;
 +
  font-weight: 700;
 +
  padding: 0 10px;
 +
  margin: 10px 3px 0;
 +
}
 +
#team .baraja-demo li img {
 +
  display: block;
 +
  margin: 0 auto;
 +
  width: 100%;
 +
  border-radius: 10px 10px 0 0;
 +
}
 +
#team .baraja-demo .baraja-container {
 +
  width: 200px;
 +
  height: 310px;
 +
  margin: 0 auto 30px;
 +
  position: relative;
 +
  padding: 0;
 +
  list-style-type: none;
 +
}
 +
#team .baraja-demo .baraja-container li {
 +
  width: 100%;
 +
  height: 100%;
 +
  margin: 0;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  cursor: pointer;
 +
  background: #fff;
 +
  pointer-events: auto;
 +
  -webkit-backface-visibility: hidden;
 +
  -moz-backface-visibility: hidden;
 +
  -ms-backface-visibility: hidden;
 +
  -o-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
  border-radius: 10px;
 +
  padding: 5px;
 +
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
 +
  -webkit-user-select: none;
 +
  -khtml-user-select: none;
 +
  -moz-user-select: none;
 +
  -ms-user-select: none;
 +
  user-select: none;
 +
}
 +
#team #thanks {
 +
  margin-bottom: 5%;
 
}
 
}
−
 
+
#team #thanks div {
−
.container {
+
  margin-left: 5%;
−
width: 100%;
+
−
position: relative;
+
 
}
 
}
−
 
+
#team #sponsor_list .row {
−
.clr {
+
  display: flex;
−
clear: both;
+
  align-items: center;
−
padding: 0;
+
  justify-content: center;
−
height: 0;
+
−
margin: 0;
+
 
}
 
}
−
 
+
#team img {
−
.container > header,
+
  width: 100%;
−
.main {
+
  height: auto;
−
width: 80%;
+
−
max-width: 960px;
+
−
margin: 0 auto;
+
−
padding: 0 30px;
+
 
}
 
}
−
 
+
#parts #parts_hero_bg {
−
.container > header {
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
−
padding: 30px;
+
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  height: 40vh;
 +
  color: #fff;
 +
  text-align: center;
 +
  margin-top: 4%;
 +
  margin-bottom: 7%;
 
}
 
}
−
 
+
#parts #parts_hero_bg div {
−
.container > header h1 {
+
  width: 50%;
−
margin: 0;
+
−
font-weight: 700;
+
−
color: #333;
+
−
float: left;
+
−
font-size: 36px;
+
−
font-size: 3.6rem;
+
−
line-height: 46px;
+
−
line-height: 4.6rem;
+
 
}
 
}
−
 
+
#parts #parts_content {
−
.container > header h1 span {
+
  margin-bottom: 3%;
−
display: block;
+
−
color: #444;
+
−
font-size: 20px;
+
−
line-height: 28px;
+
−
line-height: 2.8rem;
+
−
font-weight: 300;
+
−
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
+
 
}
 
}
−
 
+
#parts #parts_content .sub_section {
−
/* Header Style */
+
  margin-left: 5%;
−
.codrops-top {
+
−
font-size: 11px;
+
−
font-size: 1.1rem;
+
−
line-height: 24px;
+
−
line-height: 2.4rem;
+
−
background: #fff;
+
−
background: rgba(255, 255, 255, 0.5);
+
−
text-transform: uppercase;
+
−
z-index: 9999;
+
−
position: relative;
+
−
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
+
 
}
 
}
−
 
+
#attributions #attr_hero_bg {
−
.codrops-top a {
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
−
padding: 0px 10px;
+
  background-size: cover;
−
letter-spacing: 1px;
+
  background-repeat: no-repeat;
−
color: #333;
+
  height: 40vh;
−
font-weight: 400;
+
  color: #fff;
−
text-shadow: 0 -1px 0 #fff;
+
  text-align: center;
−
display: inline-block;
+
  margin-top: 4%;
 +
  margin-bottom: 7%;
 
}
 
}
−
 
+
#attributions #attr_hero_bg div {
−
.codrops-top a:hover {
+
  width: 50%;
−
background: rgba(255,255,255,0.8);
+
−
color: #000;
+
 
}
 
}
−
 
+
#attributions #attr_content {
−
.codrops-top span.right {
+
  margin-bottom: 5%;
−
float: right;
+
 
}
 
}
−
 
+
#attributions #attr_content .sub_section {
−
.codrops-top span.right a {
+
  margin-left: 5%;
−
float: left;
+
−
display: block;
+
 
}
 
}
−
 
+
#safety #safety_1 {
−
.support-note {
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/safety/safety_1.jpg");
−
clear: both;
+
  background-size: cover;
 
}
 
}
−
 
+
#safety #safety_2 {
−
.support-note span{
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/safety/safety_2.jpg");
−
color: #ac375d;
+
  background-size: cover;
−
font-size: 16px;
+
−
font-size: 1.6rem;
+
−
display: none;
+
−
font-weight: bold;
+
−
text-align: center;
+
−
padding: 5px 0;
+
 
}
 
}
−
 
+
#safety #safety_3 {
−
.actions {
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/safety/safety_3.jpg");
−
width: 100%;
+
  background-size: cover;
−
padding: 0 0 20px 0;
+
 
}
 
}
−
 
+
#safety #safety_4 {
−
.actions span {
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/safety/safety_4.jpg");
−
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
+
  background-size: cover;
−
background: #fff;
+
−
color: #888;
+
−
font-weight: 700;
+
−
font-size: 12px;
+
−
font-size: 1.2rem;
+
−
text-align: center;
+
−
display: inline-block;
+
−
cursor: pointer;
+
−
padding: 5px 10px;
+
−
text-transform: uppercase;
+
−
margin: 3px;
+
−
border-radius: 3px;
+
−
 
+
 
}
 
}
−
 
+
#safety .safety-div {
−
.actions span:hover {
+
  display: flex;
−
background: #f7f7f7;
+
  flex-direction: column;
 +
  justify-content: center;
 +
  color: #fff;
 
}
 
}
−
 
+
#human_practices {
−
.actions span:active {
+
  margin-bottom: 5%;
−
background: #aaa;
+
−
color: #fff;
+
−
box-shadow: 0 1px 1px rgba(255,255,255,0.5);
+
 
}
 
}
−
 
+
#human_practices #hp_hero_bg {
−
.actions span.disabled {
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
−
opacity: 0.8;
+
  background-size: cover;
−
color: #ddd;
+
  background-repeat: no-repeat;
 +
  height: 40vh;
 +
  color: #fff;
 +
  text-align: center;
 +
  margin-top: 4%;
 +
  margin-bottom: 7%;
 
}
 
}
−
 
+
#human_practices #desc {
−
.light {
+
  display: flex;
−
padding: 60px 0 250px;
+
  align-items: center;
 +
  justify-content: center;
 
}
 
}
−
 
+
#human_practices #stag_cont {
−
.light span {
+
  margin-top: 5%;
−
background: #aaa;
+
−
color: #fff;
+
−
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+
−
box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,0.8);
+
 
}
 
}
−
 
+
#human_practices #stag_cont .row {
−
.light span:hover {
+
  margin-top: 5%;
−
background: #444;
+
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 
}
 
}
−
 
+
#human_practices #stag_cont img {
−
#nav-prev, #nav-next {
+
  width: 100%;
−
width: 30px;
+
  height: auto;
−
height: 30px;
+
−
font-size: 18px;
+
−
line-height: 20px;
+
 
}
 
}
−
 
+
.bckgnd_image {
−
#close {
+
  position: static;
−
float: right;
+
  min-height: 945px;
 +
  height: 100%;
 +
  background-image: url("../img/safety_visions.jpg");
 +
  background-attachment: fixed;
 +
  background-position: center center;
 +
  background-size: cover;
 
}
 
}

Revision as of 02:10, 20 October 2016

@font-face { 

 font-family: Harmattan;
 font-weight: 400;
 font-style: normal;
 src: url("https://2016.igem.org/File:T--SCSU-New_Haven--Harmattan-Regular.ttf");

} @font-face { 

 font-family: Reem Kufi;
 font-weight: 400;
 font-style: normal;
 src: url("https://2016.igem.org/File:T--SCSU-New_Haven--ReemKufi-Regular.ttf");

} html, body, div, p, a { 

 font-family: Harmattan;
 font-size: 18px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

} a, .anchor { 

 outline: none;
 color: #28272b;
 text-decoration: none;

} a:hover, .anchor:hover { 

 color: #f9f9f9;
 text-decoration: none;

} a:focus, .anchor:focus { 

 outline: none;
 text-decoration: none;

} h1 { 

 font-family: Reem Kufi;

} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { 

 display: block;

} audio, canvas, video { 

 display: inline-block;

} audio:not([controls]) { 

 display: none;
 height: 0;

} [hidden] { 

 display: none;

} html { 

 font-family: sans-serif;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;

} a:focus { 

 outline: thin dotted;

} a:active, a:hover { 

 outline: 0;

} h1 { 

 font-size: 2em;

} abbr[title] { 

 border-bottom: 1px dotted;

} b, strong { 

 font-weight: 700;

} dfn { 

 font-style: italic;

} mark { 

 background: #ff0;
 color: #000;

} code, kbd, pre, samp { 

 font-family: monospace, serif;
 font-size: 1em;

} pre { 

 white-space: pre-wrap;
 word-wrap: break-word;

} q { 

 quotes: 2 1C 2 1D 2 18 2 19;

} small { 

 font-size: 80%;

} sub, sup { 

 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;

} sup { 

 top: -0.5em;

} sub { 

 bottom: -0.25em;

} img { 

 border: 0;

} svg:not(:root) { 

 overflow: hidden;

} fieldset { 

 border: 1px solid #c0c0c0;
 margin: 0 2px;
 padding: 0.35em 0.625em 0.75em;

} button, input, select, textarea { 

 font-family: inherit;
 font-size: 100%;
 margin: 0;

} button, input { 

 line-height: normal;

} button, html input[type=button], input[type=reset], input[type=submit] { 

 -webkit-appearance: button;
 cursor: pointer;

} button[disabled], input[disabled] { 

 cursor: default;

} input[type=checkbox], input[type=radio] { 

 box-sizing: border-box;
 padding: 0;

} input[type=search] { 

 -webkit-appearance: textfield;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;

} input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { 

 -webkit-appearance: none;

} textarea { 

 overflow: auto;
 vertical-align: top;

} table { 

 border-collapse: collapse;
 border-spacing: 0;

} body, figure { 

 margin: 0;

} legend, button::-moz-focus-inner, input::-moz-focus-inner { 

 border: 0;
 padding: 0;

} .clearfix:after { 

 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;

}

  • {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;

}

  • {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 margin: 0;
 padding: 0;

}

  1. drawer-toggle:checked ~ #drawer-toggle-label {
 height: 100 $;
 width: calc(100% - 300px);
 background: rgba(255,255,255,0.8);
 left: 300px;

}

  1. drawer-toggle:checked ~ header {
 left: 300px;

}

  1. drawer-toggle:checked ~ #drawer {
 left: 0px;

}

  1. drawer-toggle:checked ~ #page-content {
 margin-left: 300px;

}

  1. drawer ul {
 list-style-type: none;

}

  1. drawer ul a {
 display: block;
 padding: 10px;
 color: #c7c7c7;
 text-decoration: none;

}

  1. drawer ul a:hover {
 color: #fff;

} @media all and (max-width: 350px) { 

 #drawer-toggle:checked ~ #drawer-toggle-label {
   height: 100%;
   width: 50px;
 }
 #drawer-toggle:checked ~ #drawer-toggle-label,
 #drawer-toggle:checked ~header {
   left: calc(100% - 50px);
 }
 #drawer-toggle:checked ~ drawer {
   width: calc(100% - 50px);
   padding: 20px;
 }
 #drawer-toggle:checked ~ #page-content {
   margin-left: calc(100% - 50px);
 }

} .kukuri { 

 text-transform: uppercase;
 overflow: hidden;
 display: inline-block;

} .kukuri::before { 

 content: attr(data-letters);
 position: absolute;
 z-index: 2;
 overflow: hidden;
 color: #424242;
 white-space: nowrap;
 width: 0%;
 -webkit-transition: width 0.4s 0.3s;
 transition: width 0.4s 0.3s;

} .kukuri::after { 

 content: ;
 position: absolute;
 height: 16px;
 width: 100%;
 top: 50%;
 margin-top: -8px;
 right: 0;
 background: #f9f9f9;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 -webkit-transition: -webkit-transform 0.4s;
 transition: transform 0.4s;
 -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

} .kukuri:hover::before { 

 width: 100%;

} .kukuri:hover::after { 

 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);

} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { 

 margin: 0px;

}

  1. HQ_page p {
 font-size: 20px;

}

  1. HQ_page .clear {
 height: 0px;

} .clear clear both height 0px,

  1. sideMenu {
 display: none;

}

  1. top_title {
 display: none;

}

  1. content {
 width: 100%;
 margin: 0px auto;
 padding: 0px;
 border: none;
 background: none;

}

  1. globalWrapper {
 width: 100%;
 padding: 0px;
 margin-top: -25px;

} .firstHeading { 

 display: none;

}

  1. bodyContent h1,
  2. bodyContent h2 {
 margin: 0;

} html, body { 

 height: 100%;
 background-color: #efefef;
 overflow-x: hidden;

} ul { 

 list-style-type: none;

} .navbar-brand img { 

 width: 110px;
 margin-top: -5%;

} footer { 

 padding-top: 1%;
 height: 25vh;
 color: #fff;
 background-color: #a09a9a;

} footer .container #footer_team_logo { 

 width: 100%;
 height: auto;

} footer img { 

 width: 100%;
 height: auto;

} hr { 

 border-width: 5px;
 clear: both;
 display: block;
 width: 96%;
 background-color: #1e1a1b;
 height: 1px;

}

  1. home,
  2. team,
  3. parts,
  4. safety,
  5. attributions,
  6. human_practices {
 min-height: 80vh;

}

  1. page {
 width: 100%;

} .link { 

 outline: none;
 display: inline-block;
 position: relative;
 text-decoration: none;
 font-size: 3em;
 color: #424242;

} .flex { 

 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

} .footer_flex { 

 display: flex;
 align-items: center;
 justify-content: center;

}

  1. home #home-hero-bg {
 background-image: url("../img/home_hero.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 height: 70vh;

}

  1. home #home-hero-bg .hero {
 width: 100%;
 height: 100%;
 background-color: rgba(50,50,50,0.7);

}

  1. home #home-hero-bg .hero div {
 display: flex;
 flex-direction: column;
 justify-content: center;
 color: #fff;
 height: 100%;
 margin-left: 5%;
 font-weight: 500;
 line-height: 1.2;
 letter-spacing: 3px;
 text-transform: uppercase;

}

  1. home #desc {
 margin-top: 5%;
 text-align: center;
 width: 70%;

}

  1. home #stag_cont {
 margin-top: 5%;
 margin-bottom: 5%;
 width: 70%;

}

  1. home #stag_cont .row {
 height: 40vh;

}

  1. home #stag_cont .row div {
 margin-top: 5%;
 height: 100%;
 text-align: center;

}

  1. home #stag_cont .row div img {
 width: 100%;
 height: auto;

}

  1. home #showcase {
 width: 100%;
 margin-bottom: 5%;

}

  1. home #showcase .row {
 display: flex;
 justify-content: center;

}

  1. home #showcase .row .showcase_item {
 height: calc(30% + 20px);
 width: calc(26vw);
 margin: 20px;
 padding: 60px 0;
 z-index: 1;
 position: relative;
 text-align: center;
 display: inline-block;
 align-items: center;
 justify-content: center;
 -webkit-transform: translate3d(0, 0, 0);

}

  1. home #showcase .row .showcase_item_long {
 height: calc(40% + 20px);
 width: calc(45vw);
 margin: 20px;
 padding: 80px 0;
 z-index: 1;
 position: relative;
 text-align: center;
 display: inline-block;
 align-items: center;
 justify-content: center;
 -webkit-transform: translate3d(0, 0, 0);

}

  1. home #showcase #sc_team {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. home #showcase #sc_parts {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. home #showcase #sc_results {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. home #showcase #sc_notebook {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. home #showcase #sc_attribution {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. team #team_hero_bg {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

  1. team #team_hero_bg div {
 width: 50%;

}

  1. team .baraja-demo {
 width: 200px;
 margin: 30px auto;
 color: #aaa;
 height: 50vh;

}

  1. team .baraja-demo h4 {
 color: #666;
 font-size: 14px;
 padding: 8px 10px 5px;
 margin: 20px 3px 5px;
 border-bottom: 1px solid #f0f0f0;

}

  1. team .baraja-demo p {
 font-size: 12px;
 font-weight: 700;
 padding: 0 10px;
 margin: 10px 3px 0;

}

  1. team .baraja-demo li img {
 display: block;
 margin: 0 auto;
 width: 100%;
 border-radius: 10px 10px 0 0;

}

  1. team .baraja-demo .baraja-container {
 width: 200px;
 height: 310px;
 margin: 0 auto 30px;
 position: relative;
 padding: 0;
 list-style-type: none;

}

  1. team .baraja-demo .baraja-container li {
 width: 100%;
 height: 100%;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 cursor: pointer;
 background: #fff;
 pointer-events: auto;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 backface-visibility: hidden;
 border-radius: 10px;
 padding: 5px;
 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;

}

  1. team #thanks {
 margin-bottom: 5%;

}

  1. team #thanks div {
 margin-left: 5%;

}

  1. team #sponsor_list .row {
 display: flex;
 align-items: center;
 justify-content: center;

}

  1. team img {
 width: 100%;
 height: auto;

}

  1. parts #parts_hero_bg {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

  1. parts #parts_hero_bg div {
 width: 50%;

}

  1. parts #parts_content {
 margin-bottom: 3%;

}

  1. parts #parts_content .sub_section {
 margin-left: 5%;

}

  1. attributions #attr_hero_bg {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

  1. attributions #attr_hero_bg div {
 width: 50%;

}

  1. attributions #attr_content {
 margin-bottom: 5%;

}

  1. attributions #attr_content .sub_section {
 margin-left: 5%;

}

  1. safety #safety_1 {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/safety/safety_1.jpg");
 background-size: cover;

}

  1. safety #safety_2 {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/safety/safety_2.jpg");
 background-size: cover;

}

  1. safety #safety_3 {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/safety/safety_3.jpg");
 background-size: cover;

}

  1. safety #safety_4 {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/safety/safety_4.jpg");
 background-size: cover;

}

  1. safety .safety-div {
 display: flex;
 flex-direction: column;
 justify-content: center;
 color: #fff;

}

  1. human_practices {
 margin-bottom: 5%;

}

  1. human_practices #hp_hero_bg {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

  1. human_practices #desc {
 display: flex;
 align-items: center;
 justify-content: center;

}

  1. human_practices #stag_cont {
 margin-top: 5%;

}

  1. human_practices #stag_cont .row {
 margin-top: 5%;
 display: flex;
 align-items: center;
 justify-content: center;

}

  1. human_practices #stag_cont img {
 width: 100%;
 height: auto;

} .bckgnd_image { 

 position: static;
 min-height: 945px;
 height: 100%;
 background-image: url("../img/safety_visions.jpg");
 background-attachment: fixed;
 background-position: center center;
 background-size: cover;

}