Team:Uppsala/stylesheet.css

From 2014.igem.org

(Difference between revisions)
Line 320: Line 320:
     transition-property: opacity;
     transition-property: opacity;
     transition-duration: 2s;
     transition-duration: 2s;
 +
}
 +
 +
.view .nav{
 +
margin-bottom: 30px;
}
}

Revision as of 12:59, 4 October 2014

  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-image: url('https://static.igem.org/mediawiki/2014/0/01/Uppsala_igem2014_Headeeer.png');*/ background-size: 100% 100%; background-repeat: no-repeat;

/*

       border-top: 2px solid #a1a1a1;
       border-left: 2px solid #a1a1a1;
       border-right: 2px solid #a1a1a1;

border-top: 2px solid #d31906;

       border-left: 2px solid #d31906;
       border-right: 2px solid #d31906;
  • /

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 #a1a1a1;
       border-left: 2px solid #a1a1a1;
       border-right: 2px solid #a1a1a1;

border-bottom: 2px solid #d31906;

       border-left: 2px solid #d31906;
       border-right: 2px solid #d31906;
  • /

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;
       margin-top:15px;
       
       

}

/* ---- Assembly plan ---- */

.schedule { width: 50% }

/* ---- 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 overview---- */

  1. background {

width: 300px; float: left; background-color: c9c9c9;

}


/* ----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. test {
color: red;

}

  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_work {
margin-left:auto;
margin-right:auto;
margin-top: 5px;
margin-bottom: 5px;
padding:20px;
font-size: 20px;
text-align: center;
color: green; 

}

  1. calendar_work td {
text-align: center;
width: 180px;
margin-top: 10px;
/*padding: 10px;*/

}

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

}

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

}

  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;

} /* ----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;
   
   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;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   position: absolute;
   top: 50px;
   z-index: 950;
   padding-bottom: 50px;
   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 .nav{ margin-bottom: 30px; }

.view img {

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

} .view ul {

   text-align: center;
   position: relative;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0
   opacity: 0;

} .view a.info {

   display: inline-block;
   text-decoration: none;
   padding: 10px 20px;
   background: #000;
   color: #5d6a52;
   font-family:  "Times New Roman", Times, serif;
   font-size: 32px;
   font-variant: small-caps;
   font-weight: bold;
   box-shadow: 0 0 1px #000
   opacity: 0;
      -webkit-text-stroke: 1px white;
      -moz-text-stroke: 1px white;

} .view a.info:hover {

   box-shadow: 0 0 5px #000

}

.start {

   width: 1000px;
   height: 40px;
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 16px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
   z-index: 1000;
   cursor: default;
   }

.nav li{ display: inline; }

.nav a { padding: 14px 10px; font-size: 32px; color: #5d6a52; font-variant: small-caps; font-family: "Times New Roman", Times, 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 #818181; height: 250px;

       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:400px; 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); } }


/* ---- Java Launch --- */

.launchlist {

   text-transform: uppercase;
   text-align: center;
   position: relative;
   font-size: 27px;
   padding: 10px;
   margin: 20px 0 0 0
   opacity: 0;

}

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

@media (max-width: 1270px) {

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

}

@media (min-width: 1280px) {

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

}

@media (max-width: 1270px) {

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

}

@media (min-width: 1280px) {

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

}