Team:TU-Delft/Templates/Style

From 2013.igem.org

(Difference between revisions)
Line 41: Line 41:
/* Layout */
/* Layout */
/**********/
/**********/
 +
/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */
 +
 +
 +
/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */
/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */
Line 189: Line 193:
#menu {
#menu {
-
width: 960px;
+
width: 850px;
-
margin: 60px auto;
+
margin: 0 auto;
-
border: 1px solid #222;
+
background: #4A4A4A url('../img/menu-bg.gif') repeat-x 0 0;
-
background-color: #111;
+
-
background-image: linear-gradient(#444, #111);
+
-
border-radius: 6px;
+
-
box-shadow: 0 1px 1px #777;
+
-
}
+
-
#menu:before,
+
-
#menu:after {
+
-
content: "";
+
-
display: table;
+
}
}
-
#menu:after {
 
-
clear: both;
 
-
}
 
-
 
-
#menu {
 
-
zoom:1;
 
-
}
 
#menu li {
#menu li {
-
float: left;
+
display: inline;
-
border-right: 1px solid #222;
+
list-style-type: none;
-
box-shadow: 1px 0 0 #444;
+
-
position: relative;
+
}
}
-
#menu a {
+
#menu li.first a {
-
float: left;
+
margin-left: 1.6em;
-
padding: 12px 17px;
+
display: inline;
-
color: #999;
+
-
text-transform: uppercase;
+
-
font: bold 10px Arial, Helvetica;
+
-
text-decoration: none;
+
-
text-shadow: 0 1px 0 #000;
+
}
}
-
#menu li:hover > a {
+
#menu li a {
-
color: #fafafa;
+
float: left;
 +
color: #FFFFFF;
 +
font-weight: normal;
 +
text-decoration: none;
 +
font-size: 1.1em;
 +
line-height: 33px;
 +
margin: 0 0.5em;
 +
padding: 0 1em;
}
}
-
*html #menu li a:hover { /* IE6 only */
+
#menu li a:hover {
-
color: #fafafa;
+
text-decoration: underline;
-
}
+
-
</style>
+
-
<style>
+
-
#menu ul {
+
-
margin: 20px 0 0 0;
+
-
_margin: 0; /*IE6 only*/
+
-
opacity: 0;
+
-
visibility: hidden;
+
-
position: absolute;
+
-
top: 38px;
+
-
left: 0;
+
-
z-index: 1;   
+
-
background: #444;
+
-
background: linear-gradient(#444, #111);
+
-
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
+
-
border-radius: 3px;
+
-
transition: all .2s ease-in-out;
+
}
}
-
#menu li:hover > ul {
+
#menu li a.active {
-
opacity: 1;
+
font-weight: bold;
-
visibility: visible;
+
color: #B1EEFF;
-
margin: 0;
+
}
}
-
#menu ul ul {
+
.cleaning-box {  
-
top: 0;
+
min-height: 1px;
-
left: 150px;
+
-
margin: 0 0 0 20px;
+
-
_margin: 0; /*IE6 only*/
+
-
box-shadow: -1px 0 0 rgba(255,255,255,.3);
+
}
}
-
#menu ul li {
+
.cleaning-box:after {
-
float: none;
+
display: block;  
-
display: block;
+
clear: both;  
-
border: 0;
+
visibility: hidden;  
-
_line-height: 0; /*IE6 only*/
+
height: 0;  
-
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
+
font-size: 0;
 +
content: ' ';
}
}
-
#menu ul li:last-child {  
+
.hidden { /* Skip menu */
-
box-shadow: none;   
+
position: absolute;
-
}
+
top: -10000px;
-
 
+
left: 0;
-
#menu ul a {   
+
width: 1px;
-
padding: 10px;
+
height: 1px;
-
width: 130px;
+
overflow: hidden;
-
_height: 10px; /*IE6 only*/
+
-
display: block;
+
-
white-space: nowrap;
+
-
float: none;
+
-
text-transform: none;
+
-
}
+
-
 
+
-
#menu ul a:hover {
+
-
background-color: #0186ba;
+
-
background-image: linear-gradient(#04acec, #0186ba);
+
}
}

Revision as of 09:39, 19 April 2013