Team:Uppsala/stylesheet.css

From 2014.igem.org

Revision as of 13:52, 16 July 2014 by Tjocko (Talk | contribs)
  1. master {

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

  1. main_frame_upper {

width: 100%;

       background-color: #fff;

background-image: url('https://static.igem.org/mediawiki/2014/0/01/Uppsala_igem2014_Headeeer.png'); background-size: 100% 100%; background-repeat: no-repeat;

}

  1. header {

width: 1130px;

       height: 300px;

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

}

  1. left_content_header {

float: left; width: 310px;

       padding-bottom: 20px;

}

  1. right_content_header {
       margin-top:20px;

float: right; padding-bottom: 20px;

}

  1. main_frame_lower {

border: none;

        width: 99.5%;
        height: 99.5%;

}

  1. main_content {
	border: 2px solid #a1a1a1;

/*background-color: #dddddd;*/

       background-color: #fff;

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

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

font-size: 18px; font-weight:bold; }

  1. tracking_system {
       clear: both;
       width: 100%;
       height: 50px; /* IMPORTANT NOTE!! This needs to be removed or replaced, just a placeholder! */

}

  1. tabs {
 overflow: auto;
 width: 100%;
 list-style: none;
 margin: 0;
 padding: 2px;

}

  1. tabs li {
   margin: 0;
   padding: 0;
   float: left;

}

  1. tabs a {
   box-shadow: -2px 0 0 rgba(0, 0, 0, .1); 
   background: #fff;
   background: linear-gradient(220deg, transparent 7px, #9cb289 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;

}

  1. tabs a:focus {
   outline: 0;

}

  1. tabs #current a {
   background: #fff;
   background: linear-gradient(220deg, transparent 7px, #7C8E6D 10px);
   text-shadow: none;    
   color: #333;

}


/* Remove the rule below if you want the content to be "organic" */

  1. section_selector div {
   height: 220px; 

}

  1. tab1 {

width: 100%; min-height: 300px; }

.logo {

width: 300px; }

.pic {

       width: 224px;

}


/* HÄR BÄRJAR MENU KODEN NIKLAS!!!!!!!!!!!!11111!1!!!!!!11 :D */

  1. menu_container {

clear: both; width: 100%;

}

  1. clear {
                      /* Vettefan varför man behöver en tom div som bara clearar, allting fuckade upp utan denna */

clear: both; }

  1. middle_logo {

width: 20%; height: 0px; border-top: 54px solid black; float: left; }

.home_logo { position: relative; top: -150px; z-index: 2; width: 100%;

}

  1. menu {
 background: #000;
 height: 46px;
 text-align: center;
 font-family: "Times New Roman", Times, serif;
 font-size: 16px;
 font-weight:bold;
 float: left;
 width: 40%;

}

  1. menu ul {
 margin:0;padding:0;
 position:absolute;
 width:40%;

}

  1. menu ul a {
 text-decoration: none;

}

  1. menu ul li {
 list-style: none;
 float: left;
 position: relative;
 width: calc(225%/9);

}

  1. menu > ul > li {
 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;


}

  1. menu > ul > li:hover {
 list-style: none;
 float: left;
 position: relative;
 width: calc(225%/9);
 border-top: 5px solid #d40400;
 border-bottom: 5px solid #d40400;
 background-color: #000;
 

}

  1. menu ul li a:hover {

color: #d40400; background-color: #000; }

  1. menu ul li a {
 background: #000;
 color: #fff;
 
 display: block;
 padding-top: 10px;
 padding-bottom: 10px;
 width:100%;

}

  1. menu ul ul {
 padding:0;
 overflow: hidden;
 width: 100%;

}

  1. menu ul ul li:first-child {
 margin-top: 5px;
 float: none;
 display: none;
 border-bottom: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;'
 width: 100%;  

}


  1. menu ul ul li {
 float: none;
 display: none;
 border-bottom: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;  
 width: 100%;

}

  1. menu ul ul li a {
 background: #f0f0f0;
 color: #333;
 border:none;
 width: calc(100%/9);

}

  1. menu ul ul li a:hover {
 background: #ccc;

}

  1. menu ul li a:hover,
  2. menu ul li:hover ul li {
 display:block !important;

}

  1. menu ul li ul li{

width:900%; }

  1. 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%;

}

  1. menu_right ul {
 margin:0;padding:0;
 position:absolute;
 width:40%;


}

  1. menu_right ul a {
 text-decoration: none;

}

  1. menu_right ul li {
 list-style: none;
 float: left;
 position: relative;
 width: calc(225%/9);

}

  1. menu_right > ul > li {
 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;


}

  1. menu_right > ul > li:hover {
 list-style: none;
 float: left;
 position: relative;
 width: calc(225%/9);
 border-top: 5px solid #d40400;
 border-bottom: 5px solid #d40400;
 background-color: #000;
 

}

  1. menu_right ul li a:hover {

color: #d40400; background-color: #000; }

  1. menu_right ul li a {
 background: #000;
 color: #fff;
 
 display: block;
 padding-top: 10px;
 padding-bottom: 10px;
 width:100%;

}

  1. menu_right ul ul {
 padding:0;
 overflow: hidden;
 width: 100%;

}

  1. menu_right ul ul li:first-child {
 margin-top: 5px;
 float: none;
 display: none;
 border-bottom: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;'
 width: 100%; 

}


  1. menu_right ul ul li {
 float: none;
 display: none;
 border-bottom: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;  
 width: 100%;

}

  1. menu_right ul ul li a {
 background: #f0f0f0;
 color: #333;
 border:none;
 width: calc(100%/9);

}

  1. menu_right ul ul li a:hover {
 background: #ccc;

}

  1. menu_right ul li a:hover,
  2. menu_right ul li:hover ul li {
 display:block !important;

}

  1. menu_right ul li ul li{

width:900%; }

/* ----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);
   
   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: 10px; /*text-align: center;*/ font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; /*text-decoration: none;*/ color: #bbb;

}

.back-to-top img{

width: 90px; height: 90px; }