Team:SYSU-Software

From 2012.igem.org

(Difference between revisions)
(Undo revision 25435 by Nie1234567 (talk))
Line 1: Line 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
-
<head> <style>
+
<head>
-
  /* Getting the new tags to behave */
+
-
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
+
-
mark, rp, rt, ruby, summary, time{ display: inline }
+
-
 
+
-
/* Global properties ======================================================== */
+
-
body {
+
-
background:#CCC;
+
-
font-family:Arial, Helvetica, sans-serif;
+
-
font-size:100%;
+
-
line-height:1.125em;
+
-
color:#24242424;
+
-
}
+
-
html {width:975px;
+
-
margin-left:187px;
+
-
}
+
-
html, body { height:100%;}
+
-
 
+
-
 
+
-
 
+
-
/* Global Structure ============================================================= */
+
-
.container {
+
-
margin: 0 auto;
+
-
position: relative;
+
-
width: 975px;
+
-
font-size:.8125em;
+
-
}
+
-
 
+
-
/* Header */
+
-
header{
+
-
+
-
height:50px;
+
-
overflow:hidden;
+
-
background:#FFFFFF/*repeat-x;*/
+
-
border-radius: 50px;
+
-
}
+
-
+
-
/*Gallery*/
+
-
#gallery {
+
-
height:250px;
+
-
overflow:hidden;
+
-
background:url(../images/gallerry-bg.gif) 0 0 ;/*repeat-x;*/
+
-
}
+
-
+
-
/* Content */
+
-
#content {
+
-
float: left;
+
-
width: 572px;
+
-
}
+
-
+
-
/* Sidebar */
+
-
aside{
+
-
float: left;
+
-
width: 302px;
+
-
margin-right:52px;
+
-
}
+
-
+
-
/* Footer */
+
-
footer{
+
-
padding:20px 0 22px 0;
+
-
border-top:5px solid #eee;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/* Left & Right alignment */
+
-
 
+
-
.fleft { float:left;}
+
-
.fright { float:right;}
+
-
.clear { clear:both;}
+
-
 
+
-
.col-1, .col-2, .col-3 { float:left;}
+
-
 
+
-
.alignright { text-align:right;}
+
-
.aligncenter { text-align:center;}
+
-
 
+
-
.wrapper {
+
-
width:100%;
+
-
overflow:hidden;
+
-
}
+
-
 
+
-
/* The inside class provides consistent padding. To be used often! */
+
-
.inside{ padding: 32px 37px 50px 37px; }
+
-
 
+
-
 
+
-
/*----- form defaults -----*/
+
-
input, select, textarea {
+
-
font-family:Arial, Helvetica, sans-serif;
+
-
font-size:1em;
+
-
vertical-align:middle;
+
-
font-weight:normal;
+
-
}
+
-
 
+
-
/*----- other -----*/
+
-
figure { margin-bottom:18px;}
+
-
 
+
-
.img-indent {
+
-
margin:0 20px 0 0;
+
-
float:left;
+
-
}
+
-
.img-box {
+
-
width:100%;
+
-
overflow:hidden;
+
-
padding-bottom:15px;
+
-
}
+
-
.img-box figure {
+
-
float:left;
+
-
margin:0 20px 0 0;
+
-
padding:0;
+
-
}
+
-
 
+
-
.extra-wrap {
+
-
overflow:hidden;
+
-
}
+
-
 
+
-
p {margin-bottom:18px;}
+
-
.p1 { margin-bottom:9px;}
+
-
.p2 { margin-bottom:18px;}
+
-
.p3 { margin-bottom:27px;
+
-
}
+
-
 
+
-
 
+
-
/*----- txt, links, lines, titles -----*/
+
-
a {
+
-
color:#f27f02;
+
-
outline:none;
+
-
}
+
-
a:hover{
+
-
text-decoration:none;
+
-
font-size: 12%;
+
-
}
+
-
 
+
-
h1 {
+
-
font-size:34px;
+
-
line-height:1.2em;
+
-
color:#fff;
+
-
font-weight:normal;
+
-
/*background:url(../images/logo.jpg) no-repeat 0 0;*/
+
-
padding:6px 0 8px 69px;
+
-
position:absolute;
+
-
left:48px;
+
-
top:5px;
+
-
width: 80px;
+
-
height: 21px;
+
-
}
+
-
h1 a {
+
-
color:#333;
+
-
text-decoration:none;
+
-
}
+
-
h2 {
+
-
font-size:20px;
+
-
line-height:1.2em;
+
-
font-weight:normal;
+
-
color:#212222;
+
-
margin-bottom:22px;
+
-
}
+
-
h2 span {
+
-
color:#8a8a8a;
+
-
}
+
-
h3 {
+
-
font-size:1em;
+
-
margin-bottom:6px;
+
-
}
+
-
h3 a { color:#242424; }
+
-
h3 a:hover {
+
-
text-shadow: 1px 1px 1px #888;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*==================boxes====================*/
+
-
.main-box {
+
-
border-top:5px solid #eaeaea;
+
-
background:#fff;
+
-
width:100%;
+
-
}
+
-
 
+
-
 
+
-
.contacts {
+
-
padding-bottom:20px;
+
-
}
+
-
.contacts li {
+
-
width:100%;
+
-
overflow:hidden;
+
-
}
+
-
.contacts li strong {
+
-
float:left;
+
-
width:95px;
+
-
}
+
-
 
+
-
 
+
-
.list1 {
+
-
margin-left:12px;
+
-
padding-bottom:18px;
+
-
}
+
-
.list1 li {
+
-
background:url(../images/arrow1.gif) no-repeat 0 6px;
+
-
padding:0 0 0 12px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/*===== header =====*/
+
-
header nav {
+
-
float:right;
+
-
}
+
-
header nav ul li {
+
-
float:left;
+
-
}
+
-
header nav ul li a {
+
-
border-radius: 20px;
+
-
font-size:22px;
+
-
color:#000;
+
-
height:67px;
+
-
line-height:67px;
+
-
text-decoration:none;
+
-
width:101px;
+
-
text-align:center;
+
-
float:left;
+
-
/*background:#7cbc19;
+
-
background-image: gradient(top, #383282, #484095); /* FF3.6 */
+
-
background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */
+
-
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */
+
-
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */*/
+
-
background:#7cbc19;
+
-
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
+
-
}
+
-
header nav ul li a.current, header nav ul li a:hover {
+
-
padding-bottom:5px;
+
-
}
+
-
+
-
header nav ul li:nth-of-type(2) a {
+
-
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
+
-
background:#FFFFFF;
+
-
}
+
-
header nav ul li:nth-of-type(3) a {
+
-
background:#7cbc19;
+
-
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
+
-
}
+
-
header nav ul li:nth-of-type(4) a {
+
-
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
+
-
background:#FFFFFF;
+
-
}
+
-
header nav ul li:nth-of-type(5) a {
+
-
background:#7cbc19;
+
-
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
+
-
}
+
-
header nav ul li:nth-of-type(6) a {
+
-
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
+
-
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
+
-
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
+
-
background:#FFFFFF;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*===== gallery =====*/
+
-
.roundabout-holder  {
+
-
width:650px;
+
-
height:250px;
+
-
margin:0 auto;
+
-
}
+
-
.roundabout-moveable-item {
+
-
  width: 446px;
+
-
  height: 200px;
+
-
  cursor: pointer;
+
-
border:3px solid #ccc;
+
-
border:3px solid rgba(0, 0, 0, 0.08);
+
-
  border-radius:4px;
+
-
-moz-border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
}
+
-
.roundabout-moveable-item img{
+
-
width:100%;
+
-
}
+
-
.roundabout-in-focus {
+
-
border:3px solid rgba(0, 0, 0, 0.2);
+
-
}
+
-
 
+
-
 
+
-
/*===== content =====*/
+
-
#content {
+
-
+
-
}
+
-
#content img, aside img {
+
-
border:3px solid #ebebeb;
+
-
border-radius:4px;
+
-
-moz-border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
}
+
-
#content img:hover {
+
-
border-color:#bbb;
+
-
}
+
-
+
-
 
+
-
/*--- news list styles ---*/
+
-
.news li {
+
-
overflow:hidden;
+
-
position:relative;
+
-
padding:0 0 26px 84px;
+
-
}
+
-
.news li:last-child {
+
-
padding-bottom:0;
+
-
}
+
-
+
-
.news li figure {
+
-
width:59px;
+
-
height:59px;
+
-
background:url(../images/date-bg1.gif) no-repeat 0 0;
+
-
position:absolute;
+
-
left:0;
+
-
top:0;
+
-
text-align:center;
+
-
border:3px solid #ebebeb;
+
-
border-radius:4px;
+
-
-moz-border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
font-size:10px;
+
-
color:#fff;
+
-
text-transform:uppercase;
+
-
}
+
-
.news li figure strong {
+
-
display:block;
+
-
font-size:30px;
+
-
line-height:1.2em;
+
-
margin-bottom:-7px;
+
-
padding-top:4px;
+
-
}
+
-
+
-
.news li:nth-of-type(4n+2) figure {
+
-
background:url(../images/date-bg2.gif) no-repeat 0 0;
+
-
}
+
-
.news li:nth-of-type(4n+3) figure {
+
-
background:url(../images/date-bg3.gif) no-repeat 0 0;
+
-
}
+
-
.news li:nth-of-type(4n+4) figure {
+
-
background:url(../images/date-bg4.gif) no-repeat 0 0;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
.team-list li {
+
-
width:100%;
+
-
overflow:hidden;
+
-
padding-bottom:43px;
+
-
}
+
-
.team-list li:last-child {
+
-
padding-bottom:0;
+
-
}
+
-
.team-list li figure {
+
-
float:left;
+
-
margin:0 20px 0 0;
+
-
padding:0;
+
-
}
+
-
 
+
-
 
+
-
/*--- loopedSlider styles ---*/
+
-
/*
+
-
* Required
+
-
*/
+
-
#loopedSlider .wrap { width:295px; height:295px; overflow:hidden; position:relative;}
+
-
#loopedSlider .slides { position:absolute; top:0; left:0; }
+
-
#loopedSlider .slides div { position:absolute; top:0; width:295px; display:none; }
+
-
/*
+
-
* Optional
+
-
*/
+
-
#loopedSlider { width:295px; position:relative; clear:both; }
+
-
#loopedSlider .nav-controls {
+
-
width:100%;
+
-
overflow:hidden;
+
-
padding-top:10px;
+
-
}
+
-
#loopedSlider li {
+
-
display:inline;
+
-
}
+
-
#loopedSlider li a.previous {
+
-
float:left;
+
-
}
+
-
#loopedSlider li a.next {
+
-
float:right;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*===== footer =====*/
+
-
footer {
+
-
color:#fff;
+
-
}
+
-
footer .fleft {
+
-
padding-left:40px;
+
-
}
+
-
footer .fright {
+
-
padding-right:40px;
+
-
}
+
-
 
+
-
 
+
-
/*----- forms -----*/
+
-
#contacts-form {
+
-
clear:right;
+
-
width:100%;
+
-
overflow:hidden;
+
-
}
+
-
#contacts-form fieldset {
+
-
border:none;
+
-
float:left;
+
-
}
+
-
#contacts-form .field {
+
-
clear:both;
+
-
}
+
-
#contacts-form label {
+
-
float:left;
+
-
width:110px;
+
-
line-height:18px;
+
-
padding-bottom:6px;
+
-
font-weight:bold;
+
-
}
+
-
#contacts-form input {
+
-
width:205px;
+
-
padding:1px 0 1px 3px;
+
-
background:none;
+
-
border:1px solid #e5e5e5;
+
-
color:#616161;
+
-
float:left
+
-
}
+
-
#contacts-form input:invalid {
+
-
border-color:red;
+
-
}
+
-
#contacts-form textarea {
+
-
width:450px;
+
-
height:215px;
+
-
padding:1px 0 1px 3px;
+
-
background:none;
+
-
border:1px solid #e5e5e5;
+
-
color:#616161;
+
-
margin-bottom:12px;
+
-
overflow:auto;
+
-
float:left;
+
-
}
+
-
#contacts-form div:last-child {
+
-
padding-left:110px;
+
-
}
+
-
 
+
-
/*==========================================*/
+
-
</style>
+
-
 
+
   <title>Team:SYSU-Guang Zhou</title>
   <title>Team:SYSU-Guang Zhou</title>
   <meta charset="utf-8">
   <meta charset="utf-8">

Revision as of 15:51, 12 July 2012

<!DOCTYPE html> Team:SYSU-Guang Zhou

SYSU

Welcome to Our SYSU!

SYSU is a free web template created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution. It is also HTML5 & CSS3 valid.

This website template has several pages: Home, About us, Privacy Policy, Gallery, Contact us (note that contact us form 鈥?doesn鈥檛 work), Site Map.

This website template can be delivered in two packages - with PSD source files included and without them. If you need PSD source files, please go to the template download page at TemplateMonster to leave the e-mail address that you want the template ZIP package to be delivered to.
Copyright - Type in your name here
Website template designed by TemplateMonster.com    |    3D Models provided by Templates.com

Retrieved from "http://2012.igem.org/Team:SYSU-Software"