Team:Uppsala/stylesheet.css

From 2014.igem.org

(Difference between revisions)
 
(806 intermediate revisions not shown)
Line 1: Line 1:
-
#master {
+
.clear {
 +
 
 +
clear: both;
-
width: 100%;
 
-
min-height: 500px;
 
}
}
-
#main_frame_upper {
+
#master {
-
+
       
width: 100%;
width: 100%;
-
        background-color: #fff;
+
min-height: 500px;
-
/*url('https://static.igem.org/mediawiki/2014/7/7e/Uppsala_igem2014_Head.png');
+
        min-width: 1100px;
-
      */
+
}
}
#header {
#header {
          
          
-
width: 1130px;
+
        background-color: #fff;
 +
background-image: url('https://static.igem.org/mediawiki/2014/1/11/Uppsala_iGEM2014_Team_headerV3.png');
 +
background-size: 100% 100%;
 +
background-repeat: no-repeat;
 +
 
 +
border-top: 2px solid #000;
 +
        border-left: 2px solid #000;
 +
        border-right: 2px solid #000;
 +
 
 +
width: 1050px;
         height: 300px;
         height: 300px;
-
margin-left: auto;
 
margin-right: auto;
margin-right: auto;
 +
margin-left: auto;
 +
        padding: 20px;
 +
        border-top-left-radius: 25px;
 +
        border-top-right-radius: 25px;
}
}
-
#left_content_header {
+
.mainText{
-
 
+
margin-top: 30px;
-
float: left;
+
-
width: 310px;
+
-
        padding-bottom: 20px;
+
-
 
+
}
}
-
#right_content_header {
+
#main_content {
 +
 +
border-bottom: 2px solid #000;
 +
        border-left: 2px solid #000;
 +
        border-right: 2px solid #000;
-
        margin-top:20px;
 
-
float: right;
 
-
padding-bottom: 20px;
 
-
 
-
}
 
-
 
-
 
-
 
-
#main_frame_lower {
 
-
 
-
border: none;
 
-
    width: 99.5%;
 
-
    height: 99.5%;
 
-
 
 
-
 
-
width: 100%;
 
-
}
 
-
 
-
#main_content {
 
-
border: 2px solid #a1a1a1;
 
-
/*background-color: #dddddd;*/
 
         background-color: #fff;
         background-color: #fff;
width: 1050px;
width: 1050px;
Line 58: Line 48:
margin-right: auto;
margin-right: auto;
margin-left: auto;
margin-left: auto;
-
        margin-top: 140px;
 
         margin-bottom:50px;
         margin-bottom:50px;
-
         padding: 20px;
+
         padding: 20px;  
-
         border-radius: 25px;
+
         border-bottom-right-radius: 25px;
-
 
+
        border-bottom-left-radius: 25px;
         font-family: "Times New Roman", Times, serif;
         font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-size: 18px;
-
font-weight:bold;
+
}
}
-
#tracking_system {  
+
#main_content h1{
-
         clear: both;
+
         font-family: 'Black Ops One', cursive;
-
         width: 100%;
+
font-size: 44px;
-
         height: 50px; /* IMPORTANT NOTE!! This needs to be removed or replaced, just a placeholder! */
+
         margin-top:25px;
 +
         font-weight: bold;
 +
text-transform: uppercase;
 +
        color: #5d6a52;
 +
      -webkit-text-stroke: 1px black;
 +
      -moz-text-stroke: 1px black;
}
}
-
 
+
#main_content h2{
-
#tabs {
+
        font-family: 'Black Ops One', cursive;
-
  overflow: auto;
+
color: #d31906;
-
  width: 100%;
+
        font-size: 22px;
-
  list-style: none;
+
        text-decoration: none;
-
  margin: 0;
+
        margin-top:15px;
-
  padding: 0;
+
}
}
-
#tabs li {
+
#main_content h3{
-
    margin: 0;
+
        font-family: "Times New Roman", Times, serif;
-
    padding: 0;
+
        font-size: 18px;
-
    float: left;
+
        font-weight: bold;
 +
        margin-top:15px;
}
}
 +
/* ---- Figures ---- */
-
#tabs a {
+
.schedule {
-
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
+
width: 600px;
-
    background: #ad1c1c;
+
-
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
+
-
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
+
-
    color: #fff;
+
-
    float: left;
+
-
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
+
-
    height: 35px;
+
-
    padding: 0 30px;
+
-
    text-decoration: none;
+
}
}
-
#tabs a:hover {
+
.scheduleSmall {
-
    background: #c93434;
+
width: 300px;
-
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);    
+
}
}
-
#tabs a:focus {
+
.graph{
-
    outline: 0;
+
width: 100%
}
}
-
#tabs #current a {
+
/* ---- Title and soicalmedia ---- */
-
    background: #fff;
+
-
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
+
-
    text-shadow: none;   
+
-
    color: #333;
+
-
}
+
 +
#title {
 +
        float: left;
-
/* Remove the rule below if you want the content to be "organic" */
 
-
#section_selector div {
 
-
    height: 220px;
 
}
}
-
#tab1 {
 
-
width: 100%;
+
#social_media {
-
min-height: 300px;
+
-
border: 1px solid;
+
-
}
+
-
.logo {
+
        float: right;
-
width: 300px;
 
}
}
-
.pic  {
+
#social_media li {
 +
 
 +
        display: inline-block;
 +
        margin-left: 10px;
-
        width: 224px;
 
}
}
 +
.sm_logo {
-
/* CSS FOR MENU_2 BEGINS */
+
        height: 30px;
-
#menu_2 {
 
-
 
-
margin-bottom: 20px;
 
}
}
-
.button_first {
 
-
float: left;
+
/* ---- Tracking system ---- */
-
position: relative;
+
-
width: 200px;
+
-
height: 50px;
+
-
color: #fff;
+
-
display: block;
+
-
text-decoration: none;
+
-
margin-left: 0 auto;
+
-
border-radius: 5px;
+
-
border: 1px solid d31906;
+
-
background: #d1d2d4;
+
-
text-align: center;
+
-
margin: 20px 50px;
+
-
padding-bottom: 20px 30px;
+
-
+
-
-webkit-tansition: all 0.1s;
+
#tracking_system { 
-
-moz-transition: all 0.1s;
+
        clear: both;
-
transition: all 0.1s;
+
        width: 100%;
 +
        height: 30px;
 +
}
-
+
/* ----Project content---- */
-
}
+
.project_text {
-
.button_first:hover, .button_middle:hover, .button_last:hover {
+
-moz-column-count: 2;
 +
      -moz-column-gap: 30px;
 +
      -webkit-column-count: 2;
 +
      -webkit-column-gap : 30px;
 +
      -moz-column-rule-color:  #ccc;
 +
      -moz-column-rule-style:  solid;
 +
      -moz-column-rule-width:  1px;
 +
      -webkit-column-rule-color:  #ccc;
 +
      -webkit-column-rule-style: solid ;
 +
      -webkit-column-rule-width:  1px;
 +
font-style: normal !important;
 +
}
 +
.project_header {
 +
padding-top: 40px;
 +
}
-
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0))), #fff;
+
.reference {
-
 
+
border-top: 1px solid #ccc;
-
-moz-transition-duration: 0.8s;
+
margin-top: 30px;
-
      -webkit-transition-duration: 0.8s;
+
padding-top: 30px;
-
      -o-transition-duration: 0.8s;
+
}
 +
.figure2 {
 +
width: 800px;
}
}
-
.button_middle {
+
/* ----Calendar---- */
-
float: left;
 
-
position: relative;
 
-
width: 200px;
 
-
height: 50px;
 
-
color: #fff;
 
-
display: block;
 
-
text-decoration: none;
 
-
margin-left: 0 auto;
 
-
border-radius: 5px;
 
-
border-radius: solid 1px #D94E3B;
 
-
background: #348aff;
 
-
text-align: center;
 
-
margin: 20px 50px;
 
-
padding-bottom: 20px 30px;
 
-
border: 1px solid;
 
-
-webkit-tansition: all 0.1s;
+
#calendar {
-
-moz-transition: all 0.1s;
+
margin-left:auto;
-
transition: all 0.1s;
+
margin-right:auto;
 +
margin-top: 50px;
 +
margin-bottom: 20px;
 +
font-size: 50px;
 +
font-family: 'Black Ops One', cursive;
 +
}
-
+
#calendar_head {
-
 
+
margin-left:auto;
-
}
+
margin-right:auto;
-
 
+
margin-top: 30px;
-
.button_last {
+
margin-bottom: 5px;
-
 
+
font-size: 50px;
-
float: left;
+
font-family: 'Black Ops One', cursive;
-
position: relative;
+
text-align: center;
-
width: 200px;
+
color: #d31906;
-
height: 50px;
+
}
-
color: #fff;
+
-
display: block;
+
-
text-decoration: none;
+
-
margin-left: 0 auto;
+
-
border-radius: 5px;
+
-
border-radius: solid 1px #D94E3B;
+
-
background: #348aff;
+
-
text-align: center;
+
-
margin: 20px 50px;
+
-
padding-bottom: 20px 30px;
+
-
border: 1px solid;
+
-
 
+
-
-webkit-tansition: all 0.1s;
+
-
-moz-transition: all 0.1s;
+
-
transition: all 0.1s;
+
-
 
+
-
+
-
 
+
-
}
+
-
 
+
-
.button_text {
+
-
+
-
color: #fff;
+
-
padding-top: 10px;
+
-
        text-decoration: none;
+
 +
#calendar_days {
 +
margin-left:auto;
 +
margin-right:auto;
}
}
-
.button_text:hover {
+
#calendar_days td {
-
 
+
text-align: center;
-
color: #d31906;
+
width: 180px;
-
padding-top: 10px;
+
font-family: 'Black Ops One', cursive;
-
        text-decoration: none;
+
-
 
+
}
}
-
 
+
#calendar_days td a {
-
/* HÄR BÄRJAR MENU KODEN NIKLAS!!!!!!!!!!!!11111!1!!!!!!11 :D */
+
text-decoration: none;
-
 
+
color: #d31906;
-
#menu_container {
+
-
 
+
-
clear: both;
+
-
width: 100%;
+
-
 
+
}
}
-
#clear {
+
#calendar a {
-
                      /* Vettefan varför man behöver en tom div som bara clearar, allting fuckade upp utan denna */
+
text-decoration: none;
-
clear: both;
+
color: black;
}
}
-
#middle_logo {
+
#calendar tr #calendar_week {
-
 
+
width: 300px;
-
width: 20%;
+
text-align: center;
-
height: 0px;
+
-
border-top: 54px solid black;
+
-
float: left;
+
}
}
-
.home_logo {
+
#calendar_work table
-
position: relative;
+
{
-
top: -150px;
+
font-family: 'Black Ops One', cursive;
-
z-index: 2;
+
border-collapse:collapse;
-
width: 100%;
+
-
 
+
}
}
-
#menu {
+
#calendar_work td, th
-
  background: #000;
+
{
-
  height: 46px;
+
font-size:0.8em;
-
  text-align: center;
+
border:1px solid #5d6a52;
-
  font-family: "Times New Roman", Times, serif;
+
padding:3px 7px 2px 7px;
-
  font-size: 16px;
+
}
-
  font-weight:bold;
+
#calendar_work th
-
  float: left;
+
{
-
  width: 40%;
+
font-size:1.1em;
-
 
+
text-align:left;
 +
padding-top:5px;
 +
padding-bottom:4px;
 +
background-color: #dee1dc;
 +
color:#5d6a52;
}
}
-
#menu ul {
 
-
  margin:0;padding:0;
 
-
  position:absolute;
 
-
  width:40%;
 
 +
#calendar_work td{
 +
font-family: "Times New Roman", Times, serif;
}
}
-
#menu ul a {
 
-
  text-decoration: none;
 
 +
#calendar_work tr:nth-of-type(odd) {
 +
background-color:#dee1dc;
}
}
-
#menu ul li {
+
/* ----Back-to-top button---- */
-
  list-style: none;
+
-
  float: left;
+
-
  position: relative;
+
-
  width: calc(225%/9);
+
 +
.back-to-top {
 +
    width: 90px;
 +
    height: 105px;
 +
    position: fixed;
 +
    display: none;
 +
    text-decoration: none;
 +
    color: #000000;
 +
    background-color: rgba(0, 0, 0, 0.3);
 +
    cursor: default;
 +
    bottom: 100px; /* placement from bot */
 +
    right: 100px;
 +
    z-index: 20;
 +
    padding: 1em;
 +
   
 +
    /* rounded corners */
 +
-webkit-border-radius: 15px;
 +
-moz-border-radius: 15px;
 +
border-radius: 15px;
}
}
-
#menu > ul > li {
+
.back-to-top:hover {   
-
  list-style: none;
+
    background-color: rgba(0, 0, 0, 0.5);
-
  float: left;
+
-
  position: relative;
+
-
  width: calc(225%/9);
+
-
  border-top: 5px solid #000;
+
-
  border-bottom: 5px solid #000;
+
-
webkit-transition: all 0.3s ease-in-out;
+
-
-moz-transition: all 0.3s ease-in-out;
+
-
-o-transition: all 0.3s ease-in-out;
+
-
transition: all 0.3s ease-in-out;
+
-
 
+
-
 
+
}
}
-
#menu > ul > li:hover {
+
.back-to-top a {
 +
position: relative;
 +
left: 8px;
 +
font: 11px/100% Arial, Helvetica, sans-serif;
 +
text-transform: uppercase;
 +
color: #bbb;
-
  list-style: none;
 
-
  float: left;
 
-
  position: relative;
 
-
  width: calc(225%/9);
 
-
  border-top: 5px solid #d40400;
 
-
  border-bottom: 5px solid #d40400;
 
-
  background-color: #000;
 
-
 
 
-
 
}
}
-
#menu ul li a:hover {
+
.back-to-top img{
 +
 +
width: 90px;
 +
height: 90px;
 +
        margin-bottom: 7px;
 +
}
-
color: #d40400;
+
/* ---- Intro ----- */
-
background-color: #000;
+
-
}
+
-
#menu ul li a {
+
.view {
-
  background: #000;
+
    width: 1090px;
-
  color: #fff;
+
    height: 3105px;
-
 
+
    overflow: hidden;
-
  display: block;
+
    position: relative;
-
  padding-top: 10px;
+
    text-align: center;
-
  padding-bottom: 10px;
+
    cursor: default;
-
  width:100%;
+
    position: absolute;
 +
    top: 50px;
 +
    z-index: 950;
-
}
+
    border-bottom-right-radius: 25px;
 +
    border-bottom-left-radius: 25px;
 +
    border-top-left-radius: 25px;
 +
    border-top-right-radius: 25px;
-
#menu ul ul {
+
    margin-left:-20px;
-
  padding:0;
+
-
  overflow: hidden;
+
-
  width: 100%;
+
-
}
+
-
#menu ul ul li:first-child {
+
    background-color: rgba(0, 0, 0, 0.8);
-
  margin-top: 5px;
+
    opacity: 1;
-
  float: none;
+
    -moz-transition-property: opacity;            
-
  display: none;
+
    -moz-transition-duration: 2s;
-
  border-bottom: 1px solid #ccc;
+
    -webkit-transition-property: opacity;
-
  border-left: 1px solid #ccc;
+
    -webkit-transition-duration: 2s;
-
  border-right: 1px solid #ccc;'
+
    transition-property: opacity;
-
  width: 100%;
+
    transition-duration: 2s;
}
}
-
 
+
.view img {
-
#menu ul ul li {
+
    margin-left: auto;
-
  float: none;
+
    margin-right: auto;
-
  display: none;
+
    display: block;
-
  border-bottom: 1px solid #ccc;
+
-
  border-left: 1px solid #ccc;
+
-
  border-right: 1px solid #ccc;
+
-
  width: 100%;
+
}
}
-
#menu ul ul li a {
+
.view ul {
-
  background: #f0f0f0;
+
    text-align: center;
-
  color: #333;
+
    position: relative;
-
  border:none;
+
    padding: 10px;
-
  width: calc(100%/9);
+
-
}
+
-
#menu ul ul li a:hover {
+
-
  background: #ccc;
+
}
}
-
#menu ul li a:hover,  
+
.view .nav {
-
#menu ul li:hover ul li {
+
padding: 14px 10px;
-
  display:block !important;
+
font-size: 40px;
-
}
+
color: #5d6a52;
-
#menu ul li ul li{
+
//font-family: 'Black Ops One', cursive;
-
width:900%;
+
font-family: 'Play', sans-serif;
 +
font-weight: bold;
 +
-webkit-text-stroke: 1px white;
 +
-moz-text-stroke: 1px white;
}
}
 +
/* ----- Sponsor div ----- */
 +
#custom_footer {
 +
width: 100%;
 +
border-top: 30px solid #000;
 +
 +
        background-color: #fff;
 +
        bottom: 0;
 +
        min-width: 1100px;
 +
}
 +
.sponsorTable{
-
 
+
width: 100%;
-
#menu_right {
+
-
text-align: center;
+
-
  background: #000;
+
-
  height: 46px;
+
-
  font-family: "Times New Roman", Times, serif;
+
-
  font-size: 16px;
+
-
  font-weight:bold;
+
-
  float: right;
+
-
  width: 40%;
+
-
 
+
}
}
-
#menu_right ul {
 
-
  margin:0;padding:0;
 
-
  position:absolute;
 
-
  width:40%;
 
 +
#custom_footer .sponsors{
-
}
+
width: 150px;
-
#menu_right ul a {
+
max-height: 150px;
-
  text-decoration: none;
+
}
}
-
#menu_right ul li {
+
#custom_footer .centerThis{
-
  list-style: none;
+
-
  float: left;
+
-
  position: relative;
+
-
  width: calc(225%/9);
+
 +
opacity:0.6;
 +
text-align: center;
 +
width:10%;
 +
padding: 20px;
}
}
-
#menu_right > ul > li {
+
#custom_footer .centerThis:hover{
-
  list-style: none;
+
-
  float: left;
+
-
  position: relative;
+
-
  width: calc(225%/9);
+
-
  border-top: 5px solid #000;
+
-
  border-bottom: 5px solid #000;
+
-
webkit-transition: all 0.3s ease-in-out;
+
-
-moz-transition: all 0.3s ease-in-out;
+
-
-o-transition: all 0.3s ease-in-out;
+
-
transition: all 0.3s ease-in-out;
+
 +
opacity:1;
}
}
-
#menu_right > ul > li:hover {
+
#secret {
-
 
+
    position: absolute;
-
  list-style: none;
+
    top: 20%;
-
  float: left;
+
    left: 50%;
-
  position: relative;
+
    width: 190px;
-
  width: calc(225%/9);
+
    height: 190px;
-
  border-top: 5px solid #d40400;
+
    margin:-60px 0 0 -60px;
-
  border-bottom: 5px solid #d40400;
+
    -webkit-animation:spin 4s linear infinite;
-
  background-color: #000;
+
    -moz-animation:spin 4s linear infinite;
-
 
+
    animation:spin 4s linear infinite;
-
+
}
}
-
#menu_right ul li a:hover {
+
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 +
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 +
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-
color: #d40400;
 
-
background-color: #000;
 
-
}
 
-
#menu_right ul li a {
+
/* ---- Dynamic font size for navbar ---- */
-
  background: #000;
+
-
  color: #fff;
+
-
 
+
-
  display: block;
+
-
  padding-top: 10px;
+
-
  padding-bottom: 10px;
+
-
  width:100%;
+
-
}
 
-
#menu_right ul ul {
+
@media (max-width: 1490px) {
-
  padding:0;
+
    #menu ul li a { font-size: 75%; }
-
  overflow: hidden;
+
-
  width: 100%;
+
}
}
-
#menu_right ul ul li:first-child {
+
@media (min-width: 1500px) {
-
  margin-top: 5px;
+
    #menu ul li a { font-size: 100%; }
-
  float: none;
+
-
  display: none;
+
-
  border-bottom: 1px solid #ccc;
+
-
  border-left: 1px solid #ccc;
+
-
  border-right: 1px solid #ccc;'
+
-
  width: 100%;  
+
-
 
+
}
}
-
#menu_right ul ul li {
+
@media (max-width: 1490px) {
-
  float: none;
+
    #menu_right ul li a { font-size: 75%; }
-
  display: none;
+
-
  border-bottom: 1px solid #ccc;
+
-
  border-left: 1px solid #ccc;
+
-
  border-right: 1px solid #ccc; 
+
-
  width: 100%;
+
-
}
+
-
#menu_right ul ul li a {
+
-
  background: #f0f0f0;
+
-
  color: #333;
+
-
  border:none;
+
-
  width: calc(100%/9);
+
-
}
+
-
#menu_right ul ul li a:hover {
+
-
  background: #ccc;
+
}
}
-
#menu_right ul li a:hover,
 
-
#menu_right ul li:hover ul li {
 
-
  display:block !important;
 
-
}
 
-
#menu_right ul li ul li{
 
-
width:900%;
 
-
}
 
-
.back-to-top {
+
@media (min-width: 1500px) {
-
    width: 90px;
+
     #menu_right ul li a { font-size: 100%; }
-
height: 105px;
+
-
     position: fixed;
+
-
    display: none;
+
-
    text-decoration: none;
+
-
    color: #000000;
+
-
    background-color: rgba(0, 0, 0, 0.3);
+
-
   
+
-
    bottom: 100px; /* placement from bot */
+
-
    right: 20px;
+
-
   
+
-
    padding: 1em;
+
-
   
+
-
    /* rounded corners */
+
-
-webkit-border-radius: 15px;
+
-
-moz-border-radius: 15px;
+
-
border-radius: 15px;
+
-
 
+
-
/* transition
+
-
-webkit-transition: 1s;
+
-
-moz-transition: 1s;
+
-
transition: 1s;
+
-
*/
+
}
}
-
 
+
#cover {
-
.back-to-top:hover {   
+
position: absolute;
-
    background-color: rgba(0, 0, 0, 0.5);
+
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 100;
 +
display: none;
 +
background-color: #000000;
 +
opacity: .7;
 +
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.7);
}
}
-
 
-
.back-to-top a {
 
-
position: relative;
 
-
left: 14px;
 
-
/*text-align: center;*/
 
-
font: 11px/100% Arial, Helvetica, sans-serif;
 
-
text-transform: uppercase;
 
-
/*text-decoration: none;*/
 
-
color: #bbb;
 
-
 
-
/* transition
 
-
-webkit-transition: 1s;
 
-
-moz-transition: 1s;
 
-
transition: 1s;
 
-
*/
 
-
}
 
-
 
-
.back-to-top img{
 
-
 
-
width: 90px;
 
-
height: 90px;
 
-
}
 

Latest revision as of 22:17, 17 October 2014

.clear {

clear: both;

}

  1. master {

width: 100%; min-height: 500px; 

       min-width: 1100px;

}

  1. header { 
       background-color: #fff;

background-image: url('https://static.igem.org/mediawiki/2014/1/11/Uppsala_iGEM2014_Team_headerV3.png'); background-size: 100% 100%; background-repeat: no-repeat;

border-top: 2px solid #000; 

       border-left: 2px solid #000;
       border-right: 2px solid #000;

width: 1050px; 

       height: 300px;

margin-right: auto; margin-left: auto; 

       padding: 20px;
       border-top-left-radius: 25px;
       border-top-right-radius: 25px;

}

.mainText{ margin-top: 30px; }

  1. main_content {

border-bottom: 2px solid #000; 

       border-left: 2px solid #000;
       border-right: 2px solid #000;

       background-color: #fff;

width: 1050px; min-height: 400px; margin-right: auto; margin-left: auto; 

       margin-bottom:50px;
       padding: 20px; 
       border-bottom-right-radius: 25px;
       border-bottom-left-radius: 25px;
       font-family: "Times New Roman", Times, serif;

font-size: 18px;

}

  1. main_content h1{ 
       font-family: 'Black Ops One', cursive;

font-size: 44px; 

       margin-top:25px;
       font-weight: bold;

text-transform: uppercase; 

       color: #5d6a52;
      -webkit-text-stroke: 1px black;
      -moz-text-stroke: 1px black;

}

  1. main_content h2{ 
       font-family: 'Black Ops One', cursive;

color: #d31906; 

       font-size: 22px;
       text-decoration: none;
       margin-top:15px;

}

  1. main_content h3{ 
       font-family: "Times New Roman", Times, serif;
       font-size: 18px;
       font-weight: bold;
       margin-top:15px;

} /* ---- Figures ---- */

.schedule { width: 600px; }

.scheduleSmall { width: 300px; }

.graph{ width: 100% }

/* ---- Title and soicalmedia ---- */

  1. title { 
       float: left;

}


  1. social_media { 
       float: right;

}

  1. social_media li { 
       display: inline-block;
       margin-left: 10px;

}

.sm_logo { 

       height: 30px;

}


/* ---- Tracking system ---- */

  1. tracking_system { 
       clear: both;
       width: 100%;
       height: 30px;

}

/* ----Project content---- */

.project_text {

-moz-column-count: 2; 

      -moz-column-gap: 30px;
      -webkit-column-count: 2;
      -webkit-column-gap : 30px;
      -moz-column-rule-color:  #ccc;
      -moz-column-rule-style:  solid;
      -moz-column-rule-width:  1px;
      -webkit-column-rule-color:  #ccc;
      -webkit-column-rule-style: solid ;
      -webkit-column-rule-width:  1px;

font-style: normal !important; }

.project_header { padding-top: 40px; }

.reference { border-top: 1px solid #ccc; margin-top: 30px; padding-top: 30px; }

.figure2 { width: 800px; }

/* ----Calendar---- */


  1. calendar { 
margin-left:auto;
margin-right:auto;
margin-top: 50px;
margin-bottom: 20px;
font-size: 50px;
font-family: 'Black Ops One', cursive;

}

  1. calendar_head { 
margin-left:auto;
margin-right:auto;
margin-top: 30px;
margin-bottom: 5px;
font-size: 50px;
font-family: 'Black Ops One', cursive;
text-align: center;
color: #d31906;

}

  1. calendar_days { 
margin-left:auto;
margin-right:auto;

}

  1. calendar_days td { 
text-align: center;
width: 180px;
font-family: 'Black Ops One', cursive;

}

  1. calendar_days td a { 
text-decoration: none;
color: #d31906;

}

  1. calendar a { 
text-decoration: none;
color: black;

}

  1. calendar tr #calendar_week { 
width: 300px;
text-align: center;

}

  1. calendar_work table

{ font-family: 'Black Ops One', cursive; border-collapse:collapse; }

  1. calendar_work td, th

{ font-size:0.8em; border:1px solid #5d6a52; padding:3px 7px 2px 7px; }

  1. calendar_work th

{ font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color: #dee1dc; color:#5d6a52; }

  1. calendar_work td{

font-family: "Times New Roman", Times, serif; }

  1. calendar_work tr:nth-of-type(odd) {

background-color:#dee1dc; }

/* ----Back-to-top button---- */

.back-to-top { 

   width: 90px;
   height: 105px;
   position: fixed;
   display: none;
   text-decoration: none;
   color: #000000;
   background-color: rgba(0, 0, 0, 0.3);
   cursor: default;
   bottom: 100px; /* placement from bot */
   right: 100px;
   z-index: 20;
   padding: 1em;
   
    /* rounded corners */

-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }

.back-to-top:hover { 

   background-color: rgba(0, 0, 0, 0.5);

}

.back-to-top a { position: relative; left: 8px; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; color: #bbb;

}

.back-to-top img{

width: 90px; height: 90px; 

       margin-bottom: 7px;

}

/* ---- Intro ----- */

.view { 

   width: 1090px;
   height: 3105px;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   position: absolute;
   top: 50px;
   z-index: 950;

   border-bottom-right-radius: 25px;
   border-bottom-left-radius: 25px;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;

   margin-left:-20px;

   background-color: rgba(0, 0, 0, 0.8); 
   opacity: 1;
   -moz-transition-property: opacity;             
   -moz-transition-duration: 2s;
   -webkit-transition-property: opacity;
   -webkit-transition-duration: 2s;
   transition-property: opacity;
   transition-duration: 2s;

}

.view img { 

   margin-left: auto;
   margin-right: auto;
   display: block;

} .view ul { 

   text-align: center;
   position: relative;
   padding: 10px;

}

.view .nav { padding: 14px 10px; font-size: 40px; color: #5d6a52; //font-family: 'Black Ops One', cursive; font-family: 'Play', sans-serif; font-weight: bold; -webkit-text-stroke: 1px white; -moz-text-stroke: 1px white; }

/* ----- Sponsor div ----- */

  1. custom_footer {

width: 100%; border-top: 30px solid #000; 

       background-color: #fff;
       bottom: 0;
       min-width: 1100px;

}

.sponsorTable{

width: 100%; }

  1. custom_footer .sponsors{

width: 150px; max-height: 150px;

}

  1. custom_footer .centerThis{

opacity:0.6; text-align: center; width:10%; padding: 20px; }

  1. custom_footer .centerThis:hover{

opacity:1;

}

  1. secret { 
   position: absolute;
   top: 20%;
   left: 50%;
   width: 190px;
   height: 190px;
   margin:-60px 0 0 -60px;
   -webkit-animation:spin 4s linear infinite;
   -moz-animation:spin 4s linear infinite;
   animation:spin 4s linear infinite;

}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


/* ---- Dynamic font size for navbar ---- */


@media (max-width: 1490px) { 

   #menu ul li a { font-size: 75%; }

}

@media (min-width: 1500px) { 

   #menu ul li a { font-size: 100%; }

}


@media (max-width: 1490px) { 

   #menu_right ul li a { font-size: 75%; }

}


@media (min-width: 1500px) { 

   #menu_right ul li a { font-size: 100%; }

}

  1. cover {

position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; background-color: #000000; opacity: .7; filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.7); }

Retrieved from "http://2014.igem.org/Team:Uppsala/stylesheet.css"