Team:Peking/css/homeforhead.css
From 2014.igem.org
(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; | |
- | + | background-repeat: no-repeat; | |
+ | background-size: 100% 100%; | ||
width: 100%; | width: 100%; | ||
- | + | margin-top: 0px; | |
- | margin- | + | margin-bottom: 0px; |
- | + | background-attachment: fixed; | |
+ | text-align: center; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2014/0/09/Peking2014wcg_body2.jpg); | ||
+ | |||
} | } | ||
- | # | + | #mainbody { |
- | width: | + | width: 85%; |
- | height: | + | 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; | ||
} | } | ||
- | # | + | |
+ | #top1 { | ||
width: 100%; | width: 100%; | ||
- | + | margin-bottom: 10px; | |
- | margin-bottom: | + | |
} | } | ||
- | # | + | |
- | + | #top1 #topnav { | |
- | + | border-bottom-left-radius: 20px; | |
- | + | border-bottom-right-radius: 20px; | |
- | + | padding-top: 12px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
width: 100%; | width: 100%; | ||
- | + | height: 80px; | |
- | + | background-color: #FFFFFF; | |
- | + | display: block; | |
} | } | ||
- | # | + | #top1 #topnav ul { |
- | + | list-style: none; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #top1 #topnav ul li { |
- | + | float: left; | |
- | + | width: 10%; | |
- | font-size: | + | color: #000000; |
- | text- | + | 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; | ||
} | } | ||
- | # | + | |
- | width: | + | #top1 #topnav #con{ |
- | + | z-index: 5; | |
- | position: | + | 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; | ||
} | } | ||
- | |||
- | |||
+ | #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 { | |
- | # | + | width: 53%; |
- | + | ||
- | + | ||
- | width: | + | |
} | } | ||
- | + | #top1 #topnav ul .sublist li { | |
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
text-align: left; | 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; | ||
} | } | ||
- | # | + | |
- | + | #top1 #topnav ul li:hover > .a1a { | |
- | + | display: block; | |
- | + | color: #339999; | |
+ | line-height: 61px; | ||
+ | border-bottom: thick solid #339999; | ||
} | } | ||
- | # | + | |
- | + | #top1 #topnav ul .sublist li:hover > .a2a { | |
- | + | color: #339999; | |
- | + | ||
} | } | ||
- | # | + | |
- | + | #top1 #topnav ul .sublist li:hover { | |
- | + | border-left: medium solid #339999; | |
} | } | ||
- | # | + | |
- | + | ||
- | + | #titlepic { | |
- | + | width: 100%; | |
+ | z-index: 0; | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 20px; | ||
} | } | ||
- | # | + | #titlepic img { |
- | + | width: 100%; | |
- | + | ||
} | } | ||
- | # | + | #bottom { |
- | + | width: 100%; | |
- | + | margin-top: 43px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #bottom img { |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
width: 100%; | width: 100%; | ||
- | margin-top: | + | border-top-left-radius: 20px; |
+ | border-top-right-radius: 20px; | ||
+ | margin-top: 40px; | ||
} | } | ||
- | + | #mainbody #jumpup { | |
- | #mainbody # | + | position: fixed; |
- | + | right: 20px; | |
- | + | bottom: 120px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | #mainbody # | + | #mainbody #jumpdown { |
- | + | bottom: 60px; | |
- | + | right: 40px; | |
- | + | position: fixed; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | p{ | ||
+ | text-align: justify;} |
Latest revision as of 00:59, 18 October 2014
@charset "utf-8";
- 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();
}
- 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; }
- top1 {
width: 100%; margin-bottom: 10px; }
- top1 #topnav {
border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-top: 12px; width: 100%; height: 80px; background-color: #FFFFFF; display: block; }
- top1 #topnav ul {
list-style: none; }
- top1 #topnav ul li {
float: left; width: 10%; color: #000000; 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; }
- 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; }
- 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 {
width: 53%; }
- 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; }
- top1 #topnav ul li:hover > .a1a {
display: block; color: #339999; line-height: 61px; border-bottom: thick solid #339999; }
- top1 #topnav ul .sublist li:hover > .a2a {
color: #339999; }
- top1 #topnav ul .sublist li:hover {
border-left: medium solid #339999; }
- titlepic {
width: 100%; z-index: 0; margin-top: 20px; margin-bottom: 20px; }
- titlepic img {
width: 100%; }
- bottom {
width: 100%; margin-top: 43px; }
- bottom img {
width: 100%; border-top-left-radius: 20px; border-top-right-radius: 20px; margin-top: 40px; }
- mainbody #jumpup {
position: fixed; right: 20px; bottom: 120px; }
- mainbody #jumpdown {
bottom: 60px; right: 40px; position: fixed; } p{ text-align: justify;}