Team:Peking/css/homeforhead.css

From 2014.igem.org

(Difference between revisions)
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%;
 
-
margin-top: 0px;
 
-
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: 85%;
 
-
max-width: 1200px;
 
-
min-width: 1000px;
 
-
margin-top: 0px;
 
-
margin-bottom: 0px;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
font-size: 14px;
 
-
line-height: 25px;
 
-
font-family: calibri, Arial, sans-serif;
 
-
}
 
-
#top1 {
+
#titlepic {
width: 100%;
width: 100%;
-
margin-bottom: 10px;
+
z-index: 0;
 +
margin-top: 20px;
 +
margin-bottom: 20px;
}
}
-
 
+
#titlepic img {
-
#top1 #topnav {
+
width: 60%;
-
border-bottom-left-radius: 20px;
+
height: 100px;
-
border-bottom-right-radius: 20px;
+
}
-
padding-top: 12px;
+
#mid1 {
width: 100%;
width: 100%;
-
height: 80px;
+
float: left;
-
background-color: #FFFFFF;
+
margin-bottom: 30px;
-
display: block;
+
}
}
-
#top1 #topnav ul {
+
#mid1 #mid1left {
-
list-style: none;
+
width: 58%;
-
}
+
-
 
+
-
#top1 #topnav ul li {
+
float: left;
float: left;
-
width: 10%;
+
background-image: url(https://static.igem.org/mediawiki/2014/e/e0/Peking2014wcg_algal.jpg);
-
color: #000000;
+
background-repeat: no-repeat;
-
text-align: center;
+
background-size: 100% 100%;
 +
position: relative;
 +
border-radius: 15px;
}
}
-
#top1 #topnav ul .a1a  {
+
#mid1 #mid1left #cover {
-
color: #80c269;
+
background-color: rgba(0,0,0,0.6);
-
text-decoration: none;
+
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
-
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
+
color: #FFFFFF;
-
font-size: large;
+
opacity: 0.8;
-
font-style: normal;
+
bottom: 0px;
-
font-variant: normal;
+
width: 100%;
-
font-weight: bold;
+
position: absolute;
-
line-height: 65px;
+
border-bottom-right-radius: 15px;
-
display: block;
+
border-bottom-left-radius: 15px;
}
}
-
#top1 #topnav ul .a2a  {
+
#mid1 #mid1left #cover .habstract {
-
color: #80c269;
+
line-height: 40px;
-
text-decoration: none;
+
font-size:2em;
-
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
+
        color:white;
-
font-size: large;
+
-
font-style: normal;
+
-
font-variant: normal;
+
-
font-weight: bold;
+
-
display: block;
+
-
line-height: 0.8em;
+
}
}
 +
#mid1 #mid1left #cover #pabstract  {
 +
padding-right: 2em;
 +
padding-left: 2em;
 +
font-size:1.2em;
 +
text-align: left;
 +
}
-
#top1 #topnav #con{
+
#mid1 #mid1right {
-
    z-index: 5;
+
width: 40%;
-
height: 1px;
+
float: right;
-
width: 30%;
+
position: relative;
-
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 {
+
 
-
width: 53%;
+
#mid2 {
 +
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;
-
background-color: #FFFFFF;
+
padding-top: 27px;
-
width: 100%;
+
padding-right: 27px;
-
position: relative;
+
padding-bottom: 27px;
-
border-left: thick solid #80c269;
+
padding-left: 32px;
-
margin-top: 0px;
+
color: #FFFFFF;
-
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 {
-
#top1 #topnav ul li:hover > .a1a {
+
background-image: url(https://static.igem.org/mediawiki/2014/e/e0/Peking2014wcg_lframe.png);
-
display: block;
+
background-repeat: no-repeat;
-
color: #339999;
+
background-size: 100% 100%;
-
line-height: 61px;
+
-
border-bottom: thick solid #339999;
+
}
}
-
 
+
#mainbody #mid2 #mid2center img {
-
#top1 #topnav ul .sublist li:hover > .a2a {
+
width: 24%;
-
color: #339999;
+
float: left;
 +
margin-left: 0.5%;
}
}
-
 
+
#mainbody #mid2 #mid2right {
-
#top1 #topnav ul .sublist li:hover  {
+
width: 37%;
-
border-left: medium solid #339999;
+
float: right;
}
}
-
 
+
#mainbody .subgroupr  {
-
 
+
background-image: url(https://static.igem.org/mediawiki/2014/1/13/Peking2014wcg_rframe.png);
-
#titlepic {
+
background-repeat: no-repeat;
-
width: 100%;
+
background-size: 100% 100%;
-
z-index: 0;
+
-
margin-top: 20px;
+
-
margin-bottom: 20px;
+
}
}
-
#titlepic img {
+
#mid2 a{
-
width: 100%;
+
color:white;
-
height: 100px;
+
font-size:24px;
}
}
-
#bottom {
+
#mid2 a:hover{
-
width: 100%;
+
font-size:34px;
-
margin-top: 43px;
+
}
 +
#mid3 a{
 +
color:white;
 +
font-size:24px;
}
}
-
#bottom img {
+
#mid3 a:hover{
 +
font-size:34px;
 +
}
 +
 
 +
#mid3 {
 +
float: left;
 +
font-size:1.2em;
width: 100%;
width: 100%;
-
border-top-left-radius: 20px;
+
margin-top: 15px;
-
border-top-right-radius: 20px;
+
-
margin-top: 40px;
+
}
}
-
#mainbody #jumpup {
+
 
-
position: fixed;
+
#mainbody #mid3 p    {
-
right: 20px;
+
text-align: left;
-
bottom: 120px;
+
padding-top: 27px;
 +
padding-right: 27px;
 +
padding-bottom: 27px;
 +
padding-left: 32px;
 +
color: #FFFFFF;
}
}
-
#mainbody #jumpdown {
+
#mainbody #mid3 #mid3left {
-
bottom: 60px;
+
width: 37%;
-
right: 40px;
+
float: left;
-
position: fixed;
+
}
 +
 
 +
#mainbody #mid3 #mid3center img {
 +
width: 24%;
 +
float: left;
 +
margin-left: 0.5%;
 +
}
 +
#mainbody #mid3 #mid3right {
 +
width: 37%;
 +
float: right;
}
}

Revision as of 22:10, 17 October 2014

@charset "utf-8";


  1. titlepic {

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

  1. titlepic img {

width: 60%; height: 100px; }

  1. mid1 {

width: 100%; float: left; margin-bottom: 30px; }

  1. mid1 #mid1left {

width: 58%; float: left; background-image: url(Peking2014wcg_algal.jpg); background-repeat: no-repeat; background-size: 100% 100%; position: relative; border-radius: 15px; }

  1. 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%; position: absolute; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; }

  1. mid1 #mid1left #cover .habstract {

line-height: 40px; font-size:2em; 

       color:white;

}

  1. mid1 #mid1left #cover #pabstract {

padding-right: 2em; padding-left: 2em; font-size:1.2em; text-align: left; }

  1. mid1 #mid1right {

width: 40%; float: right; position: relative; }

  1. mid1 #mid1right #slider #SliderName_2 img {

border-radius: 15px;

}




  1. mid2 {

float: left; font-size:1.2em; width: 100%; }


  1. mainbody #mid2 #mid2left {

width: 37%; float: left; margin-top: 50px; }

  1. mainbody #mid2 p {

text-align: left; padding-top: 27px; padding-right: 27px; padding-bottom: 27px; padding-left: 32px; color: #FFFFFF; }

  1. mainbody .subgroupl {

background-image: url(Peking2014wcg_lframe.png); background-repeat: no-repeat; background-size: 100% 100%; }

  1. mainbody #mid2 #mid2center img {

width: 24%; float: left; margin-left: 0.5%; }

  1. mainbody #mid2 #mid2right {

width: 37%; float: right; }

  1. mainbody .subgroupr {

background-image: url(Peking2014wcg_rframe.png); background-repeat: no-repeat; background-size: 100% 100%; }

  1. mid2 a{

color:white; font-size:24px; }

  1. mid2 a:hover{

font-size:34px; }

  1. mid3 a{

color:white; font-size:24px; }

  1. mid3 a:hover{

font-size:34px; }

  1. mid3 {

float: left; font-size:1.2em; width: 100%; margin-top: 15px; }

  1. mainbody #mid3 p {

text-align: left; padding-top: 27px; padding-right: 27px; padding-bottom: 27px; padding-left: 32px; color: #FFFFFF; }

  1. mainbody #mid3 #mid3left {

width: 37%; float: left; }

  1. mainbody #mid3 #mid3center img {

width: 24%; float: left; margin-left: 0.5%; }

  1. mainbody #mid3 #mid3right {

width: 37%; float: right; }

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