Template:Team:UESTC/style.css
From 2013.igem.org
/*
nav style */
nav{ position:fixed; z-index: 50; top:15px;
width:100%; height:45px; background-color:#EC6100; left:0%; text-align:center;
} .toggleMenu {
display: none; background: #666; padding: 10px 15px; color: #fff; position: absolute; top: 83px; left: 0px;
} .nav {
position:relative; top:0px; display: inline-block; margin:0px; padding:0px; list-style: none; background:#EC6100; height: 45px; font:1.6em BuxtonSketch,arial,verdana;
} .nav:before, .nav:after {
content: " "; display: block;
} .nav:after {
clear: both;
} .nav ul {
list-style: none; width: 9em;
} .nav a {
padding: 10px 15px; color:#fff;
} .nav .current a, .nav li:hover > a {
background:#7788aa url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png') repeat-x 0 -20px; color:#000;
text-decoration:none; } .nav li {
position: relative;
} .nav > li {
float: left; border-top: 1px solid #EC6100;
} .nav > li > .parent {
background-image: url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png'); background-repeat: no-repeat; background-position: right;
} .nav > li > a {
display: block;
} .nav li ul {
position: absolute; left: -9999px;
} .nav > li.hover > ul {
left: 0; top:20px;
} .nav li li.hover ul {
left: 100%; top: 0;
} .nav li li li a {
background:#EC6100; z-index:200; border-top: 1px solid #1d7a62;
} .nav ul li:first-child > a { } .nav ul li:last-child > a { } .nav ul {
padding:0; width:300px; background-color:#EC6100; border:1px solid #7788aa;
} .part {
background-color: white; width: 100%; height: auto;
} /*
projects nav style */
- nav_proj {
width: 100%; height: 100px; z-index:50; background-color:white;
} /*
notebook nav style */
- nav_notebook {
height: 250px; z-index: 50; background-color:white;
} /*
home part style */
- home {
height: 560px; background-color:#0EA6EA;
background:-webkit-gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:-ms-gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:-moz-linear-gradient(top,#0EA6EA,#F8FCFE); background:-0-linear-gradient(top,#0EA6EA,#F8FCFE); background:linear-gradient(top,#0EA6EA,#F8FCFE); filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#0EA6EA',endColorstr='#F8FCFE'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#0EA6EA',endColorstr='#F8FCFE')";
z-index:0;
}
- logo {
height: 150px; width:46.875%;/* 600/1280 */ margin:0 auto; position:relative; top:50px; z-index:10;
}
#logo #team_logo { float: left; } #logo #igem_logo { float: right; }
/*
moving cloud style */
- experiment{
position: relative; top:0px; height:200px; z-index: 5; }
- background {
background: url('https://2013.igem.org/File:Cloud_back.png') repeat-x;
background: url('https://static.igem.org/mediawiki/2013/7/70/UESTC_cloud2.png') 5% 5%, url('https://static.igem.org/mediawiki/2013/3/33/Cloud_front.jpg') 50% 50%, url('https://2013.igem.org/File:Cloud_back.png') 90% 110% repeat-x; top: -136px; left: 0; right: 0; position:absolute; -webkit-transition: left 300s linear; -moz-transition: left 300s linear; -o-transition: left 300s linear; -ms-transition: left 300s linear; transition: left 300s linear; z-index: 5; height:275px;
}
body:target #background {
left: -5000px;
}
body:hover #background {
left: -9999px;
}
- hi {
height: auto; width: 46.875%; /* 600/1280 */ position:relative; top:-110px; margin:0 auto; font: 1.8em BuxtonSketch,arial,verdana; z-index:5; text-align:center;
}
- team_photo {
position:relative; top: -56px; display:block; margin:0 auto; z-index:5;
} /*
responsive pic */
img {
max-width: 100%;
}
- project {
height: 700px; background-color:orange; z-index:1;
}
#project .line { position:relative; top:683px; height:18px; background: url() repeat-x; }
/*
project slideshow style */
- camera_wrap_1 {
max-width: 1280px; max-height:600px; width:95%; margin: 0 2.25%; z-index:5;
}
.fadeFromBottom h1 { font: 2em arial,verdana; color:white; } .fadeFromBottom span { color: red; }
/*
team info style */
- team_info {
height: 1700px; background:url() #1B1B1B;
}
- greetings {
width: 80%; height: auto; text-align: justify; margin: 0 auto; font: 1.8em BuxtonSketch,arial,verdana; color:white;
}
#greetings h1 { color: white; font: 2.0em BuxtonSketch,arial,verdana; }
.mem_panel {
width: 80%; height: auto; display: block; margin: 0 auto;
}
.mem_panel h1 { font: 2.0em BuxtonSketch,arial,verdana; color: white; } .mem_list { margin: 0 0 5em; padding: 0; list-style-type: none; overflow: visible; text-align:center; } .mem_list li { display: block; width:150px; margin:0.8em 3em; height:auto; float:left; z-index:0; } .mem_list li span { margin: 0 auto; font: 1.5em BuxtonSketch,arial,verdana; color:white; }
- student_members {
height: 480px;
}
- advisors {
height: 260px;
}
- instructors {
height: 260px;
} .show {
position: relative; top: 150px; left: 150px;
} .show_content {
z-index: 5;
} /*
contact us style */
- contact {
width: 80%; margin: 0 auto;
}
- contact h1 {
font: 2.0em BuxtonSketch,arial,verdana; color: white;
}
- school_StreetView {
height: 400px; width:80%; margin:0 auto; text-align:center;
}
#school_StreetView .campus{ display:block; height: 250px; width: 45%; margin: 0 1em; float:left; } #school_StreetView .campus embed { height: 250px; width: 100%; } #school_StreetView .campus span { position: relative; top: 0px; margin: 0 auto; font:1.2em BuxtonSketch,arial,verdana; color:white; }
- streetView_info {
position: relative; top: 25px; margin: 0 auto; font:0.8em arial,verdana; color:white;
} /*
notebook style */
- notebook {
height: 1150px; background:url();
}
- container {
height: 500px;
}
- container nav {
width: auto; height: auto; background-color: white;
}
- voice_note {
display:block; position:relative; width: 80%; height: 500px; margin:0 auto; top:50px;
} /*
mf style */
- mf {
height: 300px; background-color: #D18817;
} /*
human practice style */
- hp {
height: auto; background-color: #99D8F6; background: -webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#99D8F6)); background: -ms-gradient(linear,left top,left bottom,from(#FFFFFF),to(#99D8F6)); background: gradient(linear,left top,left bottom,from(#FFFFFF),to(#99D8F6)); background: -moz-linear-gradient(top,#FFFFFF,#99D8F6); background: -0-linear-gradient(top,#FFFFFF,#99D8F6); background: linear-gradient(top,#FFFFFF,#99D8F6); filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#FFFFFF',endColorstr='#99D8F6'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#FFFFFF',endColorstr='#99D8F6')";
}
- action_info {
width: 80%; height: auto; text-align: justify; margin: 0 auto; font: 1.8em BuxtonSketch,arial,verdana; margin-bottom:20px;
} /*
#pg style */
- pg {
position:relative; top:-20px; height: auto; background-color:#99D8F6;
}
- photo_gallery {
width: 80%; height: 600px; margin: 0 auto;
}
#photo_gallery h1 { font: 2.5em BuxtonSketch,arial,verdana; } #photo_gallery span { font: 1.2em BuxtonSketch,arial,verdana; color:red; display: block; width: 200px; height: auto; position: relative; top: 0px; left: 0px; }
.gallery {
margin: 0 0 5em; padding: 0; list-style-type: none; overflow: visible; height: auto;
}
.gallery li { display: block; width: 150px; margin: 0.8em 3em; float: left; z-index: 0; }
/*
#main_footer style */
- main_footer {
position:relative; top:-20px; height: 500px; background-color: #59493F;
}
- main_footer .line {
position:relative; top:0px; height: 20px; background: url() repeat-x;
}
#main_footer #footer_head_1 { display: block; width:80%; position: relative; top: 27px; left: 13%; font: 2.5em BuxtonSketch,arial,verdana; color:white; } #main_footer #footer_head_2 { display: block; width: 68%; height:100px; position: relative; top: 34px; left: 13%; font: 2.5em BuxtonSketch,arial,verdana; color: white; } #main_footer #footer_p { display: block; width: 80%; position: relative; top: 43px; left: 13%; font: 1.5em BuxtonSketch,arial,verdana; color: white; }
- thanks_people {
position: relative; height:150px; top: 0px;
}
- thanks_org {
position: relative; height:120px; top: 0px;
}
- thanks_org .mem_list li {
display: block; width:250px; margin:0.8em 3em; height:auto; float:left; z-index:0; }
/*
some media queries */
@media screen and (min-width:0px) and (max-width:1150px) {
/* change in #team_info */ .mem_list li { margin: 0.8em 2em; } #student_members { height: 482px; } #school_StreetView { width: 100%; } #team_info { height: 1785px; } /* change in #team_photo */ #team_photo { top: -65px; }
/* change in #pg */ .gallery li{ margin: 0.8em 1em; }
}