Difference between revisions of "Template:CSS UCL5"

(Undo revision 121565 by Martanap (talk))
 
(189 intermediate revisions by 5 users not shown)
Line 3: Line 3:
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
  
−
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway"/>
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway|League Script"/>
 +
<link href="http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
 +
<link href='https://fonts.googleapis.com/css?family=Mrs+Saint+Delafield' rel='stylesheet' type='text/css'>
 +
<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
 +
<link href='https://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
 +
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
 +
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
  
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Line 22: Line 28:
 
<style type="text/css">
 
<style type="text/css">
  
 +
/*references*/
 +
.content .tooltip {
 +
  background-color: #fff;
 +
border: 1px #22343C solid;
 +
  border-radius: 4px;
 +
  padding: 3px;
 +
  position: absolute;
 +
  width: 300px;
 +
  z-Index: 99999;
 +
  display: none;
 +
letter-spacing: 1px;
 +
line-height: 1;
 +
font-size: 11px;
 +
}
 +
 +
.tooltip a {color: #22343C;}
 +
.tooltip {color: #22343C;}
 +
 +
.content {
 +
  position: relative;
 +
}
 +
 +
.content {color: #d67166;}
 +
 +
/* end-of-references */
 +
 +
.bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/4/43/UCL_headercircle.png'); text-align: center; line-height: 2;
 +
    background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 300px; color: #22343C;}
 +
 +
.bigtitle a {color: #22343C; text-decoration: none;}
 +
 +
.title2 {font-family: Allura; font-size: 300%;line-height:1.5; color:grey;}
  
 +
.titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}
  
 +
.arrow {font-size: 50px;}
  
 +
/*HEADINGS*/
 
h5 {
 
h5 {
 
font-size:600%;
 
font-size:600%;
Line 35: Line 76:
 
}
 
}
  
 +
h3{padding:25px 40px 0px 0px;}
 +
 +
#text h2 {
 +
font-size: 30px !important;
 +
}
 +
 +
#wrapper {
 +
width: 80%;
 +
height: 80%;
 +
margin: 0 auto;
 +
position: relative;
 +
top: 80px;
 +
opacity: 1;
 +
}
 +
 +
#submenu {
 +
width: 100%;
 +
margin-top: 20px;
 +
text-align: center;
 +
position: relative;}
 +
 +
#text {
 +
margin-top: 50px;
 +
z-index: 9999;
 +
}
 +
#text h2 {
 +
font-size: 20px;
 +
text-decoration: none;
 +
border-bottom: 0px;
 +
display: block;
 +
background-color: #c97062;
 +
color: #fff;
 +
font-weight: bold;
 +
border-radius: 4px;
 +
padding: 10px;
 +
opacity: 0.5;
 +
}
  
 
a {
 
a {
Line 53: Line 131:
  
 
#bodyContent {
 
#bodyContent {
−
background-color:#F8FFFF;
+
width:100%;
 +
height:100%;
 +
box-sizing: border-box;
 +
background-color:transparent;
 
}
 
}
  
Line 85: Line 166:
 
}
 
}
  
−
html, #bodyContent, body, #container {
+
html, body, #container {
 
width:100%;
 
width:100%;
 
height:100%;
 
height:100%;
Line 97: Line 178:
 
/* blocks */
 
/* blocks */
  
−
#header {background-image: url('https://static.igem.org/mediawiki/2015/b/b0/UCL_University_College_London2.jpg'); margin: -5px;  
+
 
 +
#header {/*background-image: url('https://static.igem.org/mediawiki/2015/b/b0/UCL_University_College_London2.jpg');*/ margin: -5px;  
 
  text-align: center; width: 100%;
 
  text-align: center; width: 100%;
 
min-height: 640px;  
 
min-height: 640px;  
Line 110: Line 192:
 
bottom: 0;
 
bottom: 0;
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
−
  background-attachment: fixed;
 
  
−
   -webkit-background-size: cover;
+
   background-size: 130%;
−
  -moz-background-size: cover;
+
background-position: center -200px;
−
  -o-background-size: cover;
+
color:none;
−
  background-size: cover;
+
 
-webkit-box-sizing: border-box;
 
-webkit-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
box-sizing: border-box;
 
box-sizing: border-box;
  
−
vertical-align: middle; }  
+
vertical-align: middle;  
 +
}
  
 
@media (max-width:743px) {
 
@media (max-width:743px) {
Line 132: Line 213:
 
   
 
   
 
}
 
}
−
 
−
#intro1 {background-image: url('https://static.igem.org/mediawiki/2015/d/d9/UCL_bgtest2.png'); width: 100%;
 
−
height: 100%;
 
−
position: relative;
 
−
display: block;
 
−
margin: 0;
 
−
padding: 0;
 
−
  }
 
−
 
−
 
−
 
−
#intro2 { background: #F7F7F7;
 
−
width: 100%;
 
−
height: 100%;
 
−
position: relative;
 
−
display: block;
 
−
margin: 0;
 
−
padding: 0;
 
−
top: 0;
 
−
bottom: 0;
 
−
  box-sizing: border-box;
 
−
 
−
  -webkit-background-size: cover;
 
−
  -moz-background-size: cover;
 
−
  -o-background-size: cover;
 
−
  background-size: cover;
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
box-sizing: border-box;}
 
−
 
−
 
−
#intro3 { background: #F7F7F7;
 
−
width: 100%;
 
−
height: 100%;
 
−
position: relative;
 
−
display: block;
 
−
margin: 0;
 
−
padding: 0;
 
−
top: 0;
 
−
bottom: 0;
 
−
  box-sizing: border-box;
 
−
 
−
  -webkit-background-size: cover;
 
−
  -moz-background-size: cover;
 
−
  -o-background-size: cover;
 
−
  background-size: cover;
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
box-sizing: border-box;}
 
−
 
−
 
−
#abstract {background: #fff;
 
−
width: 100%;
 
−
height: 100%;
 
−
position: relative;
 
−
display: block;
 
−
margin: 0;
 
−
padding: 0;
 
−
top: 0;
 
−
bottom: 0;
 
−
  box-sizing: border-box;
 
−
 
−
  -webkit-background-size: cover;
 
−
  -moz-background-size: cover;
 
−
  -o-background-size: cover;
 
−
  background-size: cover;
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
box-sizing: border-box;}
 
−
 
  
 
/*twitter*/
 
/*twitter*/
Line 292: Line 303:
 
   margin-bottom: 10px;
 
   margin-bottom: 10px;
 
   margin-right: 5px;
 
   margin-right: 5px;
−
   margin-left: 5px;
+
   margin-left: 5px;F
 
   font-size: 14px;
 
   font-size: 14px;
 
   font-weight: normal;
 
   font-weight: normal;
Line 367: Line 378:
 
}
 
}
  
−
.back {text-align: center; top: 46%; position: relative;}
+
.back {text-align: center; top: 15%; position: relative;}
 +
.back img {padding-left: 10px; padding-right: 10px; padding-bottom: 7px;}
 
.back a {color: #2a2133; font-size: 16px; font-family: Raleway; letter-spacing: 1.5px; }
 
.back a {color: #2a2133; font-size: 16px; font-family: Raleway; letter-spacing: 1.5px; }
 
.back a:hover {color: #493c54;  -webkit-transition: color ease-in-out 400ms;}
 
.back a:hover {color: #493c54;  -webkit-transition: color ease-in-out 400ms;}
  
−
  .buttonc1:hover {text-decoration: none; background-color: #FE6C68;}
+
   
−
  .buttonc2:hover {text-decoration: none; background-color: #4EAEA8;}
+
−
    .buttonc3:hover {text-decoration: none; background-color: #1E6073}
+
−
    #buttonc4:hover {text-decoration: none; background-color: #03b576}
+
−
 
+
−
 
+
−
#why2 {padding-top: 10px; text-align: center; color: #fff;}
+
−
#why2 a {color: #fff;}
+
−
 
+
−
#why3 {padding-top: 15px; text-align: center; color: #fff;}
+
−
#why3 a {color: #fff;}
+
−
 
+
−
/*intro styles*/
+
−
.first {width: 70%;
+
−
padding-top: 10%;
+
−
padding-right: 10%;
+
−
    float: right;
+
−
  font-family: Raleway;
+
−
letter-spacing: 3px;
+
−
color: #5e5a5b;
+
−
line-height: 1.5;
+
−
padding-left: 5%;
+
−
font-size: 24px;
+
−
}
+
−
 
+
−
.second {width: 70%;
+
−
padding-top: 11%;
+
−
padding-left: 9%;
+
−
    float: left;
+
−
  font-family: Raleway;
+
−
letter-spacing: 3px;
+
−
color: #787172;
+
−
 
+
−
line-height: 1.5;
+
−
font-size: 24px;
+
−
}
+
−
 
+
−
.third {width: 80%;
+
−
padding-top: 18%;
+
−
padding-left: 10%;
+
−
    float: left;
+
−
  font-family: Raleway;
+
−
letter-spacing: 3px;
+
−
color: #787172;
+
−
 
+
−
line-height: 1.5;
+
−
font-size: 24px;
+
−
}
+
−
 
+
−
 
+
 
/*abstractstyle*/
 
/*abstractstyle*/
 
#abstracttext {height: 80%;  
 
#abstracttext {height: 80%;  
Line 507: Line 470:
  
 
@media(max-width:400px){
 
@media(max-width:400px){
−
h5 {font-size:400%;margin-top:30px;text-align:center;font-familt:arial;}
+
h5 {font-size:400%;margin-top:30px;text-align:center;font-family: arial;}
 
#main {padding-top:0px;border-top:0px;margin-top:0px;top:0px;position:static;z-index:0}
 
#main {padding-top:0px;border-top:0px;margin-top:0px;top:0px;position:static;z-index:0}
 
}
 
}
Line 515: Line 478:
 
.mainmenu {display:none;}
 
.mainmenu {display:none;}
 
.mainmenu ul {display:none;}
 
.mainmenu ul {display:none;}
−
#hidden-menu {display:block;}
+
 
 +
#hidden-menu {
 +
display:block;}
 
}
 
}
 +
 +
#hidden-menu {
 +
margin-left:85%;}
  
 
@media(min-width: 606px){
 
@media(min-width: 606px){
Line 527: Line 495:
 
height:auto;  
 
height:auto;  
 
width:auto;
 
width:auto;
 +
z-index:99999999
 
}
 
}
  
Line 540: Line 509:
 
padding-top:8px;
 
padding-top:8px;
 
padding-bottom:8px;
 
padding-bottom:8px;
−
box-shadow:1.5px 1.5px lightgrey;
+
/*box-shadow:1.5px 1.5px lightgrey;*/
 
border-radius:4px;
 
border-radius:4px;
 
opacity:0.9;
 
opacity:0.9;
Line 550: Line 519:
 
position:fixed;
 
position:fixed;
 
top:60px;
 
top:60px;
−
left:-0px;
+
right:50px;
 
}
 
}
  
Line 574: Line 543:
 
width:50px;
 
width:50px;
 
top:0;
 
top:0;
−
  margin-top: 17px;
+
right:0px;
 +
margin-top: 17px;
 
position:fixed;
 
position:fixed;
 
opacity:0.9;
 
opacity:0.9;
Line 601: Line 571:
 
z-index:99999;
 
z-index:99999;
 
}
 
}
 +
 
.menu-items {display: inline-block;
 
.menu-items {display: inline-block;
 
width: 100%;
 
width: 100%;
 
text-align: right;
 
text-align: right;
 
position:fixed;
 
position:fixed;
−
top:19px;
+
top:26px;
 +
right:3%;
 
z-index:99998;
 
z-index:99998;
−
right: 2%;
 
 
}
 
}
  
Line 618: Line 589:
 
   margin-right: 10px;
 
   margin-right: 10px;
 
   margin-left: 10px;
 
   margin-left: 10px;
−
margin-top: 2px;
+
margin-top: 3px;
 
letter-spacing: 1.1px;
 
letter-spacing: 1.1px;
−
height: 30px;
 
  
 
   }
 
   }
  
 +
.menu-items ul li:hover ul{
 +
display:block;
  
−
.menu-items li:hover ul, .menu-items li.hover ul{
+
height:auto; width:auto;
−
position: absolute;
+
−
display: inline;
+
−
left: 0;
+
−
width: 100%;
+
−
margin: 0;
+
−
padding: 0;}
+
−
 
+
  
 +
list-style-position: inside;
 +
list-style-type: none !important;
 +
padding-left: 0 !important;
 +
margin-left: -10px;
 +
float: left;
 +
}
  
 
.menu-items li ul {
 
.menu-items li ul {
 
display:none;
 
display:none;
−
position:absolute;
+
position:fixed;
−
top:26px;
+
top:53px;
 +
margin:auto;
 
}
 
}
  
 
.menu-items li ul li{
 
.menu-items li ul li{
−
    clear:both;
+
clear:both;
−
text-align: left;
+
position: relative;
−
padding: 2px;
+
text-align: center;
 +
font-size:9px;
 +
display: block;
 +
background: #383E45;
 +
padding: 4px;
 +
/*border: solid 1px #493C54;
 +
border-radius: 4px;
 +
box-shadow:1.5px 1.5px lightgrey;*/
 
opacity:0.95;
 
opacity:0.95;
−
width: auto;
+
z-index:99999999;
 +
margin:0 0 0 0;
 
}
 
}
  
 
.menu-items li ul li a {
 
.menu-items li ul li a {
−
color: #22343C;
+
color: #fff;
−
  font-size: 15px;
+
  font-size: 14px;
 
}
 
}
  
 
.menu-items li ul li a:hover {
 
.menu-items li ul li a:hover {
−
color: #FE6C68;
+
color: #70c4bb;
 
}
 
}
  
 
.menu-items a {
 
.menu-items a {
−
color: #22343C;
+
color: black;
 
  text-decoration: none;
 
  text-decoration: none;
−
  font-family: Raleway;  
+
  font-family: Raleway;
 
}
 
}
  
Line 667: Line 647:
 
     -webkit-transition: color ease-in-out 150ms;
 
     -webkit-transition: color ease-in-out 150ms;
 
}
 
}
−
 
  
  
Line 676: Line 655:
 
.menu-items{width:80%;}
 
.menu-items{width:80%;}
 
}
 
}
 +
  
 
.buttonblack {
 
.buttonblack {
Line 842: Line 822:
 
 
 
<div class="menu-items">
 
<div class="menu-items">
 +
 
<div id="igemlogo">
 
<div id="igemlogo">
 +
<ul style="margin-top:-5px;">
 +
<ul style="margin-left:-50px;">
 
<a href="https://2015.igem.org"><img src="https://static.igem.org/mediawiki/2015/7/72/UPOSevillaIgemLogoGrey.png" width="50px" height="42px"></a></div>
 
<a href="https://2015.igem.org"><img src="https://static.igem.org/mediawiki/2015/7/72/UPOSevillaIgemLogoGrey.png" width="50px" height="42px"></a></div>
 +
 
<div id="ucligemlogo">
 
<div id="ucligemlogo">
−
<a href="https://2015.igem.org/Team:UCL"><img src="https://static.igem.org/mediawiki/2015/0/0f/UCL_iGEM_logo.png" style="width: 45px; height: 45px; opacity: 0.8;"></a>
+
<ul style="margin-top:5px;">
 +
<ul style="margin-left:-50px;">
 +
<a href="https://2015.igem.org/Team:UCL"><img src="https://static.igem.org/mediawiki/2015/b/b7/UCL_igem_logo_black_and_white.png" style="width: 40px; height: 40px; opacity: 0.8;"></a>
 
</div>
 
</div>
 +
 
<ul style="margin-left:150px;">
 
<ul style="margin-left:150px;">
−
<li><a href="https://2015.igem.org/Team:UCL/Description">Project</a></li>   
 
−
   
 
  
−
<li><a href="https://2015.igem.org/Team:UCL/People">People</a>
+
<li><a href="https://2015.igem.org/Team:UCL/Description">Project</a></li>
−
<ul>
+
−
<li><a href="https://2015.igem.org/Team:UCL/Team">Team</li>
+
<li><a href="#">Lab work</a>
−
<li><a href="https://2015.igem.org/Team:UCL/Advisors">Advisors</li>
+
−
<li><a href="https://2015.igem.org/Team:UCL/Sponsors">Sponsors</li>
+
−
<li><a href="https://2015.igem.org/Team:UCL/Collaborations">Collaborations</a></li>
+
−
<li><a href="https://2015.igem.org/Team:UCL/Attributions">Attributions</li>
+
−
</ul>
+
−
</li>
+
−
+
−
 
+
−
 
+
−
<li><a href="https://2015.igem.org/Team:UCL/Experiments">Science</a>
+
 
<ul>   
 
<ul>   
  
 
<li><a href="https://2015.igem.org/Team:UCL/Effectors">Psychobiotics</a></li>
 
<li><a href="https://2015.igem.org/Team:UCL/Effectors">Psychobiotics</a></li>
 
<li><a href="https://2015.igem.org/Team:UCL/Sensors">Mood Detection</a></li>
 
<li><a href="https://2015.igem.org/Team:UCL/Sensors">Mood Detection</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/">Built-in Biosafety</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Safety">Built-in Biosafety</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/">Gut-on-a-Chip</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Design">Gut-on-Chip</a></li>
−
 
+
 
<li><a href="https://2015.igem.org/Team:UCL/Interlabstudy">InterLab Study</a></li>
 
<li><a href="https://2015.igem.org/Team:UCL/Interlabstudy">InterLab Study</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/Protocols">Protocols</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Protocols">Protocols</a></li>
  
−
</ul>
+
</ul>
−
</li>
+
</li>
  
  
−
<li><a href="https://2015.igem.org/Team:UCL/PolicyandPractice"=">Policy & Practice</a>
+
<li><a href="#">Practices</a>
−
<ul>
+
<ul>
 
 
−
<li><a href="https://2015.igem.org/Team:UCL/Practices">Integrated Human Practices</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Practices">Integrated Human Practices</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/PublicEngagement">Public Engagement</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/PublicEngagement">Education and Public Engagement</a></li>
  
−
</ul>
+
</ul>
−
</li>
+
</li>
  
  
−
<li><a href="https://2015.igem.org/Team:UCL/">Outcomes</a><ul>
+
<li><a href="https://2015.igem.org/Team:UCL/">Outcomes</a>
 +
<ul>
 
 
−
<li><a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></li>  
+
<li><a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></li>  
  
−
<li><a href="https://2015.igem.org/Team:UCL/Achievements">Medal criteria</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Achievements">Medal Criteria</a></li>
  
−
</ul></li>
+
</ul>
 +
</li>
 +
 +
<li><a href="https://2015.igem.org/Team:UCL/Notebook">Notebook</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Entrepreneurship">ProKao</a></li>
 +
<!--<li><a href="https://2015.igem.org/Team:UCL/Bactoman">Bactoman</a></li> -->
 +
<li><a href="https://2015.igem.org/Team:UCL/People">People</a>
  
−
 
−
 
−
 
−
 
−
 
−
<li><a href="https://2015.igem.org/Team:UCL/Notebook">Notebook</a></li>
 
−
 
−
 
−
<li><a href="https://2015.igem.org/Team:UCL/Special">Special</a>
 
 
<ul>
 
<ul>
−
<li><a href="https://2015.igem.org/Team:UCL/Entrepreneurship">ProKao</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Team">Team</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/Bactoman">Bactoman</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Advisors">Advisors</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Sponsors">Sponsors</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Collaborations">Collaborations</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Attributions">Attributions</a></li>
 
</ul>
 
</ul>
−
</li>
+
</li>
 
</ul>
 
</ul>
−
</div>
+
 
−
+
</div>
−
</nav>
+
 +
</nav>
  
 
<div id="hidden-menu">
 
<div id="hidden-menu">
Line 921: Line 897:
 
<li><a href="https://2015.igem.org/Team:UCL/Description">Project</a></li>
 
<li><a href="https://2015.igem.org/Team:UCL/Description">Project</a></li>
 
<li><a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></li>
 
<li><a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/Experiments">Science</a></li><li><a href="https://2015.igem.org/Team:UCL/Collaborations">Collaborations</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Experiments">Labwork</a></li><li><a href="https://2015.igem.org/Team:UCL/Collaborations">Collaborations</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/Notebook">Notebook</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Notebook">Notebook</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/People">People</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/People">People</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/PolicyandPractice"=">Policy & Practice</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/PolicyandPractice">Policy & Practice</a></li>
−
<li><a href="https://2015.igem.org/Team:UCL/Interlabstudy">InterLab Study</a></li>
+
<!--<li><a href="https://2015.igem.org/Team:UCL/Interlabstudy">InterLab Study</a></li>-->
 
</ul>
 
</ul>
 
</div>
 
</div>
 +
         
 +
          </div>
 
</body>
 
</body>
  
−
</p>
 
 
</html>
 
</html>

Latest revision as of 12:41, 17 September 2015