Team:Uppsala/stylesheet.css

From 2014.igem.org

(Difference between revisions)
Line 529: Line 529:
width:900%;
width:900%;
}
}
 +
 +
.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: 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;
 +
*/
 +
}
 +
 +
.back-to-top:hover {   
 +
    background-color: rgba(0, 0, 0, 0.5);
 +
}
 +
 +
.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;
 +
}

Revision as of 14:07, 15 July 2014

  1. master {

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

  1. main_frame_upper {

width: 100%; 

       background-color: #fff;

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

      */

}

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

width: 100%; }

  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: 0;

}

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

}

  1. tabs a { 
   box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
   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;

}

  1. tabs a:hover { 
   background: #c93434;
   background: linear-gradient(220deg, transparent 10px, #c93434 10px);

}

  1. tabs a:focus { 
   outline: 0;

}

  1. tabs #current a { 
   background: #fff;
   background: linear-gradient(220deg, transparent 10px, #fff 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; border: 1px solid; }

.logo {

width: 300px; }

.pic { 

       width: 224px;

}


/* CSS FOR MENU_2 BEGINS */

  1. 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; border: 1px solid d31906; 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 */

  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 { 

   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: 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; */ }

.back-to-top:hover { 

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

}

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

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