Team:SYSU-Software/header.css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/*header images */
+
*{
-
    #team-header{
+
padding:0px;
-
      margin: 0 auto;
+
margin: 0px;
-
      z-index: 100;
+
}
 +
body {
 +
height: 100%;
 +
width: 100%;
 +
background-color: #CCC;
 +
font-family: 'Arial';
 +
}
-
      height: 200px;
 
-
      width: 980px;
 
-
      background-color: white;
 
-
      font-family: 'Arial';
 
-
    }
 
-
    #team-header-logo{
 
-
      position: relative;
 
-
      left: 20px;
 
-
      top:30px;
 
-
    }
 
-
    #team-header-text{
 
-
      position: relative;
 
-
      left: 130px;
 
-
      top: -67px;
 
-
    }
 
-
    #boss-header-image{
+
/*header images */
-
      position: relative;
+
#team-header{
-
      left: 285px;
+
margin: 0 auto;
-
      top: -85px;
+
z-index: 100;
-
    }
+
-
    /*navigation*/
+
height: 40px;
-
    #navigation1{
+
width: 100%;
-
      float: right;
+
background-color: white;
-
      height: 40px;
+
-
      z-index: 100;
+
font-family: 'Arial';
 +
}
 +
#team-header-logo img{
 +
height: 50px;
 +
}
-
      position: relative;
+
#igem-logo img{
-
      top: -37px;
+
height: 40px;
-
    }
+
/* float: right; */
 +
position: absolute;
 +
right: 0px;
 +
top: 0px;
 +
}
 +
#team-header-text{
 +
position: relative;
 +
left: 130px;
 +
top: -67px;
 +
}
-
    .navbar {
+
#boss-header-image{
-
    margin-bottom: 0px;
+
position: relative;
-
    overflow: visible;
+
left: 285px;
-
    }
+
top: -85px;
 +
}
-
    .nav{
+
/*navigation*/
-
      display: inline;
+
#navigation{
 +
/* float: right; */
 +
height: 40px;
-
      height: 40px;
+
z-index: 100;
-
      background-color:#A8DBD2;   
+
-
    }
+
-
       
+
-
    .navbar-inverse .nav > li > a{
+
-
      font-size: 14px;
+
-
      border: none;
+
-
      height: 40px;
+
-
      padding:0px 20px;
+
-
      font-weight:100;
+
-
      line-height: 40px;
+
position: relative;
-
    }
+
/* top: -37px; */
 +
}
-
    .navbar .nav > li > ul {
+
.navbar {
-
    padding-top: 2px;
+
margin-bottom: 0px;
-
    top: 8%;
+
overflow: visible;
-
    }
+
}
-
    #nav-li{
+
.nav{
-
      height: 40px;
+
display: inline;
-
    }
+
-
   
+
/* height: 40px; */
-
    .navbar-inverse .nav > li.active > a{
+
/* background-color:#A8DBD2;     */
-
      background-color: #FFE14B;
+
background-color: #ffffff;
-
      height: 40px;
+
color:  
-
    }
+
}
-
    .navbar-inverse .nav > li.active > a{
+
-
      background-color: #FFE14B;  
+
-
    }
+
-
    /*sub navs*/
+
-
    #sub-link1{
+
-
      width:90px;
+
-
      background-color:#A8DBD2;  
+
-
    }   
+
-
    .navbar .nav > li > ul:before {
+
-
      border-width: 0px;
+
-
    }
+
-
    #sub-link2{
+
.navbar-inverse .nav > li > a{
-
      width:100px;
+
font-size: 14px;
-
      background-color:#A8DBD2;  
+
border: none;
-
    }   
+
height: 40px;
-
    #sub-link3{
+
padding:0px 20px;
-
      width:135px;
+
-
      background-color:#A8DBD2;  
+
-
    }   
+
line-height: 40px;
-
    #sub-link4{
+
color: #34495e;
-
      background-color:#A8DBD2;  
+
}
-
      width:70px;
+
/* #nav-li{ */
-
    }
+
/* height: 40px; */
 +
/* } */
-
    a:focus{
+
.navbar-inverse .nav > li.active > a{
-
      outline-color:#544444;  
+
/* background-color: #FFE14B; */
-
    }
+
background-color: #34495e;
 +
height: 40px;
 +
}
 +
.navbar-inverse .nav > li.active > a{
 +
/* background-color: #FFE14B;  */
 +
background-color: #34495e;
 +
}
-
.navbar .nav > li:first-child > a {
+
.navbar-inverse .navbar-inner {
-
-webkit-border-radius: 0 0 0 0px;
+
background: #ffffff;
-
-moz-border-radius: 0 0 0 0px;
+
}
-
border-radius: 0 0 0 0px;
+
 
 +
/*sub navs*/
 +
.navbar .nav > li > ul {
 +
width: 100%;
 +
}
 +
 
 +
#sub-link1{
 +
/* width:90px; */
 +
width:100%;
 +
/* background-color:#A8DBD2;  */
 +
background-color:#34495e;
 +
}   
 +
.navbar .nav > li > ul:before {
 +
border-width: 0px;
 +
}
 +
 
 +
.navbar .nav {
 +
width: 95%;
 +
vertical-align: middle;
 +
float: none;
 +
margin: auto;
 +
}
 +
 
 +
.navbar .nav > li {
 +
margin: auto;
 +
width: 13.5%;
 +
text-align: center;
 +
display: inline-block;
 +
float: none;  
 +
}
 +
.navbar .nav > .nav-li {
 +
/* width: 10%; */
 +
}
 +
 
 +
#sub-link2{
 +
/* width:100px; */
 +
width:100%;
 +
/* background-color:#A8DBD2;  */
 +
background-color:#34495e;
 +
}   
 +
#sub-link3{
 +
/* width:135px; */
 +
width:100%;
 +
/* background-color:#A8DBD2;  */
 +
background-color:#34495e;
 +
 
 +
}   
 +
#sub-link4{
 +
/* background-color:#A8DBD2;  */
 +
background-color:#34495e;
 +
/* width:70px; */
 +
width:100%;
 +
}   
 +
 
 +
 
 +
a:focus{
 +
outline-color:#544444;  
}
}

Revision as of 08:04, 25 September 2013

  • {

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


/*header images */

  1. team-header{

margin: 0 auto; z-index: 100;

height: 40px; width: 100%; background-color: white;

font-family: 'Arial'; }

  1. team-header-logo img{

height: 50px; }

  1. igem-logo img{

height: 40px; /* float: right; */ position: absolute; right: 0px; top: 0px; }

  1. team-header-text{

position: relative; left: 130px; top: -67px; }

  1. boss-header-image{

position: relative; left: 285px; top: -85px; }

/*navigation*/

  1. navigation{

/* float: right; */ height: 40px;

z-index: 100;

position: relative; /* top: -37px; */ }

.navbar { margin-bottom: 0px; overflow: visible; }

.nav{ display: inline;

/* height: 40px; */ /* background-color:#A8DBD2; */ background-color: #ffffff; color: }

.navbar-inverse .nav > li > a{ font-size: 14px; border: none; height: 40px; padding:0px 20px;

line-height: 40px; color: #34495e; } /* #nav-li{ */ /* height: 40px; */ /* } */


.navbar-inverse .nav > li.active > a{ /* background-color: #FFE14B; */ background-color: #34495e; height: 40px; } .navbar-inverse .nav > li.active > a{ /* background-color: #FFE14B; */ background-color: #34495e; }

.navbar-inverse .navbar-inner { background: #ffffff; }

/*sub navs*/ .navbar .nav > li > ul { width: 100%; }

  1. sub-link1{

/* width:90px; */ width:100%; /* background-color:#A8DBD2; */ background-color:#34495e; } .navbar .nav > li > ul:before { border-width: 0px; }

.navbar .nav { width: 95%; vertical-align: middle; float: none; margin: auto; }

.navbar .nav > li { margin: auto; width: 13.5%; text-align: center; display: inline-block; float: none; } .navbar .nav > .nav-li { /* width: 10%; */ }

  1. sub-link2{

/* width:100px; */ width:100%; /* background-color:#A8DBD2; */ background-color:#34495e; }

  1. sub-link3{

/* width:135px; */ width:100%; /* background-color:#A8DBD2; */ background-color:#34495e;

}

  1. sub-link4{

/* background-color:#A8DBD2; */ background-color:#34495e; /* width:70px; */ width:100%; }


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