/*	Mac-style styles
	================  */

/*
	The problem I referred to as The Glass Ceiling (where a transparent
	overlay prevents events from reaching its siblings) is solved by using
	the CSS property setting "pointer-events: null".
	
	Here's the new z order:
	
	z-index  5:  rounded corners
	z-index  4:  menubar
	z-index  3:  windows
	z-index  2:  desktop objects, e.g. selection rectangle
	z-index  1:  -
	z-index  0:  desktop picture     (draws under siblings but over parent's background)
	
*/

/* Our Mac OS screen-within-a-window */
#screen
{
	/* Set up a positioning context for our children */
	position: absolute;
	
	/* Scale to fit. */
	width: 100%;
	height: 100%;
	
	background-color: #999;   /* default desktop background */
	color: black;             /* silence warning */
	
	/* clip content exceeding screen bounds */
	overflow: hidden;
}

/* Our Mac OS screen-within-a-window */
#window-manager
{
	/* Set up a positioning context for our children */
	position: absolute;
	
	/* Scale to fit. */
	width: 100%;
	height: 100%;
	
	background-color: transparent;
	color: black;             /* silence warning */
}

#window-manager:hover
{
	cursor: default;
}

#window-manager > *
{
	position: absolute;  /* All screen elements are absolutely positioned */
}

/* Desktop Picture, if any. */
/* e.g. http://stahlforce.com/desktop/4-1024-water-poles-moon-desktop-background.jpg */

#desktop-picture
{
	/* Place behind menubar and screen corners. */
	z-index: 0;
	
	/* Scale to fit the screen. */
	width: 100%;
	height: 100%;
}

/* The rounded corners of the screen, in their own layer. */
.screen-corners
{
	position: absolute;
	
	/* Fill the screen. */
	width: 100%;
	height: 100%;
	
	z-index: 5;  /* rounded corners uber alles */
	
	background: transparent;
	
	pointer-events: none;
}

.menubar .bottom.corner { display: none }

.corner
{
	position: absolute;  /* corner images must be placed exactly */
	display: block;      /* implicit to absolute positioning */
}

/* Each image in its corner of the screen, flush with the edges */
.top.corner    { top:    0% }
.left.corner   { left:   0% }
.right.corner  { right:  0% }
.bottom.corner { bottom: 0% }

/* Only show the first 5px from the corner */
.top.left.corner     { clip: rect( 0px, 5px, 5px, 0px ) }
.top.right.corner    { clip: rect( 0px, 8px, 5px, 3px ) }
.bottom.left.corner  { clip: rect( 3px, 5px, 8px, 0px ) }
.bottom.right.corner { clip: rect( 3px, 8px, 8px, 3px ) }

/*
This is the image for all corners:

@ @ @ @ @ @ @ @
@ @ @     @ @ @
@ @         @ @
@             @
@             @
@ @         @ @
@ @ @     @ @ @
@ @ @ @ @ @ @ @
*/