Team:SYSU-Software/tutorial.css

From 2013.igem.org

(Difference between revisions)
Line 9: Line 9:
       font-family: 'Arial';
       font-family: 'Arial';
     }
     }
 +
 +
/*the tutorial content*/
/*the tutorial content*/
#tutorial-container{
#tutorial-container{
-
   width: 980px;
+
   width: 100%;
   margin: 0 auto;
   margin: 0 auto;
   height: 100%;
   height: 100%;
-
   background-color: #544444;
+
   background-color: white;
}
}
Line 27: Line 29:
}
}
.subnav a{
.subnav a{
-
   color: white;
+
   color: #445d72;
}
}
#tutorial-header{
#tutorial-header{
 +
  width:100%;
 +
  background-color: #dff5f2;
   padding-top: 30px;
   padding-top: 30px;
   padding-bottom: 30px;  
   padding-bottom: 30px;  
   font-size: 39px;
   font-size: 39px;
-
   color: white;
+
   color: #445d72;
   font-weight: 900;
   font-weight: 900;
Line 41: Line 45:
#tutorial-list{
#tutorial-list{
-
   position: relative;
+
   position: fixed;
-
   left: 51px;
+
   left: 60px;
 +
  top: 150px;
-
   padding-top: 10px;
+
   width: 140px;
 +
  height: 200px;
 +
  border-radius: 20px;
 +
  background-color: white;
 +
  border-color: #dff5f1;
 +
  border: 3px solid #dff5f1;
}
}
#list-header{
#list-header{
   font-size: 23px;
   font-size: 23px;
-
   color: white;
+
   color: #aeb3ba;
-
 
+
  font-weight: bolder;
 +
 
 +
  margin-left: 18px;
   padding-bottom: 10px;
   padding-bottom: 10px;
}
}
#tutorial-list ul{
#tutorial-list ul{
   position: relative;
   position: relative;
-
  left: -22px;
 
   list-style: none;
   list-style: none;
-
 
-
  padding-bottom: 70px;
 
}
}
.mainnav li a{
.mainnav li a{
-
   font-size: 15px;
+
   font-size: 18px;
-
   color: white;
+
   color: #aeb3ba;
}
}
 +
/*part content*/
#part-header{
#part-header{
 +
  padding-top: 28px;
   font-size: 23px;
   font-size: 23px;
-
   color: white;
+
   font-weight: bold;
-
 
+
   color: #445d72;
-
   padding-bottom: 7px;
+
}
}
#part-content{
#part-content{
Line 73: Line 83:
   height: 690px;
   height: 690px;
-
   padding-top: 17px;
+
   padding-top: 10px;
}
}
 +
#part-text{
#part-text{
 +
  text-align: justify;
   padding-top: 40px;
   padding-top: 40px;
-
   padding-bottom: 220px;
+
   padding-bottom: 70px;
-
   width: 720px;
+
   width: 870px;
   margin: 0 auto;
   margin: 0 auto;
 +
   font-size: 18px;
   font-size: 18px;
-
   color: white;
+
  font-weight: 200;
 +
   color: #9d9c9b;
}
}
#part1{
#part1{
Line 89: Line 103:
   margin: 0 auto;
   margin: 0 auto;
 +
}
 +
#part2-part{
 +
  width: 100%;
 +
  background-color: #dff5f2;
}
}
#part2{
#part2{
Line 108: Line 126:
   margin: 0 auto;
   margin: 0 auto;
}
}
-
#part5{
+
#part4-part{
-
   width: 880px;
+
   width: 100%;
-
   height: 100%;
+
   background-color: #dff5f2;
 +
}
 +
/*footer*/ 
 +
    #sysu-footer{
 +
      width: 100%;
 +
      margin:0 auto;
-
  margin: 0 auto;
+
      position: relative;
-
}
+
      bottom: 0px;
 +
      overflow: hidden;
 +
 
 +
      background-color: white;
 +
    }
 +
    #bottom-image{
 +
      width: 100%;
 +
    }

Revision as of 17:48, 26 September 2013

*{
     padding:0px;
     margin: 0px;
   }
   body {
     height: 100%;
     width: 100%;
     background-color: #CCC;
     font-family: 'Arial';
   }


/*the tutorial content*/

  1. tutorial-container{
 width: 100%;
 margin: 0 auto;
 height: 100%;
 background-color: white;

}

.subnav{

 float: right;
 padding-right: 4px;
 padding-top: 15px;
 font-size: 15px;

} .subnav a{

 color: #445d72;

}

  1. tutorial-header{
 width:100%;
 background-color: #dff5f2;
 padding-top: 30px;
 padding-bottom: 30px; 
 font-size: 39px;
 color: #445d72;
 font-weight: 900;
 text-align: center;

}

  1. tutorial-list{
 position: fixed;
 left: 60px;
 top: 150px;
 width: 140px;
 height: 200px;
 border-radius: 20px;
 background-color: white;
 border-color: #dff5f1;
 border: 3px solid #dff5f1;

}

  1. list-header{
 font-size: 23px;
 color: #aeb3ba;
 font-weight: bolder;
 
 margin-left: 18px;
 padding-bottom: 10px;

}

  1. tutorial-list ul{
 position: relative;
 list-style: none;

} .mainnav li a{

 font-size: 18px;
 color: #aeb3ba;

} /*part content*/

  1. part-header{
 padding-top: 28px;
 font-size: 23px;
 font-weight: bold;
 color: #445d72;

}

  1. part-content{
 width: 878px;
 height: 690px;
 padding-top: 10px;

}

  1. part-text{
 text-align: justify;
 padding-top: 40px;
 padding-bottom: 70px;
 width: 870px;
 margin: 0 auto;
 font-size: 18px;
 font-weight: 200;
 color: #9d9c9b;

}

  1. part1{
 width: 880px;
 height: 100%;
 margin: 0 auto;

}

  1. part2-part{
 width: 100%;
 background-color: #dff5f2;

}

  1. part2{
 width: 880px;
 height: 100%;
 margin: 0 auto;

}

  1. part3{
 width: 880px;
 height: 100%;
 margin: 0 auto;

}

  1. part4{
 width: 880px;
 height: 100%;
 margin: 0 auto;

}

  1. part4-part{
 width: 100%;
 background-color: #dff5f2;

} /*footer*/

   #sysu-footer{
     width: 100%;
     margin:0 auto;
     position: relative;
     bottom: 0px;
     overflow: hidden;
     background-color: white;
   }
   #bottom-image{
     width: 100%;
   }