Team:Calgary/Sandbox

From 2012.igem.org

(Difference between revisions)
Line 67: Line 67:
#nav{
#nav{
list-style: none;
list-style: none;
-
width: 16%;
+
width: 160px;
margin: 0px 10px 0px 10px;
margin: 0px 10px 0px 10px;
-
padding: 20px;
+
padding: 20px 0px 20px 10px;
text-indent: 0;
text-indent: 0;
/*Background colours*/
/*Background colours*/
-
background: #202020;
+
background: #202020; /*backup colour in case gradients fail*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333'); /* for IE 6+7*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333'); /* for IE 6+7*/
-ms-filter:
-ms-filter:
Line 80: Line 80:
background: -moz-linear-gradient(left,  #202020,  #333); /* for firefox 3.6+ */
background: -moz-linear-gradient(left,  #202020,  #333); /* for firefox 3.6+ */
}
}
 +
/*To be moved to JQ block*/
#menu-icon{
#menu-icon{
display: none;
display: none;
Line 87: Line 88:
padding: 0;
padding: 0;
}
}
 +
/*submenu styling*/
#nav li a{
#nav li a{
 +
display: block;
 +
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
 +
color: white;
 +
font-size: 1.5em;
 +
line-height: 125%;
 +
text-indent: 10px;
 +
}
 +
#nav li a.dropheader{
 +
text-indent: 0;
 +
margin-top: 1.5em;
 +
width: auto;
 +
}
 +
/*primary menu styling*/
 +
#nav li > a{
display: block;
display: block;
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
Line 94: Line 110:
line-height: 40px; /*centers the text vertically*/
line-height: 40px; /*centers the text vertically*/
}
}
-
/*arrows to signify dropout menus*/
+
/*arrows to signify dropout menus; to be moved to JQ block*/
#nav li a.drop:after{
#nav li a.drop:after{
content: '>';
content: '>';
 +
padding-right: 20px;
color: #BBB;
color: #BBB;
display: inline;
display: inline;
Line 106: Line 123:
color: #43bbff;
color: #43bbff;
}
}
 +
/*mega dropdown styling*/
 +
 +
#nav li div{
 +
position: absolute;
 +
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
 +
-ms-filter:
 +
"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/
 +
background: -webkit-gradient(linear, left top, right bottom, from(#333333), to(#424242)); /* for webkit browsers */
 +
background: -moz-linear-gradient(left,  #202020,  #333); /* for firefox 3.6+ */
 +
}
 +
#nav li div.col_1{
 +
left: -999em;
 +
width: 180px;
 +
}
 +
#nav li div.col_2{
 +
width: 390px;
 +
height: auto;
 +
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
 +
-ms-filter:
 +
"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/
 +
background: -webkit-gradient(linear, left top, right bottom, from(#333333), to(#424242)); /* for webkit browsers */
 +
background: -moz-linear-gradient(left,  #202020,  #333); /* for firefox 3.6+ */
 +
}
 +
#nav li div.col_l, #nav li div.col_r{
 +
left: -999em;
 +
width: 180px;
 +
 +
}
 +
#nav li div.col_r{
 +
float: right;
 +
}
 +
#nav li:hover div.col_l{
 +
left: 160px;
 +
top: -3em;
 +
}
 +
#nav li:hover div.col_r{
 +
left: 340px;
 +
top: -3em;
 +
}
 +
/***End nav styling***/
/***End nav styling***/
Line 147: Line 204:
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a class="drop" href="#">Team</a>
<li><a class="drop" href="#">Team</a>
-
<div>
+
<div class="col_1">
 +
<a href="#">Undergraduates</a>
 +
<a href="#">Advisors</a>
 +
<a href="#">Supervisors</a>
</div>
</div>
</li>
</li>
-
<li><a class="drop" href="#">Project</a></li>
+
<li><a class="drop" href="#">Project</a>
-
<div>
+
<div name="col_2">
 +
<div class="col_l">
 +
<a class="dropheader" href="#">OVERVIEW</a>
 +
<a href="#">Data Page</a>
 +
<a class="dropheader" href="#">BIOSENSOR</a>
 +
<a href="#">Sensing NAs</a>
 +
<a href="#">Promoter Library</a>
 +
<a href="#">Electrochemistry</a>
 +
<a class="dropheader" href="#">FUEL CONVERSION</a>
 +
<a href="#">Decarboxylation</a>
 +
<a href="#">Desulfurization</a>
 +
<a href="#">Denitrification</a>
 +
<a href="#">Ring Cleavage</a>
 +
<a href="#">Flux Analysis</a>
 +
</div>
 +
 +
<div class="col_r">
 +
<a class="dropheader" href="#">KILLSWITCH</a>
 +
<a href="#">Riboswitches</a>
 +
<a href="#">Rhamnose Promoter</a>
 +
<a class="dropheader" href="#">BIOREACTOR</a>
 +
<a href="#">Design</a>
 +
<a href="#">Modelling</a>
 +
<a class="dropheader" href="#">FUTURE DIRECTIONS</a>
 +
<a class="dropheader" href="#">ATTRIBUTIONS</a>
 +
</div>
 +
</div>
</div>
 +
</li>
<li><a href="#">Parts</a></li>
<li><a href="#">Parts</a></li>
<li><a class="drop" href="#">Notebook</a></li>
<li><a class="drop" href="#">Notebook</a></li>
-
<div>
+
<div name="col_1">
</div>
</div>
<li><a class="drop" href="#">Outreach</a></li>
<li><a class="drop" href="#">Outreach</a></li>
-
<div>
+
<div name="col_1">
</div>
</div>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Sponsors</a></li>

Revision as of 17:15, 25 June 2012