Team:Peking/css/homeforhead.css

From 2014.igem.org

(Difference between revisions)
 
(2 intermediate revisions not shown)
Line 1: Line 1:
@charset "utf-8";
@charset "utf-8";
 +
#clc {
 +
float: none;
 +
clear: both;
 +
}
 +
.c {
 +
clear: both;
 +
}
 +
body {
-
 
+
float: none;
-
#titlepic {
+
background-repeat: no-repeat;
 +
background-size: 100% 100%;
width: 100%;
width: 100%;
-
z-index: 0;
+
margin-top: 0px;
-
margin-top: 20px;
+
margin-bottom: 0px;
-
margin-bottom: 20px;
+
background-attachment: fixed;
 +
text-align: center;
 +
background-image: url(https://static.igem.org/mediawiki/2014/0/09/Peking2014wcg_body2.jpg);
 +
 
}
}
-
#titlepic img {
+
#mainbody {
-
width: 60%;
+
width: 85%;
-
height: 100px;
+
max-width: 1200px;
 +
min-width: 1100px;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
 
 +
font-size: 16px;
 +
line-height: 20px;
 +
font-family: calibri, Arial, sans-serif;
}
}
-
#mid1 {
+
 
 +
#top1 {
width: 100%;
width: 100%;
-
float: left;
+
margin-bottom: 10px;
-
margin-bottom: 30px;
+
}
}
-
#mid1 #mid1left {
+
 
-
width: 58%;
+
#top1 #topnav {
-
float: left;
+
border-bottom-left-radius: 20px;
-
background-image: url(https://static.igem.org/mediawiki/2014/e/e0/Peking2014wcg_algal.jpg);
+
border-bottom-right-radius: 20px;
-
background-repeat: no-repeat;
+
padding-top: 12px;
-
background-size: 100% 100%;
+
-
position: relative;
+
-
border-radius: 15px;
+
-
}
+
-
#mid1 #mid1left #cover {
+
-
background-color: rgba(0,0,0,0.6);
+
-
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
+
-
color: #FFFFFF;
+
-
opacity: 0.8;
+
-
bottom: 0px;
+
width: 100%;
width: 100%;
-
position: absolute;
+
height: 80px;
-
border-bottom-right-radius: 15px;
+
background-color: #FFFFFF;
-
border-bottom-left-radius: 15px;
+
display: block;
}
}
-
#mid1 #mid1left #cover .habstract {
+
#top1 #topnav ul {
-
line-height: 40px;
+
list-style: none;
-
font-size:2em;
+
-
        color:white;
+
}
}
-
#mid1 #mid1left #cover #pabstract {
+
#top1 #topnav ul li {
-
padding-right: 2em;
+
float: left;
-
padding-left: 2em;
+
width: 10%;
-
font-size:1.2em;
+
color: #000000;
-
text-align: left;
+
text-align: center;
 +
}
 +
#top1 #topnav ul .a1a {
 +
color: #80c269;
 +
text-decoration: none;
 +
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
 +
font-size: large;
 +
font-style: normal;
 +
font-variant: normal;
 +
font-weight: bold;
 +
line-height: 65px;
 +
display: block;
 +
}
 +
#top1 #topnav ul .a2a  {
 +
color: #80c269;
 +
text-decoration: none;
 +
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
 +
font-size: large;
 +
font-style: normal;
 +
font-variant: normal;
 +
font-weight: bold;
 +
display: block;
 +
line-height: 0.8em;
}
}
-
#mid1 #mid1right {
+
 
-
width: 40%;
+
#top1 #topnav #con{
-
float: right;
+
    z-index: 5;
-
position: relative;
+
height: 1px;
 +
width: 30%;
 +
overflow-y: hidden;
 +
opacity: 0.5;
 +
position:absolute;
 +
transition: opacity 1s, height 1s;
 +
-moz-transition: opacity 1s, height 1s;
 +
-webkit-transition: opacity 1s, height 1s;
 +
-o-transition: opacity 1s, height 1s;
}
}
-
#mid1 #mid1right #slider #SliderName_2 img {
 
-
border-radius: 15px;
 
 +
#top1 #topnav ul li:hover > #con{
 +
height:15em;
 +
opacity:1;
}
}
 +
#top1 #topnav .sublist{
 +
position:relative;
 +
left:-1.6em;
 +
}
 +
#top1 #topnav #Team .sublist {
 +
width: 30%;
 +
}
 +
#top1 #topnav #Project .sublist {
 +
width: 53%;
 +
}
 +
#top1 #topnav #Modeling .sublist {
 +
width: 50%;
 +
}
 +
#top1 #topnav #Achievements .sublist {
 +
width: 40%;
 +
}
-
 
+
#top1 #topnav #Human .sublist {
-
#mid2 {
+
width: 53%;
-
float: left;
+
-
font-size:1.2em;
+
-
width: 100%;
+
}
}
-
 
+
#top1 #topnav ul .sublist li  {
-
#mainbody #mid2 #mid2left {
+
-
width: 37%;
+
-
float: left;
+
-
margin-top: 50px;
+
-
}
+
-
#mainbody #mid2 p    {
+
text-align: left;
text-align: left;
-
padding-top: 27px;
+
background-color: #FFFFFF;
-
padding-right: 27px;
+
width: 100%;
-
padding-bottom: 27px;
+
position: relative;
-
padding-left: 32px;
+
border-left: thick solid #80c269;
-
color: #FFFFFF;
+
margin-top: 0px;
 +
margin-right: 2px;
 +
margin-bottom: 8px;
 +
margin-left: 2px;
 +
z-index: 1;
 +
float: none;
 +
padding-top: 5px;
 +
padding-right: 5px;
 +
padding-bottom: 5px;
 +
padding-left: 5px;
}
}
-
#mainbody .subgroupl {
+
 
-
background-image: url(https://static.igem.org/mediawiki/2014/e/e0/Peking2014wcg_lframe.png);
+
#top1 #topnav ul li:hover > .a1a {
-
background-repeat: no-repeat;
+
display: block;
-
background-size: 100% 100%;
+
color: #339999;
 +
line-height: 61px;
 +
border-bottom: thick solid #339999;
}
}
-
#mainbody #mid2 #mid2center img {
+
 
-
width: 24%;
+
#top1 #topnav ul .sublist li:hover > .a2a {
-
float: left;
+
color: #339999;
-
margin-left: 0.5%;
+
}
}
-
#mainbody #mid2 #mid2right {
+
 
-
width: 37%;
+
#top1 #topnav ul .sublist li:hover  {
-
float: right;
+
border-left: medium solid #339999;
}
}
-
#mainbody .subgroupr  {
+
 
-
background-image: url(https://static.igem.org/mediawiki/2014/1/13/Peking2014wcg_rframe.png);
+
 
-
background-repeat: no-repeat;
+
#titlepic {
-
background-size: 100% 100%;
+
width: 100%;
 +
z-index: 0;
 +
margin-top: 20px;
 +
margin-bottom: 20px;
}
}
-
#mid2 a{
+
#titlepic img {
-
color:white;
+
width: 100%;
-
font-size:24px;
+
}
}
-
#mid2 a:hover{
+
#bottom {
-
font-size:34px;
+
width: 100%;
-
}
+
margin-top: 43px;
-
#mid3 a{
+
-
color:white;
+
-
font-size:24px;
+
}
}
-
#mid3 a:hover{
+
#bottom img {
-
font-size:34px;
+
-
}
+
-
 
+
-
#mid3 {
+
-
float: left;
+
-
font-size:1.2em;
+
width: 100%;
width: 100%;
-
margin-top: 15px;
+
border-top-left-radius: 20px;
 +
border-top-right-radius: 20px;
 +
margin-top: 40px;
}
}
-
 
+
#mainbody #jumpup {
-
#mainbody #mid3 p    {
+
position: fixed;
-
text-align: left;
+
right: 20px;
-
padding-top: 27px;
+
bottom: 120px;
-
padding-right: 27px;
+
-
padding-bottom: 27px;
+
-
padding-left: 32px;
+
-
color: #FFFFFF;
+
}
}
-
#mainbody #mid3 #mid3left {
+
#mainbody #jumpdown {
-
width: 37%;
+
bottom: 60px;
-
float: left;
+
right: 40px;
-
}
+
position: fixed;
-
 
+
-
#mainbody #mid3 #mid3center img {
+
-
width: 24%;
+
-
float: left;
+
-
margin-left: 0.5%;
+
-
}
+
-
#mainbody #mid3 #mid3right {
+
-
width: 37%;
+
-
float: right;
+
}
}
 +
p{
 +
text-align: justify;}

Latest revision as of 00:59, 18 October 2014

@charset "utf-8";

  1. clc {

float: none; clear: both; } .c { clear: both; } body {

float: none; background-repeat: no-repeat; background-size: 100% 100%; width: 100%; margin-top: 0px; margin-bottom: 0px; background-attachment: fixed; text-align: center; background-image: url(Peking2014wcg_body2.jpg);

}

  1. mainbody {

width: 85%; max-width: 1200px; min-width: 1100px; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto;

font-size: 16px; line-height: 20px; font-family: calibri, Arial, sans-serif; }

  1. top1 {

width: 100%; margin-bottom: 10px; }

  1. top1 #topnav {

border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-top: 12px; width: 100%; height: 80px; background-color: #FFFFFF; display: block; }

  1. top1 #topnav ul {

list-style: none; }

  1. top1 #topnav ul li {

float: left; width: 10%; color: #000000; text-align: center; }

  1. top1 #topnav ul .a1a {

color: #80c269; text-decoration: none; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: large; font-style: normal; font-variant: normal; font-weight: bold; line-height: 65px; display: block; }

  1. top1 #topnav ul .a2a {

color: #80c269; text-decoration: none; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: large; font-style: normal; font-variant: normal; font-weight: bold; display: block; line-height: 0.8em; }


  1. top1 #topnav #con{ 
   z-index: 5;

height: 1px; width: 30%; overflow-y: hidden; opacity: 0.5; position:absolute; transition: opacity 1s, height 1s; -moz-transition: opacity 1s, height 1s; -webkit-transition: opacity 1s, height 1s; -o-transition: opacity 1s, height 1s; }

  1. top1 #topnav ul li:hover > #con{

height:15em; opacity:1; }


  1. top1 #topnav .sublist{

position:relative; left:-1.6em; }

  1. top1 #topnav #Team .sublist {

width: 30%; }

  1. top1 #topnav #Project .sublist {

width: 53%; }

  1. top1 #topnav #Modeling .sublist {

width: 50%; }

  1. top1 #topnav #Achievements .sublist {

width: 40%; }

  1. top1 #topnav #Human .sublist {

width: 53%; }


  1. top1 #topnav ul .sublist li {

text-align: left; background-color: #FFFFFF; width: 100%; position: relative; border-left: thick solid #80c269; margin-top: 0px; margin-right: 2px; margin-bottom: 8px; margin-left: 2px; z-index: 1; float: none; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; }

  1. top1 #topnav ul li:hover > .a1a {

display: block; color: #339999; line-height: 61px; border-bottom: thick solid #339999; }

  1. top1 #topnav ul .sublist li:hover > .a2a {

color: #339999; }

  1. top1 #topnav ul .sublist li:hover {

border-left: medium solid #339999; }


  1. titlepic {

width: 100%; z-index: 0; margin-top: 20px; margin-bottom: 20px; }

  1. titlepic img {

width: 100%; }

  1. bottom {

width: 100%; margin-top: 43px; }

  1. bottom img {

width: 100%; border-top-left-radius: 20px; border-top-right-radius: 20px; margin-top: 40px; }

  1. mainbody #jumpup {

position: fixed; right: 20px; bottom: 120px; }

  1. mainbody #jumpdown {

bottom: 60px; right: 40px; position: fixed; } p{ text-align: justify;}

Retrieved from "http://2014.igem.org/Team:Peking/css/homeforhead.css"