View source for Template:BIT-China

{{Template_All_Teams}}

<!-- Declare that you are going to use html code instead of wiki code -->
<html>

	<!-- Start of CSS-->
		<style type="text/css">
                /*Font*/
                       @font-face {
	                      font-family: 'Calibri';
 	                      src: url('Calibri.ttf');
                              url('https://static.igem.org/mediawiki/2015/0/09/Calibri.ttf') format('truetype');
                        }
  
		/* PAGE LAYOUT */
                       *{
                              padding:0px;
                              margin:0px;
                        }

		/* Change Background color*/
			body{
                               margin:0 auto;
                               background-image: url("https://static.igem.org/mediawiki/2015/c/c3/BIT_China_grid_background.jpg");
                               background-repeat:repeat;
                        }
                /* Set #content to place the main body in the middle */
                        #content{
                               width:100%;
                               padding:0px;
                               background-color:transparent;
                               border:0px;
                        }
		/* Creates a container that will wrap all of the content inside your wiki pages. */
			#mainContainer {  
				width:100%;
                                margin:0px;
                                border:0px;
                                background-color:transparent;
                                font-size: 17px;
                                line-height: 1.5em;
				font-family: Calibri, Arial;
			}



		/* Creates the container for the content */
			#contentContainer{
                                width:100%;
                                border:0px;
                                margin:0px;
                                padding:0px;
                                background-color:transparent;
                        }

		/*Set up height place holder for the banner*/
			#bannerContainer {
				display:none;
			}

		/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */

		/*Change the styling of text for everything inside main container*/
			#mainContainer p { 
				font-size: 17px;
				color: #000000;
			}
			
		/*This changes the color and font family */
			#contentContainer h1, h2, h3, h4, h5, h6 { 
				color:#1c73a6;
				border-bottom: none;
				font-weight: bold;
				font-family: Helvetica, sans-serif;
			}
                       sup,sub{
                                line-height: 10px;
                        }

		/*Style of the links - links are different inside the menu */
			#contentContainer a { 
				font-weight: bold;
				color: #23b593;
			}

	 	  /* Styling links on hover- links are different inside the menu */
			#contentContainer a:hover { 
				color: #f5a107;
			}
 

		

	/*CLASSES */

		/*Clear class for all the pages, adds spacing too*/
			.clear{
				clear:both;
				height: 10px;
			}


		/* highlight box for special messages */
    			.highlightBox {
    			    	width:500px; 
    			    	margin:auto; 
    			    	background-color: #E8E8E9; 
				margin-bottom: 15px;
				margin-top: 15px;
				padding: 15px;
				padding-top: 5px;
    			 }
  


                /*MENU STYLING */
  #menuContainer{
	 width:100%;
	 height:95px;
	 background-color:#106f9c;
	 background-position:bottom;
         background-image:url("https://static.igem.org/mediawiki/2015/8/8e/BIT_China_nav_bg.png");
	 position:fixed;
top:18px;
	 padding-top:5px;
	 z-index: 100;
         background-repeat: no-repeat;

  }
#menuContainer p{
color:#ffffff;
}
  /*	背景绿色background-color:#c9e77f;*/
  #top_nav{
	 width:1100px;
 	 height:90px;
 	 margin:0 auto;
  }
  #top_nav div{
     float:left;
	 text-align:center;
	 font-size:20px;
	 line-height:30px;
	 font-family:"Comic Sans MS";
  }
  #top_nav div:hover .top_nav_icon{
	 animation: bounce 1s ;
	 -webkit-animation: bounce 1s;
  }
  
  .top_nav_icon{
	 width:60px;
	 height:60px;
	 margin:0 27px;
  }


  #taiji{
     margin:5px 8px;
	 width:80px;
	 height:80px;
  }
   #top_nav_bulge{
        position:fixed;
	top:118px;
	width:100%;
	height:45px;
        background-color: #106f9c;
        background-image:url("https://static.igem.org/mediawiki/2015/d/d6/BIT_China_nav_bg2.png");
        background-position:top;
        background-repeat: no-repeat;
   }
#top_nav li{
    float:left;
    list-style: none;
	 position:relative;
	 text-align:center;
	 font-size:18px;
	 line-height:30px;
	 font-family:"Comic Sans MS";
}
#top_nav span{
	float:left;
	position:absolute;
	left:0px;
	top:90px;
	width:1024px;
	display: none;
}
#top_nav span a{
	float:left;
	padding:10px;
	line-height:20px;
	border-left:3px dashed;
}
#top_nav li:hover span { 
	display: block; 
}
#top_nav li:hover #top_nav_bulge{
	visibility:visible;
}
#top_nav li span a {
	display: inline; 
text-decoration:none;
}
#menuContainer a p{
	text-decoration:none;
}
#menuContainer a:link, #menuContainer a:visited{
     color:#eeeeee;
}
#menuContainer a:active{
	 color:#ff0000;
}
#top_nav li:hover a{
	color:#f5a107;
}
#top_nav li:hover span a{ 
	color:#cccccc;
}
#menuContainer a:hover p{
color:#f5a107;
}

@media screen and (max-width:1260px){
  #top_nav{
	 width:1000px;	
  }
  .top_nav_icon{
	 width:60px;
	 height:60px;
	 margin:0 23px;
	
  }
}

@media screen and (max-width:960px){
	#top_nav{
		width:95%;	
	}
.top_nav_icon{
		 width:50px;
		 height:50px;
	 	 margin:0 20px;
	}
}
@media screen and (max-width:910px){
	#top_nav{
		width: 97%;
	}
	.top_nav_icon{
			 width:40px;
			 height:40px;
		 	 margin:0 17px;
	}
	  #top_nav div{
	  	font-size: 15px;
	  }
	  #top_nav span{
	  	font-size: 15px;
	  	top:70px;
	  }
}


.rotating{
	animation: rotating linear 5s infinite;
	-webkit-animation: rotating linear 5s infinite;
	
}
@keyframes rotating {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(-360deg);
	}
}

@-webkit-keyframes rotating {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(-360deg);
	}
}

.bounce {
	animation: bounce 0.75s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	-webkit-animation: bounce 0.75s cubic-bezier(0.680, -0.550, 0.265, 1.550);

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
	0% {
		transform: translateY(0%) scaleY(0.6)
	}

	60% {
		transform: translateY(-100%) scaleY(1.1)
	}

	70% {
		transform: translateY(0%) scaleY(0.95) scaleX(1.05)
	}

	80% {
		transform: translateY(0%) scaleY(1.05) scaleX(1)
	}

	90% {
		transform: translateY(0%) scaleY(0.95) scaleX(1)
	}

	100% {
		transform: translateY(0%) scaleY(1) scaleX(1)
	}
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.8)
	}

	60% {
		-webkit-transform: translateY(-50%) scaleY(1.05)
	}

	70% {
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05)
	}

	80% {
		-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1)
	}

	90% {
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1)
	}

	100% {
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1)
	}
}

		</style>
	<!-- End of CSS -->
<script>
	$(document).ready(function () {
		$('#top_nav_bulge').hide();
		$('#menuContainer').mouseover(function(){
			$('#top_nav_bulge').show();
		})
		$('#menuContainer').mouseout(function(){
			$('#top_nav_bulge').hide();
		})
	})
</script>

		<!-- Start of the template html elements. -->
		<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->


			<div id="bannerContainer">
				<br><br>
				<h2> Add a banner to your wiki! </h2>
				
				<p>You can make the image 980px  by  200px</p>
				<p> Remember to call the file: "<i>Team_BIT-China_banner.jpg</i>" </p>
			</div>

			<!-- Start of menu -->
			<div id="menuContainer">
                                <div id="top_nav_bulge" >
		                </div>
				<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
                                         <div id="top_nav">
                                            <ul>
						<li>
						   <a href="#"><div>
								<img src="https://static.igem.org/mediawiki/2015/f/fc/BIT_China_icon_project.png" class="top_nav_icon" />
								<p>Project</p>
							</div></a>
							<span id="nav_second_level">
								<a href="https://2015.igem.org/Team:BIT-China/Description">Description</a>
								<a href="https://2015.igem.org/Team:BIT-China/Design">Design</a>
								<a href="https://2015.igem.org/Team:BIT-China/project_Basic_circuits.html">Basic circuits</a>
								<a href="https://2015.igem.org/Team:BIT-China/project_Fine-regulation_circuits.html">Fine-regulation circuits</a>
							</span>
						</li>
						<li>
							<a href="#"><div>
								<img src="https://static.igem.org/mediawiki/2015/c/c6/BIT_China_icon_modeling.png" class="top_nav_icon" id="shiyishi2"/>
								<p>Modeling</p>
							 </div></a>
							<span id="nav_second_level">
								<a href="#">Basic circuits</a>
								<a href="#">Fine-regulation circuits</a>
							</span>  
						</li>
						<li>
							 <a href="#" id="active"><div>
								<img src="https://static.igem.org/mediawiki/2015/3/33/BIT_China_icon_notebook.png" class="top_nav_icon"/>
								<p>Notebook</p>
							 </div></a>
							<span id="nav_second_level">
								<a href="https://2015.igem.org/Team:BIT-China/Notebook">Laboratory Notes</a>
								<a href="https://2015.igem.org/Team:BIT-China/Experiments">Protocols</a>
							</span>  
						</li>
						<li>
							<a href="#"><div>
								 <img src="https://static.igem.org/mediawiki/2015/8/8f/BIT_China_icon_judging.png" class="top_nav_icon"/>
								 <p>Judging</p>
							</div></a>
							<span id="nav_second_level">
								<a href="https://2015.igem.org/Team:BIT-China/Parts">Parts Submission</a>
								<a href="">Achievements</a>
							</span>  
						</li>
						<li>
							<div>
								<a href="https://2015.igem.org/Team:BIT-China"><img src="https://static.igem.org/mediawiki/2015/f/f2/BIT_China_logo_project.png" id="taiji" class="rotating"/></a>
							</div>
						</li>
						<li>
							 <a href="https://2015.igem.org/Team:BIT-China/Team" ><div id="active">
								 <img src="https://static.igem.org/mediawiki/2015/7/76/BIT_China_icon_team.png" class="top_nav_icon"/>
								 <p>Team</p>
							 </div></a>
							 
						</li>
						<li>
							<a href=""><div>
								 <img src="https://static.igem.org/mediawiki/2015/7/75/BIT_China_icon_practice.png" class="top_nav_icon" />
								 <p>Practice</p>
							 </div></a>
                                                         <span id="nav_second_level">
								<a href="https://2015.igem.org/Team:BIT-China/Practices">Human Practice</a>
								<a href="https://2015.igem.org/Team:BIT-China/Collaborations">Collaboration </a>
							</span>  
						</li>
						<li>
							 <a href=""><div>
								 <img src="https://static.igem.org/mediawiki/2015/b/ba/BIT_China_icon_safety.png" class="top_nav_icon"/>
								 <p>Safety</p>
							 </div></a>
							<span id="nav_second_level">
								<a href="https://2015.igem.org/Team:BIT-China/Safety">Safety</a>
								<a href="https://2015.igem.org/Team:BIT-China/Questions_and_answers">Q/A</a>
							</span>  
						</li>
						<li>
							 <a href="#"><div>
								 <img src="https://static.igem.org/mediawiki/2015/2/21/BIT_China_icon_sponsor.png" class="top_nav_icon" />
								 <p>Attributions</p>
							 </div></a>
                                                         <span id="nav_second_level" style="margin-left:-100px;">
								<a href="https://2015.igem.org/Team:BIT-China/Attributions">Attributions</a>
								<a href="https://2015.igem.org/Team:BIT-China/Sponsors">Sponsors</a>
							</span>  
						</li>
					</ul>
                                    </div>

				
			</div>
			<!-- End of menu  -->

			<!-- Start of content -->
			<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
</html>