Team:SYSU-Software/cast.css

From 2013.igem.org

(Difference between revisions)
 
(13 intermediate revisions not shown)
Line 1: Line 1:
-
    *{
+
*{
-
      padding:0px;
+
padding:0px;
-
      margin: 0px;
+
margin: 0px;
-
    }
+
}
-
    body {
+
body {
-
      height: 100%;
+
height: 100%;
-
      width: 100%;
+
width: 100%;
-
      background-color: #CCC;
+
background-color: #CCC;
-
      font-family: 'Arial';
+
font-family: 'Arial';
-
      overflow-x: hidden;
+
overflow-x: hidden;
-
    }
+
}
-
    /*home content*/
+
/*home content*/
-
    #cast-header{
+
#cast-header{
-
      width: 100%;
+
width: 100%;
-
      background-color: #dff5f1;
+
background-color: #dff5f1;
-
    }
+
}
-
    #cast-header img{
+
#cast-header img{
-
      position: relative;
+
position: relative;
-
      width: 1147px;
+
width: 1147px;
-
      margin-left: 50%;
+
margin-left: 50%;
-
      left: -573px;
+
left: -573px;
-
    }
+
}
-
    #cast-introduction-header{
+
#cast-introduction-header{
-
      padding-top: 90px;
+
padding: 30px 0;
-
      font-size:20px;
+
font-size:20px;
-
      color: black;
+
color: #34495e;
-
      text-align: center;
+
text-align: center;
-
      font-weight: 600;
+
font-weight: 600;
-
      word-spacing: 5px;
+
word-spacing: 5px;
-
      background-color: white;
+
background-color: #dff5f2;
-
    }
+
}
-
    #cast-intruction-text{
+
#cast-intruction-text{
-
      width: 400px;
+
width: 400px;
-
      display: block;
+
display: block;
-
      text-align: justify;
+
text-align: justify;
-
      font-size: 16px;
+
font-size: 16px;
-
    }
+
}
-
    .cast-introduction-part{
+
.cast-introduction-part table{
-
      *padding-left: 80px;*
+
position: relative;   
-
      padding-top: 80px;
+
width: 900px;
-
      background-color: white;
+
left: 50%;
-
      padding-bottom: 100px;
+
margin-left: -450px;
-
    }
+
text-align:center;
-
    .cast-introduction-part table{
+
}
-
      position: relative;   
+
#cast-intruction-image img{
-
      width: 900px;
+
width: 320px;
-
      left: 50%;
+
height: 400px;
-
      margin-left: -450px;
+
}
-
    }
+
.cast-image{
-
    #cast-intruction-image img{
+
margin-left:40%;
-
      width: 320px;
+
width:600px;
-
      height: 400px;
+
height:400px;
-
    }
+
}
-
    #cast-intruction-text-header{
+
#cast-intruction-text-header{
-
      font-size: 19px;
+
font-size: 19px;
-
      color: #65d2c0;
+
color: #65d2c0;
-
    }
+
}
 +
.cast-image-td{
 +
width:70%;
 +
padding:15px;
 +
}
 +
.cast-image-td span {
 +
width: 100%;
 +
}
 +
.cast-image-td img {
 +
max-width: 470px;
 +
}
 +
.cast-introduction-part2{
 +
background-color: #dff5f2;
 +
width: 100%;
 +
}
 +
/*footer*/ 
 +
#sysu-footer{
 +
width: 100%;
 +
margin:0 auto;
-
    #cast-introduction-part2{
+
position: relative;
-
      background-color: #dff5f2;
+
bottom: 0px;
-
      width: 100%;
+
overflow: hidden;
-
    }
+
-
    /*footer*/ 
+
-
    #sysu-footer{
+
-
      width: 100%;
+
-
      margin:0 auto;
+
-
      position: relative;
+
background-color: white;
-
      bottom: 0px;
+
}
-
      overflow: hidden;
+
#bottom-image{
 +
width: 100%;
 +
}
-
      background-color: white;
 
-
    }
 
-
    #bottom-image{
 
-
      width: 100%;
 
-
    }
 
 +
a:focus{
 +
outline-color:#544444;
 +
}
-
    a:focus{
+
#display-board {
-
      outline-color:#544444;  
+
height: 150px;
-
    }
+
/* vertical-align: middle; */
 +
border: dashed 3px #868858;
 +
border-radius: 5px;
 +
margin-bottom: 20px;
 +
padding: 10px;
 +
text-align: left;
 +
}
 +
#display-board .board{
 +
display: inline-block;
 +
vertical-align: top;
 +
}
 +
#display-board .board-left {
 +
width: 50%;
 +
}
 +
#display-board .board-right {
 +
width: 45%;
 +
}
 +
#biobrick {
 +
width: 470px;
 +
}
 +
 
 +
.cast-introduction-part{
 +
/* *padding-left: 80px;* */
 +
/* padding-top: 80px; */
 +
/* background-color: white; */
 +
width: 100%;
 +
}
 +
 
 +
.introduction-content {
 +
width: 980px;
 +
margin: 0 auto;
 +
padding: 20px 0;
 +
}
 +
 
 +
.shots {
 +
width: 50%;
 +
display: inline-block;
 +
vertical-align: middle;
 +
}
 +
 
 +
.introduction {
 +
width: 48%;
 +
display: inline-block;
 +
vertical-align: middle;
 +
padding: 5px
 +
}
 +
 
 +
.cast-introduction-part2 {
 +
background: #e0f4f2;
 +
}
 +
 
 +
.cast-introduction-part1 {
 +
background: white;
 +
}
 +
 
 +
.shots div {
 +
margin: 5px 0;
 +
}
 +
.cast-introduction-text-header {
 +
display: block;
 +
font-size: 28px;
 +
color: #3B746C;
 +
}
 +
 
 +
#part6 .shots img {
 +
height: 300px;
 +
}

Latest revision as of 18:31, 27 September 2013

  • {

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



/*home content*/

  1. cast-header{

width: 100%; background-color: #dff5f1; }

  1. cast-header img{

position: relative;

width: 1147px; margin-left: 50%; left: -573px; }

  1. cast-introduction-header{

padding: 30px 0;

font-size:20px; color: #34495e; text-align: center; font-weight: 600; word-spacing: 5px; background-color: #dff5f2; }

  1. cast-intruction-text{

width: 400px; display: block; text-align: justify;

font-size: 16px; } .cast-introduction-part table{ position: relative; width: 900px; left: 50%; margin-left: -450px; text-align:center; }

  1. cast-intruction-image img{

width: 320px; height: 400px; } .cast-image{ margin-left:40%; width:600px; height:400px; }

  1. cast-intruction-text-header{

font-size: 19px; color: #65d2c0; } .cast-image-td{ width:70%; padding:15px; } .cast-image-td span { width: 100%; } .cast-image-td img { max-width: 470px; }

.cast-introduction-part2{ background-color: #dff5f2; width: 100%; } /*footer*/

  1. sysu-footer{

width: 100%; margin:0 auto;

position: relative; bottom: 0px; overflow: hidden;

background-color: white; }

  1. bottom-image{

width: 100%; }


a:focus{ outline-color:#544444; }

  1. display-board {

height: 150px; /* vertical-align: middle; */ border: dashed 3px #868858; border-radius: 5px; margin-bottom: 20px; padding: 10px; text-align: left; }

  1. display-board .board{

display: inline-block; vertical-align: top; }

  1. display-board .board-left {

width: 50%; }

  1. display-board .board-right {

width: 45%; }

  1. biobrick {

width: 470px; }

.cast-introduction-part{ /* *padding-left: 80px;* */ /* padding-top: 80px; */ /* background-color: white; */ width: 100%; }

.introduction-content { width: 980px; margin: 0 auto; padding: 20px 0; }

.shots { width: 50%; display: inline-block; vertical-align: middle; }

.introduction { width: 48%; display: inline-block; vertical-align: middle; padding: 5px }

.cast-introduction-part2 { background: #e0f4f2; }

.cast-introduction-part1 { background: white; }

.shots div { margin: 5px 0; } .cast-introduction-text-header { display: block; font-size: 28px; color: #3B746C; }

  1. part6 .shots img {

height: 300px; }