View source for Template:CSS UCL5

<html>
<head>
<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"/>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<script> 
<!--$(document).mouseup(function (e)
{
    var container = $("mobile-list");

    if (!container.is(e.target) // if the target of the click isn't the container...
        &amp;&amp; container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});-->
</script>
<style type="text/css">


/*

h5 {
font-size:500%;
text-align:center;
color:#085275;
font-weight: normal;
line-height: 1.25;
/*color:#1E896B;*/
font-family: Raleway;
}

*/

a {
color:#473E4F;
}

a:hover 
{color: #70C4BB;
text-decoration:none;
-webkit-transition: color ease-in-out 150ms;
}


a:visited {
color:#473E4F;
text-decoration:none;
}

#bodyContent {
background-color:#F8FFFF;
}

@media (max-width:400px){
p {text-align:justify;};
h3 {font-size:10px;};
}

/* wiki width fixing */
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
    display:none;}
#top-section {
    border: none;
    height: 0px;}

 #p-logo, h1.firstHeading,#search-controls,#catlinks {display:none;}
  #footer #f-list {margin-top:0;}
  #top-section,#footer-box{margin:0;padding:0;width:100%;height:0}
  table{visibility:hidden;height:0;}
  #contentSub {margin: 0;}

	#globalWrapper, #content {		
		width: 100%!important;
		height: 100%;
		border: 0px;
		background-color: F8FFFF;
		margin: 0px;
		padding: 0px;
top:0%;
position:absolute;
	}

html, #bodyContent, body, #container {
	width:100%;
	height:100%;
box-sizing: border-box;
background: #fff;

}



/* blocks */

#header {background-image: url('https://static.igem.org/mediawiki/2015/b/b0/UCL_University_College_London2.jpg'); margin: -5px; 
 text-align: center; width: 100%;
min-height: 640px;
width:100%;
position: relative;
display: block !important;
margin: 0;
padding: 0;
margin-top: -10px;
top: 0;
bottom: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;

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

vertical-align: middle; } 

@media (max-width:743px) {
/*#header {width:auto;height:100%;}*/
}
#header {
  margin-top: -60px;
  min-height: auto;
  width: auto;
}
.buttonblack {

  margin-bottom: 10px;
  margin-top: 10px;
 
}

 #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*/
#twit {width: 100%; height: 340px; padding-left: 30px; padding-top: 40px;  display: inline-block; position: relative; background: #fff;   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;
display: block;
 }
#twitbox {width: 30%; display: inline-block; padding-right: 30px; border-right: 1px solid #574B61; 
}

#sponsors {display: inline-block; position: relative; text-align: center; top: -10px; width: 60%;}

iframe.twitter-timeline {
    height: 220px !important;

width: 100% !important;
}
/* width: 500px !important; */


/* logo and buttons */




/*h6 {
font-size:200%;
margin-top:-50px;
margin-bottom:-50px;
font-family:"lucida calligraphy", sans serif;
font-style:italic;
}*/

/* #logo {padding-top: 10%; padding-bottom: 10%;}*/
#logo {
  padding-top: 105px;
}


.intro-buttons {
padding-top: 20px;  color: #FFFFFF;
}

.button-abstract {
padding-top: 20px;  color: #FFFFFF;
text-align: center;
position: relative; top: 20px;
}

.intro-buttons a {  color: #FFFFFF; text-decoration: none;}



.buttonc1 {    display: inline-block;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
transition-property: background-color, color; 
   transition-duration: 1s; 
   transition-timing-function: ease; 
            color: #FFFFFF;
  border: none;
    padding: 10px 16px;
  line-height: 1.33;
  text-decoration: none;
  width:140px; background-color: #F49794;
 font-family: Raleway;
letter-spacing: 1.5px;

}


.buttonc2 {    display: inline-block;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
transition-property: background-color, color; 
   transition-duration: 1s; 
   transition-timing-function: ease; 
            color: #FFFFFF;
  border: none;
    padding: 10px 16px;
  line-height: 1.33;
  text-decoration: none;
  width: 140px; background-color: #61D9D2;
 font-family: Raleway;
letter-spacing: 1.5px;
}
.buttonc3
 {
    display: inline-block;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
transition-property: background-color, color; 
   transition-duration: 1s; 
   transition-timing-function: ease; 
            color: #FFFFFF;
  border: none;
    padding: 10px 16px;
  line-height: 1.33;
  text-decoration: none;
  width: 140px; background-color: #006C93;
 font-family: Raleway;
letter-spacing: 1.5px;
}	

	#buttonc4
 {
    display: inline-block;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
 transition-property: background-color, color; 
   transition-duration: 1s; 
   transition-timing-function: ease; 
            color: #FFFFFF;
  border: none;
    padding: 10px 16px;
  line-height: 1.33;
  text-decoration: none;
  width: 140px; background-color: #019966;
 font-family: Raleway;
letter-spacing: 1.5px;
}	

.back {text-align: center; padding-bottom: 20px;}
.back a {color: #746c7c; font-size: 12px;}
.back a:hover {color: #2e2438;  -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*/
#abstracttext {height: 80%; 
    width: 80%; 
margin: 0 auto;

position: relative;
vertical-align: middle;
font-family: Raleway;
letter-spacing: 1.2px;     line-height: 2;
text-align: justify;
font-size: 17px;
background: #fff;
border: #fff 1px solid;
border-radius: 15px;
padding-top: 75px;

}
  

#abstracttext p {    line-height: 2; padding-left: 30px; padding-right: 30px; font-size: 17px;
}


@media screen and (max-width: 960px) {
 #abstracttext p {    line-height: 2; font-size: 13px; text-indent: 50px;
}


}

#abstract h2 {font-size: 20px;}





.mailus {background: #F0F0F5; padding: 5px;}

/*menu*/

.mainmenu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 75px;
font-size: 16px; 
background-color: #fff;
/* opacity:0.9; */
}

@media(min-width:1392px){
.mainmenu {
height:75px;
}
}

@media(max-width:1110px){
.mainmenu {
height:100px;
}
}

@media(max-width:606px){

.mainmenu {
height:134px;
}
}

/*
@media(max-width:570px){
.mainmenu {
height:163px;
}
}

@media(max-width:511px){
.mainmenu {
height:183px;
}
}*/


@media(max-width:400px){
h5 {font-size:400%;margin-top:30px;text-align:center;font-familt:arial;}
#main {padding-top:0px;border-top:0px;margin-top:0px;top:0px;position:static;z-index:0}
}

/* CHANGE */
@media(max-width: 606px){
.mainmenu {display:none;}
.mainmenu ul {display:none;}
#hidden-menu {display:block;}
}

@media(min-width: 606px){
#hidden-menu {display:none;};
h5 {font-size:15px;};
}

#hidden-menu:hover ul{
display:block;
height:auto; 
width:auto;
}

#hidden-menu ul li{
display:none;
clear:both;
background-color: #70C4BB;
text-align: center;
display: block;
margin:none;
padding-left:20px;
padding-right:20px;
padding-top:8px;
padding-bottom:8px;
box-shadow:1.5px 1.5px lightgrey;
border-radius:4px;
opacity:0.9;
z-index:999999;
}

#hidden-menu ul {
display:none;
position:fixed;
top:60px;
left:-0px;
}

#hidden-menu ul li a {
color: #fff; font-size: 23px;
}

#hidden-menu ul li a:hover {
color: #787172
}

#hidden-menu a {
color: #473E4F; text-decoration: none; font-family: Raleway;   
}

#hidden-menu a:hover {color: #70C4BB;
    -webkit-transition: color ease-in-out 150ms;
}


#mobilebutton {
height:50px;
width:50px;
top:0;
  margin-top: 17px;
position:fixed;
opacity:0.9;
z-index:999999999;
}

/*CHANGE END*/

#igemlogo {
position:fixed;
top:27px;
left:-10px;
float:left;
margin-left:50px;
margin-top:5px
z-index:99999;
}

#ucligemlogo {
position:fixed;
top:23px;
left:50px;
float:left;
margin-left:50px;
margin-top:5px
z-index:99999;
}
.menu-items {display: inline-block;
width: 100%;
text-align: right;
position:fixed;
top:19px;
z-index:99998;
right: 2%;
}

@media(max-width: 463px){
.menu-items {margin-top: 10px; }
}

.menu-items li {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
margin-top: 2px;
letter-spacing: 1.1px;
height: 30px;

  }


.menu-items li:hover ul, .menu-items li.hover ul{ 
position: absolute;
	display: inline;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;}



.menu-items li ul {
display:none;
position:absolute;
top:26px;
}

.menu-items li ul li{
    clear:both;
text-align: left;
padding: 2px;
opacity:0.95;
width: auto;
}

.menu-items li ul li a {
color: #22343C;
 font-size: 15px;
}

.menu-items li ul li a:hover {
color: #FE6C68;
}

.menu-items a {
color: #22343C;
 text-decoration: none;
 font-family: Raleway;   
}

.menu-items a:hover {color: #70C4BB;
    -webkit-transition: color ease-in-out 150ms;
}



@media (max-width:600px){
h2 {font-size:18px;}
h3 {font-size:17px;}
p {font-size:12px;}
.menu-items{width:80%;}
}

.buttonblack {
  margin-bottom: 10px;
margin-top: 10px;
text-transform: uppercase;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 4px;
transition-property: background-color, color, border-color; 
   transition-duration: 1s; 
   transition-timing-function: ease; 
            color: #FFFFFF;
  border: solid 5px #493C54;
    padding: 10px 16px;
  text-decoration: none;
  width:180px; background-color: #493C54;
 font-family: Raleway;
letter-spacing: 2px;
font-weight: bold;}


.buttonblack:hover {border-color: #fff; color: #fff; background: none;}
.buttongreen:hover {border-color: #019966; color: #019966; background: none;}

.buttongreen {  margin-bottom: 10px;
margin-top: 20px;
text-transform: uppercase;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 4px;
transition-property: background-color, color, border-color; 
   transition-duration: 1s; 
   transition-timing-function: ease; 
            color: #FFFFFF;
  border: solid 5px #019966;
    padding: 10px 16px;
  text-decoration: none;
  width:180px; background-color: #019966;
 font-family: Raleway;
letter-spacing: 2px;
font-weight: bold;}

a.buttongreen  {text-decoration: none; color: #fff;}

.sss {
	height: 0;
	margin: 0; 
	padding: 0;
	position: relative;
	display: block;
	overflow: hidden;
}

.ssslide {
	width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	overflow: hidden;
}

.ssslide img {
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
	display: block;
}

.sssnext, .sssprev {
	width: 25px;
	height: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	background: url('https://static.igem.org/mediawiki/2015/5/56/UCL_Arr.png') no-repeat;
}

.sssprev {
	/*left: 3%;*/
	background-position: 0 50%;
z-index:100;
}

.sssnext {
	/*right: 3%;*/
	background-position: -26px 50%;
}

.sssprev:hover, .sssnext:hover {
	cursor: pointer;

}

.slider {
	border: 15px solid #FFF;
	box-shadow: 1px 1px 5px #CCC;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
background: #fff;
height: 380px;

}

#slideWrap {
	width: 60%;
margin: 0 auto;
padding-top: 10%; height: 400px;
	
}

/*.just_text {display: inline; padding-top: 6%;
padding-right: 10%;
width: 600px;
    float: right;
  font-family: Raleway;
letter-spacing: 3px;
color: #5e5a5b;
line-height: 1.5;
padding-left: 10%;
font-size: 22px; 
height: 330px;
text-align: justify;
}*/
.just_text {

  float: right;
  font-family: Raleway;
  font-size: 160%;
  letter-spacing: 3px;
  line-height: 1.5;
  margin-left: 6%;
  margin-right: 6%;
  text-align: justify;
  width: 88%;
}

#main { margin-top: 5%; padding-bottom: 50px; padding-left: 6%; padding-right: 6%; font-family: Raleway;
letter-spacing: 1.2px; font-size: 14px; background: #F8FFFF; }


</style>


</head>

<body>

<div style="clear: both;"></div>
		<nav class="mainmenu">
			<div id="menu" class="menu">
		
<div class="menu-items">					
<div id="igemlogo">
<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">
<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>
</div>
<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>
							<ul>
<li><a href="https://2015.igem.org/Team:UCL/Team">Team</li>	
<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>  

<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/">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/Interlabstudy">InterLab Study</a></li>
								<li><a href="https://2015.igem.org/Team:UCL/Protocols">Protocols</a></li>

							</ul>
						</li>


<li><a href="https://2015.igem.org/Team:UCL/PolicyandPractice"=">Policy & Practice</a>
							<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/PublicEngagement">Public Engagement</a></li>

							</ul>
						</li>


<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/Achievements">Medal criteria</a></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/Special">Special</a>
<ul>
<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>	
</ul>
</li>		
</ul>
				</div>
			
		</nav>

<div id="hidden-menu">
<img src="https://static.igem.org/mediawiki/2015/d/de/UCLigemMobileMenu.png" id="mobilebutton">
<ul id="mobile-list">
<li><a href="https://2015.igem.org/Team:UCL">Home</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/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/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/PolicyandPractice"=">Policy & Practice</a></li>
						<li><a href="https://2015.igem.org/Team:UCL/Interlabstudy">InterLab Study</a></li>
</ul>
</div>
</body>

</p>
</html>