Template:CSS/Team:Glasgow/Draft1

From 2014.igem.org

(Difference between revisions)
 
(216 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<title>Bubble Test Page</title>
-
<style type="text/css"
+
<head><style type="text/css">
-
#title {font-size:60px}
+
/* Removing iGEM header stuff */
 +
 
 +
body, html, #globalWrapper, #content {
 +
background: transparent;
 +
margin: 0;
 +
padding: 0;
 +
border: 0 none transparent;
 +
font-size: 1em;
 +
width: auto;
 +
border-top: 1px solid transparent;
 +
margin-top: -1px;
 +
}
 +
 
 +
body {
 +
width: auto;
 +
margin: 0 auto;
 +
position: relative;
 +
}
 +
 
 +
#top-section {
 +
border: 0 none transparent;
 +
margin: 0;
 +
padding: 0;
 +
width: auto;
 +
height: 1.5em;
 +
margin-bottom: -1.5em;
 +
}
 +
 
 +
 
 +
#top-section:hover #menubar * {
 +
color: blue !important;
 +
}
 +
 
 +
#top-section:hover #menubar.left-menu {
 +
background: rgba(255, 255, 255, 0.75) !important;
 +
}
 +
#search-controls{
 +
        height: 0px;
 +
        display: none !important;
 +
}
 +
 
 +
#content>p:first-child {
 +
        margin: 0;
 +
        height: 0;
 +
        display: none;
 +
}
 +
 
 +
.toc {
 +
        display: none;
 +
}
 +
 
 +
.editsection {
 +
        display: none;
 +
}
 +
 
 +
 
 +
#contentSub, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {display: none;}
 +
 
 +
 
 +
/*** To here ***/
 +
 
 +
 
 +
 
 +
 +
.menuitems {border-right: 2px solid black;
 +
padding:5px;
 +
background-color:transparent;}
 +
 +
 +
.menulinks:link {text-decoration:none;
 +
color:Black;}
 +
.menulinks:visited {text-decoration:none;
 +
color:Black}
 +
.menulinks:hover {text-decoration:none;
 +
color:red;}
 +
 
 +
.forwardlink {position:absolute;
 +
              bottom:1%;
 +
                right:2%;
 +
                }
 +
.forwardlink img {width:100px;}
 +
 
 +
.backlink {position:absolute;
 +
              bottom:1%;
 +
                left:2%;
 +
                width:30px;}
 +
.backlink img {width:100px;}
 +
 +
 
 +
body  {background:url("https://static.igem.org/mediawiki/2014/thumb/4/4e/GU_gradientbackground.png/800px-GU_gradientbackground.png") no-repeat center center fixed;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;;
 +
}
 +
 
 +
#maincontent {background:#F5FFFA;
 +
              border: 3px solid #000000;
 +
   
 +
   
 +
  position:relative;
 +
  top:30px;
 +
  width:75%;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  padding:20px;
 +
  }
 +
 
 +
h2 {color:black;
 +
    text-decoration:none;
 +
    border-bottom:none;}
 +
 
 +
 
 +
/****** Back to top button *******/
 +
 
 +
#back-top {
 +
position: fixed;
 +
bottom: 0px;
 +
        right:10px;
 +
        z-index:50;
 +
}
 +
#back-top a {
 +
width: 60px;
 +
display: block;
 +
text-align: center;
 +
font: 11px/100% Arial, Helvetica, sans-serif;
 +
text-transform: uppercase;
 +
text-decoration: none;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
}
 +
 
 +
/* arrow icon (span tag) */
 +
#back-top span {
 +
width:60px;
 +
height:93px;
 +
display: block;
 +
background: url(https://static.igem.org/mediawiki/2014/1/10/GU_On-off-switch_top.png) no-repeat center center;
 +
background-size:contain;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
}
 +
 
 +
#back-top a:active span {background: url(https://static.igem.org/mediawiki/2014/6/60/GU_On-off-switch_blank_off_with_top.png) no-repeat center center;
 +
background-size:contain;}
 +
 
 +
/****** End of Back to top Button *******/
 +
 
 +
 
 +
 
 +
 
 +
/******** Start of menubar dropdown ********/
 +
 
 +
 
 +
 
 +
 
 +
#menu{
 +
    padding: 0;
 +
    margin: 0 !important;
 +
 +
 +
 +
      background-color:#000000
 +
    background-image: -webkit-linear-gradient(#CC0033,#990099);
 +
    background-image: -moz-linear-gradient(#CC0033,#990099);
 +
    background-image: -ms-linear-gradient(#CC0033,#990099);
 +
    background-image: -o-linear-gradient(#CC0033,#990099); 
 +
    background-image: linear-gradient(#CC0033,#990099);
 +
    background-image: linear-gradient(#CC0033, #990099 140%);
 +
    border-top: 3px solid #000037;
 +
    box-shadow: 0 4px 4px #000000;
 +
 +
 +
 +
 +
 +
 
 +
    -webkit-hyphens: none;
 +
    -moz-hyphens: none;
 +
    -ms-hyphens: none;
 +
    -o-hyphens: none;
 +
    hyphens: none;
 +
    z-index: 50;
 +
}
 +
 
 +
#menu { display:block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
position:absolute;
 +
top:220px;
 +
left:12%;  <!-- Positioning of Menubar -->
 +
background-color:transparent;
 +
font-size:18px;
 +
font-family:Arial, Helvetica, Sans-serif;
 +
text-align: center;
 +
}
 +
 
 +
 
 +
.menuitems {border-right: 2px solid black;
 +
line-height:2ch;
 +
padding:0px;
 +
background-color:transparent;
 +
                       
 +
}
 +
 
 +
 
 +
.menulinks:link {text-decoration:none;
 +
color:black;}
 +
.menulinks:visited {text-decoration:none;
 +
color:black}
 +
.menulinks:hover {text-decoration:none;}
 +
 +
 
 +
 
 +
#menu ul {position:absolute;
 +
max-height:0em;  <!-- Needs to be here for some reason!? (To make dds hidden) -->
 +
position:absolute;
 +
                        left:-25px;
 +
top: 0em;
 +
            top: 43px; <!-- positioning of dd list/box, from top of menu li -->
 +
margin:0 !important;
 +
padding:0;
 +
overflow:hidden;
 +
transition: 0.5s max-height 0.3s;
 +
background-color:transparent;
 +
    background-image: linear-gradient(rgba(50, 50, 150, 0.75), rgba(50, 50, 150, 0.75));  <!--Darkish blue -->
 +
test-align:center;<!-- Maybe remove previous positioning for this -->
 +
font-size:0;
 +
                       
 +
} 
 +
 
 +
 
 +
 +
#menu li { 
 +
    display:inline-block; 
 +
    list-style: none; /* for IE7 */
 +
    margin: 0 0 0 0;
 +
    padding-bottom: 0.3%;
 +
height:100%; <!-- Trying to get lines to be full height of list items -->
 +
} 
 +
 +
#menu > li {
 +
    width:100px;  <!-- Width of each li in menu bar -->
 +
}
 +
 +
#menu > li, #menu > li li { 
 +
    position: relative; 
 +
    display:inline-block; 
 +
    padding: auto; 
 +
    background-color: transparent; 
 +
} 
 +
 
 +
#menu > li li {
 +
    width: 100px;
 +
    padding: 3% 0; <!-- Padding of dd list: top sides -->
 +
    <!--position used earlier on dark blue backdrop -->
 +
}
 +
 
 +
 +
#menu a { 
 +
    display:inline-block; 
 +
    margin: auto;
 +
    color: #FFFFFF;  <!-- Font colour of menubar -->
 +
    text-decoration:none;
 +
    width: 100%;
 +
} 
 +
 
 +
<!-- For images in menu -->
 +
#menu a span{
 +
    display: block;
 +
    margin: auto;
 +
    width: 80%;
 +
}
 +
 +
#menu > li li { background: transparent none; }
 +
 +
#menu > li li a { color: #FFFFFF; } <!-- Colour of text in dropdown box -->
 +
 
 +
#menu > li li:hover a { color: #FFFFFF; <!-- Colour of text in dropdown box hover-->
 +
} 
 +
 +
#menu > li li:hover {
 +
    background:transparent; <!-- Background of dd box -->
 +
} 
 +
 +
#menu > li:first-child { 
 +
    border-left: 2px solid #000000;
 +
} 
 +
 +
#menu > li li:first-child {
 +
    border-bottom: 1px solid #000000; <!-- border of dropdown lists -->
 +
}
 +
 +
#menu > li li + li{
 +
    border-top: 1px solid #000000;
 +
    border-bottom: 1px solid #000000; <!-- Border for DD items -->
 +
}
 +
 +
#menu > li li:last-child {
 +
    border-top: 1px solid #000000;
 +
border-bottom: 2px solid #000000; 
 +
}
 +
 
 +
 
 +
#menu > li:hover { 
 +
    background-color: rgba(50, 50, 150, 0.5);  <!-- Hover over menu bg color -->
 +
} 
 +
 +
#menu > li:hover ul { 
 +
    max-height:20em;  <!-- max length of color box -->
 +
}
 +
 
 +
 
 +
.ddli{font-size:90%;}
 +
 
 +
#ddmenu{display:block;
 +
        margin-right:auto;
 +
        margin-left:auto;
 +
}
 +
 +
 +
 +
/******** End of Dropdown *********/
 +
 
 +
/******** Header Styling *********/
 +
 
 +
.pageheading {text-align:center;
 +
             
 +
              font-family:"Calibri";
 +
              color:#000066;
 +
                font-size:180%;
 +
                font-weight:bold;}
 +
 
 +
.subheading {text-align:left;
 +
              text-decoration:none;
 +
              font-family:"Calibri";
 +
              color:#0000CC;}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#sponsorsbar {display:block;
 +
              margin-left:auto;
 +
              margin-right:auto;
 +
              margin-bottom:0;
 +
              width:86%;
 +
              height:150px;
 +
                }
 +
 
 +
#minibar.center {margin-right:auto;
 +
              margin-left:auto;}
 +
 
 +
#minibar {background:none;
 +
          font-size:20px;
 +
          text-align:center;
 +
          color:#000000;
 +
          width:20%;}
 +
 
 +
.minibarcell {padding-right:2px;
 +
              padding-left:2px;}
 +
 
 +
.minibarlink:link {text-decoration:none;
 +
                  color:#000000;}
 +
.minibarlink:visited {text-decoration:none;
 +
                  color:#000033;}
 +
.minibarlink:hover {text-decoration:none;
 +
                    color:#3300CC;}
 +
.minibarlink:active {text-decoration:none;}
 +
 
 +
.bordercell {border-right: 2px solid black;}
 +
 
 +
ul {list-style-type:circle;}
 +
 
 +
p {font-family:"Calibri","Arial";
 +
  font-size:110%;
 +
 
 +
}
 +
 
 +
h2 {font-family:"Calibri","Arial";}
 +
 
 +
ul {font-family:"Calibri","Arial";
 +
    font-size:110%}
 +
 
 +
ol {font-family:"Calibri","Arial";
 +
    font-size:110%;}
 +
 
 +
 
 +
.figuretext {text-align:center;
 +
            font-style:italic;
 +
            font-size:small;}
 +
 
 +
.editlink {color:#CCFFCC;
 +
          font-size:small;
 +
          text-align:left;}
 +
 
 +
 
 +
#header_pics {width:1250px;
 +
              max-width:100%;
 +
              display:block;
 +
            margin-right:auto;
 +
            margin-left:auto;
 +
            height:70px;
 +
           
 +
            }
 +
 
 +
#headertable {background-color:transparent;
 +
             
 +
              max-width:100%;
 +
              display:block;
 +
              margin-left:auto;
 +
              margin-right:auto;
 +
              height:70px;}
 +
 
 +
#logos {padding-top:5px;
 +
        padding-right:20px;
 +
        padding-bottom:5px;}
 +
 
 +
#GUlogo {width:260px;
 +
display:block;
 +
                margin-right:auto;
 +
                margin-left:auto;
 +
                margin-bottom:20px;
 +
       
 +
 
 +
}
 +
 +
#PowerofEcoli{
 +
width:820px;
 +
}
 +
 
 +
 
 +
.rightlinks {position:absolute;
 +
left:80%;
 +
top:80px;
 +
}
 +
 +
#igemlogo {width:100px;
 +
          display:block;
 +
                margin-right:auto;
 +
                margin-left:auto;
 +
                       
 +
}
 +
 +
#twitlink {
 +
}
 +
 
 +
#fblink {
 +
       
 +
}
 +
.sociallink {width:25px;
 +
            margin-top:60px;
 +
            }
 +
 
 +
 
 +
</style></head>
 +
 
 +
 
 +
<body>
 +
<div id="header_pics">
 +
<table id="headertable">
 +
<tr>
 +
<td class="logos"><img id="PowerofEcoli" src="https://static.igem.org/mediawiki/2014/f/f3/GU_thepowerofecoli.png"/></td>
 +
<td class="logos"><a  href="http://www.gla.ac.uk/" target="_window" id="glasgowlogo"><img id="GUlogo" src="https://static.igem.org/mediawiki/2014/thumb/d/dd/GU_Glasgow_igem_white.png/800px-GU_Glasgow_igem_white.png"/></a></td>
 +
<td class="logos"><a  href="https://2014.igem.org/Main_Page" target="_blank" > <img id="igemlogo" src="https://static.igem.org/mediawiki/2014/thumb/f/f8/GU_Igem_logo_white.png/784px-GU_Igem_logo_white.png"/></a></td>
 +
<td><a href="http://twitter.com/GlasgowiGEM2014" target="_blank" id="twitlink"> <img class="sociallink" src="https://static.igem.org/mediawiki/igem.org/3/3d/Twitterlogo.png"></a></td>
 +
<td><a href="http://www.facebook.com/Glasgowigem2014" target="_blank" id="fblink" style=" padding-bottom: =0px;">
 +
                    <img class="sociallink" src="https://static.igem.org/mediawiki/igem.org/6/63/Fblogo.png">
 +
                </a></td>
 +
</tr>
 +
</table>
 +
 
 +
 
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
<!-- menubar (left)
 +
 
 +
<div id="menubar" class='left-menu noprint'>
 +
  <ul>
 +
                  <li
 +
                class='selected'       ><a href="/Requirements">Page              </a></li>
 +
              <li
 +
                class='new'       ><a href="/wiki/index.php?title=Talk:Requirements&amp;action=edit&amp;redlink=1">Discussion              </a></li>
 +
              <li
 +
                    ><a href="/wiki/index.php?title=Requirements&amp;action=edit">Edit              </a></li>
 +
              <li
 +
                    ><a href="/wiki/index.php?title=Requirements&amp;action=history">History              </a></li>
 +
              <li
 +
                    ><a href="/Special:MovePage/Requirements">Move              </a></li>
 +
              <li
 +
                    ><a href="/wiki/index.php?title=Requirements&amp;action=watch">Watch              </a></li>
 +
  </ul>
 +
</div>  end menubar (left) -->
 +
 
 +
 
 +
<div id="BelowHeader">
 +
 
 +
 
 +
<div id="ddmenu">
 +
 
 +
<ul id="menu">
 +
    <li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow" class="menulinks"> <br> Home <br> </a> </li><!--
 +
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Team" class="menulinks"> <br> Team </a>
 +
 
 +
<ul class="ddli">
 +
      <li><a href="https://2014.igem.org/Team:Glasgow/Team#Students">Students</a></li>
 +
      <li><a href="https://2014.igem.org/Team:Glasgow/Team#Supervisors">Supervisors</a></li>
 +
      <li><a href="https://2014.igem.org/Team:Glasgow/Team#Superhero">Superhero</a></li>
 +
 
 +
      </ul>
 +
 
 +
</li><!--
 +
--><li class="menuitems"><a href="https://igem.org/Team.cgi?year=2014&team_name=Glasgow" target="_blank" class="menulinks"> Team <br> Profile </a></li><!--
 +
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Project" class="menulinks"> <br> Project</a>
 +
 
 +
<ul class="ddli">
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:Glasgow/Project/Switch">The Switch</a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:Glasgow/Project/Measurements/Gas_Vesicles">The Gas Vesicle Proteins</a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:Glasgow/Project/Mobility_Proteins">The Motility Proteins</a></li>
 +
<li><a href="https://2014.igem.org/Team:Glasgow/Modeling_Intro">Dry Lab Modelling</a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:Glasgow/Project/Measurements">Measurements</a></li>
 +
</ul>
 +
 
 +
 
 +
</li><!--
 +
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Parts" class="menulinks"> <br> BioBricks</a></li><!--
 +
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Modeling_Intro" class="menulinks"> <br> Modelling</a>
 +
 
 +
<ul class="ddli">
 +
      <li><a href="https://2014.igem.org/wiki/index.php?title=Team:Glasgow/Modeling">Random Walk</a></li>
 +
      <li><a href="https://2014.igem.org/Team:Glasgow/Modeling_Part2_align%3D">Bacteria and Buoyancy</a></li>
 +
 
 +
      </ul>
 +
 
 +
 
 +
 
 +
</li><!--
 +
 +
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Notebook" class="menulinks"><br>Notebook</a>
 +
 +
<ul class="ddli">
 +
      <li><a href="https://2014.igem.org/Team:Glasgow/Weekly_Report">Weekly Report</a></li>
 +
      <li><a href="https://2014.igem.org/Team:Glasgow/Notebook/Protocols">Protocols</a></li>
 +
 
 +
      </ul>
 +
 +
 +
 +
</li><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Safety" class="menulinks"> <br> Safety </a>
 +
</li><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Human_Practices" class="menulinks">Policy and Practice</a>
 +
 
 +
<ul class="ddli">
 +
      <li><a href="https://2014.igem.org/Team:Glasgow/Human_Practices#Biodesalination" style="font-size:88%;">Biodesalination</a></li>
 +
      <li><a href="https://2014.igem.org/Team:Glasgow/Human_Practices#outreach">Outreach</a></li>
 +
      <li><a href="https://2014.igem.org/wiki/index.php?title=Team:Glasgow/Wilkins">Artwork - Wilkins</a></li>
 +
 
 +
      </ul>
 +
 
 +
 
 +
</li><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Attributions" class="menulinks"> <br> Attributions </a></li>
 +
 +
 +
 +
</ul>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</div>
 +
 
 +
<br><br><br><br><br><br> <!-- Breaks to get main content down to correct position -->
 +
 
 +
 
 +
 
 +
 
 +
<p id="back-top">
 +
<a href="#top"><span></span></a>
 +
</p>
 +
 
 +
 
 +
<br>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</body>
-
</style>
 
-
</head>
 
</html>
</html>

Latest revision as of 01:43, 18 October 2014

Bubble Test Page








Retrieved from "http://2014.igem.org/Template:CSS/Team:Glasgow/Draft1"