Template:Team:Uppsala/styles

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
-
 
-
h1{ border:none;
 
-
padding-top: 10px;
 
-
 
-
}
 
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
     display: none;
     display: none;
}
}
 +
h1{ border:none;
 +
}
 +
#top-section {
#top-section {
     border: none;
     border: none;
Line 24: Line 22:
     repeat-x;     
     repeat-x;     
}  
}  
 +
/* Everything behind this comment affects mediawiki code, #content, #top-section, #contentSub etc */
 +
 +
/* Affects the whole page */
*{
*{
margin: 0px;
margin: 0px;
Line 40: Line 41:
}
}
 +
/* Header code begins */
#header {
#header {
display: inline-block;
display: inline-block;
Line 66: Line 68:
}
}
 +
/* Header code ends and navbar code begins */
 +
#navbar {
#navbar {
background-image: url(https://static.igem.org/mediawiki/2013/e/e5/Menubar.png);
background-image: url(https://static.igem.org/mediawiki/2013/e/e5/Menubar.png);
Line 98: Line 102:
#list_type1{width: 110px;}#list_type2{width: 80px;}#list_type3{width: 120px;}#list_type4{width: 150px;}
#list_type1{width: 110px;}#list_type2{width: 80px;}#list_type3{width: 120px;}#list_type4{width: 150px;}
 +
 +
 +
/*Navbar dropdown list code begins */
#nav ul ul {
#nav ul ul {
Line 128: Line 135:
         #nav ul li a  
         #nav ul li a  
-
         {
+
         {    
-
           
+
            padding-left:2px;
-
                text-align:                     center;
+
display: block;
display: block;
}
}
Line 170: Line 176:
}
}
#nav ul ul li a {
#nav ul ul li a {
-
                         height: 100%;
+
                          
                         padding-top:    8%;
                         padding-top:    8%;
color: #fff;
color: #fff;
Line 181: Line 187:
}
}
 +
/*Dropdown in dropdown list code begins */
 +
#nav ul ul ul li {
 +
 +
width: 150px;
 +
height: 49px;
 +
position:relative;
 +
display: block;
 +
background-color: #22409a;
 +
                                        margin:0;
 +
 +
}
 +
 +
#nav ul ul ul {
 +
display: none;
 +
width: 150px;
 +
height: 50px;
 +
position:absolute;
 +
left: 150px;
 +
                                        top:0px;
 +
                                        margin:0;
 +
 +
}
 +
/*Dropdown list code ends */
 +
 +
h1 {
h1 {
         color:#0089d1;
         color:#0089d1;
Line 195: Line 226:
}
}
-
#team-div{
 
-
width: 100%;
 
-
margin-left:auto;
 
-
margin-right:auto;
 
-
/*border-top: 1px solid #22409a;*/
 
-
clear: both;
 
-
}
 
-
#team-pic{
+
/* Code for the size of content section */
-
position: center;
+
-
/*padding-top: 10px;*/
+
-
margin-left: 100px;
+
-
height:400px;
+
-
width:700px;
+
-
border:solid 3px;
+
-
margin-top:10px;
+
-
}
+
#main_frame {
 +
min-height: 1800px;
 +
width: 950px;
 +
margin: 20px auto;
 +
border: 1px solid ligth gray;
 +
border-radius:         15px;
 +
box-shadow:         0px 0px 30px rgba(110,110,110, .8);
 +
background:         white;
-
 
+
}
-
.team-text {
+
/* Content section size code ends */
-
float: right;
+
-
padding-left: 1px;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
#profile-div{
+
-
width: 100%;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
border-bottom: 1px solid #22409a;
+
-
margin-bottom: 10px;
+
-
margin-top: 20px;
+
-
clear: both;
+
-
}
+
-
 
+
-
#profile_pic{
+
-
position: left;
+
-
float:left;
+
-
height:270px;
+
-
width:250px;
+
-
/*border:solid 3px;*/
+
-
margin-top:20px;
+
-
}
+
-
 
+
-
 
+
-
#profile_pic_right{
+
-
position: right;
+
-
/* padding-top: px;*/
+
-
float:right;
+
-
height:270px;
+
-
width:250px;
+
-
/*border:solid 3px;*/
+
-
margin-top:20px;
+
-
 
+
-
}
+
-
 
+
-
#container_right{
+
-
height:270px;
+
-
padding-top:0px;
+
-
width:650px;
+
-
/*border:solid 3px;*/
+
-
float:right;
+
-
margin-top:15px;
+
-
}
+
-
/*section * {border: solid 1px;}*/
+
-
 
+
-
 
+
-
#container_left{
+
-
height:270px;
+
-
padding-top:0px;
+
-
width:650px;
+
-
/*border:solid 3px;*/
+
-
float:left;
+
-
margin-top:15px;
+
-
}
+
-
 
+
-
 
+
-
.profile-text {
+
-
float: right;
+
-
padding-left: 1px;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
#project-description {
+
-
width: 100%;
+
-
border-bottom: 1px solid #22409a;
+
-
padding-bottom: 10px;
+
-
        clear:both
+
-
 
+
-
}
+
-
 
+
-
 
+
-
#grid-matrix {
+
-
width: 64%;
+
-
float: left;
+
-
padding-top: 20px;
+
-
        padding-bottom: 20px;
+
-
}
+
-
 
+
-
#sidebar {
+
-
width: 34%;
+
-
float: right;
+
-
padding-top: 20px;
+
-
}
+
-
 
+
-
#twitter-feed {
+
-
padding-top:20px;
+
-
}
+
-
 
+
-
#grid-a {
+
-
width: 276.5px; float: left;
+
-
height: 276.5px; border: 3px solid;
+
-
background-image: url(https://static.igem.org/mediawiki/2013/1/1f/Background-new.png);
+
-
}
+
-
 
+
-
#grid-b {
+
-
width: 276.5px; float: right;
+
-
height: 276.5px; border: 3px solid;
+
-
        background-image: url(https://static.igem.org/mediawiki/2013/f/f1/Vision_%281%29.png);
+
-
}
+
-
 
+
-
#grid-c {
+
-
width: 276.5px; float: left;
+
-
height: 276.5px; border: 3px solid;
+
-
margin-top: 20px;
+
-
        background-image: url(https://static.igem.org/mediawiki/2013/a/a7/Metabolic_engineering.png);
+
-
 
+
-
}
+
-
 
+
-
#grid-d {
+
-
width: 276.5px; float: right;
+
-
height: 276.5px; border: 3px solid;
+
-
margin-top: 20px;
+
-
        background-image: url(https://static.igem.org/mediawiki/2013/6/68/Chassi2_%281%29.png);
+
-
}
+
-
 
+
-
#grid-e {
+
-
width: 276.5px; float: left;
+
-
height: 276.5px; border: 3px solid;
+
-
margin-top: 20px;
+
-
        background-image: url(https://static.igem.org/mediawiki/2013/5/50/Society_and_safety.png);
+
-
}
+
-
 
+
-
#grid-f {
+
-
width: 276.5px; float: right;
+
-
height: 276.5px; border: 3px solid;
+
-
margin-top: 20px;
+
-
        background-image: url(https://static.igem.org/mediawiki/2013/archive/6/64/20130816124745%21Achievements.png);
+
-
}
+
-
 
+
-
 
+
-
/* Hover effect on grid pictures begin */
+
-
 
+
-
#grid-a img {
+
-
  -webkit-transition: opacity 0.2s ease-in-out;
+
-
  -moz-transition: opacity 0.2s ease-in-out;
+
-
  -o-transition: opacity 0.2s ease-in-out;
+
-
  transition: opacity 0.2s ease-in-out;
+
-
}
+
-
 
+
-
#grid-a img.top:hover {
+
-
  opacity:0;
+
-
}
+
-
 
+
-
#grid-b img {
+
-
  -webkit-transition: opacity 0.2s ease-in-out;
+
-
  -moz-transition: opacity 0.2s ease-in-out;
+
-
  -o-transition: opacity 0.2s ease-in-out;
+
-
  transition: opacity 0.2s ease-in-out;
+
-
}
+
-
 
+
-
#grid-b img.top:hover {
+
-
  opacity:0;
+
-
}
+
-
 
+
-
#grid-c img {
+
-
  -webkit-transition: opacity 0.2s ease-in-out;
+
-
  -moz-transition: opacity 0.2s ease-in-out;
+
-
  -o-transition: opacity 0.2s ease-in-out;
+
-
  transition: opacity 0.2s ease-in-out;
+
-
}
+
-
 
+
-
#grid-c img.top:hover {
+
-
  opacity:0;
+
-
}
+
-
 
+
-
#grid-d img {
+
-
  -webkit-transition: opacity 0.2s ease-in-out;
+
-
  -moz-transition: opacity 0.2s ease-in-out;
+
-
  -o-transition: opacity 0.2s ease-in-out;
+
-
  transition: opacity 0.2s ease-in-out;
+
-
}
+
-
 
+
-
#grid-d img.top:hover {
+
-
  opacity:0;
+
-
}
+
-
 
+
-
#grid-e img {
+
-
  -webkit-transition: opacity 0.2s ease-in-out;
+
-
  -moz-transition: opacity 0.2s ease-in-out;
+
-
  -o-transition: opacity 0.2s ease-in-out;
+
-
  transition: opacity 0.2s ease-in-out;
+
-
}
+
-
 
+
-
#grid-e img.top:hover {
+
-
  opacity:0;
+
-
}
+
-
 
+
-
#grid-f img {
+
-
  -webkit-transition: opacity 0.2s ease-in-out;
+
-
  -moz-transition: opacity 0.2s ease-in-out;
+
-
  -o-transition: opacity 0.2s ease-in-out;
+
-
  transition: opacity 0.2s ease-in-out;
+
-
}
+
-
 
+
-
#grid-f img.top:hover {
+
-
  opacity:0;
+
-
}
+
-
 
+
-
/* Hover effect in grid pictures end
+
-
Grid pictures styling begin */
+
-
 
+
-
.top {
+
-
width: 277px;
+
-
}
+
-
 
+
-
.grid-pic {
+
-
width: 276.5px;
+
-
}
+
-
 
+
-
.grid-test {
+
-
width: 200px;
+
-
}
+
-
 
+
-
/* CSS parts starts here */
+
-
 
+
-
#sub_content_parts{
+
-
width:100%;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
border-bottom: 1px solid #22409a;
+
-
margin-bottom: 10px;
+
-
margin-top:10px;
+
-
clear:both;
+
-
position:relative;
+
-
}
+
-
 
+
-
#parts_title{
+
-
height:30px;
+
-
width:200px;
+
-
border:solid 3px;
+
-
overflow:auto;
+
-
}
+
-
 
+
-
#parts_text{
+
-
height:270px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#chassi{
+
-
height:270px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#carotenoid{
+
-
height:270px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#resveratrol{
+
-
height:270px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#saffron{
+
-
height:270px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#sweetner{
+
-
height:270px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#chromoprotein_collection{
+
-
height:270px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#parts_table{
+
-
height:270px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
/* CSS for parts ends here */
+
-
 
+
-
 
+
-
/* CSS for the button instructors & supervisors in team starts here */
+
-
 
+
-
#sub_content_advisor{
+
-
width:100%;
+
-
height:4000px;
+
-
border:solid 3px;
+
-
}
+
-
 
+
-
#advisor_title{
+
-
height:50px;
+
-
width:800px;
+
-
/*border:solid 3px;*/
+
-
overflow:auto;
+
-
float:left;
+
-
}
+
-
 
+
-
#advisor1{
+
-
height:270;
+
-
width:250;
+
-
float:left;
+
-
border:solid 3px;
+
-
clear:both;
+
-
margin-left:100px;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#advisor2{
+
-
height:270;
+
-
width:250;
+
-
float:right;
+
-
margin-top:10px;
+
-
border:solid 3px;
+
-
margin-right:100px;
+
-
}
+
-
+
-
#advisor_text1{
+
-
height:270;
+
-
width:350;
+
-
float:left;
+
-
border:solid 3px;
+
-
clear:both;
+
-
margin-left:50px;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#advisor_text2{
+
-
height:270;
+
-
width:350;
+
-
float:right;
+
-
border:solid 3px;
+
-
margin-right:50px;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#sub_content_instructor{
+
-
width:100%;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
border-bottom: 1px solid #22409a;
+
-
margin-bottom: 10px;
+
-
margin-top:10px;
+
-
clear:both;
+
-
position:relative;
+
-
/*border: yellow solid 3px;*/
+
-
}
+
-
 
+
-
#instructor_title{
+
-
height:50px;
+
-
width:800px;
+
-
border: solid 3px;
+
-
overflow:auto;
+
-
float:left;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#instructor_left{
+
-
height:270;
+
-
width:250;
+
-
float:left;
+
-
border:solid 3px;
+
-
clear:both;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#instructor_text_right{
+
-
height:270px;
+
-
width:645px;
+
-
float:right;
+
-
margin-top:10px;
+
-
border:solid 3px;
+
-
}
+
-
 
+
-
#instructor_right{
+
-
height:270;
+
-
width:250;
+
-
float:right;
+
-
border:solid 3px;
+
-
margin-top:20px;
+
-
}
+
-
 
+
-
#instructor_text_left{
+
-
height:270;
+
-
width:640;
+
-
float:left;
+
-
border:solid 3px;
+
-
margin-top:20px;
+
-
}
+
-
 
+
-
/* CSS for the button instructors & supervisors in team ends here */
+
-
 
+
-
/* CSS for attribution starts here*/
+
-
 
+
-
#attribution_title{
+
-
height:30px;
+
-
width:800px;
+
-
border:solid 3px;
+
-
float:left;
+
-
overflow:auto;
+
-
}
+
-
 
+
-
#sub_cont{
+
-
width:100%;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
border-bottom: 1px solid #22409a;
+
-
margin-bottom: 10px;
+
-
margin-top:10px;
+
-
clear:both;
+
-
position:relative;
+
-
/*border: yellow solid 3px;*/
+
-
}
+
-
 
+
-
#attribution1{
+
-
height:270px;
+
-
width:250px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:110px;
+
-
}
+
-
 
+
-
#attribution1_text{
+
-
height:270px;
+
-
width:640px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#attribution2{
+
-
height:270px;
+
-
width:250px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
#attribution2_text{
+
-
height:270px;
+
-
width:640px;
+
-
border:solid 3px;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
-
margin-top:10px;
+
-
}
+
-
 
+
-
/* CSS for attribution ends here*/
+

Revision as of 14:59, 22 August 2013