Team:Imperial College London/gooeymenu

From 2011.igem.org

hr{ margin:50px 0; color:#eee; }

ul li.active{ /*IE6 hack- hide gooey effect from that browser*/ _visibility: hidden; /*IE6 rule*/ }

/* ######### Gel Menu CSS ######### */

ul.gelbuttonmenu{ position:relative; padding: 0; margin: 0; margin-bottom:1em; text-align: center; //set value to "left", "center", or "right"*/ }

ul.gelbuttonmenu li{ display: inline; }

ul.gelbuttonmenu li a{ color: #633e29; font-weight:bold; padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/ margin-right: 12px; /*spacing between each menu link*/ text-decoration: none; }

ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0; background:#E1CCB5; background:url('https://static.igem.org/mediawiki/2011/4/43/ICL_gelbuttonleft.gif') no-repeat left top, url('https://static.igem.org/mediawiki/2011/e/eb/ICL_gelbuttonright.gif') no-repeat right top, url('https://static.igem.org/mediawiki/2011/7/78/ICL_gelbuttoncenter.gif') repeat-x center top; }



/* ######### Solid Block Menu CSS ######### */


ul.solidblockmenu{ margin: 0; margin-bottom:1em; padding: 0; list-style: none; position:relative; text-align: center; //set value to "left", "center", or "right"*/ }

ul.solidblockmenu li{ display: inline; }

ul.solidblockmenu li a{ font: bold 14px Arial, Verdana, sans-serif; color: black; padding: 8px; margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; }

ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0; border:1px solid black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; -moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7); -webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7); box-shadow: 2px 2px 4px rgba(120,120,120,0.7); background:#d7ed93; background: -moz-linear-gradient(top, #d7ed93, #fff); background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff)); background: linear-gradient(top, #d7ed93, #fff); }



/* ######### Thick Underline Menu CSS ######### */


ul.underlinemenu{ margin: 0; margin-bottom:1em; padding: 0; list-style: none; position:relative; text-align: center; //set value to "left", "center", or "right"*/ }

ul.underlinemenu li{ display: inline; }

ul.underlinemenu li a{ font: bold 14px Arial, Verdana, sans-serif; color: black; padding: 8px; margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; }


ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0; border-bottom:5px solid navy; }



/* ######### Frame Menu CSS ######### */


ul.framemenu{ margin: 0; margin-bottom:1em; padding: 0; list-style: none; position:relative; text-align: center; //set value to "left", "center", or "right"*/ }

ul.framemenu li{ display: inline; }

ul.framemenu li a{ font: bold 14px Arial, Verdana, sans-serif; color: black; padding: 12px 10px 5px 18px; margin-right: 10px; /*spacing between each menu link*/ text-decoration: none; }


ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0; border:4px solid orange; -moz-box-shadow: 0 0 4px rgba(120,120,120,0.7); -webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7); box-shadow: 0 0 4px rgba(120,120,120,0.7); }