View source for Team:NTU-LIHPAO-Taiwan

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">

//-----Hover Facebook Icon-----//
$(document).ready(function(){
	$('#Facebook_icon_hover').hover(function () {
	this.src = "https://static.igem.org/mediawiki/2015/3/35/NTU-Top-Facebook_icon2.png";
	}, function () {
		this.src = "https://static.igem.org/mediawiki/2015/9/98/NTU-Top-Facebook_icon1.png";
	});
});

//-----Hover iGem Icon-----//
$(document).ready(function(){
	$('#iGEM_icon_hover').hover(function () {
	this.src = "https://static.igem.org/mediawiki/2015/0/0a/NTU-Top-iGEM_icon2.png";
	}, function () {
		this.src = "https://static.igem.org/mediawiki/2015/1/1d/NTU-Top-iGEM_icon1.png";
	});
});

//-----Hover NTU Icon-----//
$(document).ready(function(){
	$('#NTU_icon_hover').hover(function () {
	this.src = "https://static.igem.org/mediawiki/2015/6/6e/NTU-Top-NTU_icon2.png";
	}, function () {
		this.src = "https://static.igem.org/mediawiki/2015/1/14/NTU-Top-NTU_icon1.png";
	});
});

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NTU-LIHPAO-Taiwan</title>
<style type="text/css">

/*-------------------------------------------*/
/*--------------Wiki Page Reset--------------*/
/*-------------------------------------------*/

#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {
	display: none;
}

#globalWrapper, #content {
	width: 100%; 
	height: 100%;
	border: 0px;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
}

html, body, .wrapper {
	width: 100%; 
	height: 100%; 
	background-color: transparent; 	
}

/*-------------------------------------------*/
/*-------------------Body--------------------*/
/*-------------------------------------------*/

body {
	background-color: #F0F0F0;
}
body,td,th {
	font-size: 14px;
	font-family: Calibri, "Arial Narrow", "Agency FB", "Raavi";
}

#Wrapper {
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 90%;
	height: 1494px;
	top: 0px;
	left: 5%;
	right: 5%;
	position: absolute;
	bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	z-index: 0;
}

#Wrapper_TopPic {
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	height: 58px;
	top: 0px;
	left: 0px;
	right: 0px;
	position: fixed;
	bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	z-index: 9998;
	border-bottom-style: solid;
	border-bottom-color: #fe5838;
	border-bottom-width: 2px;
	z-index: 9998;
	background-repeat: no-repeat;
}

#Wrapper_Bottom {
	width: 100%;
	height: 100px;
	bottom: 0px;
	top: auto;
	background-color: #FFF;
	border-top-style: solid;
	border-top-color: #079235;
	border-top-width: 3px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	z-index: 9998;
	position: absolute;
}



/*-------------------------------------------*/
/*-----------------Top icons-----------------*/
/*-------------------------------------------*/
#Facebook_icon_pic {
	height: 30px;
	width: 30px;
	position: absolute;
	left: auto;
	top: 23px;
	right: 5.5%;
	bottom: auto;
	z-index: 9999;
}

#iGEM_icon_pic {
	height: 30px;
	width: 38px;
	position: absolute;
	left: auto;
	top: 23px;
	right: 1%;
	bottom: auto;
	z-index: 9999;
}

#NTU_icon_pic {
	height: 30px;
	width: 69px;
	position: absolute;
	left: auto;
	top: 23px;
	right: 9%;
	bottom: auto;
	z-index: 9999;
}

#NTUXLIHPAO_icon {
	height: 40px;
	width: 200px;
	position: absolute;
	left: 3%;
	top: 18px;
	right: auto;
	bottom: auto;
	z-index: 9999;
}



/*-------------------------------------------*/
/*---------------Bottom icons----------------*/
/*-------------------------------------------*/

#NTUschool_logo {
	height: 70px;
	width: 265px;
	position: absolute;
	left: 25%;
	top: 5px;
	right: auto;
	bottom: auto;
	z-index: 9999;
	margin-left: -132px;
}

#LIHPAO_logo {
	height: 70px;
	width: 215px;
	position: absolute;
	left: 75%;
	top: 5px;
	right: auto;
	bottom: auto;
	z-index: 9999;
	margin-left: -107px;
}

#NTUBST_logo {
	height: 70px;
	width: 70px;
	position: absolute;
	left: 50%;
	top: 5px;
	right: auto;
	bottom: auto;
	z-index: 9999;
	margin-left: -35px;
}

#Bottom_Text {
	color: #767676;
	bottom: 0px;
	width: 100%;
	height: auto;
	font-size: 15px;
	position: absolute;
	text-align: center;
}


/*-------------------------------------------*/
/*-----------------Slide Menu----------------*/
/*-------------------------------------------*/
.Slidemenu {
	z-index: 9999;
	position: absolute;
	top: 32px;
	bottom: 0px;
	left: 51%;
	right: 15%;
	list-style:none;
	margin:0;
	padding:0;
	position: absolute;
	margin-left: -350px;
	/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
}

.Slidemenu ul {
	*zoom:1;
	list-style:none;
	margin:0;
	padding:0;
	/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
}

.Slidemenu ul:before,.Slidemenu ul:after {
	content:"";
	display:table;
}

.Slidemenu ul:after {
	clear:both;
}

.Slidemenu a {
	text-decoration:none;
	display:block;
	padding:4px 4px;
	line-height:1em;
	color:#000;
	text-align: center;
	vertical-align: middle;
	height: auto;
	width: auto;
	font-family: "Agency FB";
	font-size: 1em;
}

.Slidemenu a:hover {
	text-decoration:none;
	background:rgba(0,0,0,0.03);
	text-align: center;
	vertical-align: middle;
}

.Slidemenu li ul {
	position:absolute;
	left:0;
	top:26px;
	z-index:1;
}

.Slidemenu li ul li {
	overflow:hidden;
	height: 0px;
	margin-bottom: 0px;
}

.Slidemenu li ul a {
	border:none;
	-webkit-transition:background 300ms ease-in-out;
	-moz-transition:background 300ms ease-in-out;
	-o-transition:background 300ms ease-in-out;
	transition:background 300ms ease-in-out;
	line-height:1.1em;
}

.Slidemenu li ul a:hover {
	background-color: rgba(240,240,240,1);
}

.Slidemenu ul > li {
	text-decoration:none;
	float: left;
	position: relative;
	height: 27px; /*--改主要選單高度--*/
}

.width_small {
	width: 100px; /*--改主要選單寬度--*/
}

.Slidemenu ul > li:hover ul.subs {
	height: auto;
	width: 150px; /*--改拉出的選單寬度--*/
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #3300FF;
	background:rgba(255,255,255,1); /*--改拉出選單顏色--*/
}

.Slidemenu ul > li:hover ul li {
	text-decoration:none;
	height: 26px; /*--改拉出的選單高度--*/
	width: 150px; /*--改拉出的選單寬度--*/
	text-align: center;
	vertical-align: middle;
	-webkit-transition:height 250ms ease-in;
	-moz-transition:height 250ms ease-in;
	-o-transition:height 250ms ease-in;
	transition:height 250ms ease-in;
}

#Position_Now {
	background:rgba(0,0,0,0.03);
}


/*-------------------------------------------*/
/*----------------Flexslider-----------------*/
/*-------------------------------------------*/

#Container_slider {
	position: absolute;
	top: 30px;
	width: 100%;
	left: 0%;
	right: 0%;
	height: 594px;    /*594px*/
	background: #FFF;    /*75B1EC*/
	overflow: hidden;
	z-index: 0;
	border: none;
}

#pages {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#pages > ul {
	width: 1000000px;
}

#pages li.page {
	position: absolute;
	display: inline-block;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.5s cubic-bezier(.19,.11,.4,1);
}

#pages div.page-content {
	width: 100%;
	height: 100%;
}

#present-prev-page, #present-next-page {
	position: absolute;
	top: 0;
	height: 100%;
	width: 3.5rem;
	padding: 0 0.5rem;
	color: grey;
	cursor: pointer;
	opacity: 0.7;
	transition: 0.25s;
	text-align: center;
}

#present-prev-page:hover, #present-next-page:hover {
	opacity: 1;
}

#present-prev-page {
	left: 0;
}

#present-next-page {
	right: 0;
}

.page-Slidemenu-icon {
	position: relative;
	top: 50%;
}

#Flexslider_Pictures1 {
	position: relative;
	width: 88%;
	height: 100%;
	background-image: url(https://static.igem.org/mediawiki/2015/8/8b/NTU-Slider-1.png);
	background-size: 100% 100%;
}

#Flexslider_Pictures2 {
	position: relative;
	width: 88%;
	height: 100%;
	background-image: url(https://static.igem.org/mediawiki/2015/8/8a/NTU-Slider-2.png);
	background-size: 100% 100%;
}

#Flexslider_Pictures3 {
	position: relative;
	width: 88%;
	height: 100%;
	background-image: url(https://static.igem.org/mediawiki/2015/c/cb/NTU-Slider-3.png);
	background-size: 100% 100%;
}

#Flexslider_Pictures4 {
	position: relative;
	width: 88%;
	height: 100%;
	background-image: url(https://static.igem.org/mediawiki/2015/2/28/NTU-Slider-4.png);
	background-size: 100% 100%;
}


/*-------------------------------------------*/
/*-------------------intro-------------------*/
/*-------------------------------------------*/

.Container_intro {
	width: 99.8%;
	left: 0.1%;
	right: 0.1%;
	height: 380px;
	top: 626px;
	position: absolute;
	background-color: #D1D1D1;
}

.Container_intro_video {
	top: 25px;
	bottom: 25px;
	margin-left: -280px;
	left: 30%;
	width: 560px;
	height: 315px;
	position: absolute;
	border-style: solid;
	border-color: #FFF;
	border-width: 7.5px;
}

.Container_intro_text {
	top: 97px;
	bottom: 97px;
	margin-left: -175px;
	left: 77%;
	width: 320px;
	height: 126px;
	background-color: #FFF;
	position: absolute;

	font-size: 20px;
	font-family: Calibri;
	text-align: justify;
	padding-top: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
	line-height: 26px;
	border-style: dashed;
	border-color: #00b050;
	border-width: 5px;
}


/*-------------------------------------------*/
/*-----------------IntroFast-----------------*/
/*-------------------------------------------*/

.Container_IntroFast {
	width: 99.8%;
	left: 0.1%;
	right: 0.1%;
	height: 380px;
	top: 1008px;
	position: absolute;
	background-color: #D1D1D1;
}

.SubContainer_IntroFast1 {
	top: 40px;
	bottom: 40px;
	margin-left: -150px;
	left: 18%;
	width: 300px;
	height: 300px;
	position: absolute;
}

.SubContainer_IntroFast1 img {
	width: 300px;
}

.SubContainer_IntroFast2 {
	top: 40px;
	bottom: 40px;
	margin-left: -150px;
	left: 50%;
	width: 300px;
	height: 300px;
	position: absolute;
}

.SubContainer_IntroFast2 img {
	width: 300px;
}

.SubContainer_IntroFast3 {
	top: 40px;
	bottom: 40px;
	margin-left: -150px;
	left: 82%;
	width: 300px;
	height: 300px;
	position: absolute;
}

.SubContainer_IntroFast3 img {
	width: 300px;
}


/*-------------------------------------------*/
/*-------------------Media-------------------*/
/*-------------------------------------------*/

@media screen and (min-width: 0px) and (max-width: 1200px) {

	.Container_IntroFast {
		width: 99.8%;
		left: 0.1%;
		right: 0.1%;
		height: 310px;
		top: 1138px;
		position: absolute;
		background-color: #D1D1D1;
	}

	.SubContainer_IntroFast1 {
		top: 30px;
		bottom: 30px;
		margin-left: -125px;
		left: 18%;
		width: 250px;
		height: 250px;
		position: absolute;
	}

	.SubContainer_IntroFast1 img {
		width: 250px;
	}

	.SubContainer_IntroFast2 {
		top: 30px;
		bottom: 30px;
		margin-left: -125px;
		left: 50%;
		width: 250px;
		height: 250px;
		position: absolute;
	}

	.SubContainer_IntroFast2 img {
		width: 250px;
	}

	.SubContainer_IntroFast3 {
		top: 30px;
		bottom: 30px;
		margin-left: -125px;
		left: 82%;
		width: 250px;
		height: 250px;
		position: absolute;
	}

	.SubContainer_IntroFast3 img {
		width: 250px;
	}

	#Wrapper {
		margin-right: auto;
		margin-left: auto;
		background-color: #FFF;
		margin-top: 0px;
		margin-bottom: 0px;
		width: 90%;
		height: 1554px;
		top: 0px;
		left: 5%;
		right: 5%;
		position: absolute;
		bottom: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		z-index: 0;
	}

	#NTUXLIHPAO_icon {
		height: 40px;
		width: 200px;
		position: absolute;
		left: 1%;
		top: 18px;
		right: auto;
		bottom: auto;
		z-index: 9999;
	}


	#width_small {
		width: 95px; /*--改主要選單寬度--*/
	}

	.Slidemenu {
		z-index: 9999;
		position: absolute;
		top: 32px;
		bottom: 0px;
		left: 49%;
		right: auto;
		list-style:none;
		margin:0;
		padding:0;
		position: absolute;
		margin-left: -320px;
		/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
	}

	.Container_intro_text {
		top: 97px;
		bottom: 97px;
		margin-left: -115px;
		left: 77%;
		width: 230px;
		height: 126px;
		background-color: #FFF;
		position: absolute;
	
		font-size: 16px;
		font-family: Calibri;
		text-align: justify;
		padding-top: 25px;
		padding-right: 25px;
		padding-bottom: 25px;
		padding-left: 25px;
		line-height: 26px;
		border-style: dashed;
		border-color: #00b050;
		border-width: 5px;
	}
}

</style>
</head>


<!---------------------------------------->
<!---------------------------------------->
<!------------------BODY------------------>
<!---------------------------------------->
<!---------------------------------------->

<body>

<div id="Wrapper">
	<div id="Wrapper_TopPic">
		<div id="NTUXLIHPAO_icon"><img src="https://static.igem.org/mediawiki/2015/c/c7/NTU-Top-NTUXLIHPAO.png"  height="40" /></div>
		<div id="Facebook_icon_pic">
			<a href="https://www.facebook.com/NationalTaiwanUniversityiGEM"><img id="Facebook_icon_hover" src="https://static.igem.org/mediawiki/2015/9/98/NTU-Top-Facebook_icon1.png" /></a></div>
		<div id="iGEM_icon_pic">
			<a href="https://igem.org/Main_Page"><img id="iGEM_icon_hover" src="https://static.igem.org/mediawiki/2015/1/1d/NTU-Top-iGEM_icon1.png" /></a></div>
		<div id="NTU_icon_pic">
			<a href="http://www.ntu.edu.tw/english/index.html"><img id="NTU_icon_hover" src="https://static.igem.org/mediawiki/2015/1/14/NTU-Top-NTU_icon1.png" /></a></div>

		<div class="Slidemenu">
			<ul>
				<li><div class=width_small><div id=Position_Now><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan">Home</a></div></div>
				</li>

				<li><div class=width_small span style="cursor:default"><a>Team</a></div>
					<ul class="subs">
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Team">Team</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Attributions">Attributions</a></li>
					</ul>
				</li>
	
				<li><div class=width_small span style="cursor:default"><a>Project</a></div>
					<ul class="subs">
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Description">Description</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Design">Design</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Results">Results</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling">Modeling</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Experiments">Protocols</a></li>
					</ul>
				</li>
	
				<li><div class=width_small span style="cursor:default"><a>Parts</a></div>
					<ul class="subs">
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Parts">Team Parts</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Basic_Part">Basic Parts</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Composite_Part">Composite Parts</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Part_Collection">Part Collection</a></li>
					</ul>
				</li>
	
				<li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Notebook">Notebook</a></div>
				</li>
        
				<li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Safety">Safety</a></div>
				</li>
	
				<li><div class=width_small span style="cursor:default"><a>Society</a></div>
					<ul class="subs">
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Practices">Human Practices</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Collaborations">Collaborations</a></li>
						<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Entrepreneurship">Entrepreneurship</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	
	<div id="Container_slider">
		<div id="pages">
			<ul>
				<style>
					.vertical-align-wrapper {
						position: absolute;
						height: 100%;
						width: 100%;
						left: 0;
						top: 0;
						font-size: 0;
						text-align: center;
					}
					.vertical-align-wrapper:before {
						content: '';
						display: inline-block;
						vertical-align: middle ;
						height: 100%;
					}
					.vertical-align {
						text-align: center;
						line-height: 100%;
						display: inline-block;
						vertical-align: middle;
					}
				</style>
				<li class="page">
					<div class="page-content">
						<div class="vertical-align-wrapper">
							<div id="Flexslider_Pictures1" style="max-width:100%; max-height:100%" class="vertical-align"></div>
						</div>
					</div>
				</li>
				<li class="page">
					<div class="page-content">
						<div class="vertical-align-wrapper">
							<div id="Flexslider_Pictures2" style="max-width:100%; max-height:100%" class="vertical-align"></div>
						</div>
					</div>
				</li>
				<li class="page">
					<div class="page-content">
						<div class="vertical-align-wrapper">
							<div id="Flexslider_Pictures3" style="max-width:100%; max-height:100%" class="vertical-align"></div>
						</div>
					</div>
				</li>
				<li class="page">
					<div class="page-content">
						<div class="vertical-align-wrapper">
							<div id="Flexslider_Pictures4" style="max-width:100%; max-height:100%" class="vertical-align"></div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div id="present-prev-page">
			<span class="page-Slidemenu-icon"><img src="https://static.igem.org/mediawiki/2015/c/c2/Symbol_P.png" width="55px"/></span>
		</div>
		<div id="present-next-page">
			<span class="page-Slidemenu-icon"><img src="https://static.igem.org/mediawiki/2015/8/82/Symbol_Y.png" width="55px"/></span>
		</div>
	</div>

	<script>
	(function() {
		function AND(a,b) {
			if (a) {
				if (b) {
					return true;
				}
			}
			return false;
		}
		var pages = document.querySelectorAll(".page");
		var page_current = 0;
		function pageJumpTo(to_page) {
			if (AND(to_page >= 0, to_page < pages.length)) {
				for (var i = 0; i < pages.length; i++) {
					pages[i].style.left = 100*(i-to_page) + '%';
				}
				page_current = to_page;
			}
		}
		document.querySelector("#present-prev-page").onclick = function() {
			pageJumpTo(page_current - 1);
		};
		document.querySelector("#present-next-page").onclick = function() {
			pageJumpTo(page_current + 1);
		};
		pageJumpTo(0);
	})();
	</script>
	
	<div class="Container_intro">
		<div class="Container_intro_video">
			<video width="560" height="315" controls>
			<source src="https://static.igem.org/mediawiki/2015/8/8e/NTU_igem_video.mp4" type="video/ogg">
			<source src="https://static.igem.org/mediawiki/2015/8/8e/NTU_igem_video.mp4" type="video/mp4">
		</div>
        
		<div class="Container_intro_text">
Global obesity problem is raising people's concern, and we aim to provide a new solution! Learn more about our project "Healthin". Healthy, thin and keep fit!
		</div>     
	</div>
	
	<div class="Container_IntroFast">
		<div class="SubContainer_IntroFast1"><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Description"><img src="https://static.igem.org/mediawiki/2015/7/7d/IntroFast_Project.png" /></a></div>
		<div class="SubContainer_IntroFast2"><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling"><img src="https://static.igem.org/mediawiki/2015/f/f3/IntroFast_Modeling.png" /></a></div>
		<div class="SubContainer_IntroFast3"><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Practices"><img src="https://static.igem.org/mediawiki/2015/7/76/IntroFast_Human_Practice.png" /></a></div>
	</div>

	<div id="Wrapper_Bottom">
		<div id="NTUschool_logo"><a href="http://www.ntu.edu.tw/english/index.html"><img src="https://static.igem.org/mediawiki/2015/d/de/NTUschool_icon.png" height="70" /></a></div>
		<div id="LIHPAO_logo"><a href="http://www.llsc.com.tw/"><img src="https://static.igem.org/mediawiki/2015/d/d4/LIHPAO_logo.png" height="70" /></a></div>
		<div id="NTUBST_logo"><a href="http://www.bst.ntu.edu.tw/BST-new/NTUBST.html"><img src="https://static.igem.org/mediawiki/2015/6/68/NTUBST_logo.png" height="70" /></a></div>
		<div id="Bottom_Text">
			Maintained by the iGEM team NTU-LIHPAO-Taiwan&nbsp;&nbsp;&nbsp;&nbsp;©2015 NTU-LIHPAO-Taiwan
		</div>
	</div>
</div>

</body>
</html>