/* 
MONDAY BY NOON
Suckerfish HoverLightbox Example - Vanilla Vertical stylesheet
Version: 1.0
Last Modified 03/27/06
J. Christopher - www.MondayByNoon.com

CREDITS
-------

Suckerfish: Patrick Griffiths, Dan Webb
    http://www.alistapart.com/articles/dropdowns/
  Modification: http://www.htmldog.com/articles/suckerfish/dropdowns/

Hoverbox: Nathan Smith.
  Example: http://host.sonspring.com/hoverbox/
  Tutorial: http://sonspring.com/journal/hoverbox-image-gallery/
  Modification by: Craig Erskine
    http://solardreamstudios.com/
    http://solardreamstudios.com/_img/learn/css/pg/

Lightbox: Lokesh Dhakar
  http://www.huddletogether.com/projects/lightbox/

*/
#milk {position:absolute; z-index:1; width:100%; height:100%; top:0; left:0;}
#menu {width:80%; height:50%; position:absolute; left:10%; top:50%;z-index:85;overflow:visible;}
/* for understanding browsers */
#content {
width:50%;
max-height:50%;
position:absolute;
right:7%;
top:20%;
background-color:white;
color:gray;
border:8px solid #D3D3D3;
overflow:auto;
z-index:4;
padding:10px;
}
/* for Internet Explorer */
/*\*/
* html #content {
height: 40%;
}
/**/
#content li {list-style:none;padding:0; margin:0;}
p { clear:both; }
ul, li {margin:0;padding:0;}
/* REGULAR MENU */
ul#regular {position:relative;top:7%; margin:0 0 0 0; list-style:none; }
ul#regular li#first { border-top:1px solid #ccc; }
ul#regular li { clear:both; width:13%; position:relative; }
ul#regular li:hover ul, ul#regular li.sfhover ul { left:100%; }
ul#regular li a { display:block; width:100%; padding:.8em 0; color:gray; text-decoration:none; border-bottom:1px solid #ccc; }
ul#regular li a:hover { background-color:#fafafa; }
ul#regular li ul { padding:10px 40px 10px 50px; border:1px outset black; list-style:none; margin:0;background-color:#f5f5f5; position:absolute; left:-999em; top:-2px; }
ul#regular li ul li { display:inline; text-align:left; clear:none; position:static; z-index:2; } 
ul#regular li ul li a { margin:2px; border:1px solid #ccc; padding:4px; position:relative; float:left; display:block; width:100px;}
ul#regular li ul li a:hover { z-index:2;background-color:gray;color:#fafafa; }
ul#regular li ul li a img { position:absolute; width:100px; height:75px; }
ul#regular li ul li a:hover img, ul#regular li a:active img, ul#regular li a:focus img { width:200px; height:150px; left:-50px; top:-37px; border:1px solid #000; z-index:2000; }

/* GALLERY */
ul#gallery { position:relative;top:7%;margin:0 0 75px 0; list-style:none; }
ul#gallery li#first { border-top:1px solid #ccc; }
ul#gallery li { clear:both; width:13%; position:relative; }
ul#gallery li:hover ul, ul#gallery li.sfhover ul { left:100%; }
ul#gallery li a { display:block; width:100%; padding:.8em 0; color:gray; text-decoration:none; border-bottom:1px solid #ccc; }
ul#gallery li a:hover { background-color:#fafafa; }
ul#gallery li ul { padding:10px 40px 10px 50px; border:1px outset black; list-style:none; margin:0; width:475px; background-color:#f5f5f5; position:absolute; left:-999em; bottom:-40px; }
ul#gallery li ul li { display:inline; text-align:left; clear:none; position:static; z-index:2; } 
ul#gallery li ul li a { margin:2px; border:1px solid #ccc; padding:4px; position:relative; float:left; display:block; width:100px; height:75px; }
ul#gallery li ul li a:hover { z-index:2; }
ul#gallery li ul li a img { position:absolute; width:100px; height:75px; }
ul#gallery li ul li a:hover img, ul#gallery li a:active img, ul#gallery li a:focus img { width:200px; height:150px; left:-50px; top:-37px; border:1px solid #000; z-index:2000; }