"

From 2012.igem.org

MediaWiki:Print.css /*Ensure that the Sitenotice is above the body content*/

1. bodyContent {

z-index: 98; }

1. siteNotice {

z-index: 99; }

/* START DROP DOWN MENUS */ /* http://www.mediawiki.org/wiki/Extension:CSS_Dropdowns#Adding_it_to_your_site */

div#siteNotice {

       width:100%;     /* makes the entire box full width */
       float:left; /*makes the  entire box  enclose the list */
       font-size:1.3em; /* SET FONT-SIZE HERE */
       background-color:#FFFFFF; /* colors the background  behind the box*/ 

a:link {color: #FFFFFF;}

       background:#a0e37d; /*  BACKGROUND COLORS FOR ENTIRE BOX */ 
       margin:7px -2px -2px -2px;
       padding:0;      

} div#siteNotice li {

       float:left;     /* causes the list to align horizontally instead of stack */
       position:relative; /* positioning context for the absolutely positioned drop-down */
       list-style-type:none;   /* removes the bullet off each list item */
       background-color:#a0e37d; /*sets the background of the menu items */

       margin: -4px 0 0 0; /*Brings the menu items up */     
       padding:0 6px; /*creates space each side of menu item's text */

} div#siteNotice li:first-child {

       -moz-border-radius-topleft: .5em;
       padding-bottom:1px; /*to fix from rounded edge */
       border-top-left-radius: .5em;
       /* REMOVED: border-left:1px solid #002bb8; the first vertical line on the menu */
       }

div#siteNotice li:last-child {

       -moz-border-radius-topright: .5em;
       border-top-right-radius: .5em;
       padding-bottom:1px; /*to fix from rounded edge */
       }

div#siteNotice li:hover {

       background-color:#202020; /*Background of the menu items when hovered over */
       }

div#siteNotice a {

       display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
       color:#ff321a;  /* sets the LINK TEXT color */
       text-decoration: none;    /* removes underline */
       }

/* the horizontal menu ends here */ /* the drop-down starts here */ div#siteNotice ul li ul {

       margin:0; /* prevents the TEMP value inheriting from the horizontal menu  */
       position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
       width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
       left:-1px; /*aligns the drop exactly under the menu */
       }

div#siteNotice ul li ul li {

       margin: -1px 0 0 0; /* prevents the margin value inheriting from the horiz menu + bring menu items up  */
       width:100%; /* makes the list items fill the list container (ul) */
       
       list-style-type:none;   /* removes the bullet off each list item */
       list-style-image:none;  /* removes the bullet off each list item */
       padding:0 0 1px;
       -moz-border-radius-topright: 0;
       -moz-border-radius-topleft: 0;
       -moz-border-radius-bottomright: 0;
       -moz-border-radius-bottomleft: 0;
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       }

div#siteNotice ul li ul li:last-child {

       -moz-border-radius-bottomright: 1em;
       -moz-border-radius-bottomleft: 1em;
       -moz-border-radius-topleft: 0;  
       -moz-border-radius-topright: 0; 
       border-bottom-right-radius: 1em;
       border-bottom-left-radius: 1em;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       padding-right:1px; /*to fix from rounded edge */

} div#siteNotice ul li ul li:first-child {

       border-top:1px solid #069; /*the top edge of the dropdown */
       -moz-border-radius-topleft: 0;  
       border-top-left-radius: 0;

} /* make the drop-down display as the menu is rolled over */

div#siteNotice ul li ul {display:none;} /* conceals the drop-down when menu not hovered */

div#siteNotice ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* pop-out starts here */ body div#siteNotice ul li ul li ul {

       visibility:hidden; /* same effect as display:none in this situation */
       top:-1px;
       left:10em;
       }

div#siteNoticeul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* second level popouts start here*/

div#siteNotice ul li ul li:hover ul li ul {visibility:hidden;}

div#siteNotice ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* third level popouts start here I haven't tested this */

div#siteNotice ul li ul li ul li:hover ul li ul {visibility:hidden;}

div#siteNotice ul li ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* THE HACK ZONE - */

/* hack for IE (all flavors) so the menu has a vertical line on the left */

• html div#siteNotice ul {

       float:left; /* makes the ul wrap the li's */
       /* REMOVED: border-left:1px solid #002bb8; /* adds the rightmost menu vertical line to the ul  */
       margin-left:15px; /* IE doubles the given value above - why? */
       }

/* add a top line to drops and pops in IE browsers - can't read :first-child */

• html div#siteNotice ul li ul {

      /* REMOVED:  border-top:1px solid #002bb8;*/
       border-left:0px; /* stops the drop inheriting the ul border */
       }

/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */

• html div#siteNotice ul li ul li ul {

 left:9.85em; 
 voice-family: "\"}\""; 
 voice-family:inherit;
 left:10em;
 }

/* and the "be nice to Opera" rule */ html>body div#siteNotice ul li ul li ul {

 left:10em;
 }

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */ /* the first-level drop stays open for 100px below the bottom but at least it works */ /* this can be reduced to as little as 22px if you don't have pop-outs */ /* the pop-out menu stays open for 22px below the bottom but at least it works

Not Tested!! */

       @media all and (min-width: 0px){
  body div#siteNotice ul li ul {padding-bottom:200px;}
  body div#siteNotice ul li ul li ul {padding-bottom:22px;}
  body div#siteNotice ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */
  }

/*end Opera hack */

/* end of hack zone */

/* END OF LIST-BASED MENU */

/* finally after feeding values to all others, we deal with MAc5 IE */ /* IE5 Mac can't do drop-downs so we need to present the info in a different way*/ /* we present the drop down choices in a row and never show any second-level drops */

/* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and ("   

Not Tested!!*/ @import("/wiki/skins/common/dropdown/ie51_menu_hack.css"); /* END OF DROP DOWN MENUS */