Team:IIT Madras

From 2012.igem.org

(Difference between revisions)
Line 10: Line 10:
<style>
<style>
-
#iitm_menu{
+
body, ul, li {
-
list-style:none;
+
  font-size:14px;
-
width:940px;
+
  font-family:Arial, Helvetica, sans-serif;
-
margin:30px auto 0px auto;
+
  line-height:21px;
-
height:43px;
+
  text-align:left;
-
padding:0px 20px 0px 20px;
+
}
 +
 
 +
/* Navigation Bar */
 +
 
 +
#iitm_menu {
 +
  list-style:none;
 +
  width:940px;
 +
  margin:30px auto 0px auto;
 +
  height:43px;
 +
  padding:0px 20px 0px 20px;
-
/* Rounded Corners */
+
  /* Rounded Corners */
-
+
 
-
-moz-border-radius: 10px;
+
  -moz-border-radius: 10px;
-
-webkit-border-radius: 10px;
+
  -webkit-border-radius: 10px;
-
border-radius: 10px;
+
  border-radius: 10px;
-
/* Background color and gradients */
+
  /* Background color and gradients */
-
+
 
-
background: #014464;
+
  background: #014464;
-
background: -moz-linear-gradient(top, #0272a7, #013953);
+
  background: -moz-linear-gradient(top, #0272a7, #013953);
-
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
+
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
-
+
 
-
/* Borders */
+
  /* Borders */
-
+
 
-
border: 1px solid #002232;
+
  border: 1px solid #002232;
-
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
+
  -moz-box-shadow:inset 0px 0px 1px #edf9ff;
-
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
+
  -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
-
box-shadow:inset 0px 0px 1px #edf9ff;
+
  box-shadow:inset 0px 0px 1px #edf9ff;
}
}
#iitm_menu li {
#iitm_menu li {
-
float:left;
+
  float:left;
-
display:block;
+
  text-align:center;
-
text-align:center;
+
  position:relative;
-
position:relative;
+
  padding: 4px 10px 4px 10px;
-
padding: 4px 10px 4px 10px;
+
  margin-right:30px;
-
margin-right:30px;
+
  margin-top:7px;
-
margin-top:7px;
+
  border:none;
-
border:none;
+
}
}
-
#iitm_menu li a {
+
#iitm_menu li:hover {
-
font-family:Arial, Helvetica, sans-serif;
+
  border: 1px solid #777777;
-
font-size:14px;  
+
  padding: 4px 9px 4px 9px;
-
color: #EEEEEE;
+
 
-
display:block;
+
  /* Background color and gradients */
-
outline:0;
+
 
-
text-decoration:none;
+
  background: #F4F4F4;
-
text-shadow: 1px 1px 1px #000;
+
  background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 +
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
 +
 
 +
  /* Rounded corners */
 +
 
 +
  -moz-border-radius: 5px 5px 0px 0px;
 +
  -webkit-border-radius: 5px 5px 0px 0px;
 +
  border-radius: 5px 5px 0px 0px;
}
}
-
 
+
#iitm_menu li a {
-
#iitm_menu li:hover {
+
  font-family:Arial, Helvetica, sans-serif;
-
border: 1px solid #777777;
+
  font-size:14px;  
-
padding: 4px 9px 4px 9px;
+
  color: #EEEEEE;
-
+
  display:block;
-
/* Background color and gradients */
+
  outline:0;
-
+
  text-decoration:none;
-
background: #F4F4F4;
+
  text-shadow: 1px 1px 1px #000;
-
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
+
-
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
+
-
+
-
/* Rounded corners */
+
-
+
-
-moz-border-radius: 5px 5px 0px 0px;
+
-
-webkit-border-radius: 5px 5px 0px 0px;
+
-
border-radius: 5px 5px 0px 0px;
+
}
}
#iitm_menu li:hover a {
#iitm_menu li:hover a {
-
color:#161616;
+
  color:#161616;
-
text-shadow: 1px 1px 1px #FFFFFF;
+
  text-shadow: 1px 1px 1px #FFFFFF;
}
}
-
 
#iitm_menu li .drop {
#iitm_menu li .drop {
-
padding-right:21px;
+
  padding-right:21px;
-
background:url("https://static.igem.org/mediawiki/2012/5/51/Iitm_drop.gif") no-repeat right 8px;
+
  background:url("img/drop.png") no-repeat right 8px;
}
}
#iitm_menu li:hover .drop {
#iitm_menu li:hover .drop {
-
background:url("https://static.igem.org/mediawiki/2012/5/51/Iitm_drop.gif") no-repeat right 7px;
+
  background:url("img/drop.png") no-repeat right 7px;
}
}
 +
/* Drop Down */
.dropdown_1column,  
.dropdown_1column,  
Line 96: Line 103:
.dropdown_4columns,
.dropdown_4columns,
.dropdown_5columns {
.dropdown_5columns {
-
margin:4px auto;
+
  margin:4px auto;
-
position:absolute;
+
  float:left;
-
left:-999em; /* Hides the drop down */
+
  position:absolute;
-
text-align:left;
+
  left:-999em; /* Hides the drop down */
-
padding:10px 5px 10px 5px;
+
  text-align:left;
-
border:1px solid #777777;
+
  padding:10px 5px 10px 5px;
-
border-top:none;
+
  border:1px solid #777777;
-
+
  border-top:none;
-
/* Gradient background */
+
 
-
background:#F4F4F4;
+
  /* Gradient background */
-
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
+
  background:#F4F4F4;
-
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
+
  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 +
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
-
/* Rounded Corners */
+
  /* Rounded Corners */
-
-moz-border-radius: 0px 5px 5px 5px;
+
  -moz-border-radius: 0px 5px 5px 5px;
-
-webkit-border-radius: 0px 5px 5px 5px;
+
  -webkit-border-radius: 0px 5px 5px 5px;
-
border-radius: 0px 5px 5px 5px;
+
  border-radius: 0px 5px 5px 5px;
}
}
-
 
.dropdown_1column {width: 140px;}
.dropdown_1column {width: 140px;}
Line 127: Line 134:
#iitm_menu li:hover .dropdown_4columns,
#iitm_menu li:hover .dropdown_4columns,
#iitm_menu li:hover .dropdown_5columns {
#iitm_menu li:hover .dropdown_5columns {
-
left:-1px;top:auto;
+
  left:-1px;
 +
    top:auto;
}
}
 +
/* Columns */
 +
.col_1,
 +
.col_2,
 +
.col_3,
 +
.col_4,
 +
.col_5 {
 +
  display:inline;
 +
  float: left;
 +
  position: relative;
 +
  margin-left: 5px;
 +
  margin-right: 5px;
 +
}
 +
.col_1 {width:130px;}
 +
.col_2 {width:270px;}
 +
.col_3 {width:410px;}
 +
.col_4 {width:550px;}
 +
.col_5 {width:690px;}
 +
 +
/* Right alignment */
 +
 +
#iitm_menu .menu_right {
 +
  float:right;
 +
  margin-right:0px;
 +
}
 +
#iitm_menu li .align_right {
 +
  /* Rounded Corners */
 +
  -moz-border-radius: 5px 0px 5px 5px;
 +
    -webkit-border-radius: 5px 0px 5px 5px;
 +
    border-radius: 5px 0px 5px 5px;
 +
}
 +
#iitm_menu li:hover .align_right {
 +
  left:auto;
 +
  right:-1px;
 +
  top:auto;
 +
}
 +
 +
/* Drop Down Content Stylings */
 +
 +
#iitm_menu p, #iitm_menu h2, #iitm_menu h3, #iitm_menu ul li {
 +
  font-family:Arial, Helvetica, sans-serif;
 +
  line-height:21px;
 +
  font-size:12px;
 +
  text-align:left;
 +
  text-shadow: 1px 1px 1px #FFFFFF;
 +
}
 +
#iitm_menu h2 {
 +
  font-size:21px;
 +
  font-weight:400;
 +
  letter-spacing:-1px;
 +
  margin:7px 0 14px 0;
 +
  padding-bottom:14px;
 +
  border-bottom:1px solid #666666;
 +
}
 +
#iitm_menu h3 {
 +
  font-size:14px;
 +
  margin:7px 0 14px 0;
 +
  padding-bottom:7px;
 +
  border-bottom:1px solid #888888;
 +
}
 +
#iitm_menu p {
 +
  line-height:18px;
 +
  margin:0 0 10px 0;
 +
}
 +
 +
#iitm_menu li:hover div a {
 +
  font-size:12px;
 +
  color:#015b86;
 +
}
 +
#iitm_menu li:hover div a:hover {
 +
  color:#029feb;
 +
}
 +
.strong {
 +
  font-weight:bold;
 +
}
 +
.italic {
 +
  font-style:italic;
 +
}
 +
.imgshadow {
 +
  background:#FFFFFF;
 +
  padding:4px;
 +
  border:1px solid #777777;
 +
  margin-top:5px;
 +
  -moz-box-shadow:0px 0px 5px #666666;
 +
  -webkit-box-shadow:0px 0px 5px #666666;
 +
  box-shadow:0px 0px 5px #666666;
 +
}
 +
.img_left { /* Image sticks to the left */
 +
  width:auto;
 +
  float:left;
 +
  margin:5px 15px 5px 5px;
 +
}
 +
#iitm_menu li .black_box {
 +
  background-color:#333333;
 +
  color: #eeeeee;
 +
  text-shadow: 1px 1px 1px #000;
 +
  padding:4px 6px 4px 6px;
 +
 +
  /* Rounded Corners */
 +
  -moz-border-radius: 5px;
 +
  -webkit-border-radius: 5px;
 +
  border-radius: 5px;
 +
 +
  /* Shadow */
 +
  -webkit-box-shadow:inset 0 0 3px #000000;
 +
  -moz-box-shadow:inset 0 0 3px #000000;
 +
  box-shadow:inset 0 0 3px #000000;
 +
}
 +
#iitm_menu li ul {
 +
  list-style:none;
 +
  padding:0;
 +
  margin:0 0 12px 0;
 +
}
 +
#iitm_menu li ul li {
 +
  font-size:12px;
 +
  line-height:24px;
 +
  position:relative;
 +
  text-shadow: 1px 1px 1px #ffffff;
 +
  padding:0;
 +
  margin:0;
 +
  float:none;
 +
  text-align:left;
 +
  width:130px;
 +
}
 +
#iitm_menu li ul li:hover {
 +
  background:none;
 +
  border:none;
 +
  padding:0;
 +
  margin:0;
 +
}
 +
#iitm_menu li .greybox li {
 +
  background:#F4F4F4;
 +
  border:1px solid #bbbbbb;
 +
  margin:0px 0px 4px 0px;
 +
  padding:4px 6px 4px 6px;
 +
  width:116px;
 +
 +
  /* Rounded Corners */
 +
  -moz-border-radius: 5px;
 +
  -webkit-border-radius: 5px;
 +
  border-radius: 5px;
 +
}
 +
#iitm_menu li .greybox li:hover {
 +
  background:#ffffff;
 +
  border:1px solid #aaaaaa;
 +
  padding:4px 6px 4px 6px;
 +
  margin:0px 0px 4px 0px;
 +
}
</style>
</style>

Revision as of 02:19, 29 August 2012

bar


IIT Madras

iGEM 2012

Retrieved from "http://2012.igem.org/Team:IIT_Madras"