Team:Uppsala/stylesheet.css

From 2014.igem.org

(Difference between revisions)

Revision as of 15:22, 15 July 2014

master {

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

main_frame_upper {

width: 100%;

       background-color: #fff;

/*url('https://static.igem.org/mediawiki/2014/7/7e/Uppsala_igem2014_Head.png');

*/

}

header {

width: 1130px;

       height: 300px;

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

}

left_content_header {

float: left; width: 310px;

       padding-bottom: 20px;

}

right_content_header {

       margin-top:20px;

float: right; padding-bottom: 20px;

}

main_frame_lower {

border: none;

        width: 99.5%;
        height: 99.5%;

}

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; }

tracking_system {

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

}

tabs {

 overflow: auto;
 width: 100%;
 list-style: none;
 margin: 0;
 padding: 0;

}

tabs li {

   margin: 0;
   padding: 0;
   float: left;

}

tabs a {

   box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
   background: #fff;
   background: linear-gradient(220deg, transparent 10px, #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;

}

tabs a:hover {

   background: #fff;
   background: linear-gradient(220deg, transparent 10px, #9cb289 10px);

}

tabs a:focus {

   outline: 0;

}

tabs #current a {

   background: #fff;
   background: linear-gradient(220deg, transparent 10px, #7C8E6D 10px);
   text-shadow: none;    
   color: #333;

}

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

section_selector div {

   height: 220px;

}

tab1 {

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

.logo {

width: 300px; }

.pic {

       width: 224px;

}

/* CSS FOR MENU_2 BEGINS (not used atm)*/

menu_2 {

margin-bottom: 20px; }

.button_first {

float: left; position: relative; width: 200px; height: 50px; color: #fff; display: block; text-decoration: none; margin-left: 0 auto; border-radius: 5px; background: #d1d2d4; text-align: center; margin: 20px 50px; padding-bottom: 20px 30px;

-webkit-tansition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s;

}

.button_first:hover, .button_middle:hover, .button_last:hover {

background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0))), #fff;

-moz-transition-duration: 0.8s;

     -webkit-transition-duration: 0.8s;
     -o-transition-duration: 0.8s;

}

.button_middle {

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; -moz-transition: all 0.1s; transition: all 0.1s;

}

.button_last {

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; -moz-transition: all 0.1s; transition: all 0.1s;

}

.button_text {

color: #fff; padding-top: 10px;

       text-decoration: none;

}

.button_text:hover {

color: #d31906; padding-top: 10px;

       text-decoration: none;

}

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

menu_container {

clear: both; width: 100%;

}

clear {

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

clear: both; }

middle_logo {

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

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

}

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

}

menu ul {

 margin:0;padding:0;
 position:absolute;
 width:40%;

}

menu ul a {

 text-decoration: none;

}

menu ul li {

 list-style: none;
 float: left;
 position: relative;
 width: calc(225%/9);

}

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;

}

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;

}

menu ul li a:hover {

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

menu ul li a {

 background: #000;
 color: #fff;
 
 display: block;
 padding-top: 10px;
 padding-bottom: 10px;
 width:100%;

}

menu ul ul {

 padding:0;
 overflow: hidden;
 width: 100%;

}

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

}

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

}

menu ul ul li a {

 background: #f0f0f0;
 color: #333;
 border:none;
 width: calc(100%/9);

}

menu ul ul li a:hover {

 background: #ccc;

}

menu ul li a:hover,
menu ul li:hover ul li {

 display:block !important;

}

menu ul li ul li{

width:900%; }

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

}

menu_right ul a {

 text-decoration: none;

}

menu_right ul li {

 list-style: none;
 float: left;
 position: relative;
 width: calc(225%/9);

}

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;

}

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;

}

menu_right ul li a:hover {

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

menu_right ul li a {

 background: #000;
 color: #fff;
 
 display: block;
 padding-top: 10px;
 padding-bottom: 10px;
 width:100%;

}

menu_right ul ul {

 padding:0;
 overflow: hidden;
 width: 100%;

}

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

}

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

}

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%; }