Team:SYSU-China/css/main1.css

From 2014.igem.org

(Difference between revisions)
(Created page with "@charset "utf-8"; /* CSS Document */ - →body: body{ background-color:#f1f0ed; padding: 0; margin: 0; } .single-item img{ height:100%; width:100%; padding:0; margin:0;...")
 
(27 intermediate revisions not shown)
Line 4: Line 4:
body{
body{
background-color:#f1f0ed;
background-color:#f1f0ed;
 +
background-image: url(../images/sysuchina-zybg.jpg) !important;
padding: 0;
padding: 0;
margin: 0;
margin: 0;
Line 9: Line 10:
.single-item  img{
.single-item  img{
-
height:100%;
+
position: absolute;
-
width:100%;
+
cursor: pointer;
-
padding:0;
+
left: 50%;
-
margin:0;
+
margin: -228px 0 0 -672px;
 +
width: 1345px;
 +
height: 206px;
}
}
Line 22: Line 25:
     text-align:left;
     text-align:left;
     text-decoration:none;
     text-decoration:none;
-
}
 
-
 
-
.sidebar {
 
-
color:#FFFFFF;
 
-
    background-color:#98bf21;
 
-
padding:16px;
 
-
font-size: 18px;
 
-
font-weight:bold;
 
-
width:150px;
 
-
margin-left: 40px;
 
-
margin-top: 40px;
 
-
position: relative;
 
-
float: left;
 
-
line-height: 34px;
 
-
}
 
-
 
-
.subsidebar{
 
-
padding:0 7px;
 
-
margin: 0;
 
-
font-size:14px;
 
-
font-weight:normal;
 
-
width:100px;
 
-
line-height: 30px;
 
-
}
 
-
 
-
 
-
a:link,a:visited
 
-
{
 
-
display:block;
 
-
font-family:Verdana, Arial, Helvetica, sans-serif;
 
-
color:#FFFFFF;
 
-
background-color:#98bf21;
 
-
text-align:left;
 
-
padding:4px;
 
-
text-decoration:none;
 
-
}
 
-
 
-
a:hover,a:active {
 
-
background-color:#7A991A;
 
-
}
 
-
 
-
.sidebar em:link, .sidebar em:visited {
 
-
display:block;
 
-
font-family:Verdana, Arial, Helvetica, sans-serif;
 
-
color:#FFFFFF;
 
-
background-color:#98bf21; /*rgb(152, 191, 33);*/
 
-
text-align:left;
 
-
padding:6px;
 
-
text-decoration:none;
 
-
}
 
-
 
-
.sidebar em:hover, .sidebar em:active {
 
-
cursor: pointer;
 
-
background-color:#7A991A;
 
}
}
.navibar {
.navibar {
-
margin-top: -2px;
+
position: absolute;
-
position: relative;
+
left: 50%;
 +
top: 204px;
 +
margin: 0 0 0 -672px;
 +
width: 1345px;
 +
height: 60px;
z-index: 1000;
z-index: 1000;
-
width: 100%;
 
-
height: 60px;
 
background-color: rgb(37, 37, 37);
background-color: rgb(37, 37, 37);
color: white;
color: white;
 +
}
}
Line 116: Line 68:
#icon1 {
#icon1 {
-
left: 64%;
+
left: 63%;
}
}
#icon2 {
#icon2 {
-
left: 71%;
+
left: 72%;
}
}
#icon3 {
#icon3 {
-
left: 78%;
+
left: 81%;
-
}
+
-
 
+
-
#icon4 {
+
-
left: 85%;
+
}
}
#icon5 {
#icon5 {
-
left: 92%;
+
left: 90%;
}
}
.content {
.content {
position: absolute;
position: absolute;
 +
top: 270px;
 +
left: 50%;
 +
border: 0px;
 +
margin: 0 0 0 -350px;
height: 2000px;
height: 2000px;
-
width: 900px;
+
width: 850px;
-
margin-left: 60px;
+
-
margin-top: 40px;
+
-
background-color: rgb(200,200,200);
+
padding: 30px;
padding: 30px;
}
}
Line 154: Line 103:
}
}
-
#top {
+
#gotop {
position: fixed;
position: fixed;
bottom: 3%;
bottom: 3%;
Line 165: Line 114:
}
}
-
#top:hover {
+
#gotop:hover {
filter:alpha(opacity=100);  
filter:alpha(opacity=100);  
-moz-opacity:1;  
-moz-opacity:1;  
Line 174: Line 123:
background-color: rgb(181, 201, 15); /*rgb(152, 191, 33);*/
background-color: rgb(181, 201, 15); /*rgb(152, 191, 33);*/
/*-29 -10 -18*/
/*-29 -10 -18*/
-
}
 
-
 
-
#project {
 
-
background-color: rgb(181, 201, 15);
 
}
}
#judging {
#judging {
-
background-color: rgb(237, 143, 107);
+
background-color: rgb(237, 143, 107);  
}
}
Line 189: Line 134:
#humanpractice {
#humanpractice {
-
background-color: rgb(122, 165, 158);
+
background-color: rgb(122, 165, 158);  
}
}
#humanpractice em:hover {
#humanpractice em:hover {
-
background-color: rgb(100, 155, 144);
+
background-color: rgb(100, 155, 144);  
}
}
#notebook {
#notebook {
-
background-color: rgb(183, 178, 156);
+
background-color: rgb(183, 178, 156);  
}
}
Line 205: Line 150:
#team {
#team {
-
background-color: rgb(237, 157, 96);
+
background-color: rgb(237, 157, 96);  
}
}
Line 236: Line 181:
     background-size:contain;
     background-size:contain;
 +
}
 +
 +
.navigation2 {
 +
position: absolute;
 +
left: 50%;
 +
top: 264px;
 +
margin: 0 0 0 180px;
 +
width: 55%;
 +
height: 60px;
 +
z-index: 10000;
 +
background-color: transparent;
 +
color: white;
 +
}
 +
 +
.navigation2 ul{
 +
padding: 0 0 0 0 !important;
 +
}
 +
 +
.firstNav:nth-child(1) {
 +
left: 0px;
 +
margin-left: -50px;
 +
}
 +
 +
.firstNav:nth-child(2) {
 +
left: 100px;
 +
margin-left: -30px;
 +
}
 +
 +
.firstNav:nth-child(3) {
 +
left: 200px;
 +
margin-left: -10px;
 +
}
 +
 +
.firstNav:nth-child(4) {
 +
left: 300px;
 +
margin-left: 10px;
 +
}
 +
 +
 +
.content p {
 +
 +
display: block;
 +
-webkit-margin-before: 1em;
 +
-webkit-margin-after: 1em;
 +
-webkit-margin-start: 0px;
 +
-webkit-margin-end: 0px;
 +
 +
font-size: 1.65em;
 +
margin-bottom: 10px;
 +
line-height: 1.6;
 +
font-weight: 400;
 +
word-break: keep-all;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: Lora,serif;
 +
}
 +
 +
.sidenav {
 +
padding-left: 10px;
 +
padding-top: 10px
 +
}
 +
 +
.dl-menuwrapper .dl-menu {
 +
width: 75% !important;
 +
margin: 15px 0 0 0 !important;
 +
}
 +
 +
.dl-menuwrapper {
 +
margin: 8px 60px !important;
 +
}
 +
 +
.content p, .content li {
 +
color: #1d1d02 !important;
 +
}
 +
 +
.content {
 +
margin-bottom: 100px;
 +
padding-bottom: 0px;
 +
width: 760px !important;
 +
height: auto !important;
 +
 +
}
 +
 +
.content h2,h3,h4,p{
 +
position: relative;
 +
width: 760px;
 +
margin-left: 0px;
 +
margin-right: 50px;
 +
}
 +
.content p {
 +
font-family: verdana;
 +
font-size: 14px;
 +
margin: 0.4em 0px 0.5em;
 +
line-height: 1.5em;
 +
text-align: justify;
 +
 +
display: block;
 +
-webkit-margin-before: 1em;
 +
-webkit-margin-after: 1em;
 +
-webkit-margin-start: 0px;
 +
-webkit-margin-end: 0px;
 +
}
 +
.content li{
 +
        font-weight:bold ;
 +
        font-family: verdana;
 +
        margin-left: 30px;
 +
        text-align:left;
 +
        padding: 5px 0px;
 +
}
 +
 +
.content h1,.content h2 {
 +
font-weight: bold;
 +
}
 +
 +
}
 +
.content h3 {
 +
padding-bottom:5px;
 +
margin-bottom: 0px;
 +
}
 +
 +
.content h1, .content h2, .content h3 {
 +
color: #81822f !important;
 +
}
 +
 +
.content h1 {
 +
margin-bottom: 1.6em;
 +
}
 +
 +
 +
.content h2{
 +
margin-bottom: .6em;
 +
}
 +
 +
.content h1 {
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 40px;
 +
line-height: 40px;
 +
margin: 25px 0px 0px 0px;
 +
color: black;
 +
text-align: center;
 +
padding: 0px 0px 0px 0px;
 +
border: none;
 +
}
 +
 +
.content h2 {
 +
border-bottom: 2px solid #aaab4d;
 +
}
 +
 +
.content img {
 +
width: 700px;
 +
height: auto;
 +
margin-top: 20px;
 +
margin-bottom: 20px;
 +
margin-left: 30px;
 +
}
 +
 +
.flexnav li a {
 +
padding: 0.8em;
 +
}
 +
 +
.navigation2 a:hover {
 +
background-color: rgb(27, 27, 27);
 +
}
 +
 +
#menubar {
 +
        font-size: 12px !important;
 +
}
 +
 +
.navigation2 a:hover {
 +
  text-decoration: blink !important;
 +
}
 +
 +
.navigation2 li {
 +
  font-size: 12px !important;
 +
}
 +
.navigation2 li {
 +
  margin-bottom: 0px !important;
 +
}
 +
 +
.navigation2 ul {
 +
  line-height: 0.5em !important;
 +
  margin-bottom: 0px;
 +
  margin-top: 0px;
 +
  margin-left: 0px;
 +
}
 +
 +
.navigation img:hover {
 +
cursor:pointer;
 +
}
 +
 +
.flexnav .touch-button {
 +
  width: 35px;
 +
  height: 35px;
 +
}
 +
 +
.flexnav li {
 +
  font-size: 150%;
 +
  line-height: 25px;
 +
}
 +
 +
p1 {
 +
font-size:11px !important;
}
}

Latest revision as of 01:39, 18 October 2014

@charset "utf-8"; /* CSS Document */ /* body */ body{ background-color:#f1f0ed; background-image: url(../images/sysuchina-zybg.jpg) !important; padding: 0; margin: 0; }

.single-item img{ position: absolute; cursor: pointer; left: 50%; margin: -228px 0 0 -672px; width: 1345px; height: 206px; }

/* sidenav */ ul{ list-style-type: none; display:block; 

   font-family:Verdana, Arial, Helvetica, sans-serif;
   text-align:left;
   text-decoration:none;

}

.navibar { position: absolute; left: 50%; top: 204px; margin: 0 0 0 -672px; width: 1345px; height: 60px; z-index: 1000; background-color: rgb(37, 37, 37); color: white;

}

.navibar span { position: relative; top: 10px; margin: 0 0 0px 50px; color: white; font-size: 30px; }

.navibar img { position: absolute; width: 50px; height: auto; top:9%; } /* .navibar img:hover { position: absolute; width: 52px; height: auto; top:7%; cursor: pointer; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }

  • /
  1. icon1 {

left: 63%; }

  1. icon2 {

left: 72%; }

  1. icon3 {

left: 81%; }

  1. icon5 {

left: 90%; }

.content { position: absolute; top: 270px; left: 50%; border: 0px; margin: 0 0 0 -350px; height: 2000px; width: 850px; padding: 30px; }

  1. route {

margin: 0 0 0 40px; }

  1. route a:hover{

background-color: rgb(50,50,50); cursor:pointer; }

  1. gotop {

position: fixed; bottom: 3%; width: 80px; height: auto; left: 85%; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }

  1. gotop:hover {

filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

  1. project {

background-color: rgb(181, 201, 15); /*rgb(152, 191, 33);*/ /*-29 -10 -18*/ }

  1. judging {

background-color: rgb(237, 143, 107); }

  1. judging em:hover {

background-color: rgb(178, 123, 79); }

  1. humanpractice {

background-color: rgb(122, 165, 158); }

  1. humanpractice em:hover {

background-color: rgb(100, 155, 144); }

  1. notebook {

background-color: rgb(183, 178, 156); }

  1. notebook em:hover {

background-color: rgb(153, 170, 156); }

  1. team {

background-color: rgb(237, 157, 96); }

  1. team em:hover {

background-color: rgb(205, 137, 75); }

  1. tip em:hover {

cursor: pointer; }

  1. tipImg {

position: absolute; padding: 20px 20px 20px 20px; width: 200px; /*the size of tip.png*/ z-index: 1000; white-space:normal; word-break:break-all; overflow:hidden; 

  	background-image:url(../images/tip.png);
  	
  	filter:alpha(opacity=50);

-moz-opacity:0.5; opacity:0.5; 

  	background-repeat: no-repeat; 
	-moz-background-size:contain;
   -webkit-background-size:contain;
   -o-background-size:contain;
   background-size:contain;

}

.navigation2 { position: absolute; left: 50%; top: 264px; margin: 0 0 0 180px; width: 55%; height: 60px; z-index: 10000; background-color: transparent; color: white; }

.navigation2 ul{ padding: 0 0 0 0 !important; }

.firstNav:nth-child(1) { left: 0px; margin-left: -50px; }

.firstNav:nth-child(2) { left: 100px; margin-left: -30px; }

.firstNav:nth-child(3) { left: 200px; margin-left: -10px; }

.firstNav:nth-child(4) { left: 300px; margin-left: 10px; }


.content p {

display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;

font-size: 1.65em; margin-bottom: 10px; line-height: 1.6; font-weight: 400; word-break: keep-all; -webkit-font-smoothing: antialiased; font-family: Lora,serif; }

.sidenav { padding-left: 10px; padding-top: 10px }

.dl-menuwrapper .dl-menu { width: 75% !important; margin: 15px 0 0 0 !important; }

.dl-menuwrapper { margin: 8px 60px !important; }

.content p, .content li { color: #1d1d02 !important; }

.content { margin-bottom: 100px; padding-bottom: 0px; width: 760px !important; height: auto !important;

}

.content h2,h3,h4,p{ position: relative; width: 760px; margin-left: 0px; margin-right: 50px; } .content p { font-family: verdana; font-size: 14px; margin: 0.4em 0px 0.5em; line-height: 1.5em; text-align: justify;

display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } .content li{ 

       font-weight:bold ;
       font-family: verdana;
       margin-left: 30px;
       text-align:left;
       padding: 5px 0px;

}

.content h1,.content h2 { font-weight: bold; }

} .content h3 { padding-bottom:5px; margin-bottom: 0px; }

.content h1, .content h2, .content h3 { color: #81822f !important; }

.content h1 { margin-bottom: 1.6em; }


.content h2{ margin-bottom: .6em; }

.content h1 { font-family: Arial, Helvetica, sans-serif; font-size: 40px; line-height: 40px; margin: 25px 0px 0px 0px; color: black; text-align: center; padding: 0px 0px 0px 0px; border: none; }

.content h2 { border-bottom: 2px solid #aaab4d; }

.content img { width: 700px; height: auto; margin-top: 20px; margin-bottom: 20px; margin-left: 30px; }

.flexnav li a { padding: 0.8em; }

.navigation2 a:hover { background-color: rgb(27, 27, 27); }

  1. menubar { 
       font-size: 12px !important;

}

.navigation2 a:hover { 

 text-decoration: blink !important;

}

.navigation2 li { 

 font-size: 12px !important;

} .navigation2 li { 

 margin-bottom: 0px !important;

}

.navigation2 ul { 

 line-height: 0.5em !important;
 margin-bottom: 0px;
 margin-top: 0px;
 margin-left: 0px;

}

.navigation img:hover { 

cursor:pointer;

}

.flexnav .touch-button { 

 width: 35px;
 height: 35px;

}

.flexnav li { 

 font-size: 150%;
 line-height: 25px;

}

p1 { 

font-size:11px !important;

}

Retrieved from "http://2014.igem.org/Team:SYSU-China/css/main1.css"